1

src/views/production/shipment/print-order/unpack.vue

@@ -91,16 +91,40 @@
               <el-row :gutter="4" class="row-bottom">
                 <el-col :span="5">{{ `${item.length}*${item.width}*${item.height}` }}</el-col>
                 <el-col :span="4">{{ item.netWeight / 1000 }}</el-col>
-                <el-col :span="4">单包裹体积（m³）</el-col>
+                <el-col :span="4">{{ (item.length * item.width * item.height) / 1000000 }}</el-col>
                 <el-col :span="2">{{ item.total }}</el-col>
-                <el-col :span="3">总净重（kg）</el-col>
-                <el-col :span="3">总体积（m³）</el-col>
+                <el-col :span="3">{{ (item.netWeight / 1000) * item.total }}</el-col>
+                <el-col :span="3">{{ ((item.length * item.width * item.height) / 1000000) * item.total }}</el-col>
                 <el-col :span="3">
-                  <el-button type="primary" @click="copyBox(item.id)" text>复制包裹</el-button>
-                  <el-button type="danger" @click="handleDel(item.id)" text>删除</el-button>
+                  <el-button type="primary" @click="copyPack(item)" text>复制包裹</el-button>
+                  <el-button type="danger" @click="deletePack(item)" text>删除</el-button>
                 </el-col>
               </el-row>
             </div>
+            <div style="background-color: white; border: 1px solid #ebeef5">
+              <el-table
+                border
+                :data="item.orderEncasementDetailList"
+                :row-style="{ height: '35px' }"
+                :cell-style="{ padding: '0' }"
+                header-row-class-name="tableHeaderTwo"
+                :span-method="arraySpanMethod">
+                <el-table-column label="产品品号" prop="skuSpecCode" width="150" />
+                <el-table-column label="产品品名" prop="skuSpecName" />
+                <el-table-column label="打包数量" align="center" width="120">
+                  <template #default="{ row }">
+                    <div>
+                      {{ row.quantity ? row.quantity : 0 }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column label="总包裹数" align="center" width="120">
+                  <template #default="{ row }">
+                    <div>x {{ item.total }}</div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
           </div>
         </div>
       </el-card>
@@ -135,6 +159,22 @@ const getDetails = () => {
   loading.value = true;
   proxy.post("/issueBill/assemblyDetail", { id: route.query.id }).then(
     (res) => {
+      if (res.orderEncasementList && res.orderEncasementList.length > 0) {
+        res.orderEncasementList = res.orderEncasementList.map((item) => {
+          if (item.orderEncasementDetailList && item.orderEncasementDetailList.length > 0) {
+            item.orderEncasementDetailList = item.orderEncasementDetailList.map((itemTwo, index) => {
+              return {
+                ...itemTwo,
+                rowspan: item.orderEncasementDetailList.length,
+                rowIndex: index,
+              };
+            });
+          }
+          return {
+            ...item,
+          };
+        });
+      }
       formData.data = res;
       loading.value = false;
     },
@@ -174,6 +214,27 @@ const submitPack = () => {
     }
   });
 };
+const arraySpanMethod = ({ row, columnIndex }) => {
+  if (columnIndex === 3) {
+    if (row.rowIndex === 0) {
+      return {
+        rowspan: row.rowspan,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+const copyPack = (item) => {
+  console.log(item);
+};
+const deletePack = (item) => {
+  console.log(item);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -185,14 +246,18 @@ const submitPack = () => {
   height: 32px;
   line-height: 32px;
 }
-.row-bottom {
-  margin-top: 10px;
-  .el-col {
-    text-align: center;
-    color: red;
-    font-weight: 700;
-    height: 32px;
-    line-height: 32px;
+.row-bottom .el-col {
+  text-align: center;
+  color: red;
+  font-weight: 700;
+  height: 32px;
+  line-height: 32px;
+}
+::v-deep(.tableHeaderTwo) {
+  th {
+    background-color: white !important;
+    height: 35px;
+    padding: 0;
   }
 }
 </style>