<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"
|
:uiBtmType="uiBtmType"
|
:uiContext="uiContext"
|
:inDialog="inDialog"
|
:canEdit="canEdit"
|
:actionType="actionType"
|
:componentVO="componentVO"
|
:sourceData="newSourceData"
|
:sourceBtmType="sourceBtmType"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setData="setData"
|
@setDataStore="setDataStore"
|
:isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-else-if="areaItem.componentVOs.length==1" class="componentVO">
|
<compoent-index :key="areasName+'componentVO-'+areaItem.componentVOs[0].oid"
|
:uiBtmType="uiBtmType"
|
:uiContext="uiContext"
|
:inDialog="inDialog"
|
:canEdit="canEdit"
|
:actionType="actionType"
|
:componentVO="areaItem.componentVOs[0]"
|
:sourceData="newSourceData"
|
:sourceBtmType="sourceBtmType"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setData="setData"
|
@setDataStore="setDataStore"
|
:isShow="activeName==(areasName+'-Tab-'+index)?true:false"></compoent-index>
|
</div>
|
<div v-else>
|
<el-alert
|
class="alert"
|
:closable="false"
|
title=""
|
type="info"
|
description="没有可显示的内容，请联系管理人员检查配置。">
|
</el-alert>
|
</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"
|
:uiBtmType="uiBtmType"
|
:uiContext="uiContext"
|
:inDialog="inDialog"
|
:canEdit="canEdit"
|
:actionType="actionType"
|
:componentVO="componentVO"
|
:sourceData="newSourceData"
|
:sourceBtmType="sourceBtmType"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setData="setData"
|
@setDataStore="setDataStore"
|
:isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<div v-else-if="newAreasData[0].componentVOs.length===1" class="componentVO">
|
<compoent-index :key="areasName+'componentVO-'+newAreasData[0].componentVOs[0].oid"
|
:uiBtmType="uiBtmType"
|
:uiContext="uiContext"
|
:inDialog="inDialog"
|
:canEdit="canEdit"
|
:actionType="actionType"
|
:componentVO="newAreasData[0].componentVOs[0]"
|
:sourceData="newSourceData"
|
:sourceBtmType="sourceBtmType"
|
:dataStore="dataStore"
|
:areasName="areasName"
|
:paramVOS="paramVOS"
|
@setData="setData"
|
@setDataStore="setDataStore"
|
:isShow="true"></compoent-index>
|
</div>
|
<div v-else>
|
<el-alert
|
class="alert"
|
:closable="false"
|
title=""
|
type="info"
|
description="没有可显示的内容，请联系管理人员检查配置。">
|
</el-alert>
|
</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="info"
|
description="没有可显示的内容，请选择来源数据。">
|
</el-alert>
|
<el-alert
|
v-else-if="newAreasData.length== 0"
|
class="alert"
|
:closable="false"
|
title=""
|
type="info"
|
description="不满足显示表达式条件，没有可显示的内容。">
|
</el-alert>
|
</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:{
|
//ui上下文的业务类型（或链接类型）
|
uiBtmType: {
|
type: String
|
},
|
//ui上下文
|
uiContext:{
|
type: String
|
},
|
inDialog: {
|
type: Boolean,
|
default: false
|
},
|
canEdit:{
|
//内容是否可编辑
|
type:Boolean,
|
default:false
|
},
|
actionType:{
|
//按钮操作类型
|
default:""
|
},
|
areasName:{
|
type:String,
|
default:''
|
},
|
areasData:{
|
type:Array,
|
default:[]
|
},
|
sourceData:{
|
//菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
|
type:Object,
|
default: {}
|
},
|
//上一区域业务类型
|
sourceBtmType:{
|
type: String
|
},
|
dataStore:{
|
//弹窗时按钮所属区域选中数据
|
type:Array,
|
default: []
|
},
|
paramVOS:{
|
type:Object,
|
default: {}
|
},
|
cradStyle:''
|
},
|
data(){
|
return{
|
activeName:this.areasName+'-Tab-0',
|
collapseActiveNames:[this.areasName+'-collapse-0'],
|
newAreasData:[]
|
}
|
},
|
computed:{
|
newSourceData(){
|
if(this.sourceData.attributes && this.sourceData.parentId!=undefined && this.sourceData.parentId !=null){
|
//源数据是树节点
|
return this.sourceData.attributes
|
}
|
return this.sourceData;
|
}
|
},
|
watch: {
|
'newSourceData':{
|
handler(newval) {
|
this.getNewAreasData();
|
}
|
}
|
},
|
created() {
|
this.getNewAreasData();
|
},
|
mounted() {
|
// console.log(this.areasData);
|
},
|
methods:{
|
getNewAreasData(){
|
if(Object.keys(this.newSourceData).length> 0){
|
let newAreasData = [];
|
this.areasData.forEach(areaData => {
|
//验证显式表达式
|
if (!validatenull(areaData.displayExpression)) {
|
if (this.checkDisplayExpression(areaData.displayExpression)) {
|
newAreasData.push(areaData)
|
}
|
} else {
|
newAreasData.push(areaData)
|
}
|
})
|
this.newAreasData = newAreasData;
|
}else {
|
this.newAreasData=this.areasData;
|
}
|
},
|
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"
|
//("${btmname}"="产品型号" and "${producttype}"<>"试验件") or "${btmname}"="ppart"or "${btmname}"="工艺零件"or "${btmname}"="part"or "${btmname}"="零件"
|
//${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*and\s*"/g, ') && "').replace(/\)\s*AND\s*"/g, ') && "').replace(/\)\s*or\s*"/g, ') || "').replace(/\)\s*OR\s*"/g, ') || "');
|
newDisplayExpressionStr = newDisplayExpressionStr.replace(/"\s*and\s*\(/g, '" && (').replace(/"\s*AND\s*\(/g, '" && (').replace(/"\s*or\s*\(/g, '" || (').replace(/"\s*OR\s*\(/g, '" || (');
|
newDisplayExpressionStr = newDisplayExpressionStr.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, '')
|
|
try {
|
if (eval('(' + newDisplayExpressionStr + ')')) {
|
checkdisplay = true;
|
}
|
}catch (e) {
|
console.log(displayExpressionStr);
|
}
|
|
return checkdisplay;
|
},
|
tabHandleClick(tab, event) {
|
// console.log(tab, event);
|
},
|
handleChange(val) {
|
//console.log(val);
|
},
|
setData(value) {
|
this.$emit("setData", value);
|
},
|
setDataStore(value) {
|
this.$emit("setDataStore", value);
|
this.dataStore = value.dataStore;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
