UI上下文展示引擎

 Source/ProjectWeb/src/components/dynamic-components/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,47 @@
<template>
  <div>
    <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>
</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"
export default {
  name: "dynamicIndex",
  components:{dynamicCustom, dynamicTree, dynamicForm, dynamicTable},
  props:{
    componentVO:{
      type:Object,
      default: {}
    },
    inDialog: {
      type: Boolean,
      default: false
    },
    sourceData:{
      //菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
    }
  },
}
</script>

<style scoped>

</style>

 Source/ProjectWeb/src/views/base/UIContentArea.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,91 @@
<template>
  <basic-container :cradStyle="cradStyle">
    <el-tabs v-if="areasData.length>1" v-model="activeName" type="card" @tab-click="tabHandleClick">
      <el-tab-pane v-for="(areaItem,index) in areasData" :key="areaItem.oid" :label="areaItem.name" :name="areasName+'-Tab-'+index">
        <el-collapse  v-model="collapseActiveNames" v-if="areaItem.componentVOs.length>1">
          <el-collapse-item v-for="(componentVO,componentIndex) in areaItem.componentVOs" :name="areasName+'-collapse-'+componentIndex">
            <template slot="title">
              {{componentVO.name}}
            </template>
            <div class="componentVO" style="height: 60%">
              <compoent-index :key="componentVO.oid" :componentVO="componentVO"  :sourceData="sourceData" :areasName="areasName" :paramVOS="paramVOS"></compoent-index>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div v-else class="componentVO">
          <compoent-index :key="areaItem.componentVOs[0].oid" :componentVO="areaItem.componentVOs[0]"  :sourceData="sourceData" :areasName="areasName" :paramVOS="paramVOS"></compoent-index>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div v-else>
      <el-collapse  v-model="collapseActiveNames" v-if="areasData[0].componentVOs.length>1">
        <el-collapse-item v-for="(componentVO,componentIndex) in areasData[0].componentVOs" :name="areasName+'-collapse-'+componentIndex">
          <template slot="title">
            {{componentVO.name}}
          </template>
          <div class="componentVO" style="height: 60%">
            <compoent-index :key="componentVO.oid" :componentVO="componentVO"  :sourceData="sourceData" :areasName="areasName" :paramVOS="paramVOS"></compoent-index>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div v-else class="componentVO">
        <compoent-index :key="areasData[0].componentVOs[0].oid" :componentVO="areasData[0].componentVOs[0]"  :sourceData="sourceData" :areasName="areasName" :paramVOS="paramVOS"></compoent-index>
      </div>
    </div>
  </basic-container>
</template>

<script>
import compoentIndex from "@/components/dynamic-components/index"
export default {
  name: "UIContentArea",
  components:{compoentIndex},
  props:{
    inDialog: {
      type: Boolean,
      default: false
    },
    areasName:{
      type:String,
      default:''
    },
    areasData:{
      type:Array,
      default:[]
    },
    sourceData:{
      //菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
    },
    cradStyle:''
  },
  data(){
    return{
      activeName:this.areasName+'-Tab-0',
      collapseActiveNames:[this.areasName+'-collapse-0']
    }
  },
  mounted() {
    console.log(this.areasData);
  },
  methods:{
    tabHandleClick(tab, event) {
      console.log(tab, event);
    },
  }
}
</script>

<style scoped>

</style>

 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);
    },
  }
}

 Source/ProjectWeb/src/views/base/uiDefineVO.js

@@ -4517,6 +4517,144 @@
          "versionRule": null,
          "versionSeq": 0,
          "versionValue": null
        },
        {
          "btmname": null,
          "buttons": [
            {
              "actionVO": {
                "actionCls": "",
                "actionUsedType": "business",
                "bsUrl": "null",
                "createTime": "2014-03-14 15:54:05.000",
                "creator": "1",
                "csClass": "plm.uif.actions.client.AddSaveAction",
                "description": "创建保存按钮",
                "id": "addsave",
                "lastModifier": "1",
                "lastModifyTime": "2014-03-14 15:54:05.000",
                "licensors": null,
                "name": "创建保存按钮",
                "oid": "2AAFDEE1-B760-A0AD-6C2A-CB2C0C3407A3"
              },
              "areaType": "tab",
              "authorization": true,
              "children": null,
              "createTime": "2024-03-15 10:52:57.000",
              "creator": "developer",
              "csUrl": "plm.uif.actions.client.AddSaveAction",
              "description": "",
              "displayMode": "textandimage",
              "hidden": false,
              "iconPath": "",
              "id": "addsave",
              "lastModifier": "developer",
              "lastModifyTime": "2024-03-15 10:52:57.000",
              "name": "新增",
              "oid": "A974C16B-4751-6365-8756-C11B74AA1C53",
              "orderNum": 1,
              "paramVOS": {
                "type": "folder"
              },
              "pkComponent": "0BA77BDF-7023-AE81-4EAC-7396C56FA7C9",
              "pkParentOid": "",
              "url": "null"
            },
            {
              "actionVO": {
                "actionCls": "",
                "actionUsedType": "business",
                "bsUrl": "null",
                "createTime": "2014-03-14 15:54:05.000",
                "creator": "1",
                "csClass": "plm.uif.actions.client.AddSaveAction",
                "description": "创建保存按钮",
                "id": "addsave",
                "lastModifier": "1",
                "lastModifyTime": "2014-03-14 15:54:05.000",
                "licensors": null,
                "name": "创建保存按钮",
                "oid": "2AAFDEE1-B760-A0AD-6C2A-CB2C0C3407A3"
              },
              "areaType": "tab",
              "authorization": true,
              "children": null,
              "createTime": "2024-03-15 10:52:57.000",
              "creator": "developer",
              "csUrl": "plm.uif.actions.client.AddSaveAction",
              "description": "",
              "displayMode": "textandimage",
              "hidden": false,
              "iconPath": "",
              "id": "addsave",
              "lastModifier": "developer",
              "lastModifyTime": "2024-03-15 10:52:57.000",
              "name": "新增",
              "oid": "A974C16B-4751-6365-8756-C11B74AA1C53",
              "orderNum": 1,
              "paramVOS": {
                "type": "folder"
              },
              "pkComponent": "0BA77BDF-7023-AE81-4EAC-7396C56FA7C9",
              "pkParentOid": "",
              "url": "null"
            }
          ],
          "checkInBy": null,
          "checkInTime": null,
          "checkOutBy": null,
          "checkOutTime": null,
          "copyFromVersion": null,
          "createTime": null,
          "creator": null,
          "customClass": null,
          "data": null,
          "description": "",
          "extendAttr": "",
          "firstR": null,
          "firstV": null,
          "formDefineVO": null,
          "id": null,
          "lastModifier": null,
          "lastModifyTime": null,
          "lastR": null,
          "lastV": null,
          "lcStatus": null,
          "lcStatusText": null,
          "lctid": null,
          "name": "工艺评审树",
          "nameOid": null,
          "oid": "0BA77BDF-7023-AE81-4EAC-7396C56FA7C9",
          "orderNum": 2,
          "owner": null,
          "pkLayout": "E28B0555-FAF3-4F59-0EE8-64A30A77C9CB",
          "revisionOid": null,
          "revisionRule": null,
          "revisionSeq": 0,
          "revisionValue": null,
          "secretGrade": null,
          "secretGradeText": null,
          "tableDefineVO": null,
          "treeDefineVO": {
            "btmType": "folder",
            "fieldSep": ",",
            "linkType": "",
            "loadType": "node",
            "orientation": true,
            "queryTemplateName": "cardtemplateflodertree",
            "rootContent": "id",
            "showImage": false,
            "showLinkAbs": "affiliatedfolder,material",
            "treeNodeExpression": "name"
          },
          "treeTableDefineVO": null,
          "ts": null,
          "uiComponentType": "tree",
          "uiComponentTypeText": "树",
          "uiParseClass": "",
          "versionRule": null,
          "versionSeq": 0,
          "versionValue": null
        }
      ],
      "copyFromVersion": null,