树形组件修改

ZZJ

2021-12-20 05d754bb09ba4aeddd60320d33d583d388434c2f

 src/components/giantTree/index.vue

@@ -26,12 +26,20 @@
      :style="{ left: clientX + 'px', top: clientY + 'px' }"
    >
      <el-card :body-style="{ padding: '10px' }">
        <el-form :model="dialogForm" size="mini" :rules="rules" ref="dialogForm" label-width="70px">
        <el-form
          :model="dialogForm"
          size="mini"
          :rules="rules"
          ref="dialogForm"
          label-width="70px"
        >
          <el-form-item label="名称：" prop="name">
            <el-input v-model="dialogForm.text"></el-input>
          </el-form-item>
          <div class="text-center pb-2">
            <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
            <el-button size="mini" type="primary" @click="submitForm"
              >保存</el-button
            >
            <el-button size="mini" @click="hideDialogBox">取消</el-button>
          </div>
        </el-form>
@@ -42,32 +50,32 @@

<script>
// import VJstree from "./jsTree";
import ZTree from "./zTree/ztree"
import ZTree from "./zTree/ztree";

export default {
  name: "GiantTreeMenu",
  components: {
    ZTree
    ZTree,
  },
  props: {
    app: {
      type: String,
      default: "Video"
      default: "Video",
    },
    node: {
      type: Array
      type: Array,
    },
    treeName: {
      type: String,
      default: ""
      default: "",
    },
    gb28181: {
      type: Boolean,
      default: false
      default: false,
    },
    height: {
      type: Number,
      default: 0
      default: 0,
    },
    setting: {
      type: Object,
@@ -75,6 +83,10 @@
      default: function () {
        return {};
      },
    },
    clickType: {
      type: String,
      default: "",
    },
  },
  data() {
@@ -84,15 +96,15 @@
      clientX: 0,
      clientY: 0,
      dialogForm: {
        text: ""
        text: "",
      },
      rules: {
        text: [
          { required: true, message: "请输入节点名称", trigger: "change" },
          { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" }
        ]
          { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" },
        ],
      },
      curNodeTid: '',
      curNodeTid: "",
    };
  },
  created() {
@@ -108,7 +120,7 @@
      if (newValue !== this.treeName) {
        this.TreeDataPool.cleanTree(this.treeName);
      }
    }
    },
  },
  methods: {
    handleCreated: function (ztreeObj) {
@@ -121,14 +133,16 @@
      // 摄像机配置切换时, 设置选中状态
      if (this.TreeDataPool.selectedNode.id) {
        // 取消所有多选的节点,仅保留当前单选的节点
        this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id]
        this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id];
        this.curNodeTid = this.TreeDataPool.selectedNode.tId;
        //摄像机信息更新信息后，如果节点位置有变tId就不准了,this.TreeDataPool.selectedNode此时还是旧的信息
        let ztreeNodes = ztreeObj.getNodes();
        //var curNodeTid = '';
        _this.findTidByIdFromArr(ztreeNodes);
        this.TreeDataPool.selectedNode.tId = _this.curNodeTid;
        let node = this.ztreeObj.getNodeByTId(this.TreeDataPool.selectedNode.tId)
        let node = this.ztreeObj.getNodeByTId(
          this.TreeDataPool.selectedNode.tId
        );

        // 多选时, 选中单选单击的节点
        if (this.TreeDataPool.multiple) {
@@ -136,7 +150,7 @@
          this.ztreeObj.checkNode(node, true, false, false);
        }

        this.ztreeObj.selectNode(node, false, true)
        this.ztreeObj.selectNode(node, false, true);
      }
    },

@@ -152,7 +166,6 @@
          this.findTidByIdFromArr(arr[i].children);
        }
      }

    },
    onDblClick(evt, treeId, item) {
      if (item.type !== "4" || this.app !== "Camera") {
@@ -168,14 +181,18 @@
        this.TreeDataPool.activeVideoIndex !== "" &&
        this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
      ) {
        this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
        this.TreeDataPool.setVideoArr(
          this.TreeDataPool.activeVideoIndex,
          undefined,
          this
        );
        this.$nextTick(() => {
          this.TreeDataPool.setVideoArr(
            this.TreeDataPool.activeVideoIndex,
            item,
            this
          );
        })
        });
        return;
      }

@@ -193,14 +210,18 @@
        }
      }
      if (nullVideoIndex === "") {
        this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
        this.TreeDataPool.setVideoArr(
          this.TreeDataPool.activeVideoIndex,
          undefined,
          this
        );
        this.$nextTick(() => {
          this.TreeDataPool.setVideoArr(
            this.TreeDataPool.activeVideoIndex,
            item,
            this
          );
        })
        });
      } else {
        // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
        this.$nextTick(() => {
@@ -209,7 +230,7 @@
            item,
            this
          );
        })
        });
        this.TreeDataPool.activeVideoIndex = nullVideoIndex;
      }
    },
@@ -223,7 +244,7 @@
      this.dialogForm = {
        text: "",
        method: "add",
        node: node.id
        node: node.id,
      };
      this.showDialogBox(event);
    },
@@ -233,7 +254,7 @@
        method: "edit",
        node: node.id,
        alias: node.alias,
        gb28181: this.gb28181
        gb28181: this.gb28181,
      };
      this.showDialogBox(event);
    },
@@ -242,7 +263,7 @@
    },
    submitForm() {
      // 提交新增或者编辑区域节点表单
      this.$refs.dialogForm.validate(valid => {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogForm.method == "add") {
            this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node);
@@ -272,6 +293,10 @@
      this.showDialog = true;
    },
    itemClick(evt, treeId, treeNode) {
      if (this.clickType == "multiple") {
        evt.target.parentNode.parentNode.querySelector(".chk").click();
        return;
      }

      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;
@@ -311,24 +336,24 @@
      this.TreeDataPool.countCheckedNodes(checkedNodes);

      // 保存一份数据
      this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes()
      this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes();
    },
    //展开
    itemExpand(e, id, node) {
      delete this.TreeDataPool.foldNodeList[node.id]
      delete this.TreeDataPool.foldNodeList[node.id];
    },
    // 折叠
    itemCollapse(e, id, node) {
      this.TreeDataPool.foldNodeList[node.id] = true
      this.TreeDataPool.foldNodeList[node.id] = true;
    },
    dropNode(node, item, draggedItem, e) {
      // console.log('dropNode', node, item, draggedItem);
      this.TreeDataPool.dropNode(draggedItem.id, item.id)
      this.TreeDataPool.dropNode(draggedItem.id, item.id);
    },
    showCameraPic(nodeId) {
      this.TreeDataPool.showBaseImage(nodeId)
    }
  }
      this.TreeDataPool.showBaseImage(nodeId);
    },
  },
};
</script>
<style lang="scss" scoped>