1

src/router/index.js

@@ -230,6 +230,20 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: "/production/shipment/unpack",
+    component: Layout,
+    redirect: "/production/shipment/unpack",
+    children: [
+      {
+        path: "/production/shipment/unpack",
+        name: "unpack",
+        component: () => import(/* webpackChunkName: "page" */ "@/views/production/shipment/print-order/unpack.vue"),
+        props: true,
+        meta: { title: "添加装箱" },
+      },
+    ],
+  },
 ];
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [

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

@@ -513,7 +513,19 @@ const submitPicture = () => {
   );
 };
 const clickUnpack = () => {
-  console.log("拆分包裹");
+  if (selectData.value && selectData.value.length > 0) {
+    if (selectData.value.length > 1) {
+      return ElMessage("每次只能选一个");
+    }
+    proxy.$router.replace({
+      path: "/production/shipment/unpack",
+      query: {
+        id: selectData.value[0].id,
+      },
+    });
+  } else {
+    return ElMessage("请先选择需要拆分包裹的订单");
+  }
 };
 const openMerge = ref(false);
 const formMerge = reactive({

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

@@ -0,0 +1,246 @@
+<template>
+  <el-row :gutter="10">
+    <el-col :span="7">
+      <el-card class="box-card">
+        <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">产品清单</div>
+        <el-table :data="formData.data.skuInfoList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" height="calc(100vh - 315px)">
+          <el-table-column label="产品规格">
+            <template #default="{ row }">
+              <div>{{ row.skuSpecCode }}</div>
+              <div>{{ row.skuSpecName }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="剩余可装箱数" prop="surplusQuantity" align="center" width="110" />
+          <el-table-column label="净重（g）" width="120">
+            <template #default="{ row }">
+              <el-input-number
+                onmousewheel="return false;"
+                v-model="row.quantity"
+                placeholder="净重"
+                style="width: 100%"
+                :controls="false"
+                :min="0"
+                :precision="0"
+                :max="row.surplusQuantity" />
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="font-size: 16px; font-weight: 700; margin: 10px 0">包裹规格信息</div>
+        <el-form :model="formData.data" :rules="rules" label-width="120px" ref="refForm">
+          <el-form-item label="尺寸（cm）" required>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item label="" prop="length">
+                  <el-input-number
+                    onmousewheel="return false;"
+                    v-model="formData.data.length"
+                    placeholder="长"
+                    style="width: 100%"
+                    :controls="false"
+                    :min="0"
+                    :precision="2" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="" prop="width">
+                  <el-input-number
+                    onmousewheel="return false;"
+                    v-model="formData.data.width"
+                    placeholder="宽"
+                    style="width: 100%"
+                    :controls="false"
+                    :min="0"
+                    :precision="2" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="" prop="height">
+                  <el-input-number
+                    onmousewheel="return false;"
+                    v-model="formData.data.height"
+                    placeholder="高"
+                    style="width: 100%"
+                    :controls="false"
+                    :min="0"
+                    :precision="2" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-button type="primary" style="width: 100%" @click="submitPack()" v-preReClick>装包裹</el-button>
+        </el-form>
+      </el-card>
+    </el-col>
+    <el-col :span="17">
+      <el-card class="box-card">
+        <div style="font-size: 16px; font-weight: 700; margin-bottom: 10px">包裹规格数据</div>
+        <div
+          style="max-height: calc(100vh - 190px); overflow-x: hidden; overflow-y: auto"
+          v-if="formData.data.orderEncasementList && formData.data.orderEncasementList.length > 0">
+          <!-- <div class="packing" v-for="(item, index) in formData.data.orderEncasementList" :key="index">
+            <div class="top">
+              <div class="item">
+                <div>单包裹规格格（cm）</div>
+                <div class="red">{{ `${item.length}*${item.width}*${item.height}` }}</div>
+              </div>
+              <div class="item">
+                <div>单包裹净重（kg）</div>
+                <div class="red">{{ item.netWeight }}</div>
+              </div>
+              <div class="item">
+                <div>单包裹体积（m³）</div>
+                <div class="red">{{ item.bulking }}</div>
+              </div>
+              <div class="item">
+                <div>总包裹数</div>
+                <div class="red">{{ item.total }}</div>
+              </div>
+              <div class="item">
+                <div>总净重（kg）</div>
+                <div class="red">{{ item.netWeight }}</div>
+              </div>
+              <div class="item">
+                <div>总体积（m³）</div>
+                <div class="red">{{ item.bulkingTotal }}</div>
+              </div>
+              <div class="item" style="text-align: center">
+                <div>操作</div>
+                <div class="miniBtn">
+                  <el-button type="text" size="mini" @click="copyBox(item.id)">复制包裹</el-button>
+                  <el-button type="text" size="mini" style="color: #f56c6c" @click="handleDel(item.id)">删除</el-button>
+                </div>
+              </div>
+            </div>
+            <div class="mail-1">
+              <el-table
+                border
+                :data="item.expressPackingProductList"
+                size="small"
+                :row-style="{ height: '35px' }"
+                :cell-style="{ padding: '0' }"
+                :span-method="arraySpanMethod">
+                <el-table-column label="产品品号" prop="productColorCode" align="left" width="150" />
+                <el-table-column label="产品品名" prop="productColorName" align="left" />
+                <el-table-column label="打包数量" prop="quantity" align="left" width="90">
+                  <template slot-scope="scope">
+                    <div>
+                      {{ scope.row.quantity ? scope.row.quantity : 0 }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column label="总包裹数" align="center" width="80">
+                  <template>
+                    <div>x {{ item.total }}</div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div> -->
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+const loading = ref(false);
+const formData = reactive({
+  data: {
+    skuInfoList: [],
+    orderEncasementList: [],
+  },
+});
+const rules = ref({
+  length: [{ required: true, message: "请输入长", trigger: "blur" }],
+  width: [{ required: true, message: "请输入宽", trigger: "blur" }],
+  height: [{ required: true, message: "请输入高", trigger: "blur" }],
+});
+onMounted(() => {
+  if (route.query && route.query.id) {
+    getDetails();
+  }
+});
+const getDetails = () => {
+  loading.value = true;
+  proxy.post("/issueBill/assemblyDetail", { id: route.query.id }).then(
+    (res) => {
+      formData.data = res;
+      loading.value = false;
+    },
+    (err) => {
+      console.log(err);
+      loading.value = false;
+    }
+  );
+};
+const sum = (arr) => {
+  return arr.reduce((prev, curr) => prev + curr);
+};
+const submitPack = () => {
+  proxy.$refs.refForm.validate((valid) => {
+    if (valid) {
+      let list = formData.data.skuInfoList.filter((item) => item.quantity > 0);
+      if (!(list && list.length > 0)) {
+        return ElMessage("请至少输入一个装箱数量");
+      }
+      loading.value = true;
+      proxy
+        .post("/issueBill/addAllowance", {
+          orderId: route.query.id,
+          length: formData.data.length,
+          width: formData.data.width,
+          height: formData.data.height,
+          orderEncasementDetailList: list,
+          total: sum(list.map((item) => Number(item.quantity))),
+        })
+        .then(
+          () => {
+            ElMessage({ message: "装箱成功", type: "success" });
+            getDetails();
+          },
+          (err) => {
+            console.log(err);
+            loading.value = false;
+          }
+        );
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+.packing {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  .top {
+    background-color: #edf0f5;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    .item {
+      text-align: center;
+      padding: 0 5px;
+      display: flex;
+      height: 50px;
+      flex-direction: column;
+      justify-content: space-around;
+      .red {
+        color: red;
+        font-weight: 700;
+      }
+    }
+  }
+  .main-1 {
+    padding: 20px 5vw;
+    margin: 0 auto;
+  }
+}
+</style>