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

@@ -1,12 +1,14 @@
<template>
  <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
    <dynamic-button v-if="componentVO.buttons && componentVO.buttons.length>0" :butttonList="componentVO.buttons" :selectList="checkDatas" type="tree" style="margin-bottom: 10px;"></dynamic-button>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      class="filter-tree"
      show-checkbox
      :show-checkbox="isMuti"
      :check-on-click-node="true"
      :lazy="lazy"
      :data="data"
      :load="loadNode"
@@ -14,6 +16,8 @@
      :filter-node-method="filterNode"
      highlight-current
      node-key="oid"
      @check="checkNode"
      @current-change="changeNode"
      ref="tree">
    </el-tree>
  </div>
@@ -40,6 +44,11 @@
      type:Object,
      default: {}
    },
    dataStore:{
      //弹窗时按钮所属区域选中数据
      type:Array,
      default: []
    },
    paramVOS:{
      type:Object,
      default: {}
@@ -60,6 +69,43 @@
          //console.log(this.$el.clientHeight)
        }
      }
    },
    checkDatas:{
      handler(newval) {
        if(newval) {
          this.$emit("setDataStore", {
            area: this.areasName,
            dataStore:newval
          });
        }
      }
    },
    sourceData:{
      handler(newval) {
        //源数据有变化时变更当前区域数据
        this.initData();
      }
    }
  },
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      lazy:this.componentVO.treeDefineVO.loadType == 'node',
      isMuti:false,
      data:[],
      checkDatas:[]
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    if(this.componentVO.buttons && this.componentVO.buttons.length>0){
      this.$children[2].$el.style.height = 'calc(100% - 50px - '+this.$children[0].$el.clientHeight+'px - 10px)';
    }
  },
  methods: {
@@ -1956,34 +2002,22 @@
      //逐级加载
      const parentOid = (node.level === 0) ? 0 : node.data.oid;
      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }];
        const data = this.data;

        resolve(data);
      }, 500);
    }
    },
    checkNode(checkedNode, checkedData){
      if (this.isMuti) {
        this.checkDatas=checkedData.checkedNodes;
      }
    },
    changeNode(data,node) {
      if (!this.isMuti) {
        this.checkDatas=[data];
      }
    },
  },
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      lazy:this.componentVO.treeDefineVO.loadType == 'node',
      data:[]
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    console.log(this.$el.clientHeight)
  }
}
</script>