html页面
<div id="app">
<el-container style="width: 100%;margin-top:10px;">
<el-aside width="350px">
<div style="padding-left: 20px;">
<el-button @click="expandAll()" type="info" icon="el-icon-folder-opened" :size="size">全部展开
el-button>
div>
<div style="padding: 20px;">
<el-input :size="size" placeholder="输入节点名称进行搜索" clearable
v-model="filterTreeText">el-input>
<el-tree class="my-el-tree" highlight-current ref="elTree" :props="defaultProps"
@node-click="handleNodeClick"
accordion
:draggable="draggable" :allow-drag="allowDrag" :allow-drop="allowDrop" @node-drop="handleDrop"
:default-expand-all="expandNode" :filter-node-method="filterNode" lazy :load="loadNode"
node-key="id">
el-tree>
div>
el-aside>
<template>
<el-tabs v-model="activeName" style="width: 100%;">
<el-tab-pane label="节点" name="first">
<iframe ref="first" id="editServiceCenter" :height="height"
:src="editServiceCenterSrc" style="width: 100%;border-width: 0px;border-style: inset;border-color: initial;border-image: initial;">iframe>
el-tab-pane>
<el-tab-pane label="管理" name="second">
<iframe ref="second" id="serviceCenterUser" :height="height"
:src="serviceCenterUserSrc" style="width: 100%;border-width: 0px;border-style: inset;border-color: initial;border-image: initial;">iframe>
el-tab-pane>
el-tabs>
template>
el-container>
div>
body>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
height: document.documentElement.clientHeight - 40 + 'px',
loading: false,
activeName: 'first',
size: population_size,
listId: "",
filterTreeText: "",
expandNode: true,
draggable:true,
editServiceCenterSrc: "",
serviceCenterUserSrc: "",
defaultProps: {
children: 'children',
label: 'name',
isLeaf: "leaf"
},
},
watch: {
filterTreeText: function(val) {
this.$refs.elTree.filter(val);
},
},
methods: {
loadNode: function (node, resolve) {
if (node.level === 0) {
$.ajax({
type: "POST",
url: "commTree",
data: {parentId: "${id}", isRoot: true},
dataType: "JSON",
success: function (data) {
resolve(data);
vue.$refs.elTree.setCurrentKey(data[0].id);
vue.handleNodeClick(data[0],node);
},
error: function (data) {
vue.$message({
showClose: true,
offset: message_offset_from_top,
message: data.responseJSON.result.solution,
type: error
});
}
});
} else if (node.level != 0 && !node.data.leaf) {
$.ajax({
url: 'commTree',
data: {parentId: node.data.id},
async: false,
type: "POST",
dataType: "JSON",
success: function (data) {
resolve(data);
if(node.level == 1){
node.expanded = true;
}else{
node.expanded = false;
}
},
error: function (data) {
vue.$message({
showClose: true,
offset: message_offset_from_top,
message: data.responseJSON.result.solution,
type: error
});
}
});
} else {
resolve([]);
node.expanded = false;
}
},
handleNodeClick: function (data, node, obj) {
vue.$refs.elTree.setCurrentKey(data.id);
this.listId = data.id;
this.editServiceCenterSrc = '../editOrg?id=' + this.listId;
this.serviceCenterUserSrc = '../index?dataid=' + this.listId;
if(node && node.isLeaf==false){
node.expanded = true;
}
},
filterNode: function(value, data, node) {
if (!value) return true;
var b = data.name.indexOf(value) !== -1;
if(b){
node.expanded = true;
}
return b;
},
refreshTreeNode: function (id) {
if (id) {
let node_ = this.$refs.elTree.getNode(id)
node_.loaded = false;
node_.loadData();
node_.expand();
}
},
refreshParentTreeNode: function (id) {
if (id) {
let node_ = this.$refs.elTree.getNode(id);
node_ = this.$refs.elTree.getNode(node_.data.parentid);
node_.loaded = false;
node_.loadData();
node_.expand();
}
},
refreshCurrentTreeNode: function (id,name) {
if (id) {
let node_ = this.$refs.elTree.getNode(id)
node_.data.name = name;
}
},
expandAll: function () {
const tree = this.$refs.elTree;
if (tree) {
this.expandAllNodes(tree.store.root.childNodes);
}
},
expandAllNodes: function (nodes) {
for (let node of nodes) {
if (node.childNodes && !node.expanded) {
node.expand();
}
if (node.childNodes && node.childNodes.length > 0) {
this.expandAllNodes(node.childNodes);
}
}
},
allowDrag: function(draggingNode){
return draggingNode.isLeaf == true;
},
allowDrop: function(draggingNode, dropNode, type) {
return type === 'inner';
},
handleDrop: function(draggingNode, dropNode, dropType, ev) {
if(dropType=='inner'){
if (draggingNode.data.parentid == dropNode.data.id) {
vue.$message({
showClose: true,
offset: message_offset_from_top,
message: "已经在该节点下",
type: 'error'
});
}else{
var data = {};
data.fromId = draggingNode.data.id;
data.toId = dropNode.data.id;
$.ajax({
type: "POST",
url: "moveNodes",
data: data,
dataType: "json",
async: false,
success: function (returnValue) {
vue.$message({
showClose: true,
offset: message_offset_from_top,
message: returnValue.msg,
type: returnValue.success ? "success" : "error"
});
vue.refreshTreeNode(draggingNode.data.parentid);
vue.refreshTreeNode(dropNode.data.parentid);
},
error: function () {
vue.$message({
showClose: true,
offset: message_offset_from_top,
message: '操作错误,查看错误日志!',
type: 'error'
});
}
});
}
}
},
},
mounted:function(){
window.addEventListener('resize',()=>{
this.height = document.body.clientHeight-40 + 'px';
});
},
})
script>
java后台处理
@RequestMapping(value = "/commTree", produces = "application/json;charset=UTF-8")
public List<Map<String, Object>> commTree(@RequestParam String parentId, @RequestParam(required = false) Boolean isRoot) {
Map<String, Object> param = new HashMap<>();
if (parentId == null || (isRoot != null && isRoot)) {
param.put("id", parentId);
} else {
param.put("parentid", parentId);
}
List<Map<String, Object>> list = organServices.findList(param);
for (Map<String, Object> map : list) {
Integer count = (Integer)map.get("childcount");
map.put("isParent", count > 0);
map.put("leaf", !(count > 0));
}
return list ;
}
展示效果
