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>

做个代码笔记备忘

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先需要安装一些依赖: ```bash npm install electron electron-context-menu vite vue@next vue-router@next @vue/compiler-sfc typescript tslib --save-dev ``` 然后在 `src` 目录下新建 `main.ts` 和 `renderer.ts` 两个文件。 `main.ts` 的内容如下: ```ts import { app, BrowserWindow, Menu } from 'electron'; import path from 'path'; import contextMenu from 'electron-context-menu'; // 创建窗口 function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 允许使用 node.js nodeIntegration: true, // 允许使用 Electron 的 remote 模块 enableRemoteModule: true, // 允许在渲染进程中使用上下文菜单 contextIsolation: false, }, }); // 加载页面 win.loadFile(path.join(__dirname, '../renderer/index.html')); // 打开开发者工具 win.webContents.openDevTools(); // 设置窗口菜单 const template = [ { label: '菜单1', submenu: [ { label: '子菜单1', click: () => { console.log('点击了子菜单1'); }, }, { label: '子菜单2', click: () => { console.log('点击了子菜单2'); }, }, ], }, { label: '菜单2', click: () => { console.log('点击了菜单2'); }, }, ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); } // 当 Electron 初始化完成并准备好创建窗口时调用这个函数 app.whenReady().then(() => { // 注册上下文菜单 contextMenu({ window: BrowserWindow.getFocusedWindow(), showInspectElement: true, }); createWindow(); // 如果所有窗口都关闭了,退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); }); // 在 macOS 上,当单击 Dock 图标并且没有其他窗口打开时,重新创建一个窗口 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` `renderer.ts` 的内容如下: ```ts import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 接下来在 `src` 目录下新建 `index.html` 文件,并且在里面添加一个 `div` 元素,并且指定它的 `id` 为 `app`。同时在 `body` 元素下添加如下代码: ```html <script src="./renderer.js"></script> ``` 最后在 `package.json` 中添加如下脚本: ```json { "scripts": { "start": "vite", "build": "vite build", "electron": "electron ." } } ``` 现在可以运行 `npm run start` 来启动应用程序,然后运行 `npm run electron` 来启动 Electron 应用程序。现在你应该已经能够看到一个 Electron 窗口,并且它包含一个菜单。如果你右键单击窗口,你应该能够看到一个上下文菜单

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值