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.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">
          <!-- <AssetsCell
            v-for="(item, index) in detailList"
            :key="index"
            :item="item"
            type="detail"
          /> -->
          <el-table
            ref="table"
            :data="detailList"
            tooltip-effect="dark"
            :max-height="500"
            border
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-if="infoData.inventoryDimension != 1"
              label="批次号"
              prop="batchNo"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出仓库"
              prop="warehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出库区"
              prop="areaName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出货架"
              prop="goodsShelfName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调出货位"
              prop="goodsAllocationName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入仓库"
              prop="targetWarehouseName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入库区"
              prop="targetAreaName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入货架"
              prop="targetGoodsShelfName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="调入货位"
              prop="targetGoodsAllocationName"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="牌号"
              prop="brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-if="infoData.inventoryDimension == 3"
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-if="infoData.inventoryDimension == 3"
              label="包装数量"
              prop="packingQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-if="infoData.inventoryDimension == 3"
              label="包装单位"
              prop="packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="调拨数量"
              prop="quantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div
        v-if="infoData.type == 2"
        class="content-detail mt20"
        style="height: 450px"
      >
        <HeaderTitle title="流程图" size="16px"></HeaderTitle>
        <my-process-viewer
          key="designer"
          v-model="bpmnXML"
          v-bind="bpmnControlForm"
          :activityData="activityList"
          :processInstanceData="processInstance"
          :taskData="tasks"
        />
      </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';

  export default {
    components: { AssetsCell, StatusStep, PageHeader },
    data() {
      return {
        allocationType,
        dimensionType,
        auditStatus: [
          { code: 0, label: '未提交', class: 'danger-text' },
          { code: 1, label: '审核中', class: 'primary-text' },
          { code: 2, label: '已完成', class: 'primary-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' });
          }
        }
        console.log(base, 'base');
        return base;
      }
    },
    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 = store.getters.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;
  }
  .content-height {
    height: auto;
    background: #fff;
  }
</style>