装柜功能开发

src/api/ecw/boxSea.js

@@ -426,6 +426,25 @@ export function createGoods(data) {
 
 /*****************************  预装 end **********************************/
 
+/*****************************  装柜 start **********************************/
+
+/**
+ * 获得装柜部分列表
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function loadSecGoodsList(params) {
+  return request({
+    url: "/ecw/box-preload-goods/loadSecGoodsList",
+    method: "get",
+    params,
+  });
+}
+
+/*****************************  装柜 end **********************************/
+
 /**
  * 服务提示消息回调
  *

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

@@ -21,8 +21,8 @@
     </el-form>
 
     <!-- 开始装柜 -->
-    <el-dialog title="开始装柜" :visible.sync="dialogVisible" fullscreen :modal-append-to-body=false append-to-body destroy-on-close>
-      <startPacking />
+    <el-dialog title="开始装柜" :visible.sync="dialogVisible" fullscreen :modal-append-to-body=false append-to-body>
+      <startPacking v-bind="$attrs" v-if="dialogVisible" />
     </el-dialog>
 
     <!-- 操作 -->

src/views/ecw/box/shippingSea/nodePage/cabinet/startPacking.vue

@@ -4,25 +4,27 @@
       <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>
+        <el-col :span="4" class="left-area">
+          <el-row v-for="item in listData" :key="item.id" class="title-info" :class="item.id === tableData.id ? 'selected' : ''">
+            <div @click="partClick(item)">
               <p>{{item.title}}</p>
             </div>
             <div>
-              <p>111</p>
-              <p>111</p>
-              <p>111</p>
+              <template v-if="item.secStatistics">
+                <p>{{item.secStatistics.num}}箱</p>
+                <p>{{item.secStatistics.volume}}m³</p>
+                <p>{{item.secStatistics.weight}}Kg</p>
+              </template>
             </div>
           </el-row>
         </el-col>
 
         <!-- 右侧 -->
-        <el-col :span="18" class="right-area">
+        <el-col :span="20" class="right-area">
 
           <!-- 操作 -->
           <el-row class="table-title">
-            <div>当前装柜：第一部分</div>
+            <div>当前装柜：{{tableData.title}}</div>
             <div>
               <el-input v-model="qrCode" placeholder="请输入二维码/条码编号"></el-input>
               <el-button type="primary">确定</el-button>
@@ -33,19 +35,48 @@
           </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">
+          <el-row class="table-content">
+            <el-table v-loading="loading" :data="tableData.sectionOrderList">
+              <el-table-column label="序号" type="index" align="center" width="50" />
+              <el-table-column label="订单号" align="center" prop="orderId">
+                <template slot-scope="scope">
+                  <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{ scope.row.orderId }}</a>
+                </template>
+              </el-table-column>
+              <el-table-column label="货物信息" align="center" prop="goodsList">
+                <template slot-scope="scope">
+                  <section class="table-goodList">
+                    <div v-for="item in scope.row.goodsList" :key="item.orderId" class="goodList-div">
+                      <p>品名：{{item.prodTitleZh}}</p>
+                      <p>
+                        品牌：【
+                        <dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="item.productRecord" />】
+                      </p>
+                      <p>其他：<span>{{item.num}}箱</span><span>{{item.volume}}m³</span><span>{{item.weight}}Kg</span></p>
+                    </div>
+                  </section>
+                </template>
+              </el-table-column>
+              <el-table-column label="计划箱数" align="center" prop="num">
+                <template slot-scope="scope">
+                  {{ scope.row.num }} 箱
+                </template>
+              </el-table-column>
+              <el-table-column label="实装箱数" align="center" prop="installNum">
                 <template slot-scope="scope">
-                  <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{ scope.row.selfNo }}</a>
+                  {{ scope.row.installNum }} 箱
+                </template>
+              </el-table-column>
+              <el-table-column label="体积" align="center" prop="volume">
+                <template slot-scope="scope">
+                  {{ scope.row.volume }} m³
+                </template>
+              </el-table-column>
+              <el-table-column label="重量" align="center" prop="weight">
+                <template slot-scope="scope">
+                  {{ scope.row.weight }} Kg
                 </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>
@@ -61,9 +92,8 @@
     <!-- 统计 -->
     <el-row>
       <el-col :span="6" class="totle-info">
-        <div>
-          <p>总计：</p>
-          <p>111</p>
+        <div class="count-info">
+          <p>总计：<span>{{sumData.count.num}}箱</span><span>{{sumData.count.volume}}m³</span><span>{{sumData.count.weight}}Kg</span></p>
         </div>
         <div>
           <p>容量：</p>
@@ -159,43 +189,32 @@
 
 <script>
 import supplementOrder from "./supplementOrder.vue";
+import { loadSecGoodsList } from "@/api/ecw/boxSea";
 
 /**
  * 开始装柜
  */
 export default {
   name: "startPacking",
+  inheritAttrs: false,
   components: {
     supplementOrder,
   },
+  props: {
+    shipmentObj: Object,
+  },
   data() {
     return {
       // laoding
       loading: false,
-      // 二维码/条码编号
-      qrCode: "",
       // 表格数据
-      listData: [
-        {
-          selfNo: "111aaa",
-          cubNo: "11111111111111111111111111",
-        },
-        {
-          selfNo: "111aaa",
-          cubNo: "11111111111111111111111111",
-        },
-      ],
-      // 左侧数据
-      testData: [
-        {
-          key: 1,
-          title: "第一部分",
-        },
-        {
-          key: 2,
-          title: "第二部分",
-        },
-      ],
+      listData: [],
+      // 表格数据
+      tableData: {},
+      // 统计数据
+      sumData: {
+        count: { num: 0, volume: 0, weight: 0 },
+      },
       // 弹窗配置
       dialogConfig: {
         title: "",
@@ -204,6 +223,8 @@ export default {
         type: "",
         fullscreen: false,
       },
+      // 二维码/条码编号
+      qrCode: "",
       // 批量输入
       batchObj: {},
       // 批量纠错（订单号）
@@ -222,7 +243,25 @@ export default {
       },
     };
   },
+  created() {
+    this.getLoadSecGoodsList();
+  },
   methods: {
+    /* 装柜部分列表 */
+    getLoadSecGoodsList() {
+      loadSecGoodsList({ shipmentId: this.shipmentObj.id }).then((res) => {
+        const { data = [] } = res;
+        this.listData = data.map((item, index) => {
+          return {
+            ...item,
+            title: `第${++index}部分`,
+          };
+        });
+        if (this.listData.length) {
+          this.tableData = this.listData[0];
+        }
+      });
+    },
     /** 点击事件统一入口 */
     handlerClick(type, title) {
       this.shwoDialog({ type, title });
@@ -261,12 +300,41 @@ export default {
         }
       });
     },
+    /* 部分点击 */
+    partClick(item) {
+      console.log(item);
+      this.tableData = item;
+    },
+  },
+  watch: {
+    listData(val) {
+      let count = { num: 0, volume: 0, weight: 0 };
+      if (Array.isArray(val)) {
+        val.forEach((item) => {
+          const { secStatistics } = item;
+          if (secStatistics) {
+            if (!Number.isNaN(Number(secStatistics.num))) {
+              count.num = count.num + Number(secStatistics.num);
+            }
+            if (!Number.isNaN(Number(secStatistics.volume))) {
+              count.volume = count.volume + Number(secStatistics.volume);
+            }
+            if (!Number.isNaN(Number(secStatistics.weight))) {
+              count.weight = count.weight + Number(secStatistics.weight);
+            }
+          }
+        });
+      }
+      this.$set(this.sumData, "count", count);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .startPacking {
+  display: flex;
+  flex-direction: column;
   p {
     margin: 0;
   }
@@ -276,7 +344,15 @@ export default {
       border-right: 3px solid #e6ebf5;
       padding-right: 10px;
       .title-info {
-        height: 100px;
+        height: 80px;
+
+        &.selected {
+          > div:first-child {
+            background-color: #4f9cdd;
+            color: #fff;
+          }
+        }
+
         > div:first-child {
           font-size: 16px;
           background-color: #f2f2f2;
@@ -309,8 +385,27 @@ export default {
           }
         }
       }
-      .order-href {
-        color: #4f9cdd;
+      .table-content {
+        .table-goodList {
+          .goodList-div {
+            border-bottom: 1px solid #e6ebf5;
+            > p {
+              text-align: left;
+            }
+            > p:last-child {
+              > span {
+                margin-right: 5px;
+              }
+            }
+          }
+          > div:last-child {
+            border-bottom: none;
+          }
+        }
+
+        .el-table {
+          color: red;
+        }
       }
     }
   }
@@ -321,6 +416,11 @@ export default {
       display: flex;
       margin-bottom: 5px;
     }
+    .count-info {
+      > p > span {
+        margin-right: 5px;
+      }
+    }
   }
   .button-area {
     text-align: center;