增加附件图片点击查看看大图功能/附件下载功能

src/views/holding/holding0_DiaEdit.vue

@@ -1,5 +1,12 @@
 <template>
   <el-dialog title="编辑藏品" :visible="dialogFormVisible" @close="cancel()">
+    <!-- 点击查看弹出高清图片 -->
+    <div class="bigImg" v-show="bigImgShow">
+      <img :src="bigImg" alt="">
+      <div class="btnX">
+      <el-button @click="bigImgShow=false">关 闭</el-button>
+      </div>
+    </div>
     <!-- 表单内容 -->
     <el-form
       :model="ruleForm"
@@ -279,12 +286,15 @@
         </template>
       </el-table-column>
       <el-table-column prop="name" label="附件名称"> </el-table-column>
-      <el-table-column prop="updateTime" label="上传时间" width="150">
+      <el-table-column prop="updateTime" label="上传时间" width="200">
       </el-table-column>
       <el-table-column label="操作" width="150">
         <template #default='{row}'>
-          <!-- <el-button type="text">重 传</el-button> -->
-          <el-button type="text" @click="delAffix(row)">删 除</el-button>
+          <!-- 图片的查看 -->
+          <a href="javascript:;" class="mydown" @click="imgLook(row.filePath)" v-show="affixVal==='img'">查 看</a>
+          <a :href="baseURL + row.filePath" target="_blank" :download="baseURL + row.filePath" class="mydown">下 载</a>
+          <a href="javascript:;" @click="delAffix(row)" class="mydown">删 除</a>
+          <!-- <el-button type="text" @click="delAffix(row)">删 除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -322,6 +332,8 @@ export default {
   },
   data () {
     return {
+      bigImg: '',
+      bigImgShow: false,
       temp: [],
       // 服务器前缀地址
       baseURL: '',
@@ -423,6 +435,11 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    imgLook (url) {
+      this.bigImgShow = true
+      this.bigImg = this.baseURL + url
+    },
     // 点击删除附件
     delAffix (val) {
       this.$confirm('确定删除吗?', '提示', {
@@ -586,6 +603,32 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.bigImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position:fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.7);
+  &>img{
+    max-height: 80%;
+    max-width: 80%;
+  }
+  .btnX{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  .mydown {
+    color: #40a9ff;
+    margin: 4px;
+  }
 /deep/.el-upload-list__item-name{
   display: none !important;
 }

src/views/holding/holding0_Dialog.vue

@@ -1,5 +1,12 @@
 <template>
   <el-dialog title="添加藏品" :visible="dialogFormVisible" @close="cancel()">
+    <!-- 点击查看弹出高清图片 -->
+    <div class="bigImg" v-show="bigImgShow">
+      <img :src="bigImg" alt="">
+      <div class="btnX">
+      <el-button @click="bigImgShow=false">关 闭</el-button>
+      </div>
+    </div>
     <!-- 表单内容 -->
     <el-form
       :model="ruleForm"
@@ -281,12 +288,15 @@
         </template>
       </el-table-column>
       <el-table-column prop="name" label="附件名称"> </el-table-column>
-      <el-table-column prop="updateTime" label="上传时间" width="150">
+      <el-table-column prop="updateTime" label="上传时间" width="200">
       </el-table-column>
       <el-table-column label="操作" width="150">
         <template #default='{row}'>
-          <!-- <el-button type="text">重 传</el-button> -->
-          <el-button type="text" @click="delAffix(row)">删 除</el-button>
+          <!-- 图片的查看 -->
+          <a href="javascript:;" class="mydown" @click="imgLook(row.filePath)" v-show="affixVal==='img'">查 看</a>
+          <a :href="baseURL + row.filePath" target="_blank" :download="baseURL + row.filePath" class="mydown">下 载</a>
+          <a href="javascript:;" @click="delAffix(row)" class="mydown">删 除</a>
+          <!-- <el-button type="text" @click="delAffix(row)">删 除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -326,6 +336,8 @@ export default {
   },
   data () {
     return {
+      bigImg: '',
+      bigImgShow: false,
       temp: [],
       // 服务器前缀地址
       baseURL: '',
@@ -418,6 +430,11 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    imgLook (url) {
+      this.bigImgShow = true
+      this.bigImg = this.baseURL + url
+    },
     // 点击删除附件
     delAffix (val) {
       this.$confirm('确定删除吗?', '提示', {
@@ -604,6 +621,32 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.bigImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position:fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.7);
+  &>img{
+    max-height: 80%;
+    max-width: 80%;
+  }
+  .btnX{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  .mydown {
+    color: #40a9ff;
+    margin: 4px;
+  }
 /deep/.el-upload-list__item-name{
   display: none !important;
 }

src/views/holding/holding0_audit_Dia.vue

@@ -1,6 +1,13 @@
 <!--  -->
 <template>
   <el-dialog title="查看藏品" :visible="dialogFormVisible" @close="btnOK()">
+    <!-- 点击查看弹出高清图片 -->
+    <div class="bigImg" v-show="bigImgShow">
+      <img :src="bigImg" alt="">
+      <div class="btnX">
+      <el-button @click="bigImgShow=false">关 闭</el-button>
+      </div>
+    </div>
     <div class="title">
       <div :class="{ active: index === 0 }" @click="change(0)">藏品信息</div>
       <div :class="{ active: index === 1 }" @click="change(1)">附件</div>
@@ -104,6 +111,12 @@
         <el-table-column prop="name" label="附件名称" width="235">
         </el-table-column>
         <el-table-column prop="updateTime" label="上传时间"> </el-table-column>
+        <el-table-column  label="操作" width="150">
+          <template #default='{row}'>
+          <a href="javascript:;" class="mydown" @click="imgLook(row.filePath)" v-show="select==='img'">查 看</a>
+          <a :href="baseURL + row.filePath" target="_blank" :download="baseURL + row.filePath" class="mydown">下 载</a>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <el-button type="primary" class="confirm" @click="btnOK">确 定</el-button>
@@ -130,6 +143,8 @@ export default {
   },
   data () {
     return {
+      bigImg: '',
+      bigImgShow: false,
       options: [],
       baseURL: '',
       index: 0,
@@ -155,6 +170,11 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    imgLook (url) {
+      this.bigImgShow = true
+      this.bigImg = this.baseURL + url
+    },
     // 获取附件列表
     async getFileList (id, select) {
       const res = await getFileList(id, select)
@@ -192,6 +212,33 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.bigImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position:fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.7);
+  &>img{
+    max-height: 80%;
+    max-width: 80%;
+  }
+  .btnX{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  .mydown {
+    color: #40a9ff;
+    margin: 4px;
+  }
+
 .title {
   height: 32px;
   border: 1px solid #ccc;

src/views/holding/holding3_DiaEdit.vue

@@ -1,5 +1,12 @@
 <template>
   <el-dialog title="编辑藏品" :visible="dialogFormVisible" @close="cancel()">
+    <!-- 点击查看弹出高清图片 -->
+    <div class="bigImg" v-show="bigImgShow">
+      <img :src="bigImg" alt="">
+      <div class="btnX">
+      <el-button @click="bigImgShow=false">关 闭</el-button>
+      </div>
+    </div>
     <!-- 表单内容 -->
     <el-form
       :model="ruleForm"
@@ -283,8 +290,10 @@
       </el-table-column>
       <el-table-column label="操作" width="150">
         <template #default='{row}'>
-          <!-- <el-button type="text">重 传</el-button> -->
-          <el-button type="text" @click="delAffix(row)">删 除</el-button>
+          <!-- 图片的查看 -->
+          <a href="javascript:;" class="mydown" @click="imgLook(row.filePath)" v-show="affixVal==='img'">查 看</a>
+          <a :href="baseURL + row.filePath" target="_blank" :download="baseURL + row.filePath" class="mydown">下 载</a>
+          <a href="javascript:;" @click="delAffix(row)" class="mydown">删 除</a>
         </template>
       </el-table-column>
     </el-table>
@@ -323,6 +332,8 @@ export default {
   },
   data () {
     return {
+      bigImg: '',
+      bigImgShow: false,
       temp: [],
       // 服务器前缀地址
       baseURL: '',
@@ -424,6 +435,11 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    imgLook (url) {
+      this.bigImgShow = true
+      this.bigImg = this.baseURL + url
+    },
     // 点击删除附件
     delAffix (val) {
       this.$confirm('确定删除吗?', '提示', {
@@ -610,6 +626,32 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.bigImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position:fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.7);
+  &>img{
+    max-height: 80%;
+    max-width: 80%;
+  }
+  .btnX{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  .mydown {
+    color: #40a9ff;
+    margin: 4px;
+  }
 /deep/.el-upload-list__item-name{
   display: none !important;
 }

src/views/holding/holding3_look.vue

@@ -1,6 +1,14 @@
 <!--  -->
 <template>
   <div class="holding3_look">
+        <!-- 点击查看弹出高清图片 -->
+    <div class="bigImg" v-show="bigImgShow">
+      <img :src="bigImg" alt="">
+      <div class="btnX">
+      <el-button @click="bigImgShow=false">关 闭</el-button>
+      </div>
+    </div>
+
     <!-- 导出pdf的盒子，平时不显示，点击导出之后显示 -->
     <div class="myPdf" v-if="isShow">
       <div id="myPdfCon">
@@ -210,6 +218,8 @@
               </el-table-column>
               <el-table-column label="操作" width="360">
                 <template #default="{ row }">
+          <!-- 图片的查看 -->
+          <a href="javascript:;" class="mydown" @click="imgLook(row.filePath)" v-show="resource==='img'">查 看</a>
                   <a
                     :href="baseURL + row.filePath"
                     :download="baseURL + row.filePath"
@@ -248,6 +258,8 @@ export default {
   data () {
     // 这里存放数据
     return {
+      bigImg: '',
+      bigImgShow: false,
       userLogo: false,
       isShowED: false,
       rukuTxt: '',
@@ -278,6 +290,11 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    imgLook (url) {
+      this.bigImgShow = true
+      this.bigImg = this.baseURL + url
+    },
     // 点击申请编辑
     begEdit () {
       this.$refs.myDia.detailsById(this.myObj.id)
@@ -354,6 +371,32 @@ body .el-table::before {
 }
 //@import url(); 引入公共css类
 .holding3_look {
+.bigImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position:fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.7);
+  &>img{
+    max-height: 80%;
+    max-width: 80%;
+  }
+  .btnX{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  .mydown {
+    color: #40a9ff;
+    margin: 4px;
+  }
   .title {
     display: flex;
     border-bottom: 2px solid #ccc;
@@ -431,9 +474,7 @@ body .el-table::before {
       width: 1000px;
     }
   }
-  .mydown {
-    color: #40a9ff;
-  }
+
   /deep/#mytitle > span {
     font-weight: 800;
   }

src/views/holding/holding4_audit_Dia.vue

@@ -1,6 +1,13 @@
 <!--  -->
 <template>
   <el-dialog title="查看藏品" :visible="dialogFormVisible" @close="btnOK()">
+    <!-- 点击查看弹出高清图片 -->
+    <div class="bigImg" v-show="bigImgShow">
+      <img :src="bigImg" alt="">
+      <div class="btnX">
+      <el-button @click="bigImgShow=false">关 闭</el-button>
+      </div>
+    </div>
     <div class="title">
       <div :class="{ active: index === 0 }" @click="change(0)">藏品信息</div>
       <div :class="{ active: index === 1 }" @click="change(1)">附件</div>
@@ -104,6 +111,12 @@
         <el-table-column prop="name" label="附件名称" width="235">
         </el-table-column>
         <el-table-column prop="updateTime" label="上传时间"> </el-table-column>
+        <el-table-column  label="操作" width="150">
+          <template #default='{row}'>
+          <a href="javascript:;" class="mydown" @click="imgLook(row.filePath)" v-show="select==='img'">查 看</a>
+          <a :href="baseURL + row.filePath" target="_blank" :download="baseURL + row.filePath" class="mydown">下 载</a>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <el-button type="primary" class="confirm" @click="btnOK">确 定</el-button>
@@ -131,6 +144,8 @@ export default {
   },
   data () {
     return {
+      bigImg: '',
+      bigImgShow: false,
       options: [],
       baseURL: '',
       index: 0,
@@ -165,20 +180,12 @@ export default {
   },
   // 方法集合
   methods: {
-    getFujian () {
-      // this.fujianLook.forEach(v=>{
-
-      // })
+    // 点击查看
+    imgLook (url) {
+      this.bigImgShow = true
+      this.bigImg = this.baseURL + url
     },
-    // 获取附件列表
-    // async getFileList (id, select) {
-    //   const res = await getFileList(id, select)
-    //   // console.log(666, res)
-    //   this.tableData = res.data
-    //   this.tableData.forEach(v => {
-    //     v.updateTime = v.updateTime.slice(0, 10)
-    //   })
-    // },
+
     // 切换上面的信息和附件
     change (index) {
       this.index = index
@@ -220,6 +227,32 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.bigImg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position:fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(0,0,0,.7);
+  &>img{
+    max-height: 80%;
+    max-width: 80%;
+  }
+  .btnX{
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  .mydown {
+    color: #40a9ff;
+    margin: 4px;
+  }
 .title {
   height: 32px;
   border: 1px solid #ccc;