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

<template>
  <div class="tgTable">
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table1"
      :columns="columns"
      height="calc(100vh-300px)"
      :pageSize="20"
      :datasource="datasource"
      :selection.sync="selection"
      cache-key="workOrderTable"
    >
      <template v-slot:toolbar v-if="$route.query.dashboard === '1' && type === '1'">
        <el-button type="primary" :disabled="!selection.length" @click="$emit('batch-receive', selection)">批量收货（{{ selection.length }}）</el-button>
      </template>
      <template v-slot:code="{ row }">
        <el-link type="primary" :underline="false" @click="details(row)">{{
          row.code
        }}</el-link>
      </template>
      <template v-slot:totalCount="{ row }">
        {{ row.totalCount }} {{ row.measuringUnit }}
      </template>

      <template v-slot:totalPackage="{ row }">
        {{ row.totalPackage }}
      </template>

      <template v-slot:totalWeight="{ row }">
        {{ row.totalWeight }} {{ row.weightUnit }}
      </template>

      <template v-slot:status="{ row }">
        <!-- <span :class="{ 'ele-text-danger': row.approvalStatus == 2 }">
          {{ statusFormatter(row.approvalStatus) }}
        </span> -->
        <span>
          {{ statusFormatter(row.status) }}
        </span>
      </template>

      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          @click="depotInOut(row, type)"
        >
          {{ type == 1 ? '入库' : '出库' }}
        </el-link>
      </template>
    </ele-pro-table>
    <tgDetails ref="tgDetailsRefs"></tgDetails>
  </div>
</template>

<script>
  import { outputSceneState, sceneState } from '@/utils/dict/index';
  import storageApi from '@/api/warehouseManagement';
  import tgDetails from './tgDetails.vue';
  export default {
    props: {
      type: {
        type: String,
        default: ''
      }
    },
    components: {
      tgDetails
    },
    data() {
      return {
        outputSceneState,
        sceneState,
        loading: false,
        selection: [],
        statusOpt: [
          { label: '待处理', value: 0 },
          { label: '已处理', value: 1 },
          { label: '已撤销', value: 2 }
        ]
      };
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          ...(this.$route.query.dashboard === '1' && this.type === '1' ? [{ type:'selection',width:55,align:'center',selectable:(row) => row.status === 0 }] : []),
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            slot: 'code',
            label: '编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'categoryNames',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center'
          },
          // { label: '型号', prop: 'modelType', width: '150' },
          // { label: '规格', prop: 'specification', width: '150' },
          // { label: '牌号', prop: 'brandNum', width: '100' },
          {
            prop: 'sourceType',
            label: '出入库类型',
            align: 'center',
            formatter: (row, column, cellValue) => {
              console.log(row);
              switch (this.type) {
                case '1':
                  // 入库
                  return this.sceneState.filter(
                    (item) => item.code == row.sourceType
                  )[0].label;
                case '2':
                  // 出库
                  return this.outputSceneState.filter(
                    (item) => item.code == row.sourceType
                  )[0].label;
              }
            }
          },
          {
            prop: 'approvalUserName',
            label: '审核人',
            align: 'center'
          },
          {
            prop: 'createUserName',
            label: '申请人',
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'status',
            label: '状态',
            align: 'center'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ];
      }
    },
    created() {},
    methods: {
      statusFormatter(status) {
        const obj = this.statusOpt.find((i) => i.value == status);
        return obj && obj.label;
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return storageApi.getinboundRequestsList({
          pageNum: page,
          size: limit,
          type: this.type,
          ...where
        });
      },
      details(row) {
        this.$refs.tgDetailsRefs.open(row);
      },
      depotInOut(row, type) {
        console.log(row, type);
        if (type == 1) {
          this.$router.push({
            path: '/warehouseManagement/stockManagement/add',
            query: {
              ...(this.$route.query.dashboard === '1' ? { ...this.$route.query,dashboard:'1' } : {}),
              code: row.code,
              inId: row.id,
              type: '1',
              sourceType: row.sourceType,
              name: 'inboundRequests'
            }
          });
        } else {
          this.$router.push({
            path: '/warehouseManagement/outgoingManagement/add',
            query: {
              ...(this.$route.query.dashboard === '1' ? { ...this.$route.query,dashboard:'1' } : {}),
              code: row.code,
              id: row.id,
              type: '2',
              sourceType: row.sourceType,
              fromId: row.createUserId,
            }
          });
        }
      },
      /* 刷新表格 */
      reload(where) {
        this.selection = [];
        this.$nextTick(() => {
          if (this.$refs.table1) {
            this.$refs.table1.reload({ page: 1, where });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tgTable {
    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>