<template>
|
<basic-container :cradStyle="cradStyle" cardBodyStyle="height:100%;box-sizing: border-box;padding-bottom:5px;">
|
<el-tabs style="height: 100%;" class="UITabs" v-if="newAreasData.length>1" v-model="activeName" type="card" @tab-click="tabHandleClick">
|
<el-tab-pane style="height:100%;overflow: auto" v-for="(areaItem,index) in newAreasData" :key="areaItem.oid" :label="areaItem.name" :name="areasName+'-Tab-'+index">
|
<el-collapse class="UI-collapse" :key="areaItem.oid+'-collapse'" v-model="collapseActiveNames" v-if="areaItem.componentVOs.length>1" @change="handleChange">
|
<el-collapse-item v-for="(componentVO,componentIndex) in areaItem.componentVOs" :name="areasName+'-collapse-'+componentIndex">
|
<template slot="title">
|
{{componentVO.name}}
|
</template>
|
<div class="componentVO">
|
<compoent-index :key="areasName+'componentVO-'+componentVO.oid"
|
:inDialog="inDialog"
|
:componentVO="componentVO"
|
:sourceData="newSourceData"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setDataStore="setDataStore"
|
:isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-else class="componentVO">
|
<compoent-index :key="areasName+'componentVO-'+areaItem.componentVOs[0].oid"
|
:inDialog="inDialog"
|
:componentVO="areaItem.componentVOs[0]"
|
:sourceData="newSourceData"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setDataStore="setDataStore"
|
:isShow="activeName==(areasName+'-Tab-'+index)?true:false"></compoent-index>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<div v-else-if="newAreasData.length===1" style="height:100%;overflow: auto">
|
<el-collapse class="UI-collapse" :key="newAreasData[0].oid+'-collapse'" v-model="collapseActiveNames" v-if="newAreasData[0].componentVOs.length>1" @change="handleChange">
|
<el-collapse-item v-for="(componentVO,componentIndex) in newAreasData[0].componentVOs" :name="areasName+'-collapse-'+componentIndex">
|
<template slot="title">
|
{{componentVO.name}}
|
</template>
|
<div class="componentVO">
|
<compoent-index :key="areasName+'componentVO-'+componentVO.oid"
|
:inDialog="inDialog"
|
:componentVO="componentVO"
|
:sourceData="newSourceData"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setDataStore="setDataStore"
|
:isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-else class="componentVO">
|
<compoent-index :key="areasName+'componentVO-'+newAreasData[0].componentVOs[0].oid"
|
:inDialog="inDialog"
|
:componentVO="newAreasData[0].componentVOs[0]"
|
:sourceData="newSourceData"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setDataStore="setDataStore"
|
:isShow="true"></compoent-index>
|
</div>
|
</div>
|
<div v-else>
|
<el-alert
|
v-if="areasData.length==0"
|
class="alert"
|
:closable="false"
|
title="配置错误"
|
type="error"
|
show-icon
|
description="该区域没有配置显示的内容">
|
</el-alert>
|
<el-alert
|
v-else-if="Object.keys(newSourceData).length === 0"
|
class="alert"
|
:closable="false"
|
title="源数据为空"
|
type="error"
|
show-icon
|
description="不满足显示表达式条件，没有可显示的内容">
|
</el-alert>
|
<el-alert
|
v-else
|
class="alert"
|
:closable="false"
|
title=""
|
type="error"
|
show-icon
|
description="不满足显示表达式条件，没有可显示的内容。">
|
</el-alert>
|
{{newSourceData}}
|
</div>
|
</basic-container>
|
</template>
|
|
<script>
|
import compoentIndex from "@/components/dynamic-components/index"
|
import {validatenull, verifyNotNull} from "@/util/validate";
|
export default {
|
name: "UIContentArea",
|
components:{compoentIndex},
|
props:{
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
areasName:{
|
type:String,
|
default:''
|
},
|
areasData:{
|
type:Array,
|
default:[]
|
},
|
sourceData:{
|
//菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
|
type:Object,
|
default: {}
|
},
|
dataStore:{
|
//弹窗时按钮所属区域选中数据
|
type:Array,
|
default: []
|
},
|
paramVOS:{
|
type:Object,
|
default: {}
|
},
|
cradStyle:''
|
},
|
data(){
|
return{
|
activeName:this.areasName+'-Tab-0',
|
collapseActiveNames:[this.areasName+'-collapse-0']
|
}
|
},
|
computed:{
|
newAreasData(){
|
let newAreasData = [];
|
this.areasData.forEach(areaData => {
|
//验证显式表达式
|
if (!validatenull(areaData.displayExpression)) {
|
if (this.checkDisplayExpression(areaData.displayExpression)) {
|
newAreasData.push(areaData)
|
}
|
} else {
|
newAreasData.push(areaData)
|
}
|
})
|
return newAreasData;
|
},
|
newSourceData(){
|
if(this.sourceData.attributes && this.sourceData.parentId!=undefined && this.sourceData.parentId !=null){
|
//源数据是树节点
|
return this.sourceData.attributes
|
}
|
return this.sourceData;
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
// console.log(this.areasData);
|
},
|
methods:{
|
checkDisplayExpression(displayExpressionStr){
|
//"${folderbusinesstype}"<>"workunit" and "${folderbusinesstype}"<>"part" and "${folderbusinesstype}"<>"Terminology" and "${folderbusinesstype}"<>"AssMaterial" and "${folderbusinesstype}"<>"resourcelib" and "${folderbusinesstype}"<>"material" and "${folderbusinesstype}"<>"machine"
|
// "${folderbusinesstype}"="AssMaterial" or "${folderbusinesstype}"="assmaterial"
|
//"${folderbusinesstype}"="material"
|
//${folderbusinesstype}为源数据中的属性
|
|
let checkdisplay=false;
|
//替换and和or
|
let newDisplayExpressionStr=displayExpressionStr.replace(/"\s*and\s*"/g,'" && "').replace(/"\s*AND\s*"/g,'" && "').replace(/"\s*or\s*"/g,'" || "').replace(/"\s*OR\s*"/g,'" || "');
|
newDisplayExpressionStr=newDisplayExpressionStr.replace(/"\s*<>\s*"/g,'" != "').replace(/"\s*=\s*"/g,'" == "');
|
newDisplayExpressionStr=newDisplayExpressionStr.replace(/"\$\{/g,'this.newSourceData.').replace(/\}"/g,'')
|
|
const sandbox = {};
|
if(eval('('+newDisplayExpressionStr+')')){
|
checkdisplay=true;
|
}
|
return checkdisplay;
|
},
|
tabHandleClick(tab, event) {
|
// console.log(tab, event);
|
},
|
handleChange(val) {
|
//console.log(val);
|
},
|
setDataStore(value) {
|
this.$emit("setDataStore", value);
|
this.dataStore = value.dataStore;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
