<template>
|
<div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
|
<div v-if="isError" style="color: #F56C6C">这个自定义页面的地址格式不正确。推荐使用UI:type#content?param=xxx这种形式</div>
|
<component v-else :is="currentComponent"
|
:customOptions="customOptions"
|
:inDialog="true"
|
:key="areasName+'customCom-'+componentVO.oid"
|
:componentVO="componentVO"
|
:sourceData="sourceData"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"></component>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "dynamic-custom",
|
components:{
|
'UI':()=>import('@/views/base/UIContentViewerInDialog'),
|
'test':()=>import('@/components/custom-ui/test'),
|
'test2':()=>import('@/components/custom-ui/test2'),
|
},
|
props:{
|
componentVO:{
|
type:Object,
|
default: {}
|
},
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
areasName:{
|
type:String,
|
default:''
|
},
|
sourceData:{
|
//菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
|
type:Object,
|
default: {}
|
},
|
dataStore:{
|
//弹窗时按钮所属区域选中数据
|
type:Array,
|
default: []
|
},
|
paramVOS:{
|
type:Object,
|
default: {}
|
},
|
isShow: {
|
//所在区域是否已显示，针对tab和collapse
|
type: Boolean,
|
default: true
|
},
|
},
|
data() {
|
return {
|
height:'300px',
|
customClass:this.componentVO.customClass, //UI:type#content?param=xxx或者 组件name:type#content?param=xxx
|
isError:false, //路径解析失败
|
currentComponent: 'UI',//组件name
|
}
|
},
|
watch:{
|
sourceData:{
|
handler(newval) {
|
//源数据有变化时变更当前区域数据
|
console.log(this.areasName);
|
console.log(newval);
|
}
|
}
|
},
|
computed:{
|
customOptions() {
|
if(this.customClass.indexOf(":") <0){
|
this.isError=true;
|
return ;
|
}
|
|
if(this.customClass.split(':')[0]!='UI' && this.customClass.split(':')[0]!='ui'){
|
this.currentComponent=this.customClass.split(':')[0];
|
}
|
let urlParams={};
|
let btmType=''
|
let content=''
|
if(this.customClass.split(':')[1].indexOf("?") <0){
|
btmType=this.customClass.split(':')[1].split('#')[0];
|
content=this.customClass.split(':')[1].split('#')[1];
|
}else {
|
let split1 = this.customClass.split(':')[1].split('?')[0];
|
let split2 = this.customClass.split(':')[1].split('?')[1];
|
btmType=split1.split('#')[0];
|
content=split1.split('#')[1];
|
let paramsArray = split2.split("&");
|
paramsArray.forEach(item=>{
|
var preParam =item.split("=");
|
if(preParam[0]=='btmname'){
|
urlParams['btmType']=preParam[1];
|
}else if(preParam[0]=='imagetype'){
|
urlParams['imageType']=preParam[1];
|
if(preParam[1]=='fileobject'){
|
|
}
|
}else{
|
urlParams[preParam[0]] = preParam[1];
|
}
|
})
|
}
|
|
return {
|
btmType:btmType,
|
content:content,
|
urlParams: urlParams
|
}
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
//this.getHeight(this.$parent);
|
},
|
methods:{
|
getHeight(el){
|
if(el.$el.clientHeight>50){
|
this.height=el.$el.clientHeight+'px';
|
}else {
|
this.getHeight(el.$parent);
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
