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"
        :pageSizes="[10,20,30,40, 50, 100, 200, 500,1000]"
        :datasource="datasource"
        cache-key="systemRoleTable"
        row-key="id"
        :selection.sync="selection"
      >
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="add"
            >新建</el-button
          >
          <!-- <el-button v-if="$hasPermission('wms:inventoryAllocation:print1')" :disabled="selection.length > 1" icon="el-icon-download" type="primary"  @click="printExl"
            >打印送货单</el-button
          >
          <el-button v-if="$hasPermission('wms:inventoryAllocation:print2')" :disabled="selection.length > 1" icon="el-icon-download" type="primary"  @click="printExl2"
            >打印送货单带车</el-button
          >

          <el-button v-if="$hasPermission('wms:inventoryAllocation:printHT')" :disabled="selection.length > 1" icon="el-icon-download" type="primary"  @click="printExlHT"
            >打印送货单</el-button
          > -->

          <el-dropdown
            trigger="click"
            :disabled="selection?.length === 0 || selection.length > 1"
          >
            <el-button
              type="primary"
              class="el-icon-printer"
              size="small"
            >
              打印<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="$hasPermission('wms:inventoryAllocation:print1')"
                @click.native="printExl"
                >打印送货单</el-dropdown-item
              >
              <el-dropdown-item
                v-if="$hasPermission('wms:inventoryAllocation:print2')"
                @click.native="printExl2"
                >打印送货单带车</el-dropdown-item
              >
              <el-dropdown-item
                v-if="$hasPermission('wms:inventoryAllocation:printHT')"
                @click.native="printExlHT"
                >打印送货单</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>

          <el-button v-if="$hasPermission('wms:inventoryAllocation:statement')" :disabled="selection.length == 0" type="primary"  @click="handleGenerateStatement('add')"
            >生成对账单</el-button
          >
        </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.status == 3) && row.type == 2"
            type="primary"
            :underline="false"
            icon="el-icon-view"
            :disabled="saveLoading"
            @click="submit(row)"
          >
            提交
          </el-link>
          <el-link
            v-if="row.status == 0 || row.status == 3"
            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 || row.status == 3"
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            @click="deleted(row)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 打印弹窗 -->
    <printTemplateBs :groupName="groupName" ref="printTemplateBsRef"></printTemplateBs>
    <printTemplateBsCar :groupName="groupName" ref="printTemplateBsCarRef"></printTemplateBsCar>
    <printTemplateHT :groupName="groupName" ref="printTemplateHTRef"></printTemplateHT>
    <add-account-dialog
      v-if="addAccountDialogFlag"
      :addAccountDialogFlag.sync="addAccountDialogFlag"
      ref="accountDialogRef"
      @done="reload"
    ></add-account-dialog>
    <generateStatement
      v-if="generateStatementFlag"
      :generateStatementFlag.sync="generateStatementFlag"
      ref="generateStatementRef"
      @done="reload"
    ></generateStatement>
  </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 printTemplateHT from './components/print-template-ht.vue';
  import printTemplateBsCar from './components/print-template-bs-car.vue';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { pageRoles } from '@/api/system/role';
  import { enterprisePage } from '@/api/bpm/index.js';
  import addAccountDialog from './accountstatement/addAccountDialog.vue';
  import generateStatement from './accountstatement/generateStatement.vue';
  export default {
    components: {
      addAccountDialog,
      InventorySearch,
      printTemplateBs,
      printTemplateBsCar,
      generateStatement,
      printTemplateHT
    },
    data() {
      return {
        addAccountDialogFlag: false,
        generateStatementFlag: false,
        allocationType,
        groupName: '',
        saveLoading: false,
        isReconciliationOp: [
          { value: 0, label: '未对账' },
          { value: 1, label: '已对账' },
        ],
        inventoryDimensionOp: [{
          code: '1',
          label: '物品维度'
        },
        {
          code: '2',
          label: '批次维度'
        },
        {
          code: '3',
          label: '包装维度'
        }],
        stutusOptions: {
          0: '未提交',
          1: '审核中',
          2: '已完成',
          3: '已驳回'
        },
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            reserveSelection: true,
            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: 'isReconciliation',
            label: '对账状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
            return this.isReconciliationOp.find(item => item.value == cellValue)?.label || '';
          }
          },
          {
            prop: 'saleOrderNos',
            label: '销售订单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'customerNames',
            label: '客户',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'inventoryDimension',
            label: '列表维度',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row, column, cellValue) => {
              return this.inventoryDimensionOp.filter(
                (item) => item.code == row.inventoryDimension
              )[0].label;
            }
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            minWidth: 130,
            showOverflowTooltip: true,
          },
          {
            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: {},
    created() {
      this.getCompanyInfo();
    },
    methods: {
      //新增编辑
      handleAddOrEditAccount(type, row) {
        this.addAccountDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.accountDialogRef.open(type, row);
        });
      },
      // 生成对账单
      handleGenerateStatement(type) {
        if (this.selection.length == 0) {
          this.$message.warning('请选择要生成对账单的记录');
          return;
        }

        // 检查选中的记录状态是否为2
        const invalidRecords = this.selection.filter(item => item.status != 2);
        if (invalidRecords.length > 0) {
          this.$message.warning('请选择已完成的调拨单生成对账单');
          return;
        }

        // 检查选中的列表维度是否包含物品维度
        const dimensionRecords = this.selection.filter(item => item.inventoryDimension == 1);
        if (dimensionRecords.length > 0) {
          this.$message.warning('请选择批次维度或包装维度调拨单生成对账单');
          return;
        }

        this.generateStatementFlag = true;
        this.$nextTick(() => {
          this.$refs.generateStatementRef.open(type, this.selection);
        });
      },
      getCompanyInfo() {
        enterprisePage({
          pageNum: 1,
          size: 200
        }).then((res) => {
          if (res.list?.length > 0) {
            this.groupName = res.list[0].name;
          }
        });
      },
      printExlHT() {
        console.log('selection', this.selection)
        if (this.selection.length == 0) {
          this.$message.warning('请选择要打印的记录');
          return;
        }
        this.$refs.printTemplateHTRef.open(this.selection[0]);
      },
      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) {
        this.saveLoading = true;
        storageApi
          .submitAllot({
            id: row.id,
            enterVerifyUserId: row.sourceWarehouseUserId,
            outVerifyUserId: row.targetWarehouseUserId
          })
          .then(() => {
            this.saveLoading = false;
            this.$message({
              type: 'success',
              message: '提交成功'
            });
            this.reload();
          }).catch(() => {
            this.saveLoading = false;
          });
      },
      // 修改
      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 }) {
        const params = Object.assign({}, where);
        if (params.time?.length) {
          params.startTime = params.time[0];
          params.endTime = params.time[1];
        }
        delete params.time;
        return storageApi.getAllotApplyPage({
          pageNum: page,
          size: limit,
          ...params
        });
      },
      /* 刷新表格 */
      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>