soc_web/src/components/orgTree/index.vue

<template>
  <div class="org-tree">
    <div class="head-container">
      <el-input
        v-model="deptName"
        :placeholder="searchPlaceHolder"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        maxlength="50"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="tree-container">
      <div style="margin-bottom: 10px" v-show="showLowerCheck">
        <el-checkbox v-model="checkSub" @change="changeCheckBox"
          >关联所有下级数据</el-checkbox>
      </div>
      <el-tree
        :data="treeList"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        class="el-tree-ex"
        :default-expanded-keys="defaultKeys"
        :default-checked-keys="defaultKeys"
        @node-click="handleNodeClick"
        v-bind="$attrs"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">

            <span>{{ node.label }}</span>

        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "orgTree",
  data() {
    return {
      //过滤信息
      deptName: "",
      // 机构树列表
      treeList: [],
      //默认选中节点
      defaultKeys: [],
      checkSub: this.defaultCheckSub,
      defaultKey: null,
    };
  },
  props: {
    hangsheTree: {
      type: Boolean,
      default: false,
    },
    businessTree: {
      type: Boolean,
      default: false,
    },
    wholeTree: {
      type: Boolean,
      default: false,
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "shortName",
        };
      },
    },
    customRequest: {
      type: Function,
    },
    showLowerCheck: {
      type: Boolean,
      default: true,
    },
    searchPlaceHolder: {
      type: String,
      default: "请输入机构名称",
    },
    defaultCheckSub:{
      type:Boolean,
      default:true
    }
  },
  watch: {
    // 根据名称筛选机构树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
    defaultProps(val) {
      this.defaultProps = { ...val };
    },
    orgTree(val)
    {
      this.getDeptTree();
    },
  },
  created() {
    this.getDeptTree();
  },
  computed:{
    ...mapGetters(["orgTree"]),
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    getHeight(){
      let orgTree = document.querySelector('.org-tree');
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          orgTree.style.height = entry.contentRect.height + 'px';
        }
      });
      resizeObserver.observe(document.querySelector('.main-right-box'));
    },
    /** 下穿状态改变*/
    changeCheckBox(state) {
      this.$emit("checkChange", state);
    },
    /** 查询机构下拉树结构 */
    getDeptTree() {
      if (this.customRequest) {
        this.customRequest().then((response) => {
          this.treeList = response.data;
          this.dataFn(response.data);
          return;
        });
      } else {
        console.log("getDeptTree",this.hangsheTree,this.businessTree,this.wholeTree)
        if (this.hangsheTree) {
          this.treeList = this.$store.getters.depTree;
        }
        else if(this.businessTree)
        {
          this.treeList = this.$store.getters.businessTree;
        }
        else if(this.wholeTree)
        {
          console.log("wholeTree",this.$store.getters.wholeTree)
          this.treeList = this.$store.getters.wholeTree;
        }
        else {
          this.treeList = this.$store.getters.orgTree;
        }
        this.dataFn(this.treeList);
      }
    },
    dataFn(arr){
      if(!arr||arr.length===0) return;
      console.log(arr,'arrr')
      this.defaultKeys.push(arr[0].id);
      this.$emit("defaultKey", arr[0].id);
      this.$emit("defaultOrg", arr[0]);
      this.defaultKey = arr[0].id;
      setTimeout(() => {
        this.$refs.tree.setCurrentKey(arr[0].id);
      }, 100);
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.shortName.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data, node) {
      this.$emit("click", data, node);
    },
  },
};
</script>

<style lang="scss" scoped>
.org-tree{
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 8px #ccc;
  -min-height: calc(100vh - 107px);
  overflow: auto;
}
.el-tree-ex {
  ::v-deep .is-current > .el-tree-node__content {
    background-color: #d1e0f1 !important;
    display:inline-flex;
    min-width:100%;
  }
}
</style>