feat(发货单明细): 重构钢卷选择组件并优化表单自动填充

- 将钢卷选择器重构为独立组件，支持触发器模式和外部控制模式
- 添加自动填充表单功能，选中钢卷后自动填充相关字段
- 优化表单布局，移除冗余字段和校验规则
- 增强钢卷选择器的交互和样式，支持显示选中钢卷信息

klp-ui/src/views/wms/delivery/componnets/detailTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading" >
+  <div v-loading="loading">
     <div v-if="waybillId">
       <el-row :gutter="10" class="mb8">
         <el-col :span="2" style="font-weight: 900;">发货单明细</el-col>
@@ -46,19 +46,25 @@
 
     <!-- 添加或修改发货单明细对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="关联发货单主表ID" prop="waybillId">
-          <el-input v-model="form.waybillId" placeholder="请输入关联发货单主表ID" />
-        </el-form-item>
-        <el-form-item label="关联钢卷表ID" prop="coilId">
-          <el-input v-model="form.coilId" placeholder="请输入关联钢卷表ID" />
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="发货钢卷" prop="coilId">
+          <div style="display: flex; gap: 10px;">
+            <coil-selector v-model="form.coilId" :use-trigger="true" @select="handleSelect" />
+            <el-checkbox v-model="autoFillForm" label="自动填写表单信息" />
+          </div>
         </el-form-item>
         <el-form-item label="品名" prop="productName">
           <el-input v-model="form.productName" placeholder="请输入品名" />
         </el-form-item>
+        <el-form-item label="切边" prop="edgeType">
+          <el-input v-model="form.edgeType" placeholder="请输入切边" />
+        </el-form-item>
         <el-form-item label="包装" prop="packaging">
           <el-input v-model="form.packaging" placeholder="请输入包装" />
         </el-form-item>
+        <el-form-item label="结算方式" prop="settlementType">
+          <el-input v-model="form.settlementType" placeholder="请输入结算方式" />
+        </el-form-item>
         <el-form-item label="原料厂家" prop="rawMaterialFactory">
           <el-input v-model="form.rawMaterialFactory" placeholder="请输入原料厂家" />
         </el-form-item>
@@ -94,6 +100,7 @@
 
 <script>
 import { listDeliveryWaybillDetail, getDeliveryWaybillDetail, delDeliveryWaybillDetail, addDeliveryWaybillDetail, updateDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
+import CoilSelector from "@/components/CoilSelector";
 
 export default {
   name: "DeliveryWaybillDetail",
@@ -103,6 +110,9 @@ export default {
       default: '',
     }
   },
+  components: {
+    CoilSelector
+  },
   watch: {
     waybillId: {
       handler(newVal, oldVal) {
@@ -155,63 +165,8 @@ export default {
       },
       // 表单参数
       form: {},
-      // 表单校验
-      rules: {
-        detailId: [
-          { required: true, message: "明细唯一ID不能为空", trigger: "blur" }
-        ],
-        waybillId: [
-          { required: true, message: "关联发货单主表ID不能为空", trigger: "blur" }
-        ],
-        coilId: [
-          { required: true, message: "关联钢卷表ID不能为空", trigger: "blur" }
-        ],
-        productName: [
-          { required: true, message: "品名不能为空", trigger: "blur" }
-        ],
-        edgeType: [
-          { required: true, message: "切边不能为空", trigger: "change" }
-        ],
-        packaging: [
-          { required: true, message: "包装不能为空", trigger: "blur" }
-        ],
-        settlementType: [
-          { required: true, message: "结算方式不能为空", trigger: "change" }
-        ],
-        rawMaterialFactory: [
-          { required: true, message: "原料厂家不能为空", trigger: "blur" }
-        ],
-        coilNo: [
-          { required: true, message: "卷号不能为空", trigger: "blur" }
-        ],
-        specification: [
-          { required: true, message: "规格不能为空", trigger: "blur" }
-        ],
-        material: [
-          { required: true, message: "材质不能为空", trigger: "blur" }
-        ],
-        quantity: [
-          { required: true, message: "数量不能为空", trigger: "blur" }
-        ],
-        weight: [
-          { required: true, message: "重量不能为空", trigger: "blur" }
-        ],
-        unitPrice: [
-          { required: true, message: "单价不能为空", trigger: "blur" }
-        ],
-        remark: [
-          { required: true, message: "备注不能为空", trigger: "blur" }
-        ],
-        delFlag: [
-          { required: true, message: "删除标志不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
-        ],
-        updateTime: [
-          { required: true, message: "更新时间不能为空", trigger: "blur" }
-        ],
-      }
+      // 自动填写表单信息
+      autoFillForm: true,
     };
   },
   created() {
@@ -232,6 +187,25 @@ export default {
       this.open = false;
       this.reset();
     },
+    handleSelect(coil) {
+      // 填充钢卷信息到表单中，
+      console.log(coil);
+      if (!this.autoFillForm) {
+        return;
+      }
+      this.form = {
+        ...this.form,
+        productName: coil.itemName,
+        edgeType: coil.surfaceTreatmentDesc,
+        packaging: coil.packagingId,
+        rawMaterialFactory: coil.manufacturer,
+        coilNo: coil.currentCoilNo,
+        specification: coil.specification,
+        material: coil.material,
+        quantity: 1,
+        weight: coil.netWeight,
+      }
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -250,11 +224,6 @@ export default {
         weight: undefined,
         unitPrice: undefined,
         remark: undefined,
-        delFlag: undefined,
-        createTime: undefined,
-        createBy: undefined,
-        updateTime: undefined,
-        updateBy: undefined
       };
       this.resetForm("form");
     },