kd-aiot-frontend-wms/src/views/warehouseManagement/inboundRequests/components/allTable.vue

<template>
  <div class="allTable">
    <el-card shadow="never">
      <ele-pro-table ref="table1" :columns="columns" :datasource="datasource" height="calc(100vh-300px)" :pageSize="20"
        @cell-click="cellClick" cache-key="systemRoleTable">
        <template v-slot:selection="{ row }">
          <el-radio class="radio" v-model="currentId" :label="row.id"><i></i></el-radio>
        </template>
        <template v-slot:bizNo="{ row }">
          <el-link type="primary" :underline="false" @click="toDetail(row)">{{ row.bizNo }}</el-link>
        </template>
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="downLoad">导出</el-button>
        </template>
        <!-- 状态 -->
        <template v-slot:verifyStatus="{ row }">
          <span :class="status[row.verifyStatus].class">
            {{ status[row.verifyStatus].label }}
          </span>
        </template>
        <template v-slot:bizType="{ row }">
          {{ handleBizType(row.bizType, row.type) }}
        </template>
        <template v-slot:assetType="{ row }">
          {{ handleAssetType(row.extInfo.assetType) }}
        </template>
      </ele-pro-table>
      <tgDetails ref="tgDetailsRefs"></tgDetails>
    </el-card>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import storageApi from '@/api/warehouseManagement';
import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
import { allCategoryLevel } from '@/api/classifyManage';

import tgDetails from './tgDetails.vue';
import {
  warehousingType,
  sceneState,
  outputSceneState,
  auditStatus,
  useDict
} from '@/utils/dict/index';
export default {
  components: {
    tgDetails
  },
  data() {
    return {
      type: '',
      params: {},
      auditStatus,
      outputSceneState,
      warehousingType,
      sceneState,
      codeList: [],
      factoryList: [],
      tableData: [],
      formData: {
        deptIds: '',
        categoryCode: '',
        categoryName: '',
        sourceBizNo: '',
        startTime: '',
        endTime: '',
        status: '',
        factoryId: '',
        time: []
      },
      total: 0,
      status: [
        { label: '未审核', class: 'ele-text-info' },
        { label: '审核中', class: 'ele-text-primary' },
        { label: '审核通过', class: 'ele-text-success' },
        { label: '驳回', class: 'ele-text-danger' }
      ],
      currentId: '',
      currentRow: {},
      columns: [
        {
          slot: 'selection',
          label: '选择',
          width: 50,
          align: 'center'
        },
        {
          type: 'index',
          label: '序号',
          width: 50,
          align: 'center'
        },
        {
          prop: 'bizNo',
          label: '单号',
          align: 'center',
          slot: 'bizNo',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'bizType',
          slot: 'bizType',
          label: '出入库类型',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'assetType',
          slot: 'assetType',
          label: '物品类型',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'categoryNames',
          label: '物品名称',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'categoryCodes',
          label: '物品编码',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'sourceBizNo',
          label: '来源单据',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'createUserName',
          label: '操作人',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          width: 160,
          prop: 'createTime',
          label: '出入库时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'verifyName',
          label: '审核人',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'verifyStatus',
          label: '状态',
          align: 'center',
          slot: 'verifyStatus',
          showOverflowTooltip: true,
          width: 100
        }
      ]
    };
  },
  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  created() {
    this.getTypeList();
  },
  methods: {
    downLoad() {
      if (this.currentId) {
        storageApi.getOutinList({ id: this.currentId }).then((res) => {
          console.log(res);
          let tableData = [
            [
              '申请出库编码',
              '申请人',
              '申请人部门',
              '申请时间',
              '工单编码',
              '关联设备名称',
              '设备固资编码',
              '物品编码',
              '物品名称',
              '型号',
              '规格',
              '级别',
              '数量',
              '计量单位',
              '用途',
              '审核人',
              '仓库',
              '出库单号',
              '出库时间'
            ] //导出表头
          ];
          if (res?.length > 0) {
            res.forEach((item) => {
              tableData.push([
                item.code,
                item.applyUserName,
                item.applyDeptName,
                item.applyTime,
                item.orderCode,
                item.deviceName,
                item.assetsCode,
                item.categoryCode,
                item.categoryName,
                item.categoryModel,
                item.specification,
                item.level,
                item.measureQuantity,
                item.measureUnit,
                item.purpose,
                item.verifyName,
                item.warehouseName,
                item.bizNo,
                item.storageTime
              ]);
            });
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '文件'); // 工作簿名称
            let name = '明细文件.xlsx';
            XLSX.writeFile(bookNew, name); // 保存的文件名
          }
        });
      } else {
        return this.$message.warning('请选择单据');
      }
    },
    toDetail(row) {
      this.$refs.tgDetailsRefs.open(row);
    },
    // 单击获取id
    cellClick(row) {
      this.currentRow = row;
      this.currentId = row.id;
    },
    async getTypeList() {
      const { data } = await allCategoryLevel();
      this.codeList = data.map((item) => {
        return { dictCode: item.id, dictValue: item.name };
      });
    },
    handleAssetType(r) {
      const code = this.codeList.find((item) => item.dictCode == r);
      return code?.dictValue;
    },
    handleBizType(code, type) {
      if (type == 1) {
        // 入库
        for (const key in this.sceneState) {
          if (this.sceneState[key].code == code) {
            return this.sceneState[key].label;
          }
        }
      } else {
        // 出库
        for (const key in this.outputSceneState) {
          if (this.outputSceneState[key].code == code) {
            return this.outputSceneState[key].label;
          }
        }
      }
    },
    async datasource({ page, limit, where }) {
      if (where.time && where.time.length > 0) {
        where.startTime = where.time[0];
        where.endTime = where.time[1];
        delete where.time;
      }
      const res = await storageApi.getInboundList({
        pageNum: page,
        size: limit,
        type: this.type,
        ...where
      });

      return res;
    },
    /* 刷新表格 */
    reload(where) {
      this.$nextTick(() => {
        if (this.$refs.table1 && this.$refs.table1.reload) {
          this.$refs.table1.reload({ page: 1, where });
        }
      });
    },
    getAuditStatus: useDict(auditStatus),
    getList() {
      this.$refs.table1.reload();
    },
    handleCurrentChange() {
      this.getList();
    },
    handleSizeChange() {
      this.formData.page = 1;
      this.getList();
    },
    search() {
      this.formData.page = 1;
      this.getList();
    },
    reset() {
      this.$refs.formName.resetFields();
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.allTable {
  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;
      // }
    }
  }
}
</style>