From 8be3182372eb774dce8f9c97a0b51c03bda165c7 Mon Sep 17 00:00:00 2001 From: wangting <675591594@qq.com> Date: 星期一, 08 四月 2024 15:33:11 +0800 Subject: [PATCH] UI展示 --- Source/ProjectWeb/src/views/base/UIContentViewer.vue | 85 ++++++++++++++++++++++++++---------------- 1 files changed, 53 insertions(+), 32 deletions(-) diff --git a/Source/ProjectWeb/src/views/base/UIContentViewer.vue b/Source/ProjectWeb/src/views/base/UIContentViewer.vue index 7eb33d1..44104ce 100644 --- a/Source/ProjectWeb/src/views/base/UIContentViewer.vue +++ b/Source/ProjectWeb/src/views/base/UIContentViewer.vue @@ -2,43 +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" + 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> @@ -48,9 +52,9 @@ </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", @@ -73,22 +77,37 @@ 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("閰嶇疆鐨勪俊鎭敊璇紝璇峰弬鑰僢s=?type=xxx&context=yyy¶m=zzz杩欑褰㈠紡銆傚叾涓璽ype鏄笟鍔$被鍨嬶紙鎴栭摼鎺ョ被鍨嬶級锛宑ontext鏄疷I涓婁笅鏂囩殑鍚嶇О"); + 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; - 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) { @@ -105,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