commit

src/main/resources/static/components/plugins/sysFilePreview/index.vue

@@ -1,20 +1,20 @@
 <template>
     <div>
         <div class="file-preview-container" v-if="fileList && fileList.length > 0">
-            <div class="file-item" title="点击查看" v-for="item in fileList" :key="item.id">
+            <div class="file-item" title="点击查看" v-for="(item, index) in fileList" :key="item.id">
                 <el-image
                     v-if="item.suffix === 'jpg' || item.suffix === 'png' || item.suffix === 'jpeg' || item.suffix === 'gif'"
                     :src="item.thumbnail"
                     :fit="'cover'"
                     :style="{ width: '100%', height: '100%' }"
-                    @click.stop="$commonUtil.previewFile(item)"
+                    @click.stop="onPreView(item, index)"
                 ></el-image>
 
                 <el-image
                     v-else
                     :src="$commonUtil.getFileItemShowIcon(item.suffix)"
                     :fit="'cover'"
-                    @click.stop="$commonUtil.previewFile(item)"
+                    @click.stop="onPreView(item, index)"
                     :style="{ width: '100%', height: '100%' }"
                 ></el-image>
 
@@ -25,6 +25,59 @@
             </div>
         </div>
         <el-empty v-else description="暂无" :image-size="60"></el-empty>
+
+      <el-drawer class="file-preview-drawer" title="附件查看" size="78%" :visible.sync="fileDialog" :append-to-body="true">
+        <div class="file-preview-title">附件数量：（共{{ fileList.length }}个）</div>
+        <el-row>
+          <el-col :span="5">
+            <el-menu class="file-preview-menu" :default-active="defaultActive + ''" @select="menuSelect">
+              <el-menu-item v-for="(file, index) in fileList" :key="index" :index="index + ''">
+                <el-image
+                  :src="$commonUtil.getFileItemShowIcon(file.suffix)"
+                  fit="cover"
+                  :style="{ width: '30px', height: '30px' }"
+                ></el-image>
+                <span slot="title">{{ file.name }}</span>
+              </el-menu-item>
+            </el-menu>
+          </el-col>
+          <el-col :span="19" class="preview-content-col">
+            <div class="preview-content-wrapper">
+              <div class="preview-main-content">
+                <el-image
+                  v-if="file?.suffix === 'jpg' || file?.suffix === 'png' || file?.suffix === 'jpeg' || file?.suffix === 'gif'"
+                  :src="file.downloadPath"
+                  :fit="'cover'"
+                  @click.stop="$commonUtil.previewFile(file)"
+                ></el-image>
+                <div v-loading="officeLoading" element-loading-text="拼命加载中" style="height: 100%">
+                  <iframe v-if="['doc', 'docx', 'xls', 'xlsx'].includes(file?.suffix)"
+                          frameborder="0"
+                          width="100%"
+                          height="100%"
+                          @load="officeLoading = false"
+                          :src="'/assets/platform/plugins/pdfJs/web/viewer.html?file=/platform/sys/file/convertPDF?id=' + file.id"
+                  ></iframe>
+                  <iframe v-if="['pdf'].includes(file?.suffix)"
+                          frameborder="0"
+                          width="100%"
+                          height="100%"
+                          @load="officeLoading = false"
+                          :src="'/assets/platform/plugins/pdfJs/web/viewer.html?file=' + file.downloadPath"
+                  ></iframe>
+                </div>
+              </div>
+              <div class="preview-footer">
+                <el-button type="primary" size="small" @click="previous">上一个</el-button>
+                <el-button type="primary" size="small" @click="next">下一个</el-button>
+                <el-button type="primary" size="small" @click="fileDialog = false">关闭</el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+
+      </el-drawer>
+
     </div>
 </template>
 
@@ -57,10 +110,43 @@ module.exports = {
     },
     data() {
         return {
-            fileList: []
+            fileList: [],
+          fileDialog: false,
+          defaultActive: 0,
+          file: {},
+          officeLoading: true,
         }
     },
     methods: {
+      next() {
+        this.defaultActive = Number(this.defaultActive)
+        if(this.defaultActive === this.fileList.length - 1) {
+          this.$message.error('已经是最后一个附件了')
+          return
+        }
+        this.defaultActive = this.defaultActive + 1
+        this.file = this.fileList[this.defaultActive]
+      },
+      previous() {
+        this.defaultActive = Number(this.defaultActive)
+        if(this.defaultActive === 0) {
+          this.$message.error('已经是第一个附件了')
+          return
+        }
+        this.defaultActive = this.defaultActive - 1
+        this.file = this.fileList[this.defaultActive]
+      },
+      menuSelect(index) {
+        this.defaultActive = Number(this.defaultActive)
+        this.defaultActive = index
+        this.file = this.fileList[index]
+        this.officeLoading = true
+      },
+      onPreView(item, index) {
+        this.file = item
+        this.defaultActive = index
+        this.fileDialog = true
+      },
         buildEchoFileObject(val) {
             let ids = []
             if (this.complete_result) {
@@ -111,6 +197,68 @@ module.exports = {
 }
 </script>
 
+<style>
+.file-preview-drawer .el-row {
+  margin: 0;
+  height: calc(100vh - 43px - 32px - 20px - 10px);
+}
+.file-preview-drawer .el-col {
+  height: 100%;
+  padding: 0;
+}
+.file-preview-title {
+  padding-left: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.file-preview-menu {
+  height: 100%;
+  padding-left: 10px;
+}
+.file-preview-menu .el-menu-item,
+.file-preview-menu .el-submenu__title {
+  height: 40px;
+  line-height: 40px;
+}
+.file-preview-drawer iframe {
+  vertical-align: bottom;
+  display: block;
+}
+
+.preview-content-col {
+  /*padding: 0 20px 10px;*/
+}
+.preview-content-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.preview-main-content {
+  flex: 1;
+  overflow: auto;
+  margin: 0 10px 10px;
+  box-sizing: border-box;
+}
+.preview-footer {
+  line-height: 60px;
+  padding: 0 10px;
+  border-top: 1px solid #e6e6e6;
+  background-color: white;
+  text-align: right;
+  box-sizing: border-box;
+  /* position: sticky;
+  bottom: 0; */
+}
+.file-preview-drawer .el-menu-item.is-active {
+  font-weight: bold;
+}
+.file-preview-drawer .el-drawer__body {
+  padding: 0;
+}
+</style>
+
 <style scoped>
 .file-preview-container {
     position: relative;

src/main/resources/static/components/plugins/sysFilePreview/index1.vue

@@ -0,0 +1,169 @@
+<template>
+    <div>
+        <div class="file-preview-container" v-if="fileList && fileList.length > 0">
+            <div class="file-item" title="点击查看" v-for="item in fileList" :key="item.id">
+                <el-image
+                    v-if="item.suffix === 'jpg' || item.suffix === 'png' || item.suffix === 'jpeg' || item.suffix === 'gif'"
+                    :src="item.thumbnail"
+                    :fit="'cover'"
+                    :style="{ width: '100%', height: '100%' }"
+                    @click.stop="$commonUtil.previewFile(item)"
+                ></el-image>
+
+                <el-image
+                    v-else
+                    :src="$commonUtil.getFileItemShowIcon(item.suffix)"
+                    :fit="'cover'"
+                    @click.stop="$commonUtil.previewFile(item)"
+                    :style="{ width: '100%', height: '100%' }"
+                ></el-image>
+
+                <div class="file-download" title="点击下载" @click="$downLoad(item.downloadPath)">
+                    <i class="el-icon-download"></i>
+                    {{ item.name }}
+                </div>
+            </div>
+        </div>
+        <el-empty v-else description="暂无" :image-size="60"></el-empty>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: "sysFilePreview",
+    props: {
+        files: {
+            type: [String, Array],
+            default: undefined,
+            required: false
+        },
+        complete_result: {
+            type: Boolean,
+            default: false,
+            required: false
+        }
+    },
+    watch: {
+        files: {
+            handler(val) {
+                if (val) {
+                    this.buildEchoFileObject(val)
+                } else {
+                    this.fileList = []
+                }
+            },
+            immediate: true
+        }
+    },
+    data() {
+        return {
+            fileList: []
+        }
+    },
+    methods: {
+        buildEchoFileObject(val) {
+            let ids = []
+            if (this.complete_result) {
+                if (Array.isArray(val)) {
+                    ids = val.map((item) => {
+                        if (item.response.data.includes("=")) {
+                            return item?.response?.data.substring(item?.response?.data.lastIndexOf("=") + 1)
+                        } else {
+                            return item?.response?.data
+                        }
+                    })
+                } else {
+                    try {
+                        ids = JSON.parse(val).map((item) => {
+                            if (item.response.data.includes("=")) {
+                                return item?.response?.data.substring(item?.response?.data.lastIndexOf("=") + 1)
+                            } else {
+                                return item?.response?.data
+                            }
+                        })
+                    } catch (err) {
+                        this.fileList = []
+                    }
+                }
+            } else {
+                //那就是链接 没有直接存id的吧。。
+                if (Array.isArray(val)) {
+                    ids = val.map((item) => {
+                        return item.substring(item.lastIndexOf("=") + 1)
+                    })
+                } else {
+                    ids = val.split(",").map((item) => {
+                        return item.substring(item.lastIndexOf("=") + 1)
+                    })
+                }
+            }
+            this.requestFullFile(ids)
+        },
+
+        requestFullFile(ids) {
+            this.$axios.post("/platform/sys/file/previewFileData", { ids: JSON.stringify(ids) }).then((res) => {
+                if (res.code === 0) {
+                    this.fileList = res.data
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+.file-preview-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 10px;
+}
+
+.file-preview-container .file-item {
+    width: 118px;
+    height: 118px;
+    position: relative;
+    transition: all 500ms;
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: center;
+    column-gap: 15px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.file-preview-container .file-item:hover {
+    background: rgb(230, 230, 230);
+}
+
+.file-preview-container .file-item .el-image {
+    width: 90px !important;
+    height: 100%;
+    transform: translateY(10px);
+}
+
+.file-preview-container .file-item .file-download {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: white;
+    background-color: rgb(160, 160, 160);
+    border-radius: 2px;
+    opacity: 0.95;
+}
+
+.el-empty {
+    padding: 0;
+}
+</style>