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

<template>
  <div class="content-height p20">
    <div class="page-title">
      <PageHeader title="调拨详情"> </PageHeader>
    </div>
    <div>
      <StatusStep :activeCode="infoData.auditStatus" :statusList="statusList" />
      <div class="content-detail mt10">
        <div class="basic-details">
          <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
        </div>
        <div class="mt20">
          <el-form label-width="110px">
            <el-col :span="8">
              <el-form-item label="调拨名称">
                <span>{{ infoData.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调拨单号">
                <span>{{ infoData.allotCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                <span>{{ infoData.allotName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前审核人">
                <span>{{ infoData.currentApproverName || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <span>{{ infoData.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调拨类型">
                <span>{{
                  allocationType.filter((item) => item.code == infoData.type)[0]
                    ?.label
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="列表维度">
                <span>{{
                  dimensionType.filter((item) => item.code == infoData.inventoryDimension)[0]
                    ?.label
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调出库">
                <span>{{ infoData.sourceWarehouse }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="调入库">
                <span>{{ infoData.targetWarehouse }}</span>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="content-detail mt20">
        <HeaderTitle title="调拨明细" size="16px"></HeaderTitle>
        <div class="mt20">
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="detailList"
            :height="300"
            :needPage="false"
            :cache-key="cacheKeyUrl"
            @columns-change="handleColumnChange"
          />
        </div>
      </div>
      <div v-if="infoData.type == 2" class="content-detail process-detail mt20">
        <HeaderTitle title="流程图" size="16px"></HeaderTitle>
        <div class="process-viewer">
          <my-process-viewer
            key="designer"
            v-model="bpmnXML"
            v-bind="bpmnControlForm"
            :activityData="activityList"
            :processInstanceData="processInstance"
            :taskData="tasks"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import AssetsCell from './components/AssetsCell';
  import {
    getProcessInstance,
    getTaskListByProcessInstanceId,
    getProcessDefinitionBpmnXML,
    getActivityList
  } from '@/api/bpm/index';
  // import { getDetail } from '@/api/stockManagement/inventoryAllocation'
  import PageHeader from '@/components/PageHeader';
  import { allocationType, dimensionType } from '@/utils/dict/warehouse';
  import { useDictLabelFilter } from '@/utils/dict';
  import StatusStep from '@/components/StatusStep/index.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';

  export default {
    components: { AssetsCell, StatusStep, PageHeader },
    mixins: [tabMixins],
    data() {
      return {
        cacheKeyUrl: '202605131648-wms-inventoryAllocationDetails',
        allocationType,
        dimensionType,
        auditStatus: [
          { code: 0, label: '未提交', class: 'danger-text' },
          { code: 1, label: '审核中', class: 'primary-text' },
          { code: 2, label: '已完成', class: 'primary-text' },
          { code: 3, label: '已驳回', class: 'danger-text' }
        ],
        detailList: [],
        infoData: {},
        // 流程实例
        id: undefined, // 流程实例的编号
        processInstance: {},

        // BPMN 数据
        bpmnXML: null,
        bpmnControlForm: {
          prefix: 'flowable'
        },
        activityList: [],
        // 审批记录
        tasksLoad: true,
        tasks: []
      };
    },
    created() {
      this._getDetail();
    },
    filters: {
      dictFilter: useDictLabelFilter
    },
    computed: {
      statusList() {
        const base = [{ label: '创建' }];
        /* 库外 */
        if (this.infoData.type == 2) {
          base.push({ code: 1, label: '审核中' });
        }
        if (this.infoData.auditStatus == 0) {
          base.push({ code: 0, label: '未提交', activeColor: '#cc3300' });
        } else {
          if ([2].includes(this.infoData.auditStatus)) {
            base.push({ code: 2, label: '已完成', activeColor: '#157a2c' });
          }
          if ([3].includes(this.infoData.auditStatus)) {
            base.push({ code: 3, label: '已驳回', activeColor: '#cc3300' });
          }
        }
        console.log(base, 'base');
        return base;
      },
      columns() {
        const baseColumns = [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            hide: this.infoData.inventoryDimension == 1
          },
          {
            prop: 'systemBatchNo',
            label: '系统内部批次号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180,
            hide: this.infoData.inventoryDimension == 1,
            formatter: (row) => row.systemBatchNo || '-'
          },
          {
            prop: 'warehouseName',
            label: '调出仓库',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'areaName',
            label: '调出库区',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'goodsShelfName',
            label: '调出货架',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'goodsAllocationName',
            label: '调出货位',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'targetWarehouseName',
            label: '调入仓库',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'targetAreaName',
            label: '调入库区',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'targetGoodsShelfName',
            label: '调入货架',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'targetGoodsAllocationName',
            label: '调入货位',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'modeKey',
            label: '机型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'packageNo',
            label: '包装编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            hide: this.infoData.inventoryDimension != 3
          },
          {
            prop: 'packingQuantity',
            label: '包装数量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            hide: this.infoData.inventoryDimension != 3
          },
          {
            prop: 'packingUnit',
            label: '包装单位',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            hide: this.infoData.inventoryDimension != 3
          },
          // {
          //   prop: 'measureQuantity',
          //   label: '计量数量',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 100
          // },
          {
            prop: 'quantity',
            label: '调拨数量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          }
        ];
        return baseColumns.filter((item) => !item.hide);
      }
    },
    methods: {
      /** 获得流程实例 */
      getDetail(id) {
        // 获得流程实例相关
        this.processInstanceLoading = true;
        getProcessInstance(id).then((response) => {
          if (!response) {
            this.$message.error('查询不到流程信息！');
            return;
          }
          // 设置流程信息
          this.processInstance = response;

          // //将业务表单，注册为动态组件
          // const path = this.processInstance.processDefinition.formCustomViewPath;
          // Vue.component("async-biz-form-component", function (resolve) {
          //   require([`@/views${path}`], resolve);
          // });
          // 加载流程图
          getProcessDefinitionBpmnXML(
            this.processInstance.processDefinition.id
          ).then((response) => {
            this.bpmnXML = response;
          });
          // 加载活动列表
          getActivityList({
            processInstanceId: this.processInstance.id
          }).then((response) => {
            console.log(response, 'response');
            this.activityList = response;
          });

          // 取消加载中
          this.processInstanceLoading = false;
        });

        // 获得流程任务列表（审批记录）
        this.tasksLoad = true;
        getTaskListByProcessInstanceId(id).then((response) => {
          // 审批记录
          this.tasks = [];
          // 移除已取消的审批
          response.forEach((task) => {
            if (task.result !== 4) {
              this.tasks.push(task);
            }
          });
          // 排序，将未完成的排在前面，已完成的排在后面；
          this.tasks.sort((a, b) => {
            // 有已完成的情况，按照完成时间倒序
            if (a.endTime && b.endTime) {
              return b.endTime - a.endTime;
            } else if (a.endTime) {
              return 1;
            } else if (b.endTime) {
              return -1;
              // 都是未完成，按照创建时间倒序
            } else {
              return b.createTime - a.createTime;
            }
          });

          // 需要审核的记录
          const userId = this.$store.getters.user.info.userId;
          this.tasks.forEach((task) => {
            if (task.result !== 1 && task.result !== 6) {
              // 只有待处理才需要
              return;
            }
            if (!task.assigneeUser || task.assigneeUser.id !== userId) {
              // 自己不是处理人
              return;
            }
          });

          // 取消加载中
          this.tasksLoad = false;
        });
      },
      async _getDetail() {
        const res = await storageApi.getAllotDetailList({
          applyId: this.$route.query.id
        });
        const data = await storageApi.getAllotDetail(this.$route.query.id);
        this.infoData = data;
        this.getDetail(data.flowableTaskId);
        if (this.infoData.type == 1) {
          // 库内调拨
          /* this.infoData.auditStatus = 2; */
          this.infoData.auditStatus = data.status;
        } else {
          // 库外调拨
          this.infoData.auditStatus = data.status;
        }
        this.detailList = res.map((item) => {
          return {
            ...item,
            // categoryCode: this.infoData.categoryCode,
            // categoryName: this.infoData.categoryName,
            // brandNum: this.infoData.brandNum,
            // categoryModel: this.infoData.model,
            // specification: this.infoData.specification
          };
        });
        // if (res?.success) {
        //   this.infoData = res.data.conventionalStockTransfer;
        //   this.detailList = res.data.stockTransferInfoList.map((i) => ({
        //     batchNum: i.batchNo,
        //     ...i
        //   }));
        // }
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    margin-bottom: 0 !important;
  }
  .p20 {
    padding: 20px;
  }
  .mt40 {
    margin-top: 40px;
  }

  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .process-detail {
    height: 450px;
  }
  .process-viewer {
    height: calc(100% - 40px);
  }
  .content-height {
    height: auto;
    background: #fff;
  }
</style>