feat(钢卷异常): 重构钢卷异常表单组件并集成到各相关页面

新增AbnormalForm组件统一管理钢卷异常表单，减少代码重复
在合卷、分条、打字等页面添加异常信息管理功能
优化异常信息展示样式，支持添加、编辑和删除操作

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

@@ -0,0 +1,113 @@
+<template>
+  <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
+    <el-form-item label="钢卷ID" prop="coilId" v-if="!formData.abnormalId && showCoilSelector">
+      <coil-selector v-model="formData.coilId"></coil-selector>
+    </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>
+    </el-form-item>
+    <el-form-item label="开始位置" prop="startPosition">
+      <el-input v-model="formData.startPosition" type="number" placeholder="请输入开始位置" />
+    </el-form-item>
+    <el-form-item label="结束位置" prop="endPosition">
+      <el-input v-model="formData.endPosition" type="number" placeholder="请输入结束位置" />
+    </el-form-item>
+    <el-form-item label="缺陷代码" prop="defectCode">
+      <el-radio-group v-model="formData.defectCode">
+        <el-radio-button v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="程度" prop="degree">
+      <el-radio-group v-model="formData.degree">
+        <el-radio-button v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="备注" prop="remark">
+      <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import CoilSelector from '@/components/CoilSelector'
+
+export default {
+  name: "AbnormalForm",
+  components: {
+    CoilSelector
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    showCoilSelector: {
+      type: Boolean,
+      default: false
+    }
+  },
+  dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'coil_abnormal_level'],
+  data() {
+    return {
+      rules: {
+        position: [
+          { required: true, message: '请选择位置', trigger: 'change' }
+        ],
+        startPosition: [
+          { required: true, message: '请输入开始位置', trigger: 'blur' },
+          // { type: 'number', message: '请输入数字', trigger: 'blur' }
+        ],
+        endPosition: [
+          { required: true, message: '请输入结束位置', trigger: 'blur' },
+          // { type: 'number', message: '请输入数字', trigger: 'blur' }
+        ],
+        defectCode: [
+          { required: true, message: '请选择缺陷代码', trigger: 'change' }
+        ],
+        degree: [
+          { required: true, message: '请选择程度', trigger: 'change' }
+        ]
+      }
+    };
+  },
+  computed: {
+    formData: {
+      get() {
+        return this.value || {};
+      },
+      set(newVal) {
+        this.$emit('input', { ...newVal });
+      }
+    }
+  },
+  methods: {
+    /** 表单验证 */
+    validate(callback) {
+      return this.$refs.form.validate(callback);
+    },
+    /** 重置表单 */
+    resetFields() {
+      this.$refs.form.resetFields();
+      this.formData = {
+        abnormalId: undefined,
+        coilId: undefined,
+        position: undefined,
+        startPosition: undefined,
+        endPosition: undefined,
+        length: undefined,
+        defectCode: undefined,
+        degree: undefined,
+        remark: undefined
+      };
+    },
+    /** 计算缺陷长度 */
+    calculateLength() {
+      if (this.formData.startPosition && this.formData.endPosition) {
+        this.formData.length = this.formData.endPosition - this.formData.startPosition;
+      }
+    }
+  }
+};
+</script>