From 4c13bcd58cc67374ab02ec4a73813c6b780c42e5 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期四, 17 十一月 2022 11:23:06 +0800
Subject: [PATCH] 修复ZTREE多选有重复id的问题
---
src/components/treeMenu/index.vue | 921 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 491 insertions(+), 430 deletions(-)
diff --git a/src/components/treeMenu/index.vue b/src/components/treeMenu/index.vue
index 48b9547..67c64a7 100644
--- a/src/components/treeMenu/index.vue
+++ b/src/components/treeMenu/index.vue
@@ -1,430 +1,491 @@
-<template>
- <div class="tree-menu" :style="`max-height:${height - 200}px;`">
- <v-jstree
- :data="node"
- :item-events="itemClickEvents"
- :show-checkbox="TreeDataPool.multiple"
- :multiple="TreeDataPool.multiple"
- allow-batch
- collapse
- :draggable="!gb28181"
- @item-click="itemClick"
- @item-toggle="itemToggle"
- @item-drop="dropNode"
- text-field-name="name"
- ref="jstree"
- >
- <template slot-scope="_">
- <div
- style="display: inherit; width:calc(100% + 120px) "
- @mouseover="selectStyle(_)"
- @mouseout="outStyle(_)"
- >
- <i
- :class="_.vm.themeIconClasses"
- role="presentation"
- v-if="!_.model.loading && _.model.type !== '4'"
- ></i>
-
- <!-- 鎽勫儚鏈虹姸鎬佸浘鏍� -->
- <i
- class="iconfont iconjiankongshexiangji"
- style="padding-left:4px;font-size:13px;line-height: 28px;"
- role="presentation"
- v-if="!_.model.loading && _.model.type === '4' && !_.model.isAI"
- ></i>
- <i
- class="iconfont iconfenxishexiangji"
- style="padding-left:4px;color:#3D68E1; font-size:13px;line-height: 28px;"
- role="presentation"
- v-if="!_.model.loading && _.model.isAI"
- ></i>
-
- <!-- 姝ｅ湪澶勭悊鐨勬憚鍍忔満鍚嶇О鏄剧ず涓鸿摑鑹� -->
- <span
- class="tree-name"
- :style="_.model.isRunning ? `color:#3d68e1` : '' "
- >{{ _.model.name }}</span>
-
- <div
- v-if="gb28181"
- v-show="
- hoverNodeId === _.model.id &&
- !TreeDataPool.gbReadonly &&
- '4' !== _.model.type
- "
- class="tree-item-handle"
- >
- <el-tooltip content="缂栬緫鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="editNode($event, _.model, gb28181)">
- <i class="el-icon-edit"></i>
- </button>
- </el-tooltip>
- </div>
-
- <div
- v-else
- v-show="
- hoverNodeId === _.model.id &&
- !TreeDataPool.readonly &&
- '4' !== _.model.type
- "
- class="tree-item-handle"
- >
- <el-tooltip content="娣诲姞鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="addNode($event, _.model)">
- <i class="el-icon-circle-plus-outline"></i>
- </button>
- </el-tooltip>
-
- <el-tooltip content="鍒犻櫎鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="delNode(_.model)" v-show="!_.model.children" style="color:#f53d3d">
- <i class="el-icon-remove-outline"></i>
- </button>
- </el-tooltip>
-
- <el-tooltip content="缂栬緫鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="editNode($event, _.model, gb28181)">
- <i class="el-icon-edit"></i>
- </button>
- </el-tooltip>
-
- <el-tooltip content="娣诲姞璁惧" placement="bottom" popper-class="atooltip">
- <button @click="addCamera(_.model.id)">
- <span
- class="iconfont iconshishishipin"
- style="font-size:15px; margin-left:3px; position:relative; top:2px;"
- ></span>
- </button>
- </el-tooltip>
-
- <el-tooltip content="瀵煎叆璁惧" placement="bottom" popper-class="atooltip">
- <button @click="importCameras(_.model.id)">
- <span
- class="iconfont icondaoru"
- style="font-size:17px; margin-left:9px; position:relative; top:2px;"
- ></span>
- </button>
- </el-tooltip>
- </div>
- </div>
- </template>
- </v-jstree>
- <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
- <div
- class="dialog-box"
- v-show="showDialog"
- :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-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" @click="hideDialogBox">鍙栨秷</el-button>
- </div>
- </el-form>
- </el-card>
- </div>
- </div>
-</template>
-
-<script>
-import VJstree from "./jsTree";
-
-export default {
- name: "TreeMenu",
- components: {
- VJstree
- },
- props: {
- app: {
- type: String,
- default: "Video"
- },
- node: {
- type: Array
- },
- treeName: {
- type: String,
- default: ""
- },
- gb28181: {
- type: Boolean,
- default: false
- },
- height: {
- type: Number,
- default: 0
- }
- },
- data() {
- return {
- hoverNodeId: "",
- itemClickEvents: {
- dblclick: (VNode, item, e) => {
- if (item.type !== "4" || this.app !== "Camera") {
- return;
- }
- // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose)
- this.TreeDataPool.activeVideoId = item.id;
- let videoArr = this.TreeDataPool.videoArr;
- let nullVideoIndex = "";
-
- if (
- this.TreeDataPool.activeForceChoose &&
- this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
- ) {
- this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
- this.$nextTick(() => {
- this.TreeDataPool.setVideoArr(
- this.TreeDataPool.activeVideoIndex,
- item,
- this
- );
- })
- return;
- }
-
- for (let i = 0; i < videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- videoArr[i] === "" ||
- videoArr[i] === undefined ||
- videoArr[i] === null
- ) {
- nullVideoIndex = i;
- break;
- } else {
- nullVideoIndex = "";
- }
- }
- if (nullVideoIndex === "") {
- 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(() => {
- this.TreeDataPool.setVideoArr(
- this.TreeDataPool.activeVideoIndex,
- item,
- this
- );
- })
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
- }
- // this.TreeDataPool.setVideoArr(videoArr.length - 1, item, this);
- }
- },
- showDialog: false,
- clientX: 0,
- clientY: 0,
- dialogForm: {
- text: ""
- },
- rules: {
- text: [
- { required: true, message: "璇疯緭鍏ヨ妭鐐瑰悕绉�", trigger: "change" },
- { min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", trigger: "change" }
- ]
- }
- };
- },
- created() {
- // console.log(this.height, '鏍戦珮搴�')
- this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
- ? Number(sessionStorage.activeIndexVideo)
- : this.TreeDataPool.activeVideoIndex;
- },
- watch: {
- "TreeDataPool.treeType": function (newValue) {
- if (newValue !== this.treeName) {
- this.TreeDataPool.cleanTree(this.treeName);
- }
- },
- node: function (newValue) {
- this.$refs.jstree.initializeData(newValue);
- }
- },
- methods: {
- addCamera(node) {
- this.$emit("addDevice", node);
- },
- importCameras(node) {
- this.$emit("import", node);
- },
- addNode(event, node) {
- this.dialogForm = {
- text: "",
- method: "add",
- node: node.id
- };
- this.showDialogBox(event);
- },
- editNode(event, node, isGb) {
- this.dialogForm = {
- text: node.name,
- method: "edit",
- node: node.id,
- alias: node.alias,
- gb28181: isGb
- };
- this.showDialogBox(event);
- },
- delNode(node) {
- this.TreeDataPool.del(node.id);
- },
- selectStyle(item) {
- this.hoverNodeId = item.model.id;
- },
- outStyle(item) {
- this.hoverNodeId = "";
- },
- submitForm() {
- // 鎻愪氦鏂板鎴栬�呯紪杈戝尯鍩熻妭鐐硅〃鍗�
- this.$refs.dialogForm.validate(valid => {
- if (valid) {
- if (this.dialogForm.method == "add") {
- this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node);
- } else if (this.dialogForm.method == "edit") {
- this.TreeDataPool.update(
- this.dialogForm.text,
- this.dialogForm.node,
- this.gb28181 ? this.dialogForm.text : "",
- this.dialogForm.gb28181
- );
- }
- } else {
- return false;
- }
- });
- this.hideDialogBox();
- },
- hideDialogBox() {
- this.showDialog = false;
- this.dialogForm = { text: "" };
- },
- showDialogBox(event) {
- let { clientX = 0, offsetY = 0 } = event;
- // this.clientX = clientX - 120;
- this.clientX = 50;
- this.clientY = offsetY;
- this.showDialog = true;
- },
- itemClick(node, item, e) {
- // console.log('jsTree index.vue', item)
- this.TreeDataPool.selectedNode = item;
- this.TreeDataPool.updateSelectedNodes();
- this.TreeDataPool.treeType = this.treeName;
- },
- itemToggle(node, item, e) {
- if (item.opened) {
- delete this.TreeDataPool.foldNodeList[item.id]
- } else {
- this.TreeDataPool.foldNodeList[item.id] = true
- }
- },
- dropNode(node, item, draggedItem, e) {
- console.log('dropNode', node, item, draggedItem);
- this.TreeDataPool.dropNode(draggedItem.id, item.id)
- }
- }
-};
-</script>
-<style lang="scss" scoped>
-.dialog-box {
- position: absolute;
- width: 220px;
- z-index: 1;
-}
-.dialog-box-bg {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background: rgba(255, 255, 255, 0.6);
-}
-.tree-item-handle {
- display: inline;
- font-size: 16px;
- margin-left: 6px;
- button {
- position: relative;
- color: #3d68e1;
- border: 0px;
- background-color: transparent;
- cursor: pointer;
- outline: none;
- }
- button:hover {
- color: #2249b4;
- }
- // button:hover:after {
- // position: fixed;
- // padding: 5px 10px;
- // background-color: #00000090;
- // border-radius: 0px;
- // color: #fff;
- // content: attr(labelTooltip);
- // font-size: 12px;
- // width: 55px;
- // margin-left: -50px;
- // margin-top: 25px;
- // vertical-align: left;
- // }
-}
-.tree-name {
- font-family: PingFangSC-Medium;
- font-size: 13px;
- color: #222222;
- // max-width: 100px;
- line-height: 27px;
- margin-left: 4px;
- display: inline-block;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- vertical-align: top;
-}
-.tree-menu {
- // max-width: 350px;
- overflow-x: hidden;
- overflow-y: hidden;
- margin-bottom: 4px;
-}
-.tree-menu::-webkit-scrollbar {
- /*婊氬姩鏉℃暣浣撴牱寮�*/
- width: 4px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
- height: 4px;
-}
-.tree-menu::-webkit-scrollbar-thumb {
- /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
- border-radius: 5px;
- -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
- background: rgb(202, 201, 201);
-}
-.tree-menu::-webkit-scrollbar-track {
- /*婊氬姩鏉￠噷闈㈣建閬�*/
- -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
- border-radius: 0;
- background: rgb(235, 234, 234);
-}
-.tree-menu::-webkit-scrollbar-thumb:hover {
- background: rgba(0, 0, 0, 0.4);
-}
-.tree-menu:hover {
- overflow-x: visible;
- overflow-y: auto;
- margin-bottom: 0px;
-}
-</style>
+<template>
+ <div class="tree-menu" :style="`max-height:${height - 200}px;`">
+ <v-jstree
+ :data="node"
+ :item-events="itemClickEvents"
+ :show-checkbox="TreeDataPool.multiple"
+ :multiple="TreeDataPool.multiple"
+ allow-batch
+ collapse
+ :draggable="!gb28181"
+ @item-click="itemClick"
+ @item-toggle="itemToggle"
+ @item-drop="dropNode"
+ text-field-name="name"
+ ref="jstree"
+ >
+ <template slot-scope="_">
+ <div
+ style="display: inherit; width: calc(100% + 120px)"
+ @mouseover="selectStyle(_)"
+ @mouseout="outStyle(_)"
+ >
+ <i
+ :class="_.vm.themeIconClasses"
+ role="presentation"
+ v-if="!_.model.loading && _.model.type !== '4'"
+ ></i>
+
+ <!-- 鎽勫儚鏈虹姸鎬佸浘鏍� -->
+ <i
+ class="iconfont iconjiankongshexiangji"
+ style="padding-left: 4px; font-size: 13px; line-height: 28px"
+ role="presentation"
+ v-if="!_.model.loading && _.model.type === '4' && !_.model.isAI"
+ ></i>
+ <i
+ class="iconfont iconfenxishexiangji"
+ style="
+ padding-left: 4px;
+ color: #3d68e1;
+ font-size: 13px;
+ line-height: 28px;
+ "
+ role="presentation"
+ v-if="!_.model.loading && _.model.isAI"
+ ></i>
+
+ <!-- 姝ｅ湪澶勭悊鐨勬憚鍍忔満鍚嶇О鏄剧ず涓鸿摑鑹� -->
+ <span
+ class="tree-name"
+ :style="_.model.isRunning ? `color:#3d68e1` : ''"
+ >{{ _.model.name }}</span
+ >
+
+ <div
+ v-if="gb28181"
+ v-show="
+ hoverNodeId === _.model.id &&
+ !TreeDataPool.gbReadonly &&
+ '4' !== _.model.type
+ "
+ class="tree-item-handle"
+ >
+ <el-tooltip
+ content="缂栬緫鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="editNode($event, _.model, gb28181)">
+ <i class="el-icon-edit"></i>
+ </button>
+ </el-tooltip>
+ </div>
+
+ <div
+ v-else
+ v-show="
+ hoverNodeId === _.model.id &&
+ !TreeDataPool.readonly &&
+ '4' !== _.model.type
+ "
+ class="tree-item-handle"
+ >
+ <el-tooltip
+ content="娣诲姞鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="addNode($event, _.model)">
+ <i class="el-icon-circle-plus-outline"></i>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="鍒犻櫎鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button
+ @click="delNode(_.model)"
+ v-show="!_.model.children"
+ style="color: #f53d3d"
+ >
+ <i class="el-icon-remove-outline"></i>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="缂栬緫鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="editNode($event, _.model, gb28181)">
+ <i class="el-icon-edit"></i>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="娣诲姞璁惧"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="addCamera(_.model.id)">
+ <span
+ class="iconfont iconshishishipin"
+ style="
+ font-size: 15px;
+ margin-left: 3px;
+ position: relative;
+ top: 2px;
+ "
+ ></span>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="瀵煎叆璁惧"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="importCameras(_.model.id)">
+ <span
+ class="iconfont icondaoru"
+ style="
+ font-size: 17px;
+ margin-left: 9px;
+ position: relative;
+ top: 2px;
+ "
+ ></span>
+ </button>
+ </el-tooltip>
+ </div>
+ </div>
+ </template>
+ </v-jstree>
+ <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
+ <div
+ class="dialog-box"
+ v-show="showDialog"
+ :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-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" @click="hideDialogBox">鍙栨秷</el-button>
+ </div>
+ </el-form>
+ </el-card>
+ </div>
+ </div>
+</template>
+
+<script>
+import VJstree from "./jsTree";
+
+export default {
+ name: "TreeMenu",
+ components: {
+ VJstree,
+ },
+ props: {
+ app: {
+ type: String,
+ default: "Video",
+ },
+ node: {
+ type: Array,
+ },
+ treeName: {
+ type: String,
+ default: "",
+ },
+ gb28181: {
+ type: Boolean,
+ default: false,
+ },
+ height: {
+ type: Number,
+ default: 0,
+ },
+ },
+ data() {
+ return {
+ hoverNodeId: "",
+ itemClickEvents: {
+ dblclick: (VNode, item, e) => {
+ if (item.type !== "4" || this.app !== "Camera") {
+ return;
+ }
+ // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose)
+ this.TreeDataPool.activeVideoId = item.id;
+ let videoArr = this.TreeDataPool.videoArr;
+ let nullVideoIndex = "";
+
+ if (
+ this.TreeDataPool.activeForceChoose &&
+ this.TreeDataPool.activeVideoIndex !== "" &&
+ this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
+ ) {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ undefined,
+ this
+ );
+ this.$nextTick(() => {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ item,
+ this
+ );
+ });
+ return;
+ }
+
+ for (let i = 0; i < videoArr.length; i++) {
+ // eslint-disable-next-line
+ if (
+ videoArr[i] === "" ||
+ videoArr[i] === undefined ||
+ videoArr[i] === null
+ ) {
+ nullVideoIndex = i;
+ break;
+ } else {
+ nullVideoIndex = "";
+ }
+ }
+ if (nullVideoIndex === "") {
+ 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(() => {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ item,
+ this
+ );
+ });
+ this.TreeDataPool.activeVideoIndex = nullVideoIndex;
+ }
+ // this.TreeDataPool.setVideoArr(videoArr.length - 1, item, this);
+ },
+ },
+ showDialog: false,
+ clientX: 0,
+ clientY: 0,
+ dialogForm: {
+ text: "",
+ },
+ rules: {
+ text: [
+ { required: true, message: "璇疯緭鍏ヨ妭鐐瑰悕绉�", trigger: "change" },
+ { min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", trigger: "change" },
+ ],
+ },
+ };
+ },
+ created() {
+ console.log("------------");
+ // console.log(this.height, '鏍戦珮搴�')
+ this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
+ ? Number(sessionStorage.activeIndexVideo)
+ : this.TreeDataPool.activeVideoIndex;
+ },
+ watch: {
+ "TreeDataPool.treeType": function (newValue) {
+ if (newValue !== this.treeName) {
+ this.TreeDataPool.cleanTree(this.treeName);
+ }
+ },
+ node: function (newValue) {
+ this.$refs.jstree.initializeData(newValue);
+ },
+ },
+ methods: {
+ addCamera(node) {
+ this.$emit("addDevice", node);
+ },
+ importCameras(node) {
+ this.$emit("import", node);
+ },
+ addNode(event, node) {
+ this.dialogForm = {
+ text: "",
+ method: "add",
+ node: node.id,
+ };
+ this.showDialogBox(event);
+ },
+ editNode(event, node, isGb) {
+ this.dialogForm = {
+ text: node.name,
+ method: "edit",
+ node: node.id,
+ alias: node.alias,
+ gb28181: isGb,
+ };
+ this.showDialogBox(event);
+ },
+ delNode(node) {
+ this.TreeDataPool.del(node.id);
+ },
+ selectStyle(item) {
+ this.hoverNodeId = item.model.id;
+ },
+ outStyle(item) {
+ this.hoverNodeId = "";
+ },
+ submitForm() {
+ // 鎻愪氦鏂板鎴栬�呯紪杈戝尯鍩熻妭鐐硅〃鍗�
+ this.$refs.dialogForm.validate((valid) => {
+ if (valid) {
+ if (this.dialogForm.method == "add") {
+ this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node);
+ } else if (this.dialogForm.method == "edit") {
+ this.TreeDataPool.update(
+ this.dialogForm.text,
+ this.dialogForm.node,
+ this.gb28181 ? this.dialogForm.text : "",
+ this.dialogForm.gb28181
+ );
+ }
+ } else {
+ return false;
+ }
+ });
+ this.hideDialogBox();
+ },
+ hideDialogBox() {
+ this.showDialog = false;
+ this.dialogForm = { text: "" };
+ },
+ showDialogBox(event) {
+ let { clientX = 0, offsetY = 0 } = event;
+ // this.clientX = clientX - 120;
+ this.clientX = 50;
+ this.clientY = offsetY;
+ this.showDialog = true;
+ },
+ itemClick(node, item, e) {
+ console.log("jsTree index.vue", item);
+ this.TreeDataPool.selectedNode = item;
+ this.TreeDataPool.updateSelectedNodes();
+ this.TreeDataPool.treeType = this.treeName;
+ },
+ itemToggle(node, item, e) {
+ if (item.opened) {
+ delete this.TreeDataPool.foldNodeList[item.id];
+ } else {
+ this.TreeDataPool.foldNodeList[item.id] = true;
+ }
+ },
+ dropNode(node, item, draggedItem, e) {
+ console.log("dropNode", node, item, draggedItem);
+ this.TreeDataPool.dropNode(draggedItem.id, item.id);
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+.dialog-box {
+ position: absolute;
+ width: 220px;
+ z-index: 1;
+}
+.dialog-box-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: rgba(255, 255, 255, 0.6);
+}
+.tree-item-handle {
+ display: inline;
+ font-size: 16px;
+ margin-left: 6px;
+ button {
+ position: relative;
+ color: #3d68e1;
+ border: 0px;
+ background-color: transparent;
+ cursor: pointer;
+ outline: none;
+ }
+ button:hover {
+ color: #2249b4;
+ }
+ // button:hover:after {
+ // position: fixed;
+ // padding: 5px 10px;
+ // background-color: #00000090;
+ // border-radius: 0px;
+ // color: #fff;
+ // content: attr(labelTooltip);
+ // font-size: 12px;
+ // width: 55px;
+ // margin-left: -50px;
+ // margin-top: 25px;
+ // vertical-align: left;
+ // }
+}
+.tree-name {
+ font-family: PingFangSC-Medium;
+ font-size: 13px;
+ color: #222222;
+ // max-width: 100px;
+ line-height: 27px;
+ margin-left: 4px;
+ display: inline-block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ vertical-align: top;
+}
+.tree-menu {
+ // max-width: 350px;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ margin-bottom: 4px;
+}
+.tree-menu::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 4px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 4px;
+}
+.tree-menu::-webkit-scrollbar-thumb {
+ /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ background: rgb(202, 201, 201);
+}
+.tree-menu::-webkit-scrollbar-track {
+ /*婊氬姩鏉￠噷闈㈣建閬�*/
+ -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ border-radius: 0;
+ background: rgb(235, 234, 234);
+}
+.tree-menu::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.4);
+}
+.tree-menu:hover {
+ overflow-x: visible;
+ overflow-y: auto;
+ margin-bottom: 0px;
+}
+</style>
--
Gitblit v1.8.0