| | |
| | | <!--UI上下文的展示器--> |
| | | <div style="height:calc(100% - 4px);min-width:1200px"> |
| | | <el-header v-if="uiDefineVO.northAreas && uiDefineVO.northAreas.length>0"> |
| | | <UIContentArea :key="'northArea-'+uiDefineVO.oid" areas-name="northArea" |
| | | :areasData="uiDefineVO.northAreas" |
| | | <UIContentArea :key="'northArea-'+uiDefineVO.oid" :areasData="uiDefineVO.northAreas" |
| | | :dataStore="checkedData.northArea" |
| | | :inDialog="inDialog" |
| | | :sourceData="sourceData" |
| | | :dataStore="checkedData.northArea" |
| | | areas-name="northArea" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-header> |
| | | <el-container :style="'height: '+(uiDefineVO.northAreas && uiDefineVO.northAreas.length>0?'calc(100% - 70px)':'100%')"> |
| | | <el-aside v-if="uiDefineVO.westAreas && uiDefineVO.westAreas.length>0" :width="uiDefineVO.westAreas[0].componentVOs[0].uiComponentType=='table' || uiDefineVO.westAreas[0].componentVOs[0].uiComponentType=='TreeTable'?'420px':'320px'" height="100%"> |
| | | <UIContentArea :key="'westArea-'+uiDefineVO.oid" areas-name="westArea" |
| | | cradStyle="" |
| | | :areasData="uiDefineVO.westAreas" |
| | | <el-container |
| | | :style="'height: '+(uiDefineVO.northAreas && uiDefineVO.northAreas.length>0?'calc(100% - 70px)':'100%')"> |
| | | <el-aside v-if="uiDefineVO.westAreas && uiDefineVO.westAreas.length>0" |
| | | :width="uiDefineVO.westAreas[0].componentVOs[0].uiComponentType=='table' || uiDefineVO.westAreas[0].componentVOs[0].uiComponentType=='TreeTable'?'420px':'320px'" |
| | | height="100%"> |
| | | <UIContentArea :key="'westArea-'+uiDefineVO.oid" :areasData="uiDefineVO.westAreas" |
| | | :dataStore="checkedData.westArea" |
| | | :inDialog="inDialog" |
| | | :sourceData="sourceData" |
| | | :dataStore="checkedData.westArea" |
| | | areas-name="westArea" |
| | | cradStyle="" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-aside> |
| | | <el-container style="height: 100%"> |
| | | <el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" :style="'height: '+centerHeight"> |
| | | <UIContentArea :key="'centerArea-'+uiDefineVO.oid" areas-name="centerArea" |
| | | cradStyle="" |
| | | :areasData="uiDefineVO.centerAreas" |
| | | <UIContentArea :key="'centerArea-'+uiDefineVO.oid" :areasData="uiDefineVO.centerAreas" |
| | | :dataStore="checkedData.centerArea" |
| | | :inDialog="inDialog" |
| | | :sourceData="checkedData.westArea[checkedData.westArea.length-1]" |
| | | :dataStore="checkedData.centerArea" |
| | | areas-name="centerArea" |
| | | cradStyle="" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-main> |
| | | <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" style="max-height: 300px"> |
| | | <UIContentArea :key="'southArea-'+uiDefineVO.oid" areas-name="southArea" |
| | | cradStyle="" |
| | | :areasData="uiDefineVO.southAreas" |
| | | <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" |
| | | style="max-height: 300px"> |
| | | <UIContentArea :key="'southArea-'+uiDefineVO.oid" :areasData="uiDefineVO.southAreas" |
| | | :dataStore="checkedData.southArea" |
| | | :inDialog="inDialog" |
| | | :sourceData="checkedData.centerArea[checkedData.centerArea.length-1]" |
| | | :dataStore="checkedData.southArea" |
| | | areas-name="southArea" |
| | | cradStyle="" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-footer> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { verifyNull } from "@/util/validate"; |
| | | import {verifyNull} from "@/util/validate"; |
| | | import UIContentArea from "@/views/base/UIContentArea" |
| | | import {uiDefineVOData} from "@/views/base/uiDefineVO" |
| | | import {getUIContent} from '@/api/base/region' |
| | | |
| | | export default { |
| | | name: "UIContentViewer", |
| | |
| | | sourceData: {}, |
| | | } |
| | | }, |
| | | watch: {}, |
| | | computed: {}, |
| | | watch: { |
| | | typeAContent:{ |
| | | handler(newV,oldV){ |
| | | if(oldV!=newV && !verifyNull(newV)){ |
| | | this.initUI(); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | } |
| | | }, |
| | | computed: { |
| | | typeAContent(){ |
| | | return this.btmType+this.content; |
| | | } |
| | | }, |
| | | created() { |
| | | if (verifyNull(this.$route.query.type) || (verifyNull(this.$route.query.context) && verifyNull(this.$route.query.content))) { |
| | | 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.initUI(); |
| | | this.initContent(); |
| | | this.btmType = this.$route.query.type; |
| | | this.content = this.$route.query.context || this.$route.query.content; |
| | | this.sourceData = this.$route.query; |
| | | }, |
| | | methods: { |
| | | initUI() { |
| | | this.uiDefineVO = uiDefineVOData; |
| | | 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) { |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .el-container{ |
| | | .el-container { |
| | | padding: 0 !important; |
| | | } |
| | | .el-header,.el-aside,.el-main,.el-footer{ |
| | | |
| | | .el-header, .el-aside, .el-main, .el-footer { |
| | | padding: 0; |
| | | } |
| | | .el-header{ |
| | | |
| | | .el-header { |
| | | margin-bottom: 10px; |
| | | } |
| | | </style> |