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

新增AbnormalForm组件统一管理钢卷异常表单，减少代码重复在合卷、分条、打字等页面添加异常信息管理功能优化异常信息展示样式，支持添加、编辑和删除操作
2026-03-19 17:50:37 +08:00
parent f4518be3f4
commit 2c4f5b3e53
10 changed files with 1079 additions and 187 deletions
--- a/klp-ui/src/views/wms/coil/panels/abnormal.vue
+++ b/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">
-        <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>
+      <abnormal-form ref="abnormalForm" v-model="form" :show-coil-selector="false"></abnormal-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) {
--- a/klp-ui/src/views/wms/coil/panels/do.vue
+++ b/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">
-        <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>
+      <abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-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.exceptionForm,
-        length: this.exceptionForm.endPosition - this.exceptionForm.startPosition,
-      }).then(response => {
-        this.$message.success('异常记录添加成功')
-        this.cancelException();
-        // 重置表单
-        this.getMaterialCoil()
-      }).catch(error => {
-        console.error('异常记录添加失败:', error)
-        this.$message.error('异常记录添加失败: ' + (error.message || error))
-      })
-
+      this.$refs["abnormalForm"].validate(valid => {
+        if (valid) {
+          addCoilAbnormal({
+            ...this.exceptionForm,
+            length: this.exceptionForm.endPosition - this.exceptionForm.startPosition,
+          }).then(response => {
+            this.$message.success('异常记录添加成功')
+            this.cancelException();
+            // 重置表单
+            this.getMaterialCoil()
+          }).catch(error => {
+            console.error('异常记录添加失败:', error)
+            this.$message.error('异常记录添加失败: ' + (error.message || error))
+          })
+        }
+      });
    },
    handleAbnormal() {
      this.$router.push({
--- a/klp-ui/src/views/wms/coil/panels/stepSplit.vue
+++ b/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>