提交 9fde3ebe 编写于 作者: tony001's avatar tony001

新增动态表单组件 --- fix3

上级 5109c277
<template> <template>
<div class='app-form-part' v-if="formOption"> <div class='app-form-part' v-if="loadState">
<avue-form :option="formOption" v-model="formVal"></avue-form> <avue-form :option="formOption" v-model="formVal"></avue-form>
</div> </div>
</template> </template>
...@@ -98,7 +98,7 @@ export default class AppFormPart extends Vue { ...@@ -98,7 +98,7 @@ export default class AppFormPart extends Vue {
* @type {(Subscription | undefined)} * @type {(Subscription | undefined)}
* @memberof AppFormPart * @memberof AppFormPart
*/ */
public remoteUrl:string =""; public remoteUrl:string =`/getFormModel/${this.appCodeName}/${this.deCodeName}/${this.formCodeName}/${this.formDetailCodeName}`;
/** /**
* 动态表单配置对象 * 动态表单配置对象
...@@ -109,12 +109,40 @@ export default class AppFormPart extends Vue { ...@@ -109,12 +109,40 @@ export default class AppFormPart extends Vue {
public formOption:any; public formOption:any;
/** /**
* 动态表单值对象 * 当前动态表单绑定值
* *
* @type {*} * @type {*}
* @memberof AppFormPart * @memberof AppFormPart
*/ */
public formVal:any; public curFormValue:any = {};
/**
* 获取动态表单值对象
*
* @type {*}
* @memberof AppFormPart
*/
get formVal(){
return this.curFormValue;
}
/**
* 设置动态表单值对象
*
* @type {*}
* @memberof AppFormPart
*/
set formVal(data:any){
this.$emit("change",{name:this.name,value:data});
}
/**
* 加载数据状态
*
* @type {*}
* @memberof AppFormPart
*/
public loadState:boolean = false;
/** /**
* 初始化组件(vue生命周期) * 初始化组件(vue生命周期)
...@@ -126,12 +154,48 @@ export default class AppFormPart extends Vue { ...@@ -126,12 +154,48 @@ export default class AppFormPart extends Vue {
if (this.formState) { if (this.formState) {
this.formStateEvent = this.formState.subscribe(({ type, data }) => { this.formStateEvent = this.formState.subscribe(({ type, data }) => {
if (Object.is("load", type)){ if (Object.is("load", type)){
this.loadRemoteFormModel(); this.loadRemoteFormModel().then((result:any) =>{
this.initStateData(result);
})
} }
}); });
} }
} }
/**
* 初始化状态数据
*
* @type {Subject<any>}
* @memberof AppFormPart
*/
public initStateData(modelData:any){
this.computedFormVal(modelData);
this.formOption = modelData;
this.loadState = true;
}
/**
* 计算动态表单绑定数据
*
* @type {Subject<any>}
* @memberof AppFormPart
*/
public computedFormVal(modelData:any){
this.curFormValue = {};
if(modelData && modelData.column && modelData.column.length > 0){
modelData.column.forEach((element:any) => {
Object.assign(this.curFormValue,{[element.prop]:null});
});
}
if(Object.keys(this.curFormValue).length > 0){
Object.keys(this.curFormValue).forEach((item:any) =>{
if(this.data && this.data[item]){
this.curFormValue[item] = this.data[item];
}
})
}
}
/** /**
* 加载动态表单数据模型 * 加载动态表单数据模型
* *
...@@ -139,15 +203,18 @@ export default class AppFormPart extends Vue { ...@@ -139,15 +203,18 @@ export default class AppFormPart extends Vue {
* @memberof AppFormPart * @memberof AppFormPart
*/ */
public loadRemoteFormModel(){ public loadRemoteFormModel(){
this.$http.get(this.remoteUrl).then((res:any) =>{ return new Promise((resolve:any,reject:any) =>{
if(res.status && res.status == 200){ this.$http.get(this.remoteUrl).then((res:any) =>{
this.formOption = res.data; if(res.status && res.status == 200){
}else{ let result:any = res.data;
console.warn("加载动态表单模型数据异常"); resolve(result);
} }else{
}).catch((error:any) =>{ console.warn("加载动态表单模型数据异常");
console.warn("加载动态表单模型数据异常"); }
}) }).catch((error:any) =>{
console.warn("加载动态表单模型数据异常");
})
})
} }
/** /**
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册