修改ztree复选框默认为父子联动

zhangzengfei

2022-03-23 d8944c4764c3fc4b7baf6b5c1586cf17c88b0bb1

 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 {