VUE复杂表格合并
<template> <div v-loading="loading" element-loading-text="Loading..."> <el-header class=""> <el-row class="top from " :gutter="20"> <el-col class="datatime"> <el-cascader v-model="value" :options="options" @change="changeDatatime" ></el-cascader> </el-col> <el-col :span="9"> <el-date-picker class="time" v-model="param.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间" @change="changeTime"> </el-date-picker>至 <el-date-picker class="time" v-model="param.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间" @change="changeTime"> </el-date-picker> </el-col> <el-col :span="13" class="function"> <el-button type="primary" @click="print" v-if="printShow">打印</el-button> <el-button type="primary" @click="exportData" v-if="exportShow">导出</el-button> <el-button @click="refresh()">刷新</el-button> </el-col> </el-row> <div class="btn "> <span>筛选：</span> <div class="publicBtn magBtn"> 物料 <el-input placeholder="物料" size="small" v-model="param.materialName"> <template #suffix> <i class="el-input__icon el-icon-search hand" @click="openMaterial"></i> </template> </el-input> </div> </div> </el-header> <el-main> <el-table :data="dataList" :span-method="objectSpanMethod" :header-cell-style="{background:'#F4F8FF'}" ref="multipleTable" tooltip-effect="dark" style="width: 100%"> <el-table-column prop="SaveTime" label="日期" align="center" width="130"></el-table-column> <el-table-column prop="AreaName" label="区域" align="center" width="150"></el-table-column> <el-table-column prop="CustomerCode" label="编号" align="center" width="150"></el-table-column> <el-table-column prop="CustomerName" label="姓名" align="center" width="250"></el-table-column> <el-table-column label="收购数量 （吨）" align="center" width="450"> <el-table-column prop="Net" label="日收购数" align="center" width="150"></el-table-column> <el-table-column prop="NetMouth" label="本月累计" align="center" width="150"> </el-table-column> <el-table-column prop="NetMouth" label="累计收购数" align="center" width="150"> </el-table-column> </el-table-column> <el-table-column label="扣称数量 （吨）" align="center" width="450"> <el-table-column prop="BuckleWeight" label="日扣称数" align="center" width="150"></el-table-column> <el-table-column prop="BuckleWeightMouth" label="本月累计" align="center" width="150"> </el-table-column> <el-table-column prop="BuckleWeightMouth" label="累计扣称数" align="center" width="150"> </el-table-column> </el-table-column> </el-table> </el-main> </div> <el-dialog title="物料" v-model="materialShow" :destroy-on-close="true" :close-on-click-modal="false"> <material-choose @material-choose="currentMaterial"></material-choose> </el-dialog> <el-dialog title="单位" v-model="customShow" :destroy-on-close="true" :close-on-click-modal="false"> <custom-choose @custom-choose="currentCustom"></custom-choose> </el-dialog> <el-dialog title="车辆" v-model="vehicleShow" custom-class="headerDialog" :destroy-on-close="true" :close-on-click-modal="false"> <vehicle-choose @vehicle-choose="currentVehicle"></vehicle-choose> </el-dialog> <el-dialog title="司机" v-model="driverShow" custom-class="headerDialog" :destroy-on-close="true" :close-on-click-modal="false"> <driver-choose @driver-choose="currentDriver"></driver-choose> </el-dialog> </template> <script> import axios from 'axios' import customChoose from "@/components/BasicData/Custom" import materialChoose from "@/components/BasicData/Material" import vehicleChoose from "@/components/BasicData/Vehicle" import driverChoose from "@/components/BasicData/Driver" export default { inject: ['reload'], components: { "custom-choose": customChoose, "material-choose": materialChoose, "vehicle-choose": vehicleChoose, "driver-choose": driverChoose }, data() { return { loading:true, materialShow: false, customShow: false, driverShow: false, vehicleShow: false, exportShow:true,//导出按钮 printShow:false,//打印按钮 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区' }], watchNum: 1, options: [{ value: '1', label: '当日' }, { value: '2', label: '当月' }, { value: '3', label: '一周' }, { value: '4', label: '一月' }, { value: '5', label: '三月' }, { value: '6', label: '半年' }, { value: '7', label: '一年' } ], value: '', param: { pageIndex: 1, pageSize: 10, bizSign: 'P', bizType: '', state: '1', timeFlag: '3', isBlankout: false, startTime: '', endTime: '', customName: '', materialName: '', carNumber: '', driverID: '', weightCode: '', orderNo: '', contractCode: '', identifier: 'WeightSumByCustomer', code: '' }, radioId: '', customRadio: '', dataList: [], cols: [], //表头 weightTotal: 0, query1List: [], query2List: [], query1: {}, query2Name: "", query1Param: { moduleName: 'JL', identifier: '' }, businessTypeList:{}, bizTypeList: [], formatSumList: [{ "Identifier": "WeightSumByCustomer", "Name": "称重记录汇总查询(单位)" }, { "Identifier": "WeightSumByMaterial", "Name": "称重记录汇总查询(物料)" }, { "Identifier": "WeightSumByCustomerAndMaterial", "Name": "称重记录汇总查询(单位+物料)" }, { "Identifier": "WeightSumByCarNumber", "Name": "称重记录汇总查询(车号)" }, { "Identifier": "WeightSumByCarNumberAndMaterial", "Name": "称重记录汇总查询(车号+物料)" }, { "Identifier": "WeightSumByCarNumberCustomerAndMaterial", "Name": "称重记录汇总查询(车号+单位+物料)" }, { "Identifier": "WeightSumByCustomerAndArea", "Name": "称重记录汇总查询(单位+收货地区)" }, { "Identifier": "WeightSumByCustomerAreaAndMaterial", "Name": "称重记录汇总查询(单位+收货地区+物料)" } ], } }, created() { //创建后挂载 let that = this; that.param.bizSign = that.$base.getQueryVariable('kind'); that.setButtonAuthority(); that.setDefault(); that.getQuery2List(); that.getQuery1List(); that.getBusinessTypeList(); setTimeout(function() { that.getWeightList(); }, 2000); }, mounted() { }, methods: { //设置按钮权限 setButtonAuthority(){ let that=this; let authorityList=that.$store.state.AuthorityList; let hasItem; if(that.param.bizSign=='S'){ hasItem = authorityList.some(k => { return k.FunctionCode == 'BS01030201'&&k.IsEnable==1 }); if(hasItem){ that.exportShow=true; } hasItem = authorityList.some(k => { return k.FunctionCode == 'BS01030202'&&k.IsEnable==1 }); if(hasItem){ that.printShow=true; } } else if(that.param.bizSign=='P'){ hasItem = authorityList.some(k => { return k.FunctionCode == 'BP01030201'&&k.IsEnable==1 }); if(hasItem){ that.exportShow=true; } hasItem = authorityList.some(k => { return k.FunctionCode == 'BP01030202'&&k.IsEnable==1 }); if(hasItem){ that.printShow=true; } } else if(that.param.bizSign=='E'){ hasItem = authorityList.some(k => { return k.FunctionCode == 'BT01030201'&&k.IsEnable==1 }); if(hasItem){ that.exportShow=true; } hasItem = authorityList.some(k => { return k.FunctionCode == 'BT01030202'&&k.IsEnable==1 }); if(hasItem){ that.printShow=true; } } else if(that.param.bizSign=='O'){ hasItem = authorityList.some(k => { return k.FunctionCode == 'B001030201'&&k.IsEnable==1 }); if(hasItem){ that.exportShow=true; } hasItem = authorityList.some(k => { return k.FunctionCode == 'BO01030202'&&k.IsEnable==1 }); if(hasItem){ that.printShow=true; } } else if(that.param.bizSign=='A'){ that.exportShow=true; //that.printShow=true; } if(that.$store.state.isCustomUser==true){ that.exportShow=true; //that.printShow=true; } }, print(){ this.$router.push({ path: '/WeightSumPrint', query: { pageIndex: this.param.pageIndex, pageSize: this.param.pageSize, bizSign: this.param.bizSign, bizType: this.param.bizType, state: this.param.state, timeFlag: this.param.timeFlag, isBlankout: this.param.isBlankout, startTime: this.param.startTime, endTime: this.param.endTime, customName: this.param.customName, materialName: this.param.materialName, carNumber: this.param.carNumber, driverID: this.param.driverID, weightCode: this.param.weightCode, contractCode: this.param.contractCode, orderNo: this.param.orderNo, identifier: this.param.identifier, code: this.param.code } }) }, //分页 handleCurrentChange(pageIndex) { this.param.pageIndex = pageIndex; this.getWeightList(); }, handleSizeChange(pageSize) { this.param.pageSize = pageSize this.getWeightList() }, changeTime(val){ this.getWeightList(); }, changeDatatime(value) { let that = this; this.param.startTime = that.$base.getStartTime(value); this.param.endTime = that.$base.getDateNow() + " 23:59:59"; that.getWeightList(); }, setDefault() { let that = this; that.value = "1"; this.param.startTime = that.$base.getStartTime(that.value); this.param.endTime = that.$base.getDateNow() + " 23:59:59"; }, refresh() { let that = this; that.watchNum = 1; this.reload(); }, getWeightList() { let that = this; that.loading = true; that.$axios.Weight.getWeightListArea(that.param).then(res => { that.loading = false; console.log(res) if (res.errCode == 0) { //that.cols = res.result.cols; //that.weightTotal = res.result.total; that.dataList = res.result; that.watchNum = 2; that.getSpanArr(that.dataList); } else { that.$message.error(res.errMsg); } }).catch(err => { that.loading = false; that.$message.error(err.errMsg); }) }, //计算要合并的行和列 getSpanArr(data) { //console.log("assdssad", data) //从后台获取的数据 this.spanArr = [] this.spanArr2 = [] for (var i = 0; i < data.length; i++) { if (i == 0) { // 如果是第一条记录（即索引是0的时候），向数组中加入１ this.spanArr.push(1) this.spanArr2.push(1) this.pos = 0 this.pos2 = 0 } else { if (data[i].SaveTime == data[i - 1].SaveTime) { // 如果diggings相等就累加，并且push 0 this.spanArr[this.pos] += 1 this.spanArr.push(0) } else { // 不相等push 1 this.spanArr.push(1) this.pos = i } if (data[i].AreaName == data[i - 1].AreaName) { // 如果diggings相等就累加，并且push 0 this.spanArr2[this.pos2] += 1 this.spanArr2.push(0) } else { // 不相等push 1 this.spanArr2.push(1) this.pos2 = i } } } console.log("aaaa", this.spanArr) console.log("bbbb", this.spanArr2) }, //合并行和列 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.spanArr[rowIndex] let _col = 0 if (_row > 0) { _col = 1 } else { _col = 0 } return { rowspan: _row, colspan: _col } } if (columnIndex === 1) { const _row = this.spanArr2[rowIndex] let _col = 0 if (_row > 0) { _col = 1 } else { _col = 0 } return { rowspan: _row, colspan: _col } } }, openCustom() { this.customShow = true }, currentCustom(row) { this.param.customName = row.Name this.customShow = false this.getWeightList() }, openMaterial() { this.materialShow = true }, currentMaterial(row) { this.param.materialName = row.Name this.materialShow = false this.getWeightList() }, openVehicle() { this.vehicleShow = true }, currentVehicle(row) { this.param.carNumber = row.CarNumber this.vehicleShow = false this.getWeightList() }, openDriver() { this.driverShow = true }, currentDriver(row) { this.param.driverID = row.DriverID this.driverShow = false this.getWeightList() }, getQuery1List() { let that = this; that.query1Param.identifier = that.param.identifier; that.$axios.SystemSet.getQuery1List(that.query1Param).then(res => { console.log(res) if (res.errCode == 0) { that.query1List = res.result; if (res.result.length > 0) { that.param.code = res.result[0].Code; that.param.identifier = res.result[0].Identifier; } } else { that.$message.error(res.errMsg); } }).catch(err => { that.$message.error(err.errMsg); }) }, getQuery2List() { let that = this; that.query1Param.identifier = 'WeightSumBy'; that.$axios.SystemSet.getQuery1ListHz(that.query1Param).then(res => { console.log(res) if (res.errCode == 0) { that.query2List = res.result; if (res.result.length > 0) { that.param.code = res.result[0].Code; that.param.identifier = res.result[0].Identifier; } } else { that.$message.error(res.errMsg); } }).catch(err => { that.$message.error(err.errMsg); }) }, //导出数据 exportData() { let that = this; that.$axios.Weight.exportWeightListArea(that.param).then(res => { console.log(res) if (res.errCode == 0) { window.open(axios.defaults.baseURL+res.result, '_blank'); toastr.info("数据导出中..."); } else { that.$message.error(res.errMsg); } }).catch(err => { that.$message.error(err.errMsg); }) }, getBusinessTypeList() { let that = this; that.$axios.CommonBasicData.getBusinessTypeList({kind:that.param.bizSign}).then(res => { console.log(res) if (res.errCode == 0) { that.businessTypeList = res.result; } else { that.$message.error(res.errMsg); } }).catch(err => { that.$message.error(err.errMsg); }) }, changeCheckbox: function () { let that = this; that.param.bizType = that.bizTypeList.join(','); }, }, computed: { // 已完成事项的数量 }, watch: { "param.startTime": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.endTime": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.timeFlag": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.isBlankout": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.customName": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.materialName": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.bizType": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.state": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.weightCode": function (curVal, oldVal) { this.getWeightList(); }, "param.contractCode": function (curVal, oldVal) { this.getWeightList(); }, "param.orderNo": function (curVal, oldVal) { this.getWeightList(); }, "param.carNumber": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.code": function (curVal, oldVal) { if (this.watchNum > 1) { this.getWeightList(); } }, "param.identifier": function (curVal, oldVal) { if (this.watchNum > 1) { this.getQuery1List(); this.getWeightList(); } } } } </script> <style scoped="scoped" lang="less"> .el-header { padding: 24px; height: auto !important; .datatime { width: 98px !important; flex: 0 0 98px !important; } .query1List { width: 200px !important; flex: 0 0 98px !important; margin-right: 20px; } .format { width: 80%; } .function { text-align: right; } .title { width: 42px; display: inline-block; } .type { margin-top: 12px; font-size: 14px; color: #595959; line-height: 22px; .el-checkbox-group { display: inline-block; } } .radio { width: 720px; font-size: 14px; color: #595959; line-height: 22px !important; height: 22px !important; margin-top: 15px; .state, .audit { display: inline-block; .el-radio-group { vertical-align: text-bottom; } } .audit { margin-left: 35px; } } .btn { margin-top: 15px; .publicBtn { display: inline-block; .el-input { margin-left: 8px; width: 219px !important; } } .magBtn { margin-left: 24px; } } } .el-main { padding-top: 0px; } .tree { margin-right: 12px; border: 1px solid #F4F8FF; } .topSpan { box-sizing: border-box; display: inline-block; width: 100%; height: 44px; line-height: 44px; background-color: #F4F8FF; padding-left: 28px; font-size: 14px; } .but .el-button--primary.is-plain { margin: 10px; } </style>
[
{
"SaveTime": "2021-12-21",
"AreaName": "晋城",
"CustomerCode": "020002",
"CustomerName": "玉米芯料款（0501）",
"Net": 0,
"BuckleWeight": 0,
"NetMouth": 0,
"BuckleWeightMouth": 0
},
{
"SaveTime": "2021-12-21",
"AreaName": "晋城",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 0,
"BuckleWeight": 0,
"NetMouth": 0,
"BuckleWeightMouth": 0
},
{
"SaveTime": "2021-12-22",
"AreaName": "焦作",
"CustomerCode": "020042",
"CustomerName": "玉米芯料款（0101）",
"Net": 4180,
"BuckleWeight": 83.6,
"NetMouth": 4180,
"BuckleWeightMouth": 83.6
},
{
"SaveTime": "2021-12-22",
"AreaName": "焦作",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 4180,
"BuckleWeight": 83.6,
"NetMouth": 4180,
"BuckleWeightMouth": 83.6
},
{
"SaveTime": "2021-12-22",
"AreaName": "晋城",
"CustomerCode": "020003",
"CustomerName": "玉米芯料款（0502）",
"Net": 20840,
"BuckleWeight": 1452.4,
"NetMouth": 20840,
"BuckleWeightMouth": 1452.4
},
{
"SaveTime": "2021-12-22",
"AreaName": "晋城",
"CustomerCode": "020004",
"CustomerName": "玉米芯料款（0503）",
"Net": 8700,
"BuckleWeight": 609,
"NetMouth": 8700,
"BuckleWeightMouth": 609
},
{
"SaveTime": "2021-12-22",
"AreaName": "晋城",
"CustomerCode": "020007",
"CustomerName": "玉米芯料款（0506）",
"Net": 92640,
"BuckleWeight": 1812,
"NetMouth": 92640,
"BuckleWeightMouth": 1812
},
{
"SaveTime": "2021-12-22",
"AreaName": "晋城",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 122180,
"BuckleWeight": 3873.4,
"NetMouth": 122180,
"BuckleWeightMouth": 3873.4
},
{
"SaveTime": "2021-12-23",
"AreaName": "长治",
"CustomerCode": "020040",
"CustomerName": "玉米芯料款（0515）",
"Net": 10020,
"BuckleWeight": 902,
"NetMouth": 10020,
"BuckleWeightMouth": 902
},
{
"SaveTime": "2021-12-23",
"AreaName": "长治",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 10020,
"BuckleWeight": 902,
"NetMouth": 10020,
"BuckleWeightMouth": 902
},
{
"SaveTime": "2021-12-23",
"AreaName": "焦作",
"CustomerCode": "020042",
"CustomerName": "玉米芯料款（0101）",
"Net": 3820,
"BuckleWeight": 38,
"NetMouth": 8000,
"BuckleWeightMouth": 121.6
},
{
"SaveTime": "2021-12-23",
"AreaName": "焦作",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 3820,
"BuckleWeight": 38,
"NetMouth": 8000,
"BuckleWeightMouth": 121.6
},
{
"SaveTime": "2021-12-23",
"AreaName": "晋城",
"CustomerCode": "020002",
"CustomerName": "玉米芯料款（0501）",
"Net": 10020,
"BuckleWeight": 902,
"NetMouth": 10020,
"BuckleWeightMouth": 902
},
{
"SaveTime": "2021-12-23",
"AreaName": "晋城",
"CustomerCode": "020003",
"CustomerName": "玉米芯料款（0502）",
"Net": 19200,
"BuckleWeight": 290,
"NetMouth": 40040,
"BuckleWeightMouth": 1742.4
},
{
"SaveTime": "2021-12-23",
"AreaName": "晋城",
"CustomerCode": "020004",
"CustomerName": "玉米芯料款（0503）",
"Net": 9520,
"BuckleWeight": 190.4,
"NetMouth": 18220,
"BuckleWeightMouth": 799.4
},
{
"SaveTime": "2021-12-23",
"AreaName": "晋城",
"CustomerCode": "020007",
"CustomerName": "玉米芯料款（0506）",
"Net": 113140,
"BuckleWeight": 2769,
"NetMouth": 205780,
"BuckleWeightMouth": 4581
},
{
"SaveTime": "2021-12-23",
"AreaName": "晋城",
"CustomerCode": "020008",
"CustomerName": "玉米芯料款（0507）",
"Net": 17480,
"BuckleWeight": 611.6,
"NetMouth": 17480,
"BuckleWeightMouth": 611.6
},
{
"SaveTime": "2021-12-23",
"AreaName": "晋城",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 169360,
"BuckleWeight": 4763,
"NetMouth": 291540,
"BuckleWeightMouth": 8636.4
},
{
"SaveTime": "2021-12-24",
"AreaName": "焦作",
"CustomerCode": "020042",
"CustomerName": "玉米芯料款（0101）",
"Net": 22780,
"BuckleWeight": 416,
"NetMouth": 30780,
"BuckleWeightMouth": 537.6
},
{
"SaveTime": "2021-12-24",
"AreaName": "焦作",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 22780,
"BuckleWeight": 416,
"NetMouth": 30780,
"BuckleWeightMouth": 537.6
},
{
"SaveTime": "2021-12-24",
"AreaName": "晋城",
"CustomerCode": "020003",
"CustomerName": "玉米芯料款（0502）",
"Net": 9020,
"BuckleWeight": 451,
"NetMouth": 49060,
"BuckleWeightMouth": 2193.4
},
{
"SaveTime": "2021-12-24",
"AreaName": "晋城",
"CustomerCode": "020004",
"CustomerName": "玉米芯料款（0503）",
"Net": 11580,
"BuckleWeight": 116,
"NetMouth": 29800,
"BuckleWeightMouth": 915.4
},
{
"SaveTime": "2021-12-24",
"AreaName": "晋城",
"CustomerCode": "020007",
"CustomerName": "玉米芯料款（0506）",
"Net": 27740,
"BuckleWeight": 0,
"NetMouth": 233520,
"BuckleWeightMouth": 4581
},
{
"SaveTime": "2021-12-24",
"AreaName": "晋城",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 48340,
"BuckleWeight": 567,
"NetMouth": 312380,
"BuckleWeightMouth": 7689.8
},
{
"SaveTime": "2021-12-24",
"AreaName": "郑州",
"CustomerCode": "021581",
"CustomerName": "玉米芯料款（0201）",
"Net": 6180,
"BuckleWeight": 124,
"NetMouth": 6180,
"BuckleWeightMouth": 124
},
{
"SaveTime": "2021-12-24",
"AreaName": "郑州",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 6180,
"BuckleWeight": 124,
"NetMouth": 6180,
"BuckleWeightMouth": 124
},
{
"SaveTime": "2021-12-25",
"AreaName": "焦作",
"CustomerCode": "020042",
"CustomerName": "玉米芯料款（0101）",
"Net": 22600,
"BuckleWeight": 1267,
"NetMouth": 53380,
"BuckleWeightMouth": 1804.6
},
{
"SaveTime": "2021-12-25",
"AreaName": "焦作",
"CustomerCode": "合计",
"CustomerName": "",
"Net": 22600,
"BuckleWeight": 1267,
"NetMouth": 53380,
"BuckleWeightMouth": 1804.6
}
]
浙公网安备 33010602011771号