gubersail-platform-ui/src/components/upload/index.vue

<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>