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

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

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

@@ -99,7 +99,16 @@ export default {
     },
     supplierCoilNo() {
       return this.coilInfo.supplierCoilNo || '-'
-    }
+    },
+    length() {
+      return this.coilInfo.length || '-'
+    },
+    actualLength() {
+      return this.coilInfo.actualLength || '-'
+    },
+    actualWidth() {
+      return this.coilInfo.actualWidth || '-'
+    },
   },
   methods: {
     getCoilInfo() {

klp-ui/src/views/wms/coil/abnormalCoil.vue

@@ -111,38 +111,7 @@
 
     <!-- 添加或修改钢卷异常信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="showCoilSelector"></abnormal-form>
-        <el-form-item label="钢卷ID" prop="coilId" v-if="!form.abnormalId && showCoilSelector">
-          <coil-selector v-model="form.coilId"></coil-selector>
-        </el-form-item>
-        <el-form-item label="位置" prop="position">
-          <el-radio-group v-model="form.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="lengthCoord">
-          <!-- <el-input v-model="form.lengthCoord" placeholder="请输入长度坐标" /> -->
-          <el-input v-model="form.startPosition" placeholder="请输入开始位置" />
-          <el-input v-model="form.endPosition" placeholder="请输入结束位置" />
-          <!-- <el-input v-model="form.length" placeholder="请输入缺陷长度" /> -->
-        </el-form-item>
-        <el-form-item label="缺陷代码" prop="defectCode">
-          <el-radio-group v-model="form.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="form.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="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -173,6 +142,7 @@ import { listMaterialCoil } from "@/api/wms/coil";
 import CoilSelector from '@/components/CoilSelector'
 import CoilNo from '@/components/KLPService/Renderer/CoilNo'
 import CoilList from "./components/CoilList.vue";
+import AbnormalForm from './components/AbnormalForm';
 
 export default {
   name: "CoilAbnormal",
@@ -180,7 +150,8 @@ export default {
   components: {
     CoilSelector,
     CoilNo,
-    CoilList
+    CoilList,
+    AbnormalForm
   },
   data() {
     return {
@@ -294,7 +265,9 @@ export default {
         updateTime: undefined,
         updateBy: undefined
       };
-      this.resetForm("form");
+      if (this.$refs.abnormalForm) {
+        this.$refs.abnormalForm.resetFields();
+      }
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -340,7 +313,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["abnormalForm"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
           if (this.form.abnormalId != null) {

klp-ui/src/views/wms/coil/abnormalDetail.vue

@@ -98,62 +98,12 @@
 
     <!-- 添加或修改钢卷异常信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="!$route.query.coilId"></abnormal-form>
-        <el-form-item label="钢卷ID" prop="coilId" v-if="!form.abnormalId">
-          <coil-selector v-model="form.coilId"></coil-selector>
-        </el-form-item>
-        <el-form-item label="位置" prop="position">
-          <el-radio-group v-model="form.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="form.startPosition" prop="startPosition" />
-        </el-form-item>
-        <el-form-item label="结束位置" prop="endPosition">
-          <el-input v-model="form.endPosition" prop="endPosition" />
-        </el-form-item>
-        <!-- <el-form-item label="缺陷长度" prop="length">
-          <el-input v-model="form.length" placeholder="请输入缺陷长度" />
-        </el-form-item> -->
-        <el-form-item label="缺陷代码" prop="defectCode">
-          <el-radio-group v-model="form.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="form.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="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-
-    <!-- 异常判级对话框 -->
-    <el-dialog :title="title" :visible.sync="judgeOpen" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="判级" prop="judgeLevel">
-          <el-radio-group v-model="form.judgeLevel">
-            <el-radio-button v-for="dict in dict.type.coil_abnormal_level" :key="dict.value" :label="dict.value">{{
-              dict.label }}</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitJudge">确 定</el-button>
-        <el-button @click="judgeOpen = false">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -161,13 +111,15 @@
 import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal, judgeAbnormalLevel } from "@/api/wms/coilAbnormal";
 import CoilSelector from '@/components/CoilSelector'
 import CoilNo from '@/components/KLPService/Renderer/CoilNo'
+import AbnormalForm from './components/AbnormalForm'
 
 export default {
   name: "CoilAbnormal",
   dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree', 'coil_abnormal_level'],
   components: {
     CoilSelector,
-    CoilNo
+    CoilNo,
+    AbnormalForm
   },
   data() {
     return {
@@ -205,9 +157,6 @@ export default {
       },
       // 表单参数
       form: {},
-      // 表单校验
-      rules: {
-      },
       judgeOpen: false,
     };
   },
@@ -259,7 +208,9 @@ export default {
         updateTime: undefined,
         updateBy: undefined
       };
-      this.resetForm("form");
+      if (this.$refs.abnormalForm) {
+        this.$refs.abnormalForm.resetFields();
+      }
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -297,7 +248,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["abnormalForm"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
           if (this.form.abnormalId != null) {

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>

klp-ui/src/views/wms/coil/merge.vue

@@ -230,11 +230,61 @@
                   <el-input v-model="targetCoil.formattedDuration" placeholder="自动计算" disabled />
                 </el-form-item>
               </div>
+
+              <div class="form-row">
+                <el-form-item label="异常信息" class="form-item-full">
+                  <div class="abnormal-container">
+                    <div 
+                      v-for="(abnormal, index) in abnormals" 
+                      :key="index" 
+                      class="abnormal-item"
+                      @click="editAbnormal(index)"
+                    >
+                      <div class="abnormal-content">
+                        <div class="abnormal-info">
+                          <div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
+                          <div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
+                        </div>
+                        <el-button 
+                          type="danger" 
+                          size="mini" 
+                          icon="el-icon-close" 
+                          class="abnormal-delete"
+                          @click.stop="deleteAbnormal(index)"
+                        ></el-button>
+                      </div>
+                    </div>
+                    <div 
+                      class="abnormal-add"
+                      @click="addAbnormal"
+                    >
+                      <i class="el-icon-plus"></i>
+                    </div>
+                  </div>
+                </el-form-item>
+              </div>
             </el-form>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 异常表单弹窗 -->
+    <el-dialog 
+      :title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'" 
+      :visible.sync="abnormalDialogVisible" 
+      width="600px"
+    >
+      <abnormal-form 
+        ref="abnormalForm" 
+        v-model="abnormalForm" 
+        :show-coil-selector="false"
+      ></abnormal-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="abnormalDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAbnormal">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -247,6 +297,7 @@ import RawMaterialSelector from "@/components/KLPService/RawMaterialSelect";
 import ProductSelector from "@/components/KLPService/ProductSelect";
 import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
 import TimeInput from "@/components/TimeInput";
+import AbnormalForm from './components/AbnormalForm';
 import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
 
 export default {
@@ -257,9 +308,10 @@ export default {
     RawMaterialSelector,
     ProductSelector,
     WarehouseSelect,
-    TimeInput
+    TimeInput,
+    AbnormalForm
   },
-  dicts: ['coil_quality_status'],
+  dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
   data() {
     const currentCoilNoPrefix = generateCoilNoPrefix()
     return {
@@ -332,7 +384,24 @@ export default {
       pendingLoading: false,
       // 待操作ID
       actionId: null,
-      currentAction: {}
+      currentAction: {},
+      // 异常信息
+      abnormals: [],
+      // 异常表单弹窗
+      abnormalDialogVisible: false,
+      // 当前编辑的异常索引
+      currentAbnormalIndex: -1,
+      // 异常表单数据
+      abnormalForm: {
+        coilId: null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      }
     };
   },
   computed: {
@@ -681,6 +750,7 @@ export default {
           ...this.targetCoil,
           enterCoilNo: enterCoilNos,  // 拼接的入场钢卷号
           hasMergeSplit: 2, // 2表示合卷
+          abnormals: this.abnormals,
           newCoils: this.sourceCoils.map(item => ({
             coilId: item.coilId,
             enterCoilNo: item.enterCoilNo,
@@ -836,6 +906,78 @@ export default {
     // closePage 关闭当前页面
     closePage() {
       this.$router.back();
+    },
+    
+    // 新增异常
+    addAbnormal() {
+      this.currentAbnormalIndex = -1;
+      this.abnormalForm = {
+        coilId: null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 编辑异常
+    editAbnormal(index) {
+      this.currentAbnormalIndex = index;
+      this.abnormalForm = { ...this.abnormals[index] };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 保存异常
+    saveAbnormal() {
+      this.$refs.abnormalForm.validate(valid => {
+        if (valid) {
+          // 计算缺陷长度
+          this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
+          
+          if (this.currentAbnormalIndex === -1) {
+            // 新增异常
+            this.abnormals.push({ ...this.abnormalForm });
+          } else {
+            // 编辑异常
+            this.abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
+          }
+          
+          this.abnormalDialogVisible = false;
+        }
+      });
+    },
+    
+    // 删除异常
+    deleteAbnormal(index) {
+      this.$confirm('确定要删除这个异常信息吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.abnormals.splice(index, 1);
+      });
+    },
+    
+    // 获取异常位置文本
+    getAbnormalPositionText(position) {
+      if (!position) return '';
+      const dict = this.dict.type.coil_abnormal_position;
+      if (!dict) return position;
+      const item = dict.find(item => item.value === position);
+      return item ? item.label : position;
+    },
+    
+    // 获取异常代码文本
+    getAbnormalCodeText(code) {
+      if (!code) return '';
+      const dict = this.dict.type.coil_abnormal_code;
+      if (!dict) return code;
+      const item = dict.find(item => item.value === code);
+      return item ? item.label : code;
     }
   }
 };
@@ -1256,4 +1398,86 @@ export default {
     }
   }
 }
+
+
+.abnormal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 5px;
+}
+
+.abnormal-item {
+  width: 120px;
+  height: 80px;
+  background-color: #fff1f0;
+  border: 1px solid #ff4d4f;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .abnormal-content {
+    padding: 8px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .abnormal-info {
+    flex: 1;
+  }
+
+  .abnormal-position {
+    font-size: 12px;
+    font-weight: 500;
+    color: #ff4d4f;
+    margin-bottom: 4px;
+  }
+
+  .abnormal-code {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.3;
+  }
+
+  .abnormal-delete {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+}
+
+.abnormal-add {
+  width: 120px;
+  height: 80px;
+  border: 2px dashed #ff4d4f;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #ff4d4f;
+  font-size: 24px;
+
+  &:hover {
+    background-color: #fff1f0;
+    transform: translateY(-2px);
+  }
+}
 </style>

klp-ui/src/views/wms/coil/panels/abnormal.vue

@@ -58,35 +58,7 @@
 
     <!-- 添加或修改钢卷异常信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="false"></abnormal-form>
-        <el-form-item label="位置" prop="position">
-          <el-radio-group v-model="form.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="lengthCoord">
-          <!-- <el-input v-model="form.lengthCoord" placeholder="请输入长度坐标" /> -->
-          <el-input v-model="form.startPosition" placeholder="请输入开始位置" />
-          <el-input v-model="form.endPosition" placeholder="请输入结束位置" />
-          <!-- <el-input v-model="form.length" placeholder="请输入缺陷长度" /> -->
-        </el-form-item>
-        <el-form-item label="缺陷代码" prop="defectCode">
-          <el-radio-group v-model="form.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="form.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="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -97,10 +69,14 @@
 
 <script>
 import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal } from "@/api/wms/coilAbnormal";
+import AbnormalForm from '../components/AbnormalForm';
 
 export default {
   name: "CoilAbnormal",
   dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree'],
+  components: {
+    AbnormalForm
+  },
   data() {
     return {
       // 按钮loading
@@ -137,9 +113,6 @@ export default {
       },
       // 表单参数
       form: {},
-      // 表单校验
-      rules: {
-      },
       judgeOpen: false,
     };
   },
@@ -197,7 +170,9 @@ export default {
         updateTime: undefined,
         updateBy: undefined
       };
-      this.resetForm("form");
+      if (this.$refs.abnormalForm) {
+        this.$refs.abnormalForm.resetFields();
+      }
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -229,7 +204,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["abnormalForm"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
           if (this.form.abnormalId != null) {

klp-ui/src/views/wms/coil/panels/do.vue

@@ -439,36 +439,7 @@
     </el-row>
 
     <el-dialog title="新增异常" :visible.sync="exceptionDialogVisible" width="600px">
-      <el-form ref="exceptionForm" :model="exceptionForm" label-width="80px">
+      <abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-form>
-        <el-form-item label="位置" prop="position">
-          <el-radio-group v-model="exceptionForm.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="lengthCoord">
-          <div style="display: flex; gap: 10px;">
-            <el-input v-model="exceptionForm.startPosition" placeholder="请输入开始位置" />
-            -
-            <el-input v-model="exceptionForm.endPosition" placeholder="请输入结束位置" />
-          </div>
-        </el-form-item>
-        <el-form-item label="缺陷代码" prop="defectCode">
-          <el-radio-group v-model="exceptionForm.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="exceptionForm.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="exceptionForm.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="info" @click="handleAbnormal">查看异常</el-button>
         <el-button type="primary" @click="confirmException">确 定</el-button>
@@ -499,6 +470,7 @@ import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo'
 import { addCoilAbnormal } from '@/api/wms/coilAbnormal'
 import LabelRender from './LabelRender/index.vue'
 import StepSplit from './stepSplit.vue'
+import AbnormalForm from '../components/AbnormalForm'
 import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint'
 
 export default {
@@ -522,7 +494,8 @@ export default {
     ProductInfo,
     RawMaterialInfo,
     LabelRender,
-    StepSplit
+    StepSplit,
+    AbnormalForm
   },
   data() {
     return {
@@ -982,19 +955,22 @@ export default {
       this.exceptionDialogVisible = true
     },
     confirmException() {
-      addCoilAbnormal({
+      this.$refs["abnormalForm"].validate(valid => {
-        ...this.exceptionForm,
+        if (valid) {
-        length: this.exceptionForm.endPosition - this.exceptionForm.startPosition,
+          addCoilAbnormal({
-      }).then(response => {
+            ...this.exceptionForm,
-        this.$message.success('异常记录添加成功')
+            length: this.exceptionForm.endPosition - this.exceptionForm.startPosition,
-        this.cancelException();
+          }).then(response => {
-        // 重置表单
+            this.$message.success('异常记录添加成功')
-        this.getMaterialCoil()
+            this.cancelException();
-      }).catch(error => {
+            // 重置表单
-        console.error('异常记录添加失败:', error)
+            this.getMaterialCoil()
-        this.$message.error('异常记录添加失败: ' + (error.message || error))
+          }).catch(error => {
-      })
+            console.error('异常记录添加失败:', error)
-
+            this.$message.error('异常记录添加失败: ' + (error.message || error))
+          })
+        }
+      });
     },
     handleAbnormal() {
       this.$router.push({

klp-ui/src/views/wms/coil/panels/stepSplit.vue

@@ -162,6 +162,37 @@
                 <el-input v-model="splitForm.remark" placeholder="请输入备注" type="textarea" />
               </el-form-item>
 
+              <el-form-item label="异常信息">
+                <div class="abnormal-container">
+                  <div 
+                    v-for="(abnormal, index) in abnormals" 
+                    :key="index" 
+                    class="abnormal-item"
+                    @click="editAbnormal(index)"
+                  >
+                    <div class="abnormal-content">
+                      <div class="abnormal-info">
+                        <div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
+                        <div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
+                      </div>
+                      <el-button 
+                        type="danger" 
+                        size="mini" 
+                        icon="el-icon-close" 
+                        class="abnormal-delete"
+                        @click.stop="deleteAbnormal(index)"
+                      ></el-button>
+                    </div>
+                  </div>
+                  <div 
+                    class="abnormal-add"
+                    @click="addAbnormal"
+                  >
+                    <i class="el-icon-plus"></i>
+                  </div>
+                </div>
+              </el-form-item>
+
               <el-form-item>
                 <el-button :loading="buttonLoading" type="primary" @click="addSplit">提交分条</el-button>
                 <el-button :loading="buttonLoading" @click="resetSplitForm">重置</el-button>
@@ -210,6 +241,24 @@
         </div>
       </el-col>
     </el-row>
+
+    <!-- 异常表单弹窗 -->
+    <el-dialog 
+      :title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'" 
+      :visible.sync="abnormalDialogVisible" 
+      width="600px"
+      append-to-body
+    >
+      <abnormal-form 
+        ref="abnormalForm" 
+        v-model="abnormalForm" 
+        :show-coil-selector="false"
+      ></abnormal-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="abnormalDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAbnormal">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -221,6 +270,7 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
 import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
 import TimeInput from "@/components/TimeInput";
+import AbnormalForm from '../components/AbnormalForm';
 import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
 
 export default {
@@ -245,8 +295,9 @@ export default {
     WarehouseSelect,
     ActualWarehouseSelect,
     TimeInput,
+    AbnormalForm
   },
-  dicts: ['coil_quality_status'],
+  dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
   data() {
     const currentCoilNoPrefix = generateCoilNoPrefix()
     return {
@@ -327,7 +378,24 @@ export default {
         warehouseId: [{ required: true, message: '请选择所在库位', trigger: 'change' }],
       },
       buttonLoading: false,
-      currentAction: {}
+      currentAction: {},
+      // 异常信息
+      abnormals: [],
+      // 异常表单弹窗
+      abnormalDialogVisible: false,
+      // 当前编辑的异常索引
+      currentAbnormalIndex: -1,
+      // 异常表单数据
+      abnormalForm: {
+        coilId: null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      }
     }
   },
   computed: {
@@ -470,6 +538,8 @@ export default {
         formattedDuration: '',
         parentCoilId: this.coilId,
       }
+      // 重置异常信息
+      this.abnormals = [];
     },
 
     // 材料类型变更处理
@@ -506,12 +576,19 @@ export default {
         // 区分新增/编辑：有coilId则为编辑，否则为新增
         let res
         this.buttonLoading = true
+        
+        // 添加异常信息到表单数据
+        const splitData = {
+          ...this.splitForm,
+          abnormals: this.abnormals
+        };
+        
         if (this.splitForm.coilId) {
           // 编辑分条：调用更新接口
-          res = await updateMaterialCoilSimple(this.splitForm)
+          res = await updateMaterialCoilSimple(splitData)
         } else {
           // 新增分条：调用创建接口
-          res = await createSpecialChild(this.coilId, this.actionId, this.splitForm)
+          res = await createSpecialChild(this.coilId, this.actionId, splitData)
         }
 
         this.$message.success(this.splitForm.coilId ? '编辑分条成功' : '新增分条成功')
@@ -614,6 +691,78 @@ export default {
         this.$set(this.splitForm, 'productionDuration', '');
         this.$set(this.splitForm, 'formattedDuration', '');
       }
+    },
+    
+    // 新增异常
+    addAbnormal() {
+      this.currentAbnormalIndex = -1;
+      this.abnormalForm = {
+        coilId: this.splitForm.coilId || null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 编辑异常
+    editAbnormal(index) {
+      this.currentAbnormalIndex = index;
+      this.abnormalForm = { ...this.abnormals[index] };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 保存异常
+    saveAbnormal() {
+      this.$refs.abnormalForm.validate(valid => {
+        if (valid) {
+          // 计算缺陷长度
+          this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
+          
+          if (this.currentAbnormalIndex === -1) {
+            // 新增异常
+            this.abnormals.push({ ...this.abnormalForm });
+          } else {
+            // 编辑异常
+            this.abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
+          }
+          
+          this.abnormalDialogVisible = false;
+        }
+      });
+    },
+    
+    // 删除异常
+    deleteAbnormal(index) {
+      this.$confirm('确定要删除这个异常信息吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.abnormals.splice(index, 1);
+      });
+    },
+    
+    // 获取异常位置文本
+    getAbnormalPositionText(position) {
+      if (!position) return '';
+      const dict = this.dict.type.coil_abnormal_position;
+      if (!dict) return position;
+      const item = dict.find(item => item.value === position);
+      return item ? item.label : position;
+    },
+    
+    // 获取异常代码文本
+    getAbnormalCodeText(code) {
+      if (!code) return '';
+      const dict = this.dict.type.coil_abnormal_code;
+      if (!dict) return code;
+      const item = dict.find(item => item.value === code);
+      return item ? item.label : code;
     }
   },
 }
@@ -643,4 +792,85 @@ export default {
   height: 100%;
   min-height: 400px;
 }
+
+.abnormal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 5px;
+}
+
+.abnormal-item {
+  width: 120px;
+  height: 80px;
+  background-color: #fff1f0;
+  border: 1px solid #ff4d4f;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .abnormal-content {
+    padding: 8px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .abnormal-info {
+    flex: 1;
+  }
+
+  .abnormal-position {
+    font-size: 12px;
+    font-weight: 500;
+    color: #ff4d4f;
+    margin-bottom: 4px;
+  }
+
+  .abnormal-code {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.3;
+  }
+
+  .abnormal-delete {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+}
+
+.abnormal-add {
+  width: 120px;
+  height: 80px;
+  border: 2px dashed #ff4d4f;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #ff4d4f;
+  font-size: 24px;
+
+  &:hover {
+    background-color: #fff1f0;
+    transform: translateY(-2px);
+  }
+}
 </style>

klp-ui/src/views/wms/coil/split.vue

@@ -230,12 +230,59 @@
                 <el-form-item label="备注">
                   <el-input v-model="item.remark" placeholder="请输入备注" :disabled="readonly" />
                 </el-form-item>
+                <el-form-item label="异常信息">
+                  <div class="abnormal-container">
+                    <div 
+                      v-for="(abnormal, abnormalIndex) in item.abnormals" 
+                      :key="abnormalIndex" 
+                      class="abnormal-item"
+                      @click="editAbnormal(index, abnormalIndex)"
+                    >
+                      <div class="abnormal-content">
+                        <div class="abnormal-info">
+                          <div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
+                          <div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
+                        </div>
+                        <el-button 
+                          type="danger" 
+                          size="mini" 
+                          icon="el-icon-close" 
+                          class="abnormal-delete"
+                          @click.stop="deleteAbnormal(index, abnormalIndex)"
+                        ></el-button>
+                      </div>
+                    </div>
+                    <div 
+                      class="abnormal-add"
+                      @click="addAbnormal(index)"
+                    >
+                      <i class="el-icon-plus"></i>
+                    </div>
+                  </div>
+                </el-form-item>
               </el-form>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 异常表单弹窗 -->
+    <el-dialog 
+      :title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'" 
+      :visible.sync="abnormalDialogVisible" 
+      width="600px"
+    >
+      <abnormal-form 
+        ref="abnormalForm" 
+        v-model="abnormalForm" 
+        :show-coil-selector="false"
+      ></abnormal-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="abnormalDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAbnormal">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -248,6 +295,7 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductSelect from "@/components/KLPService/ProductSelect";
 import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
 import TimeInput from "@/components/TimeInput";
+import AbnormalForm from './components/AbnormalForm';
 import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
 
 export default {
@@ -258,8 +306,9 @@ export default {
     ProductSelect,
     WarehouseSelect,
     TimeInput,
+    AbnormalForm
   },
-  dicts: ['coil_quality_status'],
+  dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
   data() {
     const currentCoilNoPrefix = generateCoilNoPrefix()
     return {
@@ -304,6 +353,7 @@ export default {
           productionEndTime: '',
           productionDuration: '',
           formattedDuration: '',
+          abnormals: []
         }
       ],
       loading: false,
@@ -319,7 +369,24 @@ export default {
       readonly: false,
       // 待操作ID
       actionId: null,
-      currentAction: {}
+      currentAction: {},
+      // 异常表单弹窗
+      abnormalDialogVisible: false,
+      // 当前编辑的子卷索引
+      currentSubCoilIndex: -1,
+      // 当前编辑的异常索引
+      currentAbnormalIndex: -1,
+      // 异常表单数据
+      abnormalForm: {
+        coilId: null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      }
     };
   },
   computed: {
@@ -502,6 +569,7 @@ export default {
         productionEndTime: '',
         productionDuration: '',
         formattedDuration: '',
+        abnormals: []
       });
     },
 
@@ -684,6 +752,80 @@ export default {
         this.$set(item, 'productionDuration', '');
         this.$set(item, 'formattedDuration', '');
       }
+    },
+    
+    // 新增异常
+    addAbnormal(subCoilIndex) {
+      this.currentSubCoilIndex = subCoilIndex;
+      this.currentAbnormalIndex = -1;
+      this.abnormalForm = {
+        coilId: null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 编辑异常
+    editAbnormal(subCoilIndex, abnormalIndex) {
+      this.currentSubCoilIndex = subCoilIndex;
+      this.currentAbnormalIndex = abnormalIndex;
+      this.abnormalForm = { ...this.splitList[subCoilIndex].abnormals[abnormalIndex] };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 保存异常
+    saveAbnormal() {
+      this.$refs.abnormalForm.validate(valid => {
+        if (valid) {
+          // 计算缺陷长度
+          this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
+          
+          if (this.currentAbnormalIndex === -1) {
+            // 新增异常
+            this.splitList[this.currentSubCoilIndex].abnormals.push({ ...this.abnormalForm });
+          } else {
+            // 编辑异常
+            this.splitList[this.currentSubCoilIndex].abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
+          }
+          
+          this.abnormalDialogVisible = false;
+        }
+      });
+    },
+    
+    // 删除异常
+    deleteAbnormal(subCoilIndex, abnormalIndex) {
+      this.$confirm('确定要删除这个异常信息吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.splitList[subCoilIndex].abnormals.splice(abnormalIndex, 1);
+      });
+    },
+    
+    // 获取异常位置文本
+    getAbnormalPositionText(position) {
+      if (!position) return '';
+      const dict = this.dict.type.coil_abnormal_position;
+      if (!dict) return position;
+      const item = dict.find(item => item.value === position);
+      return item ? item.label : position;
+    },
+    
+    // 获取异常代码文本
+    getAbnormalCodeText(code) {
+      if (!code) return '';
+      const dict = this.dict.type.coil_abnormal_code;
+      if (!dict) return code;
+      const item = dict.find(item => item.value === code);
+      return item ? item.label : code;
     }
   }
 };
@@ -1040,4 +1182,86 @@ export default {
     }
   }
 }
+
+// 异常信息样式
+.abnormal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 5px;
+}
+
+.abnormal-item {
+  width: 120px;
+  height: 80px;
+  background-color: #fff1f0;
+  border: 1px solid #ff4d4f;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .abnormal-content {
+    padding: 8px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .abnormal-info {
+    flex: 1;
+  }
+
+  .abnormal-position {
+    font-size: 12px;
+    font-weight: 500;
+    color: #ff4d4f;
+    margin-bottom: 4px;
+  }
+
+  .abnormal-code {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.3;
+  }
+
+  .abnormal-delete {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+}
+
+.abnormal-add {
+  width: 120px;
+  height: 80px;
+  border: 2px dashed #ff4d4f;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #ff4d4f;
+  font-size: 24px;
+
+  &:hover {
+    background-color: #fff1f0;
+    transform: translateY(-2px);
+  }
+}
 </style>

klp-ui/src/views/wms/coil/typing.vue

@@ -208,6 +208,37 @@
               <el-input v-model="updateForm.remark" type="textarea" :rows="4" placeholder="请输入备注信息（非必填）" maxlength="500"
                 show-word-limit />
             </el-form-item>
+
+            <el-form-item label="异常信息">
+              <div class="abnormal-container">
+                <div 
+                  v-for="(abnormal, index) in abnormals" 
+                  :key="index" 
+                  class="abnormal-item"
+                  @click="editAbnormal(index)"
+                >
+                  <div class="abnormal-content">
+                    <div class="abnormal-info">
+                      <div class="abnormal-position">{{ getAbnormalPositionText(abnormal.position) }}</div>
+                      <div class="abnormal-code">{{ getAbnormalCodeText(abnormal.defectCode) }}</div>
+                    </div>
+                    <el-button 
+                      type="danger" 
+                      size="mini" 
+                      icon="el-icon-close" 
+                      class="abnormal-delete"
+                      @click.stop="deleteAbnormal(index)"
+                    ></el-button>
+                  </div>
+                </div>
+                <div 
+                  class="abnormal-add"
+                  @click="addAbnormal"
+                >
+                  <i class="el-icon-plus"></i>
+                </div>
+              </div>
+            </el-form-item>
           </el-form>
         </el-card>
 
@@ -225,16 +256,28 @@
                 {{ scope.row.exitWeight ? scope.row.exitWeight + ' t' : '—' }}
               </template>
             </el-table-column>
-            <!-- <el-table-column prop="exitLength" label="出口长度(m)" width="120">
-              <template slot-scope="scope">
-                {{ scope.row.exitLength ? scope.row.exitLength + ' m' : '—' }}
-              </template>
-            </el-table-column> -->
             <el-table-column prop="team" label="班组" width="80"></el-table-column>
           </el-table>
         </el-card>
       </div>
     </div>
+
+    <!-- 异常表单弹窗 -->
+    <el-dialog 
+      :title="currentAbnormalIndex === -1 ? '新增异常' : '编辑异常'" 
+      :visible.sync="abnormalDialogVisible" 
+      width="600px"
+    >
+      <abnormal-form 
+        ref="abnormalForm" 
+        v-model="abnormalForm" 
+        :show-coil-selector="false"
+      ></abnormal-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="abnormalDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAbnormal">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -250,6 +293,7 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductSelect from "@/components/KLPService/ProductSelect";
 import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
 import TimeInput from "@/components/TimeInput";
+import AbnormalForm from './components/AbnormalForm';
 import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
 
 export default {
@@ -260,8 +304,9 @@ export default {
     ProductSelect,
     WarehouseSelect,
     TimeInput,
+    AbnormalForm
   },
-  dicts: ['coil_quality_status'],
+  dicts: ['coil_quality_status', 'coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
   data() {
     return {
       loading: false,
@@ -378,7 +423,24 @@ export default {
       productList: [],
       itemSearchLoading: false,
       // 酸连轧最近记录
-      acidRecentRecords: []
+      acidRecentRecords: [],
+      // 异常信息
+      abnormals: [],
+      // 异常表单弹窗
+      abnormalDialogVisible: false,
+      // 当前编辑的异常索引
+      currentAbnormalIndex: -1,
+      // 异常表单数据
+      abnormalForm: {
+        coilId: null,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      }
     };
   },
   computed: {
@@ -813,6 +875,7 @@ export default {
             coilId: this.currentInfo.coilId,
             enterCoilNo: this.currentInfo.enterCoilNo,
             supplierCoilNo: this.currentInfo.supplierCoilNo,
+            abnormals: this.abnormals,
             // 注意：不要传newCoils，否则会走批量更新逻辑
           };
 
@@ -890,6 +953,78 @@ export default {
     // 取消操作
     handleCancel() {
       this.$router.back();
+    },
+    
+    // 新增异常
+    addAbnormal() {
+      this.currentAbnormalIndex = -1;
+      this.abnormalForm = {
+        coilId: this.currentInfo.coilId,
+        position: null,
+        startPosition: 0,
+        endPosition: 0,
+        length: 0,
+        defectCode: null,
+        degree: null,
+        remark: null
+      };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 编辑异常
+    editAbnormal(index) {
+      this.currentAbnormalIndex = index;
+      this.abnormalForm = { ...this.abnormals[index] };
+      this.abnormalDialogVisible = true;
+    },
+    
+    // 保存异常
+    saveAbnormal() {
+      this.$refs.abnormalForm.validate(valid => {
+        if (valid) {
+          // 计算缺陷长度
+          this.abnormalForm.length = this.abnormalForm.endPosition - this.abnormalForm.startPosition;
+          
+          if (this.currentAbnormalIndex === -1) {
+            // 新增异常
+            this.abnormals.push({ ...this.abnormalForm });
+          } else {
+            // 编辑异常
+            this.abnormals[this.currentAbnormalIndex] = { ...this.abnormalForm };
+          }
+          
+          this.abnormalDialogVisible = false;
+        }
+      });
+    },
+    
+    // 删除异常
+    deleteAbnormal(index) {
+      this.$confirm('确定要删除这个异常信息吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.abnormals.splice(index, 1);
+      });
+    },
+    
+    // 获取异常位置文本
+    getAbnormalPositionText(position) {
+      if (!position) return '';
+      const dict = this.dict.type.coil_abnormal_position;
+      if (!dict) return position;
+      const item = dict.find(item => item.value === position);
+      return item ? item.label : position;
+    },
+    
+    // 获取异常代码文本
+    getAbnormalCodeText(code) {
+      if (!code) return '';
+      const dict = this.dict.type.coil_abnormal_code;
+      if (!dict) return code;
+      const item = dict.find(item => item.value === code);
+      return item ? item.label : code;
     }
   }
 };
@@ -1116,4 +1251,86 @@ export default {
     color: #66b1ff;
   }
 }
+
+// 异常信息样式
+.abnormal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 5px;
+}
+
+.abnormal-item {
+  width: 120px;
+  height: 80px;
+  background-color: #fff1f0;
+  border: 1px solid #ff4d4f;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .abnormal-content {
+    padding: 8px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .abnormal-info {
+    flex: 1;
+  }
+
+  .abnormal-position {
+    font-size: 12px;
+    font-weight: 500;
+    color: #ff4d4f;
+    margin-bottom: 4px;
+  }
+
+  .abnormal-code {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.3;
+  }
+
+  .abnormal-delete {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+}
+
+.abnormal-add {
+  width: 120px;
+  height: 80px;
+  border: 2px dashed #ff4d4f;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #ff4d4f;
+  font-size: 24px;
+
+  &:hover {
+    background-color: #fff1f0;
+    transform: translateY(-2px);
+  }
+}
 </style>