| | |
| | | <template> |
| | | <!--UI上下文的展示器--> |
| | | <div style="height:calc(100% - 4px);min-width:1200px"> |
| | | <div style="height:calc(100% - 4px);min-width:1200px" > |
| | | <el-header v-if="uiDefineVO.northAreas && uiDefineVO.northAreas.length>0"> |
| | | <UIContentArea :key="'northArea-'+uiDefineVO.oid" :areasData="uiDefineVO.northAreas" |
| | | :dataStore="checkedData.northArea" |
| | |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-aside> |
| | | <el-container style="height: 100%"> |
| | | <el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" :style="'height: '+centerHeight"> |
| | | <el-container style="height: 100%;display: block"> |
| | | <el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" :style="'min-height: 300px;height: '+centerHeight"> |
| | | <UIContentArea :key="'centerArea-'+uiDefineVO.oid" :areasData="uiDefineVO.centerAreas" |
| | | :dataStore="checkedData.centerArea" |
| | | :inDialog="inDialog" |
| | |
| | | </UIContentArea> |
| | | </el-main> |
| | | <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" |
| | | style="max-height: 300px"> |
| | | style="min-height: 150px;"> |
| | | <UIContentArea :key="'southArea-'+uiDefineVO.oid" :areasData="uiDefineVO.southAreas" |
| | | :dataStore="checkedData.southArea" |
| | | :inDialog="inDialog" |
| | |
| | | } |
| | | }, |
| | | watch: { |
| | | typeAContent:{ |
| | | handler(newV,oldV){ |
| | | if(oldV!=newV && !verifyNull(newV)){ |
| | | this.initUI(); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | $route(to, from) { |
| | | this.getTheParameters() |
| | | this.initUI(); |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | this.$message.error("配置的信息错误,请参考bs=组件name?type=xxx&context=yyy¶m=zzz这种形式。其中type是业务类型(或链接类型),context是UI上下文的名称"); |
| | | return false; |
| | | } |
| | | this.btmType = this.$route.query.type; |
| | | this.content = this.$route.query.context || this.$route.query.content; |
| | | this.sourceData = this.$route.query; |
| | | this.getTheParameters() |
| | | this.initUI(); |
| | | }, |
| | | methods: { |
| | | getTheParameters(){ |
| | | this.btmType = this.$route.query.type; |
| | | this.content = this.$route.query.context || this.$route.query.content; |
| | | this.sourceData = this.$route.query; |
| | | }, |
| | | initUI() { |
| | | getUIContent({btmType: this.btmType, id: this.content}).then(res => { |
| | | console.log(res.data.obj) |
| | | this.uiDefineVO = res.data.obj; |
| | | this.initContent(); |
| | | }) |
| | | }, |
| | | initContent() { |
| | | if (this.uiDefineVO.southAreas && this.uiDefineVO.southAreas.length > 0) { |
| | | this.centerHeight = 'calc(100% - 310px)'; |
| | | this.centerHeight = '65%'; |
| | | } else { |
| | | this.centerHeight = '100%'; |
| | | } |