feat(组件): 新增多选组件并优化钢卷选择器

新增MutiSelect多选组件，支持逗号分隔字符串绑定
优化CoilSelector组件，使用MutiSelect替换输入框并新增规格字段
移除多处钢种字段显示及输入
增强CoilNo组件，支持悬停显示钢卷详细信息
在收货详情页添加删除按钮功能

klp-ui/src/views/wms/receive/detail/index.vue

@@ -43,9 +43,9 @@
           </el-form>
 
           <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row>
-            <el-table-column label="钢卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true">
+            <el-table-column label="钢卷号" align="center" prop="currentCoilNo">
               <template slot-scope="scope">
-                <CoilNo :coil-no="scope.row.currentCoilNo" />
+                <CoilNo :coil-no="scope.row.currentCoilNo" :coil-id="scope.row.coilId" />
                 <!-- <el-tag type="info" size="small">{{ scope.row.currentCoilNo }}</el-tag> -->
               </template>
             </el-table-column>
@@ -86,16 +86,10 @@
               <template slot-scope="scope">
                 <el-button v-if="scope.row.actionStatus == 0 || scope.row.actionStatus == 1" type="primary"
                   @click="openReceiptModal(scope.row)">签收</el-button>
+                  <el-button v-if="scope.row.actionStatus == 0 || scope.row.actionStatus == 1" type="danger"
+                  @click="handleDelete(scope.row)">删除</el-button>
               </template>
             </el-table-column>
-            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-              <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-edit"
-                  @click.stop="handleUpdate(scope.row)">修改</el-button>
-                <el-button size="mini" type="text" icon="el-icon-delete"
-                  @click.stop="handleDelete(scope.row)">删除</el-button>
-              </template>
-            </el-table-column> -->
           </el-table>
 
           <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
@@ -143,7 +137,7 @@
 
 <script>
 import { updateMaterialCoilSimple, getMaterialCoil } from '@/api/wms/coil'
-import { listPendingAction, updatePendingAction } from '@/api/wms/pendingAction'
+import { listPendingAction, updatePendingAction, delPendingAction } from '@/api/wms/pendingAction'
 import { listDeliveryPlan } from '@/api/wms/deliveryPlan'
 import MemoInput from "@/components/MemoInput";
 import ImportGuide from "@/views/wms/receive/components/ImportGuide.vue";
@@ -320,6 +314,20 @@ export default {
         // 转换为树形数据格式
         this.planTreeData = response.rows;
         this.planLoading = false;
+        // 后台加载每一条钢卷的明细
+      });
+    },
+
+    handleDelete(row) {
+      this.$modal.confirm("确认删除吗？", "删除确认", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        delPendingAction(row.actionId).then(response => {
+          this.$modal.msgSuccess("删除成功");
+          this.getList();
+        });
       });
     },
 
@@ -385,21 +393,6 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const waybillIds = row.waybillId || this.ids;
-      this.$modal.confirm('是否确认删除收货单编号为"' + waybillIds + '"的数据项？').then(() => {
-        this.loading = true;
-        return delDeliveryWaybill(waybillIds);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
     /** 导出按钮操作 */
     handleExport() {
       this.download('wms/deliveryWaybill/export', {