first commit

target/classes/static/components/plugins/sysFilePreview/index.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>