<template>
|
<div class="ztree" :id="ztreeId"></div>
|
</template>
|
|
<script>
|
import * as $ from "jquery";
|
if (!window.jQuery) {
|
window.jQuery = $;
|
}
|
|
// require("@ztree/ztree_v3/js/jquery.ztree.all");
|
require("./ztree_v3/jquery.ztree.all");
|
|
export default {
|
props: {
|
showCheckbox: { type: Boolean, default: false },
|
readonly: { type: Boolean, default: true },
|
gb28181: { type: Boolean, default: false },
|
setting: {
|
type: Object,
|
require: false,
|
default: function () {
|
return {};
|
},
|
},
|
nodes: {
|
type: Array,
|
require: true,
|
default: function () {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
|
ztreeObj: null,
|
list: [],
|
ztreeSetting: {
|
view: {
|
showIcon: true, // default to hide icon
|
addHoverDom: this.addHoverDom,
|
removeHoverDom: this.removeHoverDom
|
},
|
check: {
|
enable: this.showCheckbox
|
},
|
callback: {
|
onAsyncError: (...arg) => {
|
this.$emit("onAsyncError", ...arg);
|
},
|
onAsyncSuccess: (...arg) => {
|
this.$emit("onAsyncSuccess", ...arg);
|
},
|
onCheck: (...arg) => {
|
this.$emit("onCheck", ...arg);
|
},
|
onClick: (...arg) => {
|
this.$emit("onClick", ...arg);
|
},
|
onCollapse: (...arg) => {
|
this.$emit("onCollapse", ...arg);
|
},
|
onDblClick: (...arg) => {
|
this.$emit("onDblClick", ...arg);
|
},
|
onDrag: (...arg) => {
|
this.$emit("onDrag", ...arg);
|
},
|
onDragMove: (...arg) => {
|
this.$emit("onDragMove", ...arg);
|
},
|
onDrop: (...arg) => {
|
this.$emit("onDrop", ...arg);
|
},
|
onExpand: (...arg) => {
|
this.$emit("onExpand", ...arg);
|
},
|
onMouseDown: (...arg) => {
|
this.$emit("onMouseDown", ...arg);
|
},
|
onMouseUp: (...arg) => {
|
this.$emit("onMouseUp", ...arg);
|
},
|
onRemove: (...arg) => {
|
this.$emit("onRemove", ...arg);
|
},
|
onRename: (...arg) => {
|
this.$emit("onRename", ...arg);
|
},
|
onRightClick: (...arg) => {
|
this.$emit("onRightClick", ...arg);
|
},
|
},
|
},
|
};
|
},
|
watch: {
|
nodes: {
|
handler: function (nodes) {
|
this.list = nodes;
|
|
// update tree
|
if (this.ztreeObj) {
|
this.ztreeObj.destroy();
|
}
|
this.$nextTick(() => {
|
this.ztreeObj = $.fn.zTree.init(
|
$("#" + this.ztreeId),
|
Object.assign({}, this.ztreeSetting, this.setting),
|
this.list
|
);
|
this.$emit("onCreated", this.ztreeObj);
|
});
|
},
|
deep: true,
|
immediate: true,
|
},
|
showCheckbox: {
|
handler: function () {
|
this.ztreeSetting.check.enable = this.showCheckbox;
|
|
if (this.ztreeObj) {
|
this.ztreeObj.destroy();
|
}
|
this.$nextTick(() => {
|
this.ztreeObj = $.fn.zTree.init(
|
$("#" + this.ztreeId),
|
Object.assign({}, this.ztreeSetting, this.setting),
|
this.list
|
);
|
this.$emit("onCreated", this.ztreeObj);
|
});
|
},
|
immediate: true,
|
}
|
},
|
methods: {
|
addHoverDom(treeid, treeNode) {
|
let _vue = this;
|
const item = document.getElementById(`${treeNode.tId}_a`);
|
|
// 文件夹新增按钮
|
if (item && !item.querySelector('.el-icon-circle-plus-outline') && treeNode.isParent && !this.readonly && !this.gb28181) {
|
const btn = document.createElement('i');
|
btn.id = `${treeid}_${treeNode.id}_btn`;
|
btn.classList.add('el-icon-circle-plus-outline');
|
btn.classList.add('primary');
|
// btn.innerText = '删除';
|
btn.addEventListener('click', (e) => {
|
e.stopPropagation()
|
// this.clickRemove(treeNode)
|
_vue.$emit("addNode", treeNode);
|
})
|
|
item.appendChild(btn);
|
}
|
|
// 文件夹删除按钮
|
if (item && !item.querySelector('.el-icon-remove-outline') && treeNode.isParent && !this.readonly && !treeNode.children && !this.gb28181) {
|
const btn = document.createElement('i');
|
btn.id = `${treeid}_${treeNode.id}_btn`;
|
btn.classList.add('el-icon-remove-outline');
|
btn.classList.add('danger');
|
// btn.innerText = '删除';
|
btn.addEventListener('click', (e) => {
|
e.stopPropagation()
|
// this.clickRemove(treeNode)
|
_vue.$emit("onRemoveNode", treeNode);
|
})
|
|
item.appendChild(btn);
|
}
|
|
// 文件夹编辑按钮
|
if (item && !item.querySelector('.el-icon-edit') && treeNode.isParent && !this.readonly) {
|
const btn = document.createElement('i');
|
btn.id = `${treeid}_${treeNode.id}_btn`;
|
btn.classList.add('el-icon-edit');
|
btn.classList.add('primary');
|
// btn.innerText = '删除';
|
btn.addEventListener('click', (e) => {
|
e.stopPropagation()
|
// this.clickRemove(treeNode)
|
_vue.$emit("onRenameNode", treeNode);
|
})
|
|
item.appendChild(btn);
|
}
|
|
// 添加摄像机按钮
|
if (item && !item.querySelector('.iconshishishipin') && treeNode.isParent && !this.readonly && !this.gb28181) {
|
const btn = document.createElement('i');
|
btn.id = `${treeid}_${treeNode.id}_btn`;
|
btn.classList.add('iconfont');
|
btn.classList.add('iconshishishipin');
|
btn.classList.add('primary');
|
btn.classList.add('icon-fix');
|
// btn.innerText = '删除';
|
btn.addEventListener('click', (e) => {
|
e.stopPropagation()
|
// this.clickRemove(treeNode)
|
_vue.$emit("onAddDevice", treeNode.id);
|
})
|
|
item.appendChild(btn);
|
}
|
|
// 导入摄像机按钮
|
if (item && !item.querySelector('.icondaoru') && treeNode.isParent && !this.readonly && !this.gb28181) {
|
const btn = document.createElement('i');
|
btn.id = `${treeid}_${treeNode.id}_btn`;
|
btn.classList.add('iconfont');
|
btn.classList.add('icondaoru');
|
btn.classList.add('primary');
|
btn.classList.add('icon-fix');
|
// btn.innerText = '删除';
|
btn.addEventListener('click', (e) => {
|
e.stopPropagation()
|
// this.clickRemove(treeNode)
|
_vue.$emit("onImport", treeNode.id);
|
})
|
|
item.appendChild(btn);
|
}
|
},
|
removeHoverDom(treeid, treeNode) {
|
const item = document.getElementById(`${treeNode.tId}_a`);
|
if (item) {
|
let btn = item.querySelector('.el-icon-circle-plus-outline');
|
if (btn) {
|
item.removeChild(item.querySelector('.el-icon-circle-plus-outline'))
|
}
|
|
btn = item.querySelector('.el-icon-remove-outline');
|
if (btn) {
|
item.removeChild(item.querySelector('.el-icon-remove-outline'))
|
}
|
|
btn = item.querySelector('.el-icon-edit');
|
if (btn) {
|
item.removeChild(item.querySelector('.el-icon-edit'))
|
}
|
|
btn = item.querySelector('.iconshishishipin');
|
if (btn) {
|
item.removeChild(item.querySelector('.iconshishishipin'))
|
}
|
|
btn = item.querySelector('.icondaoru');
|
if (btn) {
|
item.removeChild(item.querySelector('.icondaoru'))
|
}
|
}
|
},
|
}
|
};
|
</script>
|
|
<style >
|
/* beauty ztree! */
|
|
.ztree * {
|
padding: 0;
|
margin: 0;
|
font-size: 13px;
|
font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
|
}
|
.ztree {
|
margin: 0;
|
padding: 5px;
|
color: #333;
|
}
|
.ztree li {
|
padding: 0;
|
margin: 5px 0px;
|
list-style: none;
|
line-height: 14px;
|
text-align: left;
|
white-space: nowrap;
|
outline: 0;
|
}
|
.ztree li ul {
|
margin: 0;
|
padding: 0 0 0 18px;
|
}
|
.ztree li ul.line {
|
background: url(./img/line_conn.gif) 0 0 repeat-y;
|
}
|
|
.ztree li a {
|
padding: 1px 3px 0 0;
|
margin: 0px;
|
cursor: pointer;
|
height: 17px;
|
color: #333;
|
background-color: transparent;
|
text-decoration: none;
|
vertical-align: top;
|
display: inline-block;
|
}
|
.ztree li a:hover {
|
background-color: #e1e1e1;
|
}
|
.ztree li a.curSelectedNode {
|
background-color: #e1e1e1;
|
}
|
.ztree li a.curSelectedNode_Edit {
|
padding-top: 0px;
|
background-color: #e1e1e1;
|
color: black;
|
height: 16px;
|
border: 1px #e1e1e2 solid;
|
opacity: 0.8;
|
}
|
.ztree li a.tmpTargetNode_inner {
|
padding-top: 0px;
|
background-color: #316ac5;
|
color: white;
|
height: 16px;
|
border: 1px #316ac5 solid;
|
opacity: 0.8;
|
filter: alpha(opacity=80);
|
}
|
.ztree li a.tmpTargetNode_prev {
|
}
|
.ztree li a.tmpTargetNode_next {
|
}
|
.ztree li a input.rename {
|
height: 14px;
|
width: 80px;
|
padding: 0;
|
margin: 0;
|
font-size: 12px;
|
border: 1px #7ec4cc solid;
|
*border: 0px;
|
}
|
.ztree li span {
|
line-height: 16px;
|
margin-right: 2px;
|
}
|
|
.ztree li span.node_name {
|
margin-left: 4px;
|
}
|
|
.ztree li i.icon-fix {
|
font-size: 15px;
|
margin-left: 3px;
|
margin-right: 5px;
|
position: relative;
|
top: 2px;
|
}
|
|
.ztree li i.primary {
|
color: #3d68e1;
|
}
|
.ztree li i.danger {
|
color: #f7493c;
|
}
|
.ztree li span.running {
|
color: #3d68e1;
|
}
|
|
.ztree li span.button {
|
line-height: 0;
|
margin: 0;
|
width: 16px;
|
height: 16px;
|
display: inline-block;
|
vertical-align: middle;
|
border: 0 none;
|
cursor: pointer;
|
outline: none;
|
background-color: transparent;
|
background-repeat: no-repeat;
|
background-attachment: scroll;
|
background-image: url("./img/zTreeStandard.png");
|
*background-image: url("./img/zTreeStandard.gif");
|
}
|
|
.ztree li span.button.chk {
|
width: 13px;
|
height: 13px;
|
margin: 0 3px 0 0;
|
cursor: auto;
|
}
|
.ztree li span.button.chk.checkbox_false_full {
|
background-position: 0 0;
|
}
|
.ztree li span.button.chk.checkbox_false_full_focus {
|
background-position: 0 -14px;
|
}
|
.ztree li span.button.chk.checkbox_false_part {
|
background-position: 0 -28px;
|
}
|
.ztree li span.button.chk.checkbox_false_part_focus {
|
background-position: 0 -42px;
|
}
|
.ztree li span.button.chk.checkbox_false_disable {
|
background-position: 0 -56px;
|
}
|
.ztree li span.button.chk.checkbox_true_full {
|
background-position: -14px 0;
|
}
|
.ztree li span.button.chk.checkbox_true_full_focus {
|
background-position: -14px -14px;
|
}
|
.ztree li span.button.chk.checkbox_true_part {
|
background-position: -14px -28px;
|
}
|
.ztree li span.button.chk.checkbox_true_part_focus {
|
background-position: -14px -42px;
|
}
|
.ztree li span.button.chk.checkbox_true_disable {
|
background-position: -14px -56px;
|
}
|
.ztree li span.button.chk.radio_false_full {
|
background-position: -28px 0;
|
}
|
.ztree li span.button.chk.radio_false_full_focus {
|
background-position: -28px -14px;
|
}
|
.ztree li span.button.chk.radio_false_part {
|
background-position: -28px -28px;
|
}
|
.ztree li span.button.chk.radio_false_part_focus {
|
background-position: -28px -42px;
|
}
|
.ztree li span.button.chk.radio_false_disable {
|
background-position: -28px -56px;
|
}
|
.ztree li span.button.chk.radio_true_full {
|
background-position: -42px 0;
|
}
|
.ztree li span.button.chk.radio_true_full_focus {
|
background-position: -42px -14px;
|
}
|
.ztree li span.button.chk.radio_true_part {
|
background-position: -42px -28px;
|
}
|
.ztree li span.button.chk.radio_true_part_focus {
|
background-position: -42px -42px;
|
}
|
.ztree li span.button.chk.radio_true_disable {
|
background-position: -42px -56px;
|
}
|
|
.ztree li span.button.switch {
|
width: 18px;
|
height: 18px;
|
}
|
.ztree li span.button.root_open {
|
background-position: -92px -54px;
|
}
|
.ztree li span.button.root_close {
|
background-position: -74px -54px;
|
}
|
.ztree li span.button.roots_open {
|
background-position: -92px 0;
|
}
|
.ztree li span.button.roots_close {
|
background-position: -74px 0;
|
}
|
.ztree li span.button.center_open {
|
background-position: -92px -18px;
|
}
|
.ztree li span.button.center_close {
|
background-position: -74px -18px;
|
}
|
.ztree li span.button.bottom_open {
|
background-position: -92px -36px;
|
}
|
.ztree li span.button.bottom_close {
|
background-position: -74px -36px;
|
}
|
.ztree li span.button.noline_open {
|
background-position: -92px -72px;
|
}
|
.ztree li span.button.noline_close {
|
background-position: -74px -72px;
|
}
|
.ztree li span.button.root_docu {
|
background: none;
|
}
|
.ztree li span.button.roots_docu {
|
background-position: -56px 0;
|
}
|
.ztree li span.button.center_docu {
|
background-position: -56px -18px;
|
}
|
.ztree li span.button.bottom_docu {
|
background-position: -56px -36px;
|
}
|
.ztree li span.button.noline_docu {
|
background: none;
|
}
|
|
.ztree li span.button.ico_open {
|
margin-right: 2px;
|
background-position: -110px -16px;
|
vertical-align: top;
|
*vertical-align: middle;
|
}
|
.ztree li span.button.ico_close {
|
margin-right: 2px;
|
background-position: -110px 0;
|
vertical-align: top;
|
*vertical-align: middle;
|
}
|
.ztree li span.button.ico_docu {
|
margin-right: 2px;
|
background-position: -110px -32px;
|
vertical-align: top;
|
*vertical-align: middle;
|
}
|
.ztree li span.button.edit {
|
margin-right: 2px;
|
background-position: -110px -48px;
|
vertical-align: top;
|
*vertical-align: middle;
|
}
|
.ztree li span.button.remove {
|
margin-right: 2px;
|
background-position: -110px -64px;
|
vertical-align: top;
|
*vertical-align: middle;
|
}
|
|
.ztree li span.button.ico_loading {
|
margin-right: 2px;
|
background: url(./img/loading.gif) no-repeat scroll 0 0 transparent;
|
vertical-align: top;
|
*vertical-align: middle;
|
}
|
|
ul.tmpTargetzTree {
|
background-color: #e1e1e1;
|
opacity: 0.8;
|
filter: alpha(opacity=80);
|
}
|
|
span.tmpzTreeMove_arrow {
|
width: 16px;
|
height: 16px;
|
display: inline-block;
|
padding: 0;
|
margin: 2px 0 0 1px;
|
border: 0 none;
|
position: absolute;
|
background-color: transparent;
|
background-repeat: no-repeat;
|
background-attachment: scroll;
|
background-position: -110px -80px;
|
background-image: url("./img/zTreeStandard.png");
|
*background-image: url("./img/zTreeStandard.gif");
|
}
|
|
ul.ztree.zTreeDragUL {
|
margin: 0;
|
padding: 0;
|
position: absolute;
|
width: auto;
|
height: auto;
|
overflow: hidden;
|
background-color: #cfcfcf;
|
border: 1px #00b83f dotted;
|
opacity: 0.8;
|
filter: alpha(opacity=80);
|
}
|
.zTreeMask {
|
z-index: 10000;
|
background-color: #cfcfcf;
|
opacity: 0;
|
filter: alpha(opacity=0);
|
position: absolute;
|
}
|
</style>
|
