zfire-newmall-admin/src/views/workOrder/settleAccountsManagement/summaryBill/detailList.vue

<template>
	<div class="s-page">
		<el-page-header @back="goBack" :content="title"></el-page-header>
		<el-divider></el-divider>
		<el-row style="margin-bottom: 10px;">
			<el-col :span="24">
				<el-button size="small" type="primary" @click="getList()">刷新</el-button>
				<el-button size="small" type="primary" @click="derive()">导出</el-button>
			</el-col>
		</el-row>
		<el-table :span-method="objectSpanMethod" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
			<el-table-column prop="poolId" label="账单编号" align="center" width="180"></el-table-column>
			<el-table-column prop="month" align="center" label="月份"></el-table-column>
			<el-table-column prop="companyWechatName" align="center" label="所属商户" width="180"></el-table-column>
			<el-table-column prop="websitName" align="center" label="网点名称" width="180"></el-table-column>
			<el-table-column prop="workerName" align="center" label="工程师信息" width="110"></el-table-column>
			<el-table-column prop="workerMobile" align="center" label="联系电话"></el-table-column>
			<el-table-column prop="workerIdcard" align="center" label="身份证"></el-table-column>
			<el-table-column prop="totalAmount" align="center" label="结算金额 (元)" width="110"></el-table-column>
			<el-table-column prop="status" align="center" label="发放状态">
				<template slot-scope="scope">
					{{scope.row.status == 'NO'?'未发放':scope.row.status == 'YES'?'已发放':''}}
				</template>
			</el-table-column>
			<el-table-column prop="poolCreateBy" align="center" label="汇总人" width="180"></el-table-column>
			<el-table-column prop="poolCreateTime" align="center" label="汇总时间" width="160"></el-table-column>
			<el-table-column prop="poolUpdateBy" align="center" label="发放人" width="180"></el-table-column>
			<el-table-column prop="poolUpdateTime" align="center" label="发放时间" width="160"></el-table-column>
			<el-table-column prop="orderBaseId" align="center" label="工单单号" width="220">
				<template slot-scope="scope">
					<div style="display: flex;text-align: left;" @click="copy(scope.row.orderBaseId)">
						<el-button type="text">{{scope.row.orderBaseId}}</el-button>
						<el-button type="text" style="margin-left: 10px;">复制</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="customerName" align="center" label="客户名字"></el-table-column>
			<el-table-column prop="customerMobile" align="center" label="客户电话" width="110"></el-table-column>
			<el-table-column prop="customerAddress" align="center" label="详细地址" width="180"></el-table-column>
			<el-table-column prop="orderStatus" align="center" label="工单状态"></el-table-column>
			<el-table-column prop="orderCreateTime" align="center" label="创建时间" width="160"></el-table-column>
			<el-table-column prop="workerEndTime" align="center" label="完工时间" width="160"></el-table-column>
			<el-table-column prop="orderType" align="center" label="工单类型"></el-table-column>
			<el-table-column prop="brand" align="center" label="产品品牌"></el-table-column>
			<el-table-column prop="orderSource" align="center" label="工单来源"></el-table-column>
			<el-table-column prop="parentCategoryName" align="center" label="产品大类"></el-table-column>
			<el-table-column prop="categoryName" align="center" label="产品小类"></el-table-column>
			<el-table-column prop="goodsName" align="center" label="机型名称"></el-table-column>
			<el-table-column prop="orderNum" align="center" label="数量"></el-table-column>
			<el-table-column prop="settleOrderType" align="center" label="结算单类型" width="110"></el-table-column>
			<el-table-column prop="installLabel" align="center" label="安装功率"></el-table-column>
			<el-table-column prop="installNormAmount" align="center" label="安装结算标准" width="110"></el-table-column>
			<el-table-column prop="repairLabel" align="center" label="质保类型"></el-table-column>
			<el-table-column prop="repairAmount" align="center" label="维修上门费" width="110"></el-table-column>
			<el-table-column prop="repairRate" align="center" label="维修费用结算比例" width="140"></el-table-column>
			<el-table-column prop="repairSettleAmount" align="center" label="维修费用"></el-table-column>
			<el-table-column prop="otherType" align="center" label="其他费用类型" width="110"></el-table-column>
			<el-table-column prop="otherLabel" align="center" label="其他费用规格" width="110"></el-table-column>
			<el-table-column prop="otherPrice" align="center" label="其他费用单价" width="110"></el-table-column>
			<!-- <el-table-column prop="" align="center" label="其他费用结算数量" width="140"></el-table-column> -->
			<el-table-column prop="examineProject" align="center" label="奖罚单考核项目" width="120"></el-table-column>
			<el-table-column prop="examineType" align="center" label="奖罚单考核类型" width="120"></el-table-column>
			<el-table-column prop="settleNum" align="center" label="结算数量"></el-table-column>
			<el-table-column prop="settleAmount" align="center" label="结算金额"></el-table-column>
			<el-table-column prop="remark" align="center" label="备注"></el-table-column>
			<el-table-column label="操作" align="center" width="80" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" style="color: #FF0000" @click="cancel(scope.row.id)">驳回</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { listPageV2,pageExport, cancel } from "@/api/workOrder/summaryBillDetail";
	export default {
		props: ['id','title'],
		data() {
			return {
				dataList: [],
				cellList: [], // 单元格数组
				count: null, // 计数
			};
		},
		computed: {},
		created() {
			if(this.id){
				this.getList()
			}
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('back');
			},
			getList(){
				listPageV2({id: this.id}).then(res => {
					this.dataList = res.data
					this.computeCell(res.data)
				})
			},
			cancel(id){
				this.$confirm(`请确定是否驳回该数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					cancel([id]).then(res => {
						if(res.code == 200){
							this.$message.success('审核成功！')
							this.goBack()
						}
					})
				});
			},
			copy(row) {
			    var oInput = document.createElement('input');
			    oInput.value = row;
			    document.body.appendChild(oInput);
			    oInput.select();
			    document.execCommand("Copy");
			    oInput.className = 'oInput';
			    oInput.style.display = 'none';
				this.$message({
					type: 'success',
					message: '复制成功!'
				});
			},
			computeCell(tableBody) {
				// 循环遍历表体数据
				for (let i = 0; i < tableBody.length; i++) {
					if (i == 0) {
					// 先设置第一项
					this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
					this.count = 0; // 初始计数为0
					console.log("索引", 0, this.count);
					} else {
					// 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
					if (tableBody[i].workerName == tableBody[i - 1].workerName) {
						// 如果相等
						this.cellList[this.count] += 1; // 增加计数
						this.cellList.push(0); // 相等就往cellList数组中追加0
						console.log("索引", i, this.count);
					} else {
						this.cellList.push(1); // 不等就往cellList数组中追加1
						this.count = i; // 将索引赋值为计数
						console.log("索引", i, this.count);
					}
					}
				}
			},
			// 第2步，将计算好的结果返回给el-table，这样的话表格就会根据这个结果做对应合并列渲染
			objectSpanMethod({ row, column, rowIndex, columnIndex }) {
				// 给第二列做单元格合并。0是第一列，1是第二列。
				if (columnIndex < 13) {
					console.log("单元格数组，若下一项为0，则代表合并上一项", this.cellList);
					const rowCell = this.cellList[rowIndex];
					if (rowCell > 0) {
					const colCell = 1;
					console.log(`动态竖向合并单元格, 第${colCell}列，竖向合并${rowCell}个单元格 `);
					return {
						rowspan: rowCell,
						colspan: colCell,
					};
					} else {
					// 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
					// 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
					return {
						rowspan: 0,
						colspan: 0,
					};
					}
				}
			},
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.s-page {
		padding: 20px;
		background-color: #ffffff;
	}
</style>