feat(异常管理): 重构异常管理界面并新增多选组件

- 新增MutiSelect组件支持下拉多选和复选框两种模式
- 重构异常管理界面，支持直接在表格中编辑异常记录
- 优化钢卷信息展示，增加刷新功能
- 修改AbnormalForm组件，使用MutiSelect替代原有单选组件
- 确保异常记录列表始终显示至少10行，方便快速添加

klp-ui/src/views/wms/coil/components/AbnormalForm.vue

@@ -4,20 +4,18 @@
       <coil-selector v-model="formData.coilId"></coil-selector>
     </el-form-item>
     <el-form-item label="上下板面" prop="plateSurface">
-      <el-radio-group v-model="formData.plateSurface">
-        <el-radio-button key="top" label="上">
-          上板面
-        </el-radio-button>
-        <el-radio-button key="bottom" label="下">
-          下板面
-        </el-radio-button>
-      </el-radio-group>
+      <muti-select v-model="formData.plateSurface" :options="[
+        {label: '上板面', value: '上'},
+        {label: '下板面', value: '下'}]" type="checkbox">
+      </muti-select>
+      <!-- <el-checkbox-group v-model="formData.plateSurface">
+        <el-checkbox key="top" label="上">上板面</el-checkbox>
+        <el-checkbox key="bottom" label="下">下板面</el-checkbox>
+      </el-checkbox-group> -->
     </el-form-item>
     <el-form-item label="断面位置" prop="position">
-      <el-radio-group v-model="formData.position">
-        <el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
-          dict.label }}</el-radio-button>
-      </el-radio-group>
+      <muti-select v-model="formData.position" :options="dict.type.coil_abnormal_position" type="checkbox">
+      </muti-select>
     </el-form-item>
     <el-form-item>
       <el-alert title="异常位置为内圈算起" type="info" :closable="false" show-icon size="small" />
@@ -84,7 +82,12 @@ export default {
     return {
       rules: {
         position: [
-          { required: true, message: '请选择位置', trigger: 'change' }
+          { required: true, message: '请选择位置', trigger: 'change' },
+          { validator: this.validateArray, trigger: 'change' }
+        ],
+        plateSurface: [
+          { required: true, message: '请选择上下板面', trigger: 'change' },
+          { validator: this.validateArray, trigger: 'change' }
         ],
         startPosition: [
           { required: true, message: '请输入开始位置', trigger: ['blur', 'change'] },
@@ -106,10 +109,26 @@ export default {
   computed: {
     formData: {
       get() {
-        return this.value || {};
+        const data = this.value || {};
+        // 接收时将CSV字符串解析成数组
+        // if (data.plateSurface && typeof data.plateSurface === 'string') {
+        //   data.plateSurface = data.plateSurface?.split(',') ?? [];
+        // }
+        // if (data.position && typeof data.position === 'string') {
+        //   data.position = data.position?.split(',') ?? [];
+        // }
+        return data;
       },
       set(newVal) {
-        this.$emit('input', { ...newVal });
+        // 发送时将数组转为CSV
+        const data = { ...newVal };
+        // if (data.plateSurface && Array.isArray(data.plateSurface)) {
+        //   data.plateSurface = data.plateSurface?.join(',') ?? '';
+        // }
+        // if (data.position && Array.isArray(data.position)) {
+        //   data.position = data.position?.join(',') ?? '';
+        // }
+        this.$emit('input', data);
       }
     }
   },
@@ -129,7 +148,8 @@ export default {
       this.formData = {
         abnormalId: undefined,
         coilId: currentCoilId,
-        position: undefined,
+        position: [],
+        plateSurface: [],
         startPosition: undefined,
         endPosition: undefined,
         length: undefined,
@@ -161,6 +181,14 @@ export default {
       } else {
         callback();
       }
+    },
+    /** 校验数组 */
+    validateArray(rule, value, callback) {
+      if (!value || value.length === 0) {
+        callback(new Error('请至少选择一个选项'));
+      } else {
+        callback();
+      }
     }
   }
 };