Skip to content

I
ibzlite
提交 b4c4ef66 编写于 作者: sq3536's avatar sq3536
浏览文件
操作

配置

上级 147e5218
隐藏空白字符变更
内嵌 并排
正在显示 包含 543 行增加 和 520 行删除
app_web/src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @ b4c4ef66
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
:headers="myHeaders" :headers="myHeaders"
:file-list="uploadFileList" :file-list="uploadFileList"
:show-file-list="false" :show-file-list="false"
:limit="limit"
:http-request="customUploadFile"> :http-request="customUploadFile">
<div> <div>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
...@@ -20,7 +19,6 @@ ...@@ -20,7 +19,6 @@
<span>{{$t('components.diskFileUpload.fileDrag')}}</span> <span>{{$t('components.diskFileUpload.fileDrag')}}</span>
<span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span> <span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span>
</div> </div>
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
</div> </div>
</el-upload> </el-upload>
</el-col> </el-col>
...@@ -34,10 +32,10 @@ ...@@ -34,10 +32,10 @@
:headers="myHeaders" :headers="myHeaders"
:file-list="uploadFileList" :file-list="uploadFileList"
:show-file-list="false" :show-file-list="false"
:limit="limit"
:http-request="customUploadFile"> :http-request="customUploadFile">
<el-button type="primary" size="small" icon="el-icon-upload">{{$t('components.diskFileUpload.clickUpload')}}</el-button> <el-button type="primary" size="small" icon="el-icon-upload">
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div> {{$t('components.diskFileUpload.clickUpload')}}
</el-button>
</el-upload> </el-upload>
</el-col> </el-col>
<!--文件操作--> <!--文件操作-->
...@@ -47,8 +45,11 @@ ...@@ -47,8 +45,11 @@
<span>{{item.name}}</span> <span>{{item.name}}</span>
</div> </div>
<div class="fileMain"> <div class="fileMain">
<el-link type="success" icon="el-icon-download" @click="onDownload(item)">{{$t('components.diskFileUpload.load')}}</el-link> <el-link type="success" icon="el-icon-download" @click="onDownload(item)">
<el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">{{$t('components.diskFileUpload.preview')}} {{$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>
<el-link type="primary" icon="el-icon-edit" <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)$/))" v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))"
...@@ -58,287 +59,287 @@ ...@@ -58,287 +59,287 @@
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))" v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR @click="onOcr(item)">OCR
</el-link> </el-link>
<el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">{{$t('components.diskFileUpload.delete')}}</el-link> <el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">
{{$t('components.diskFileUpload.delete')}}
</el-link>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- 自定义弹框 -->
<div class="dialogDiv">
<el-dialog
width="70%"
top="5vh"
:visible="showDialog"
:close-on-click-modal="true"
:show-close="true"
:before-close="dialogClose"
:modal-append-to-body="false">
<div style="height: 100%;">
<iframe id="wps_npIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe>
</div>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui'; import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui';
import Axios from 'axios'; import Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs'; import {Subject, Unsubscribable} from 'rxjs';
@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 {*}
* @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;
/**
* 单文件大小
*
* @type {number}
* @memberof DiskFileUpload
*/
@Prop({default: 1}) public size!: number;
/**
* 文件上传个数
*
* @type {number}
* @memberof DiskFileUpload
*/
@Prop({default: 5}) public limit!: number;
/**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
*
* @type {string}
* @memberof DiskFileUpload
*/
public srfuf: string = '0';
/**
* 上传提示语
*
* @type {string}
* @memberof DiskFileUpload
*/
get uploadTip(): string {
return this.$t('components.diskFileUpload.clues')+this.size.toString()+"M，"+this.$t('components.diskFileUpload.clues1')+this.limit;
}
/** @Component({})
* 文件列表 export default class DiskFileUpload extends Vue {
*
* @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 myHeaders: any = {Authorization: this.token};
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
const uploadUrl = '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
return uploadUrl;
}
/** public showDialog = false;
* return folder public iframeUrl: any = '';
*
* @memberof DiskFileUpload
*/
public getFolder() {
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
return folder;
}
/** public dialogClose() {
* return ownertype this.showDialog = false;
* this.iframeUrl = '';
* @memberof DiskFileUpload }
*/
public getOwnertype() {
const ownertype = typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
return ownertype;
}
/** /**
* return ownerid * 当前表单对象
* *
* @memberof DiskFileUpload * @type {*}
*/ * @memberof DiskFileUpload
public getOwnerid() { */
const ownerid = typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid); @Prop() public data!: any;
return ownerid;
} /**
* 当前属性名
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public formItemName!: string;
/**
* 当前属性值
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public value!: string;
/**
* 当前表单状态
*
* @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 myHeaders: any = {Authorization: this.token};
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
const uploadUrl = '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
return uploadUrl;
}
/** /**
* * return folder
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public created(){ public getFolder() {
this.formStateEvent = this.formState.subscribe(($event: any) => { const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
// 表单加载完成 return folder;
if (Object.is($event.type, 'load')) { }
const data = JSON.parse(JSON.stringify($event.data));
// 编辑表单，保存时不进行批量更新 /**
if (data.srfuf == '1') { * return ownertype
this.isCreate = false; *
this.isUpdateBatch = false; * @memberof DiskFileUpload
} */
// 当persistence = true时 public getOwnertype() {
if (this.persistence == true) { const ownertype = typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
// 直接从表单的data数据里获取当前属性的值 return ownertype;
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]); * return ownerid
*
* @memberof DiskFileUpload
*/
public getOwnerid() {
const ownerid = typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
return ownerid;
}
/**
*
*
* @memberof DiskFileUpload
*/
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();
} }
} else {
// 发送get请求获取文件列表
this.getFiles();
} }
} // 表单保存完成
// 表单保存完成 if (Object.is($event.type, 'save')) {
if (Object.is($event.type, 'save')) { // 批量更新文件表中的ownerid
// 批量更新文件表中的ownerid if (this.isUpdateBatch == true && this.uploadFileList.length > 0) {
if (this.isUpdateBatch == true && this.uploadFileList.length > 0) { this.updateFileBatch(this.uploadFileList, 'update');
this.updateFileBatch(this.uploadFileList, 'update'); }
} }
} });
}); }
}
/** /**
* 获取文件列表 * 获取文件列表
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public getFiles(){ public getFiles() {
// 拼接url // 拼接url
let _this:any = this; let _this: any = this;
const getUrl = '/net-disk/files/' + this.getFolder(); const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求 // 发送get请求
Axios.get(getUrl, { Axios.get(getUrl, {
...@@ -348,7 +349,7 @@ export default class DiskFileUpload extends Vue { ...@@ -348,7 +349,7 @@ export default class DiskFileUpload extends Vue {
}, },
}).then(response => { }).then(response => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.getFileFailure')+'!'); Message.error(_this.$t('components.diskFileUpload.getFileFailure') + '!');
return; return;
} }
// 返回的是一个jsonArray // 返回的是一个jsonArray
...@@ -359,272 +360,292 @@ export default class DiskFileUpload extends Vue { ...@@ -359,272 +360,292 @@ export default class DiskFileUpload extends Vue {
} }
} }
}).catch(error => { }).catch(error => {
Message.error(_this.$t('components.diskFileUpload.getFileFailure')+':'+ error); Message.error(_this.$t('components.diskFileUpload.getFileFailure') + ':' + error);
}); });
} }
/** /**
* 自定义上传文件 * 自定义上传文件
* *
* @param 上传文件 * @param 上传文件
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public customUploadFile(param: any) { public customUploadFile(param: any) {
// 上传的文件 // 上传的文件
let _this: any = this; let _this: any = this;
let file = param.file; let file = param.file;
// 文件大小 // formData传参
const isSize = file.size / 1024 / 1024 < this.size; let formData = new FormData();
if (!isSize) { formData.append('file', file);
Message.error(_this.$t('components.diskFileUpload.loadFailure1')+_this.size.toString()+"M!"); // 拼接url
return; const uploadUrl = this.getAction();
// 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => {
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(err => {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + ':' + err);
})
} }
// formData传参
let formData = new FormData(); /**
formData.append('file', file); * 下载文件
// 拼接url *
const uploadUrl = this.getAction(); * @param item 下载文件
// 发送post请求 * @memberof DiskFileUpload
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { */
if (!response || response.status != 200) { public onDownload(item: any) {
Message.error(_this.$t('components.diskFileUpload.loadFailure')+'!'); // 拼接url
} let _this: any = this;
// 返回的是一个jsonobject const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
if (response.data) { const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename);
// 新建表单上传，后续需要批量更新操作 const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
if (this.isCreate == true) { // 发送get请求
this.isUpdateBatch = true; Axios.get(downloadUrl, {
headers: {
'authcode': item.authcode
},
responseType: 'arraybuffer',
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!');
return;
} }
// 保存到文件列表进行显示 // 请求成功，后台返回的是一个文件流
this.uploadFileList.push(response.data); if (response.data) {
// persistence=true时需要持久化表单属性 // 获取文件名
if (this.persistence == true && this.uploadFileList.length > 0) { const disposition = response.headers['content-disposition'];
const value = JSON.stringify(this.uploadFileList); const filename = disposition.split('filename=')[1];
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); // 用blob对象获取文件流
var blob = new Blob([response.data], {type: response.headers['content-type']});
// 创建下载链接
var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性
var a = document.createElement('a');
a.href = href;
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 => {
}).catch(err => { Message.error(_this.$t('components.diskFileUpload.downloadFile') + ':' + error);
Message.error(_this.$t('components.diskFileUpload.loadFailure')+':'+ err); });
}) }
}
/** /**
* 下载文件 * 预览文件
* *
* @param item 下载文件 * @param item 预览文件
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public onDownload(item: any) { public onPreview(item: any) {
// 拼接url // 拼接url
let _this: any = this; const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
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 name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename); const previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name; // 自定义弹框打开url
// 发送get请求 this.showDialog = true;
Axios.get(downloadUrl, { this.iframeUrl = previewUrl;
headers: { }
'authcode': item.authcode
}, /**
responseType: 'arraybuffer', * 编辑文件
}).then(response => { *
if (!response || response.status != 200) { * @param item
Message.error(_this.$t('components.diskFileUpload.downloadFile')+'!'); * @memberof DiskFileUpload
return; */
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;
// 自定义弹框打开url
// this.showDialog = true;
// this.iframeUrl = editUrl;
window.open(editUrl);
}
/**
* 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;
// 自定义弹框打开url
this.showDialog = true;
this.iframeUrl = ocrUrl;
}
/**
* 删除文件
*
* @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请求
Axios.delete(deleteUrl).then(response => {
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 => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + ':' + error);
});
});
} }
// 请求成功，后台返回的是一个文件流 }
if (response.data) {
// 获取文件名 /**
const disposition = response.headers['content-disposition']; * 批量更新文件表的ownerid
const filename = disposition.split('filename=')[1]; *
// 用blob对象获取文件流 * @memberof DiskFileUpload
var blob = new Blob([response.data], {type: response.headers['content-type']}); */
// 创建下载链接 public updateFileBatch(files: any, opt: any) {
var href = URL.createObjectURL(blob); let _this: any = this;
// 创建一个a元素并设置相关属性 // 拼接url
var a = document.createElement('a'); const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
a.href = href; // requestBody参数
a.download = filename; let requestBody = [];
// 添加a元素到当前网页 if (files) {
document.body.appendChild(a); requestBody = files;
// 触发a元素的点击事件，实现下载
a.click();
// 从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
} }
}).catch(error => { // 发送post请求
Message.error(_this.$t('components.diskFileUpload.downloadFile')+':'+ error); Axios.post(updateUrl, requestBody, {
}); headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + '!');
return;
}
}).catch(error => {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error);
});
}
}
</script>
<style lang="less">
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
} }
/** #el-row {
* 预览文件 border: 0px solid red;
* width: 400px;
* @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);
const previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(previewUrl);
} }
/** .withDrag {
* 编辑文件 border: 0px solid grey;
* width: 400px;
* @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/edit/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(editUrl);
} }
/** .withoutDrag {
* ocr识别 border: 0px solid grey;
* @param item width: 400px;
* @memberof DiskFileUpload text-align: left;
*/ padding-left: 0px;
public onOcr(item: any) { padding-top: 0px;
// 拼接url margin-top: 0px;
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;
// 新窗口打开url
window.open(ocrUrl);
} }
/** .fileList {
* 删除文件 width: 400px;
* border: 0px solid grey;
* @param item margin-top: 0px;
* @param index }
* @memberof DiskFileUpload
*/ .fileTitle {
public onRemove(item: any, index: number) { text-align: left;
let _this:any = this; margin-left: 0px;
if (item) { }
MessageBox.confirm(_this.$t('components.diskFileUpload.deleteFile'), _this.$t('components.diskFileUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskFileUpload.true'), .fileTitle i {
cancelButtonText: _this.$t('components.diskFileUpload.false'), margin-right: 5px;
type: 'warning' }
}).then(() => {
//　拼接url .fileMain {
const deleteUrl = '/net-disk/files/' + item.id; text-align: left;
// 发送delete请求 margin-left: 0px;
Axios.delete(deleteUrl).then(response => { margin-top: -10px;
if (!response || response.status != 200) { }
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+'!');
} .fileMain .el-link:nth-child(n+2) {
// 从文件列表中删除 margin-left: 10px;
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 => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+':'+ error);
});
});
}
} }
/** .dialogDiv{
* 批量更新文件表的ownerid // el-dialog头部
* .el-dialog__header{
* @memberof DiskFileUpload height:40px;
*/ }
public updateFileBatch(files: any, opt: any) { // el-dialog面板
let _this:any = this; .el-dialog__wrapper {
// 拼接url height: 90vh;
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid(); overflow: visible;
// requestBody参数 }
let requestBody = [];
if (files) { // el-dialog
requestBody = files; .el-dialog {
height: 100%;
}
// el-dailog内容
.el-dialog__body {
height: inherit;
}
#wps_npIframe{
height: calc(100% - 40px);
} }
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure')+'!');
return;
}
}).catch(error => {
Message.error(_this.$t('components.diskFileUpload.updateFailure')+':'+ error);
});
} }
}
</script>
<style lang="less">
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
}
#el-row {
border: 0px solid red;
width: 400px;
}
.withDrag {
border: 0px solid grey;
width: 400px;
}
.withoutDrag {
border: 0px solid grey;
width: 400px;
text-align: left;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
}
.el-upload__tip {
margin-top: 0px;
}
.fileList {
width: 400px;
border: 0px solid grey;
margin-top: 0px;
}
.fileTitle {
text-align: left;
margin-left: 0px;
}
.fileTitle i {
margin-right: 5px;
}
.fileMain {
text-align: left;
margin-left: 0px;
margin-top: -10px;
}
.fileMain .el-link:nth-child(n+2) {
margin-left: 10px;
}
</style> </style>
\ No newline at end of file
ibzlite-boot/src/main/java/cn/ibizlab/config/DevBootSecurityConfig.java
浏览文件 @ b4c4ef66
...@@ -117,7 +117,9 @@ public class DevBootSecurityConfig extends WebSecurityConfigurerAdapter { ...@@ -117,7 +117,9 @@ public class DevBootSecurityConfig extends WebSecurityConfigurerAdapter {
.antMatchers("/"+downloadpath+"/**").permitAll() .antMatchers("/"+downloadpath+"/**").permitAll()
.antMatchers("/"+uploadpath).permitAll() .antMatchers("/"+uploadpath).permitAll()
.antMatchers("/"+previewpath+"/**").permitAll() .antMatchers("/"+previewpath+"/**").permitAll()
.antMatchers("/lite/**").permitAll(); .antMatchers("/lite/**").permitAll()
.antMatchers("/net-disk/download/**").permitAll()
.antMatchers("/net-disk/**view/**").permitAll();
for (String excludePattern : excludesPattern) { for (String excludePattern : excludesPattern) {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或