调整附件显示

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

@@ -0,0 +1,48 @@
+<template>
+    <section>
+      <!-- 图片预览 -->
+      <el-dialog title="图片预览" :append-to-body="true" :visible.sync="previewVisible" width="50%">
+        <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
+      </el-dialog>
+    </section>
+</template>
+
+<script>
+  import { downloadUrl } from '@/api/file'
+  import {getFileExt} from '@/api/util'
+  export default {
+    name: 'preview-component',
+    data () {
+      return {
+        previewPath: '',
+        previewName: '',
+        previewVisible: false
+      }
+    },
+    methods: {
+      init (fileName, url) {
+        this.handlePreview(fileName, url)
+      },
+      // 预览
+      handlePreview (fileName, url) {
+        if (!fileName || !url) {
+          this.$message.error('没有可预览的文件！')
+          return
+        }
+        let ext = getFileExt(fileName)
+        if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
+          this.previewPath = downloadUrl + url
+          this.previewName = fileName
+          this.previewVisible = true
+        } else {
+          // 弹出新页面显示下载文件
+          window.open(downloadUrl + url, '_blank')
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/cus/communicate.vue

@@ -71,7 +71,10 @@
         min-width="200"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
+          <div v-for="(item, index) in scope.row.attachList">
+            <span v-if="index > 0">,</span>
+            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+          </div>
         </template>
       </el-table-column>
       <el-table-column
@@ -107,6 +110,8 @@
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     <detail v-if="detailVisible" ref="detail"/>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
   </div>
 </template>
 
@@ -115,14 +120,18 @@
   import Detail from './communicate-detail'
   import { getDictList } from '@/api/dict'
   import { downloadUrl } from '@/api/file'
+  import PreviewComponent from '../common/preview-component'
   export default {
     name: 'communicate',
     components: {
-      AddOrUpdate, Detail
+      PreviewComponent,
+      AddOrUpdate,
+      Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
+        previewVisible: false,
         detailVisible: false,
         dataForm: {
           cusName: ''
@@ -238,6 +247,13 @@
         this.$nextTick(() => {
           this.$refs.detail.init(id)
         })
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
       }
     }
   }

src/views/modules/msg-center/announcement-detail.vue

@@ -1,44 +1,53 @@
 <template>
-  <el-dialog
-    title="查看"
-    width="60%"
-    :close-on-click-modal="false"
-    @close="closeDialog"
-    :visible.sync="visible">
-    <div style="margin-left: 20px;margin-right: 20px">
-      <e-desc title="基本信息" column="2">
-        <e-desc-item label="公告主题名称">{{dataForm.title}}</e-desc-item>
-        <e-desc-item label="级别">{{dataForm.levelName}}</e-desc-item>
-        <e-desc-item span="2" style="min-height: 80px" label="公告内容">{{dataForm.content}}</e-desc-item>
-      </e-desc>
-      <e-desc title="详细信息" column="2">
-        <e-desc-item span="2" label="附件">
-          <a v-for="(item, index) in dataForm.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
-        </e-desc-item>
-        <e-desc-item span="2" style="min-height: 80px" label="备注说明">{{dataForm.notes}}</e-desc-item>
-      </e-desc>
-    </div>
-    <span slot="footer" class="dialog-footer">
+  <div>
+    <el-dialog
+      title="查看"
+      width="60%"
+      :close-on-click-modal="false"
+      @close="closeDialog"
+      :visible.sync="visible">
+      <div style="margin-left: 20px;margin-right: 20px">
+        <e-desc title="基本信息" column="2">
+          <e-desc-item label="公告主题名称">{{dataForm.title}}</e-desc-item>
+          <e-desc-item label="级别">{{dataForm.levelName}}</e-desc-item>
+          <e-desc-item span="2" style="min-height: 80px" label="公告内容">{{dataForm.content}}</e-desc-item>
+        </e-desc>
+        <e-desc title="详细信息" column="2">
+          <e-desc-item span="2" label="附件">
+            <div v-for="(item, index) in dataForm.attachList">
+              <span v-if="index > 0">,</span>
+              <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+            </div>
+          </e-desc-item>
+          <e-desc-item span="2" style="min-height: 80px" label="备注说明">{{dataForm.notes}}</e-desc-item>
+        </e-desc>
+      </div>
+      <span slot="footer" class="dialog-footer">
       <el-button @click="closeDialog">返回</el-button>
     </span>
-  </el-dialog>
+    </el-dialog>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
+  </div>
 </template>
 
 <script>
   import EDesc from '../common/e-desc'
   import EDescItem from '../common/e-desc-item'
   import { getAnnouncementInfo } from '@/api/msg'
-  import { downloadUrl } from '@/api/file'
+  import PreviewComponent from '../common/preview-component'
   export default {
     name: 'announcement-detail',
     components: {
-      EDesc, EDescItem
+      PreviewComponent,
+      EDesc,
+      EDescItem
     },
     data () {
       return {
         visible: false,
+        previewVisible: false,
         fileList: [],
-        downloadUrl: downloadUrl,
         id: 0,
         dataForm: {
           attachList: []
@@ -63,6 +72,13 @@
       closeDialog () {
         this.visible = false
         this.$emit('refreshDataList')
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
       }
     }
   }

src/views/modules/msg-center/announcement.vue

@@ -50,7 +50,10 @@
         min-width="200"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
+          <div v-for="(item, index) in scope.row.attachList">
+            <span v-if="index > 0">,</span>
+            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+          </div>
         </template>
       </el-table-column>
       <el-table-column
@@ -106,6 +109,8 @@
     </el-pagination>
     <!-- 弹窗,详情 -->
     <detail v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getAnnouncementList"></detail>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
   </div>
 </template>
 
@@ -115,9 +120,11 @@
   import { getCusList } from '@/api/cus'
   import { downloadUrl } from '@/api/file'
   import {readNotice} from '@/utils/msg'
+  import PreviewComponent from '../common/preview-component'
   export default {
     name: 'announcement',
     components: {
+      PreviewComponent,
       Detail
     },
     created () {
@@ -142,6 +149,7 @@
     data () {
       return {
         addOrUpdateVisible: false,
+        previewVisible: false,
         dataForm: {},
         dataList: [],
         pageIndex: 1,
@@ -223,11 +231,17 @@
         if (row.noticeId) {
           readNotice(this, row.noticeId)
         }
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
       }
     }
   }
 </script>
 
 <style scoped>
-
 </style>

src/views/modules/notice/notice.vue

@@ -59,7 +59,10 @@
         min-width="200"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attaches" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
+          <div v-for="(item, index) in scope.row.attaches">
+            <span v-if="index > 0">,</span>
+            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+          </div>
         </template>
       </el-table-column>
       <el-table-column
@@ -126,6 +129,8 @@
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     <detail v-if="detailVisible" ref="detail"/>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
   </div>
 </template>
 
@@ -133,15 +138,19 @@
   import AddOrUpdate from './notice-add-or-update'
   import Detail from './notice-detail'
   import { downloadUrl } from '@/api/file'
+  import PreviewComponent from '../common/preview-component'
   export default {
     name: 'notice',
     components: {
-      AddOrUpdate, Detail
+      PreviewComponent,
+      AddOrUpdate,
+      Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
         detailVisible: false,
+        previewVisible: false,
         dataForm: {
           cusName: ''
         },
@@ -242,6 +251,13 @@
             }
           })
         }).catch(() => {})
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
       }
     }
   }

src/views/modules/order/dispatch.vue

@@ -67,7 +67,10 @@
         min-width="200"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
+          <div v-for="(item, index) in scope.row.attachList">
+            <span v-if="index > 0">,</span>
+            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -82,19 +85,24 @@
     </el-pagination>
 <!--    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
 <!--    <detail v-if="detailVisible" ref="detail"/>-->
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
   </div>
 </template>
 
 <script>
 import { getDispatchList } from '@/api/sale'
+import PreviewComponent from '../common/preview-component'
 export default {
     // 发货管理
   name: 'dispatch',
+  components: {PreviewComponent},
   created () {
     this.queryData()
   },
   data () {
     return {
+      previewVisible: false,
       dataForm: {},
       dataList: [],
       pageIndex: 1,
@@ -143,6 +151,13 @@ export default {
       // 多选
     selectionChangeHandle (val) {
       this.dataListSelections = val
+    },
+    // 预览
+    previewFile (fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview.init(fileName, url)
+      })
     }
   }
 }

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

@@ -16,13 +16,18 @@
 <!--          </upload-component>-->
           <e-desc :title="item.drawingName" column="3" style="margin-bottom: 20px">
             <e-desc-item label="附件" span="2">
-              <a v-for="(att, i) in item.attachList" type="primary" :href="downloadUrl + att.url" target="_blank">{{ att.url }}</a>
+              <div v-for="(item, index) in item.attachList">
+                <span v-if="index > 0">,</span>
+                <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+              </div>
             </e-desc-item>
           </e-desc>
         </template>
         <div></div>
       </div>
     </el-dialog>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
   </div>
 </template>
 
@@ -31,9 +36,11 @@
   import EDescItem from '../common/e-desc-item'
   import { downloadUrl } from '@/api/file'
   import UploadComponent from '../common/upload-component'
+  import PreviewComponent from '../common/preview-component'
   export default {
     name: 'product-draw-detail',
     components: {
+      PreviewComponent,
       UploadComponent,
       EDesc,
       EDescItem
@@ -41,6 +48,7 @@
     data () {
       return {
         visible: false,
+        previewVisible: false,
         dataList: [],
         downloadUrl: downloadUrl
       }
@@ -49,6 +57,13 @@
       async init (drawList) {
         this.visible = true
         this.dataList = drawList
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
       }
     }
   }

src/views/modules/works/work.vue

@@ -83,11 +83,13 @@
       <el-table-column
         header-align="center"
         align="center"
-        min-width="160"
-        :show-tooltip-when-overflow="true"
+        min-width="200"
         label="工序附件">
         <template slot-scope="scope">
-          <li v-for="(item, index) in scope.row.attachList" :key="index"><a @click="previewFile(item.url)">{{item.fileName}}</a></li>
+          <div v-for="(item, index) in scope.row.attachList">
+            <span v-if="index > 0">,</span>
+            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+          </div>
         </template>
       </el-table-column>
       <el-table-column
@@ -188,6 +190,8 @@
         <el-button type="primary" @click="damageSubmit">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
   </div>
 </template>
 
@@ -195,12 +199,13 @@
 import { getTaskList, startTask, transferTask, completeTask, checkTask, damageTask } from '@/api/task'
 import { workTypeMasterList } from '@/api/worktype'
 import templateList from '../warehouse/template-list'
-import { downloadUrl } from '@/api/file'
+import PreviewComponent from '../common/preview-component'
 export default {
-  components: { templateList },
+  components: { PreviewComponent, templateList },
   name: 'work',
   data () {
     return {
+      previewVisible: false,
       addOrUpdateVisible: false,
       dataForm: {
         state: '1'
@@ -476,12 +481,14 @@ export default {
         }
       })
     },
-      // 预览
-    previewFile (url) {
-        // 弹出新页面显示下载文件
-      window.open(downloadUrl + url, '_blank')
+    // 预览
+    previewFile (fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview.init(fileName, url)
+      })
     },
-      // 计算进度百分比，返回0到100的整数
+    // 计算进度百分比，返回0到100的整数
     getPercentage (completeNum, totalNum) {
       completeNum = completeNum == null ? 0 : parseInt(completeNum)
       totalNum = totalNum == null ? 100 : parseInt(totalNum)
@@ -496,5 +503,4 @@ export default {
 </script>
 
 <style scoped>
-li {list-style-type:none;}
 </style>