Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 28ddd16e 编写于 作者: zcdtk's avatar zcdtk
浏览文件
操作

文件上传参数格式化

上级 e26ce439
显示空白字符变更
内嵌 并排
正在显示 包含 121 行增加 和 146 行删除
src/components/app-mob-file-upload/app-mob-file-upload.vue
浏览文件 @ 28ddd16e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-mobile-file-upload"> <div class="app-mobile-file-upload">
<ion-item-group v-if="files.length > 0"> <ion-item-group v-if="files.length > 0">
<ion-item v-for="file in files" :key="file.id"> <ion-item v-for="file in files" :key="file.id">
<ion-label><a class="file">{{file.name}}</a></ion-label> <ion-label><a class="file" @click="onDownload(file)">{{file.name}}</a></ion-label>
<ion-icon name="close-circle-outline" @click="onDelete(file, null)"></ion-icon> <ion-icon name="close-circle-outline" @click="onDelete(file, null)"></ion-icon>
</ion-item> </ion-item>
</ion-item-group> </ion-item-group>
...@@ -29,6 +29,7 @@ import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorat ...@@ -29,6 +29,7 @@ import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorat
import { Environment } from '@/environments/environment'; import { Environment } from '@/environments/environment';
import { Subject, Unsubscribable } from 'rxjs'; import { Subject, Unsubscribable } from 'rxjs';
import Axios from 'axios'; import Axios from 'axios';
import qs from 'qs';
import { Uploader } from 'vant'; import { Uploader } from 'vant';
...@@ -106,10 +107,7 @@ export default class AppMobFileUpload extends Vue { ...@@ -106,10 +107,7 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
public onDelete(file: any, detail: any): void { public onDelete(file: any, detail: any): void {
this.onRemove({ this.onRemove({ id: file.id,name: file.name}, this.files);
id: file.id,
name: file.name
}, this.files);
} }
/** /**
...@@ -121,6 +119,7 @@ export default class AppMobFileUpload extends Vue { ...@@ -121,6 +119,7 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
public beforeRead(file: any, detail: any): boolean { public beforeRead(file: any, detail: any): boolean {
this.dataProcess();
if (file && Array.isArray(file)) { if (file && Array.isArray(file)) {
this.$notice.warning('该功能只支持单个文件上传'); this.$notice.warning('该功能只支持单个文件上传');
return false; return false;
...@@ -162,6 +161,14 @@ export default class AppMobFileUpload extends Vue { ...@@ -162,6 +161,14 @@ export default class AppMobFileUpload extends Vue {
} }
// MOB LOGIC END // MOB LOGIC END
/**
* 是否支持多个上传
*
* @type {boolean}
* @memberof AppMobFileUpload
*/
@Prop({ default: true }) public multiple?: boolean;
/** /**
* 表单状态 * 表单状态
* *
...@@ -241,28 +248,36 @@ export default class AppMobFileUpload extends Vue { ...@@ -241,28 +248,36 @@ export default class AppMobFileUpload extends Vue {
@Prop() public disabled?: boolean; @Prop() public disabled?: boolean;
/** /**
* 上传参数 * 视图上下文
* *
* @type {string} * @type {*}
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
@Prop() public uploadparams?: string; @Prop({ default: {} }) context: any;
/** /**
* 下载参数 * 视图参数
* *
* @type {string} * @type {*}
* @memberof AppMobFileUpload
*/
@Prop({ default: {} }) viewparams: any;
/**
* 上传参数
*
* @type {*}
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
@Prop() public exportparams?: string; @Prop({ default: {} }) uploadParam: any;
/** /**
* 自定义参数 * 下载参数
* *
* @type {*} * @type {*}
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
@Prop() public customparams?: any; @Prop({ default: {} }) exportParam: any;
/** /**
* 上传文件路径 * 上传文件路径
...@@ -285,30 +300,6 @@ export default class AppMobFileUpload extends Vue { ...@@ -285,30 +300,6 @@ export default class AppMobFileUpload extends Vue {
*/ */
@Provide() public files: Array<any> = []; @Provide() public files: Array<any> = [];
/**
* 上传keys
*
* @type {Array<any>}
* @memberof AppMobFileUpload
*/
public upload_keys: Array<any> = [];
/**
* 导出keys
*
* @type {Array<any>}
* @memberof AppMobFileUpload
*/
public export_keys: Array<any> = [];
/**
* 自定义数组
*
* @type {Array<any>}
* @memberof AppMobFileUpload
*/
public custom_arr: Array<any> = [];
/** /**
* 应用参数 * 应用参数
* *
...@@ -324,21 +315,18 @@ export default class AppMobFileUpload extends Vue { ...@@ -324,21 +315,18 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
private dataProcess(): void { private dataProcess(): void {
let upload_arr: Array<string> = []; const { context: uploadContext, param: uploadParam }
let export_arr: Array<string> = []; = this.$viewTool.doEditorItemParam(this.uploadParam, this.context, this.viewparams, JSON.parse(this.data));
const _data: any = JSON.parse(this.data); const { context: exportContext, param: exportParam }
this.upload_keys.forEach((key: string) => { = this.$viewTool.doEditorItemParam(this.exportParam, this.context, this.viewparams, JSON.parse(this.data));
upload_arr.push(`${key}=${_data[key]}`);
});
this.export_keys.forEach((key: string) => {
export_arr.push(`${key}=${_data[key]}`);
});
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`; let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) { const uploadContextStr: string = qs.stringify(uploadContext, { delimiter: '&' });
_url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`; const uploadParamStr: string = qs.stringify(uploadParam, { delimiter: '&' });
if (!Object.is(uploadContextStr, '') || !Object.is(uploadParamStr, '')) {
_uploadUrl = `${_uploadUrl}?${uploadContextStr}&${uploadParamStr}`;
} }
this.uploadUrl = _url; this.uploadUrl = _uploadUrl;
this.files.forEach((file: any) => { this.files.forEach((file: any) => {
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
...@@ -349,11 +337,14 @@ export default class AppMobFileUpload extends Vue { ...@@ -349,11 +337,14 @@ export default class AppMobFileUpload extends Vue {
} }
return; return;
} }
let url = `${this.downloadUrl}/${file.id}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) { let _downloadUrl = `${this.downloadUrl}/${file.id}`;
url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`; const exportContextStr: string = qs.stringify(exportContext, { delimiter: '&' });
const exportParamStr: string = qs.stringify(exportParam, { delimiter: '&' });
if (!Object.is(exportContextStr, '') || !Object.is(exportParamStr, '')) {
_downloadUrl = `${_downloadUrl}?${exportContextStr}&${exportParamStr}`;
} }
file.url = url; file.url = _downloadUrl;
}); });
} }
...@@ -368,11 +359,14 @@ export default class AppMobFileUpload extends Vue { ...@@ -368,11 +359,14 @@ export default class AppMobFileUpload extends Vue {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
if (this.value) { if (this.value) {
// console.log(this.value);
this.files = JSON.parse(this.value); this.files = JSON.parse(this.value);
} }
this.dataProcess(); this.dataProcess();
} }
// 表单保存完成 和 表单项更新
if (Object.is($event.type, "save") || Object.is($event.type, "updateformitem")) {
this.dataProcess();
}
}); });
} }
} }
...@@ -384,33 +378,11 @@ export default class AppMobFileUpload extends Vue { ...@@ -384,33 +378,11 @@ export default class AppMobFileUpload extends Vue {
*/ */
public mounted() { public mounted() {
this.appData = this.$store.getters.getAppData(); this.appData = this.$store.getters.getAppData();
let custom_arr: Array<string> = [];
let upload_keys: Array<string> = [];
let export_keys: Array<string> = [];
if (this.uploadparams && !Object.is(this.uploadparams, '')) {
upload_keys = this.uploadparams.split(';');
}
if (this.exportparams && !Object.is(this.exportparams, '')) {
export_keys = this.exportparams.split(';');
}
if (this.customparams && !Object.is(this.customparams, '')) {
Object.keys(this.customparams).forEach((name: string) => {
custom_arr.push(`${name}=${this.customparams[name]}`);
});
}
this.upload_keys = upload_keys;
this.export_keys = export_keys;
this.custom_arr = custom_arr;
if (this.value) { if (this.value) {
this.files = JSON.parse(this.value); this.files = JSON.parse(this.value);
} }
this.dataProcess(); this.dataProcess();
this.changeLabelStyle(); this.changeLabelStyle();
} }
/** /**
...@@ -457,16 +429,6 @@ export default class AppMobFileUpload extends Vue { ...@@ -457,16 +429,6 @@ export default class AppMobFileUpload extends Vue {
} }
} }
/**
* 上传之前
*
* @param {*} file
* @memberof AppMobFileUpload
*/
public beforeUpload(file: any) {
// console.log('上传之前');
}
/** /**
* 上传成功回调 * 上传成功回调
* *
...@@ -480,24 +442,15 @@ export default class AppMobFileUpload extends Vue { ...@@ -480,24 +442,15 @@ export default class AppMobFileUpload extends Vue {
if (!response) { if (!response) {
return; return;
} }
const data = { const data = { name: response.name, id: response.id };
name: response.name,
id: response.id
};
let arr: Array<any> = []; let arr: Array<any> = [];
this.files.forEach((_file: any) => { this.files.forEach((_file: any) => {
arr.push({ arr.push({ name: _file.name, id: _file.id });
name: _file.name,
id: _file.id
})
}); });
arr.push(data); arr.push(data);
let value: any = arr.length > 0 ? JSON.stringify(arr) : null; let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { this.$emit('formitemvaluechange', { name: this.name, value: value });
name: this.name,
value: value
});
} }
/** /**
...@@ -523,17 +476,11 @@ export default class AppMobFileUpload extends Vue { ...@@ -523,17 +476,11 @@ export default class AppMobFileUpload extends Vue {
let arr: Array<any> = []; let arr: Array<any> = [];
fileList.forEach((f: any) => { fileList.forEach((f: any) => {
if (f.id != file.id) { if (f.id != file.id) {
arr.push({ arr.push({ name: f.name, id: f.id });
name: f.name,
id: f.id
});
} }
}); });
let value: any = arr.length > 0 ? JSON.stringify(arr) : null; let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { this.$emit('formitemvaluechange', { name: this.name, value: value });
name: this.name,
value: value
});
} }
/** /**
...@@ -543,43 +490,9 @@ export default class AppMobFileUpload extends Vue { ...@@ -543,43 +490,9 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
public onDownload(file: any) { public onDownload(file: any) {
this.dataProcess();
window.open(file.url); window.open(file.url);
} }
/**
* 预览图片地址
*
* @type {string}
* @memberof AppMobFileUpload
*/
public dialogImageUrl: string = '';
/**
* 是否显示预览界面
*
* @type {boolean}
* @memberof AppMobFileUpload
*/
public dialogVisible: boolean = false;
/**
* 是否支持多个上传
*
* @type {boolean}
* @memberof AppMobFileUpload
*/
@Prop({ default: true }) public multiple?: boolean;
/**
* 预览
*
* @param {*} file
* @memberof AppMobFileUpload
*/
public onPreview(file: any) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
} }
</script> </script>
......
src/utils/view-tool/view-tool.ts
浏览文件 @ 28ddd16e
...@@ -270,4 +270,66 @@ export class ViewTool { ...@@ -270,4 +270,66 @@ export class ViewTool {
public getIndexViewParam(): any { public getIndexViewParam(): any {
return this.indexViewParam; return this.indexViewParam;
} }
/**
* 处理编辑器参数
*
* @param {*} [itemParam={}] 预定义编辑器参数
* @param {*} [context={}] 视图上下文
* @param {*} [viewparams={}] 视图参数
* @param {*} [formData={}] 表单数据
* @returns {{ context: {}, param: {} }} 返回的对象
* @memberof ViewTool
*/
public doEditorItemParam(itemParam: any = {}, context: any = {}, viewparams: any = {}, formData: any = {}): { context: {}, param: {} } {
let _itemParam = { context: {}, param: {} };
const { context: _context, param: _param } = itemParam;
// 处理上下文
if (_context && Object.keys(_context).length > 0) {
Object.keys(_context).forEach((name: string) => {
if (!name) {
return;
}
let value: string | null = _context[name];
if (value && value.startsWith('%') && value.endsWith('%')) {
const key: string = value.slice(1, -1);
if (!(context && context.hasOwnProperty(key)) && !(formData && formData.hasOwnProperty(key))) {
return;
}
if (context && context.hasOwnProperty(key)) {
value = context[key];
}
if (formData && formData.hasOwnProperty(key)) {
value = formData[key];
}
}
Object.assign(_itemParam.context, { [name]: value });
});
}
// 处理参数
if (_param && Object.keys(_param).length > 0) {
Object.keys(_param).forEach((name: string) => {
if (!name) {
return;
}
let value: string | null = _param[name];
if (value && value.startsWith('%') && value.endsWith('%')) {
const key: string = value.slice(1, -1);
if (!(viewparams && viewparams.hasOwnProperty(key)) && !(formData && formData.hasOwnProperty(key))) {
return;
}
if (viewparams && viewparams.hasOwnProperty(key)) {
value = viewparams[key];
}
if (formData && formData.hasOwnProperty(key)) {
value = formData[key];
}
}
Object.assign(_itemParam.param, { [name]: value });
});
}
return _itemParam;
}
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或