feat(wms/coil): 添加缺陷图片上传与展示功能

1. 新增ImageUpload组件支持url模式绑定
2. 在异常表单中添加主缺陷对应的图片上传控件
3. 在异常表格和管理页面中新增缺陷图片展示列
4. 同步更新表单数据默认值与表格初始化逻辑

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

@@ -52,17 +52,22 @@
       <!-- 0表示否，1表示是 -->
       <el-checkbox v-model="formData.mainMark" :true-label="1" :false-label="0">是否为主缺陷</el-checkbox>
     </el-form-item>
+    <el-form-item label="缺陷图片" v-if="formData.mainMark === 1">
+      <image-upload v-model="formData.attachmentFiles" value-mode="url" :limit="3" />
+    </el-form-item>
     
   </el-form>
 </template>
 
 <script>
 import CoilSelector from '@/components/CoilSelector'
+import ImageUpload from '@/components/ImageUpload'
 
 export default {
   name: "AbnormalForm",
   components: {
-    CoilSelector
+    CoilSelector,
+    ImageUpload
   },
   props: {
     value: {
@@ -141,7 +146,8 @@ export default {
         productionLine: undefined,
         defectCode: undefined,
         degree: undefined,
-        remark: undefined
+        remark: undefined,
+        attachmentFiles: undefined
       };
     },
     /** 计算缺陷长度 */

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

@@ -23,12 +23,26 @@
         <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
       </template>
     </el-table-column>
-    <el-table-column label="是否为主缺陷" prop="mainMark">
+    <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="缺陷图片" align="center" prop="attachmentFiles" width="120">
+      <template slot-scope="scope">
+        <template v-if="scope.row.attachmentFiles">
+          <div v-for="(url, idx) in scope.row.attachmentFiles.split(',')" :key="idx" style="margin-right: 4px;">
+            <el-image
+              style="width: 30px; height: 30px; vertical-align: middle; border-radius: 2px;"
+              :src="url"
+              :preview-src-list="scope.row.attachmentFiles.split(',')"
+              fit="cover"
+            />
+          </div>
+        </template>
+      </template>
+    </el-table-column>
     <el-table-column label="程度" align="center" prop="degree">
       <template slot-scope="scope">
         <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />

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

@@ -87,6 +87,11 @@
             <el-checkbox v-model="scope.row.mainMark" :true-label="1" :false-label="0"></el-checkbox>
           </template>
         </el-table-column>
+        <el-table-column label="缺陷图片" prop="attachmentFiles" width="180">
+          <template slot-scope="scope">
+            <image-upload v-if="scope.row.mainMark === 1" v-model="scope.row.attachmentFiles" value-mode="url" :limit="3" :is-show-tip="false" />
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="80">
           <template slot-scope="scope">
             <el-button v-if="scope.row.abnormalId" type="text" size="mini" @click="handleDelete(scope.row)" style="color: #f56c6c;">
@@ -106,11 +111,13 @@
 import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal, updateCoilAbnormal } from '@/api/wms/coilAbnormal'
 import { getMaterialCoil } from '@/api/wms/coil'
 import AbnormalForm from './AbnormalForm'
+import ImageUpload from '@/components/ImageUpload'
 
 export default {
   name: 'ExceptionManager',
   components: {
-    AbnormalForm
+    AbnormalForm,
+    ImageUpload
   },
   dicts: ['coil_abnormal_code', 'coil_abnormal_degree', 'coil_abnormal_position', 'sys_lines'],
   props: {
@@ -223,7 +230,8 @@ export default {
           productionLine: null,
           defectCode: null,
           degree: null,
-          remark: null
+          remark: null,
+          attachmentFiles: null
         })
       }
       return emptyRows
@@ -390,6 +398,7 @@ export default {
       row.mainMark = 0
       row.defectCode = null
       row.degree = null
+      row.attachmentFiles = null
     }
   }
 }