vue-Treeselect實現組織機構（員工）下拉樹的功能

知識點：前端使用vuetree的組件庫，調用後臺查詢組織機構，包括人員的接口前端

實現下拉樹的功能vue

查考：java

vue-treeselect官網：https://vue-treeselect.js.org/git

源碼demo下載連接：https://github.com/shuaishuaihand/orgvuetreedemo.gitgithub

（一）效果：算法

（二）代碼json

1.後臺接口（遞歸算法）數組

controller層app

/**
 * 查詢組織結構下拉樹
 * @return
 */
@RequestMapping(value = "/findOrgUserTree", method = { RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public List<Map<String,Object>> findOrgUserTree() {
 return orgService.findOrgUserTree(0);
}

service層post

/**
 * 遞歸查詢組織機構-用戶樹節點
 * @return
 */
public List<Map<String, Object>> findOrgUserTree(int pid) {
 // 查找根節點
 List<Map<String, Object>> list = orgMapper.findListByPid(pid);
 List<Map<String, Object>> children;
 for (Map<String, Object> m: list) {
 children = findOrgUserTree((int)m.get("id"));
 if (children != null && children.size() != 0) { //查詢組織機構的子節點，並賦值給元素「children」
 m.put("children",children);
 } else {
 children = userMapper.findUserByOrgId((int)m.get("id")); //當根節點組織結構時，查詢結構下面的員工，並賦值給根節點組織機構的children
 if (children != null && children.size() != 0) {
 m.put("children",children);
 }
 //設置葉子組織機構（沒有人員），爲不可選 isDisabled爲vuetree節點的屬性，不能勾選
 if(children == null ||children.size() == 0){
 m.put("isDisabled",true);
 }
 }
 }
 return list;
}

mapper層
OrgMapper.xml:

<select id="findListByPid" resultType="java.util.HashMap" parameterType="java.lang.Integer">
 select id,name as label from organization
 <if test="pid!=0"> //pid爲父節點的ID
 WHERE PARENTID =#{pid}
 </if>
 <if test="pid==0">
 WHERE (PARENTID &lt; 1 or PARENTID is null)
 </if>
</select>

組織機構表：


User.xml:

<select id="findUserByOrgId" resultType="java.util.HashMap">
 select id ,user_name as label from user
 <if test="orgId!=null">
 WHERE ORG_ID =#{orgId} ORDER BY id
 </if>
</select>

員工表：


後臺查詢的數組結果：
[{
    "children": [{
        "id": 602,
        "label": "銷售部",
        "isDisabled": true
    }, {
        "children": [{
            "id": 1851,
            "label": "張三"
        }, {
            "id": 1852,
            "label": "李四"
        }],
        "id": 603,
        "label": "產品部"
    }, {
        "children": [{
            "id": 1854,
            "label": "李小萌"
        }],
        "id": 611,
        "label": "研發部"
    }],
    "id": 1,
    "label": "帥帥集團有限公司"
}]

2.前端組件（vue-treeselect）

<body> <!--:value-consists-of="valueConsistsOf"-->
<div id="app">
 組織機構 //options1是後臺接口傳過來的數組； value做爲綁定值，能夠在修改時綁定ids數組；valueConsistsOf設定爲葉子節點元素選擇；
 <treeselect :options="options1" :multiple="true" v-model="value" :value-consists-of="valueConsistsOf"
 placeholder="選擇成員"/>

</div>
<script>
 // register the component
 Vue.component('treeselect', VueTreeselect.Treeselect)
 new Vue({
 el: '#app',
 data: {
 // define default value
 value: null,
 valueConsistsOf: 'LEAF_PRIORITY',
 // define options
 options1: "",
 },
  //初始化方法
 mounted:function () {
 this.findZNodes();

 },
 methods: {
 //加載修改樹結構json
 findZNodes: function () {
 this.$http.post("/org/findOrgUserTree").then(function (response) {
 this.options1 = response.data; }) } } })</script></body>