知識點：前端使用vuetree的組件庫，調用后台查詢組織機構，包括人員的接口
實現下拉樹的功能
查考：
vue-treeselect官網：https://vue-treeselect.js.org/
源碼demo下載鏈接：https://github.com/shuaishuaihand/orgvuetreedemo.git
（一）效果：
（二）代碼
1.后台接口（遞歸算法）
controller層
/**
* 查詢組織結構下拉樹
* @return
*/
@RequestMapping(value = "/findOrgUserTree", method = { RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public List<Map<String,Object>> findOrgUserTree() {
return orgService.findOrgUserTree(0);
}
service層
/**
* 遞歸查詢組織機構-用戶樹節點
* @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 < 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>