装柜界面开发

src/router/index.js

@@ -302,13 +302,6 @@ export const constantRoutes = [
         props: true,
         name: 'shippingSea',
         meta: {title: '海运出货操作', icon: '', activeMenu: '/shipment/boxSea'}
-      },
-      {
-        path: 'shippingSea/preinstall/:boxId(\\d+)',
-        component: (resolve) => import('@/views/ecw/box/shipping/preinstall'),
-        props: true,
-        name: 'preinstall',
-        meta: {title: '出货安排（预装）', icon: '', activeMenu: '/shipment/boxSea'}
       }
     ]
   },

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

@@ -14,14 +14,19 @@
 </template>
 
 <script>
+/**
+ * agent
+ */
 export default {
   name: "agent",
   data() {
     return {
+      // agent对象
       agent: {},
     };
   },
   methods: {
+    /** 提交 */
     onSubmit() {
       this.$refs["agentForm"].validate((valid) => {
         if (valid) {
@@ -29,6 +34,7 @@ export default {
         }
       });
     },
+    /** 取消 */
     cancel() {
       this.$emit("closeDialog");
     },

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

@@ -34,12 +34,12 @@
       </el-form-item>
 
       <el-row>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="预计开船时间" prop="time">
             <el-date-picker type="date" placeholder="请选择日期" v-model="booking.departureTime"></el-date-picker>
           </el-form-item>
         </el-col>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
             <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
             </el-select>
@@ -48,12 +48,12 @@
       </el-row>
 
       <el-row>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="预计提单补料时间">
             <el-date-picker type="date" placeholder="请选择日期" v-model="booking.feedTime"></el-date-picker>
           </el-form-item>
         </el-col>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
             <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
             </el-select>
@@ -62,12 +62,12 @@
       </el-row>
 
       <el-row>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="预计报关时间">
             <el-date-picker type="date" placeholder="请选择日期" v-model="booking.declarationTime"></el-date-picker>
           </el-form-item>
         </el-col>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
             <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
             </el-select>
@@ -76,12 +76,12 @@
       </el-row>
 
       <el-row>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="预计截关时间">
             <el-date-picker type="date" placeholder="请选择日期" v-model="booking.cutOffTime"></el-date-picker>
           </el-form-item>
         </el-col>
-        <el-col span="12">
+        <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
             <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
             </el-select>
@@ -99,18 +99,25 @@
 </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" }],
+        time: [{ required: true, message: "必填", trigger: "change" }],
       },
     };
   },
   methods: {
+    /** 提交 */
     onSubmit() {
       this.$refs["bookingForm"].validate((valid) => {
         if (valid) {
@@ -118,6 +125,7 @@ export default {
         }
       });
     },
+    /** 取消 */
     cancel() {
       this.$emit("closeDialog");
     },

src/views/ecw/box/shipping/cabinet/index.vue

+<template>
+  <div>
+    <el-form ref="cabinetForm" :rules="rules" :model="cabinet" label-width="80px">
+      <el-form-item label="到仓时间">
+        <el-date-picker type="date" placeholder="请选择日期" v-model="cabinet.arrivalTime"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="仓库">
+        <el-select v-model="cabinet.warehouse" placeholder="请选择仓库">
+        </el-select>
+      </el-form-item>
+      <el-form-item label="装柜时间" prop="time">
+        <el-date-picker type="date" placeholder="请选择日期" v-model="cabinet.cabinetTime"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="出仓时间">
+        <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>
+      </el-form-item>
+    </el-form>
+
+    <!-- 开始装柜 -->
+    <el-dialog title="开始装柜" :visible.sync="dialogVisible" fullscreen :modal-append-to-body=false append-to-body destroy-on-close>
+      <startPacking />
+    </el-dialog>
+
+    <!-- 操作 -->
+    <el-row class="operate-button">
+      <el-button type="primary" @click="onSubmit">保存</el-button>
+      <el-button type="success">封柜</el-button>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="danger" @click="startCabinet">开始装柜</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import startPacking from "./startPacking.vue";
+
+/**
+ * 装柜
+ */
+export default {
+  name: "cabinet",
+  components: { startPacking },
+  props: {
+    boxId: String,
+  },
+  data() {
+    return {
+      // 弹窗
+      dialogVisible: false,
+      // 装柜对象
+      cabinet: {
+        fileList: [],
+      },
+      // 校验
+      rules: {
+        time: [{ required: true, message: "请选择时间", trigger: "change" }],
+      },
+    };
+  },
+  methods: {
+    /** 提交 */
+    onSubmit() {
+      this.$refs["cabinetForm"].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+    /** 取消 */
+    cancel() {
+      this.$emit("closeDialog");
+    },
+    /** 开始装柜 */
+    startCabinet() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/ecw/box/shipping/cabinet/startPacking.vue

+<template>
+  <div class="startPacking">
+    <el-card>
+      <el-row class="content-area">
+
+        <!-- 左侧 -->
+        <el-col :span="6" class="left-area">
+          <el-row v-for="item in testData" :key="item.key" class="title-info">
+            <div>
+              <p>{{item.title}}</p>
+            </div>
+            <div>
+              <p>111</p>
+              <p>111</p>
+              <p>111</p>
+            </div>
+          </el-row>
+        </el-col>
+
+        <!-- 右侧 -->
+        <el-col :span="18" class="right-area">
+
+          <!-- 操作 -->
+          <el-row class="table-title">
+            <div>当前装柜：第一部分</div>
+            <div>
+              <el-input v-model="qrCode" placeholder="请输入二维码/条码编号"></el-input>
+              <el-button type="primary">确定</el-button>
+              <el-button type="primary" @click="handlerClick('batchInput','批量输入')">批量输入</el-button>
+              <el-button type="primary" @click="handlerClick('correction','装柜纠错')">装柜纠错</el-button>
+              <el-button type="primary" @click="handlerClick('correctionOrder','批量装柜纠错')">批量装柜纠错</el-button>
+            </div>
+          </el-row>
+
+          <!-- 表格 -->
+          <el-row>
+            <el-table v-loading="loading" :data="listData">
+              <el-table-column label="序号" type="index" width="50" />
+              <el-table-column label="订单号" align="center" prop="selfNo">
+                <template slot-scope="scope">
+                  <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{ scope.row.selfNo }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="货物信息" align="center" prop="cubNo" />
+              <el-table-column label="计划箱数" align="center" prop="cabinetId" />
+              <el-table-column label="实装箱数" align="center" prop="transportType" />
+              <el-table-column label="体积" align="center" prop="squareNumber" />
+              <el-table-column label="重量" align="center" prop="weight" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button type="primary" size="small">移出</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 统计 -->
+    <el-row>
+      <el-col :span="6" class="totle-info">
+        <div>
+          <p>总计：</p>
+          <p>111</p>
+        </div>
+        <div>
+          <p>容量：</p>
+          <p>111</p>
+        </div>
+        <div>已装0箱</div>
+      </el-col>
+    </el-row>
+
+    <!-- 操作 -->
+    <el-row class="button-area">
+      <el-button type="primary" @click="handlerClick('supplementOrder','补单')">补单</el-button>
+      <el-button type="primary">申请封柜</el-button>
+      <el-button type="primary" @click="handlerClick('modifyCabinet','修改柜信息')">修改柜信息</el-button>
+      <el-button type="primary">封柜审核中</el-button>
+    </el-row>
+
+    <!-- 对话框 -->
+    <el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :fullscreen="dialogConfig.fullscreen" :width="dialogConfig.width" :modal-append-to-body=false append-to-body destroy-on-close>
+      <!-- 已装未装订单 -->
+      <template v-if="dialogConfig.type === 'orderTable'">
+        <el-table :data="[]">
+          <el-table-column label="已装" align="center" prop="selfNo" />
+          <el-table-column label="未装" align="center" prop="cubNo" />
+        </el-table>
+      </template>
+      <!-- 补单 -->
+      <template v-if="dialogConfig.type === 'supplementOrder'">
+        <supplementOrder />
+      </template>
+      <!-- 修改柜信息 -->
+      <template v-if="dialogConfig.type === 'modifyCabinet'">
+        <el-form ref="modifyForm" :rules="rules" :model="modifyCabinetObj" label-width="80px">
+          <el-form-item label="起运仓库" prop="warehouse">
+            <el-select v-model="modifyCabinetObj.warehouse" placeholder="请选择起运仓库">
+            </el-select>
+          </el-form-item>
+          <el-form-item label="预计时间" prop="estimatedTime">
+            <el-date-picker type="date" placeholder="请选择日期" v-model="modifyCabinetObj.estimatedTime"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="选择柜型" prop="cabinetType">
+            <el-select v-model="modifyCabinetObj.cabinetType" placeholder="请选择柜型">
+            </el-select>
+          </el-form-item>
+          <el-form-item label="柜号">
+            <el-input v-model="modifyCabinetObj.cabinetNo" placeholder="请输入柜号" clearable />
+          </el-form-item>
+        </el-form>
+        <el-row class="operate-button">
+          <el-button type="primary" @click="onSubmit('modifyForm')">下一步</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </el-row>
+      </template>
+      <!-- 装柜纠错 -->
+      <template v-if=" dialogConfig.type === 'correction'">
+        <el-form ref="correctionForm" :rules="rules" :model="correctionObj" label-position="top">
+          <el-form-item label="装柜纠错（二维码/条形码编号）" prop="qrCode">
+            <el-input v-model="correctionObj.qrCode" placeholder="请输入二维码/条形码编号" clearable />
+          </el-form-item>
+        </el-form>
+        <el-row class="operate-button">
+          <el-button type="primary" @click="onSubmit('correctionForm')">提交</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </el-row>
+      </template>
+      <!-- 批量装柜纠错（订单号） -->
+      <template v-if=" dialogConfig.type === 'correctionOrder'">
+        <el-form ref="orderForm" :rules="rules" :model="orderObj" label-position="top">
+          <el-form-item label="装柜纠错（订单号）" prop="orderNo">
+            <el-input v-model="orderObj.orderNo" placeholder="请输入订单号" clearable />
+          </el-form-item>
+        </el-form>
+        <el-row class="operate-button">
+          <el-button type="primary" @click="onSubmit('orderForm')">提交</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </el-row>
+      </template>
+      <!-- 装柜批量输入 -->
+      <template v-if=" dialogConfig.type === 'batchInput'">
+        <el-form ref="batchForm" :rules="rules" :model="batchObj" label-position="top">
+          <el-form-item label="" prop="qrCode">
+            <el-input type="textarea" :rows="3" v-model="batchObj.qrCode" placeholder="请输入，多个以逗号分隔" clearable />
+          </el-form-item>
+        </el-form>
+        <el-row class="operate-button">
+          <el-button type="primary" @click="onSubmit('batchForm')">提交</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </el-row>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import supplementOrder from "./supplementOrder.vue";
+
+/**
+ * 开始装柜
+ */
+export default {
+  name: "startPacking",
+  components: {
+    supplementOrder,
+  },
+  data() {
+    return {
+      // laoding
+      loading: false,
+      // 二维码/条码编号
+      qrCode: "",
+      // 表格数据
+      listData: [
+        {
+          selfNo: "111aaa",
+          cubNo: "11111111111111111111111111",
+        },
+        {
+          selfNo: "111aaa",
+          cubNo: "11111111111111111111111111",
+        },
+      ],
+      // 左侧数据
+      testData: [
+        {
+          key: 1,
+          title: "第一部分",
+        },
+        {
+          key: 2,
+          title: "第二部分",
+        },
+      ],
+      // 弹窗配置
+      dialogConfig: {
+        title: "",
+        dialogVisible: false,
+        width: "30%",
+        type: "",
+        fullscreen: false,
+      },
+      // 批量输入
+      batchObj: {},
+      // 批量纠错（订单号）
+      orderObj: {},
+      // 纠错
+      correctionObj: {},
+      // 修改柜信息
+      modifyCabinetObj: {},
+      // 修改柜信息校验
+      rules: {
+        warehouse: [{ required: true, message: "必填", trigger: "change" }],
+        estimatedTime: [{ required: true, message: "必填", trigger: "change" }],
+        cabinetType: [{ required: true, message: "必填", trigger: "change" }],
+        qrCode: [{ required: true, message: "必填", trigger: "change" }],
+        orderNo: [{ required: true, message: "必填", trigger: "change" }],
+      },
+    };
+  },
+  methods: {
+    /** 点击事件统一入口 */
+    handlerClick(type, title) {
+      this.shwoDialog({ type, title });
+    },
+    /** 表格订单号点击 */
+    orderClick(row) {
+      this.shwoDialog({
+        type: "orderTable",
+        title: row.selfNo,
+      });
+    },
+    /** 弹窗事件 */
+    shwoDialog(config) {
+      this.$set(this.dialogConfig, "title", config.title);
+      this.$set(this.dialogConfig, "type", config.type);
+      switch (config.type) {
+        case "orderTable":
+        case "modifyCabinet":
+          this.$set(this.dialogConfig, "fullscreen", false);
+          break;
+        case "supplementOrder":
+          this.$set(this.dialogConfig, "fullscreen", true);
+          break;
+      }
+      this.$set(this.dialogConfig, "dialogVisible", true);
+    },
+    /** 关闭弹窗 */
+    closeDialog() {
+      this.$set(this.dialogConfig, "dialogVisible", false);
+    },
+    /** 修改提交 */
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.startPacking {
+  p {
+    margin: 0;
+  }
+  .content-area {
+    display: flex;
+    .left-area {
+      border-right: 3px solid #e6ebf5;
+      padding-right: 10px;
+      .title-info {
+        height: 100px;
+        > div:first-child {
+          font-size: 16px;
+          background-color: #f2f2f2;
+          line-height: 30px;
+          text-align: center;
+        }
+        > :last-child {
+          display: flex;
+          > p {
+            margin-right: 10px;
+            color: #4f9cdd;
+          }
+        }
+      }
+    }
+    .right-area {
+      padding-left: 10px;
+      .table-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        > div:first-child {
+          flex: 1;
+          font-size: 16px;
+        }
+        > div:last-child {
+          display: flex;
+          > .el-input {
+            margin-right: 10px;
+          }
+        }
+      }
+      .order-href {
+        color: #4f9cdd;
+      }
+    }
+  }
+  .totle-info {
+    font-size: 20px;
+    margin-top: 15px;
+    > div {
+      display: flex;
+      margin-bottom: 5px;
+    }
+  }
+  .button-area {
+    text-align: center;
+  }
+}
+</style>

src/views/ecw/box/shipping/cabinet/supplementOrder.vue

+<template>
+  <div class="supplementOrder">
+    <el-card>
+      <!-- 内容区 -->
+      <el-row class="content-area">
+
+        <!-- 左侧 -->
+        <el-col :span="6" class="left-area">
+          <el-row>
+            <el-button type="primary">新增</el-button>
+            <el-button type="primary">删除</el-button>
+          </el-row>
+          <el-row v-for="item in testData" :key="item.key" class="title-info">
+            <div>
+              <p>{{item.title}}</p>
+            </div>
+            <div>
+              <p>111</p>
+              <p>111</p>
+              <p>111</p>
+              <div>
+                <i class="el-icon-delete"></i>
+              </div>
+            </div>
+          </el-row>
+        </el-col>
+
+        <!-- 右侧 -->
+        <el-col :span="18" class="right-area">
+
+          <el-row class="right-title">
+            <div>货物筛选</div>
+            <div>当前装柜：第一部分</div>
+            <div>可预装方数：111m³，重量：22KG</div>
+          </el-row>
+
+          <!-- 搜索工作栏 -->
+          <el-row>
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+              <el-form-item label="始发地">111</el-form-item>
+              <el-form-item label="目的地" prop="destination">
+                <el-select v-model="queryParams.destination" placeholder="请选择目的地">
+                </el-select>
+              </el-form-item>
+              <el-form-item label="订单号" prop="orderNo">
+                <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
+              </el-form-item>
+
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </el-row>
+
+          <!-- 表格 -->
+          <el-row>
+            <el-row class="table-title">
+              <div>EC1111111</div>
+              <div>发往：xxxxxxxxxx</div>
+              <div>我司全代</div>
+              <div>入仓时间：1111111</div>
+              <div>
+                <div>[全部预装]</div>
+                <div>[收起]</div>
+              </div>
+            </el-row>
+            <el-table v-loading="loading" :data="listData">
+              <el-table-column label="序号" type="index" width="50" />
+              <el-table-column label="订单号" align="center" prop="selfNo" />
+              <el-table-column label="货物信息" align="center" prop="cubNo" />
+              <el-table-column label="计划箱数" align="center" prop="cabinetId" />
+              <el-table-column label="实装箱数" align="center" prop="transportType" />
+              <el-table-column label="体积" align="center" prop="squareNumber" />
+              <el-table-column label="重量" align="center" prop="weight" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button type="primary" size="small">预装</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+          <!-- 分页 -->
+          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
+        </el-col>
+
+      </el-row>
+    </el-card>
+    <el-row>
+      <el-col :span="6" class="totle-info">
+        <div>
+          <p>总计：</p>
+          <p>111</p>
+        </div>
+        <div>
+          <p>容量：</p>
+          <p>111</p>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="button-area">
+      <el-button type="primary">完成</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+/**
+ * 补单
+ */
+export default {
+  name: "supplementOrder",
+  data() {
+    return {
+      // loading
+      loading: false,
+      // 二维码/条码编号
+      cabinetNo: "",
+      // 表格数据
+      listData: [
+        {
+          selfNo: "111aaa",
+          cubNo: "11111111111111111111111111",
+        },
+        {
+          selfNo: "111aaa",
+          cubNo: "11111111111111111111111111",
+        },
+      ],
+      // 左侧数据
+      testData: [
+        {
+          key: 1,
+          title: "第一部分",
+        },
+        {
+          key: 2,
+          title: "第二部分",
+        },
+      ],
+      // 查询参数
+      queryParams: {},
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.supplementOrder {
+  p {
+    margin: 0;
+  }
+  .content-area {
+    display: flex;
+    .left-area {
+      border-right: 3px solid #e6ebf5;
+      padding-right: 10px;
+      .title-info {
+        margin-top: 10px;
+        height: auto;
+        > div:first-child {
+          font-size: 16px;
+          background-color: #f2f2f2;
+          line-height: 30px;
+          text-align: center;
+        }
+        > :last-child {
+          display: flex;
+          align-items: center;
+          > p {
+            margin-right: 10px;
+            color: #4f9cdd;
+          }
+          > div {
+            flex: 1;
+            text-align: right;
+            > i {
+              cursor: pointer;
+              color: red;
+            }
+          }
+        }
+      }
+    }
+    .right-area {
+      padding-left: 10px;
+      .right-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        font-size: 16px;
+        > div:first-child {
+          font-size: 18px;
+        }
+        > div:first-child + div {
+          margin-left: 20px;
+        }
+        > div:last-child {
+          flex: 1;
+          text-align: right;
+          font-size: 18px;
+          color: red;
+        }
+      }
+      .table-title {
+        display: flex;
+        line-height: 30px;
+        background-color: #4f9cdd;
+        color: #fff;
+        > div {
+          margin-left: 10px;
+        }
+        > div:last-child {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
+          > div {
+            margin-right: 10px;
+          }
+        }
+      }
+      .el-pagination {
+        margin-top: 10px;
+        padding: 0;
+        text-align: right;
+      }
+    }
+  }
+  .totle-info {
+    font-size: 20px;
+    margin-top: 15px;
+    > div {
+      display: flex;
+      margin-bottom: 5px;
+    }
+  }
+  .button-area {
+    text-align: center;
+  }
+}
+</style>

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

 <template>
-  <div class="app-container preinstall">
+  <div class="preinstall">
 
     <!-- 搜索工作栏 -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
@@ -215,6 +215,9 @@
 import { DICT_TYPE } from "@/utils/dict";
 import { getWarehouseList } from "@/api/ecw/warehouse";
 
+/**
+ * 预装
+ */
 export default {
   name: "preinstall",
   components: {},
@@ -248,21 +251,22 @@ export default {
       operatorData: {
         operator: null,
       },
+      // 校验
       rules: {
         operator: [
-          { required: true, message: "请选择目的地操作员", trigger: "change" },
+          { required: true, message: "必填", trigger: "change" },
         ],
       },
     };
   },
   computed: {
-    // 始发地
+    /** 始发地 */
     exportWarehouseList() {
       return this.warehouseList.filter(
         (item) => item.tradeType == "2" || item.type == "3"
       );
     },
-    // 目的地
+    /** 目的地 */
     importWarehouseList() {
       return this.warehouseList.filter(
         (item) => item.tradeType == "1" || item.type == "3"
@@ -270,6 +274,7 @@ export default {
     },
   },
   created() {
+    // 查询仓库数据
     getWarehouseList().then((res) => (this.warehouseList = res.data));
     // this.getList();
   },

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

 <template>
   <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>
@@ -18,37 +19,58 @@
         </div>
       </div>
     </el-scrollbar>
-    <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :width="dialogConfig.width" destroy-on-close>
-      <booking @closeDialog="closeDialog" v-if="dialogConfig.type === 'booking'" />
-      <trailer @closeDialog="closeDialog" v-if="dialogConfig.type === 'trailer'" />
-      <preinstall v-if="dialogConfig.type === 'preinstall'" />
+
+    <!-- 弹窗 -->
+    <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>
+      <!-- 订舱 -->
+      <bookingWidget @closeDialog="closeDialog" v-if="dialogConfig.type === 'booking'" />
+      <!-- 拖车 -->
+      <trailerWidget @closeDialog="closeDialog" v-if="dialogConfig.type === 'trailer'" />
+      <!-- 预装 -->
+      <preinstallWidget v-if="dialogConfig.type === 'preinstall'" />
+      <!-- agent -->
       <agentWidget @closeDialog="closeDialog" v-if="dialogConfig.type === 'agent'" />
+      <!-- 装柜 -->
+      <cabinetWidget :boxId="boxId" @closeDialog="closeDialog" v-if="dialogConfig.type === 'cabinet'" />
     </el-dialog>
   </div>
 
 </template>
 
 <script>
-import booking from "./booking";
-import trailer from "./trailer";
-import preinstall from "./preinstall";
+import bookingWidget from "./booking";
+import trailerWidget from "./trailer";
+import preinstallWidget from "./preinstall";
 import agentWidget from "./agent";
+import cabinetWidget from "./cabinet";
 
+/**
+ * 海运流程图
+ */
 export default {
   name: "shippingChart",
-  components: { booking, trailer, preinstall, agentWidget },
+  components: {
+    bookingWidget,
+    trailerWidget,
+    preinstallWidget,
+    agentWidget,
+    cabinetWidget,
+  },
   props: {
     shippingType: String,
     boxId: String,
   },
   data() {
     return {
+      // 弹窗配置
       dialogConfig: {
         dialogVisible: false,
         title: "",
         width: "30%",
-        type: "",
+        fullscreen: false,
+        type: "", // 标识
       },
+      // 流程图节点
       chartData: {
         sea: [
           [
@@ -153,30 +175,36 @@ export default {
     };
   },
   methods: {
+    /** 关闭弹窗 */
     closeDialog() {
       this.$set(this.dialogConfig, "dialogVisible", false);
     },
-    setCommonAttr(node) {
-      this.$set(this.dialogConfig, "dialogVisible", true);
-      this.$set(this.dialogConfig, "title", node.title);
-      this.$set(this.dialogConfig, "type", node.type);
-    },
+    /** 节点点击 */
     nodeClick(node) {
-      console.log(node);
+      this.$set(this.dialogConfig, "title", node.title);
       switch (node.type) {
+        // 订舱
         case "booking":
-          this.$set(this.dialogConfig, "width", "40%");
-          this.setCommonAttr(node);
+          this.$set(this.dialogConfig, "width", "700px");
+          this.$set(this.dialogConfig, "fullscreen", false);
           break;
+        // 拖车
         case "trailer":
+        // AGENT
         case "agent":
-          this.$set(this.dialogConfig, "width", "25%");
-          this.setCommonAttr(node);
+        // 装柜
+        case "cabinet":
+          this.$set(this.dialogConfig, "width", "500px");
+          this.$set(this.dialogConfig, "fullscreen", false);
           break;
+        // 预装
         case "preinstall":
-          this.$router.push(`/boxSea/shippingSea/preinstall/${this.boxId}`);
+          this.$set(this.dialogConfig, "fullscreen", true);
+          this.$set(this.dialogConfig, "title", "出货安排（预装）");
           break;
       }
+      this.$set(this.dialogConfig, "dialogVisible", true);
+      this.$set(this.dialogConfig, "type", node.type);
     },
   },
 };

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

@@ -5,6 +5,8 @@
         <div style="display: flex; justify-content: space-between;align-items: flex-end;">
           <h2>海运出货操作</h2>
         </div>
+
+        <!-- 信息 -->
         <el-card style="margin-top: 15px">
           <el-descriptions :column="5" border>
             <el-descriptions-item label="自编号"></el-descriptions-item>
@@ -15,6 +17,7 @@
           </el-descriptions>
         </el-card>
 
+        <!-- 海运流程图 -->
         <div class="shipping-flow">
           <shippingChart :boxId="boxId" />
         </div>
@@ -25,7 +28,9 @@
 
 <script>
 import shippingChart from "./shippingChart";
-
+/**
+ * 海运操作主页面
+ */
 export default {
   name: "shippingSea",
   components: {
@@ -40,7 +45,10 @@ export default {
 <style lang="scss">
 .shipping-flow {
   margin-top: 5px;
-  // 页面内元素弹框form控件宽度设置
+}
+// 海运操作统一弹窗样式
+.shipping-dialog {
+  // 页面内元素弹窗form控件宽度设置
   .el-form-item__content {
     > div {
       width: 100%;

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

@@ -38,10 +38,14 @@
 </template>
 
 <script>
+/**
+ * 拖车
+ */
 export default {
   name: "trailer",
   data() {
     return {
+      // 状态
       status: [
         {
           value: "1",
@@ -56,13 +60,16 @@ export default {
           label: "已还柜",
         },
       ],
+      // 拖车对象
       trailer: {},
+      // 校验
       rules: {
-        time: [{ required: true, message: "请选择时间", trigger: "change" }],
+        time: [{ required: true, message: "必填", trigger: "change" }],
       },
     };
   },
   methods: {
+    /** 提交 */
     onSubmit() {
       this.$refs["trailerForm"].validate((valid) => {
         if (valid) {
@@ -70,6 +77,7 @@ export default {
         }
       });
     },
+    /** 取消 */
     cancel() {
       this.$emit("closeDialog");
     },