<template> <div id="disk-file-upload"> <el-row> <!--拖拽上传--> <el-col v-if="showDrag==true" class="disk-file-upload__withDrag"> <el-upload ref="upload" drag :multiple="multiple" list-type="text" :action="getAction()" :headers="headers" :file-list="uploadFileList" :show-file-list="false" :http-request="customUploadFile"> <div> <i class="el-icon-upload"></i> <div> <span>{{$t('components.diskFileUpload.fileDrag')}}</span> <span class="disk-file-upload__withDrag__upload">{{$t('components.diskFileUpload.clickUpload')}}</span> </div> </div> </el-upload> </el-col> <!--点击上传--> <el-col v-else class="disk-file-upload__withoutDrag"> <el-upload ref="upload" :multiple="multiple" list-type="text" :action="getAction()" :headers="headers" :file-list="uploadFileList" :show-file-list="false" :http-request="customUploadFile"> <el-button type="primary" size="small" icon="el-icon-upload"> {{$t('components.diskFileUpload.clickUpload')}} </el-button> </el-upload> </el-col> <!--文件操作--> <el-col v-for="(item,index) in uploadFileList" :key="index" class="disk-file-upload__fileList"> <div class="disk-file-upload__fileList__caption"> <i class="el-icon-document"></i> <span>{{item.name}}</span> </div> <div class="disk-file-upload__fileList__content"> <el-link type="success" icon="el-icon-download" @click="onDownload(item)"> {{$t('components.diskFileUpload.load')}} </el-link> <el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)"> {{$t('components.diskFileUpload.preview')}} </el-link> <el-link type="primary" icon="el-icon-edit" v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))" @click="onEdit(item)">{{$t('components.diskFileUpload.edit')}} </el-link> <el-link icon="el-icon-camera" v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))" @click="onOcr(item)">OCR </el-link> <el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)"> {{$t('components.diskFileUpload.delete')}} </el-link> </div> </el-col> </el-row> <!-- 自定义弹框 --> <div class="disk-file-upload__dialogDiv"> <el-dialog :title="dialogTitle" center width="70%" top="5vh" :visible="showDialog" :close-on-click-modal="true" :show-close="true" :before-close="dialogClose" :modal-append-to-body="false"> <div class="disk-file-upload__dialogDiv__frame"> <iframe id="fileIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe> </div> </el-dialog> </div> </div> </template> <script lang="ts"> import {Component, Vue, Prop} from 'vue-property-decorator'; import {Message, MessageBox} from 'element-ui'; import Axios from 'axios'; import {Subscription} from 'rxjs'; import { getCookie } from 'qx-util'; import { AppServiceBase, getSessionStorage } from 'ibiz-core'; @Component({}) export default class DiskFileUpload extends Vue { /** * 当前表单对象 * * @type {*} * @memberof DiskFileUpload */ @Prop() public data!: any; /** * 当前属性名 * * @type {string} * @memberof DiskFileUpload */ @Prop() public formItemName!: string; /** * 当前属性值 * * @type {string} * @memberof DiskFileUpload */ @Prop() public value!: string; /** * 是否多选 * * @type {boolean} * @memberof AppFileUpload */ @Prop({default: true}) public multiple?: boolean; /** * 当前表单状态 * * @type {*} * @memberof DiskFileUpload */ @Prop() public formState!: any; /** * 默认为当前实体名称,有指定则按表单参数 * * @type {string} * @memberof DiskFileUpload */ @Prop() public folder!: string; /** * 默认为当前实体主键id,有指定则按表单参数 * * @type {string} * @memberof DiskFileUpload */ @Prop() public ownerid!: string; /** * 默认为当前属性名,有指定则按表单参数 * * @type {string} * @memberof DiskFileUpload */ @Prop() public ownertype!: string; /** * 持久化 * * @type {boolean} * @memberof DiskFileUpload */ @Prop({default: false}) public persistence?: boolean; /** * 是否显示拖拽区域 * * @type {boolean} * @memberof DiskFileUpload */ @Prop({default: false}) public showDrag?: boolean; /** * 是否显示预览按钮 * * @type {boolean} * @memberof DiskFileUpload */ @Prop({default: false}) public showPreview?: boolean; /** * 是否显示在线编辑按钮 * * @type {boolean} * @memberof DiskFileUpload */ @Prop({default: false}) public showEdit?: boolean; /** * 是否显示OCR按钮 * * @type {boolean} * @memberof DiskFileUpload */ @Prop({default: false}) public showOcrview?: boolean; /** * 表单是否处于编辑状态(有真实主键,srfuf='1';srfuf='0'时处于新建未保存) * * @type {string} * @memberof DiskFileUpload */ public srfuf: string = '0'; /** * 文件列表 * * @type {Array<any>} * @memberof DiskFileUpload */ public uploadFileList: Array<any> = []; /** * 当前登陆人的token * * @type {string} * @memberof DiskFileUpload */ public token: string = "Bearer " + localStorage.getItem('token'); /** * 上传文件请求头 * * @type {*} * @memberof DiskFileUpload */ public headers: any = {Authorization: this.token}; /** * 表单状态事件 * * @type {*} * @memberof DiskFileUpload */ public formStateEvent: Subscription | undefined; /** * 批量更新标识,false为不更新,true才可以更新 * * @type {boolean} * @memberof DiskFileUpload */ public isUpdateBatch: boolean = true; /** * 新建状态标识,true为新建,false为编辑 * * @type {boolean} * @memberof DiskFileUpload */ public isCreate: boolean = true; /** * 自定义弹框标题 * * @type {*} * @memberof DiskFileUpload */ public dialogTitle: any = ''; /** * 是否显示自定义弹框 * * @type {boolean} * @memberof DiskFileUpload */ public showDialog: boolean = false; /** * 嵌入自定义弹框中iframe的url * * @type {*} * @memberof DiskFileUpload */ public iframeUrl: any = ''; /** * 关闭自定义弹框 * * @memberof DiskFileUpload */ public dialogClose() { this.dialogTitle = ''; this.showDialog = false; this.iframeUrl = ''; let iframe: any = document.getElementById("fileIframe"); iframe.parentNode.removeChild("fileIframe"); } /** * 拼接上传路径 * * @memberof DiskFileUpload */ public getAction() { return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid(); } /** * return folder * * @memberof DiskFileUpload */ public getFolder() { return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder); } /** * return ownertype * * @memberof DiskFileUpload */ public getOwnertype() { return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype); } /** * return ownerid * * @memberof DiskFileUpload */ public getOwnerid() { return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid); } /** * vue创建 * * @memberof DiskFileUpload */ public created() { this.setHeaders(); 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); } } }); } /** * @description: 组件销毁 * * @return {*} */ destroyed(){ if(this.formStateEvent){ this.formStateEvent.unsubscribe(); } } /** * 设置请求头 * * @memberof AppFileUpload */ public setHeaders(){ if (AppServiceBase.getInstance().getAppEnvironment().SaaSMode) { let activeOrgData = getSessionStorage('activeOrgData'); this.headers['srforgid'] = activeOrgData?.orgid; this.headers['srfsystemid'] = activeOrgData?.systemid; if(getSessionStorage("srfdynaorgid")){ this.headers['srfdynaorgid'] = getSessionStorage("srfdynaorgid"); } } else { if(getSessionStorage("srfdynaorgid")){ this.headers['srfdynaorgid'] = getSessionStorage("srfdynaorgid"); } } if (getCookie('ibzuaa-token')) { this.headers['Authorization'] = `Bearer ${getCookie('ibzuaa-token')}`; } else { // 第三方应用打开免登 if (sessionStorage.getItem("srftoken")) { const token = sessionStorage.getItem('srftoken'); this.headers['Authorization'] = `Bearer ${token}`; } } } /** * 获取文件列表 * * @memberof DiskFileUpload */ public getFiles() { // 拼接url let _this: any = this; const getUrl = '/net-disk/files/' + this.getFolder(); // 发送get请求 this.$http.get(getUrl, { ownertype: this.getOwnertype(), ownerid: this.getOwnerid(), }).then((response: any) => { if (!response || response.status != 200) { this.$throw(_this.$t('components.diskFileUpload.getFileFailure') + '!','getFiles'); 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) => { this.$throw(error,'getFiles'); }); } /** * 自定义上传文件 * * @param 上传文件 * @memberof DiskFileUpload */ 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请求 this.$http.post(uploadUrl, formData, {timeout: 2000}).then((response: any) => { if (!response || response.status != 200) { this.$throw(_this.$t('components.diskFileUpload.loadFailure') + '!','customUploadFile'); } // 返回的是一个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) => { this.$throw(error,'customUploadFile'); }) } /** * 下载文件 * * @param item 下载文件 * @memberof DiskFileUpload */ 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请求 this.$http.get(downloadUrl, { 'authcode': item.authcode, responseType: 'arraybuffer', }).then((response: any) => { if (!response || response.status != 200) { this.$throw(_this.$t('components.diskFileUpload.downloadFile') + '!','onDownload'); 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 { this.$throw(_this.$t('components.diskFileUpload.downloadFile') + '!','onDownload'); } }).catch((error: any) => { this.$throw(error,'onDownload'); }); } /** * 预览文件 * * @param item 预览文件 * @memberof DiskFileUpload */ 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; this.$http.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) => { this.$throw(error,'onPreview'); }); } /** * 编辑文件 * * @param item * @memberof DiskFileUpload */ 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; this.$http.get(editUrl).then((response: any) => { if (!response || response.status != 200) { return; } if (response.data) { window.open(response.data); } }).catch((error: any) => { this.$throw(error,'onEdit'); }); } /** * ocr识别 * @param item * @memberof DiskFileUpload */ 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; this.$http.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) => { this.$throw(error,'onOcr'); }); } /** * 删除文件 * * @param item * @param index * @memberof DiskFileUpload */ 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请求 this.$http.delete(deleteUrl).then((response: any) => { if (!response || response.status != 200) { this.$throw(_this.$t('components.diskFileUpload.deleteFileFailure') + '!','onRemove'); } // 从文件列表中删除 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) => { // 提示删除失败 this.$throw(error,'onRemove'); }); }); } } /** * 批量更新文件表的ownerid * * @memberof DiskFileUpload */ 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", ...this.headers, }, timeout: 2000 }).then((response: any) => { if (!response || response.status != 200) { this.$throw(_this.$t('components.diskFileUpload.updateFailure') + '!','updateFileBatch'); return; } }).catch((error: any) => { this.$throw(error,'updateFileBatch'); }); } } </script>