feat(crm/objection): 添加钢卷关联管理功能

1.  为销售异议列表、新增/编辑弹窗、详情页添加钢卷信息展示列
2.  新增钢卷选择组件，支持按订单筛选可发货钢卷
3.  实现钢卷的选择、移除、跳转详情功能
4.  改造提交接口，传递钢卷ID列表
5.  重构原有组件逻辑，优化表单处理流程

klp-ui/src/views/crm/components/OrderObjection.vue

@@ -42,6 +42,16 @@
           <el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="钢卷信息" align="center" prop="coilList" width="200" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div v-if="scope.row.coilList && scope.row.coilList.length > 0">
+            <div v-for="(coil, index) in scope.row.coilList" :key="coil.coilId || index" style="margin-bottom: 4px;">
+              <CurrentCoilNo @click.native="handleClickCoil(coil)" :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
+            </div>
+          </div>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <el-table-column label="处理结果" align="center" prop="handleContent" show-overflow-tooltip>
         <template slot-scope="scope">
           <div class="cell-html" v-html="scope.row.handleContent"></div>
@@ -53,11 +63,6 @@
           <span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="结案时间" align="center" prop="closeTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.closeTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column> -->
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -66,12 +71,6 @@
             v-if="scope.row.objectionStatus == 0"></el-button>
           <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
             v-if="scope.row.objectionStatus == 1"></el-button>
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-check"
-            @click="handleFinish(scope.row)"
-          >结案</el-button> -->
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
         </template>
       </el-table-column>
@@ -113,28 +112,28 @@
             placeholder="请输入客户诉求"
           ></el-input>
         </el-form-item>
-        <!-- <el-form-item label="处理内容">
+        <el-form-item label="关联钢卷">
-          <editor v-model="form.handleContent" :min-height="192"/>
+          <div style="width: 100%;">
+            <CoilSelector
+              :multiple="true"
+              :rangeMode="true"
+              :rangeData="shippedCoils"
+              :orderBy="true"
+              @confirm="(coils) => handleCoilConfirm('form', coils)"
+              placeholder="选择钢卷">
+              <el-button type="primary" size="small">
+                <i class="el-icon-search"></i> 选择钢卷
+              </el-button>
+            </CoilSelector>
+            <div v-if="formCoilList.length > 0" style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px;">
+              <div v-for="(coil, index) in formCoilList" :key="coil.coilId || index" style="display: flex; align-items: center; gap: 4px;">
+                <CurrentCoilNo :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
+                <el-button type="text" icon="el-icon-close" size="mini" @click="removeCoil('form', index)"></el-button>
+              </div>
+            </div>
+            <span v-else style="color: #909399; font-size: 12px;">暂未选择钢卷</span>
+          </div>
         </el-form-item>
-        <el-form-item label="处理人" prop="handleUser">
-          <el-input v-model="form.handleUser" placeholder="请输入处理人" />
-        </el-form-item>
-        <el-form-item label="处理时间" prop="handleTime">
-          <el-date-picker clearable
-            v-model="form.handleTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择处理时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="结案时间" prop="closeTime">
-          <el-date-picker clearable
-            v-model="form.closeTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择结案时间">
-          </el-date-picker>
-        </el-form-item> -->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -150,17 +149,6 @@
         <el-form-item label="处理内容">
           <editor v-model="checkForm.handleContent" :min-height="192" />
         </el-form-item>
-        <!-- <el-form-item label="处理人" prop="handleUser">
-          <el-input v-model="form.handleUser" placeholder="请输入处理人" />
-        </el-form-item>
-        <el-form-item label="处理时间" prop="handleTime">
-          <el-date-picker clearable
-            v-model="form.handleTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择处理时间">
-          </el-date-picker>
-        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button :loading="buttonLoading" type="primary" @click="submitCheckForm">确 定</el-button>
@@ -180,6 +168,14 @@
         <el-descriptions-item label="处理内容" :span="2">
           <div v-html="viewForm.handleContent"></div>
         </el-descriptions-item>
+        <el-descriptions-item label="关联钢卷" :span="2">
+          <div v-if="viewForm.coilList && viewForm.coilList.length > 0" style="display: flex; flex-wrap: wrap; gap: 8px;">
+            <div v-for="(coil, index) in viewForm.coilList" :key="coil.coilId || index">
+              <CurrentCoilNo @click.native="handleClickCoil(coil)" :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
+            </div>
+          </div>
+          <span v-else>-</span>
+        </el-descriptions-item>
       </el-descriptions>
       <div slot="footer" class="dialog-footer">
         <el-button @click="viewOpen = false">关 闭</el-button>
@@ -190,9 +186,16 @@
 
 <script>
 import { listSalesObjection, getSalesObjection, delSalesObjection, addSalesObjection, updateSalesObjection } from "@/api/crm/salesObjection";
+import { listOrderPackaging } from "@/api/crm/order";
+import CoilSelector from "@/components/CoilSelector/index.vue";
+import CurrentCoilNo from "@/components/KLPService/Renderer/CurrentCoilNo.vue";
 
 export default {
   name: "SalesObjection",
+  components: {
+    CoilSelector,
+    CurrentCoilNo
+  },
   props: {
     order: {
       type: Object,
@@ -273,6 +276,11 @@ export default {
       checkOpen: false,
       viewForm: {},
       viewOpen: false,
+      // 钢卷选择相关
+      coilSelectorType: 'form', // form 或 check
+      formCoilList: [], // 表单中的钢卷列表
+      checkCoilList: [], // 处理中的钢卷列表
+      shippedCoils: [], // 订单已发货的钢卷（可选范围）
     };
   },
   methods: {
@@ -290,9 +298,11 @@ export default {
       this.open = false;
       this.reset();
     },
-    handleView(row) {
+    // 点击钢卷
-      this.viewForm = row;
+    handleClickCoil(coil) {
-      this.viewOpen = true;
+       this.$router.push({
+        path: '/wms/coil/' + coil.coilId,
+      });
     },
     // 表单重置
     reset() {
@@ -335,70 +345,6 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    handleDo(row) {
-      console.log(row, '处理')
-      this.checkForm = row;
-      this.checkOpen = true;
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加销售异议管理";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const objectionId = row.objectionId || this.ids
-      getSalesObjection(objectionId).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改销售异议管理";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.objectionId != null) {
-            updateSalesObjection(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addSalesObjection(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
-    },
-    /** 提交处理按钮 */
-    submitCheckForm() {
-      this.buttonLoading = true;
-      updateSalesObjection({
-        ...this.checkForm,
-        handleUser: this.currentUserName,
-        handleTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
-        objectionStatus: 1,
-      }).then(response => {
-        this.$modal.msgSuccess("处理成功");
-        this.checkOpen = false;
-        this.getList();
-      }).finally(() => {
-        this.buttonLoading = false;
-      });
-    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const objectionIds = row.objectionId || this.ids;
@@ -419,6 +365,137 @@ export default {
       this.download('crm/salesObjection/export', {
         ...this.queryParams
       }, `salesObjection_${new Date().getTime()}.xlsx`)
+    },
+
+    // ==================== 钢卷相关方法 ====================
+    // 获取订单已发货的钢卷
+    getShippedCoils() {
+      if (this.orderId) {
+        listOrderPackaging(this.orderId).then(response => {
+          this.shippedCoils = response.data || [];
+        }).catch(() => {
+          this.shippedCoils = [];
+        });
+      } else {
+        this.shippedCoils = [];
+      }
+    },
+
+    // 钢卷选择确认
+    handleCoilConfirm(type, selectedCoils) {
+      if (type === 'form') {
+        this.formCoilList = [...selectedCoils];
+      } else if (type === 'check') {
+        this.checkCoilList = [...selectedCoils];
+      }
+    },
+
+    // 移除选中的钢卷
+    removeCoil(type, index) {
+      if (type === 'form') {
+        this.formCoilList.splice(index, 1);
+      } else if (type === 'check') {
+        this.checkCoilList.splice(index, 1);
+      }
+    },
+
+    // 将钢卷数组转换为CSV字符串
+    coilListToCsv(coilList) {
+      if (!coilList || coilList.length === 0) {
+        return '';
+      }
+      return coilList.map(coil => coil.coilId).join(',');
+    },
+
+    // 从coilIds CSV和coilList中恢复钢卷数据
+    // 重写handleAdd方法
+    handleAdd() {
+      this.reset();
+      this.formCoilList = []; // 清空钢卷列表
+      this.getShippedCoils(); // 获取可选择的钢卷
+      this.open = true;
+      this.title = "添加销售异议管理";
+    },
+
+    // 重写handleUpdate方法
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      this.getShippedCoils(); // 获取可选择的钢卷
+      const objectionId = row.objectionId || this.ids;
+      getSalesObjection(objectionId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        // 恢复钢卷列表
+        this.formCoilList = response.data.coilList || [];
+        this.open = true;
+        this.title = "修改销售异议管理";
+      });
+    },
+
+    // 重写handleDo方法
+    handleDo(row) {
+      console.log(row, '处理');
+      this.checkForm = row;
+      this.checkCoilList = row.coilList || []; // 恢复钢卷列表
+      this.getShippedCoils(); // 获取可选择的钢卷
+      this.checkOpen = true;
+    },
+
+    // 重写handleView方法
+    handleView(row) {
+      this.viewForm = row;
+      this.viewOpen = true;
+    },
+
+    // 重写submitForm方法，添加coilIds
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          // 添加coilIds
+          const formData = {
+            ...this.form,
+            coilIds: this.coilListToCsv(this.formCoilList)
+          };
+          
+          if (this.form.objectionId != null) {
+            updateSalesObjection(formData).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addSalesObjection(formData).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+
+    // 重写submitCheckForm方法，添加coilIds
+    submitCheckForm() {
+      this.buttonLoading = true;
+      updateSalesObjection({
+        ...this.checkForm,
+        handleUser: this.currentUserName,
+        handleTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
+        objectionStatus: 1,
+        coilIds: this.coilListToCsv(this.checkCoilList)
+      }).then(response => {
+        this.$modal.msgSuccess("处理成功");
+        this.checkOpen = false;
+        this.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
     }
   }
 };

klp-ui/src/views/crm/objection/index.vue

@@ -42,6 +42,16 @@
           <el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="钢卷信息" align="center" prop="coilList" width="200" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div v-if="scope.row.coilList && scope.row.coilList.length > 0">
+            <div v-for="(coil, index) in scope.row.coilList" :key="coil.coilId || index" style="margin-bottom: 4px;">
+              <CurrentCoilNo @click.native="handleClickCoil(coil)" :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
+            </div>
+          </div>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <!-- <el-table-column label="处理内容" align="center" prop="handleContent" /> -->
       <el-table-column label="处理人" align="center" prop="handleUser" />
       <el-table-column label="处理时间" align="center" prop="handleTime" width="180">
@@ -110,7 +120,29 @@
           ></el-input>
         </el-form-item>
         <el-form-item label="订单编号">
-          <order-select v-model="form.orderId" placeholder="请选择订单" />
+          <order-select v-model="form.orderId" placeholder="请选择订单" @change="getShippedCoils" />
+        </el-form-item>
+        <el-form-item label="关联钢卷">
+          <div style="width: 100%;">
+            <CoilSelector
+              :multiple="true"
+              :rangeMode="true"
+              :rangeData="shippedCoils"
+              :orderBy="true"
+              @confirm="(coils) => handleCoilConfirm('form', coils)"
+              placeholder="选择钢卷">
+              <el-button type="primary" size="small">
+                <i class="el-icon-search"></i> 选择钢卷
+              </el-button>
+            </CoilSelector>
+            <div v-if="formCoilList.length > 0" style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px;">
+              <div v-for="(coil, index) in formCoilList" :key="coil.coilId || index" style="display: flex; align-items: center; gap: 4px;">
+                <CurrentCoilNo :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
+                <el-button type="text" icon="el-icon-close" size="mini" @click="removeCoil('form', index)"></el-button>
+              </div>
+            </div>
+            <span v-else style="color: #909399; font-size: 12px;">暂未选择钢卷</span>
+          </div>
         </el-form-item>
         <!-- <el-form-item label="处理内容">
           <editor v-model="form.handleContent" :min-height="192"/>
@@ -163,6 +195,14 @@
         <el-descriptions-item label="反馈日期">{{ parseTime(viewForm.returnDate, '{y}-{m}-{d}') }}</el-descriptions-item>
         <el-descriptions-item label="投诉情况" :span="2">{{ viewForm.complaintContent }}</el-descriptions-item>
         <el-descriptions-item label="客户诉求" :span="2">{{ viewForm.customerDemand }}</el-descriptions-item>
+        <el-descriptions-item label="关联钢卷" :span="2">
+          <div v-if="viewForm.coilList && viewForm.coilList.length > 0" style="display: flex; flex-wrap: wrap; gap: 8px;">
+            <div v-for="(coil, index) in viewForm.coilList" :key="coil.coilId || index">
+              <CurrentCoilNo @click.native="handleClickCoil(coil)" :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
+            </div>
+          </div>
+          <span v-else>-</span>
+        </el-descriptions-item>
         <el-descriptions-item label="处理人">{{ viewForm.handleUser }}</el-descriptions-item>
         <el-descriptions-item label="处理时间">{{ parseTime(viewForm.handleTime, '{y}-{m}-{d}') }}</el-descriptions-item>
         <el-descriptions-item label="处理内容" :span="2">
@@ -178,14 +218,19 @@
 
 <script>
 import { listSalesObjection, getSalesObjection, delSalesObjection, addSalesObjection, updateSalesObjection } from "@/api/crm/salesObjection";
+import { listOrderPackaging } from "@/api/crm/order";
 import OrderSelect from "@/components/KLPService/OrderSelect";
 import CustomerSelect from "@/components/KLPService/CustomerSelect";
+import CoilSelector from "@/components/CoilSelector/index.vue";
+import CurrentCoilNo from "@/components/KLPService/Renderer/CurrentCoilNo.vue";
 
 export default {
   name: "SalesObjection",
   components: {
     OrderSelect,
     CustomerSelect,
+    CoilSelector,
+    CurrentCoilNo
   },
   computed: {
     currentUserName() {
@@ -245,6 +290,11 @@ export default {
       checkOpen: false,
       viewForm: {},
       viewOpen: false,
+      // 钢卷选择相关
+      coilSelectorType: 'form', // form 或 check
+      formCoilList: [], // 表单中的钢卷列表
+      checkCoilList: [], // 处理中的钢卷列表
+      shippedCoils: [], // 订单已发货的钢卷（可选范围）
     };
   },
   methods: {
@@ -271,7 +321,7 @@ export default {
       this.form = {
         objectionId: undefined,
         objectionCode: undefined,
-        orderId: this.orderId,
+        orderId: undefined,
         productCategory: undefined,
         returnDate: undefined,
         complaintContent: undefined,
@@ -310,11 +360,13 @@ export default {
     handleDo(row) {
       console.log(row, '处理')
       this.checkForm = row;
+      this.checkCoilList = row.coilList || []; // 恢复钢卷列表
       this.checkOpen = true;
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.formCoilList = []; // 清空钢卷列表
       this.open = true;
       this.title = "添加销售异议管理";
     },
@@ -326,6 +378,12 @@ export default {
       getSalesObjection(objectionId).then(response => {
         this.loading = false;
         this.form = response.data;
+        // 恢复钢卷列表
+        this.formCoilList = response.data.coilList || [];
+        // 获取可选择的钢卷
+        if (this.form.orderId) {
+          this.getShippedCoils();
+        }
         this.open = true;
         this.title = "修改销售异议管理";
       });
@@ -335,8 +393,14 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
+          // 添加coilIds
+          const formData = {
+            ...this.form,
+            coilIds: this.coilListToCsv(this.formCoilList)
+          };
+          
           if (this.form.objectionId != null) {
-            updateSalesObjection(this.form).then(response => {
+            updateSalesObjection(formData).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
@@ -344,7 +408,7 @@ export default {
               this.buttonLoading = false;
             });
           } else {
-            addSalesObjection(this.form).then(response => {
+            addSalesObjection(formData).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -363,6 +427,7 @@ export default {
         handleUser: this.currentUserName,
         handleTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
         objectionStatus: 1,
+        coilIds: this.coilListToCsv(this.checkCoilList)
       }).then(response => {
         this.$modal.msgSuccess("处理成功");
         this.checkOpen = false;
@@ -391,6 +456,53 @@ export default {
       this.download('crm/salesObjection/export', {
         ...this.queryParams
       }, `salesObjection_${new Date().getTime()}.xlsx`)
+    },
+
+    // ==================== 钢卷相关方法 ====================
+    // 点击钢卷
+    handleClickCoil(coil) {
+       this.$router.push({
+        path: '/wms/coil/' + coil.coilId,
+      });
+    },
+    
+    // 获取订单已发货的钢卷
+    getShippedCoils() {
+      if (this.form.orderId) {
+        listOrderPackaging(this.form.orderId).then(response => {
+          this.shippedCoils = response.data || [];
+        }).catch(() => {
+          this.shippedCoils = [];
+        });
+      } else {
+        this.shippedCoils = [];
+      }
+    },
+
+    // 钢卷选择确认
+    handleCoilConfirm(type, selectedCoils) {
+      if (type === 'form') {
+        this.formCoilList = [...selectedCoils];
+      } else if (type === 'check') {
+        this.checkCoilList = [...selectedCoils];
+      }
+    },
+
+    // 移除选中的钢卷
+    removeCoil(type, index) {
+      if (type === 'form') {
+        this.formCoilList.splice(index, 1);
+      } else if (type === 'check') {
+        this.checkCoilList.splice(index, 1);
+      }
+    },
+
+    // 将钢卷数组转换为CSV字符串
+    coilListToCsv(coilList) {
+      if (!coilList || coilList.length === 0) {
+        return '';
+      }
+      return coilList.map(coil => coil.coilId).join(',');
     }
   }
 };