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 @@
<div class="app-mobile-file-upload">
<ion-item-group v-if="files.length > 0">
<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-item>
</ion-item-group>
......@@ -15,9 +15,9 @@
:result-type="resultType"
:before-read="beforeRead"
:after-read="afterRead">
<ion-button color="primary">
<ion-icon slot="start" name="image-outline"></ion-icon>
{{$t('uploadtext')}}
<ion-button color="primary">
<ion-icon slot="start" name="image-outline"></ion-icon>
{{$t('uploadtext')}}
</ion-button>
</van-uploader>
</ion-row>
......@@ -29,6 +29,7 @@ import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorat
import { Environment } from '@/environments/environment';
import { Subject, Unsubscribable } from 'rxjs';
import Axios from 'axios';
import qs from 'qs';
import { Uploader } from 'vant';
......@@ -106,10 +107,7 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload
*/
public onDelete(file: any, detail: any): void {
this.onRemove({
id: file.id,
name: file.name
}, this.files);
this.onRemove({ id: file.id,name: file.name}, this.files);
}
/**
......@@ -121,6 +119,7 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload
*/
public beforeRead(file: any, detail: any): boolean {
this.dataProcess();
if (file && Array.isArray(file)) {
this.$notice.warning('该功能只支持单个文件上传');
return false;
......@@ -162,6 +161,14 @@ export default class AppMobFileUpload extends Vue {
}
// MOB LOGIC END
/**
* 是否支持多个上传
*
* @type {boolean}
* @memberof AppMobFileUpload
*/
@Prop({ default: true }) public multiple?: boolean;
/**
* 表单状态
*
......@@ -241,28 +248,36 @@ export default class AppMobFileUpload extends Vue {
@Prop() public disabled?: boolean;
/**
* 上传参数
* 视图上下文
*
* @type {string}
* @type {*}
* @memberof AppMobFileUpload
*/
@Prop() public uploadparams?: string;
@Prop({ default: {} }) context: any;
/**
* 下载参数
* 视图参数
*
* @type {string}
* @type {*}
* @memberof AppMobFileUpload
*/
@Prop({ default: {} }) viewparams: any;
/**
* 上传参数
*
* @type {*}
* @memberof AppMobFileUpload
*/
@Prop() public exportparams?: string;
@Prop({ default: {} }) uploadParam: any;
/**
* 自定义参数
* 下载参数
*
* @type {*}
* @memberof AppMobFileUpload
*/
@Prop() public customparams?: any;
@Prop({ default: {} }) exportParam: any;
/**
* 上传文件路径
......@@ -285,30 +300,6 @@ export default class AppMobFileUpload extends Vue {
*/
@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 {
* @memberof AppMobFileUpload
*/
private dataProcess(): void {
let upload_arr: Array<string> = [];
let export_arr: Array<string> = [];
const _data: any = JSON.parse(this.data);
this.upload_keys.forEach((key: string) => {
upload_arr.push(`${key}=${_data[key]}`);
});
this.export_keys.forEach((key: string) => {
export_arr.push(`${key}=${_data[key]}`);
});
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) {
_url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
const { context: uploadContext, param: uploadParam }
= this.$viewTool.doEditorItemParam(this.uploadParam, this.context, this.viewparams, JSON.parse(this.data));
const { context: exportContext, param: exportParam }
= this.$viewTool.doEditorItemParam(this.exportParam, this.context, this.viewparams, JSON.parse(this.data));
let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
const uploadContextStr: string = qs.stringify(uploadContext, { delimiter: '&' });
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) => {
if (process.env.NODE_ENV === 'development') {
......@@ -349,11 +337,14 @@ export default class AppMobFileUpload extends Vue {
}
return;
}
let url = `${this.downloadUrl}/${file.id}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) {
url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
let _downloadUrl = `${this.downloadUrl}/${file.id}`;
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 {
// 表单加载完成
if (Object.is($event.type, 'load')) {
if (this.value) {
// console.log(this.value);
this.files = JSON.parse(this.value);
}
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 {
*/
public mounted() {
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) {
this.files = JSON.parse(this.value);
}
this.dataProcess();
this.changeLabelStyle();
}
/**
......@@ -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 {
if (!response) {
return;
}
const data = {
name: response.name,
id: response.id
};
const data = { name: response.name, id: response.id };
let arr: Array<any> = [];
this.files.forEach((_file: any) => {
arr.push({
name: _file.name,
id: _file.id
})
arr.push({ name: _file.name, id: _file.id });
});
arr.push(data);
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', {
name: this.name,
value: value
});
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
......@@ -523,17 +476,11 @@ export default class AppMobFileUpload extends Vue {
let arr: Array<any> = [];
fileList.forEach((f: any) => {
if (f.id != file.id) {
arr.push({
name: f.name,
id: f.id
});
arr.push({ name: f.name, id: f.id });
}
});
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', {
name: this.name,
value: value
});
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
......@@ -543,43 +490,9 @@ export default class AppMobFileUpload extends Vue {
* @memberof AppMobFileUpload
*/
public onDownload(file: any) {
this.dataProcess();
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>
......
src/utils/view-tool/view-tool.ts
浏览文件 @ 28ddd16e
......@@ -270,4 +270,66 @@ export class ViewTool {
public getIndexViewParam(): any {
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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或