soc_web/src/components/orgTree/index.vue

<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="deptName"
        placeholder="请输入机构名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"/>
    </div>
    <div class="tree-container">
      <div style="margin-bottom: 10px;">
        <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"
      />
    </div>
  </div>
</template>

<script>
import tableListMixins from "@/mixins/tableList";
import {deptTreeSelect,handsheDeptTreeSelect} from "@/api/system/public";

export default {
  name: "orgTree",
  mixins:[tableListMixins],
  data(){
    return {
      //过滤信息
      deptName:'',
      //是否关联下级
      checked: false,
      // 机构树列表
      treeList: [],
      //默认选中节点
      defaultKeys:[],
      //自定义取值
      defaultProps: {
        children: "children",
        label: "name"
      },
      checkSub:false,
      defaultKey:null,
    }
  },
  props:{
    hangsheTree:{
      type:Boolean,
      default:false,
    },
    defaultProps:{
      type:Object,
      default:{
        children: "children",
        label: "name"
      },
    }
  },
  watch: {
    // 根据名称筛选机构树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
    defaultProps(val) {
      this.defaultProps={...val};
    }
  },
  created() {
    this.getDeptTree();
  },
  methods:{
    /** 下穿状态改变*/
    changeCheckBox(state){
      this.$emit('checkChange',state);
    },
    /** 查询机构下拉树结构 */
    getDeptTree() {
      let method=deptTreeSelect;
      if(this.hangsheTree){
        method=handsheDeptTreeSelect
      }
      method().then(response => {
        this.treeList = response.data;
        this.defaultKeys.push(response.data[0].id);
        this.$emit('defaultKey',response.data[0].id);
        this.defaultKey = response.data[0].id;
        setTimeout(() => {
          this.$refs.tree.setCurrentKey(response.data[0].id)
        }, 100);        
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit('click',data);
    },
  },
}
</script>

<style lang='scss' scoped>
  .el-tree-ex {
    overflow: auto;
    ::v-deep .is-current > .el-tree-node__content {
      background-color: #d1e0f1 !important;
    }   
  }
</style>