kd-aiot-frontend-wms/src/views/warehouseManagement/statisticalReports/transceiverSummary/index.vue

<template>
  <div id="inventoryBalance">
    <el-card shadow="never">
      <!-- 数据表格 -->
      <div>
        <search-table @search="reload"></search-table>
      </div>
      <ele-pro-table
        ref="table"
        class="table"
        :columns="columns"
        :pageSize="20"
        :datasource="datasource"
        height="calc(100vh - 405px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        :needPage="false"
      >
        <!-- <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="add(true, row)"
          >
            详情
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-download"
            @click="downLoad(row)"
          >
            下载
          </el-link>
        </template> -->
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import searchTable from './components/searchTable.vue';
  import { sendReceiveGatherExcel } from '@/api/warehouseManagement/statisticalReports';

  export default {
    components: { searchTable },
    computed: {
      columns() {
        let year, month, days;

        if (this.date) {
          year = this.date.split('-')[0];
          month = this.date.split('-')[1].replace(/^0+/, '');
          days = new Date(year, month, 0).getDate();
        } else {
          year = new Date().getFullYear();
          month = new Date().getMonth() + 1;
          days = new Date(year, month, 0).getDate();
        }

        let dateColumns = Array.from({ length: days }, (_, i) => ({
          prop: `dateList[${i}][dateTotalNum]`,
          label: `${month}/${i + 1}`,
          align: 'center',
          showOverflowTooltip: true
        }));

        let arr = [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center'
          },
          {
            prop: 'clientName',
            label: '客户',
            align: 'center',
            width: 200,
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '件号',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '件名',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'startNum',
            label: '期初\n素材',
            slot: 'startTime',
            align: 'center',
            width: 80,
            showOverflowTooltip: true
          },
          {
            prop: 'endNum',
            label: '结存\n合计',
            align: 'center',
            width: 0,
            showOverflowTooltip: true
          },
          {
            prop: 'totalNum',
            label: '小计',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'category',
            label: '类别',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'dateList',
            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
          }
        ];

        return arr;
      }
    },

    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('导出失败,请联系管理员!');
      //       }
      //     });
      //   },

      //   add(isView, row) {
      //     console.log('isView--', isView);
      //     console.log('row-----', row);
      //     this.$refs.addRef.open(isView, row);
      //   },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return sendReceiveGatherExcel({
          ...where
          //   ...order,
          //   type: 2,
          //   keyWord: this.keyWord,
          //   pageNum: page,
          //   size: limit
        });
      },
      reload(where) {
        this.date = where.startDate ?? '';
        console.log(where);
        this.$refs.table.reload({ page: 1, where: where });
      }
    }
  };
</script>
<style lang="scss" scoped>
  #inventoryBalance {
    height: calc(100vh - 96px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    // element-ui样式穿透
    :deep(.el-card) {
      height: 100%;
      .el-card__body {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .ele-pro-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            // display: flex;
            // flex-direction: column;
            // .el-table__body-wrapper {
            //   flex: 1;
            // }
          }
        }
      }
      .el-form-item {
        margin-bottom: 5px !important;
      }
    }
    .ele-form-actions {
      display: flex;
      justify-content: flex-end;
    }
  }

  :deep(.ele-pro-table-header-ellipsis > .el-table th.el-table__cell > .cell) {
    white-space: pre;
  }
</style>