庄锐波
6 months ago
5 changed files with 353 additions and 3 deletions
@ -0,0 +1,299 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { Wunderbaum } from 'wunderbaum'; |
||||
|
import 'wunderbaum/dist/wunderbaum.css'; |
||||
|
import { deptTreeSelect } from '@/api/system/user'; |
||||
|
import type { DeptTreeVO } from '@/api/system/dept/types'; |
||||
|
|
||||
|
// ===== 类型定义 ===== |
||||
|
interface WbNodeData { |
||||
|
title: string; |
||||
|
key: string; |
||||
|
children?: WbNodeData[]; |
||||
|
[k: string]: unknown; |
||||
|
} |
||||
|
|
||||
|
// ===== DOM Refs ===== |
||||
|
const leftTreeEl = ref<HTMLDivElement>(); |
||||
|
const rightTreeEl = ref<HTMLDivElement>(); |
||||
|
const leftFilterText = ref(''); |
||||
|
const rightFilterText = ref(''); |
||||
|
|
||||
|
// ===== Wunderbaum 实例 ===== |
||||
|
let leftTree: Wunderbaum; |
||||
|
let rightTree: Wunderbaum; |
||||
|
|
||||
|
// ===== 数据转换：DeptTreeVO → WbNodeData ===== |
||||
|
const convertToWbData = (nodes: DeptTreeVO[]): WbNodeData[] => { |
||||
|
return nodes.map((node) => ({ |
||||
|
title: node.label, |
||||
|
key: String(node.id), |
||||
|
expanded: true, |
||||
|
children: node.children?.length ? convertToWbData(node.children) : undefined |
||||
|
})); |
||||
|
}; |
||||
|
|
||||
|
// ===== 加载部门数据 ===== |
||||
|
const loading = ref(true); |
||||
|
|
||||
|
const initTrees = async () => { |
||||
|
try { |
||||
|
loading.value = true; |
||||
|
const { data } = await deptTreeSelect(); |
||||
|
const wbData = convertToWbData(data); |
||||
|
|
||||
|
// 左树 & 右树使用相同数据（深拷贝） |
||||
|
const leftData = JSON.parse(JSON.stringify(wbData)); |
||||
|
const rightData = JSON.parse(JSON.stringify(wbData)); |
||||
|
|
||||
|
// 共享的 DnD 配置 |
||||
|
const dndOptions = { |
||||
|
preventForeignNodes: false, // 允许跨树拖拽 |
||||
|
preventRecursion: true, // 禁止拖入自身子节点 |
||||
|
preventVoidMoves: true, // 禁止无意义移动 |
||||
|
dropEffectDefault: 'move' as const, |
||||
|
effectAllowed: 'all' as const, |
||||
|
guessDropEffect: true, |
||||
|
dragStart: () => true, |
||||
|
dragEnter: () => { |
||||
|
// 允许放置在 before / after / over 三个位置 |
||||
|
return new Set(['before', 'after', 'over'] as const); |
||||
|
}, |
||||
|
drop: (e: any) => { |
||||
|
const sourceNode = e.sourceNode; |
||||
|
const targetNode = e.node; |
||||
|
const suggestedDropMode = e.suggestedDropMode; |
||||
|
|
||||
|
if (sourceNode && targetNode) { |
||||
|
sourceNode.moveTo(targetNode, suggestedDropMode); |
||||
|
// 更新两棵树的渲染 |
||||
|
leftTree?.update('structure' as any); |
||||
|
rightTree?.update('structure' as any); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 创建左树 |
||||
|
leftTree = new Wunderbaum({ |
||||
|
id: 'leftTree', |
||||
|
element: leftTreeEl.value!, |
||||
|
source: leftData, |
||||
|
debugLevel: 0, |
||||
|
checkbox: false, |
||||
|
filter: { |
||||
|
autoExpand: true, |
||||
|
mode: 'hide' |
||||
|
}, |
||||
|
dnd: dndOptions, |
||||
|
init: () => { |
||||
|
loading.value = false; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 创建右树 |
||||
|
rightTree = new Wunderbaum({ |
||||
|
id: 'rightTree', |
||||
|
element: rightTreeEl.value!, |
||||
|
source: rightData, |
||||
|
debugLevel: 0, |
||||
|
checkbox: false, |
||||
|
filter: { |
||||
|
autoExpand: true, |
||||
|
mode: 'hide' |
||||
|
}, |
||||
|
dnd: dndOptions |
||||
|
}); |
||||
|
} catch (err) { |
||||
|
console.error('加载部门树失败:', err); |
||||
|
loading.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// ===== 过滤逻辑 ===== |
||||
|
const onLeftFilter = () => { |
||||
|
if (!leftTree) return; |
||||
|
const keyword = leftFilterText.value.trim(); |
||||
|
if (keyword) { |
||||
|
leftTree.filterNodes(keyword, { autoExpand: true, mode: 'hide' }); |
||||
|
} else { |
||||
|
leftTree.clearFilter(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const onRightFilter = () => { |
||||
|
if (!rightTree) return; |
||||
|
const keyword = rightFilterText.value.trim(); |
||||
|
if (keyword) { |
||||
|
rightTree.filterNodes(keyword, { autoExpand: true, mode: 'hide' }); |
||||
|
} else { |
||||
|
rightTree.clearFilter(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// ===== 展开 / 收起全部 ===== |
||||
|
const expandAll = (tree: Wunderbaum | undefined) => { |
||||
|
tree?.expandAll(true); |
||||
|
}; |
||||
|
|
||||
|
const collapseAll = (tree: Wunderbaum | undefined) => { |
||||
|
tree?.expandAll(false); |
||||
|
}; |
||||
|
|
||||
|
// ===== 生命周期 ===== |
||||
|
onMounted(() => { |
||||
|
initTrees(); |
||||
|
}); |
||||
|
|
||||
|
onBeforeUnmount(() => { |
||||
|
leftTree?.destroy(); |
||||
|
rightTree?.destroy(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="wunderbaum-demo-page"> |
||||
|
<h3 class="page-title">Wunderbaum 双树跨树拖拽 Demo</h3> |
||||
|
<p class="page-desc">左右两棵部门树支持互相拖拽节点（拖入节点前方、后方、或内部），支持搜索过滤。拖拽结果不保存回服务端。</p> |
||||
|
|
||||
|
<div v-loading="loading" class="tree-container"> |
||||
|
<!-- 左树 --> |
||||
|
<div class="tree-panel"> |
||||
|
<div class="tree-toolbar"> |
||||
|
<span class="tree-label">部门树 A</span> |
||||
|
<el-input |
||||
|
v-model="leftFilterText" |
||||
|
placeholder="搜索..." |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 180px" |
||||
|
@input="onLeftFilter" |
||||
|
@clear="onLeftFilter" |
||||
|
/> |
||||
|
<el-button size="small" @click="expandAll(leftTree)">展开全部</el-button> |
||||
|
<el-button size="small" @click="collapseAll(leftTree)">收起全部</el-button> |
||||
|
</div> |
||||
|
<div ref="leftTreeEl" class="tree-wrapper"></div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 中间拖拽提示 --> |
||||
|
<div class="drag-hint"> |
||||
|
<el-icon :size="28"><Sort /></el-icon> |
||||
|
<span>拖拽</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 右树 --> |
||||
|
<div class="tree-panel"> |
||||
|
<div class="tree-toolbar"> |
||||
|
<span class="tree-label">部门树 B</span> |
||||
|
<el-input |
||||
|
v-model="rightFilterText" |
||||
|
placeholder="搜索..." |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 180px" |
||||
|
@input="onRightFilter" |
||||
|
@clear="onRightFilter" |
||||
|
/> |
||||
|
<el-button size="small" @click="expandAll(rightTree)">展开全部</el-button> |
||||
|
<el-button size="small" @click="collapseAll(rightTree)">收起全部</el-button> |
||||
|
</div> |
||||
|
<div ref="rightTreeEl" class="tree-wrapper"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.wunderbaum-demo-page { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.page-title { |
||||
|
margin: 0 0 8px 0; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.page-desc { |
||||
|
margin: 0 0 16px 0; |
||||
|
color: #666; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.tree-container { |
||||
|
display: flex; |
||||
|
align-items: stretch; |
||||
|
gap: 12px; |
||||
|
min-height: 500px; |
||||
|
} |
||||
|
|
||||
|
.tree-panel { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.tree-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
padding: 8px 12px; |
||||
|
background: #f5f7fa; |
||||
|
border-bottom: 1px solid #dcdfe6; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.tree-label { |
||||
|
font-weight: 600; |
||||
|
font-size: 14px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.tree-wrapper { |
||||
|
flex: 1; |
||||
|
min-height: 400px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.drag-hint { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 4px; |
||||
|
color: #909399; |
||||
|
font-size: 12px; |
||||
|
flex-shrink: 0; |
||||
|
width: 50px; |
||||
|
} |
||||
|
|
||||
|
// Wunderbaum 拖拽样式增强 |
||||
|
:deep(.wunderbaum) { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
:deep(.wb-row.wb-drop-over) { |
||||
|
background-color: #ecf5ff; |
||||
|
} |
||||
|
|
||||
|
:deep(.wb-row.wb-drop-before::before) { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 2px; |
||||
|
background: #409eff; |
||||
|
} |
||||
|
|
||||
|
:deep(.wb-row.wb-drop-after::after) { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 2px; |
||||
|
background: #409eff; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue