update: 安永文件上传

src/app-register.ts

@@ -140,6 +140,7 @@ import AppFieldImageDynamic from './components/layout-element/media/app-field-im
 import AppTodoList from './components/app-todo-list/app-todo-list.vue';
 import AppGridPagination from './components/app-grid-pagination/app-grid-pagination.vue';
 import AppSearchbar from './components/app-searchbar/app-searchbar.vue';
+import AppEYUpload from './components/app-ey-upload/app-ey-upload.vue';
 import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
 // 布局组件
 import AppIndexViewLayoutLeft from './layout/index-view-layout-left/index-view-layout-left.vue';
@@ -310,6 +311,7 @@ export const AppComponents = {
         v.component('app-todo-list',AppTodoList);
         v.component('app-grid-pagination',AppGridPagination);
         v.component('app-searchbar',AppSearchbar);
+        v.component('app-ey-upload',AppEYUpload);
         v.component('extend-action-timeline',ExtendActionTimeline);
         v.component('app-pickup-view-layout',AppPickUpViewLayout);
         v.component('app-mpickup-view-layout',AppMPickUpViewLayout);

src/components/app-ey-upload/app-ey-upload.scss

+.app-ey-upload {
+    
+}
\ No newline at end of file

src/components/app-ey-upload/app-ey-upload.vue

+<template>
+    <div class="app-ey-upload">安永文件上传</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Button, Row, Col, Link, Icon, Upload, Message, MessageBox } from "element-ui";
+import Axios from "axios";
+import { Subject, Unsubscribable } from "rxjs";
+
+@Component({})
+export default class AppEYUpload extends Vue {
+    /**
+     * 当前表单对象
+     *
+     * @type {*}
+     * @memberof AppEYUpload
+     */
+    @Prop() public data!: any;
+
+    /**
+     * 当前属性名
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    @Prop() public formItemName!: string;
+
+    /**
+     * 当前属性值
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    @Prop() public value!: string;
+
+    /**
+     * 当前表单状态
+     *
+     * @type {*}
+     * @memberof AppEYUpload
+     */
+    @Prop() public formState!: any;
+
+    /**
+     * 默认为当前实体名称，有指定则按表单参数
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    @Prop() public folder!: string;
+
+    /**
+     * 默认为当前实体主键id，有指定则按表单参数
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    @Prop() public ownerid!: string;
+
+    /**
+     * 默认为当前属性名，有指定则按表单参数
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    @Prop() public ownertype!: string;
+
+    /**
+     * 持久化
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    @Prop({ default: false }) public persistence?: boolean;
+
+    /**
+     * 是否启用
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    @Prop({ default: false }) public disabled?: boolean;
+
+    /**
+     * 是否显示拖拽区域
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    @Prop({ default: false }) public showDrag?: boolean;
+
+    /**
+     * 是否显示预览按钮
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    @Prop({ default: false }) public showPreview?: boolean;
+
+    /**
+     * 是否显示在线编辑按钮
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    @Prop({ default: false }) public showEdit?: boolean;
+
+    /**
+     * 是否显示OCR按钮
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    @Prop({ default: false }) public showOcrview?: boolean;
+
+    /**
+     * 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    public srfuf: string = "0";
+
+    /**
+     * 文件列表
+     *
+     * @type {Array<any>}
+     * @memberof AppEYUpload
+     */
+    public uploadFileList: Array<any> = [];
+
+    /**
+     * 当前登陆人的token
+     *
+     * @type {string}
+     * @memberof AppEYUpload
+     */
+    public token: string = "Bearer " + localStorage.getItem("token");
+
+    /**
+     * 上传文件请求头
+     *
+     * @type {*}
+     * @memberof AppEYUpload
+     */
+    public myHeaders: any = { Authorization: this.token };
+
+    /**
+     * 表单状态事件
+     *
+     * @type {*}
+     * @memberof AppEYUpload
+     */
+    public formStateEvent: any | Unsubscribable | undefined;
+
+    /**
+     * 批量更新标识，false为不更新，true才可以更新
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    public isUpdateBatch: boolean = true;
+
+    /**
+     * 新建状态标识,true为新建，false为编辑
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    public isCreate: boolean = true;
+
+    /**
+     * 自定义弹框标题
+     *
+     * @type {*}
+     * @memberof AppEYUpload
+     */
+    public dialogTitle: any = "";
+
+    /**
+     * 是否显示自定义弹框
+     *
+     * @type {boolean}
+     * @memberof AppEYUpload
+     */
+    public showDialog: boolean = false;
+
+    /**
+     * 嵌入自定义弹框中iframe的url
+     *
+     * @type {*}
+     * @memberof AppEYUpload
+     */
+    public iframeUrl: any = "";
+
+    /**
+     * 关闭自定义弹框
+     *
+     * @memberof AppEYUpload
+     */
+    public dialogClose() {
+        this.dialogTitle = "";
+        this.showDialog = false;
+        this.iframeUrl = "";
+        let iframe: any = document.getElementById("fileIframe");
+        iframe.parentNode.removeChild("fileIframe");
+    }
+
+    /**
+     * 拼接上传路径
+     *
+     * @memberof AppEYUpload
+     */
+    public getAction() {
+        return "/net-disk/upload/" + this.getFolder() + "?ownertype=" + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
+    }
+
+    /**
+     * return folder
+     *
+     * @memberof AppEYUpload
+     */
+    public getFolder() {
+        return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
+    }
+
+    /**
+     * return ownertype
+     *
+     * @memberof AppEYUpload
+     */
+    public getOwnertype() {
+        return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
+    }
+
+    /**
+     * return ownerid
+     *
+     * @memberof AppEYUpload
+     */
+    public getOwnerid() {
+        return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
+    }
+
+    /**
+     * vue创建
+     *
+     * @memberof AppEYUpload
+     */
+    public created() {
+        this.formStateEvent = this.formState.subscribe(($event: any) => {
+            // 表单加载完成
+            if (Object.is($event.type, "load")) {
+                const data = JSON.parse(JSON.stringify($event.data));
+                // 编辑表单，保存时不进行批量更新
+                if (data.srfuf == "1") {
+                    this.isCreate = false;
+                    this.isUpdateBatch = false;
+                }
+                // 当persistence = true时
+                if (this.persistence == true) {
+                    // 直接从表单的data数据里获取当前属性的值
+                    if (data[this.formItemName] && this.uploadFileList.length == 0) {
+                        const files = JSON.parse(data[this.formItemName]);
+                        for (let i = 0; i < files.length; i++) {
+                            this.uploadFileList.push(files[i]);
+                        }
+                    }
+                } else {
+                    // 发送get请求获取文件列表
+                    this.getFiles();
+                }
+            }
+            // 表单保存完成
+            if (Object.is($event.type, "save")) {
+                // 批量更新文件表中的ownerid
+                if (this.isUpdateBatch == true && this.uploadFileList.length > 0) {
+                    this.updateFileBatch(this.uploadFileList);
+                }
+            }
+        });
+    }
+
+    /**
+     * 获取文件列表
+     *
+     * @memberof AppEYUpload
+     */
+    public getFiles() {
+        // 拼接url
+        let _this: any = this;
+        const getUrl = "/net-disk/files/" + this.getFolder();
+        // 发送get请求
+        Axios.get(getUrl, {
+            params: {
+                ownertype: this.getOwnertype(),
+                ownerid: this.getOwnerid(),
+            },
+        })
+            .then((response: any) => {
+                if (!response || response.status != 200) {
+                    Message.error(_this.$t("components.diskFileUpload.getFileFailure") + "!");
+                    return;
+                }
+                // 返回的是一个jsonArray
+                if (response.data) {
+                    const files = JSON.parse(JSON.stringify(response.data));
+                    if (this.uploadFileList.length == 0) {
+                        this.uploadFileList.push.apply(this.uploadFileList, files);
+                    }
+                }
+            })
+            .catch((error: any) => {
+                Message.error(_this.$t("components.diskFileUpload.getFileFailure") + ":" + error);
+            });
+    }
+
+    /**
+     * 自定义上传文件
+     *
+     * @param 上传文件
+     * @memberof AppEYUpload
+     */
+    public customUploadFile(param: any) {
+        // 上传的文件
+        let _this: any = this;
+        let file = param.file;
+        // formData传参
+        let formData = new FormData();
+        formData.append("file", file);
+        // 拼接url
+        const uploadUrl = this.getAction();
+        // 发送post请求
+        Axios.post(uploadUrl, formData)
+            .then((response: any) => {
+                if (!response || response.status != 200) {
+                    Message.error(_this.$t("components.diskFileUpload.loadFailure") + "!");
+                }
+                // 返回的是一个jsonobject
+                if (response.data) {
+                    // 新建表单上传，后续需要批量更新操作
+                    if (this.isCreate == true) {
+                        this.isUpdateBatch = true;
+                    }
+                    // 保存到文件列表进行显示
+                    this.uploadFileList.push(response.data);
+                    // persistence=true时需要持久化表单属性
+                    if (this.persistence == true && this.uploadFileList.length > 0) {
+                        const value = JSON.stringify(this.uploadFileList);
+                        this.$emit("formitemvaluechange", { name: this.formItemName, value: value });
+                    }
+                }
+            })
+            .catch((error: any) => {
+                Message.error(_this.$t("components.diskFileUpload.loadFailure") + ":" + error);
+            });
+    }
+
+    /**
+     * 下载文件
+     *
+     * @param item 下载文件
+     * @memberof AppEYUpload
+     */
+    public onDownload(item: any) {
+        // 拼接url
+        let _this: any = this;
+        const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
+        const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename);
+        const downloadUrl = "/net-disk/download/" + this.getFolder() + "/" + id + "/" + name;
+        // 发送get请求
+        Axios.get(downloadUrl, {
+            headers: {
+                authcode: item.authcode,
+            },
+            responseType: "arraybuffer",
+        })
+            .then((response: any) => {
+                if (!response || response.status != 200) {
+                    Message.error(_this.$t("components.diskFileUpload.downloadFile") + "!");
+                    return;
+                }
+                // 请求成功，后台返回的是一个文件流
+                if (response.data) {
+                    // 获取文件名
+                    const disposition = response.headers["content-disposition"];
+                    const filename = disposition.split("filename=")[1];
+                    // 用blob对象获取文件流
+                    let blob = new Blob([response.data], { type: response.headers["content-type"] });
+                    // 通过文件流创建下载链接
+                    var href = URL.createObjectURL(blob);
+                    // 创建一个a元素并设置相关属性
+                    let a = document.createElement("a");
+                    a.href = href;
+                    if (name) {
+                        a.download = name;
+                    } else {
+                        a.download = filename;
+                    }
+                    // 添加a元素到当前网页
+                    document.body.appendChild(a);
+                    // 触发a元素的点击事件，实现下载
+                    a.click();
+                    // 从当前网页移除a元素
+                    document.body.removeChild(a);
+                    // 释放blob对象
+                    URL.revokeObjectURL(href);
+                } else {
+                    Message.error(_this.$t("components.diskFileUpload.downloadFile1"));
+                }
+            })
+            .catch((error: any) => {
+                Message.error(_this.$t("components.diskFileUpload.downloadFile") + ":" + error);
+            });
+    }
+
+    /**
+     * 预览文件
+     *
+     * @param item 预览文件
+     * @memberof AppEYUpload
+     */
+    public onPreview(item: any) {
+        // 拼接url
+        const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
+        const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
+        let previewUrl = "/net-disk/preview/" + this.getFolder() + "/" + id + "/" + name + "?authcode=" + item.authcode;
+        Axios.get(previewUrl)
+            .then((response: any) => {
+                if (!response || response.status != 200) {
+                    return;
+                }
+                // 返回一个url，通过自定义弹框打开
+                if (response.data) {
+                    this.dialogTitle = name;
+                    this.showDialog = true;
+                    this.iframeUrl = response.data;
+                }
+            })
+            .catch((error: any) => {
+                Message.error(error);
+            });
+    }
+
+    /**
+     * 编辑文件
+     *
+     * @param item
+     * @memberof AppEYUpload
+     */
+    public onEdit(item: any) {
+        // 拼接url
+        const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
+        const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
+        const editUrl = "/net-disk/editview/" + this.getFolder() + "/" + id + "/" + name + "?authcode=" + item.authcode;
+        // TODO:暂时用window.open
+        window.open(editUrl);
+    }
+
+    /**
+     * ocr识别
+     * @param item
+     * @memberof AppEYUpload
+     */
+    public onOcr(item: any) {
+        // 拼接url
+        const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
+        const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
+        const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
+        const ocrUrl = "/net-disk/ocrview/" + this.getFolder() + "/" + id + "/" + name + "?authcode=" + item.authcode;
+        Axios.get(ocrUrl)
+            .then((response: any) => {
+                if (!response || response.status != 200) {
+                    return;
+                }
+                // 返回一个url，通过自定义弹框打开
+                if (response.data) {
+                    this.dialogTitle = name;
+                    this.showDialog = true;
+                    this.iframeUrl = response.data;
+                }
+            })
+            .catch((error: any) => {
+                Message.error(error);
+            });
+    }
+
+    /**
+     * 删除文件
+     *
+     * @param item
+     * @param index
+     * @memberof AppEYUpload
+     */
+    public onRemove(item: any, index: number) {
+        let _this: any = this;
+        if (item) {
+            MessageBox.confirm(_this.$t("components.diskFileUpload.deleteFile"), _this.$t("components.diskFileUpload.deleteFilePrompt"), {
+                confirmButtonText: _this.$t("components.diskFileUpload.true"),
+                cancelButtonText: _this.$t("components.diskFileUpload.false"),
+                type: "warning",
+            }).then(() => {
+                //　拼接url
+                const deleteUrl = "/net-disk/files/" + item.id;
+                // 发送delete请求
+                Axios.delete(deleteUrl)
+                    .then((response: any) => {
+                        if (!response || response.status != 200) {
+                            Message.error(_this.$t("components.diskFileUpload.deleteFileFailure") + "!");
+                        }
+                        // 从文件列表中删除
+                        this.uploadFileList.splice(index, 1);
+                        // persistence=true时需要持久化表单属性
+                        if (this.persistence == true) {
+                            const value = JSON.stringify(this.uploadFileList);
+                            this.$emit("formitemvaluechange", { name: this.formItemName, value: value });
+                        }
+                    })
+                    .catch((error: any) => {
+                        // 提示删除失败
+                        Message.error(_this.$t("components.diskFileUpload.deleteFileFailure") + ":" + error);
+                    });
+            });
+        }
+    }
+
+    /**
+     * 批量更新文件表的ownerid
+     *
+     * @memberof AppEYUpload
+     */
+    public updateFileBatch(files: any) {
+        let _this: any = this;
+        // 拼接url
+        const updateUrl = "/net-disk/files/" + this.getFolder() + "?ownertype=" + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
+        // requestBody参数
+        let requestBody = [];
+        if (files) {
+            requestBody = files;
+        }
+        // 发送post请求
+        Axios.post(updateUrl, requestBody, {
+            headers: {
+                "Content-Type": "application/json;charset=UTF-8",
+            },
+            timeout: 2000,
+        })
+            .then((response: any) => {
+                if (!response || response.status != 200) {
+                    Message.error(_this.$t("components.diskFileUpload.updateFailure") + "!");
+                    return;
+                }
+            })
+            .catch((error: any) => {
+                Message.error(_this.$t("components.diskFileUpload.updateFailure") + ":" + error);
+            });
+    }
+}
+</script>
+<style lang="scss">
+@import "./app-ey-upload.scss";
+</style>