VUE3+TS配合element UI实现树结构右键菜单

<template>
   <el-tree
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    :data="organize"
    draggable
    default-expand-all
    node-key="id"
    check-on-click-node="true"
    @node-click="getTreeNode"
    @node-contextmenu="rightClick"
    @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
  />

  <div id="menuyuan" class="menuDiv" v-show="menuVisible">
    <ul class="menuUl">
      <li
        v-for="(item, index) in menus"
        :key="index"
        @click.stop="infoClick(index)"
      >
        <i :class="item.icon"></i> {{ item.name }}
      </li>
    </ul>
  </div>
  <el-dialog
    :title="diatitle"
    v-model="dialogVisibles"
    @opened="clearinput"
    append-to-body
    :close-on-click-modal="false"
    @closed="cancelinput"
  >
    <el-form ref="form" size="small" label-width="100px">
      <el-form-item prop="orgname" label="组织名称">
        <el-input type="text" v-model="treeNodenewName" />
      </el-form-item>
      <el-form-item>
        <cw-button class="cwbutton" type="primary" @click="submitorg"
          >确定</cw-button
        >
        <cw-button class="cwbutton" @click="cancelinput">取消</cw-button>
      </el-form-item>
    </el-form>
  </el-dialog>

 
</template>

<script lang="ts" setup>
import type Node from "element-plus/es/components/tree/src/model/node"
import type { DragEvents } from "element-plus/es/components/tree/src/model/useDragNode"
import type {
  AllowDropType,
  NodeDropType,
} from "element-plus/es/components/tree/src/tree.type"
import { ref, reactive, watch, defineComponent } from "vue"
import useSearch from "../use/useSearch"
import {
  organize,
  treeNodeId,
  treeNodeName,
  treeNodenewName,
  tableList,
  tableLoading,
  totalCount,
  tableList2,
  tableLoading2,
  totalCount2,
  treeNodeParentId,
} from "../use/CWData"
import { myListToTree } from "@/utils/listToTreeData"
import { getOrgUser } from "@/api/system/organizationManage"
import {
  userNorg,
  orgUser,
  addParentOrgan,
  addOrgan,
  updateOrgan,
  delOrgan,
} from "../use/orgUser"


const { search } = useSearch()
search()
userNorg()

//组织结构树形拖拽事件-----start

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log("drag start", node)
}
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log("tree drag enter:", dropNode.label)
}
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log("tree drag leave:", dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log("tree drag over:", dropNode.label)
}
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log("tree drag end:", dropNode && dropNode.label, dropType)
}
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log("tree drop:", dropNode.label, dropType)
}
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === "Level two 3-1") {
    return type !== "inner"
  } else {
    return true
  }
}
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes("Level three 3-1-1")
}
//--------------
//获取选中的节点数据
const getTreeNode = (data: any, node: Node, TreeNode: any, event: any) => {
  let menu: any = document.querySelector("#menuyuan")
  menu.style.display = "none"
  console.log(node.parent.data.id, "node.parent.dta")
  treeNodeParentId.value = node.parent.data.id
  treeNodeId.value = data.id
  treeNodeName.value = data.label

  orgUser()

  userNorg()
  console.log(data.id, "TreeNodeevent")
}
//鼠标右键单击事件

const dialogVisibles = ref(false)
const diatitle = ref("")
const menus = [
  { name: "新增同级组织", operType: 1, icon: "el-icon-tickets" },
  { name: "新增下级组织", operType: 2, icon: "el-icon-tickets" },
  { name: "修改组织", operType: 3, icon: "el-icon-folder-opened" },
  { name: "删除组织", operType: 4, icon: "el-icon-folder-add" },
]
let menuVisible = false

const rightClick = (event: any, object: any, Node: any, element: any) => {
  menuVisible = true
  console.log(event, object, Node, element, "eventobjectNodeelement")
  console.log(menuVisible, "sdadad")
  treeNodeId.value = object.id
  treeNodeName.value = object.label
  treeNodeParentId.value = Node.parent.data.id

  let menu: any = document.querySelector("#menuyuan")
  // /* 菜单定位基于鼠标点击位置 */
  menu.style.left = event.clientX - 280 + "px"
  menu.style.top = event.clientY - 110 + "px"
  menu.style.display = "block"
}
// 右击自定义菜单的点击事件
const infoClick = (index: any) => {
  if (index === 0) {
    // 属性
    dialogVisibles.value = true
    diatitle.value = menus[0].name
    console.log(treeNodeId.value, dialogVisibles, "新增同级组织")
  } else if (index === 1) {
    dialogVisibles.value = true
    diatitle.value = menus[1].name
    console.log(treeNodeId.value, "新增下级组织")
  } else if (index === 2) {
    dialogVisibles.value = true
    diatitle.value = menus[2].name

    console.log(treeNodeId.value, "修改组织")
  } else if (index === 3) {
    delOrgan()
    search()
    userNorg()
    console.log(treeNodeId.value, "删除组织")
  }
  let menu: any = document.querySelector("#menuyuan")
  menu.style.display = "none"
}
// 鼠标左击事件 (有bug暂时未改)
const handleLeftclick = (data: any, node: any) => {
  let menu: any = document.querySelector("#menuyuan")
  menu.style.display = "none"
}

//弹窗事件
const cancelinput = () => {
  dialogVisibles.value = false
}
const submitorg = () => {
  if (diatitle.value == "新增同级组织") {
    addParentOrgan()
  } else if (diatitle.value == "新增下级组织") {
    addOrgan()
  } else if (diatitle.value == "修改组织") {
    updateOrgan()
  }

  dialogVisibles.value = false
}
const clearinput = () => {
  treeNodenewName.value = ""
  if (diatitle.value == "修改组织") {
    console.log(treeNodeName.value, "treeNodeName.value")
    treeNodenewName.value = treeNodeName.value
  }
}
</script>
<style lang="scss" scoped>
.menuDiv {
  display: none;
  position: absolute;

  .menuUl {
    height: auto;
    width: auto;
    font-size: 14px;
    text-align: left;
    border-radius: 4px;
    border: none;
    background-color: #ffffff;
    color: #606266;
    list-style: none;
    border: 1px solid #ebeef5;

    li {
      width: 140px;
      height: 35px;
      line-height: 35px;
      padding: 0 10px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.47);

      &:hover {
        display: block;
        background-color: #ecf5ff;
        color: #7abbff;
      }
    }
  }
}

.cubutton {
  margin-top: 20px;
  padding: 10px;
}

</style>

做个代码笔记备忘