修改文件

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

+<template>
+  <div>
+    <el-form ref="blCopyForm" :model="blCopyObj" label-width="120px">
+      <el-form-item label="提单Copy">
+        <el-upload action="" :file-list="blCopyObj.fileList">
+          <el-button size="small" type="primary">选择文件</el-button>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <el-row class="operate-button">
+      <el-button type="primary" @click="onSubmit">保存</el-button>
+      <el-button type="success" @click="onSubmit">提交</el-button>
+      <el-button @click="cancel">关闭</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+/**
+ * 提单copy
+ */
+export default {
+  name: "blCopy",
+  data() {
+    return {
+      // 提单copy对象
+      blCopyObj: {
+        fileList: [],
+      },
+    };
+  },
+  methods: {
+    /** 提交 */
+    onSubmit() {
+      this.$refs["blCopyForm"].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+    /** 取消 */
+    cancel() {
+      this.$emit("closeDialog");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

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

 <template>
   <div>
-    <el-form ref="bookingForm" :rules="rules" :model="booking" label-width="140px" class="booking-form">
+    <el-form ref="bookingForm" :rules="rules" :model="booking" label-width="140px">
       <el-form-item label="SO NO">
-        <el-input v-model="booking.soNo"></el-input>
+        <el-input v-model="booking.soNo" placeholder="请输入SO NO"></el-input>
       </el-form-item>
       <el-form-item label="船公司类型">
         <el-select v-model="booking.type" placeholder="请选择船公司类型">

src/views/ecw/box/shippingSea/cabinet/index.vue → src/views/ecw/box/shippingSea/nodePage/cabinet/index.vue

@@ -15,8 +15,8 @@
         <el-date-picker type="date" placeholder="请选择日期" v-model="cabinet.outTime"></el-date-picker>
       </el-form-item>
       <el-form-item label="装柜图片">
-        <el-upload class="upload-demo" action="" :limit="1" :file-list="cabinet.fileList">
-          <el-button size="small" type="primary">点击上传</el-button>
+        <el-upload action="" :limit="1" :file-list="cabinet.fileList">
+          <el-button size="small" type="primary">选择文件</el-button>
         </el-upload>
       </el-form-item>
     </el-form>

src/views/ecw/box/shippingSea/customsClearance.vue → src/views/ecw/box/shippingSea/nodePage/customsClearance.vue

@@ -28,7 +28,7 @@
       </el-form-item>
       <el-form-item label="状态">
         <el-radio-group v-model="cusClearance.status">
-          <el-radio v-for="item in status" :key="item.value" :label="item.value">{{item.label }}</el-radio>
+          <el-radio v-for="item in status" :key="item.value" :label="item.value">{{item.label}}</el-radio>
         </el-radio-group>
       </el-form-item>
 
@@ -36,7 +36,7 @@
       <div v-show="cusClearance.status === '3'">
         <el-form-item label="查验">
           <el-radio-group v-model="cusClearance.check">
-            <el-radio v-for="item in checkItems" :key="item.value" :label="item.value">{{item.label }}</el-radio>
+            <el-radio v-for="item in checkItems" :key="item.value" :label="item.value">{{item.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
       </div>
@@ -48,7 +48,7 @@
         </el-form-item>
         <el-form-item label="查验前图片">
           <el-upload action="" :limit="1" :file-list="cusClearance.checkFile">
-            <el-button size="small" type="primary">点击上传</el-button>
+            <el-button size="small" type="primary">选择文件</el-button>
           </el-upload>
         </el-form-item>
         <el-form-item label="新封条">
@@ -79,9 +79,9 @@
     <!-- 对话框 -->
     <el-dialog custom-class="shipping-dialog customsClearance" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" width="700px" :modal-append-to-body=false append-to-body destroy-on-close>
       <el-row>
-        <el-row class="search-area">
+        <el-row>
           <el-form label-width="100px">
-            <el-form-item label="订单号">
+            <el-form-item label="订单号" class="two-element">
               <el-input v-model="orderNo" placeholder="请输入订单号" clearable />
               <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
             </el-form-item>
@@ -237,14 +237,6 @@ export default {
 
 <style lang="scss">
 .customsClearance {
-  .search-area {
-    .el-form-item__content {
-      display: flex;
-      .el-button {
-        margin-left: 10px;
-      }
-    }
-  }
   .cost-title {
     display: flex;
     align-items: center;

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

+<template>
+  <div class="app-departure">
+    <el-form ref="departureForm" :rules="rules" :model="departureObj" label-width="120px">
+      <el-form-item label="预计开船时间">
+      </el-form-item>
+      <el-form-item label="实际开船时间">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="departureObj.actualTime"></el-date-picker>
+        <p class="message-area">订单状态与短信通知，将到指定时间更新与发送</p>
+        <p class="message-area" v-show="showMsg">实际开船实际与预计时间不符</p>
+      </el-form-item>
+
+      <el-form-item label="预期到港时间" prop="arrivalTime">
+        <el-date-picker type="date" placeholder="请选择日期" v-model="departureObj.arrivalTime">
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <el-row class="operate-button">
+      <el-button type="primary">保存</el-button>
+      <el-button type="success" @click="onSubmit('departureForm')">提交</el-button>
+      <el-button @click="cancel">关闭</el-button>
+      <el-button type="primary" @click="exceptionReg" :disabled="!showMsg">异常登记</el-button>
+    </el-row>
+
+    <!-- 对话框 -->
+    <el-dialog custom-class="shipping-dialog departure" title="票异常" :visible.sync="dialogVisible" width="700px" :modal-append-to-body=false append-to-body destroy-on-close>
+      <el-form ref="errorForm" :model="errorObj" label-width="140px">
+        <el-form-item label="操作步骤">
+          <el-select v-model="errorObj.step" placeholder="请选择操作步骤">
+          </el-select>
+        </el-form-item>
+        <el-form-item label="票异常">
+          <el-select v-model="errorObj.ticketError" placeholder="请选择票异常">
+          </el-select>
+        </el-form-item>
+        <el-form-item label="异常情况">
+          <el-input v-model="errorObj.description" type="textarea" rows="2" placeholder="请输入异常情况"></el-input>
+        </el-form-item>
+        <el-form-item label="异常时间" prop="arrivalTime" class="two-element">
+          <el-date-picker type="date" placeholder="请选择日期" v-model="errorObj.errorStart"></el-date-picker>
+          <el-date-picker type="date" placeholder="请选择日期" v-model="errorObj.errorend"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="是否更新订单状态">
+          <el-radio-group v-model="errorObj.updateOrder">
+            <el-radio v-for="item in status" :key="item.value" :label="item.value">{{item.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="中文内容">
+          <el-input v-model="errorObj.chContent" type="textarea" rows="2" placeholder="请输入中文内容"></el-input>
+        </el-form-item>
+        <el-form-item label="英文内容">
+          <el-input v-model="errorObj.enContent" type="textarea" rows="2" placeholder="请输入英文内容"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <el-row class="operate-button">
+        <el-button type="success" @click="onSubmit('errorForm')">提交</el-button>
+        <el-button @click="dialogVisible = false;">关闭</el-button>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+/**
+ * 起运
+ */
+export default {
+  name: "departure",
+  data() {
+    return {
+      // 起运对象
+      departureObj: {},
+      // 异常对象
+      errorObj: {},
+      // 校验
+      rules: {
+        arrivalTime: [{ required: true, message: "必填", trigger: "change" }],
+      },
+      // 弹窗配置
+      dialogVisible: false,
+      // 提示消息
+      showMsg: false,
+      // 是否更新订单动态
+      status: [
+        {
+          value: "1",
+          label: "是",
+        },
+        {
+          value: "2",
+          label: "否",
+        },
+      ],
+    };
+  },
+  watch: {
+    // 实际开船时间
+    "departureObj.actualTime"(val) {
+      this.compareDate(val, this.departureObj.arrivalTime);
+    },
+    // 预计到港时间
+    "departureObj.arrivalTime"(val) {
+      this.compareDate(this.departureObj.actualTime, val);
+    },
+  },
+  methods: {
+    // 时间比较
+    compareDate(actualTime, arrivalTime) {
+      this.showMsg = false;
+      let date1 = null,
+        date2 = null;
+      if (actualTime) date1 = new Date(actualTime);
+      if (arrivalTime) date2 = new Date(arrivalTime);
+      if (date1 && date2 && date1 > date2) {
+        this.showMsg = true;
+      }
+    },
+    // 异常登记
+    exceptionReg() {
+      this.dialogVisible = true;
+    },
+    /** 提交 */
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+    /** 取消 */
+    cancel() {
+      this.$emit("closeDialog");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-departure {
+  .message-area {
+    margin: 0;
+    color: red;
+  }
+}
+</style>

src/views/ecw/box/shippingSea/subMaterial.vue → src/views/ecw/box/shippingSea/nodePage/subMaterial.vue

 <template>
-  <div class="app-subMaterial">
+  <div>
     <el-form ref="subMaterialForm" :model="subMaterialObj" label-width="140px">
       <el-form-item label="代理商AGENT">
         <el-select v-model="subMaterialObj.agent" placeholder="请选择供应商">
         </el-select>
       </el-form-item>
-      <el-form-item label="提单号M/BL NO." class="billNo">
-        <el-input v-model="subMaterialObj.billNo"></el-input>
+      <el-form-item label="提单号M/BL NO." class="two-element">
+        <el-input v-model="subMaterialObj.billNo" placeholder="请输入提单号"></el-input>
         <el-button type="primary">提单确认邮件</el-button>
       </el-form-item>
       <el-form-item label="SO NO.">
-        <el-input v-model="subMaterialObj.soNo"></el-input>
+        <el-input v-model="subMaterialObj.soNo" placeholder="请输入SO NO"></el-input>
       </el-form-item>
       <el-form-item label="装货港">
         <el-select v-model="subMaterialObj.loadingPort" placeholder="请选择装货港">
@@ -39,7 +39,7 @@
       <el-form-item label="Mark & No.">
         <el-input v-model="subMaterialObj.markNo"></el-input>
       </el-form-item>
-      <el-form-item label="包装数量与单位" class="quantityUnit">
+      <el-form-item label="包装数量与单位" class="two-element">
         <el-input v-model="subMaterialObj.quantity" placeholder="请输入包装数量"></el-input>
         <el-select v-model="subMaterialObj.unit" placeholder="请选择单位">
         </el-select>
@@ -61,7 +61,7 @@
       </el-form-item>
       <el-form-item label="出单方式">
         <el-radio-group v-model="subMaterialObj.billingMethod">
-          <el-radio v-for="item in method" :key="item.value" :label="item.value">{{item.label }}</el-radio>
+          <el-radio v-for="item in method" :key="item.value" :label="item.value">{{item.label}}</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="备注">
@@ -120,15 +120,4 @@ export default {
 </script>
 
 <style lang="scss">
-.app-subMaterial {
-  .billNo,
-  .quantityUnit {
-    .el-form-item__content {
-      display: flex;
-      > :last-child {
-        margin-left: 10px;
-      }
-    }
-  }
-}
 </style>

src/views/ecw/box/shippingSea/trailer.vue → src/views/ecw/box/shippingSea/nodePage/trailer.vue

@@ -15,19 +15,19 @@
         <el-date-picker type="date" placeholder="请选择日期" v-model="trailer.trailerTime"></el-date-picker>
       </el-form-item>
       <el-form-item label="车牌">
-        <el-input v-model="trailer.licensePlate"></el-input>
+        <el-input v-model="trailer.licensePlate" placeholder="请输入车牌"></el-input>
       </el-form-item>
       <el-form-item label="司机">
-        <el-input v-model="trailer.driver"></el-input>
+        <el-input v-model="trailer.driver" placeholder="请输入司机"></el-input>
       </el-form-item>
       <el-form-item label="司机联系方式">
-        <el-input v-model="trailer.telephone"></el-input>
+        <el-input v-model="trailer.telephone" placeholder="请输入司机联系方式"></el-input>
       </el-form-item>
       <el-form-item label="货柜号">
-        <el-input v-model="trailer.containerNumber"></el-input>
+        <el-input v-model="trailer.containerNumber" placeholder="请输入货柜号"></el-input>
       </el-form-item>
       <el-form-item label="封条">
-        <el-input v-model="trailer.seal"></el-input>
+        <el-input v-model="trailer.seal" placeholder="请输入封条"></el-input>
       </el-form-item>
     </el-form>
     <el-row class="operate-button">

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

@@ -10,7 +10,7 @@
               <p>{{node.title}}</p>
             </template>
             <template v-else-if="node.unNode">
-              <el-button type="primary" @click="nodeClick(node)">AGENT</el-button>
+              <el-button type="primary" @click="nodeClick(node)">{{node.title}}</el-button>
             </template>
           </div>
         </div>
@@ -40,20 +40,26 @@
       <subMaterial @closeDialog="closeDialog" v-if="dialogConfig.type === 'subMaterial'" />
       <!-- 驳船 -->
       <barge @closeDialog="closeDialog" v-if="dialogConfig.type === 'barge'" />
+      <!-- 起运 -->
+      <departure @closeDialog="closeDialog" v-if="dialogConfig.type === 'departure'" />
+      <!-- 提单copy -->
+      <blCopy @closeDialog="closeDialog" v-if="dialogConfig.type === 'blCopy'" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import bookingWidget from "./booking";
-import trailerWidget from "./trailer";
-import preinstallWidget from "./preinstall";
-import agentWidget from "./agent";
-import cabinetWidget from "./cabinet";
-import customsClearance from "./customsClearance";
-import ship from "./ship";
-import subMaterial from "./subMaterial";
-import barge from "./barge";
+import bookingWidget from "./nodePage/booking";
+import trailerWidget from "./nodePage/trailer";
+import preinstallWidget from "./nodePage/preinstall";
+import agentWidget from "./nodePage/agent";
+import cabinetWidget from "./nodePage/cabinet";
+import customsClearance from "./nodePage/customsClearance";
+import ship from "./nodePage/ship";
+import subMaterial from "./nodePage/subMaterial";
+import barge from "./nodePage/barge";
+import departure from "./nodePage/departure";
+import blCopy from "./nodePage/blCopy";
 
 /**
  * 海运流程图
@@ -70,6 +76,8 @@ export default {
     ship,
     subMaterial,
     barge,
+    departure,
+    blCopy,
   },
   props: {
     shippingType: String,
@@ -109,7 +117,7 @@ export default {
             {
               unNode: true,
               type: "agent",
-              title: "代理商设置",
+              title: "AGENT",
             },
           ],
           [
@@ -151,10 +159,20 @@ export default {
             },
           ],
           [
-            {
+            /* {
               title: "清关文件",
               imgSrc: require("@/assets/images/shipping/qg-start.png"),
               type: "clearanceDocument",
+            }, */
+            {
+              unNode: true,
+              type: "blCopy",
+              title: "提单Copy",
+            },
+            {
+              unNode: true,
+              type: "clearanceDocument",
+              title: "清关文件",
             },
           ],
           [
@@ -205,14 +223,18 @@ export default {
           this.$set(this.dialogConfig, "width", "700px");
           this.$set(this.dialogConfig, "fullscreen", false);
           break;
-        // 拖车
-        case "trailer":
         // AGENT
         case "agent":
+          this.$set(this.dialogConfig, "title", "代理商设置");
+          break;
+        // 拖车
+        case "trailer":
         // 装柜
         case "cabinet":
         // 报关
         case "customsDeclaration":
+        // 起运
+        case "departure":
           this.$set(this.dialogConfig, "width", "500px");
           this.$set(this.dialogConfig, "fullscreen", false);
           break;

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

@@ -57,5 +57,13 @@ export default {
   .operate-button {
     text-align: center;
   }
+  .two-element{
+    .el-form-item__content {
+      display: flex;
+      > :last-child {
+        margin-left: 10px;
+      }
+    }
+  }
 }
 </style>