feat(运输管理): 新增状态步骤组件和库存调拨详情功能,来源单据查看详情

src/api/wms/index.js

@@ -258,4 +258,24 @@ export async function getCategoryPackageDisposition (data){
       return res.data.data;
     }
     return Promise.reject(new Error(res.data.message));
+  }
+
+ // 库内调拨详情列表
+  export async function getAllotDetailList(data) {
+    const res = await request.get(`/wms/allotDetail/list`, {
+      params: data
+    });
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  }
+
+  // 库内调拨详情
+  export async function getAllotDetail(id) {
+    const res = await request.get(`/wms/allotApply/getById/${id}`);
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
   }

src/components/StatusStep/common.vue

@@ -0,0 +1,38 @@
+<template>
+  <baseComp :statusList="statusList" :activeCode="activeCode" />
+</template>
+
+<script>
+  import baseComp from './index.vue';
+  // import { auditStatus } from '@/utils/dict/common';
+
+  // 一般统一审核流程
+  export default {
+    components: {
+      baseComp
+    },
+    props: {
+      activeCode: {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      statusList() {
+        const base = [{ label: '创建' }, { code: 0, label: '待审核' }];
+        console.log(this.activeCode, 'api/outInWarehouse/select/detail');
+
+        if (this.activeCode == 1) {
+          base.push({ code: 1, label: '已完成', activeColor: '#157a2c' });
+        } else {
+          base.push({ code: 2, label: '已驳回', activeColor: '#cc3300' });
+        }
+        console.log(base, 'base');
+        return base;
+      }
+    }
+  };
+</script>

src/components/StatusStep/dict.js

@@ -0,0 +1,5 @@
+export const cm_workOrderStatus = [
+  { code: 0, label: '待审核' },
+  { code: 1, label: '已完成' },
+  { code: 2, label: '已驳回' }
+];

src/components/StatusStep/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="status-step">
+    <div class="el-steps el-steps--horizontal">
+      <div
+        class="el-step is-horizontal is-center"
+        style="flex-basis: 25%; color: rgb(0, 0, 0); margin-right: 0px"
+        v-for="(item, index) in statusList"
+        :key="index"
+      >
+        <!-- 未处理 -->
+        <div class="el-step__head is-wait-a">
+          <div
+            class="el-step__line"
+            :class="{
+              Processing: activeIndex == index,
+              Done: activeIndex > index
+            }"
+          >
+            <i
+              class="el-step__line-inner"
+              style="transition-delay: 0ms; border-width: 0px; width: 0%"
+            ></i>
+          </div>
+          <div class="el-step__icon is-text">
+            <div
+              class="el-step__icon-inner"
+              :style="
+                activeIndex == index
+                  ? `backgroundColor: ${item.activeColor} !important`
+                  : ''
+              "
+              :class="{
+                Processing: activeIndex == index,
+                Done: activeIndex > index
+              }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="el-step__main">
+          <div
+            class="el-step__title is-wait"
+            :style="
+              activeIndex == index
+                ? `color: ${item.activeColor} !important`
+                : ''
+            "
+            :class="{
+              Processing_text: activeIndex == index,
+              Done_text: activeIndex > index
+            }"
+          >
+            {{ item.label }}
+            <!-- {{ urgeshow(item.nodeName) }} -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { cm_workOrderStatus } from './dict';
+  export default {
+    props: {
+      activeCode: {
+        type: Number,
+        default: 0
+      },
+      //默认工单审核状态
+      statusList: {
+        type: Array,
+        default: () =>
+          cm_workOrderStatus.slice(0, cm_workOrderStatus.length - 2)
+      }
+    },
+    computed: {
+      activeIndex() {
+        const index = this.statusList.findIndex(
+          (i) => i.code === this.activeCode
+        );
+        console.log(index, 'index');
+        return index === -1 ? 0 : index;
+      }
+    },
+    data() {
+      return {};
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import './oaa.scss';
+
+  .status-step {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .el-step__title {
+      white-space: nowrap;
+    }
+    .el-steps {
+      width: 500px;
+    }
+  }
+
+  // .el-step__icon.is-text {
+  //   border: none !important;
+  // }
+
+  //
+  .Processing {
+    background: #3196fb !important;
+  }
+
+  .Processing_text {
+    color: #3196fb !important;
+  }
+
+  .Done {
+    background: #157a2c !important;
+  }
+
+  .Done_text {
+    color: #157a2c !important;
+  }
+
+  .Stop {
+    background: #cc3300 !important;
+  }
+
+  .Stop_text {
+    color: #cc3300 !important;
+  }
+
+  .el-step__icon-inner {
+    width: 22px;
+    height: 22px;
+    background-color: #d0e4d5;
+    border-radius: 50%;
+  }
+  .el-step__title.is-wait {
+    color: #9e9e9e;
+  }
+
+  .el-step__title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #c0c4cc;
+  }
+</style>

src/components/StatusStep/oaa.scss

@@ -0,0 +1,543 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.zw-criterion-normal {
+  padding: 20px;
+  background: #fff;
+  margin-top: 10px;
+
+}
+
+.zw-tags {
+  padding-left: 20px;
+  background: #fff;
+
+  .zw-tags-el {
+    margin-left: 10px;
+    cursor: pointer;
+  }
+}
+
+.zw-criterion-search-more {
+  margin-left: 10px;
+}
+
+.zw-table-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.zw-table-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.zw-table-countinfo-link {
+  display: inline-block;
+  height: 32px;
+  line-height: 32px;
+  color: #6e6e6e;
+  font-size: 14px;
+}
+
+.links {
+  margin-left: 20px;
+}
+
+.zw-table-pagebar {
+  display: flex;
+  align-items: center;
+}
+
+.zw-table-pagebar span {
+  margin-right: 10px;
+  font-weight: normal;
+  color: #606266;
+  font-size: 13px;
+}
+
+// 表格
+.zw-page-table {
+  background: #fff;
+}
+
+.data-tab .el-table__header-wrapper {
+  background-color: #f0f3f3;
+}
+
+.data-tab .el-table thead {
+  color: #000;
+}
+
+.data-tab .el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: #f0f3f3 !important;
+}
+
+.data-tab .line {
+  width: 1px;
+  height: 14px;
+  background: #dedede;
+  display: inline-block;
+  margin: 0 5px;
+}
+
+/* 我的操作区 */
+.my-operate {
+  line-height: 33px;
+  height: 33px;
+  margin: 10px 20px 0;
+}
+
+.my-operate a {
+  margin-right: 20px;
+  font-size: 14px;
+}
+
+.more {
+  color: #157a2c !important;
+  padding-left: 30px;
+}
+
+.el-form-item {
+  margin-bottom: 5px;
+}
+
+// 详情页
+.head {
+  background-color: #fff;
+
+}
+
+.head .ask_for_title {
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.head .odd-num {
+  color: #333333;
+  font-size: 14px;
+  font-weight: normal;
+  margin-left: 8px;
+}
+
+// tab切换框
+.switch {
+  padding: 10px 0 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.switch_left ul {
+  list-style-type: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.switch_left ul li {
+  min-width: 80px;
+  padding: 0 10px;
+  text-align: center;
+  background: #dfdfdf;
+  color: #333;
+  font-size: 14px;
+  height: 36px;
+  line-height: 32px;
+  margin-right: 5px;
+  border-top: 4px solid #dfdfdf;
+  cursor: pointer;
+}
+
+.switch_left ul .active {
+  background: #fff;
+  border-top: 4px solid #157a2c;
+  color: #157a2c;
+}
+
+// 详情
+.content {
+  background: #fff;
+  padding: 20px;
+}
+
+.flow .flow-left {
+  width: 156px;
+  height: 70px;
+  border: 1px dashed #ccc;
+  padding: 10px;
+}
+
+.flow-left-item {
+  display: flex;
+  align-items: flex-end;
+}
+
+.flow-left-item .block {
+  width: 16px;
+  height: 16px;
+  background-color: #ccc;
+}
+
+.flow-left-item span {
+  font-size: 13px;
+  color: #333;
+  margin-left: 5px;
+}
+
+.flow-left-item .block1 {
+  background-color: #3196fb;
+}
+
+.flow-left-item .block2 {
+  background-color: #157a2c;
+}
+
+.flow-left-item .block3 {
+  background-color: #cc3300;
+}
+
+.flow .row {
+  margin-top: 13px;
+}
+
+.flow {
+  border-bottom: 1px solid #f2f2f2;
+  padding-bottom: 8px;
+}
+
+// 详细信息
+.detailed {
+  margin-top: 30px;
+}
+
+.detailed-item label {
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+
+}
+
+.detailed-item span {
+  color: #333;
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.detailed .detailed-item {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: unset;
+}
+
+.detailed .detailed-item table {
+  margin-left: 10px;
+}
+
+.detailed-item .annex {
+  color: #3300ff !important;
+  text-decoration: underline;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.no_data {
+  line-height: 60px;
+  color: #909399;
+  margin: auto;
+  text-align: center;
+}
+
+.carry-time {
+  color: #999;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.el-step__icon-inner {
+  width: 22px;
+  height: 22px;
+  background-color: #d0e4d5;
+  border-radius: 50%;
+}
+.el-step__title.is-wait{
+  color: #9e9e9e;
+
+}
+
+.el-step__title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #c0c4cc;
+}
+
+// 流程日志列表
+.el-timeline-title {
+  display: flex;
+  align-items: baseline;
+}
+
+.section {
+  padding: 10px;
+  background: #f2f2f2;
+  min-width: 400px;
+  margin-top: 5px;
+
+}
+
+.section-item {
+  margin-bottom: 10px;
+}
+
+.section-item label {
+  min-width: 60px;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: right;
+  color: #666666;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.section-item span {
+  font-size: 14px;
+  color: #666666;
+}
+
+.el-timeline-item__wrapper {
+  padding-left: 166px;
+}
+
+.el-timeline-item__content {
+  padding-top: 3px;
+}
+
+.el-timeline-item__tail {
+  border-right: 2px solid #157a2c;
+  border-left: none;
+  padding-right: 13px;
+  width: 145px;
+  text-align: right;
+}
+
+.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
+  display: inline-block;
+  border: none;
+}
+
+.el-timeline-item__node--normal {
+  left: 140px;
+  width: 16px;
+  height: 16px;
+  background-color: #157a2c;
+}
+
+.el-timeline-node-name {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.el-timeline-item__timestamp {
+  font-size: 12px;
+}
+
+.el-timeline-node-name span {
+  padding: 0 8px;
+  color: #cccccc;
+}
+
+.square {
+  border-radius: 0;
+}
+
+.triangle {
+  border-radius: 0;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 16px solid #157a2c;
+  background-color: #fff;
+}
+
+.un_triangle {
+  border-radius: 0;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 16px solid red;
+  background-color: #fff;
+}
+
+// 勘查单
+.doing_title {
+  margin-bottom: 12px;
+  margin-top: 20px;
+}
+
+.doing_title span {
+  height: 20px;
+  font-size: 16px;
+  border-left: 4px solid #157a2c;
+  padding-left: 10px;
+  line-height: 20px;
+  font-weight: bold;
+}
+
+.el-step__icon.is-text {
+  border: none !important;
+}
+
+//
+.Processing {
+  background: #3196fb !important;
+}
+
+.Processing_text {
+  color: #3196fb !important;
+}
+
+.Done {
+  background: #157a2c !important;
+}
+
+.Done_text {
+  color: #157a2c !important;
+}
+
+.Stop {
+  background: #cc3300 !important;
+}
+
+.Stop_text {
+  color: #cc3300 !important;
+}
+
+//
+.operation {
+  float: right;
+}
+
+.interval {
+  margin-bottom: 10px;
+}
+
+.zw-data-table {
+  .senior {
+    color: #157a2c !important;
+  }
+
+  .odd-num {
+    text-decoration: underline;
+
+  }
+
+  .time {
+    color: #aaaaaa;
+  }
+
+  td {
+    vertical-align: top;
+  }
+
+  .bill-no {
+    color: #aaaaaa;
+  }
+}
+
+.zw-tags {
+  padding: 0 20px 16px;
+}
+
+.add-css {
+  .choice-but {
+    margin-left: 10px;
+  }
+
+  .mechanism .el-form-item__content {
+    display: flex;
+  }
+
+  .mechanism .el-select {
+    margin-right: 5px;
+  }
+
+  .el-icon-map-location {
+    color: #157a2c;
+    font-size: 20px;
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+
+  .account th>.cell {
+    display: block;
+  }
+}
+
+
+.page-footer-btn {
+  margin-top: 20px;
+  text-align: center;
+}
+
+
+.dialog-form-footer {
+  padding-bottom: 5px;
+  padding-top: 10px;
+  margin-bottom: 0;
+  text-align: right;
+}
+
+.table-list {
+  background-color: #fff;
+  margin-top: 10px;
+}
+
+.table-add {
+  margin: 20px 0;
+
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
+
+.down_link {
+  text-decoration: underline;
+  color: #0000EE;
+
+  &:visited {
+    color: #999;
+  }
+
+  &:hover {
+    text-decoration: underline;
+    color: #000000;
+  }
+}
+
+.repair_infoLogs .el-step:last-of-type .el-step__line{
+  display: block!important;
+}
+.repair_infoLogs .el-steps:last-child .el-step__line{
+   display: none!important;
+}
+
+
+.el-textarea .el-input__count{
+  background:rgba(255, 255, 255, 0)
+}
+
+
+ // 审批人下拉选择超出
+  .el-select-dropdown {
+    max-height: 350px!important;
+    overflow-y: auto!important;
+  }

src/enum/dict.js

@@ -684,4 +684,11 @@ export const allocationType = [
     code: 2,
     label: '库外调拨'
   }
+];
+
+// 列表维度
+export const dimensionType = [
+  { code: 1, label: '物品维度' },
+  { code: 2, label: '批次维度' },
+  { code: 3, label: '包装维度' }
 ];

src/views/transportManager/shipManage/dispatchManage/components/inventoryAllocationDetail.vue

@@ -0,0 +1,465 @@
+<template>
+  <ele-modal
+    custom-class="ele-dialog-form long-dialog-form"
+    :centered="true"
+    v-if="visible"
+    :visible.sync="visible"
+    title="详情"
+    :append-to-body="false"
+    :close-on-click-modal="false"
+    :maxable="true"
+    :resizable="true"
+    width="60%"
+    :before-close="cancel"
+  > 
+    <div class="switch">
+      <div class="switch_left">
+        <ul>
+          <li
+            v-for="item in tabOptions"
+            :key="item.key"
+            :class="{ active: activeComp == item.key }"
+            @click="handleTag(item.key)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-show="activeComp === 'main'" class="content-height p20">
+      <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">
+            <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>
+    <bpmDetail
+      v-if="activeComp === 'bpm' && processInstance.id"
+      :id="processInstance.id"
+    ></bpmDetail>
+  </ele-modal>
+</template>
+
+<script>
+  import { getAllotDetailList, getAllotDetail } from '@/api/wms/index.js';
+  import {
+    getProcessInstance,
+    getTaskListByProcessInstanceId,
+    getProcessDefinitionBpmnXML,
+    getActivityList
+  } from '@/api/bpm/index';
+  import { allocationType, dimensionType } from '@/enum/dict.js';
+  import { useDictLabelFilter } from '@/utils/dict';
+  import StatusStep from '@/components/StatusStep/index.vue';
+  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
+
+  export default {
+    components: {StatusStep, bpmDetail },
+    data() {
+      return {
+        tabOptions: [
+          { key: 'main', name: '发货单详情' },
+          { key: 'bpm', name: '流程详情' },
+        ],
+        activeComp: 'main',
+        visible: false,
+        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: [],
+        businessId: undefined
+      };
+    },
+    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;
+      }
+    },
+    methods: {
+      open(id) {
+        console.log(id, 'id');
+        this.visible = true;
+        this.businessId = id;
+        this._getDetail(id);
+      },
+      cancel() {
+        this.visible = false;
+      },
+      handleTag(val) {
+        this.activeComp = val;
+      },
+      /** 获得流程实例 */
+      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.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(id) {
+        const res = await getAllotDetailList({
+          applyId:id
+        });
+        const data = await getAllotDetail(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
+          };
+        });
+      }
+    }
+  };
+</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>

src/views/transportManager/shipManage/taskWorkManage/page.vue

@@ -84,6 +84,17 @@
           {{ row.code }}
         </el-link>
       </template>
+      <template v-slot:taskCode="{ row }">
+        <el-link
+          v-for="(item, index) in row.taskCodeArr"
+          :key="index"
+          type="primary"
+          :underline="false"
+          @click="handleTaskDetail(row, row.taskIdsArr[index], 'view')"
+        >
+          {{ item }}
+        </el-link>
+      </template>
     </ele-pro-table>
     <!-- 计划详情   -->
     <plan-detail-dialog
@@ -112,6 +123,20 @@
       v-if="addOrEditDialogFlag"
       @reload="reload"
     ></add-or-edit-dialog>
+    <!-- 发货详情 -->
+    <salesInvoiceDialog ref="salesInvoiceDialogRef"></salesInvoiceDialog>
+    <!-- 库存调拨详情 -->
+    <inventoryAllocationDetailDialog ref="inventoryAllocationDetailDialogRef"></inventoryAllocationDetailDialog>
+    <!-- 委外发货详情 -->
+    <outSourceSendDetailDialog ref="outSourceSendDetailDialogRef" :detailDialogFlag.sync="outSourceSendDetailDialogFlag" v-if="outSourceSendDetailDialogFlag"></outSourceSendDetailDialog>
+    <!-- 采购收货详情 -->
+    <purchaseInvoicelDialog ref="purchaseInvoicelDialogRef"></purchaseInvoicelDialog>
+    <!-- 受托收货详情 -->
+    <entrustedReceiveDialog ref="entrustedReceiveDialogRef" :detailDialogFlag.sync="entrustedReceiveDialogFlag" v-if="entrustedReceiveDialogFlag"></entrustedReceiveDialog>
+    <!-- 退货详情 -->
+    <returnGoodsDialog ref="returnGoodsDialogRef"></returnGoodsDialog>
+    <!-- 采购退货详情 -->
+    <purchaseReturnGoodsDialog ref="purchaseReturnGoodsDialogRef"></purchaseReturnGoodsDialog>
   </div>
 </template>
 
@@ -123,11 +148,19 @@
   import addOrEditDialog from './components/addOrEditDialog.vue';
   import planDetailDialog from '@/views/transportManager/shipManage/dispatchManage/components/detailDialog.vue';
   import transferDialog from './components/transferDialog.vue';
+  import { getReturnSaleOrderrecordDetail } from '@/api/purchasingManage/returnGoods';
   import {
     logistictraklistnotePageListAPI,
     logistictraklistnoteUpdateAPI
   } from '@/api/transportManager/shipManage/taskWork';
   import tabMixins from '@/mixins/tableColumnsMixin';
+  import salesInvoiceDialog from '@/views/saleManage/saleOrder/invoice/components/detailDialog.vue';
+  import inventoryAllocationDetailDialog from '@/views/transportManager/shipManage/dispatchManage/components/inventoryAllocationDetail.vue';
+  import outSourceSendDetailDialog from '@/views/purchasingManage/purchaseOrder/outSourceSend/components/detailDialog.vue'
+  import purchaseInvoicelDialog from '@/views/purchasingManage/purchaseOrder/invoice/components/detailDialog.vue'
+  import entrustedReceiveDialog from '@/views/saleManage/saleOrder/entrustedReceive/components/detailDialog.vue'
+  import returnGoodsDialog from '@/views/saleManage/saleOrder/returnGoods/components/detailDialog.vue'
+  import purchaseReturnGoodsDialog from '@/views/purchasingManage/purchaseOrder/returnGoods/components/detailDialog.vue'
 
   export default {
     mixins: [dictMixins,tabMixins],
@@ -137,10 +170,19 @@
       feeInfoDialog,
       popModal,
       transferDialog,
-      planDetailDialog
+      planDetailDialog,
+      salesInvoiceDialog,
+      inventoryAllocationDetailDialog,
+      outSourceSendDetailDialog,
+      purchaseInvoicelDialog,
+      entrustedReceiveDialog,
+      returnGoodsDialog,
+      purchaseReturnGoodsDialog
     },
     data() {
       return {
+        outSourceSendDetailDialogFlag: false,
+        entrustedReceiveDialogFlag: false,
         selection: [],
         statusList: [
           { value: 0, label: '待接收' },
@@ -220,7 +262,7 @@
             label: '来源单据',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 120,
+            minWidth: 160,
             slot: 'taskCode'
           },
           {
@@ -359,13 +401,54 @@
           this.$refs.feeInfoDialogRef.init(row, type);
         });
       },
+      async handleTaskDetail(row = {}, taskId, type) {
+        console.log('handleTaskDetail~~~', row, taskId, type);
+        switch (row.taskType) {
+          case '1':
+            this.$refs.salesInvoiceDialogRef.open({id: taskId});
+            break;
+          case '2':
+            this.outSourceSendDetailDialogFlag = true;
+            this.$nextTick(() => {
+              this.$refs.outSourceSendDetailDialogRef.open({id: row.taskId});
+            });
+            break;
+          case '3':
+            this.$refs.purchaseInvoicelDialogRef.open({id: row.taskId});
+            break;
+          case '4':
+            this.entrustedReceiveDialogFlag = true;
+            this.$nextTick(() => {
+              this.$refs.entrustedReceiveDialogRef.open({id: row.taskId});
+            });
+            break;
+          case '5':
+            this.$refs.returnGoodsDialogRef.open({id: row.taskId});
+            break;
+          case '6':
+            const data = await getReturnSaleOrderrecordDetail(row.taskId);
+            this.$refs.purchaseReturnGoodsDialogRef.open(data);
+            break;
+          case '7':
+            this.$refs.inventoryAllocationDetailDialogRef.open(row.taskId);
+            break;
+          default:
+            break;
+        }
+      },
       /* 表格数据源 */
-      datasource({ page, limit, where, order }) {
-        return logistictraklistnotePageListAPI({
+      async datasource({ page, limit, where, order }) {
+        let res = await logistictraklistnotePageListAPI({
           pageNum: page,
           size: limit,
           ...where
         });
+        res = res.map((item) => {
+          item.taskCodeArr = item.taskCode ? item.taskCode.split(',') : [];
+          item.taskIdsArr = item.taskIds ? item.taskIds.split(',') : [];
+          return item;
+        });
+        return res;
       },
 
       /* 刷新表格 */