海运操作开发

src/views/ecw/box/shippingSea/nodePage/booking.vue

@@ -120,7 +120,7 @@ export default {
       this.$refs["bookingForm"].validate((valid) => {
         if (valid) {
           booking({
-            shipmentId: this.$attrs.shipmentObj.id,
+            shipmentId: this.shipmentObj.id,
             ...this.bookingObj,
             operateType: 2,
           }).then((res) => {

src/views/ecw/box/shippingSea/seaProcess.vue

 <template>
-  <div>
+  <div class="app-seaProcess">
     <!-- 海运流程图 -->
-    <el-scrollbar :vertical="true" style="width: 100%;" viewClass="shipping-chart">
-      <div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes">
+    <el-scrollbar :vertical="true" viewClass="shipping-chart">
+      <div v-for="(nodes,index) in seaBaseData" :key="index" class="chart-nodes">
         <div class="node-area">
           <div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div">
             <template v-if="!node.unNode">
-              <img :src="node.imgSrc" alt="">
+              <img :src="getImgSrc(node)" alt="">
               <p>{{node.title}}</p>
             </template>
             <template v-else-if="node.unNode">
@@ -14,7 +14,7 @@
             </template>
           </div>
         </div>
-        <div class="arrow-area" v-if="index !== (chartData['sea'].length-1)">
+        <div class="arrow-area" v-if="index !== (seaBaseData.length-1)">
           <img src="@/assets/images/shipping/jt-start.png" alt="">
         </div>
       </div>
@@ -22,7 +22,7 @@
 
     <!-- 弹窗 -->
     <el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :width="dialogConfig.width" :fullscreen="dialogConfig.fullscreen" :close-on-click-modal=false :modal-append-to-body=false append-to-body destroy-on-close>
-      <component v-bind:is="currentComponent" @closeDialog="closeDialog" v-bind="$attrs" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers"></component>
+      <component v-bind:is="currentComponent" @closeDialog="closeDialog" v-bind="$attrs" :shipmentObj="shipmentObj"></component>
     </el-dialog>
   </div>
 </template>
@@ -44,9 +44,6 @@ import arrivalWidget from "./nodePage/arrival.vue";
 import cusClearanceWidget from "./nodePage/cusClearance.vue";
 import unloadingWidget from "./nodePage/unloading/index.vue";
 import settlementWidget from "./nodePage/settlement.vue";
-import { getSupplierPage } from "@/api/ecw/supplier";
-import { getDockPage } from "@/api/ecw/dock";
-import { listUser } from "@/api/system/user";
 
 /**
  * 海运流程图
@@ -72,8 +69,8 @@ export default {
     settlementWidget,
   },
   props: {
-    shippingType: String,
     shipmentObj: Object,
+    seaBaseData: Array,
   },
   data() {
     return {
@@ -84,161 +81,11 @@ export default {
         width: "",
         fullscreen: false,
       },
-      // 流程图节点
-      chartData: {
-        sea: [
-          [
-            {
-              title: "订舱",
-              imgSrc: require("@/assets/images/shipping/dc-start.png"),
-              type: "booking",
-              voName: "bookSeaInfo",
-            },
-          ],
-          [
-            {
-              title: "预装",
-              imgSrc: require("@/assets/images/shipping/yz-start.png"),
-              type: "preinstall",
-              voName: "preInstallInfo",
-            },
-            {
-              title: "拖车",
-              imgSrc: require("@/assets/images/shipping/tc-start.png"),
-              type: "trailer",
-              voName: "trailerInfo",
-            },
-            {
-              title: "AGENT",
-              imgSrc: require("@/assets/images/shipping/agent-start.png"),
-              type: "agent",
-              voName: "agentInfo",
-            },
-          ],
-          [
-            {
-              title: "装柜",
-              imgSrc: require("@/assets/images/shipping/zg-start.png"),
-              type: "cabinet",
-              voName: "cabinetInfo",
-            },
-          ],
-          [
-            {
-              title: "报关",
-              imgSrc: require("@/assets/images/shipping/bg-start.png"),
-              type: "cusDeclaration",
-              voName: "clearanceInfo",
-            },
-            {
-              title: "配船",
-              imgSrc: require("@/assets/images/shipping/pc-start.png"),
-              type: "ship",
-              voName: "shipConfigInfo",
-            },
-            {
-              title: "提单补料",
-              imgSrc: require("@/assets/images/shipping/tdcl-start.png"),
-              type: "subMaterial",
-              voName: "ladingBillInfo",
-            },
-          ],
-          [
-            {
-              title: "驳船",
-              imgSrc: require("@/assets/images/shipping/bc-start.png"),
-              type: "barge",
-              voName: "bargeInfo",
-            },
-          ],
-          [
-            {
-              title: "起运",
-              imgSrc: require("@/assets/images/shipping/qy-start.png"),
-              type: "departure",
-              voName: "shippingInfo",
-            },
-          ],
-          [
-            {
-              title: "提单Copy",
-              imgSrc: require("@/assets/images/shipping/tdcopy-start.png"),
-              type: "blCopy",
-              voName: "ladingCopyInfo",
-            },
-            {
-              type: "clrDocument",
-              imgSrc: require("@/assets/images/shipping/qg-start.png"),
-              title: "清关文件",
-              voName: "clearanceDocInfo",
-            },
-          ],
-          [
-            {
-              title: "到港",
-              imgSrc: require("@/assets/images/shipping/dg-start.png"),
-              type: "arrival",
-              voName: "arrivalInfo",
-            },
-          ],
-          [
-            {
-              title: "清关",
-              imgSrc: require("@/assets/images/shipping/qg-start.png"),
-              type: "cusClearance",
-              voName: "clearanceInfo",
-            },
-          ],
-          [
-            {
-              title: "卸柜",
-              imgSrc: require("@/assets/images/shipping/xg-start.png"),
-              type: "unloading",
-              voName: "cabinetUnloadInfo",
-            },
-          ],
-          [
-            {
-              title: "结算",
-              imgSrc: require("@/assets/images/shipping/js-start.png"),
-              type: "settlement",
-              voName: "settlementInfo",
-            },
-          ],
-        ],
-      },
       // 当前组件
       currentComponent: "",
-      // 供应商
-      allSupplier: [],
-      // 码头
-      allDocks: [],
-      // 用户
-      allUsers: [],
     };
   },
-  created() {
-    // 供应商
-    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
-      const { data } = res;
-      this.allSupplier = data.list.map((item) => {
-        if (item.companyType) {
-          item.companyTypes = item.companyType.split(",");
-        }
-        return item;
-      });
-    });
-    // 码头
-    getDockPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
-      const { data } = res;
-      this.allDocks = data.list;
-    });
-    // 用户
-    listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
-      const { data } = res;
-      this.allUsers = data.list ?? [];
-    });
-  },
+  created() {},
   methods: {
     /** 关闭弹窗 */
     closeDialog() {
@@ -271,43 +118,70 @@ export default {
       }
       this.$set(this.dialogConfig, "dialogVisible", true);
     },
+    /* 获取图片路径 */
+    getImgSrc(node) {
+      return node.imgSrc[node.currStatus ?? "start"];
+    },
   },
   watch: {
     shipmentObj(val) {
-      console.log(val);
-      this.shipmentObj = val;
+      // 迭代每个节点
+      for (const nodes of this.seaBaseData) {
+        for (const node of nodes) {
+          const { keyName, voName, status } = node;
+          if (!keyName) continue;
+          const { start, wait, end } = status;
+
+          if (start.includes(val[keyName])) {
+            node.currStatus = "start";
+          }
+
+          if (start.includes(val[keyName]) && val[voName]) {
+            node.currStatus = "wait";
+          }
+
+          if (wait.includes(val[keyName])) {
+            node.currStatus = "wait";
+          }
+
+          if (end.includes(val[keyName])) {
+            node.currStatus = "end";
+          }
+        }
+      }
     },
   },
 };
 </script>
 
 <style lang="scss">
-.shipping-chart {
-  width: max-content;
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-  .chart-nodes {
+.app-seaProcess {
+  .shipping-chart {
+    width: max-content;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    .node-area {
+    padding: 10px 0;
+    .chart-nodes {
       display: flex;
-      flex-direction: column;
       align-items: center;
+      justify-content: center;
+      .node-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
-      .node-div {
-        margin-top: 10px;
-        cursor: pointer;
-        p {
-          margin-top: -10px;
-          margin-bottom: 0px;
-          text-align: center;
+        .node-div {
+          margin-top: 10px;
+          cursor: pointer;
+          p {
+            margin-top: -10px;
+            margin-bottom: 0px;
+            text-align: center;
+          }
         }
       }
-    }
-    .arrow-area {
-      margin: 0 10px;
+      .arrow-area {
+        margin: 0 10px;
+      }
     }
   }
 }