海运操作开发

src/router/index.js

@@ -284,24 +284,24 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/box',
+    path: '/boxSea',
     component: Layout,
     hidden: true,
     redirect: 'noredirect',
     children: [
-      {
+      /* {
         path: 'query/:boxId(\\d+)',
         component: (resolve) => import('@/views/ecw/box/query'),
         props: true,
         name: 'boxQuery',
         meta: {title: '出货详情', icon: '', activeMenu: '/shipment/box'}
-      },
+      }, */
       {
         path: 'shippingSea/:boxId(\\d+)',
         component: (resolve) => import('@/views/ecw/box/shipping/shippingSea'),
         props: true,
         name: 'shippingSea',
-        meta: {title: '海运出货操作', icon: '', activeMenu: '/shipment/box'}
+        meta: {title: '海运出货操作', icon: '', activeMenu: '/shipment/boxSea'}
       }
     ]
   },

src/views/ecw/box/indexAir.vue

@@ -351,7 +351,6 @@
       },
       /** 查看按钮操作 */
       handleCommand(row, command) {
-        console.log(row, command)
         switch (command) {
           case 'sea':
             this.$router.push('/box/shippingSea/' + row.id)

src/views/ecw/box/indexSea.vue

@@ -381,10 +381,9 @@
       },
       /** 查看按钮操作 */
       handleCommand(row, command) {
-        console.log(row, command)
         switch (command) {
           case 'sea':
-            this.$router.push('/box/shippingSea/' + row.id)
+            this.$router.push('/boxSea/shippingSea/' + row.id)
             break;
 
           case 'edit':

src/views/ecw/box/indexSeaAir.vue

@@ -392,7 +392,6 @@
       },
       /** 查看按钮操作 */
       handleCommand(row, command) {
-        console.log(row, command)
         switch (command) {
           case 'sea':
             this.$router.push('/box/shippingSea/' + row.id)

src/views/ecw/box/shipping/booking.vue

+<template>
+  <el-form ref="bookingForm" :rules="rules" :model="booking" label-width="120px" class="booking-form">
+    <el-form-item label="SO NO">
+      <el-input v-model="booking.soNo"></el-input>
+    </el-form-item>
+    <el-form-item label="船公司类型">
+      <el-select v-model="booking.type" placeholder="请选择船公司类型">
+        <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="驳船港">
+      <el-select v-model="booking.bargePort" placeholder="请选择驳船港">
+        <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="大船港">
+      <el-select v-model="booking.bigShipPort" placeholder="请选择大船港">
+        <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="目的港">
+      <el-select v-model="booking.destination" placeholder="请选择目的港">
+        <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="订舱公司">
+      <el-select v-model="booking.bookingCompany" placeholder="请选择订舱公司">
+        <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="预计驳船时间" prop="time">
+      <el-date-picker type="date" placeholder="请选择日期" v-model="booking.bargeTime"></el-date-picker>
+    </el-form-item>
+    <el-form-item label="预计开船时间" prop="time">
+      <el-date-picker type="date" placeholder="请选择日期" v-model="booking.departureTime"></el-date-picker>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">提交</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "booking",
+  data() {
+    return {
+      types: ["PIL", "MSK", "CMA", "COSCO", "ZIM", "ONE", "OOCL", "MSC", "HPL"],
+      booking: {},
+      rules: {
+        time: [{ required: true, message: "请选择时间", trigger: "change" }],
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.$refs["bookingForm"].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+    cancel() {
+      this.$emit("closeDialog");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.booking-form {
+  .el-form-item__content {
+    > div {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/ecw/box/shipping/flowChart.vue

 <template>
-  <el-scrollbar :vertical="true">
-    <section class="shipping-chart">
+  <div>
+    <el-scrollbar :vertical="true" style="width: 100%;" viewClass="shipping-chart">
       <div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes">
         <div>
           <div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div">
-            <img :src="node.imgSrc" alt="">
-            <p>{{node.title}}</p>
+            <template v-if="!node.unNode">
+              <img :src="node.imgSrc" alt="">
+              <p>{{node.title}}</p>
+            </template>
+            <template v-else-if="node.unNode">
+              <el-button type="primary">AGENT</el-button>
+            </template>
           </div>
         </div>
         <div class="chart-arrow" v-if="index !== (chartData['sea'].length-1)">
-          <p>箭头</p>
+          <img src="@/assets/images/shipping/jt-start.png" alt="">
         </div>
       </div>
-    </section>
-  </el-scrollbar>
+    </el-scrollbar>
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" destroy-on-close>
+      <booking @closeDialog="closeDialog" v-if="type === 'booking'" />
+      <trailer @closeDialog="closeDialog" v-if="type === 'trailer'" />
+    </el-dialog>
+  </div>
+
 </template>
 
 <script>
+import booking from "./booking";
+import trailer from "./trailer";
+
 export default {
   name: "flowChart",
+  components: { booking, trailer },
   props: {
     shippingType: String,
   },
   data() {
     return {
+      dialogVisible: false,
+      title: "",
+      type: "",
       chartData: {
         sea: [
           [
@@ -44,6 +61,10 @@ export default {
               imgSrc: require("@/assets/images/shipping/tc-start.png"),
               type: "trailer",
             },
+            {
+              unNode: true,
+              agent: true,
+            },
           ],
           [
             {
@@ -116,7 +137,6 @@ export default {
               title: "结算",
               imgSrc: require("@/assets/images/shipping/js-start.png"),
               type: "settlement",
-              isEnd: true,
             },
           ],
         ],
@@ -124,30 +144,46 @@ export default {
     };
   },
   methods: {
+    closeDialog() {
+      this.dialogVisible = false;
+    },
     nodeClick(node) {
       console.log(node);
+      switch (node.type) {
+        case "booking":
+        case "trailer":
+          this.dialogVisible = true;
+          this.title = node.title;
+          this.type = node.type;
+          break;
+      }
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .shipping-chart {
+  width: max-content;
   display: flex;
   justify-content: center;
+  margin: 10px;
   .chart-nodes {
-    p {
-      margin: 0;
-      text-align: center;
-    }
     display: flex;
     align-items: center;
     justify-content: center;
     .node-div {
+      margin-top: 10px;
       cursor: pointer;
+      p {
+        margin-top: -10px;
+        margin-bottom: 0px;
+        text-align: center;
+      }
     }
   }
   .chart-arrow {
+    // margin: -15px 10px 0px 10px;
     margin: 0 10px;
   }
 }

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

@@ -39,6 +39,6 @@ export default {
 
 <style lang="scss" scoped>
 .shipping-flow {
-  margin-top: 15px;
+  margin-top: 5px;
 }
 </style>

src/views/ecw/box/shipping/trailer.vue

+<template>
+  <el-form ref="trailerForm" :rules="rules" :model="trailer" label-width="120px" class="trailer-form">
+    <el-form-item label="状态">
+      <el-select v-model="trailer.status" placeholder="请选择状态">
+        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="拖车公司">
+      <el-select v-model="trailer.trailerCompany" placeholder="请选择拖车公司">
+        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="拖车时间" prop="time">
+      <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-form-item>
+    <el-form-item label="司机">
+      <el-input v-model="trailer.driver"></el-input>
+    </el-form-item>
+    <el-form-item label="司机联系方式">
+      <el-input v-model="trailer.telephone"></el-input>
+    </el-form-item>
+    <el-form-item label="货柜号">
+      <el-input v-model="trailer.containerNumber"></el-input>
+    </el-form-item>
+    <el-form-item label="封条">
+      <el-input v-model="trailer.seal"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">提交</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "trailer",
+  data() {
+    return {
+      status: [
+        {
+          value: "1",
+          label: "已派车，待提柜",
+        },
+        {
+          value: "2",
+          label: "已提柜，待还柜",
+        },
+        {
+          value: "3",
+          label: "已还柜",
+        },
+      ],
+      trailer: {},
+      rules: {
+        time: [{ required: true, message: "请选择时间", trigger: "change" }],
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.$refs["trailerForm"].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+    cancel() {
+      this.$emit("closeDialog");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.trailer-form {
+  .el-form-item__content {
+    > div {
+      width: 100%;
+    }
+  }
+}
+</style>