提交 f212b69e 编写于 作者: zcdtk's avatar zcdtk

代码格式化

上级 1343fe66
<template> <template>
<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">{{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>
<ion-row> <ion-row>
<van-uploader :class="singleChoiceBtnState" multiple="false" :disabled="state" :result-type="resultType" <van-uploader :class="singleChoiceBtnState" multiple="false" :disabled="state" :result-type="resultType"
:before-read="beforeRead" :after-read="afterRead"> :before-read="beforeRead" :after-read="afterRead">
<ion-button color="primary"> <ion-button color="primary">
<ion-icon slot="start" name="image-outline"></ion-icon> <ion-icon slot="start" name="image-outline"></ion-icon>
{{$t('uploadtext')}} {{$t('uploadtext')}}
</ion-button> </ion-button>
</van-uploader> </van-uploader>
</ion-row> </ion-row>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Vue,Component, Prop,Provide,Emit,Watch} from 'vue-property-decorator'; import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
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 { Uploader} from 'vant'; import { Uploader } from 'vant';
Vue.use(Uploader); Vue.use(Uploader);
@Component({ @Component({
i18n: { i18n: {
messages: { messages: {
'ZH-CN': { 'ZH-CN': {
...@@ -40,8 +39,8 @@ ...@@ -40,8 +39,8 @@
} }
}, },
components: {} components: {}
}) })
export default class AppMobFileUpload extends Vue { export default class AppMobFileUpload extends Vue {
// MOB LOGIC BEGIN // MOB LOGIC BEGIN
/** /**
* 单选按钮状态 * 单选按钮状态
...@@ -50,11 +49,11 @@ ...@@ -50,11 +49,11 @@
* @type {Array<string>} * @type {Array<string>}
* @memberof AppMobFileUpload * @memberof AppMobFileUpload
*/ */
get singleChoiceBtnState(): Array < string > { get singleChoiceBtnState(): Array<string> {
return [ return [
this.files.length > 0 ? 'file-list' : '', this.files.length > 0 ? 'file-list' : '',
!this.multiple && this.files.length === 1 ? 'hidden-choice-button' : '', !this.multiple && this.files.length === 1 ? 'hidden-choice-button' : '',
]; ];
} }
/** /**
...@@ -62,18 +61,18 @@ ...@@ -62,18 +61,18 @@
* *
* @readonly * @readonly
* @type {boolean} * @type {boolean}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
get state(): boolean { get state(): boolean {
// 禁用 // 禁用
if (this.disabled) { if (this.disabled) {
return true; return true;
} }
// 单选 // 单选
if (!this.multiple && this.files.length === 1) { if (!this.multiple && this.files.length === 1) {
return true; return true;
} }
return false; return false;
} }
/** /**
...@@ -81,15 +80,15 @@ ...@@ -81,15 +80,15 @@
* *
* @private * @private
* @type {Array<any>} * @type {Array<any>}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
private devFiles: Array < any > = []; private devFiles: Array<any> = [];
/** /**
* 文件上传模式 * 文件上传模式
* *
* @type {string} * @type {string}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public resultType: string = process.env.NODE_ENV === 'development' ? 'dataUrl' : 'file'; public resultType: string = process.env.NODE_ENV === 'development' ? 'dataUrl' : 'file';
...@@ -98,13 +97,13 @@ ...@@ -98,13 +97,13 @@
* *
* @param {*} file 文件信息 * @param {*} file 文件信息
* @param {*} detail 详情 * @param {*} detail 详情
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public onDelete(file: any, detail: any): void { public onDelete(file: any, detail: any): void {
this.onRemove({ this.onRemove({
id: file.id, id: file.id,
name: file.name name: file.name
}, this.files); }, this.files);
} }
/** /**
...@@ -113,17 +112,17 @@ ...@@ -113,17 +112,17 @@
* @param {*} file * @param {*} file
* @param {*} detail * @param {*} detail
* @returns {boolean} * @returns {boolean}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public beforeRead(file: any, detail: any): boolean { public beforeRead(file: any, detail: any): boolean {
if (file && Array.isArray(file)) { if (file && Array.isArray(file)) {
this.$notify({ this.$notify({
type: 'warning', type: 'warning',
message: '该功能只支持单个文件上传' message: '该功能只支持单个文件上传'
}); });
return false; return false;
} }
return true; return true;
} }
/** /**
...@@ -132,31 +131,31 @@ ...@@ -132,31 +131,31 @@
* @protected * @protected
* @param {*} file 文件信息 * @param {*} file 文件信息
* @param {*} detail 详情 * @param {*} detail 详情
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
protected afterRead(file: any, detail: any): void { protected afterRead(file: any, detail: any): void {
const params = new FormData() const params = new FormData()
params.append('file', file.file, file.file.name) params.append('file', file.file, file.file.name)
const config = { const config = {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
}
Axios.post(this.uploadUrl, params, config).then((response: any) => {
if (response && response.data && response.status === 200) {
let data: any = response.data;
if (process.env.NODE_ENV === 'development') {
this.devFiles.push(Object.assign({}, data, {
url: file.content
}));
}
this.onSuccess(data, file, this.files);
} else {
this.onError(response, file, this.files);
} }
}).catch((response: any) => { Axios.post(this.uploadUrl, params, config).then((response: any) => {
this.onError(response, file, this.files); if (response && response.data && response.status === 200) {
}); let data: any = response.data;
if (process.env.NODE_ENV === 'development') {
this.devFiles.push(Object.assign({}, data, {
url: file.content
}));
}
this.onSuccess(data, file, this.files);
} else {
this.onError(response, file, this.files);
}
}).catch((response: any) => {
this.onError(response, file, this.files);
});
} }
// MOB LOGIC END // MOB LOGIC END
...@@ -164,24 +163,24 @@ ...@@ -164,24 +163,24 @@
* 表单状态 * 表单状态
* *
* @type {Subject<any>} * @type {Subject<any>}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public formState ? : Subject < any > @Prop() public formState?: Subject<any>
/** /**
* 是否忽略表单项书香值变化 * 是否忽略表单项书香值变化
* *
* @type {boolean} * @type {boolean}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public ignorefieldvaluechange ? : boolean; @Prop() public ignorefieldvaluechange?: boolean;
/** /**
* 表单状态事件 * 表单状态事件
* *
* @private * @private
* @type {(Unsubscribable | undefined)} * @type {(Unsubscribable | undefined)}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
private formStateEvent: Unsubscribable | undefined; private formStateEvent: Unsubscribable | undefined;
...@@ -189,7 +188,7 @@ ...@@ -189,7 +188,7 @@
* 表单数据 * 表单数据
* *
* @type {string} * @type {string}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public data!: string; @Prop() public data!: string;
...@@ -197,9 +196,9 @@ ...@@ -197,9 +196,9 @@
* 初始化值 * 初始化值
* *
* @type {*} * @type {*}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public value ? : any; @Prop() public value?: any;
/** /**
* 数据值变化 * 数据值变化
...@@ -207,26 +206,26 @@ ...@@ -207,26 +206,26 @@
* @param {*} newval * @param {*} newval
* @param {*} val * @param {*} val
* @returns * @returns
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Watch('value') @Watch('value')
onValueChange(newval: any, val: any) { onValueChange(newval: any, val: any) {
if (this.ignorefieldvaluechange) { if (this.ignorefieldvaluechange) {
return; return;
} }
if (newval) { if (newval) {
this.files = JSON.parse(newval); this.files = JSON.parse(newval);
this.dataProcess(); this.dataProcess();
} else { } else {
this.files = []; this.files = [];
} }
} }
/** /**
* 所属表单项名称 * 所属表单项名称
* *
* @type {string} * @type {string}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public name!: string; @Prop() public name!: string;
...@@ -234,84 +233,84 @@ ...@@ -234,84 +233,84 @@
* 是否禁用 * 是否禁用
* *
* @type {boolean} * @type {boolean}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public disabled ? : boolean; @Prop() public disabled?: boolean;
/** /**
* 上传参数 * 上传参数
* *
* @type {string} * @type {string}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public uploadparams ? : string; @Prop() public uploadparams?: string;
/** /**
* 下载参数 * 下载参数
* *
* @type {string} * @type {string}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public exportparams ? : string; @Prop() public exportparams?: string;
/** /**
* 自定义参数 * 自定义参数
* *
* @type {*} * @type {*}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop() public customparams ? : any; @Prop() public customparams?: any;
/** /**
* 上传文件路径 * 上传文件路径
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public uploadUrl = Environment.BaseUrl + Environment.UploadFile; public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
/** /**
* 下载文件路径 * 下载文件路径
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public downloadUrl = Environment.BaseUrl + Environment.ExportFile; public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
/** /**
* 文件列表 * 文件列表
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Provide() public files: Array < any > = []; @Provide() public files: Array<any> = [];
/** /**
* 上传keys * 上传keys
* *
* @type {Array<any>} * @type {Array<any>}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public upload_keys: Array < any > = []; public upload_keys: Array<any> = [];
/** /**
* 导出keys * 导出keys
* *
* @type {Array<any>} * @type {Array<any>}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public export_keys: Array < any > = []; public export_keys: Array<any> = [];
/** /**
* 自定义数组 * 自定义数组
* *
* @type {Array<any>} * @type {Array<any>}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public custom_arr: Array < any > = []; public custom_arr: Array<any> = [];
/** /**
* 应用参数 * 应用参数
* *
* @type {*} * @type {*}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public appData: any = ""; public appData: any = "";
...@@ -319,148 +318,150 @@ ...@@ -319,148 +318,150 @@
* 数据处理 * 数据处理
* *
* @private * @private
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
private dataProcess(): void { private dataProcess(): void {
let upload_arr: Array < string > = []; let upload_arr: Array<string> = [];
let export_arr: Array < string > = []; let export_arr: Array<string> = [];
const _data: any = JSON.parse(this.data); const _data: any = JSON.parse(this.data);
this.upload_keys.forEach((key: string) => { this.upload_keys.forEach((key: string) => {
upload_arr.push(`${key}=${_data[key]}`); upload_arr.push(`${key}=${_data[key]}`);
}); });
this.export_keys.forEach((key: string) => { this.export_keys.forEach((key: string) => {
export_arr.push(`${key}=${_data[key]}`); export_arr.push(`${key}=${_data[key]}`);
}); });
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`; 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('&')}`;
}
this.uploadUrl = _url;
this.files.forEach((file: any) => {
if (process.env.NODE_ENV === 'development') {
let index = this.devFiles.findIndex((devFile: any) => Object.is(devFile.id, file.id));
if (index !== -1) {
file.url = this.devFiles[index].url;
file.isImage = true;
}
return;
}
let url = `${this.downloadUrl}/${file.id}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) { if (upload_arr.length > 0 || this.custom_arr.length > 0) {
url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`; _url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
} }
file.url = url; this.uploadUrl = _url;
});
this.files.forEach((file: any) => {
if (process.env.NODE_ENV === 'development') {
let index = this.devFiles.findIndex((devFile: any) => Object.is(devFile.id, file.id));
if (index !== -1) {
file.url = this.devFiles[index].url;
file.isImage = true;
}
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('&')}`;
}
file.url = url;
});
} }
/** /**
* vue 生命周期 * vue 生命周期
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public created() { public created() {
if (this.formState) { if (this.formState) {
this.formStateEvent = this.formState.subscribe(($event: any) => { this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
if (this.value) { if (this.value) {
// console.log(this.value); // console.log(this.value);
this.files = JSON.parse(this.value); this.files = JSON.parse(this.value);
} }
this.dataProcess(); this.dataProcess();
} }
}); });
} }
} }
/** /**
* vue 生命周期 * vue 生命周期
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public mounted() { public mounted() {
this.appData = this.$store.getters.getAppData(); this.appData = this.$store.getters.getAppData();
let custom_arr: Array < string > = []; let custom_arr: Array<string> = [];
let upload_keys: Array < string > = []; let upload_keys: Array<string> = [];
let export_keys: Array < string > = []; let export_keys: Array<string> = [];
if (this.uploadparams && !Object.is(this.uploadparams, '')) { if (this.uploadparams && !Object.is(this.uploadparams, '')) {
upload_keys = this.uploadparams.split(';'); upload_keys = this.uploadparams.split(';');
} }
if (this.exportparams && !Object.is(this.exportparams, '')) { if (this.exportparams && !Object.is(this.exportparams, '')) {
export_keys = this.exportparams.split(';'); export_keys = this.exportparams.split(';');
} }
if (this.customparams && !Object.is(this.customparams, '')) { if (this.customparams && !Object.is(this.customparams, '')) {
Object.keys(this.customparams).forEach((name: string) => { Object.keys(this.customparams).forEach((name: string) => {
custom_arr.push(`${name}=${this.customparams[name]}`); custom_arr.push(`${name}=${this.customparams[name]}`);
}); });
} }
this.upload_keys = upload_keys; this.upload_keys = upload_keys;
this.export_keys = export_keys; this.export_keys = export_keys;
this.custom_arr = custom_arr; 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();
} }
/** /**
* 修改label默认样式 * 修改label默认样式
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public changeLabelStyle() { public changeLabelStyle() {
document.querySelectorAll(".app-mobile-file-upload").forEach((element: any) => { document.querySelectorAll(".app-mobile-file-upload").forEach((element: any) => {
let prev = this.getNearEle(element, 1); let prev = this.getNearEle(element, 1);
prev.style.transform = 'none'; if (prev) {
}) prev.style.transform = 'none';
}
})
} }
/** /**
* 查找相邻前一个元素 * 查找相邻前一个元素
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public getNearEle(ele: any, type: any) { public getNearEle(ele: any, type: any) {
type = type == 1 ? "previousSibling" : "nextSibling"; type = type == 1 ? "previousSibling" : "nextSibling";
var nearEle = ele[type]; var nearEle = ele[type];
while (nearEle) { while (nearEle) {
if (nearEle.nodeType === 1) { if (nearEle.nodeType === 1) {
return nearEle; return nearEle;
} }
nearEle = nearEle[type]; nearEle = nearEle[type];
if (!nearEle) { if (!nearEle) {
break; break;
}
} }
} return null;
return null;
} }
/** /**
* 组件销毁 * 组件销毁
* *
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public destroyed(): void { public destroyed(): void {
if (this.formStateEvent) { if (this.formStateEvent) {
this.formStateEvent.unsubscribe(); this.formStateEvent.unsubscribe();
} }
} }
/** /**
* 上传之前 * 上传之前
* *
* @param {*} file * @param {*} file
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public beforeUpload(file: any) { public beforeUpload(file: any) {
// console.log('上传之前'); // console.log('上传之前');
} }
/** /**
...@@ -470,30 +471,30 @@ ...@@ -470,30 +471,30 @@
* @param {*} file * @param {*} file
* @param {*} fileList * @param {*} fileList
* @returns * @returns
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public onSuccess(response: any, file: any, fileList: any) { public onSuccess(response: any, file: any, fileList: any) {
if (!response) { if (!response) {
return; return;
} }
const data = { const data = {
name: response.name, name: response.name,
id: response.id 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, name: _file.name,
id: _file.id 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, name: this.name,
value: value value: value
}); });
} }
/** /**
...@@ -502,13 +503,13 @@ ...@@ -502,13 +503,13 @@
* @param {*} error * @param {*} error
* @param {*} file * @param {*} file
* @param {*} fileList * @param {*} fileList
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public onError(error: any, file: any, fileList: any) { public onError(error: any, file: any, fileList: any) {
this.$notify({ this.$notify({
type: 'danger', type: 'danger',
message: '上传失败' message: '上传失败'
}); });
} }
/** /**
...@@ -516,40 +517,40 @@ ...@@ -516,40 +517,40 @@
* *
* @param {*} file * @param {*} file
* @param {*} fileList * @param {*} fileList
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public onRemove(file: any, fileList: any) { public onRemove(file: any, fileList: any) {
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, name: f.name,
id: f.id 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, name: this.name,
value: value value: value
}); });
} }
/** /**
* 下载文件 * 下载文件
* *
* @param {*} file * @param {*} file
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public onDownload(file: any) { public onDownload(file: any) {
window.open(file.url); window.open(file.url);
} }
/** /**
* 预览图片地址 * 预览图片地址
* *
* @type {string} * @type {string}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public dialogImageUrl: string = ''; public dialogImageUrl: string = '';
...@@ -557,7 +558,7 @@ ...@@ -557,7 +558,7 @@
* 是否显示预览界面 * 是否显示预览界面
* *
* @type {boolean} * @type {boolean}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public dialogVisible: boolean = false; public dialogVisible: boolean = false;
...@@ -565,23 +566,21 @@ ...@@ -565,23 +566,21 @@
* 是否支持多个上传 * 是否支持多个上传
* *
* @type {boolean} * @type {boolean}
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
@Prop({ @Prop({ default: true }) public multiple?: boolean;
default: true
}) public multiple ? : boolean;
/** /**
* 预览 * 预览
* *
* @param {*} file * @param {*} file
* @memberof AppMobPicture * @memberof AppMobFileUpload
*/ */
public onPreview(file: any) { public onPreview(file: any) {
this.dialogImageUrl = file.url; this.dialogImageUrl = file.url;
this.dialogVisible = true; this.dialogVisible = true;
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
......
...@@ -395,11 +395,13 @@ export default class AppMobPicture extends Vue { ...@@ -395,11 +395,13 @@ export default class AppMobPicture extends Vue {
* @memberof AppMobPicture * @memberof AppMobPicture
*/ */
public changeLabelStyle() { public changeLabelStyle() {
document.querySelectorAll(".app-mobile-picture").forEach((element: any) => { document.querySelectorAll(".app-mobile-picture").forEach((element: any) => {
let prev = this.getNearEle(element, 1); let prev = this.getNearEle(element, 1);
prev.style.transform = 'none'; if (prev) {
prev.style.marginBottom = "10px"; prev.style.transform = 'none';
}) prev.style.marginBottom = "10px";
}
});
} }
/** /**
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册