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

@@ -1,48 +1,68 @@
<template>
  <!--UI上下文的展示器-->
  <div style="height:calc(100% - 4px);min-width:1200px">
  <div style="height:calc(100% - 4px);" >
    <el-header v-if="uiDefineVO.northAreas && uiDefineVO.northAreas.length>0">
      <UIContentArea :key="'northArea-'+uiDefineVO.oid" areas-name="northAreaInDialog"
      <UIContentArea :key="'northArea-'+uiDefineVO.oid"
                     :uiBtmType="btmType"
                     :uiContext="context"
                     :areasData="uiDefineVO.northAreas"
                     :dataStore="checkedData.northAreaInDialog.data"
                     :paramVOS="paramVOS"
                     :inDialog="inDialog"
                     :sourceData="sourceData"
                     :dataStore="checkedData.northAreaInDialog"
                     :paramVOS="paramVOS"
                     :sourceBtmType="btmType"
                     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="westAreaInDialog"
                       cradStyle=""
    <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"
                       :uiBtmType="btmType"
                       :uiContext="context"
                       :areasData="uiDefineVO.westAreas"
                       :dataStore="checkedData.westAreaInDialog.data"
                       :paramVOS="paramVOS"
                       :inDialog="inDialog"
                       :sourceData="sourceData"
                       :dataStore="checkedData.westAreaInDialog"
                       :paramVOS="paramVOS"
                       :sourceBtmType="btmType"
                       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="centerAreaInDialog"
                         cradStyle=""
      <el-container style="height: 100%;display: block">
        <el-main v-if="uiDefineVO.centerAreas && uiDefineVO.centerAreas.length>0" :style="'min-height: 200px;height: '+centerHeight">
          <UIContentArea :key="'centerArea-'+uiDefineVO.oid"
                         :uiBtmType="btmType"
                         :uiContext="context"
                         :areasData="uiDefineVO.centerAreas"
                         :inDialog="inDialog"
                         :sourceData="checkedData.westAreaInDialog[checkedData.westAreaInDialog.length-1]"
                         :dataStore="checkedData.centerAreaInDialog"
                         :dataStore="checkedData.centerAreaInDialog.data"
                         :paramVOS="paramVOS"
                         :inDialog="inDialog"
                         :sourceData="checkedData.westAreaInDialog.data[checkedData.westAreaInDialog.data.length-1]"
                         :sourceBtmType="checkedData.westAreaInDialog.DefineVOBtmType"
                         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="southAreaInDialog"
                         cradStyle=""
        <el-footer v-if="uiDefineVO.southAreas && uiDefineVO.southAreas.length>0" height="35%"
                   style="min-height: 100px;">
          <UIContentArea :key="'southArea-'+uiDefineVO.oid"
                         :uiBtmType="btmType"
                         :uiContext="context"
                         :areasData="uiDefineVO.southAreas"
                         :inDialog="inDialog"
                         :sourceData="checkedData.centerAreaInDialog[checkedData.centerAreaInDialog.length-1]"
                         :dataStore="checkedData.southAreaInDialog"
                         :dataStore="checkedData.southAreaInDialog.data"
                         :paramVOS="paramVOS"
                         :inDialog="inDialog"
                         :sourceData="checkedData.centerAreaInDialog.data[checkedData.centerAreaInDialog.data.length-1]"
                         :sourceBtmType="checkedData.centerAreaInDialog.DefineVOBtmType"
                         areas-name="southArea"
                         cradStyle=""
                         @setDataStore="setDataStore">
          </UIContentArea>
        </el-footer>
@@ -53,8 +73,8 @@

<script>
import UIContentArea from "@/views/base/UIContentArea"
import {uiDefineVOData} from "@/views/base/uiDefineVOInDialog"
import {verifyNull} from "@/util/validate";
import {getUIContext} from '@/api/base/ui'

export default {
  name: "UIContentViewerInDialog",
@@ -63,7 +83,7 @@
    btmType:{
      type: String,
    },
    content:{
    context:{
      type: String,
    },
    inDialog: {
@@ -89,42 +109,65 @@
    return {
      checkedData:{
        //各区域选中数据
        northAreaInDialog:[{}],
        westAreaInDialog:[{}],
        centerAreaInDialog:[{}],
        southAreaInDialog:[{}]
        northAreaInDialog:{
          DefineVOBtmType:'',
          data:[{}]
        },
        westAreaInDialog:{
          DefineVOBtmType:'',
          data:[{}]
        },
        centerAreaInDialog:{
          DefineVOBtmType:'',
          data:[{}]
        },
        southAreaInDialog:{
          DefineVOBtmType:'',
          data:[{}]
        }
      },
      uiDefineVO: {},
      centerHeight:'100%'
    }
  },
  watch: {

    typeAndContext:{
      handler(newV,oldV){
        if(oldV!=newV && !verifyNull(newV)){
          this.initUI();
        }
      },
      immediate: true,
    }
  },
  computed: {

    typeAndContext(){
      return this.btmType+this.context;
    }
  },
  created() {
    if (verifyNull(this.btmType) || verifyNull(this.content) ) {
      this.$message.error("自定义组件配置的信息错误，请参考bs=name?type=xxx&context=yyy&param=zzz这种形式。其中type是业务类型（或链接类型），context是UI上下文的名称,name为组件名称，空值时默认展示UI引擎");
    if (verifyNull(this.btmType) || verifyNull(this.context) ) {
      this.$message.error("自定义组件配置的信息错误，请参考”?type=xxx&context=yyy&param=zzz“这种形式。其中type是业务类型（或链接类型），context是UI上下文的名称");
      return false;
    }
    this.initUI();
    this.initContent();
  },
  methods: {
    initUI() {
      this.uiDefineVO = uiDefineVOData;
      getUIContext({btmType: this.btmType, id: this.context}).then(res => {
        this.uiDefineVO = res.data.obj;
        this.initContext();
      })
    },
    initContent() {
    initContext() {
      if (this.uiDefineVO.southAreas && this.uiDefineVO.southAreas.length > 0) {
        this.centerHeight = 'calc(100% - 310px)';
        this.centerHeight = '65%';
      } else {
        this.centerHeight = '100%';
      }
    },
    setDataStore(value) {
      this.checkedData[value.area] = value.dataStore;
      this.checkedData[value.area].DefineVOBtmType = value.btmType;
      this.checkedData[value.area].data = value.dataStore;
    }
  }
}