修改简图显示方式

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

@@ -48,10 +48,13 @@
         <el-table-column header-align="center" align="center" min-width="100" :show-tooltip-when-overflow="true"
           label="简图">
           <template slot-scope="scope">
-            <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>
+            <el-button v-if="scope.row.attachList2 && scope.row.attachList2.length" type="text" size="small"
+              @click="openImagePreview(scope.row.attachList2)">
+              查看({{ scope.row.attachList2.length }})
+            </el-button>
+            <el-button v-else type="text" size="small" disabled>
+              查看(0)
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column prop="materials" header-align="center" align="center" min-width="140"
@@ -135,6 +138,7 @@
     <!-- 图片预览组件（使用 v-viewer 打开大图） -->
     <preview-component v-if="previewVisible" ref="preview" />
     <project-draw-preview ref="drawPreview" />
+    <image-preview ref="imagePreview" />
   </div>
 </template>
 
@@ -143,9 +147,12 @@ import AttachDetailDialog from '../common/attach-detail-dialog'
 import PreviewComponent from '../common/preview-component'
 import ProjectDrawPreview from '../tech/product-draw-detail-dialog.vue'
 import { downloadUrl } from '@/api/file'
+import ImagePreview from '@/views/modules/common/image-preview.vue'
+import ImageViewerMixin from '@/views/modules/common/mixins/image-viewer-mixin'
 export default {
   name: 'plan-submit',
-  components: { AttachDetailDialog, PreviewComponent, ProjectDrawPreview },
+  mixins: [ImageViewerMixin],
+  components: { AttachDetailDialog, PreviewComponent, ProjectDrawPreview, ImagePreview },
   computed: {},
   data() {
     return {

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

@@ -42,14 +42,13 @@
         </el-table-column>
         <el-table-column header-align="center" align="center" min-width="50" label="图纸文件">
           <template slot-scope="scope">
-            <span v-if="scope.row.attachList && scope.row.attachList.length">
-              <el-link type="primary" @click="openImagePreview(scope.row.attachList)" style="cursor: pointer;">
-                查看({{ scope.row.attachList.length }})
-              </el-link>
-            </span>
-            <span v-else style="color:#c0c4cc; cursor: not-allowed;">
+            <el-button v-if="scope.row.attachList && scope.row.attachList.length" type="text" size="small"
+              @click="openImagePreview(scope.row.attachList)">
+              查看({{ scope.row.attachList.length }})
+            </el-button>
+            <el-button v-else type="text" size="small" disabled>
               查看(0)
-            </span>
+            </el-button>
           </template>
         </el-table-column>
         <!-- <el-table-column

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

@@ -61,10 +61,13 @@
         <el-table-column prop="attachList2" header-align="center" align="center" min-width="100"
           :show-tooltip-when-overflow="true" label="简图">
           <template slot-scope="scope">
-            <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>
+            <el-button v-if="scope.row.attachList2 && scope.row.attachList2.length" type="text" size="small"
+              @click="openImagePreview(scope.row.attachList2)">
+              查看({{ scope.row.attachList2.length }})
+            </el-button>
+            <el-button v-else type="text" size="small" disabled>
+              查看(0)
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column prop="productSpec" header-align="center" align="center" min-width="140"
@@ -115,6 +118,7 @@
     <attach-detail-dialog ref="attachDetail" />
     <preview-component v-if="previewVisible" ref="preview" />
     <project-draw-preview ref="drawPreview" />
+    <image-preview ref="imagePreview" />
   </div>
 </template>
 
@@ -124,9 +128,12 @@ import AttachDetailDialog from '../common/attach-detail-dialog'
 import PreviewComponent from '../common/preview-component'
 import ProjectDrawPreview from './product-draw-detail-dialog.vue'
 import { downloadUrl } from '@/api/file'
+import ImagePreview from '@/views/modules/common/image-preview.vue'
+import ImageViewerMixin from '@/views/modules/common/mixins/image-viewer-mixin'
 export default {
+  mixins: [ImageViewerMixin],
   name: 'project-product-detail',
-  components: { UserComponent, AttachDetailDialog, PreviewComponent, ProjectDrawPreview },
+  components: { UserComponent, AttachDetailDialog, PreviewComponent, ProjectDrawPreview, ImagePreview },
   computed: {},
   data() {
     return {
@@ -139,8 +146,7 @@ export default {
       dataList: [],
       dataListLoading: false,
       previewVisible: false,
-      downloadUrl: downloadUrl
-
+      downloadUrl: downloadUrl,
     }
   },
   created() { },

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

@@ -42,11 +42,20 @@
         <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 v-if="scope.row.attachList2 && scope.row.attachList2.length" type="text" size="small"
+              @click="openImagePreview(scope.row.attachList2)">
+              查看({{ scope.row.attachList2.length }})
+            </el-button>
+            <el-button v-else type="text" size="small" disabled>
+              查看(0)
+            </el-button>
+          </template>
+          <!-- <template slot-scope="scope">
             <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>
+          </template> -->
         </el-table-column>
         <el-table-column prop="materials" header-align="center" align="center" min-width="140"
           :show-tooltip-when-overflow="true" label="材料">
@@ -106,7 +115,7 @@
 
     <attach-detail-dialog ref="attachDetail" />
     <preview-component v-if="previewVisible" ref="preview" />
-
+    <image-preview ref="imagePreview" />
   </div>
 </template>
 
@@ -114,9 +123,12 @@
 import AttachDetailDialog from '../common/attach-detail-dialog'
 import PreviewComponent from '../common/preview-component'
 import { downloadUrl } from '@/api/file'
+import ImagePreview from '@/views/modules/common/image-preview.vue'
+import ImageViewerMixin from '@/views/modules/common/mixins/image-viewer-mixin'
 export default {
   name: 'plan-submit',
-  components: { AttachDetailDialog, PreviewComponent },
+  mixins: [ImageViewerMixin],
+  components: { AttachDetailDialog, PreviewComponent, ImagePreview },
   computed: {},
   data() {
     return {