From d8944c4764c3fc4b7baf6b5c1586cf17c88b0bb1 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 23 三月 2022 22:38:20 +0800
Subject: [PATCH] 修改ztree复选框默认为父子联动
---
src/components/giantTree/zTree/ztree.vue | 279 +++++++++++++++++++++++++------------------------------
1 files changed, 129 insertions(+), 150 deletions(-)
diff --git a/src/components/giantTree/zTree/ztree.vue b/src/components/giantTree/zTree/ztree.vue
index 6ec0d4e..e7bfab6 100644
--- a/src/components/giantTree/zTree/ztree.vue
+++ b/src/components/giantTree/zTree/ztree.vue
@@ -3,13 +3,13 @@
</template>
<script>
-import * as $ from "jquery";
+import * as $ from "jquery"
if (!window.jQuery) {
- window.jQuery = $;
+ window.jQuery = $
}
// require("@ztree/ztree_v3/js/jquery.ztree.all");
-require("./ztree_v3/jquery.ztree.all");
+require("./ztree_v3/jquery.ztree.all")
export default {
props: {
@@ -19,17 +19,17 @@
setting: {
type: Object,
require: false,
- default: function () {
- return {};
- },
+ default: function() {
+ return {}
+ }
},
nodes: {
type: Array,
require: true,
- default: function () {
- return [];
- },
- },
+ default: function() {
+ return []
+ }
+ }
},
data() {
return {
@@ -41,108 +41,109 @@
showLine: true,
showIcon: true, // default to hide icon
addHoverDom: this.addHoverDom,
- removeHoverDom: this.removeHoverDom,
+ removeHoverDom: this.removeHoverDom
},
check: {
- chkboxType: { Y: "", N: "" },
- enable: this.showCheckbox,
+ // 澶嶉�夋榛樿涓虹埗瀛愯仈鍔�
+ chkboxType: { Y: "ps", N: "ps" },
+ enable: this.showCheckbox
},
callback: {
onAsyncError: (...arg) => {
- this.$emit("onAsyncError", ...arg);
+ this.$emit("onAsyncError", ...arg)
},
onAsyncSuccess: (...arg) => {
- this.$emit("onAsyncSuccess", ...arg);
+ this.$emit("onAsyncSuccess", ...arg)
},
onCheck: (...arg) => {
- this.$emit("onCheck", ...arg);
+ this.$emit("onCheck", ...arg)
},
onClick: (...arg) => {
- this.$emit("onClick", ...arg);
- this.removeHoverIcon(...arg);
+ this.$emit("onClick", ...arg)
+ this.removeHoverIcon(...arg)
},
onCollapse: (...arg) => {
- this.$emit("onCollapse", ...arg);
+ this.$emit("onCollapse", ...arg)
},
onDblClick: (...arg) => {
- this.$emit("onDblClick", ...arg);
+ this.$emit("onDblClick", ...arg)
},
onDrag: (...arg) => {
- this.$emit("onDrag", ...arg);
+ this.$emit("onDrag", ...arg)
},
onDragMove: (...arg) => {
- this.$emit("onDragMove", ...arg);
+ this.$emit("onDragMove", ...arg)
},
onDrop: (...arg) => {
- this.$emit("onDrop", ...arg);
+ this.$emit("onDrop", ...arg)
},
onExpand: (...arg) => {
- this.$emit("onExpand", ...arg);
+ this.$emit("onExpand", ...arg)
},
onMouseDown: (...arg) => {
- this.$emit("onMouseDown", ...arg);
+ this.$emit("onMouseDown", ...arg)
},
onMouseUp: (...arg) => {
- this.$emit("onMouseUp", ...arg);
+ this.$emit("onMouseUp", ...arg)
},
onRemove: (...arg) => {
- this.$emit("onRemove", ...arg);
+ this.$emit("onRemove", ...arg)
},
onRename: (...arg) => {
- this.$emit("onRename", ...arg);
+ this.$emit("onRename", ...arg)
},
onRightClick: (...arg) => {
- this.$emit("onRightClick", ...arg);
- },
- },
- },
- };
+ this.$emit("onRightClick", ...arg)
+ }
+ }
+ }
+ }
},
watch: {
nodes: {
- handler: function (nodes) {
- this.list = nodes;
+ handler: function(nodes) {
+ this.list = nodes
// update tree
if (this.ztreeObj) {
- this.ztreeObj.destroy();
+ 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);
- });
+ )
+ this.$emit("onCreated", this.ztreeObj)
+ })
},
deep: true,
- immediate: true,
+ immediate: true
},
showCheckbox: {
- handler: function () {
- this.ztreeSetting.check.enable = this.showCheckbox;
+ handler: function() {
+ this.ztreeSetting.check.enable = this.showCheckbox
if (this.ztreeObj) {
- this.list = this.ztreeObj.getNodes();
- this.ztreeObj.destroy();
+ this.list = this.ztreeObj.getNodes()
+ 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);
- });
+ )
+ this.$emit("onCreated", this.ztreeObj)
+ })
},
- immediate: true,
- },
+ immediate: true
+ }
},
methods: {
addHoverDom(treeid, treeNode) {
- let _vue = this;
- const item = document.getElementById(`${treeNode.tId}_a`);
+ let _vue = this
+ const item = document.getElementById(`${treeNode.tId}_a`)
// 鏂囦欢澶规柊澧炴寜閽�
if (
@@ -152,18 +153,18 @@
!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");
+ 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();
+ e.stopPropagation()
// this.clickRemove(treeNode)
- _vue.$emit("onAddNode", treeNode);
- });
+ _vue.$emit("onAddNode", treeNode)
+ })
- item.appendChild(btn);
+ item.appendChild(btn)
}
// 鏂囦欢澶瑰垹闄ゆ寜閽�
@@ -175,152 +176,131 @@
!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");
+ 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();
+ e.stopPropagation()
// this.clickRemove(treeNode)
- _vue.$emit("onRemoveNode", treeNode);
- });
+ _vue.$emit("onRemoveNode", treeNode)
+ })
- item.appendChild(btn);
+ 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");
+ 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();
+ e.stopPropagation()
// this.clickRemove(treeNode)
- _vue.$emit("onRenameNode", treeNode);
- });
+ _vue.$emit("onRenameNode", treeNode)
+ })
- item.appendChild(btn);
+ 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");
+ 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();
+ e.stopPropagation()
// this.clickRemove(treeNode)
- _vue.$emit("onAddDevice", treeNode.id);
- });
+ _vue.$emit("onAddDevice", treeNode.id)
+ })
- item.appendChild(btn);
+ 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");
+ 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();
+ e.stopPropagation()
// this.clickRemove(treeNode)
- _vue.$emit("onImport", treeNode.id);
- });
+ _vue.$emit("onImport", treeNode.id)
+ })
- item.appendChild(btn);
+ item.appendChild(btn)
}
// 鏌ョ湅搴曞浘鎸夐挳
- if (
- item &&
- !item.querySelector(".icontupian1") &&
- treeNode.type == "camera"
- ) {
- const btn = document.createElement("i");
- btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add("iconfont");
- btn.classList.add("icontupian1");
- btn.classList.add("primary");
- btn.classList.add("icon-fix");
+ if (item && !item.querySelector(".icontupian1") && treeNode.type == "camera") {
+ const btn = document.createElement("i")
+ btn.id = `${treeid}_${treeNode.id}_btn`
+ btn.classList.add("iconfont")
+ btn.classList.add("icontupian1")
+ btn.classList.add("primary")
+ btn.classList.add("icon-fix")
// btn.innerText = '鍒犻櫎';
btn.addEventListener("click", (e) => {
- e.stopPropagation();
+ e.stopPropagation()
// this.clickRemove(treeNode)
- _vue.$emit("onShowPic", treeNode);
- });
+ _vue.$emit("onShowPic", treeNode)
+ })
- item.appendChild(btn);
+ item.appendChild(btn)
}
},
removeHoverIcon(evt, treeId, item) {
- this.removeHoverDom(treeId, item);
+ this.removeHoverDom(treeId, item)
},
removeHoverDom(treeid, treeNode) {
- const item = document.getElementById(`${treeNode.tId}_a`);
+ const item = document.getElementById(`${treeNode.tId}_a`)
if (item) {
- let btn = item.querySelector(".el-icon-circle-plus-outline");
+ let btn = item.querySelector(".el-icon-circle-plus-outline")
if (btn) {
- item.removeChild(item.querySelector(".el-icon-circle-plus-outline"));
+ item.removeChild(item.querySelector(".el-icon-circle-plus-outline"))
}
- btn = item.querySelector(".el-icon-remove-outline");
+ btn = item.querySelector(".el-icon-remove-outline")
if (btn) {
- item.removeChild(item.querySelector(".el-icon-remove-outline"));
+ item.removeChild(item.querySelector(".el-icon-remove-outline"))
}
- btn = item.querySelector(".el-icon-edit");
+ btn = item.querySelector(".el-icon-edit")
if (btn) {
- item.removeChild(item.querySelector(".el-icon-edit"));
+ item.removeChild(item.querySelector(".el-icon-edit"))
}
- btn = item.querySelector(".iconshishishipin");
+ btn = item.querySelector(".iconshishishipin")
if (btn) {
- item.removeChild(item.querySelector(".iconshishishipin"));
+ item.removeChild(item.querySelector(".iconshishishipin"))
}
- btn = item.querySelector(".icondaoru");
+ btn = item.querySelector(".icondaoru")
if (btn) {
- item.removeChild(item.querySelector(".icondaoru"));
+ item.removeChild(item.querySelector(".icondaoru"))
}
- btn = item.querySelector(".icontupian1");
+ btn = item.querySelector(".icontupian1")
if (btn) {
- item.removeChild(item.querySelector(".icontupian1"));
+ item.removeChild(item.querySelector(".icontupian1"))
}
}
- },
- },
-};
+ }
+ }
+}
</script>
-<style >
+<style>
/* beauty ztree! */
.ztree * {
@@ -352,8 +332,7 @@
}
.ztree li ul.line {
/* background: url(./img/line_conn.gif) 0 0 repeat-y; */
- background: url(data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7)
- 0 0 repeat-y;
+ background: url(data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7) 0 0 repeat-y;
}
.ztree li a {
--
Gitblit v1.8.0