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">
+  <div class="muti-select">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+    <!-- 下拉选择模式 -->
+    <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>
+
+<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>

klp-ui/src/main.js

@@ -46,6 +46,7 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 import KLPTable from '@/components/KLPUI/KLPTable/index.vue'
 import MemoInput from '@/components/MemoInput/index.vue'
+import MutiSelect from '@/components/MutiSelect/index.vue'
 import CurrentCoilNo from '@/components/KLPService/Renderer/CurrentCoilNo.vue'
 import DictSelect from '@/components/DictSelect'
 
@@ -81,6 +82,7 @@ Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('KLPTable', KLPTable)
 Vue.component('MemoInput', MemoInput)
+Vue.component('MutiSelect', MutiSelect)
 Vue.component('DictSelect', DictSelect)
 
 Vue.component('CurrentCoilNo', CurrentCoilNo)

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">
+      <muti-select v-model="formData.plateSurface" :options="[
-        <el-radio-button key="top" label="上">
+        {label: '上板面', value: '上'},
-          上板面
+        {label: '下板面', value: '下'}]" type="checkbox">
-        </el-radio-button>
+      </muti-select>
-        <el-radio-button key="bottom" label="下">
+      <!-- <el-checkbox-group v-model="formData.plateSurface">
-          下板面
+        <el-checkbox key="top" label="上">上板面</el-checkbox>
-        </el-radio-button>
+        <el-checkbox key="bottom" label="下">下板面</el-checkbox>
-      </el-radio-group>
+      </el-checkbox-group> -->
     </el-form-item>
     <el-form-item label="断面位置" prop="position">
-      <el-radio-group v-model="formData.position">
+      <muti-select v-model="formData.position" :options="dict.type.coil_abnormal_position" type="checkbox">
-        <el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
+      </muti-select>
-          dict.label }}</el-radio-button>
-      </el-radio-group>
     </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();
+      }
     }
   }
 };

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

@@ -1,43 +1,14 @@
 <template>
   <div class="exception-container" v-loading="abnormalLoading">
     <div class="exception-section">
-      <h4 class="section-title">异常记录</h4>
+      <div class="section-header">
-      <el-table :data="abnormalList" style="width: 100%">
-        <el-table-column label="开始位置" prop="startPosition"></el-table-column>
-        <el-table-column label="结束位置" prop="endPosition"></el-table-column>
-        <el-table-column label="长度" prop="length"></el-table-column>
-        <el-table-column label="上下版面" prop="plateSurface"></el-table-column>
-        <el-table-column label="断面位置" prop="position"></el-table-column>
-        <el-table-column label="是否为主缺陷" prop="mainMark">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
-            <el-tag v-else type="danger">否</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="缺陷代码" prop="defectCode">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
-          </template>
-        </el-table-column>
-        <el-table-column label="程度" prop="degree">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
-          </template>
-        </el-table-column>
-        <el-table-column label="产线" prop="productionLine"></el-table-column>
-        <el-table-column label="备注" prop="remark"></el-table-column>
-        <el-table-column label="操作" width="120">
-          <template slot-scope="scope">
-            <el-button type="danger" plain size="mini" :loading="buttonLoading"
-              @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <div class="exception-section">
         <h4 class="section-title">钢卷信息</h4>
-      <el-descriptions :column="5">
+        <el-button type="default" icon="el-icon-refresh" plain size="mini" @click="refreshCoilInfo"
+          :loading="coilInfoLoading">
+          刷新
+        </el-button>
+      </div>
+      <el-descriptions :column="5" v-loading="coilInfoLoading">
         <el-descriptions-item label="入场钢卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
         <el-descriptions-item label="当前钢卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
         <el-descriptions-item label="厂家原料卷号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
@@ -70,6 +41,10 @@
         <el-descriptions-item label="毛重">{{ coilInfo.grossWeight || '-' }} t</el-descriptions-item>
         <el-descriptions-item label="净重">{{ coilInfo.netWeight || '-' }} t</el-descriptions-item>
 
+        <el-descriptions-item label="生产开始时间">{{ coilInfo.productionStartTime || '-'
+          }}</el-descriptions-item>
+        <el-descriptions-item label="生产结束时间">{{ coilInfo.productionEndTime || '-'
+          }}</el-descriptions-item>
         <el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>
         <el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
         <el-descriptions-item label="钢卷表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
@@ -78,6 +53,100 @@
     </div>
 
     <div class="exception-section">
+      <div class="section-header">
+        <h4 class="section-title">异常记录</h4>
+        <el-button type="default" icon="el-icon-refresh" plain size="mini" @click="refreshAbnormalList"
+          :loading="abnormalLoading">
+          刷新
+        </el-button>
+      </div>
+      <el-table :data="abnormalList" style="width: 100%" border>
+        <el-table-column label="开始位置" prop="startPosition" width="80">
+          <template slot-scope="scope">
+            <el-input :controls="false" v-model="scope.row.startPosition" placeholder="请输入开始位置" />
+          </template>
+        </el-table-column>
+        <el-table-column label="结束位置" prop="endPosition" width="80">
+          <template slot-scope="scope">
+            <el-input :controls="false" v-model="scope.row.endPosition" placeholder="请输入结束位置" />
+          </template>
+        </el-table-column>
+        <el-table-column label="长度" prop="length" width="80">
+          <template slot-scope="scope">
+            {{ scope.row.endPosition - scope.row.startPosition }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上下版面" prop="plateSurface">
+          <template slot-scope="scope">
+            <muti-select v-model="scope.row.plateSurface" :options="[
+              { label: '上板面', value: '上' },
+              { label: '下板面', value: '下' }]" type="checkbox">
+            </muti-select>
+            <!-- <el-checkbox-group v-model="scope.row.plateSurface">
+              <el-checkbox key="top" label="上">上板面</el-checkbox>
+              <el-checkbox key="bottom" label="下">下板面</el-checkbox>
+            </el-checkbox-group> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="断面位置" prop="position">
+          <template slot-scope="scope">
+            <muti-select v-model="scope.row.position" :options="dict.type.coil_abnormal_position" type="checkbox">
+            </muti-select>
+            <!-- <el-checkbox-group v-model="scope.row.position">
+              <el-checkbox v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{ dict.label }}</el-checkbox>
+            </el-checkbox-group> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="主缺陷" prop="mainMark" width="60">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.mainMark" :true-label="1" :false-label="0"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="缺陷代码" prop="defectCode">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.defectCode" placeholder="请选择缺陷代码">
+              <el-option v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="程度" prop="degree">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.degree" placeholder="请选择程度">
+              <el-option v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="产线" prop="productionLine">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.productionLine" placeholder="请选择产线">
+              <el-option v-for="dict in dict.type.sys_lines" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180">
+          <template slot-scope="scope">
+            <el-button v-if="!scope.row.abnormalId" type="primary" plain size="mini" :loading="buttonLoading"
+              @click="handleSave(scope.row)">新增</el-button>
+            <template v-else>
+              <el-button type="primary" plain size="mini" :loading="buttonLoading"
+                @click="handleSave(scope.row)">变更</el-button>
+              <el-button type="danger" plain size="mini" :loading="buttonLoading"
+                @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- <div class="exception-section">
       <h4 class="section-title">新增异常</h4>
       <div class="form-container">
         <abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-form>
@@ -86,12 +155,12 @@
           <el-button @click="resetExceptionForm" :loading="buttonLoading">重置表单</el-button>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal } from '@/api/wms/coilAbnormal'
+import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal, updateCoilAbnormal } from '@/api/wms/coilAbnormal'
 import { getMaterialCoil } from '@/api/wms/coil'
 import AbnormalForm from './AbnormalForm'
 
@@ -100,7 +169,7 @@ export default {
   components: {
     AbnormalForm
   },
-  dicts: ['coil_abnormal_code', 'coil_abnormal_degree'],
+  dicts: ['coil_abnormal_code', 'coil_abnormal_degree', 'coil_abnormal_position', 'sys_lines'],
   props: {
     coilId: {
       type: String,
@@ -123,6 +192,7 @@ export default {
       coilInfo: {},
       abnormalList: [],
       abnormalLoading: false,
+      coilInfoLoading: false,
       buttonLoading: false,
     }
   },
@@ -143,7 +213,7 @@ export default {
           this.buttonLoading = true
           addCoilAbnormal({
             ...this.exceptionForm,
-            length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
+            // length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
           }).then(response => {
             this.$message.success('异常记录添加成功')
             this.resetExceptionForm()
@@ -172,21 +242,122 @@ export default {
     },
     loadAbnormalList() {
       if (!this.coilId) {
+        // 确保至少10个空行
+        this.abnormalList = this.generateEmptyRows(10)
         return
       }
       this.abnormalLoading = true
       listCoilAbnormal({
         coilId: this.coilId
       }).then(response => {
-        this.abnormalList = response.rows || []
+        let rows = response.rows || []
+        // 确保至少10个条目
+        if (rows.length < 10) {
+          const emptyRows = this.generateEmptyRows(10 - rows.length)
+          rows = [...rows, ...emptyRows]
+        }
+        this.abnormalList = rows
       }).catch(error => {
         console.error('查询异常记录失败:', error)
         this.$message.error('查询异常记录失败: ' + (error.message || error))
+        // 失败时也要确保至少10个空行
+        this.abnormalList = this.generateEmptyRows(10)
       }).finally(() => {
         this.abnormalLoading = false
       })
     },
+    generateEmptyRows(count) {
+      const emptyRows = []
+      for (let i = 0; i < count; i++) {
+        emptyRows.push({
+          coilId: this.coilId,
+          position: '',
+          plateSurface: '',
+          startPosition: 0,
+          endPosition: 0,
+          length: 0,
+          mainMark: 0,
+          productionLine: null,
+          defectCode: null,
+          degree: null,
+          remark: null
+        })
+      }
+      return emptyRows
+    },
+    handleSave(row) {
+      // 验证数据
+      if (!row.startPosition || !row.endPosition) {
+        this.$message.error('请填写开始位置和结束位置')
+        return
+      }
+      if (row.startPosition > row.endPosition) {
+        this.$message.error('开始位置必须小于结束位置')
+        return
+      }
+      if (!row.position || row.position.length === 0) {
+        this.$message.error('请选择断面位置')
+        return
+      }
+      if (!row.plateSurface || row.plateSurface.length === 0) {
+        this.$message.error('请选择上下板面')
+        return
+      }
+      if (!row.defectCode) {
+        this.$message.error('请选择缺陷代码')
+        return
+      }
+      if (!row.degree) {
+        this.$message.error('请选择程度')
+        return
+      }
+
+      this.buttonLoading = true
+      const saveData = {
+        ...row,
+        // length: row.endPosition - row.startPosition,
+        coilId: this.coilId
+      }
+
+      if (row.abnormalId) {
+        // 调用修改接口
+        updateCoilAbnormal(saveData).then(response => {
+          this.$message.success('异常记录更新成功')
+        }).catch(error => {
+          console.error('异常记录更新失败:', error)
+          this.$message.error('异常记录更新失败: ' + (error.message || error))
+        }).finally(() => {
+          this.buttonLoading = false
+        })
+      } else {
+        // 调用新增接口
+        addCoilAbnormal(saveData).then(response => {
+          this.$message.success('异常记录添加成功')
+          // 重新加载列表以获取新的 abnormalId
+          this.loadAbnormalList()
+        }).catch(error => {
+          console.error('异常记录添加失败:', error)
+          this.$message.error('异常记录添加失败: ' + (error.message || error))
+        }).finally(() => {
+          this.buttonLoading = false
+        })
+      }
+    },
     handleDelete(row) {
+      if (!row.abnormalId) {
+        // 如果没有 abnormalId，直接从列表中移除
+        const index = this.abnormalList.indexOf(row)
+        if (index > -1) {
+          this.abnormalList.splice(index, 1)
+          // 确保列表始终有10个条目
+          if (this.abnormalList.length < 10) {
+            const emptyRows = this.generateEmptyRows(10 - this.abnormalList.length)
+            this.abnormalList = [...this.abnormalList, ...emptyRows]
+          }
+          this.$message.success('空行已移除')
+        }
+        return
+      }
       this.$modal.confirm('确认删除异常记录吗？', '删除确认', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -204,15 +375,24 @@ export default {
         })
       })
     },
+    refreshAbnormalList() {
+      this.loadAbnormalList()
+    },
+    refreshCoilInfo() {
+      this.loadCoilInfo()
+    },
     loadCoilInfo() {
       if (!this.coilId) {
         return
       }
+      this.coilInfoLoading = true
       getMaterialCoil(this.coilId).then(response => {
         this.coilInfo = response.data || {}
       }).catch(error => {
         console.error('查询钢卷信息失败:', error)
         this.$message.error('查询钢卷信息失败: ' + (error.message || error))
+      }).finally(() => {
+        this.coilInfoLoading = false
       })
     }
   }
@@ -234,13 +414,20 @@ export default {
   border: 1px solid #e4e7ed;
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
 .section-title {
-  margin: 0 0 16px 0;
+  margin: 0;
   font-size: 14px;
   font-weight: 600;
   color: #303133;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e4e7ed;
 }
 
 .exception-section:first-child {