UI上下文展示引擎

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

@@ -367,6 +367,12 @@
          this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5;
        }
      }
    },
    sourceData:{
      handler(newval) {
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  mounted() {
@@ -377,12 +383,16 @@
  },
  computed: {
    pageType() {
      return this.areasName === 'westArea' ? this.simplePage : this.page;
      return this.areasName.indexOf('westArea') == 0  ? this.simplePage : this.page;
    }
  },
  methods: {
    TreeSelectChange(row) {
      this.TreeSelectList = row;
      this.$emit("setDataStore", {
        area: this.areasName,
        dataStore:row
      });
    },
  }
}

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

@@ -3,10 +3,11 @@
    <div v-if="isError" style="color: #F56C6C">这个自定义页面的地址格式不正确。推荐使用UI:type#content?param=xxx这种形式</div>
    <component v-else :is="currentComponent"
               :customOptions="customOptions"
               :inDialog="inDialog"
               :inDialog="true"
               :key="areasName+'customCom-'+componentVO.oid"
               :componentVO="componentVO"
               :sourceData="sourceData"
               :dataStore="dataStore"
               :areasName="areasName"
               :paramVOS="paramVOS"></component>
  </div>
@@ -38,6 +39,11 @@
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
@@ -56,6 +62,14 @@
      currentComponent: 'UI',//组件name
    }
  },
  watch:{
    sourceData:{
      handler(newval) {
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  computed:{
    customOptions() {
      if(this.customClass.indexOf(":") <0){

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

@@ -38,10 +38,15 @@
      type: String,
      default: ''
    },
    sourceData: {
    sourceData:{
      //菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
      type: Object,
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS: {
      type: Object,
@@ -73,6 +78,14 @@
      return this.getColumnData(0)
    }
  },
  watch:{
    sourceData:{
      handler(newval) {
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  methods: {
    //转化数据
    formColumn(formList) {

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

@@ -513,7 +513,7 @@
      });
    },
    pageType() {
      return this.areasName === 'westArea' ? this.simplePage : this.page;
      return this.areasName.indexOf('westArea') == 0  ? this.simplePage : this.page;
    }
  },
  watch: {
@@ -537,6 +537,12 @@
          this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5;
        }
      }
    },
    sourceData:{
      handler(newval) {
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  created() {
@@ -551,9 +557,10 @@
  methods: {
    selectChange(row) {
      this.selectList = row;
    },
    TreeSelectChange(row) {
      this.TreeSelectList = row;
      this.$emit("setDataStore", {
        area: this.areasName,
        dataStore:row
      });
    }
  }
}

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

@@ -42,6 +42,11 @@
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
@@ -66,9 +71,18 @@
    checkDatas:{
      handler(newval) {
        if(newval) {
          console.log(newval)
          this.$emit("setDataStore", {
            area: this.areasName,
            dataStore:newval
          });
        }
      }
    },
    sourceData:{
      handler(newval) {
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  data() {

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

@@ -4,8 +4,10 @@
                 :inDialog="inDialog"
                 :componentVO="componentVO"
                 :sourceData="sourceData"
                 :dataStore="dataStore"
                 :areasName="areasName"
                 :paramVOS="paramVOS"
                 @setDataStore="setDataStore"
                 :isShow="isShow">

  </dynamic-table>
@@ -14,8 +16,10 @@
                 :inDialog="inDialog"
                 :componentVO="componentVO"
                 :sourceData="sourceData"
                    :dataStore="dataStore"
                 :areasName="areasName"
                 :paramVOS="paramVOS"
                    @setDataStore="setDataStore"
                 :isShow="isShow">

  </dynamicTreeTable>
@@ -24,8 +28,10 @@
                :inDialog="inDialog"
                :componentVO="componentVO"
                :sourceData="sourceData"
                :dataStore="dataStore"
                :areasName="areasName"
                :paramVOS="paramVOS"
                @setDataStore="setDataStore"
                :isShow="isShow">

  </dynamic-form>
@@ -34,16 +40,20 @@
                :inDialog="inDialog"
                :componentVO="componentVO"
                :sourceData="sourceData"
                :dataStore="dataStore"
                :areasName="areasName"
                :paramVOS="paramVOS"
                @setDataStore="setDataStore"
                :isShow="isShow">
  </dynamic-tree>
  <dynamic-custom v-else-if="componentVO.uiComponentType=='customer'"  :inDialog="inDialog"
                  :key="areasName+'custom-'+componentVO.oid"
                  :componentVO="componentVO"
                  :sourceData="sourceData"
                  :dataStore="dataStore"
                  :areasName="areasName"
                  :paramVOS="paramVOS"
                  @setDataStore="setDataStore"
                  :isShow="isShow">

  </dynamic-custom>
@@ -76,6 +86,11 @@
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
@@ -87,6 +102,12 @@
    },
  },
  created() {
  },
  methods:{
    setDataStore(value) {
      this.$emit("setDataStore", value);
      this.dataStore = value.dataStore;
    }
  }
}
</script>

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

@@ -12,8 +12,10 @@
                              :inDialog="inDialog"
                              :componentVO="componentVO"
                              :sourceData="sourceData"
                              :dataStore="dataStore"
                              :areasName="areasName"
                              :paramVOS="paramVOS"
                              @setDataStore="setDataStore"
                              :isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index>
            </div>
          </el-collapse-item>
@@ -23,8 +25,10 @@
                          :inDialog="inDialog"
                          :componentVO="areaItem.componentVOs[0]"
                          :sourceData="sourceData"
                          :dataStore="dataStore"
                          :areasName="areasName"
                          :paramVOS="paramVOS"
                          @setDataStore="setDataStore"
                          :isShow="activeName==(areasName+'-Tab-'+index)?true:false"></compoent-index>
        </div>
      </el-tab-pane>
@@ -40,8 +44,10 @@
                            :inDialog="inDialog"
                            :componentVO="componentVO"
                            :sourceData="sourceData"
                            :dataStore="dataStore"
                            :areasName="areasName"
                            :paramVOS="paramVOS"
                            @setDataStore="setDataStore"
                            :isShow="collapseActiveNames.indexOf(areasName+'-collapse-'+componentIndex)!=-1?true:false"></compoent-index>
          </div>
        </el-collapse-item>
@@ -51,8 +57,10 @@
                        :inDialog="inDialog"
                        :componentVO="areasData[0].componentVOs[0]"
                        :sourceData="sourceData"
                        :dataStore="dataStore"
                        :areasName="areasName"
                        :paramVOS="paramVOS"
                        @setDataStore="setDataStore"
                        :isShow="true"></compoent-index>
      </div>
    </div>
@@ -108,6 +116,10 @@
    },
    handleChange(val) {
      //console.log(val);
    },
    setDataStore(value) {
      this.$emit("setDataStore", value);
      this.dataStore = value.dataStore;
    }
  }
}

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

@@ -6,8 +6,9 @@
                     :areasData="uiDefineVO.northAreas"
                     :inDialog="inDialog"
                     :sourceData="sourceData"
                     :dataStore="dataStore"
                     :paramVOS="paramVOS">
                     :dataStore="checkedData.northArea[0]"
                     :paramVOS="paramVOS"
                     @setDataStore="setDataStore">
      </UIContentArea>
    </el-header>
    <el-container :style="'height: '+(uiDefineVO.northAreas && uiDefineVO.northAreas.length>0?'calc(100% - 70px)':'100%')">
@@ -17,8 +18,9 @@
                       :areasData="uiDefineVO.westAreas"
                       :inDialog="inDialog"
                       :sourceData="sourceData"
                       :dataStore="dataStore"
                       :paramVOS="paramVOS">
                       :dataStore="checkedData.westArea[0]"
                       :paramVOS="paramVOS"
                       @setDataStore="setDataStore">
        </UIContentArea>
      </el-aside>
      <el-container style="height: 100%">
@@ -27,9 +29,10 @@
                         cradStyle=""
                         :areasData="uiDefineVO.centerAreas"
                         :inDialog="inDialog"
                         :sourceData="checkedData.westAreas[0]"
                         :dataStore="checkedData.centerAreas[0]"
                         :paramVOS="paramVOS">
                         :sourceData="checkedData.westArea[0]"
                         :dataStore="checkedData.centerArea[0]"
                         :paramVOS="paramVOS"
                         @setDataStore="setDataStore">
          </UIContentArea>
        </el-main>
        <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" style="max-height: 300px">
@@ -37,9 +40,10 @@
                         cradStyle=""
                         :areasData="uiDefineVO.southAreas"
                         :inDialog="inDialog"
                         :sourceData="checkedData.centerAreas[0]"
                         :dataStore="checkedData.southAreas[0]"
                         :paramVOS="paramVOS">
                         :sourceData="checkedData.centerArea[0]"
                         :dataStore="checkedData.southArea[0]"
                         :paramVOS="paramVOS"
                         @setDataStore="setDataStore">
          </UIContentArea>
        </el-footer>
      </el-container>
@@ -64,11 +68,6 @@
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
@@ -80,9 +79,10 @@
      content:'',//UI上下文的名称
      checkedData:{
        //各区域选中数据
        westAreas:[],
        centerAreas:[],
        southAreas:[]
        northArea:[],
        westArea:[],
        centerArea:[],
        southArea:[]
      },
      uiDefineVO: uiDefineVOData,
      centerHeight:'100%'
@@ -108,6 +108,9 @@
    initContent(){

    },
    setDataStore(value) {
      this.checkedData[value.area] = value.dataStore;
    }
  }
}
</script>

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

@@ -1,44 +1,49 @@
<template>
  <!--UI上下文的展示器-->
  <div style="height:calc(100% - 4px);min-width:800px">
  <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"
      <UIContentArea :key="'northArea-'+uiDefineVO.oid" areas-name="northAreaInDialog"
                     :areasData="uiDefineVO.northAreas"
                     :inDialog="inDialog"
                     :sourceData="sourceData"
                     :dataStore="dataStore"
                     :paramVOS="paramVOS">
                     :dataStore="checkedData.northAreaInDialog[0]"
                     :paramVOS="paramVOS"
                     @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"
        <UIContentArea :key="'westArea-'+uiDefineVO.oid" areas-name="westAreaInDialog"
                       cradStyle=""
                       :areasData="uiDefineVO.westAreas"
                       :inDialog="inDialog"
                       :sourceData="sourceData"
                       :dataStore="dataStore"
                       :paramVOS="paramVOS">
                       :dataStore="checkedData.westAreaInDialog[0]"
                       :paramVOS="paramVOS"
                       @setDataStore="setDataStore">
        </UIContentArea>
      </el-aside>
      <el-container style="height: 100%">
        <el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" :style="'height: '+centerHeight">
          <u-i-content-area :key="'centerArea-'+uiDefineVO.oid" areas-name="centerArea"
          cradStyle=""
          :areasData="uiDefineVO.centerAreas"
          :inDialog="inDialog"
          :sourceData="checkedData.westAreas[0]"
          :dataStore="checkedData.centerAreas[0]"
          :paramVOS="paramVOS"></u-i-content-area>
          <UIContentArea :key="'centerArea-'+uiDefineVO.oid" areas-name="centerAreaInDialog"
                         cradStyle=""
                         :areasData="uiDefineVO.centerAreas"
                         :inDialog="inDialog"
                         :sourceData="checkedData.westAreaInDialog[0]"
                         :dataStore="checkedData.centerAreaInDialog[0]"
                         :paramVOS="paramVOS"
                         @setDataStore="setDataStore">
          </UIContentArea>
        </el-main>
        <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="300px" style="max-height: 300px">
          <UIContentArea :key="'southArea-'+uiDefineVO.oid" areas-name="southArea"
        <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%" style="max-height: 300px">
          <UIContentArea :key="'southArea-'+uiDefineVO.oid" areas-name="southAreaInDialog"
                         cradStyle=""
                         :areasData="uiDefineVO.southAreas"
                         :inDialog="inDialog"
                         :sourceData="checkedData.centerAreas[0]"
                         :dataStore="checkedData.southAreas[0]"
                         :paramVOS="paramVOS">
                         :sourceData="checkedData.centerAreaInDialog[0]"
                         :dataStore="checkedData.southAreaInDialog[0]"
                         :paramVOS="paramVOS"
                         @setDataStore="setDataStore">
          </UIContentArea>
        </el-footer>
      </el-container>
@@ -83,9 +88,10 @@
      content:this.customOptions.content,//UI上下文的名称
      checkedData:{
        //各区域选中数据
        westAreas:[],
        centerAreas:[],
        southAreas:[]
        northAreaInDialog:[],
        westAreaInDialog:[],
        centerAreaInDialog:[],
        southAreaInDialog:[]
      },
      uiDefineVO: uiDefineVOData,
      centerHeight:'100%'
@@ -111,6 +117,9 @@
    initContent(){

    },
    setDataStore(value) {
      this.checkedData[value.area] = value.dataStore;
    }
  }
}
</script>