工程管理图片预览

ah-jjzhgd-web/src/api/basic/project.js

@@ -146,3 +146,12 @@ export function getTowerList(data) {
   })
 }
 
+// 工程图片预览
+export function getViewImageList(data) {
+  return request({
+    url: '/system/sys/pro/viewProFile',
+    method: 'get',
+    params: data
+  })
+}
+

ah-jjzhgd-web/src/permission.js

@@ -30,7 +30,7 @@ router.beforeEach(async(to, from, next) => {
       if (roles?.length > 0) {
         next()
       } else {
-        console.log('refresh---')
+        // console.log('refresh---')
         await store.dispatch('user/setUserRoles', ['admin'])
         const accessRoutes = await store.dispatch('permission/generateRoutes', store.getters.roles)
         router.addRoutes(accessRoutes)

ah-jjzhgd-web/src/views/basic/project/index.vue

@@ -76,8 +76,30 @@
       <el-table-column prop="planEndTime" label="计划结束时间" align="center" />
       <el-table-column prop="endTime" label="实际结束时间" align="center" />
       <el-table-column prop="proCost" label="项目总成本" align="center" />
-      <el-table-column prop="proFileNum" label="平面图" align="center" />
-      <el-table-column prop="proImgFileNum" label="图片" align="center" />
+      <el-table-column prop="proFileNum" label="平面图" align="center">
+        <template slot-scope="{ row, $index }">
+          <el-button type="text" size="mini" @click="handleViewImage(row, $index, '2')">{{ row.proFileNum }}</el-button>
+          <el-image
+            v-show="false"
+            ref="imageView"
+            style="width: 0; height: 0;"
+            :src="null"
+            :preview-src-list="currentImageViewList"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="proImgFileNum" label="图片" align="center">
+        <template slot-scope="{ row, $index }">
+          <el-button type="text" size="mini" @click="handleViewImage(row, $index, '1')">{{ row.proImgFileNum }}</el-button>
+          <el-image
+            v-show="false"
+            ref="imageView2"
+            style="width: 0; height: 0;"
+            :src="null"
+            :preview-src-list="currentImageViewList"
+          />
+        </template>
+      </el-table-column>
       <el-table-column prop="proBrief" label="工程简介" align="center" :show-overflow-tooltip="true" />
       <el-table-column prop="status" label="状态" align="center" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
@@ -302,7 +324,7 @@ import {
   deleteProjectItem,
   downloadProjectTemplate,
   exportProject, getBuildList, getProjectItemDetail,
-  getProjectList,
+  getProjectList, getViewImageList,
   importProject, updateProjectItem
 } from '@/api/basic/project'
 
@@ -349,6 +371,7 @@ export default {
       imageList: [],
       imageList2: [],
       delFiles: [],
+      currentImageViewList: [],
       imageUploadLimit: 1,
       imageUploadLimit2: 5,
       tableKey: 0,
@@ -672,6 +695,21 @@ export default {
     handleClosedCompleteModal() {
       this.$refs['completeForm'].resetFields()
       this.completeForm = _.cloneDeep(defaultCompleteTmp)
+    },
+    // 图片预览
+    handleViewImage(row, index, type) {
+      const reqData = {
+        proId: row.proId,
+        fileType: type
+      }
+      const refName = type === '1' ? 'imageView2' : 'imageView'
+      getViewImageList(reqData).then(res => {
+        const { data } = res
+        this.currentImageViewList = data.map(item => {
+          return item.base64Url
+        })
+        this.$refs[refName].showViewer = true
+      })
     }
   }
 }