<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>
做个代码笔记备忘