解绑和绑定逻辑调整

src/views/logisticsManagement/components/addPackingDialog.vue

@@ -1,6 +1,13 @@
 <template>
   <el-dialog title="新增" append-to-body :modelValue="openShow" width="30%" @close="closeDialog">
-    <el-form :model="form" ref="form" :rules="rules" label-width="auto" @submit.prevent>
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="auto"
+      @submit.prevent
+      v-loading="formLoading"
+    >
       <el-form-item label="箱条码：" prop="boxBarcode">
         <el-input
           v-model="form.boxBarcode"
@@ -8,6 +15,9 @@
           placeholder="请扫描箱条码"
         />
       </el-form-item>
+      <el-form-item label="配送终点：">
+        {{ boxBarInfo.wcName }}-{{ boxBarInfo.stationRegion }}
+      </el-form-item>
       <el-form-item label="流程卡号：" prop="orderNo">
         <el-input
           v-model="form.orderNo"
@@ -19,7 +29,6 @@
         <el-tag
           :key="tag"
           v-for="tag in orderIdList"
-          closable
           :disable-transitions="false"
           @close="handleClose(tag)"
         >
@@ -39,16 +48,21 @@
       </el-table-column>
     </el-table> -->
 
-    <template #footer>
+    <!-- <template #footer>
       <span class="dialog-footer">
         <el-button @click="closeDialog">取 消</el-button>
         <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
       </span>
-    </template>
+    </template> -->
   </el-dialog>
 </template>
 <script>
-import { boxBinding, getOrderInfo, getCardNo } from '@/api/logisticsManagement/materialPacking';
+import {
+  boxBinding,
+  getOrderInfo,
+  getCardNo,
+  getQuantityLocation,
+} from '@/api/logisticsManagement/materialPacking';
 export default {
   props: {
     showDialog: {
@@ -58,6 +72,7 @@ export default {
   },
   data() {
     return {
+      formLoading: false,
       submitLoading: false,
       tableData: [],
       openShow: false,
@@ -67,6 +82,7 @@ export default {
       },
       workCenterOptions: [],
       orderIdList: [],
+      boxBarInfo: {},
     };
   },
   mounted() {
@@ -75,8 +91,15 @@ export default {
   methods: {
     // 扫描箱条码
     changeCode() {
-      console.log('箱条码:', this.form.boxBarcode);
+      getQuantityLocation({ boxBarcode: this.form.boxBarcode }).then(res => {
-      // 可在此处添加箱条码查询逻辑
+        this.formLoading = true;
+        this.boxBarInfo = res.data.data;
+        this.orderIdList = res.data.data.yieldOrderList.map(item => item.cardNo);
+        setTimeout(() => {
+          this.$message.success('箱条码获取数据成功！');
+          this.formLoading = false;
+        }, 500);
+      });
     },
     // 扫描订单号 - 添加到流程卡号列表
     changeOrderCode() {
@@ -97,6 +120,22 @@ export default {
           }
           // 调用 API 获取订单信息（如果需要验证）
           this.orderIdList.push(orderNo);
+          // 调用绑定接口数据
+          let params = {
+            boxBarcode: this.form.boxBarcode,
+            orderIdList: [this.form.orderNo],
+          };
+          boxBinding(params)
+            .then(res => {
+              this.$message.success('绑定成功');
+              this.submitLoading = false;
+              // this.closeDialog();
+              this.changeCode();
+            })
+            .catch(err => {
+              this.submitLoading = false;
+              this.orderIdList.pop(orderNo);
+            });
           this.form.orderNo = '';
         })
         .catch(err => {

src/views/logisticsManagement/components/unbindDialog.vue

@@ -1,32 +1,56 @@
 <template>
-  <el-dialog
+  <el-dialog title="解绑" append-to-body :modelValue="openShow" width="30%" @close="closeDialog">
-    title="解绑"
-    append-to-body
-    :modelValue="openShow"
-    width="30%"
-    @close="closeDialog"
-  >
     <el-form :model="form" ref="form" :rules="rules" label-width="auto" @submit.prevent>
-      <el-form-item label="箱条码：" prop="boxBarcode">
+      <el-form-item label="箱条码：" prop="boxBarcode" style="width: 100%">
+        <div style="display: flex; gap: 10px">
           <el-input
             v-model="form.boxBarcode"
             @keyup.enter.prevent="changeCode"
             placeholder="请扫描箱条码"
+            style="flex: 1"
           />
+          <el-button type="primary" @click="quickUnbind" :loading="submitLoading">
+            一键解绑
+          </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="配送终点：">
+        {{ boxBarInfo.wcName }}-{{ boxBarInfo.stationRegion }}
+      </el-form-item>
+      <el-form-item label="流程卡号：" prop="orderNo">
+        <el-input
+          v-model="form.orderNo"
+          @keyup.enter.prevent="changeOrderCode"
+          placeholder="请扫描箱条码"
+        />
+      </el-form-item>
+      <el-form-item label="" prop="orderNo">
+        <el-tag
+          :key="tag"
+          v-for="tag in orderIdList"
+          :disable-transitions="false"
+          @close="handleClose(tag)"
+        >
+          {{ tag }}
+        </el-tag>
       </el-form-item>
-      
     </el-form>
 
-    <template #footer>
+    <!-- <template #footer>
       <span class="dialog-footer">
         <el-button @click="closeDialog">取 消</el-button>
         <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
       </span>
-    </template>
+    </template> -->
   </el-dialog>
 </template>
 <script>
-import { boxBinding, getOrderInfo,boxUnbind } from '@/api/logisticsManagement/materialPacking';
+import {
+  boxBinding,
+  getOrderInfo,
+  boxUnbind,
+  getQuantityLocation,
+} from '@/api/logisticsManagement/materialPacking';
 export default {
   props: {
     showDialog: {
@@ -44,7 +68,8 @@ export default {
         boxBarcode: [{ required: true, message: '请扫描箱条码', trigger: 'blur' }],
       },
       workCenterOptions: [],
-      orderIdList:[]
+      orderIdList: [],
+      boxBarInfo: {}, //箱条码
     };
   },
   mounted() {
@@ -55,6 +80,15 @@ export default {
     changeCode() {
       console.log('箱条码:', this.form.boxBarcode);
       // 可在此处添加箱条码查询逻辑
+      getQuantityLocation({ boxBarcode: this.form.boxBarcode }).then(res => {
+        this.formLoading = true;
+        this.boxBarInfo = res.data.data;
+        this.orderIdList = res.data.data.yieldOrderList.map(item => item.cardNo);
+        setTimeout(() => {
+          this.$message.success('箱条码获取数据成功！');
+          this.formLoading = false;
+        }, 500);
+      });
     },
     // 扫描订单号 - 添加到流程卡号列表
     changeOrderCode() {
@@ -64,17 +98,26 @@ export default {
         return;
       }
 
-      // 检查是否已存在
+      // // 检查是否已存在
-      const exists = this.orderIdList.includes(orderNo);
+      // const exists = this.orderIdList.includes(orderNo);
-      if (exists) {
+      // if (exists) {
-        this.$message.warning('该订单号已添加');
+      //   this.$message.warning('该订单号已添加');
-        this.form.orderNo = '';
+      //   this.form.orderNo = '';
-        return;
+      //   return;
-      }
+      // }
 
       // 调用 API 获取订单信息（如果需要验证）
-       this.orderIdList.push(orderNo);
+      // this.orderIdList.push(orderNo);
+      boxUnbind({ orderIdList: [this.form.orderNo] })
+        .then(res => {
           this.form.orderNo = '';
+          this.$message.success('解绑成功');
+          this.changeCode()
+        })
+        .catach(err => {
+          this.orderIdList.pop(orderNo);
+          this.form.orderNo = '';
+        });
     },
     // 删除流程卡号标签
     handleClose(tag) {
@@ -89,6 +132,34 @@ export default {
       this.orderIdList = [];
       this.$emit('closeDialog');
     },
+    // 一键解绑
+    async quickUnbind() {
+      // 验证箱条码
+      if (!this.form.boxBarcode?.trim()) {
+        this.$message.warning('请先扫描箱条码');
+        return;
+      }
+
+      this.submitLoading = true;
+      try {
+        // 先获取箱条码信息
+        const res = await getQuantityLocation({ boxBarcode: this.form.boxBarcode });
+        this.boxBarInfo = res.data.data;
+
+        // 执行解绑
+        const params = {
+          boxBarcode: this.form.boxBarcode,
+        };
+
+        await boxUnbind(params);
+        this.$message.success('解绑成功');
+        this.closeDialog();
+      } catch (err) {
+        this.$message.error(err.message || '解绑失败');
+      } finally {
+        this.submitLoading = false;
+      }
+    },
     submit() {
       this.$refs.form.validate(async valid => {
         if (valid) {
@@ -118,4 +189,8 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  width: 100%;
+}
+</style>