150 lines
4.9 KiB
Vue
150 lines
4.9 KiB
Vue
<template>
|
|
<div :id="domId" :ref="domId" class="ztree"></div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
treeData: {
|
|
type: Object
|
|
},
|
|
setting: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
view: {
|
|
dblClickExpand: false,
|
|
showIcon: false
|
|
},
|
|
check: {
|
|
enable: false
|
|
},
|
|
callback: {}
|
|
};
|
|
}
|
|
},
|
|
autoClick: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
domId: ""
|
|
};
|
|
},
|
|
created() {
|
|
this.$watch("treeData", val => {
|
|
if (val) {
|
|
this.$nextTick(() => {
|
|
this.initTree(this.treeData, this.domId);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
mounted() {
|
|
this.domId = this.uuid();
|
|
},
|
|
methods: {
|
|
uuid() {
|
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
|
var r = (Math.random() * 16) | 0,
|
|
v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
return v.toString(16);
|
|
});
|
|
},
|
|
reloadTree(nodeId) {
|
|
this.initTree(this.treeData, this.domId);
|
|
if (nodeId != null) {
|
|
this.$nextTick(() => {
|
|
this.selectNode(nodeId, true); // 第二个参数 true 会 emit on-tree-click
|
|
});
|
|
}
|
|
},
|
|
initTree(_data, _domId) {
|
|
const _this = this;
|
|
_this.setting.callback.onClick = (event, treeId, treeNode, clickFlag) => {
|
|
// console.log(event, treeId, treeNode, clickFlag);
|
|
_this.$emit("on-tree-click", treeNode);
|
|
};
|
|
_this.setting.callback.onExpand = (event, treeId, treeNode) => {
|
|
if (treeNode.isParent && !treeNode.children) {
|
|
_this.$emit("on-tree-expand", treeNode);//触发展开事件
|
|
}
|
|
};
|
|
|
|
_this.setting.callback.beforeClick = (treeId, treeNode, clickFlag) => {
|
|
return treeNode.click != false;
|
|
};
|
|
var zNodes = _this.openFistNode(_data);
|
|
$.fn.zTree.init($("#" + _domId), _this.setting, zNodes);
|
|
|
|
if (_this.autoClick) {
|
|
if (Array.isArray(this.treeData)) {
|
|
let id = this.treeData[0].id;
|
|
_this.selectNode(id);
|
|
} else {
|
|
let id = this.treeData.id;
|
|
_this.selectNode(id);
|
|
}
|
|
}
|
|
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
|
setTimeout(() => {
|
|
this.selectNode(0);
|
|
}, 0);
|
|
},
|
|
selectNode(id, isClick = true) {
|
|
const _domId = this.domId;
|
|
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
|
var node = treeObj.getNodesByFilter(node => node.id == id, true);
|
|
if (node == null) return false;
|
|
treeObj.selectNode(node);
|
|
treeObj.expandNode(node, true, false, false);
|
|
treeObj.selectNode(node);
|
|
if (isClick) this.$emit("on-tree-click", node);
|
|
},
|
|
|
|
openFistNode(_zNodes) {
|
|
//展开一级节点
|
|
if (_zNodes && _zNodes.length > 0) {
|
|
for (var key in _zNodes) {
|
|
if (_zNodes.hasOwnProperty(key)) {
|
|
var element = _zNodes[key];
|
|
element.open = true;
|
|
}
|
|
}
|
|
} else {
|
|
_zNodes.open = true;
|
|
}
|
|
return _zNodes;
|
|
},
|
|
selectNode(id, isClick = true) {
|
|
const _domId = this.domId;
|
|
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
|
var node = treeObj.getNodesByFilter(node => node.id == id, true);
|
|
if (node == null) return false;
|
|
treeObj.selectNode(node);
|
|
treeObj.expandNode(node, true, false, false);
|
|
treeObj.selectNode(node);
|
|
if (isClick) this.$emit("on-tree-click", node);
|
|
},
|
|
addNode(pid, id, name, isParent) {
|
|
const _domId = this.domId;
|
|
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
|
var pnode = treeObj.getNodesByFilter(node => node.id == pid, true);
|
|
var newNode = { pid, id, name, isParent };
|
|
treeObj.addNodes(pnode, -1, newNode);
|
|
},
|
|
addNodes(treeNode, children) {
|
|
const _domId = this.domId;
|
|
var treeObj = $.fn.zTree.getZTreeObj(_domId);
|
|
const parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);
|
|
treeObj.addNodes(parentZNode, children, false);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|