From 5b8030f47d66a13ffe11e26ed3ac4cdd7d85e24f Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期五, 15 三月 2024 15:35:00 +0800
Subject: [PATCH] UI上下文展示引擎
---
Source/ProjectWeb/src/views/base/UIContentVIewer.vue | 142 +++++++++++------------------------------------
1 files changed, 34 insertions(+), 108 deletions(-)
diff --git a/Source/ProjectWeb/src/views/base/UIContentVIewer.vue b/Source/ProjectWeb/src/views/base/UIContentVIewer.vue
index 55372b6..3bc7c5c 100644
--- a/Source/ProjectWeb/src/views/base/UIContentVIewer.vue
+++ b/Source/ProjectWeb/src/views/base/UIContentVIewer.vue
@@ -2,94 +2,45 @@
<!--UI涓婁笅鏂囩殑灞曠ず鍣�-->
<div style="height:calc(100% - 4px) ">
<el-header v-if="uiDefineVO.northAreas && uiDefineVO.northAreas.length>0">
- <basic-container>
- <el-tabs v-if="uiDefineVO.northAreas.length>1" v-model="northActiveName" type="card" @tab-click="northHandleClick">
- <el-tab-pane v-for="(areaItem,index) in uiDefineVO.northAreas" :key="areaItem.oid" :label="areaItem.name" :name="'northTab'+index">
- <div class="componentVO" v-for="(componentVO,index) in areaItem.componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-custom>
- </div>
- </el-tab-pane>
- </el-tabs>
- <div v-else>
- <div class="componentVO" v-for="(componentVO,index) in uiDefineVO.northAreas[0].componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-custom>
- </div>
- </div>
- </basic-container>
+ <UIContentArea :key="'northArea-'+uiDefineVO.oid" areas-name="northArea"
+ :areasData="uiDefineVO.northAreas"
+ :inDialog="inDialog"
+ :sourceData="sourceData"
+ :dataStore="dataStore"
+ :paramVOS="paramVOS">
+ </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="320px" height="100%">
- <basic-container cradStyle="height:100%">
- <el-tabs v-if="uiDefineVO.westAreas.length>1" v-model="westActiveName" type="card" @tab-click="westHandleClick">
- <el-tab-pane v-for="(areaItem,index) in uiDefineVO.westAreas" :key="areaItem.oid" :label="areaItem.name" :name="'westTab'+index">
- <div class="componentVO" v-for="(componentVO,index) in areaItem.componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-custom>
- </div>
- </el-tab-pane>
- </el-tabs>
- <div v-else>
- <div class="componentVO" v-for="(componentVO,index) in uiDefineVO.westAreas[0].componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="sourceData"></dynamic-custom>
- </div>
- </div>
- </basic-container>
+ <UIContentArea :key="'westArea-'+uiDefineVO.oid" areas-name="westArea"
+ cradStyle="height:100%"
+ :areasData="uiDefineVO.westAreas"
+ :inDialog="inDialog"
+ :sourceData="sourceData"
+ :dataStore="dataStore"
+ :paramVOS="paramVOS">
+ </UIContentArea>
</el-aside>
<el-container>
<el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" style="min-height: calc(100% - 310px)">
- <basic-container cradStyle="height:100%">
- <el-tabs v-if="uiDefineVO.centerAreas.length>1" v-model="centerActiveName" type="card" @tab-click="centerHandleClick">
- <el-tab-pane v-for="(areaItem,index) in uiDefineVO.centerAreas" :key="areaItem.oid" :label="areaItem.name" :name="'centerTab'+index">
- <div class="componentVO" v-for="(componentVO,index) in areaItem.componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-custom>
- </div>
- </el-tab-pane>
- </el-tabs>
- <div v-else>
- <div class="componentVO" v-for="(componentVO,index) in uiDefineVO.centerAreas[0].componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="checkedData.westAreas[0]"></dynamic-custom>
- </div>
- </div>
- </basic-container>
+ <UIContentArea :key="'centerArea-'+uiDefineVO.oid" areas-name="centerArea"
+ cradStyle="height:100%"
+ :areasData="uiDefineVO.centerAreas"
+ :inDialog="inDialog"
+ :sourceData="checkedData.westAreas[0]"
+ :dataStore="checkedData.centerAreas[0]"
+ :paramVOS="paramVOS">
+ </UIContentArea>
</el-main>
<el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="500px" style="max-height: 300px">
- <basic-container cradStyle="height:100%">
- <el-tabs v-if="uiDefineVO.southAreas.length>1" v-model="southActiveName" type="card" @tab-click="southHandleClick">
- <el-tab-pane v-for="(areaItem,index) in uiDefineVO.southAreas" :key="areaItem.oid" :label="areaItem.name" :name="'southTab'+index">
- <div class="componentVO" v-for="(componentVO,index) in areaItem.componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-custom>
- </div>
- </el-tab-pane>
- </el-tabs>
- <div v-else>
- <div class="componentVO" v-for="(componentVO,index) in uiDefineVO.southAreas[0].componentVOs" >
- <dynamic-table v-if="componentVO.uiComponentType=='table'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-table>
- <dynamic-form v-else-if="componentVO.uiComponentType=='form'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-form>
- <dynamic-tree v-else-if="componentVO.uiComponentType=='tree'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-tree>
- <dynamic-custom v-else-if="componentVO.uiComponentType=='custom'" :componentVO="componentVO" :sourceData="checkedData.centerAreas[0]"></dynamic-custom>
- </div>
- </div>
- </basic-container>
+ <UIContentArea :key="'southArea-'+uiDefineVO.oid" areas-name="southArea"
+ cradStyle="height:100%"
+ :areasData="uiDefineVO.southAreas"
+ :inDialog="inDialog"
+ :sourceData="checkedData.centerAreas[0]"
+ :dataStore="checkedData.southAreas[0]"
+ :paramVOS="paramVOS">
+ </UIContentArea>
</el-footer>
</el-container>
</el-container>
@@ -97,18 +48,12 @@
</template>
<script>
-import dynamicTable from "@/components/dynamic-components/dynamic-table"
-import dynamicForm from "@/components/dynamic-components/dynamic-form"
-import dynamicTree from "@/components/dynamic-components/dynamic-tree"
-import dynamicCustom from "@/components/dynamic-components/dynamic-custom"
-
+import UIContentArea from "@/views/base/UIContentArea"
import {uiDefineVOData} from "@/views/base/uiDefineVO"
-import DynamicForm from "@/components/dynamic-components/dynamic-form";
-import DynamicTree from "@/components/dynamic-components/dynamic-tree";
-import DynamicCustom from "@/components/dynamic-components/dynamic-custom";
export default {
- components:{DynamicCustom, DynamicTree, DynamicForm, dynamicTable},
+ name: "UIContentViewer",
+ components:{UIContentArea},
props:{
inDialog: {
type: Boolean,
@@ -139,10 +84,6 @@
centerAreas:[],
southAreas:[]
},
- northActiveName: 'northTab0',
- westActiveName: 'westTab0',
- centerActiveName: 'centerTab0',
- southActiveName: 'southTab0',
uiDefineVO: uiDefineVOData
}
},
@@ -156,23 +97,8 @@
initUI(){
},
- showContent(){
-
- },
initContent(){
- },
- northHandleClick(tab, event) {
- console.log(tab, event);
- },
- westHandleClick(tab, event) {
- console.log(tab, event);
- },
- centerHandleClick(tab, event) {
- console.log(tab, event);
- },
- southHandleClick(tab, event) {
- console.log(tab, event);
},
}
}
--
Gitblit v1.9.3