<template>
|
<div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
|
<dynamic-button v-if="componentVO && componentVO.buttons" :key="areasName+'buttons-'+componentVO.oid"
|
:componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData"
|
@afterMethod="handleRefresh" type="form"></dynamic-button>
|
<basic-form :key="areasName+'basicForm-'+componentVO.oid"
|
:span="this.componentVO.formDefineVO.columnOneRow?(24/this.componentVO.formDefineVO.columnOneRow) : 12"
|
:formItems="this.componentVO.formDefineVO && this.componentVO.formDefineVO.items"
|
:disabled="!inDialog"
|
:isEdit="canEdit"
|
:formData="form"
|
:initValue="paramVOS.initvalue"
|
:uploadattachment="paramVOS.uploadattachment || false"
|
@getFormData="getFormData">
|
</basic-form>
|
</div>
|
</template>
|
|
<script>
|
import {dataForm} from "@/api/base/ui";
|
|
export default {
|
name: "dynamic-form",
|
props: {
|
//ui上下文的业务类型（或链接类型）
|
uiBtmType: {
|
type: String
|
},
|
//ui上下文
|
uiContext:{
|
type: String
|
},
|
componentVO: {
|
type: Object,
|
default: {}
|
},
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
canEdit:{
|
//内容是否可编辑
|
type:Boolean,
|
default:false
|
},
|
actionType:{
|
//按钮操作类型
|
default:""
|
},
|
areasName: {
|
type: String,
|
default: ''
|
},
|
sourceData: {
|
//所属区域的上一区域选中数据
|
type: Object,
|
default: {}
|
},
|
//上一区域业务类型
|
sourceBtmType:{
|
type: String
|
},
|
dataStore: {
|
//弹窗时按钮所属区域选中数据
|
type: Array,
|
default: []
|
},
|
paramVOS: {
|
type: Object,
|
default: {}
|
},
|
isShow: {
|
//所在区域是否已显示，针对tab和collapse
|
type: Boolean,
|
default: true
|
},
|
},
|
data() {
|
return {
|
form: {},
|
params:{},
|
sourceDataMapParams:{},
|
currentDefineVO:this.componentVO.formDefineVO,
|
}
|
},
|
mounted() {
|
},
|
watch: {
|
form:{
|
handler(newval) {
|
if(newval) {
|
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
sourceData: {
|
handler(newval) {
|
//源数据有变化时变更当前区域数据
|
this.sourceDataMapParams=this.sourceDataMap();
|
this.getParams();
|
this.handleRefresh();
|
},
|
deep: true,
|
immediate: true
|
},
|
isShow: {
|
handler(newval) {
|
if(newval){
|
this.handleRefresh();
|
}
|
}
|
},
|
},
|
created() {
|
this.getParams();
|
},
|
methods: {
|
sourceDataMap: function () {
|
const sourceDataMap = {};
|
if (Object.keys(this.sourceData).length>0) {
|
if(this.sourceData.part && Object.keys(this.sourceData.part).length>0){
|
//说明源数据是树节点
|
if(this.sourceData.part.oid ) {
|
if (this.sourceData.part.oid.indexOf('@vcitreesep@') > -1) {
|
this.sourceData.part.oid = this.sourceData.oid.split('@vcitreesep@')[1];
|
}
|
sourceDataMap.sourceBtmName = this.sourceBtmType;
|
sourceDataMap.sourceOid = this.sourceData.part.oid;
|
}
|
}else {
|
if(this.sourceData.oid ) {
|
if (this.sourceData.oid.indexOf('@vcitreesep@') > -1) {
|
this.sourceData.oid = this.sourceData.oid.split('@vcitreesep@')[1];
|
}
|
sourceDataMap.sourceBtmName = this.sourceBtmType;
|
sourceDataMap.sourceOid = this.sourceData.oid;
|
}
|
}
|
|
for (let i in this.sourceData) {
|
const item = this.sourceData[i]
|
if (['type', 'context', 'content', 'querytemplate', 'querytype'].includes(i)) continue;
|
if (item && item.constructor === Object) {
|
sourceDataMap['sourceData["' + i + '"]'] = JSON.stringify(item)
|
}else {
|
sourceDataMap['sourceData["' + i + '"]'] = item
|
}
|
}
|
}
|
|
if (Object.keys(this.paramVOS).length > 0) {
|
for (let j in this.paramVOS) {
|
if (this.paramVOS[j] && this.paramVOS[j].constructor === Object) continue;
|
if (['type', 'context', 'content', "getdataurl", "getdatamethod", "url", "method", "uploadfileurl", "title", 'querytemplate', 'querytype', 'usesourcedata','component'].includes(j)) continue;
|
sourceDataMap['sourceData["' + j + '"]'] = this.paramVOS[j]
|
}
|
}
|
return sourceDataMap;
|
},
|
getParams: function () {
|
const formParams = {
|
btmName: this.currentDefineVO.btmType,
|
btmType: this.currentDefineVO.btmType,
|
formDefineId: this.currentDefineVO.id,
|
formDefineOid: this.currentDefineVO.oid,
|
componentOid: this.componentVO.oid,
|
uiDefineId: this.uiContext,
|
};
|
if (this.dataStore[0] && this.dataStore[0].oid) {
|
formParams.oid = this.dataStore[0].oid;
|
}
|
const sourceDataMapList = this.sourceDataMapParams;
|
|
this.params = Object.assign({}, formParams, sourceDataMapList);
|
},
|
onLoad: function () {
|
if (this.paramVOS.initvalue) {
|
this.form = this.paramVOS.initvalue;
|
}
|
if (Object.keys(this.sourceData).length > 0 && this.isShow && this.actionType != "add") {
|
this.loading = true;
|
let url=''
|
if(this.componentVO.bsCustQueryCLsOrUrl && this.componentVO.bsCustQueryCLsOrUrl.indexOf('/')!=-1){
|
url=this.componentVO.bsCustQueryCLsOrUrl
|
}
|
dataForm(this.params, this.paramVOS.getdataurl || url, this.paramVOS.getdatamethod).then(res => {
|
this.form = res.data.obj.data;
|
this.loading = false;
|
}).catch(error => {
|
this.loading = false;
|
});
|
}
|
},
|
handleRefresh() {
|
this.form = {}
|
this.onLoad();
|
},
|
getFormData(form) {
|
this.form = form;
|
this.$emit("setDataStore", {
|
area: this.areasName,
|
type: this.componentVO.uiComponentType,
|
btmType: this.currentDefineVO.btmType,
|
dataStore: [this.form]
|
});
|
this.$emit("setData", {
|
area: this.areasName,
|
type: this.componentVO.uiComponentType,
|
currentDefineVO: this.currentDefineVO,
|
data: this.form
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
