learning-system-portal/src/components/System/chooseOrg.vue

<template>
  <!--机构树-->
  <div>
     <el-dialog title="选择组织机构" :append-to-body="true" :visible.sync="dlgShow" :before-close="handleClose" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
     <div>
       <!--
        <el-input placeholder="" v-model="orgName">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        -->
     </div>
      <div style="overflow-y: auto;height: 400px;">
        <el-tree
          ref="treeRef"
          node-key="id"
          :lazy="true"
          :props="departProps"
          :load="loadNode"
          @node-click="handleDepartNodeClick"
          :expand-on-click-node="false"
          :render-content="renderContent"
          :default-expanded-keys="['-1']">
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dlgShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import usergroupApi from "@/api/modules/usergroup";
  import orgApi from "@/api/system/organiza";
  import apiUserBasic from "@/api/boe/userbasic";
  export default{
    props:{

    },
    data(){
      return {
        dlgShow:false,
        orgName:'',
        chooseOrg:{},
        treeData:[],
        departData:[],
        departProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    mounted() {

    },
    methods:{
      handleClose(){
        this.dlgShow=false
      },
      renderContent(h, { node, data, store }) {
          let checked=data.id==this.chooseOrg.id;
          if(checked){
            return (<span class="custom-tree-node">
            <span>{node.label}</span>
            <span class="el-icon-check"></span>
            </span>);
          }else{
            return (<span class="custom-tree-node"> <span>{node.label}</span></span>);
          }
      },
      initTree(){
        apiUserBasic.findOrgsByKeyword('').then(rs=>{
            rs.result.forEach(item=>{
              let node={
                id:item.id,
                name:item.name,
                children:[]
              }
              if(item.treeChildList){
                node.children=[];
              }
              this.treeData.push(node)
            });
        });
      },
      readTreeNode(treeNode,listData){//递归加载组织机构树信息
        let $this=this;
        listData.forEach(item=>{
           let node={
             id:item.id,
             name:item.name,
             hrbpId:item.hrbpId,
             children:[]
           }
           if(item.treeChildList){
              $this.readTreeNode(node,item.treeChildList);
           }
           treeNode.children.push(node);
        })
      },
      loadNode(node, resolve) {
        var parentId = null;
        if (node.level === 0) {
          resolve([{name:'组织机构树',id:'-1'}]);
        }else{
          let $this=this;
          if(node.level === 1){
              // parentId = '-1';
              apiUserBasic.findOrgsByKeyword('').then(rs=>{
                  let treeList=[];
                  rs.result.forEach(item=>{
                    let node={
                      id:item.id,
                      name:item.name,
                      hrbpId:item.hrbpId,
                      children:[]
                    }
                    treeList.push(node);
                  });
                  resolve(treeList);
              });
          }else{
              parentId = node.data.id;
              apiUserBasic.findOrgTreeByOrgId(parentId).then(rs=>{
                if(rs.status==200){
                  let treeList=[];
                  if(rs.result.length>0 && rs.result[0].treeChildList){
                      rs.result[0].treeChildList.forEach(item=>{
                        let node={
                          id:item.id,
                          name:item.name,
                          hrbpId:item.hrbpId,
                          children:[]
                        }
                        if(item.treeChildList){
                          $this.readTreeNode(node,item.treeChildList);
                        }
                        treeList.push(node);
                      });
                    }
                    resolve(treeList);
                 }else{
                   resolve([]);
                 }
              });
          }
          // usergroupApi.userOrgs(parentId).then(res =>{
          //     if (res.status == 200) {
          //       if(res.result != null && res.result.length > 0){
          //         resolve(res.result);
          //       }else{
          //         resolve([]);
          //       }
          //     }else{
          //       this.$message.error('查询用户的机构失败');
          //     }
          // });
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDepartNodeClick(data){
        this.chooseOrg = data;
      },
      confirm(){
        if(!this.chooseOrg.id){
          this.$message.error('请选择一个机构');
          return;
        }
        //this.dlgShow=false;
        this.$emit('confirm',this.chooseOrg);
      }
    }
  }
</script>

<style scoped>
 /* .is-current{
    background-color: #ffff7f;
  } */
   .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
</style>