修改多图显示方式

src/views/modules/common/image-preview.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 该组件仅负责通过 viewer 打开预览，无需可视 DOM -->
+  <div class="image-preview-hook" style="display:none"></div>
+</template>
+
+<script>
+import { downloadUrl } from '@/api/file'
+
+export default {
+  name: 'image-preview',
+  methods: {
+    /**
+     * 打开图片预览
+     * @param {string[]} images 图片地址数组，可为相对路径（将自动拼接 downloadUrl）或绝对路径
+     * @param {number} startIndex 起始预览下标
+     */
+    open(images = [], startIndex = 0) {
+      if (!images || images.length === 0) {
+        this.$message && this.$message.error('没有可预览的图片！')
+        return
+      }
+      // 兼容相对路径，统一转为可访问的完整地址
+      const urls = images.map(u => {
+        if (!u) return ''
+        const isAbs = /^(https?:)?\/\//i.test(u)
+        return isAbs ? u : (downloadUrl + u)
+      }).filter(Boolean)
+
+      if (!urls.length) {
+        this.$message && this.$message.error('没有可预览的图片！')
+        return
+      }
+
+      // 使用全局注册的 $viewerApi 打开预览（支持缩放、旋转、左右切换等）
+      this.$viewerApi({
+        images: urls,
+        options: {
+          toolbar: true,
+          initialViewIndex: startIndex || 0
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped></style>

src/views/modules/common/upload-component.vue

@@ -75,7 +75,7 @@ export default {
       this.$emit('uploadSuccess', newVal)
     },
     fileObjList(newVal) {
-      console.log(newVal)
+      // console.log(newVal)
       this.fileList = newVal
     }
   },
@@ -173,7 +173,7 @@ export default {
     },
     // 改变上传内容
     handleChange(file, fileList) {
-      console.log('fileList:', fileList)
+      // console.log('fileList:', fileList)
       this.fileList = fileList
     },
     // 超限

src/views/modules/tech/draw-management.vue

@@ -40,14 +40,16 @@
         <el-table-column prop="version" header-align="center" align="center" min-width="120"
           :show-tooltip-when-overflow="true" label="版本">
         </el-table-column>
-        <el-table-column header-align="center" align="center" min-width="140" :show-overflow-tooltip="true"
-          label="图纸文件">
+        <el-table-column header-align="center" align="center" min-width="50" label="图纸文件">
           <template slot-scope="scope">
-            <div v-for="(item, index) in scope.row.attachList" style="display: inline">
-              <span v-if="index > 0">,</span>
-              <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{
-                item.fileName }}</a>
+            <div v-if="scope.row.attachList && scope.row.attachList.length">
+              <template v-if="isImage(scope.row.attachList[0])">
+                <img :src="getThumbUrl(scope.row.attachList[0])" :alt="scope.row.attachList[0].fileName"
+                  style="width:48px;height:48px;object-fit:cover;border-radius:4px;cursor:pointer;border:1px solid #e5e6eb;"
+                  @click="openImagePreview(scope.row.attachList)" />
+              </template>
             </div>
+            <span v-else style="color:#c0c4cc;">无</span>
           </template>
         </el-table-column>
         <!-- <el-table-column
@@ -89,6 +91,7 @@
       @onChose="onChose"></add-or-update>
     <detail v-if="detailVisible" ref="detail" @onChose="onChose" />
     <preview-component v-if="previewVisible" ref="preview" @onChose="onChose"></preview-component>
+    <image-preview ref="imagePreview" />
   </div>
 </template>
 
@@ -98,13 +101,17 @@ import Detail from './draw-detail'
 import { getDrawList } from '@/api/product'
 import ProductComponent from '@/views/modules/common/product-component'
 import PreviewComponent from '@/views/modules/common/preview-component.vue'
+import ImagePreview from '@/views/modules/common/image-preview.vue'
+import { downloadUrl } from '@/api/file'
+import { getFileExt } from '@/api/util'
 export default {
   name: 'draw-management',
   components: {
     ProductComponent,
     AddOrUpdate,
     Detail,
-    PreviewComponent
+    PreviewComponent,
+    ImagePreview
   },
   data() {
     return {
@@ -211,12 +218,39 @@ export default {
       }).catch(() => { })
     },
     // 预览
-    previewFile (fileName, url) {
+    previewFile(fileName, url) {
       this.previewVisible = true
       this.$nextTick(() => {
         this.$refs.preview.init(fileName, url)
       })
     },
+    // 缩略图地址（使用第一张）
+    getThumbUrl(firstAttach) {
+      if (!firstAttach) return ''
+      const url = firstAttach.url || ''
+      const isAbs = /^(https?:)?\/\//i.test(url)
+      return isAbs ? url : (downloadUrl + url)
+    },
+    // 新的图片预览：可左右切换
+    openImagePreview(attachList = []) {
+      if (!attachList || !attachList.length) return
+      const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
+      const imgs = attachList
+        .filter(a => a && a.fileName && imageExts.includes(getFileExt(a.fileName)))
+        .map(a => a.url)
+        .filter(Boolean)
+      if (!imgs.length) {
+        this.$message && this.$message.warning('没有可预览的图片文件')
+        return
+      }
+      this.$refs.imagePreview && this.$refs.imagePreview.open(imgs, 0)
+    },
+    // 判断是否为图片
+    isImage(attach) {
+      if (!attach || !attach.fileName) return false
+      const ext = getFileExt(attach.fileName)
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
+    },
     // 详情
     detailHandle(id) {
       this.detailVisible = true