修改简图预览方式

src/views/modules/production/plan-submit.vue

@@ -39,11 +39,13 @@
         <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
           :show-tooltip-when-overflow="true" label="版本号">
         </el-table-column>
-        <el-table-column header-align="center" align="center" min-width="140" :show-tooltip-when-overflow="true"
+        <el-table-column header-align="center" align="center" min-width="100" :show-tooltip-when-overflow="true"
           label="简图">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.attachList2 || scope.row.attachList2.length === 0" type="text" size="small"
-              @click="attachDetail(scope.row.attachList2)">查看</el-button>
+            <div class="thumb-list" v-if="getImageList(scope.row.attachList2).length">
+              <img v-for="(img, idx) in getImageList(scope.row.attachList2)" :key="(img.url || '') + idx" class="thumb"
+                :src="downloadUrl + img.url" :alt="img.fileName" @click="previewFile(img.fileName, img.url)" />
+            </div>
           </template>
         </el-table-column>
         <el-table-column prop="unit" header-align="center" align="center" min-width="140"
@@ -121,14 +123,18 @@
     </span>
 
     <attach-detail-dialog ref="attachDetail" />
+    <!-- 图片预览组件（使用 v-viewer 打开大图） -->
+    <preview-component v-if="previewVisible" ref="preview" />
   </div>
 </template>
 
 <script>
 import AttachDetailDialog from '../common/attach-detail-dialog'
+import PreviewComponent from '../common/preview-component'
+import { downloadUrl } from '@/api/file'
 export default {
   name: 'plan-submit',
-  components: { AttachDetailDialog },
+  components: { AttachDetailDialog, PreviewComponent },
   computed: {},
   data() {
     return {
@@ -145,7 +151,9 @@ export default {
       dataList: [],
       dataListLoading: false,
       expandedRowKeys: [],
-      treeMap: new Map()
+      treeMap: new Map(),
+      previewVisible: false,
+      downloadUrl: downloadUrl
     }
   },
   created() { },
@@ -188,6 +196,23 @@ export default {
         this.$refs.attachDetail.init(attachList)
       })
     },
+    // 过滤图片附件
+    getImageList(attachList) {
+      if (!attachList || !Array.isArray(attachList)) return []
+      return attachList.filter(item => this.isImage(item && item.fileName))
+    },
+    isImage(fileName) {
+      if (!fileName || typeof fileName !== 'string') return false
+      const ext = fileName.split('.').pop().toLowerCase()
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
+    },
+    // 预览大图（或其他文件走新窗口）
+    previewFile(fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview && this.$refs.preview.init(fileName, url)
+      })
+    },
     // 表单提交
     dataFormSubmit() {
       this.$refs['dataForm'].validate((valid) => {
@@ -268,4 +293,21 @@ export default {
   cursor: pointer;
   color: #3e8ef7;
 }
+
+/* 缩略图样式 */
+.thumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+}
+
+.thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  cursor: pointer;
+}
 </style>

src/views/modules/tech/project-product-detail.vue

@@ -52,11 +52,13 @@
         <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
           :show-tooltip-when-overflow="true" label="版本号">
         </el-table-column>
-        <el-table-column prop="attachList2" header-align="center" align="center" min-width="140"
+        <el-table-column prop="attachList2" header-align="center" align="center" min-width="100"
           :show-tooltip-when-overflow="true" label="简图">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.attachList2 || scope.row.attachList2.length === 0" type="text" size="small"
-              @click="attachDetail(scope.row.attachList2)">查看</el-button>
+            <div class="thumb-list" v-if="getImageList(scope.row.attachList2).length">
+              <img v-for="(img, idx) in getImageList(scope.row.attachList2)" :key="(img.url || '') + idx" class="thumb"
+                :src="downloadUrl + img.url" :alt="img.fileName" @click="previewFile(img.fileName, img.url)" />
+            </div>
           </template>
         </el-table-column>
         <el-table-column prop="productSpec" header-align="center" align="center" min-width="140"
@@ -105,15 +107,18 @@
     </span>
 
     <attach-detail-dialog ref="attachDetail" />
+    <preview-component v-if="previewVisible" ref="preview" />
   </div>
 </template>
 
 <script>
 import UserComponent from '../common/user-component'
 import AttachDetailDialog from '../common/attach-detail-dialog'
+import PreviewComponent from '../common/preview-component'
+import { downloadUrl } from '@/api/file'
 export default {
   name: 'project-product-detail',
-  components: { UserComponent, AttachDetailDialog },
+  components: { UserComponent, AttachDetailDialog, PreviewComponent },
   computed: {},
   data() {
     return {
@@ -125,6 +130,8 @@ export default {
       dataRule: {},
       dataList: [],
       dataListLoading: false,
+      previewVisible: false,
+      downloadUrl: downloadUrl
 
     }
   },
@@ -162,6 +169,23 @@ export default {
         this.$refs.attachDetail.init(attachList)
       })
     },
+    // 过滤图片附件
+    getImageList(attachList) {
+      if (!attachList || !Array.isArray(attachList)) return []
+      return attachList.filter(item => this.isImage(item && item.fileName))
+    },
+    isImage(fileName) {
+      if (!fileName || typeof fileName !== 'string') return false
+      const ext = fileName.split('.').pop().toLowerCase()
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
+    },
+    // 预览大图
+    previewFile(fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview && this.$refs.preview.init(fileName, url)
+      })
+    },
     // 表单提交
     dataFormSubmit() {
       this.$refs['dataForm'].validate((valid) => {
@@ -221,4 +245,21 @@ export default {
   cursor: pointer;
   color: #3e8ef7;
 }
+
+/* 缩略图样式 */
+.thumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+}
+
+.thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  cursor: pointer;
+}
 </style>

src/views/modules/tech/project-tech-submit.vue

@@ -39,11 +39,13 @@
         <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
           :show-tooltip-when-overflow="true" label="版本号">
         </el-table-column>
-        <el-table-column prop="attachList2" header-align="center" align="center" min-width="140"
+        <el-table-column prop="attachList2" header-align="center" align="center" min-width="100"
           :show-tooltip-when-overflow="true" label="简图">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.attachList2 || scope.row.attachList2.length === 0" type="text" size="small"
-              @click="attachDetail(scope.row.attachList2)">查看</el-button>
+            <div class="thumb-list" v-if="getImageList(scope.row.attachList2).length">
+              <img v-for="(img, idx) in getImageList(scope.row.attachList2)" :key="(img.url || '') + idx" class="thumb"
+                :src="downloadUrl + img.url" :alt="img.fileName" @click="previewFile(img.fileName, img.url)" />
+            </div>
           </template>
         </el-table-column>
         <el-table-column prop="unit" header-align="center" align="center" min-width="140"
@@ -97,15 +99,18 @@
     </span>
 
     <attach-detail-dialog ref="attachDetail" />
+    <preview-component v-if="previewVisible" ref="preview" />
 
   </div>
 </template>
 
 <script>
 import AttachDetailDialog from '../common/attach-detail-dialog'
+import PreviewComponent from '../common/preview-component'
+import { downloadUrl } from '@/api/file'
 export default {
   name: 'plan-submit',
-  components: { AttachDetailDialog },
+  components: { AttachDetailDialog, PreviewComponent },
   computed: {},
   data() {
     return {
@@ -121,7 +126,9 @@ export default {
       },
       dataList: [],
       dataListLoading: false,
-      craftsAddOrDetailVisible: false
+      craftsAddOrDetailVisible: false,
+      previewVisible: false,
+      downloadUrl: downloadUrl
     }
   },
   created() { },
@@ -163,6 +170,23 @@ export default {
         this.$refs.attachDetail.init(attachList)
       })
     },
+    // 过滤图片附件
+    getImageList(attachList) {
+      if (!attachList || !Array.isArray(attachList)) return []
+      return attachList.filter(item => this.isImage(item && item.fileName))
+    },
+    isImage(fileName) {
+      if (!fileName || typeof fileName !== 'string') return false
+      const ext = fileName.split('.').pop().toLowerCase()
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
+    },
+    // 预览大图
+    previewFile(fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview && this.$refs.preview.init(fileName, url)
+      })
+    },
     // 表单提交
     dataFormSubmit() {
       this.$refs['dataForm'].validate((valid) => {
@@ -220,4 +244,21 @@ export default {
   cursor: pointer;
   color: #3e8ef7;
 }
+
+/* 缩略图样式 */
+.thumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+}
+
+.thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  cursor: pointer;
+}
 </style>