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>
		<!-- 筛选条件 -->
		<div class="screen-container">
			<!-- <div class="top clearfix"><div class="title fl">条件筛选</div></div> -->
			<el-form ref="screenForm" :model="screenForm" label-width="110px" size="small" label-position="left">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="工单号" prop="orderBaseId">
							<el-input v-model="screenForm.orderBaseId" placeholder="请输入工单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="工单类型" prop="orderSmallType">
							<el-select v-model="screenForm.orderSmallType" filterable placeholder="请选择工单类型">
							   <el-option
							     v-for="item in orderTypeList"
							     :key="item.id"
							     :label="item.orderSmallTypeText"
							     :value="item.id">
							   </el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="结算单类型" prop="settleOrderType">
							<el-select v-model="screenForm.settleOrderType" filterable placeholder="请选择结算单类型">
							   <el-option
							     v-for="item in [{id: 'INSTALL',name:'安装'},{id: 'REPAIR',name:'维修'},{id: 'OTHER',name:'其他'},{id: 'EXAMINE',name:'奖罚单'}]"
							     :key="item.id"
							     :label="item.name"
							     :value="item.id">
							   </el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="工程师姓名" prop="workerName">
							<el-input v-model="screenForm.workerName" placeholder="请输入工程师姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="工程师身份证" prop="idcard">
							<el-input v-model="screenForm.idcard" placeholder="请输入工程师身份证"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="工程师联系电话" prop="mobile">
							<el-input v-model="screenForm.mobile" placeholder="请输入工程师联系电话"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="客户姓名" prop="customerName">
							<el-input v-model="screenForm.customerName" placeholder="请输入客户姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="客户电话" prop="customerMobile">
							<el-input v-model="screenForm.customerMobile" placeholder="请输入客户电话"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row style="margin-bottom: 20px;" type="flex" justify="space-between">
					<el-col :span="21">
						<el-button size="small" type="primary" @click="getList()">刷新</el-button>
						<el-button size="small" type="primary" @click="derive()">导出</el-button>
					</el-col>
					<el-col :span="3" style="display: flex;justify-content: flex-end;">
						<el-button size="small" @click="resetScreenForm()">清空</el-button>
						<el-button size="small" type="primary" @click="getList()">搜索</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<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">
				<template slot-scope="scope">
					{{scope.row.settleOrderType == 'INSTALL'?'安装':scope.row.settleOrderType == 'REPAIR'?'维修':scope.row.settleOrderType == 'OTHER'?'其他':scope.row.settleOrderType == 'EXAMINE'?'奖罚单':''}}
				</template>
			</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">
				<template slot-scope="scope">
					{{scope.row.examineType == 'PUNISH'?'惩罚':scope.row.examineType == 'REWARD'?'奖励':''}}
				</template>
			</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" v-if="scope.row.status == 'NO'">
					<el-button type="text" style="color: #FF0000" @click="cancel(scope.row.orderId,scope.row.poolId)">驳回</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { listPageV2,pageExport, cancel } from "@/api/workOrder/summaryBillDetail";
	import { getTypeList } from "@/api/workOrder/settlementStandardInstall";
	import { downloadFiles2 } from "@/utils/util.js";
	export default {
		props: ['id','title'],
		data() {
			return {
				dataList: [],
				orderTypeList: [],
				cellList: [], // 单元格数组
				count: null, // 计数
				screenForm: {
					customerMobile: '',
					customerName: '',
					idcard: '',
					mobile: '',
					orderSmallType: '',
					orderBaseId: '',
					settleOrderType: '',
					workerName: '',
				}
			};
		},
		computed: {},
		created() {
			if(this.id){
				this.getList()
			}
			this.getTypeList()
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('back');
			},
			getTypeList(){
				getTypeList({pageNum: 1,pageSize: -1,params: [{param: 'a.order_type',compare: '=',value: 'INSTALL'},{param: 'a.status',compare: '=',value: true}]}).then(res => {
					this.orderTypeList = res.data.records
				})
			},
			derive(){
				downloadFiles2('settle/order/export/pool/detail',{
					id: this.id,
					customerMobile: this.screenForm.customerMobile,
					customerName: this.screenForm.customerName,
					idcard: this.screenForm.idcard,
					mobile: this.screenForm.mobile,
					orderSmallType: this.screenForm.orderSmallType,
					orderBaseId: this.screenForm.orderBaseId,
					settleOrderType: this.screenForm.settleOrderType,
					workerName: this.screenForm.workerName,
				},'汇总结算单明细')
			},
			getList(){
				this.cellList = []
				this.count = null
				listPageV2({
					id: this.id,
					customerMobile: this.screenForm.customerMobile,
					customerName: this.screenForm.customerName,
					idcard: this.screenForm.idcard,
					mobile: this.screenForm.mobile,
					orderSmallType: this.screenForm.orderSmallType,
					orderBaseId: this.screenForm.orderBaseId,
					settleOrderType: this.screenForm.settleOrderType,
					workerName: this.screenForm.workerName,
				}).then(res => {
					this.dataList = res.data
					this.computeCell(this.dataList)
				})
			},
			cancel(id,poolId){
				this.$confirm(`请确定是否驳回该数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					cancel({ids: [id],poolId}).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: '复制成功!'
				});
			},
			// 重置筛选表单
			resetScreenForm() {
				this.$refs.screenForm.resetFields();
				this.getList();
			},
			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>