|
|
@@ -15,6 +15,8 @@
|
|
|
full-height="calc(100vh - 116px)"
|
|
|
tool-class="ele-toolbar-form"
|
|
|
:needPage="false"
|
|
|
+ :cell-class-name="setCellClass"
|
|
|
+ :span-method="spanMethod"
|
|
|
>
|
|
|
<!-- <template v-slot:action="{ row }">
|
|
|
<el-link
|
|
|
@@ -63,7 +65,12 @@
|
|
|
prop: `dateList[${i}][dateTotalNum]`,
|
|
|
label: `${month}/${i + 1}`,
|
|
|
align: 'center',
|
|
|
- showOverflowTooltip: true
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ formatter(row) {
|
|
|
+ return row.dateList[i].dateTotalNum
|
|
|
+ ? row.dateList[i].dateTotalNum
|
|
|
+ : '';
|
|
|
+ }
|
|
|
}));
|
|
|
|
|
|
let arr = [
|
|
|
@@ -126,194 +133,6 @@
|
|
|
label: '日期/数量',
|
|
|
align: 'center',
|
|
|
showOverflowTooltip: true,
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // prop: 'dateList[0][dateTotalNum]',
|
|
|
- // label: month + '/1',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[1][dateTotalNum]',
|
|
|
- // label: month + '/2',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[2][dateTotalNum]',
|
|
|
- // label: month + '/3',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[3][dateTotalNum]',
|
|
|
- // label: month + '/4',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[4][dateTotalNum]',
|
|
|
- // label: month + '/5',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[5][dateTotalNum]',
|
|
|
- // label: month + '/6',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[6][dateTotalNum]',
|
|
|
- // label: month + '/7',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[7][dateTotalNum]',
|
|
|
- // label: month + '/8',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[8][dateTotalNum]',
|
|
|
- // label: month + '/9',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[9][dateTotalNum]',
|
|
|
- // label: month + '/10',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[10][dateTotalNum]',
|
|
|
- // label: month + '/11',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[11][dateTotalNum]',
|
|
|
- // label: month + '/12',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[12][dateTotalNum]',
|
|
|
- // label: month + '/13',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[13][dateTotalNum]',
|
|
|
- // label: month + '/14',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[14][dateTotalNum]',
|
|
|
- // label: month + '/15',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[15][dateTotalNum]',
|
|
|
- // label: month + '/16',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[16][dateTotalNum]',
|
|
|
- // label: month + '/17',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[17][dateTotalNum]',
|
|
|
- // label: month + '/18',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[18][dateTotalNum]',
|
|
|
- // label: month + '/19',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[19][dateTotalNum]',
|
|
|
- // label: month + '/20',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[20][dateTotalNum]',
|
|
|
- // label: month + '/21',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[21][dateTotalNum]',
|
|
|
- // label: month + '/22',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[22][dateTotalNum]',
|
|
|
- // label: month + '/23',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[23][dateTotalNum]',
|
|
|
- // label: month + '/24',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[24][dateTotalNum]',
|
|
|
- // label: month + '/25',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[25][dateTotalNum]',
|
|
|
- // label: month + '/26',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[26][dateTotalNum]',
|
|
|
- // label: month + '/27',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[27][dateTotalNum]',
|
|
|
- // label: month + '/28',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[28][dateTotalNum]',
|
|
|
- // label: month + '/29',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[29][dateTotalNum]',
|
|
|
- // label: month + '/30',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'dateList[30][dateTotalNum]',
|
|
|
- // label: month + '/31',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // }
|
|
|
- // ]
|
|
|
children: dateColumns
|
|
|
}
|
|
|
];
|
|
|
@@ -325,107 +144,47 @@
|
|
|
data() {
|
|
|
return {
|
|
|
date: ''
|
|
|
- // columns: [
|
|
|
- // {
|
|
|
- // type: 'index',
|
|
|
- // label: '序号',
|
|
|
- // width: 50,
|
|
|
- // align: 'center'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'code',
|
|
|
- // label: '客户',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'name',
|
|
|
- // label: '件号',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'createUserName',
|
|
|
- // label: '件名',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'startTime',
|
|
|
- // label: '期初素材',
|
|
|
- // slot: 'startTime',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'endTime',
|
|
|
- // label: '结存合计',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'endTime',
|
|
|
- // label: '小计',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'endTime',
|
|
|
- // label: '类别',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // prop: 'endTime',
|
|
|
- // label: '日期/数量',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true,
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // prop: 'province',
|
|
|
- // label: '1',
|
|
|
- // align: 'center',
|
|
|
- // showOverflowTooltip: true
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // }
|
|
|
- // ]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // downLoad(row) {
|
|
|
- // sendReceiveGatherExcel({
|
|
|
- // code: row.code,
|
|
|
- // name: row.name,
|
|
|
- // startTime: row.startTime,
|
|
|
- // endTime: row.endTime,
|
|
|
- // exportStatus: 1
|
|
|
- // }).then((data) => {
|
|
|
- // try {
|
|
|
- // let objectUrl1 = window.URL.createObjectURL(new Blob([data]));
|
|
|
- // let elink = document.createElement('a');
|
|
|
- // elink.setAttribute(
|
|
|
- // 'download',
|
|
|
- // decodeURI(decodeURI('收发汇总表.xlsx'))
|
|
|
- // );
|
|
|
- // elink.style.display = 'none';
|
|
|
- // elink.href = objectUrl1;
|
|
|
- // document.body.appendChild(elink);
|
|
|
- // elink.click();
|
|
|
- // document.body.removeChild(elink);
|
|
|
- // window.URL.revokeObjectURL(elink.href);
|
|
|
- // this.search();
|
|
|
- // } catch (err) {
|
|
|
- // this.$message.error('导出失败,请联系管理员!');
|
|
|
- // }
|
|
|
- // });
|
|
|
- // },
|
|
|
+ setCellClass({ row, column }) {
|
|
|
+ // console.log(row, column, rowIndex, columnIndex);
|
|
|
+ let day = column.label.split('/')[1];
|
|
|
+ let num = row.dateList[day - 1];
|
|
|
+ if (!num) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ return num?.dateTotalNum ? 'content-num' : '';
|
|
|
+ },
|
|
|
+
|
|
|
+ spanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (
|
|
|
+ column.property === 'startNum' ||
|
|
|
+ column.property === 'endNum' ||
|
|
|
+ column.property === 'totalNum'
|
|
|
+ ) {
|
|
|
+ const groupStartIndex = Math.floor(rowIndex / 5) * 5;
|
|
|
+ if (rowIndex === groupStartIndex) {
|
|
|
+ // 每组的第一行,合并 5 行
|
|
|
+ return {
|
|
|
+ rowspan: 5,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 每组的非第一行,隐藏单元格
|
|
|
+ return {
|
|
|
+ rowspan: 0,
|
|
|
+ colspan: 0
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 其他列不进行合并
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ },
|
|
|
|
|
|
- // add(isView, row) {
|
|
|
- // console.log('isView--', isView);
|
|
|
- // console.log('row-----', row);
|
|
|
- // this.$refs.addRef.open(isView, row);
|
|
|
- // },
|
|
|
/* 表格数据源 */
|
|
|
datasource({ page, limit, where, order }) {
|
|
|
return sendReceiveGatherExcel({
|
|
|
@@ -486,4 +245,9 @@
|
|
|
:deep(.ele-pro-table-header-ellipsis > .el-table th.el-table__cell > .cell) {
|
|
|
white-space: pre;
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.content-num) {
|
|
|
+ color: #000;
|
|
|
+ background-color: #53c77f !important;
|
|
|
+ }
|
|
|
</style>
|