文件上传组件

src/api/base/upload.js

@@ -0,0 +1,18 @@
+import request from '@/router/axios';
+
+
+export const deleteImg = (data) => {
+    return request({
+        url: '/api/blade-client/corpequipmentarchivesfiles/remove', method: 'post', params: data
+    })
+}
+
+
+//附件上传列表删除
+export function updateListRemove(data, url) {
+    return request({
+        url: '/api' + url, method: 'post', data: {
+            id: data
+        }
+    })
+}

src/components/PreviewImage/index.vue

@@ -0,0 +1,242 @@
+<template>
+    <!--<transition name="zoom">-->
+        <div v-if="show" class="previewImage_wrapper" @wheel="handleScroll">
+            <div class="previewImage_image">
+                <img ref="previewImage_img" :src="previewImgList[currentIndex] || ''">
+            </div>
+            <div class="previewImage_close previewImage_btn" @click="closePreviewImage">&times;</div>
+            <div class="previewImage_toolbar">
+                <span class="previewImage_btn" @click="shrinkHandle">-</span>
+                <span class="previewImage_btn" @click="largeHandle">+</span>
+                <span class="previewImage_btn" @click="turnLeftHandle">↺</span>
+                <span class="previewImage_btn" @click="initImgHandle">▣</span>
+                <span class="previewImage_btn" @click="turnRightHandle">↻</span>
+            </div>
+        </div>
+    <!--</transition>-->
+</template>
+<script>
+export default {
+    props: {
+        visible: { // 显示控制
+            type: Boolean,
+            default: false
+        },
+        previewImgList: { // url数组
+            type: Array,
+            default: () => []
+        },
+        currentIndex: { // 当前图片索引
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            imgHandle: { // 图片控制
+                scale: 1,
+                rotate: 0
+            }
+        }
+    },
+    computed: {
+        // 双向绑定
+        show: {
+            get() {
+                return this.visible
+            },
+            set(newVal) {
+                this.$emit('update:visible', newVal)
+            }
+        }
+    },
+    watch: {
+        visible: { // 给body动态增加style属性，禁止背景内容的鼠标滚轮滚动
+            handler(newVal) {
+                if(newVal) {
+                    document.body.style.overflow = "hidden";
+                    this.initImgHandle() // 每次打开图片初始化
+                } else {
+                    document.body.style.overflow = "";
+                }
+            }
+        },
+    },
+    methods: {
+        // 鼠标滚轮
+        handleScroll(event) {
+            if (event.deltaY > 0) {
+                // 向下滚动事件
+                // console.log('向下滚动');
+                this.shrinkHandle()
+            } else {
+                // 向上滚动事件
+                // console.log('向上滚动');
+                this.largeHandle()
+            }
+        },
+        // 向左翻转
+        async turnLeftHandle() {
+            this.imgHandle.rotate = this.imgHandle.rotate - 90
+            await this.$nextTick()
+            const element = this.$refs.previewImage_img
+            element.style.transform = `scale(${this.imgHandle.scale}) rotate(${this.imgHandle.rotate}deg)`
+        },
+        // 向右翻转
+        async turnRightHandle() {
+            this.imgHandle.rotate = this.imgHandle.rotate + 90
+            await this.$nextTick()
+            const element = this.$refs.previewImage_img
+            element.style.transform = `scale(${this.imgHandle.scale}) rotate(${this.imgHandle.rotate}deg)`
+        },
+        // 初始化还原图片缩放旋转控制
+        async initImgHandle() {
+            this.imgHandle = {
+                scale: 1,
+                rotate: 0
+            }
+            await this.$nextTick()
+            const element = this.$refs.previewImage_img
+            element.style.transform = `scale(${this.imgHandle.scale}) rotate(${this.imgHandle.rotate}deg)`
+        },
+        // 放大图片
+        async largeHandle() {
+            console.log(this.imgHandle.scale, 'scale')
+            this.imgHandle.scale = Number((this.imgHandle.scale + 0.2).toFixed(2)) // 使用toFixed防止小数点精度不准
+            const element = this.$refs.previewImage_img
+            element.style.transform = `scale(${this.imgHandle.scale}) rotate(${this.imgHandle.rotate}deg)`
+        },
+        // 缩小图片
+        async shrinkHandle() {
+            console.log(this.imgHandle.scale, 'scale')
+            if (this.imgHandle.scale === 0.2) { // 最低缩放到0.2倍
+                return
+            }
+            this.imgHandle.scale = Number((this.imgHandle.scale - 0.2).toFixed(2)) // 使用toFixed防止小数点精度不准
+            const element = this.$refs.previewImage_img
+            element.style.transform = `scale(${this.imgHandle.scale}) rotate(${this.imgHandle.rotate}deg)`
+        },
+        // 上一张图片
+        prevImage() {
+            if (this.currentIndex === 0) {
+                this.currentIndex = this.previewImgList.length - 1
+            } else {
+                this.currentIndex--
+            }
+            this.initImgHandle()
+        },
+        // 下一张图片
+        nextImage() {
+            if (this.currentIndex === this.previewImgList.length - 1) {
+                this.currentIndex = 0
+            } else {
+                this.currentIndex++
+            }
+            this.initImgHandle()
+        },
+        // 关闭预览图片组件
+        closePreviewImage() {
+            this.show = false
+        }
+    },
+    mounted() { // 插入body
+        document.body.appendChild(this.$el);
+    },
+    destroyed() { // 组件销毁后同步清除元素
+        this.$el.parentNode.removeChild(this.$el);
+    }
+}
+</script>
+<style lang="scss" scoped>
+.previewImage_wrapper{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 9999;
+    .previewImage_image{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            width: 100vw;
+            height: 100vh;
+            object-fit: scale-down;
+            transition: transform 0.3s ease;
+        }
+    }
+    .previewImage_close{
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        transition: transform 0.2s ease-out;
+        &:hover{
+            transform: scale(1.2);
+        }
+    }
+    .previewImage_navigation{
+        &_left{
+            position: absolute;
+            left: 15px;
+            top: 50%;
+            transform: translate(0, -50%);
+            transition: transform 0.2s ease-out;
+        }
+        &_right{
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            transform: translate(0, -50%);
+            transition: transform 0.2s ease-out;
+        }
+        &_left:hover,&_right:hover{
+            transform: translate(0, -50%) scale(1.2);
+        }
+    }
+    .previewImage_toolbar{
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        display: flex;
+        align-items: center;
+        span{
+            margin-right: 10px;
+            transition: transform 0.2s ease-out;
+            &:hover{
+                transform: scale(1.1) ;
+            }
+        }
+        span:last-child{
+            margin-right: 0;
+        }
+    }
+    .previewImage_btn{
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        color: #fff;
+        background-color: #606266;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+}
+.zoom-enter, .zoom-leave-to {
+    transform: scale(0);
+}
+.zoom-enter-active, .zoom-leave-active {
+    transition: transform 0.3s;
+}
+
+.slide-enter, .slide-leave-to {
+    transform: translateX(100%);
+}
+.slide-enter-active, .slide-leave-active {
+    transition: transform 0.3s ease-in-out;
+}
+</style>

src/components/upload/index.vue

@@ -0,0 +1,488 @@
+<template>
+    <div>
+        <basic-container v-if="!basic">
+            <avue-crud :data="data" ref="crud" :option="option" :key="key" @resetColumn="resetColumn"
+                       @saveColumn="saveColumn">
+                <template slot="menuLeft">
+                    <el-button type="primary" size="small" icon="el-icon-edit" @click="addDetail" :disabled="disabled"
+                               v-if="display">上传
+                    </el-button>
+                    <slot name="c_button"></slot>
+                </template>
+                <template slot="url" slot-scope="{ row }">
+                    <el-input placeholder="请输入内容" size="small" v-if="row.$cellEdit" v-model="row.url"
+                              class="input-with-select">
+                        <el-button slot="append" @click="singleLineUpload(row)">附件</el-button>
+                    </el-input>
+                    <span v-else>{{ row.url }}</span>
+                </template>
+                <template slot-scope="scope" slot="menu">
+                    <el-button icon="el-icon-download" :size="scope.size" :type="scope.type" @click="download(scope)">查看
+                    </el-button>
+                    <el-button :type="scope.type" :size="scope.size" icon="el-icon-edit"
+                               @click.stop="rowCell(scope.row, scope.index)" :disabled="disabled">
+                        {{ scope.row.$cellEdit ? "保存" : "修改" }}
+                    </el-button>
+                    <el-button :type="scope.type" :size="scope.size" icon="el-icon-delete"
+                               @click.stop="rowDel(scope.row, scope.index)" :disabled="disabled">删除
+                    </el-button>
+                </template>
+            </avue-crud>
+            <el-dialog title="上传附件" append-to-body :visible.sync="excelBox" width="555px"
+                       :close-on-click-modal="false"
+                       v-dialog-drag>
+                <el-upload class="upload-demo" drag style="text-align: center" ref="upload"
+                           :action="incomingAction ? incomingAction : action" :headers="headers" :on-success="onSuccess"
+                           multiple
+                           :before-upload="beforeUpload">
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__tip" slot="tip">
+                        如上传文件过大，请耐心等待上传成功
+                    </div>
+                </el-upload>
+            </el-dialog>
+            <el-dialog title="修改附件" append-to-body :visible.sync="excelTwo" width="555px"
+                       :close-on-click-modal="false"
+                       v-dialog-drag>
+                <el-upload class="upload-demo" drag style="text-align: center"
+                           :action="incomingAction ? incomingAction : action" :headers="headers" :show-file-list="false"
+                           :on-success="onSuccessTwo" :before-upload="beforeUpload">
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__tip" slot="tip">
+                        如上传文件过大，请耐心等待上传成功
+                    </div>
+                </el-upload>
+            </el-dialog>
+            <PreviewImage :visible.sync="innerVisible" :currentIndex="0" :previewImgList="[imgUrl]"/>
+        </basic-container>
+        <span v-else-if="true">
+      <avue-crud :data="data" ref="crud" :option="option" :key="key" @resetColumn="resetColumn"
+                 @saveColumn="saveColumn">
+        <template slot="menuLeft">
+          <el-button type="primary" size="small" icon="el-icon-edit" @click="addDetail" :disabled="disabled">上传
+          </el-button>
+        </template>
+        <template slot="url" slot-scope="{ row }">
+          <el-input placeholder="请输入内容" size="small" v-if="row.$cellEdit" v-model="row.url"
+                    class="input-with-select">
+            <el-button slot="append" @click="singleLineUpload(row)">附件</el-button>
+          </el-input>
+          <span v-else>{{ row.url }}</span>
+        </template>
+        <template slot-scope="scope" slot="menu">
+          <el-button icon="el-icon-download" :size="scope.size" :type="scope.type" @click="download(scope)">查看
+          </el-button>
+          <el-button :type="scope.type" :size="scope.size" icon="el-icon-edit"
+                     @click.stop="rowCell(scope.row, scope.index)" :disabled="disabled">
+            {{ scope.row.$cellEdit ? "保存" : "修改" }}
+          </el-button>
+          <el-button :type="scope.type" :size="scope.size" icon="el-icon-delete"
+                     @click.stop="rowDel(scope.row, scope.index)" :disabled="disabled">删除
+          </el-button>
+        </template>
+      </avue-crud>
+      <el-dialog title="上传附件" append-to-body :visible.sync="excelBox" width="555px" :close-on-click-modal="false"
+                 v-dialog-drag>
+        <el-upload class="upload-demo" drag style="text-align: center" ref="upload" :action="action" :headers="headers"
+                   :on-success="onSuccess" multiple :before-upload="beforeUpload">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip">
+            如上传文件过大，请耐心等待上传成功
+          </div>
+        </el-upload>
+      </el-dialog>
+      <el-dialog title="修改附件" append-to-body :visible.sync="excelTwo" width="555px" :close-on-click-modal="false"
+                 v-dialog-drag>
+        <el-upload class="upload-demo" drag style="text-align: center"
+                   :action="incomingAction ? incomingAction : action" :headers="headers" :show-file-list="false"
+                   :on-success="onSuccessTwo" :before-upload="beforeUpload">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip">
+            如上传文件过大，请耐心等待上传成功
+          </div>
+        </el-upload>
+      </el-dialog>
+
+            <!--  新的查看图片弹窗-->
+      <PreviewImage :visible.sync="innerVisible" :currentIndex="0" :previewImgList="[imgUrl]"/>
+    </span>
+    </div>
+</template>
+
+<script>
+import {getToken} from "@/util/auth";
+import {LTfujianDelete, sharedDeletion} from "@/api/user";
+import {updateListRemove} from "@/api/base/upload";
+import PreviewImage from '@/components/PreviewImage/index.vue'
+
+export default {
+    name: "index",
+    components: {PreviewImage},
+    props: {
+        data: {
+            type: Object
+        },
+        incomingAction: {
+            type: String
+        },
+        deleteUrl: {
+            type: String
+        },
+        enumerationValue: {
+            type: Number
+        },
+        typeUpload: {
+            type: String
+        },
+        disabled: {
+            type: Boolean
+        },
+        display: {
+            type: Boolean
+        },
+        basic: {
+            type: Boolean
+        }
+    },
+    data() {
+        return {
+            excelBox: false,
+            excelTwo: false,
+            innerVisible: false,
+            form: {},
+            imgUrl: "",
+            action: "/api/blade-resource/oss/endpoint/put-file",
+            headers: {"Blade-Auth": "Bearer " + getToken()},
+            option: {},
+            key: 0,
+            originalOptions: {
+                dialogDrag: true,
+                index: true,
+                refreshBtn: false,
+                cellBtn: false,
+                cancelBtn: false,
+                delBtn: false,
+                editBtn: false,
+                addBtn: false,
+                align: "center",
+                column: [
+                    {
+                        label: "文件名称",
+                        prop: "fileName",
+                        index: 1,
+                        width: 140,
+                        cell: true,
+                        overHidden: true
+                    },
+                    {
+                        label: "文件地址",
+                        prop: "url",
+                        index: 2,
+                        overHidden: true
+                    }, {
+                        type: "select",
+                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=file_type",
+                        props: {
+                            label: "dictValue",
+                            value: "dictValue"
+                        },
+                        label: "文件属性",
+                        prop: "paymentType",
+                        search: false,
+                        index: 3,
+                        width: 140,
+                        overHidden: true,
+                        cell: true
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        index: 4,
+                        cell: true,
+                        overHidden: true
+                    }
+                ]
+            },
+            originalOptionsTwo: {
+                dialogDrag: true,
+                index: true,
+                refreshBtn: false,
+                cellBtn: false,
+                cancelBtn: false,
+                delBtn: false,
+                editBtn: false,
+                addBtn: false,
+                align: "center",
+                column: [
+                    {
+                        label: "文件名称",
+                        prop: "fileName",
+                        index: 1,
+                        width: 140,
+                        cell: true,
+                        overHidden: true
+                    },
+                    {
+                        label: "文件地址",
+                        prop: "url",
+                        index: 2,
+                        overHidden: true
+                    }, {
+                        type: "select",
+                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=picture_type",
+                        props: {
+                            label: "dictValue",
+                            value: "dictKey"
+                        },
+                        label: "文件属性",
+                        prop: "version",
+                        search: false,
+                        index: 3,
+                        width: 140,
+                        overHidden: true,
+                        cell: true,
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        index: 4,
+                        cell: true,
+                        overHidden: true
+                    }
+                ]
+            },
+            // 基础信息轮胎附件
+            originalOptionsTwo_LT: {
+                dialogDrag: true,
+                index: true,
+                refreshBtn: false,
+                cellBtn: false,
+                cancelBtn: false,
+                delBtn: false,
+                editBtn: false,
+                addBtn: false,
+                align: "center",
+                column: [
+                    {
+                        label: "文件名称",
+                        prop: "fileName",
+                        index: 1,
+                        width: 140,
+                        cell: true,
+                        overHidden: true
+                    },
+                    {
+                        label: "文件地址",
+                        prop: "url",
+                        index: 2,
+                        overHidden: true
+                    }, {
+                        type: "select",
+                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=picture_type",
+                        props: {
+                            label: "dictValue",
+                            value: "dictKey"
+                        },
+                        label: "文件属性",
+                        prop: "mainImage",
+                        search: false,
+                        index: 3,
+                        width: 140,
+                        overHidden: true,
+                        cell: true,
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        index: 4,
+                        cell: true,
+                        overHidden: true
+                    }
+                ]
+            },
+            originalOptionsThree: {
+                dialogDrag: true,
+                index: true,
+                refreshBtn: false,
+                cellBtn: false,
+                cancelBtn: false,
+                delBtn: false,
+                editBtn: false,
+                addBtn: false,
+                align: "center",
+                column: [
+                    {
+                        label: "文件名称",
+                        prop: "fileName",
+                        index: 1,
+                        width: 140,
+                        cell: true,
+                        overHidden: true
+                    },
+                    {
+                        label: "文件地址",
+                        prop: "url",
+                        index: 2,
+                        overHidden: true
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        index: 4,
+                        cell: true,
+                        overHidden: true
+                    }
+                ]
+            },
+            uploadCount: 0
+        };
+    },
+    async created() {
+        console.log(this.enumerationValue)
+        this.option = this.originalOptionsTwo_LT
+        this.key++
+    },
+    methods: {
+        //自定义列保存
+        async saveColumn() {
+            /**
+             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
+             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
+             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
+             */
+            const inSave = await this.saveColumnData(this.getColumnName(this.enumerationValue), this.option);
+            if (inSave) {
+                this.$message.success("保存成功");
+                //关闭窗口
+                this.$refs.crud.$refs.dialogColumn.columnBox = false;
+            }
+        },
+        //自定义列重置
+        async resetColumn() {
+
+            this.option = this.originalOptionsTwo_LT;
+            this.$message.success("重置成功");
+        },
+        beforeUpload(file) {
+            if (file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/bmp") {
+                const fileSize = file.size / 1024 / 1024
+                if (fileSize > 5) {
+                    this.$message.error("请上传不能超过5M的图片");
+                    return false;
+                }
+            } else {
+                const fileSize = file.size / 1024 / 1024
+                if (fileSize > 10) {
+                    this.$message.error("请上传不能超过10M的文件");
+                    return false;
+                }
+            }
+        },
+        //新增上传成功
+        onSuccess(response, file, fileList) {
+            this.$refs.crud.rowCellAdd({
+                fileName: response.data.originalName,
+                url: response.data.link
+            });
+            this.uploadCount++;
+            if (this.uploadCount === fileList.length) {
+                this.$refs.upload.clearFiles();
+                this.excelBox = false;
+                this.uploadCount = 0;
+            }
+        },
+        //修改上传成功
+        onSuccessTwo(response) {
+            this.form.fileName = response.data.originalName;
+            this.form.url = response.data.link;
+            this.data[this.form.$index] = this.form;
+            this.excelTwo = false;
+        },
+        //单行上传
+        singleLineUpload(row) {
+            this.form = row;
+            this.excelTwo = true;
+        },
+        //开启批量上传
+        addDetail() {
+            this.excelBox = true;
+        },
+        //下载附件
+        download(scope) {
+            if (scope.row.url) {
+                if (
+                    scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
+                    ".jpg" ||
+                    scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
+                    ".png" ||
+                    scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
+                    ".jpeg" ||
+                    scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
+                    ".JPG" ||
+                    scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
+                    ".PNG" ||
+                    scope.row.url.substring(scope.row.url.lastIndexOf(".")) ===
+                    ".JPEG"
+                ) {
+                    this.imgUrl = scope.row.url;
+                    this.innerVisible = true;
+                } else {
+                    window.open(scope.row.url);
+                }
+            } else {
+                this.$message.error("请上传附件");
+            }
+        },
+        //修改触发
+        rowCell(row, index) {
+            if (row.$cellEdit == true) {
+                this.$set(row, "$cellEdit", false);
+            } else {
+                this.$set(row, "$cellEdit", true);
+            }
+            // this.$refs.crud.rowCell(row, index)
+        },
+        rowDel(row, index) {
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(() => {
+                console.log(row, 657)
+                if (row.id) {
+                    if (this.typeUpload == "CK") {
+                        updateListRemove(row.id, this.deleteUrl).then(res => {
+                            if (res.data.success) {
+                                this.$message.success("操作成功!");
+                                this.data.splice(index, 1);
+                            }
+                        });
+                    } else if (this.typeUpload == "LT") {
+                        LTfujianDelete({ids: row.id}).then(res => {
+                            if (res.data.success) {
+                                this.$message.success("操作成功!");
+                                this.data.splice(index, 1);
+                            }
+                        })
+                    } else {
+                        sharedDeletion(this.deleteUrl, row.id).then(res => {
+                            if (res.data.success) {
+                                this.$message.success("操作成功!");
+                                this.data.splice(index, 1);
+                            }
+                        });
+                    }
+                } else {
+                    this.data.splice(index, 1);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style scoped></style>

src/main.js

@@ -38,6 +38,9 @@ Vue.component('basicBlock', basicBlock);
 Vue.use(Avue);
 Vue.use(avueUeditor)
 
+import cUpload from './components/upload'
+Vue.component('cUpload', cUpload)
+
 //获取浏览器指纹并生成ID
 import Fingerprint2 from 'fingerprintjs2'
 // 注册全局crud驱动