treeModal (antd 中关于tree的运用) 保留两级 树搜索等

 this.expandKeys = Util.getIds(this.treeResultData);   //默认展开三级

/**
* @Author: 路博欢
* @Date: 2019/8/19
* @Version: 1.0
* @Last Modified by: 路博欢
* @Last Modified time: 2019/8/19
**/
<comment>
  # 组件注释
  组织信息弹出框
</comment>
<template>
  <a-modal
    v-model="visible"
    class="treeModal"
    centered
    :footer="null"
    :width="450"
    :afterClose="handleClose"
    :maskClosable="false"
  >
    <template slot="title">{{modalTitle}}</template>
    <div class="body">
      <div class="tree-box">
        <div class="tree-title">
          <a-input-search style="width: 100%" placeholder="按名称搜索" @change="search" />
        </div>
        <div class="tree-content">
          <a-tree
            v-if="treeResultData.length"
            :treeData="treeResultData"
            :showIcon="showIcon"
            :defaultExpandedKeys="expandKeys"
            :selectedKeys="selectedKeys"
            @select="onSelect"
          >
            <template slot="custom" slot-scope="record">
              <icon-font
                :type="record.dataRef.type == 4 ? 'spm-icon-bumen' : record.dataRef.type == 3 ? 'spm-icon-xiangmubu' :  record.dataRef.type == 2 ? 'spm-icon-zuzhi':'spm-icon-setting'"
              />
            </template>
          </a-tree>
          <div v-else class="noData">暂无数据</div>
        </div>
      </div>
    </div>
    <!-- <template slot="footer">
      <a-button type="primary" @click="confirm" class="confirm">取消</a-button>
    </template> -->
  </a-modal>
</template>

<script>
import debounce from "lodash.debounce";
export default {
  name: "treeModal",
  components: {},
  props: {},
  data() {
    return {
      Util,
      visible: false, //模态框显隐
      showIcon: true, //是否展示树形结构的icon
      modalTitle: "", //模态框标题
      treeData: [], //后台返回结果
      treeResultData: [], //搜索结果
      selectedKeys: [] //选中的某一项
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    /**
     * 模态框初始化
     * @param data=父组件传过来的参数  分公司/项目的相关信息
     */
    initModal(data) {
      this.modalTitle = data.name + "层级选择";
      this.visible = true;
      this.getTreeData(data);
    },
    /**
     * 树结构搜索相关方法
     */
    search: debounce(function(val) {
      this.handleSearch(val.target.value);
    }, 1000),
    handleSearch(val) {
      this.treeResultData = val
        ? Util.treeSearch(val, "name", this.treeData)
        : this.treeData;
      this.expandKeys = Util.getIds(this.treeResultData);
    },
    /**
     * 点击树结构item时调用
     */
    onSelect(selectedKeys, info) {
      if (!info.selected) {
        return;
      }
      this.selectedKeys = selectedKeys;
      if (this.selectedKeys.length > 0) {
        this.$emit("changOrg", this.selectedKeys[0],info.node.dataRef.name);
      }
      this.handleClose();
    },
    /**
     * 获取树形结构数据
     * @param currentLi=父组件传过来的参数
     */
    getTreeData(currentLi) {
      Util.baseUrlPHP = ''
      let param = {
        // 'token':localStorage.getItem('token')
        'token': '6b9b8249d891320a65112700846d50c4'
      };
      //http://spm.cscecgx.com/App/Org/get_sel_orgs2
      this.$postAjax("http://spm.cscecgx.com/App/Org/get_sel_orgs2", param)
        .then(response => {
          //Util.baseUrlPHP = 'http://autobuild.1357.cn'
          Util.baseUrlPHP = 'http://yyzx.cscecgx.com'
          var data = response.data.orgs;
          //过滤掉type=4的数据
          if (currentLi.id == "2") {
            data = data.filter(item => {
              return item.type != 4;
            });
          }
          //判断点击的类型
          let clickType = "";
          if (currentLi.id == 2) {
            clickType = "company";
          } else if (currentLi.id == 3) {
            clickType = "project";
          }
          //将一维数组转为树形结构
          var orgData = Util.translateDataToTree(data, "pid","children","1")
          //增加相关属性
          var result = Util.dealData(orgData,clickType);
          this.treeData = result;
          this.treeResultData = this.treeData;
          this.expandKeys = Util.getIds(this.treeResultData);
        })
        .catch(res => {
          //Util.baseUrlPHP = 'http://autobuild.1357.cn'
           Util.baseUrlPHP = 'http://yyzx.cscecgx.com'
          // Util.processError(this, res);
        });

    },
    /*关闭modal的事件*/
    handleClose() {
      this.visible = false;
      //this.reset();
    },
    /**点击确定 */
    confirm() {
      this.handleClose();
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
.ant-modal-mask {
  background: rgba(0, 0, 0, 0.4);
}
.treeModal {
  padding: 0;
  .ant-tree li .ant-tree-node-content-wrapper {
    // color: rgba(223, 250, 255, 1);
    color:#fff;
    font-size: 16px;
  }
  .ant-tree li .ant-tree-node-content-wrapper:hover {
    color: rgba(74, 240, 251, 1);
    background: linear-gradient(
      90deg,
      rgba(50, 66, 110, 0) 0%,
      rgba(37, 220, 255, 0.95) 100%
    );
  }
  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    color: rgba(74, 240, 251, 1);
    background: linear-gradient(
      90deg,
      rgba(50, 66, 110, 0) 0%,
      rgba(37, 220, 255, 0.95) 100%
    );
  }
  li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher),
  li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper,
  li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span {
    color: rgba(255, 255, 255, 0.2);
  }
  li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper:hover {
    background: transparent;
  }
  .ant-tree-switcher-icon.anticon {
    color: #fff;
  }
  .ant-input {
    background: rgba(40, 54, 100, 1);
    border: 1px solid rgba(76, 92, 163, 1);
    outline: none;
    color: #fff;
  }
  .ant-input:focus {
  }
  .ant-input-search-icon {
    color: rgba(74, 240, 251, 1);
  }

  .ant-modal-header {
    background: transparent;
  }
  .ant-modal-body {
  }
  .ant-modal-content {
    background: rgba(29, 40, 77, 0.97);
    box-shadow: 0px 0px 20px #2c78d5 inset;
    .body {
      .tree-box {
        .tree-title {
          margin-bottom: 15px;
        }
        .tree-content {
          height: 450px;
          overflow: auto;
        }
      }
    }
  }
  .confirm {
  }
}
</style>

Util.translateDataToTree = function (arr = [], _p_keyword = 'pid', _c_keyword = 'children', _root_id = '0') {
    let _new_arr = []
    arr.length && arr.forEach(item => {
      let _obj = item
      _obj.key = item.id
      _obj.title = item.name
      _new_arr.push(_obj)
    })
    //没有父节点的数据
    let parents = _new_arr.filter(value => value[_p_keyword] === _root_id || value[_p_keyword] == null)
    if (!parents.length) return _new_arr
    //有父节点的数据
    let children = _new_arr.filter(value => value[_p_keyword] !== _root_id && value[_p_keyword] != null)
    //定义转换方法的具体实现
    let translator = (parents, children) => {
      //遍历父节点数据
      parents.forEach((parent) => {
        //遍历子节点数据
        children.forEach((current, index) => {
          if (current[_p_keyword] === parent.id) {
            //对子节点数据进行深复制
            let temp = Util.deepCopy(children)
            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
            temp.splice(index, 1)
            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
            translator([current], temp)
            //把找到子节点放入父节点的children属性中
            typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
          }
        }
        )
      }
      )
    }
    translator(parents, children)
    return parents
  };
  /**
   * 处理树结构数据
   */
  Util.dealData = function (tree, clickType) {
    let arr = []
    tree.length && tree.forEach((item) => {
      let obj = {}
      obj = Util.deepCopy(item)
      obj.pId = item.pid
      obj.value = item.id
      obj.label = item.name
      obj.key = item.id
      obj.title = item.name
      if (clickType) {
        if (item.type == 2) {
          obj.disabled = true
        }
        if (clickType == 'projefct') {
          if (item.type == 3) {
            obj.disabled = true
          }
        }
      }
      obj.scopedSlots = { icon: 'custom' }
      if (item.children && item.children.length) {
        obj.children = Util.dealData(item.children, clickType)
      }
      arr.push(obj)
    })
    return arr
  }

/**
   * 获取最外两层ID集合
   * @param data
   * @returns {Array}
   */
  Util.getIds = function (data) {
    let arr = []
    data.length && data.forEach((item) => {
      if (item.children && item.children.length) {
        arr.push(item.id)
        item.children.forEach((item) => {
          arr.push(item.id)
        })
      }
    })
    return arr
  }