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

<template>
  <div id="inventoryAllocation_index">
    <el-card shadow="never" v-loading="loading">
      <inventory-search @search="reload"> </inventory-search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        height="calc(100vh-300px)"
        :pageSize="20"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :selection.sync="selection"
      >
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="add"
            >新建</el-button
          >
          <!-- <el-button :disabled="selection.length > 1" icon="el-icon-download" type="primary"  @click="printExl"
            >打印送货单</el-button
          > -->
          <!-- v-if="$hasPermission('wms:inventoryAllocation:print1')" -->
          <!-- <el-button :disabled="selection.length > 1" icon="el-icon-download" type="primary"  @click="printExl2"
            >打印送货单</el-button
          > -->
          <!-- v-if="$hasPermission('wms:inventoryAllocation:print2')" -->
        </template>
        <!-- 单号链接 -->
        <template v-slot:allotCode="{ row }">
          <el-link type="primary" @click="goDetail(row)">
            {{ row.allotCode }}
          </el-link>
        </template>
        <template v-slot:action="{ row }">
          <el-link
            v-if="row.status == 0 && row.type == 2"
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="submit(row)"
          >
            提交
          </el-link>
          <el-link
            v-if="row.status == 0"
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="edit(row)"
          >
            修改
          </el-link>
          <!-- <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="goDetail(row)"
          >
            详情
          </el-link> -->
          <el-link
            v-if="row.status == 0"
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            @click="deleted(row)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 打印弹窗 -->
    <printTemplateBs ref="printTemplateBsRef"></printTemplateBs>
    <printTemplateBsCar ref="printTemplateBsCarRef"></printTemplateBsCar>
  </div>
</template>

<script>
  import { allocationType } from '@/utils/dict/warehouse';
  import storageApi from '@/api/warehouseManagement/index.js';
  import InventorySearch from './components/inventory-search.vue';
  import printTemplateBs from './components/print-template-bs.vue';
  import printTemplateBsCar from './components/print-template-bs-car.vue';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { pageRoles } from '@/api/system/role';
  export default {
    components: {
      InventorySearch,
      printTemplateBs,
      printTemplateBsCar 
    },
    data() {
      return {
        allocationType,
        stutusOptions: {
          0: '未提交',
          1: '审核中',
          2: '已完成'
        },
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '调拨名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'allotCode',
            prop: 'allotCode',
            label: '调拨单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'type',
            label: '调拨类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row, column, cellValue) => {
              return this.allocationType.filter(
                (item) => item.code == row.type
              )[0].label;
            }
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'sourceWarehouse',
            label: '来源仓库',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'targetWarehouse',
            label: '目标仓库',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'allotName',
            label: '调拨人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '调拨时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => {
              return this.stutusOptions[row.status];
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        // 加载状态
        loading: false,
        // 选中的行
        selection: []
      };
    },
    computed: {},
    methods: {
      printExl() {
        console.log('selection', this.selection)
        if (this.selection.length == 0) {
          this.$message.warning('请选择要打印的记录');
          return;
        }
        this.$refs.printTemplateBsRef.open(this.selection[0]);
      },
      printExl2() {
        console.log('selection', this.selection)
        if (this.selection.length == 0) {
          this.$message.warning('请选择要打印的记录');
          return;
        }
        this.$refs.printTemplateBsCarRef.open(this.selection[0]);
      },
      // 删除
      async deleted(row) {
        const data = await storageApi.deleteAllot([row.id]);
        if (data.code == '0') {
          this.$message.success('删除成功!');
          this.reload();
        }
      },
      // 提交
      submit(row) {
        storageApi
          .submitAllot({
            id: row.id,
            enterVerifyUserId: row.sourceWarehouseUserId,
            outVerifyUserId: row.targetWarehouseUserId
          })
          .then(() => {
            this.$message({
              type: 'success',
              message: '提交成功'
            });
            this.reload();
          });
      },
      // 修改
      edit(row) {
        this.$router.push({
          path: '/warehouseManagement/inventoryAllocation/add',
          query: { isEdit: true, id: row.id }
        });
      },
      // 新建
      add() {
        this.$router.push({
          path: '/warehouseManagement/inventoryAllocation/add'
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return storageApi.getAllotApplyPage({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      // 详情
      goDetail(row) {
        this.$router.push({
          path: '/warehouseManagement/inventoryAllocation/details',
          query: { id: row.id }
        });
      }
    }
  };
</script>

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