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

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

klp-ui/src/components/ImageUpload/index.vue

@@ -49,6 +49,12 @@ import { listByIds, delOss } from "@/api/system/oss";
 export default {
   props: {
     value: [String, Object, Array],
+    // 值模式: 'ossId' - v-model绑定ossId字符串（默认）, 'url' - v-model绑定url字符串
+    valueMode: {
+      type: String,
+      default: 'ossId',
+      validator: (val) => ['ossId', 'url'].includes(val)
+    },
     // 图片数量限制
     limit: {
       type: Number,
@@ -89,19 +95,26 @@ export default {
     value: {
       async handler(val) {
         if (val) {
-          // 首先将值转为数组
           let list;
           if (Array.isArray(val)) {
             list = val;
           } else {
-            await listByIds(val).then(res => {
+            if (this.valueMode === 'url') {
-              list = res.data;
+              list = val.split(',').filter(url => url).map(url => {
-            })
+                return { name: url.slice(url.lastIndexOf('/') + 1), url: url };
+              });
+            } else {
+              await listByIds(val).then(res => {
+                list = res.data;
+              })
+            }
           }
-          // 然后将数组转为对象数组
           this.fileList = list.map(item => {
-            // 此处name使用ossId 防止删除出现重名
+            if (this.valueMode === 'url') {
-            item = { name: item.ossId, url: item.url, ossId: item.ossId };
+              item = { name: item.url.slice(item.url.lastIndexOf('/') + 1), url: item.url };
+            } else {
+              item = { name: item.ossId, url: item.url, ossId: item.ossId };
+            }
             return item;
           });
         } else {
@@ -172,8 +185,10 @@ export default {
     handleDelete(file) {
       const findex = this.fileList.map(f => f.name).indexOf(file.name);
       if(findex > -1) {
-        let ossId = this.fileList[findex].ossId;
+        if (this.valueMode === 'ossId') {
-        delOss(ossId);
+          let ossId = this.fileList[findex].ossId;
+          delOss(ossId);
+        }
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
       }
@@ -203,8 +218,12 @@ export default {
       let strs = "";
       separator = separator || ",";
       for (let i in list) {
-        if (list[i].ossId) {
+        if (this.valueMode === 'url') {
-          strs += list[i].ossId + separator;
+          strs += list[i].url + separator;
+        } else {
+          if (list[i].ossId) {
+            strs += list[i].ossId + separator;
+          }
         }
       }
       return strs != "" ? strs.substr(0, strs.length - 1) : "";

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
     }
   }
 }