From a23f7d5910585923ff323332e557f8f0ea98d293 Mon Sep 17 00:00:00 2001 From: wangting <675591594@qq.com> Date: 星期一, 08 四月 2024 16:27:20 +0800 Subject: [PATCH] UI展示,树展示 --- Source/ProjectWeb/src/views/base/UIContentViewer.vue | 146 ++++++++++++++++++++++++++---------------------- 1 files changed, 78 insertions(+), 68 deletions(-) diff --git a/Source/ProjectWeb/src/views/base/UIContentViewer.vue b/Source/ProjectWeb/src/views/base/UIContentViewer.vue index 1e3ee6d..62b9081 100644 --- a/Source/ProjectWeb/src/views/base/UIContentViewer.vue +++ b/Source/ProjectWeb/src/views/base/UIContentViewer.vue @@ -2,47 +2,47 @@ <!--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[0]" - :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="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[0]" - :paramVOS="paramVOS" + areas-name="westArea" + cradStyle="" @setDataStore="setDataStore"> </UIContentArea> </el-aside> - <el-container style="height: 100%"> + <el-container style="height: 100%;display: block"> <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[0]" - :dataStore="checkedData.centerArea[0]" - :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="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[0]" - :dataStore="checkedData.southArea[0]" - :paramVOS="paramVOS" + :sourceData="checkedData.centerArea[checkedData.centerArea.length-1]" + areas-name="southArea" + cradStyle="" @setDataStore="setDataStore"> </UIContentArea> </el-footer> @@ -52,61 +52,69 @@ </template> <script> +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", - components:{UIContentArea}, - props:{ - inDialog: { - type: Boolean, - default: false - }, - sourceData:{ - //鑿滃崟婧愭暟鎹垨鑰呭脊绐楁椂鎸夐挳鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁 - type:Object, - default: {} - }, - paramVOS:{ - type:Object, - default: {} - } - }, + components: {UIContentArea}, data() { return { - btmType:'',//涓氬姟绫诲瀷锛堟垨閾炬帴绫诲瀷锛� - content:'',//UI涓婁笅鏂囩殑鍚嶇О - checkedData:{ + btmType: '',//涓氬姟绫诲瀷锛堟垨閾炬帴绫诲瀷锛� + content: '',//UI涓婁笅鏂囩殑鍚嶇О + checkedData: { //鍚勫尯鍩熼�変腑鏁版嵁 - northArea:[], - westArea:[], - centerArea:[], - southArea:[] + northArea: [{}], + westArea: [{}], + centerArea: [{}], + southArea: [{}] }, - uiDefineVO: uiDefineVOData, - centerHeight:'100%' + uiDefineVO: {}, + centerHeight: '100%', + inDialog: false, + //鑿滃崟婧愭暟鎹� + sourceData: {}, } }, watch: { - - }, - computed: { - - }, - created() { - if (this.uiDefineVO.southAreas && this.uiDefineVO.southAreas.length > 0) { - this.centerHeight = 'calc(100% - 310px)'; - } else { - this.centerHeight = '100%'; + 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("閰嶇疆鐨勪俊鎭敊璇紝璇峰弬鑰僢s=缁勪欢name?type=xxx&context=yyy¶m=zzz杩欑褰㈠紡銆傚叾涓璽ype鏄笟鍔$被鍨嬶紙鎴栭摼鎺ョ被鍨嬶級锛宑ontext鏄疷I涓婁笅鏂囩殑鍚嶇О"); + return false; + } + this.btmType = this.$route.query.type; + this.content = this.$route.query.context || this.$route.query.content; + this.sourceData = this.$route.query; + }, methods: { - initUI(){ - + initUI() { + getUIContent({btmType: this.btmType, id: this.content}).then(res => { + console.log(res.data.obj) + this.uiDefineVO = res.data.obj; + this.initContent(); + }) }, - initContent(){ - + initContent() { + if (this.uiDefineVO.southAreas && this.uiDefineVO.southAreas.length > 0) { + this.centerHeight = 'calc(100% - 310px)'; + } else { + this.centerHeight = '100%'; + } }, setDataStore(value) { this.checkedData[value.area] = value.dataStore; @@ -116,13 +124,15 @@ </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> -- Gitblit v1.9.3