| | |
| | | <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" areas-name="northAreaInDialog" |
| | | :areasData="uiDefineVO.northAreas" |
| | | <UIContentArea :key="'northArea-'+uiDefineVO.oid" :areasData="uiDefineVO.northAreas" |
| | | :dataStore="checkedData.northArea" |
| | | :inDialog="inDialog" |
| | | :sourceData="sourceData" |
| | | :dataStore="checkedData.northAreaInDialog" |
| | | :paramVOS="paramVOS" |
| | | 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="westAreaInDialog" |
| | | 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.westAreaInDialog" |
| | | :paramVOS="paramVOS" |
| | | areas-name="westArea" |
| | | cradStyle="" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-aside> |
| | | <el-container style="height: 100%;display: block"> |
| | | <el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" :style="'min-height: 260px;height: '+centerHeight"> |
| | | <UIContentArea :key="'centerArea-'+uiDefineVO.oid" areas-name="centerAreaInDialog" |
| | | cradStyle="" |
| | | :areasData="uiDefineVO.centerAreas" |
| | | <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" |
| | | :sourceData="checkedData.westAreaInDialog[checkedData.westAreaInDialog.length-1]" |
| | | :dataStore="checkedData.centerAreaInDialog" |
| | | :paramVOS="paramVOS" |
| | | :sourceData="checkedData.westArea[checkedData.westArea.length-1]" |
| | | areas-name="centerArea" |
| | | cradStyle="" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-main> |
| | | <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" style="min-height: 150px;"> |
| | | <UIContentArea :key="'southArea-'+uiDefineVO.oid" areas-name="southAreaInDialog" |
| | | cradStyle="" |
| | | :areasData="uiDefineVO.southAreas" |
| | | <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" |
| | | style="min-height: 150px;"> |
| | | <UIContentArea :key="'southArea-'+uiDefineVO.oid" :areasData="uiDefineVO.southAreas" |
| | | :dataStore="checkedData.southArea" |
| | | :inDialog="inDialog" |
| | | :sourceData="checkedData.centerAreaInDialog[checkedData.centerAreaInDialog.length-1]" |
| | | :dataStore="checkedData.southAreaInDialog" |
| | | :paramVOS="paramVOS" |
| | | :sourceData="checkedData.centerArea[checkedData.centerArea.length-1]" |
| | | areas-name="southArea" |
| | | cradStyle="" |
| | | @setDataStore="setDataStore"> |
| | | </UIContentArea> |
| | | </el-footer> |
| | |
| | | <script> |
| | | import UIContentArea from "@/views/base/UIContentArea" |
| | | import {verifyNull} from "@/util/validate"; |
| | | import {getUIContent} from '@/api/base/region' |
| | | import {getUIContext} from '@/api/base/region' |
| | | |
| | | export default { |
| | | name: "UIContentViewerInDialog", |
| | |
| | | btmType:{ |
| | | type: String, |
| | | }, |
| | | content:{ |
| | | context:{ |
| | | type: String, |
| | | }, |
| | | inDialog: { |
| | |
| | | } |
| | | }, |
| | | watch: { |
| | | typeAContent:{ |
| | | typeAndContext:{ |
| | | handler(newV,oldV){ |
| | | if(oldV!=newV && !verifyNull(newV)){ |
| | | this.initUI(); |
| | |
| | | } |
| | | }, |
| | | computed: { |
| | | typeAContent(){ |
| | | return this.btmType+this.content; |
| | | typeAndContext(){ |
| | | return this.btmType+this.context; |
| | | } |
| | | }, |
| | | created() { |
| | | if (verifyNull(this.btmType) || verifyNull(this.content) ) { |
| | | if (verifyNull(this.btmType) || verifyNull(this.context) ) { |
| | | this.$message.error("自定义组件配置的信息错误,请参考”?type=xxx&context=yyy¶m=zzz“这种形式。其中type是业务类型(或链接类型),context是UI上下文的名称"); |
| | | return false; |
| | | } |
| | | }, |
| | | methods: { |
| | | initUI() { |
| | | getUIContent({btmType: this.btmType, id: this.content}).then(res => { |
| | | getUIContext({btmType: this.btmType, id: this.context}).then(res => { |
| | | this.uiDefineVO = res.data.obj; |
| | | this.initContent(); |
| | | this.initContext(); |
| | | }) |
| | | }, |
| | | initContent() { |
| | | initContext() { |
| | | if (this.uiDefineVO.southAreas && this.uiDefineVO.southAreas.length > 0) { |
| | | this.centerHeight = '65%'; |
| | | } else { |