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

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

klp-ui/src/components/MutiSelect/index.vue

@@ -1,10 +1,51 @@
 <template>
-  <el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-  </el-select>
+  <div class="muti-select">
+    <!-- 下拉选择模式 -->
+    <el-select
+      v-if="type === 'select'"
+      v-model="innerValue"
+      multiple
+      :placeholder="placeholder"
+      :filterable="filterable"
+      :clearable="clearable"
+      :allow-create="allowAdd"
+      :disabled="disabled"
+      :size="size"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+
+    <!-- 复选框模式 -->
+    <div v-else-if="type === 'checkbox'" class="checkbox-group">
+      <el-checkbox-group v-model="innerValue" @change="handleCheckboxChange">
+        <el-checkbox
+          v-for="item in options"
+          :key="item.value"
+          :label="item.value"
+          :disabled="disabled"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+      <!-- <el-button
+        v-if="showSelectAll && options.length > 0"
+        type="text"
+        size="small"
+        @click="toggleSelectAll"
+      >
+        {{ isAllSelected ? '取消全选' : '全选' }}
+      </el-button> -->
+    </div>
+  </div>
 </template>
 
-<!-- v-model上床绑定逗号分隔的字符串，可以props配置是否允许新增 -->
+<!-- v-model 绑定逗号分隔的字符串，可以 props 配置是否允许新增 -->
 <script>
   export default {
     name: 'MutiSelect',
@@ -20,6 +61,34 @@
       allowAdd: {
         type: Boolean,
         default: false
+      },
+      type: {
+        type: String,
+        default: 'select' // select or checkbox
+      },
+      placeholder: {
+        type: String,
+        default: '请选择'
+      },
+      filterable: {
+        type: Boolean,
+        default: true
+      },
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        default: 'default' // large, default, small
+      },
+      showSelectAll: {
+        type: Boolean,
+        default: true
       }
     },
     // 计算属性捕获实现双向绑定
@@ -29,12 +98,55 @@
           if (!this.value) {
             return [];
           }
-          return this.value.split(',');
+          return this.value?.split(',');
         },
         set(val) {
-          this.$emit('input', val.join(','));
+          const newValue = val?.join(',') ?? '';
+          this.$emit('input', newValue);
+          this.$emit('change', newValue);
+        }
+      },
+      // 是否全选
+      isAllSelected() {
+        return this.options.length > 0 && this.innerValue.length === this.options.length;
+      }
+    },
+    methods: {
+      // 处理选择变化
+      handleChange(val) {
+        this.$emit('change', val.join(','));
+      },
+      // 处理复选框变化
+      handleCheckboxChange(val) {
+        const newValue = val.join(',');
+        this.$emit('input', newValue);
+        this.$emit('change', newValue);
+      },
+      // 切换全选/取消全选
+      toggleSelectAll() {
+        if (this.isAllSelected) {
+          this.innerValue = [];
+        } else {
+          this.innerValue = this.options.map(item => item.value);
         }
       }
     }
   }
-</script>
+</script>
+
+<style scoped>
+  .muti-select {
+    width: 100%;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+  }
+  
+  .checkbox-group .el-checkbox {
+    margin-right: 10px;
+  }
+</style>