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

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

klp-ui/src/components/KLPService/Renderer/CoilNo.vue

@@ -1,22 +1,104 @@
 <template>
   <div :class="{'g-coil-no': isGCoilNo}">
-    <el-tag type="info" size="small">{{ coilNo }}</el-tag>
+    <!-- 有coilId时显示popover，无则只显示标签 -->
+    <el-popover
+      v-if="coilId"
+      placement="left"
+      width="200"
+      trigger="hover"
+    >
+      <div class="coil-info">
+        <div class="info-item">
+          <span class="label">物料名称：</span>
+          <span class="value">{{ itemName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">材质：</span>
+          <span class="value">{{ material }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">生产厂家：</span>
+          <span class="value">{{ manufacturer }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">规格：</span>
+          <span class="value">
+            {{ specification }}
+          </span>
+        </div>
+      </div>
+      
+      <el-tag type="info" size="small" slot="reference">{{ coilNo }}</el-tag>
+    </el-popover>
+
+    <!-- 无coilId时仅显示标签 -->
+    <el-tag v-else type="info" size="small">{{ coilNo }}</el-tag>
   </div>
 </template>
 
 <script>
+import { getMaterialCoil } from '@/api/wms/coil'
+
 export default {
   props: {
     coilNo: {
       type: String,
       default: ''
+    },
+    coilId: {
+      type: String,
+      default: ''
+    },
+  },
+  data() { // 修正：data应该是函数
+    return {
+      coilInfo: {}
     }
   },
   computed: {
     isGCoilNo() {
-      return this.coilNo.startsWith('G');
+      return this.coilNo && this.coilNo.startsWith('G');
+    },
+    specification() {
+      return this.coilInfo.product?.specification || this.coilInfo.rawMaterial?.specification || '-'
+    },
+    itemName() {
+      return this.coilInfo.product?.productName || this.coilInfo.rawMaterial?.rawMaterialName || '-'
+    },
+    material() {
+      return this.coilInfo.product?.material || this.coilInfo.rawMaterial?.material || '-'
+    },
+    manufacturer() {
+      return this.coilInfo.product?.manufacturer || this.coilInfo.rawMaterial?.manufacturer || '-'
+    },
+  },
+  methods: {
+    getCoilInfo() {
+      if (!this.coilId) {
+        return;
+      }
+      getMaterialCoil(this.coilId).then(res => {
+        this.coilInfo = res.data || {};
+      }).catch(err => {
+        console.error('获取钢卷信息失败：', err);
+        this.coilInfo = {};
+      })
     }
   },
+  mounted() {
+    // 组件挂载时获取线圈信息
+    this.getCoilInfo();
+  },
+  watch: {
+    // 监听coilId变化，重新获取信息
+    coilId(newVal) {
+      if (newVal) {
+        this.getCoilInfo();
+      } else {
+        this.coilInfo = {};
+      }
+    }
+  }
 }
 </script>
 
@@ -26,5 +108,33 @@ export default {
   display: inline-block; /* 让容器尺寸贴合内部el-tag */
   border: 2px solid #67c23a !important;
   border-radius: 4px; /* 可选：和el-tag圆角保持一致，更美观 */
+  padding: 1px; /* 调整内边距，避免边框和标签重叠 */
+}
+
+/* 弹窗信息样式 */
+.coil-info {
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.coil-info .info-item {
+  display: flex;
+  margin-bottom: 4px;
+}
+
+.coil-info .info-item:last-child {
+  margin-bottom: 0;
+}
+
+.coil-info .label {
+  color: #666;
+  width: 70px;
+  flex-shrink: 0;
+}
+
+.coil-info .value {
+  color: #333;
+  flex: 1;
+  word-break: break-all;
 }
 </style>