庄锐波
6 months ago
6 changed files with 411 additions and 378 deletions
@ -0,0 +1,380 @@ |
|||
<template> |
|||
<el-card shadow="hover" class="dept-tree-card"> |
|||
<div class="search-row"> |
|||
<el-input |
|||
v-model="filterText" |
|||
placeholder="搜索单位名称" |
|||
prefix-icon="Search" |
|||
clearable |
|||
/> |
|||
<el-popover placement="bottom-end" :width="360" trigger="hover"> |
|||
<template #reference> |
|||
<el-button :icon="QuestionFilled" link class="help-btn" /> |
|||
</template> |
|||
<div class="search-help"> |
|||
<p class="help-title">搜索语法说明</p> |
|||
<el-divider style="margin: 8px 0" /> |
|||
<ul class="help-list"> |
|||
<li><code>福田</code> 查找含"福田"的节点</li> |
|||
<li><code>福田+</code> 查找含"福田"的节点，并显示其所有子孙</li> |
|||
<li><code>福田/民政</code> 先找"福田"，再在其下级中找"民政"</li> |
|||
<li><code>福田+/民政</code> 找"福田"并展开子孙，再在其中找"民政"</li> |
|||
<li><code>福田+/民政+</code> 同上，且"民政"也展开子孙</li> |
|||
</ul> |
|||
<el-divider style="margin: 8px 0" /> |
|||
<p class="help-note"><b>/</b> 分隔层级，<b>+</b> 后缀展开子孙节点</p> |
|||
</div> |
|||
</el-popover> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRef" |
|||
:data="treeData" |
|||
:props="treeProps" |
|||
:height="treeHeight" |
|||
:expand-on-click-node="false" |
|||
:default-expanded-keys="defaultExpandedKeys" |
|||
:filter-method="filterMethod" |
|||
highlight-current |
|||
@node-click="handleNodeClick" |
|||
> |
|||
<template #default="{ data }"> |
|||
<span v-html="highlightText(data.label)"></span> |
|||
</template> |
|||
</el-tree-v2> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script setup lang="ts" name="SrzDeptFullLoadTree"> |
|||
import { QuestionFilled } from '@element-plus/icons-vue'; |
|||
import { getSrzDeptTreeList } from '@/api/efcode/srz'; |
|||
import type { SrzDeptMinVo } from '@/api/efcode/srz/types'; |
|||
|
|||
interface TreeNode { |
|||
id: string; |
|||
label: string; |
|||
children?: TreeNode[]; |
|||
zzlevel?: string; |
|||
} |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'node-click', data: { id: string; label: string }): void; |
|||
}>(); |
|||
|
|||
const filterText = ref(''); |
|||
const treeRef = ref(); |
|||
const treeData = ref<TreeNode[]>([]); |
|||
const defaultExpandedKeys = ref<string[]>([]); |
|||
const treeHeight = ref(600); |
|||
|
|||
const treeProps = { |
|||
value: 'id', |
|||
label: 'label', |
|||
children: 'children' |
|||
}; |
|||
|
|||
// 保存扁平列表用于计算可见节点 |
|||
const flatList = ref<SrzDeptMinVo[]>([]); |
|||
// 存储过滤后应该显示的节点ID集合 |
|||
const visibleIds = ref<Set<string>>(new Set()); |
|||
|
|||
/** 解析搜索段：提取关键词和是否带 + 后缀 */ |
|||
interface SearchSegment { |
|||
keyword: string; |
|||
showDescendants: boolean; |
|||
} |
|||
|
|||
const parseSegments = (query: string): SearchSegment[] => { |
|||
return query.split('/').map(s => s.trim()).filter(s => s.length > 0).map(s => { |
|||
if (s.endsWith('+')) { |
|||
return { keyword: s.slice(0, -1), showDescendants: true }; |
|||
} |
|||
return { keyword: s, showDescendants: false }; |
|||
}).filter(s => s.keyword.length > 0); |
|||
}; |
|||
|
|||
/** |
|||
* 计算可见节点集合，支持层级搜索（/ 分隔）和子孙展开（+ 后缀） |
|||
* - 福田：仅显示匹配节点 + 祖先 |
|||
* - 福田+：显示匹配节点 + 所有子孙 + 祖先 |
|||
* - 福田/民政：在福田子孙中找民政，显示民政匹配 + 祖先 |
|||
* - 福田+/民政：福田全部子孙可见，在其中找民政匹配 + 祖先 |
|||
* - 福田+/民政+：福田全部子孙可见，民政匹配 + 民政子孙 + 祖先 |
|||
*/ |
|||
const computeVisibleIds = (query: string) => { |
|||
if (!query) { |
|||
visibleIds.value = new Set(); |
|||
return; |
|||
} |
|||
|
|||
const segments = parseSegments(query); |
|||
if (segments.length === 0) { |
|||
visibleIds.value = new Set(); |
|||
return; |
|||
} |
|||
|
|||
// 构建映射 |
|||
const childrenMap = new Map<string, string[]>(); |
|||
const parentMap = new Map<string, string>(); |
|||
const nameMap = new Map<string, string>(); |
|||
for (const item of flatList.value) { |
|||
parentMap.set(item.organizationid, item.parentid); |
|||
nameMap.set(item.organizationid, item.name || ''); |
|||
if (!childrenMap.has(item.parentid)) { |
|||
childrenMap.set(item.parentid, []); |
|||
} |
|||
childrenMap.get(item.parentid)!.push(item.organizationid); |
|||
} |
|||
|
|||
// 获取某节点的所有子孙ID |
|||
const getAllDescendantIds = (id: string): string[] => { |
|||
const result: string[] = []; |
|||
const stack = [id]; |
|||
while (stack.length) { |
|||
const current = stack.pop()!; |
|||
const children = childrenMap.get(current) || []; |
|||
for (const childId of children) { |
|||
result.push(childId); |
|||
stack.push(childId); |
|||
} |
|||
} |
|||
return result; |
|||
}; |
|||
|
|||
// 逐层搜索，记录每层匹配结果 |
|||
const levelMatches: string[][] = []; |
|||
let scopeIds: Set<string> | null = null; // null = 全量 |
|||
|
|||
for (const segment of segments) { |
|||
const matched: string[] = []; |
|||
|
|||
if (scopeIds === null) { |
|||
for (const item of flatList.value) { |
|||
if (item.name?.includes(segment.keyword)) { |
|||
matched.push(item.organizationid); |
|||
} |
|||
} |
|||
} else { |
|||
for (const id of scopeIds) { |
|||
const descendants = getAllDescendantIds(id); |
|||
for (const descId of descendants) { |
|||
if (nameMap.get(descId)?.includes(segment.keyword)) { |
|||
matched.push(descId); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
levelMatches.push(matched); |
|||
// 下一层的搜索范围 = 当前层匹配节点（作为父节点向下搜索） |
|||
scopeIds = new Set(matched); |
|||
} |
|||
|
|||
// 构建可见集合 |
|||
const ids = new Set<string>(); |
|||
|
|||
const addDescendants = (id: string) => { |
|||
ids.add(id); |
|||
const children = childrenMap.get(id) || []; |
|||
for (const childId of children) { |
|||
addDescendants(childId); |
|||
} |
|||
}; |
|||
|
|||
const addAncestors = (id: string) => { |
|||
const pid = parentMap.get(id); |
|||
if (pid && !ids.has(pid)) { |
|||
ids.add(pid); |
|||
addAncestors(pid); |
|||
} |
|||
}; |
|||
|
|||
// 每层的贡献 |
|||
for (let i = 0; i < segments.length; i++) { |
|||
const segment = segments[i]; |
|||
const matched = levelMatches[i]; |
|||
const isLast = i === segments.length - 1; |
|||
|
|||
if (segment.showDescendants) { |
|||
// 带 + ：匹配节点 + 所有子孙 |
|||
for (const id of matched) { |
|||
addDescendants(id); |
|||
} |
|||
} else if (isLast) { |
|||
// 最后一段无 + ：仅匹配节点 |
|||
for (const id of matched) { |
|||
ids.add(id); |
|||
} |
|||
} |
|||
// 中间段无 + ：不直接贡献可见节点（会作为后续匹配的祖先自动出现） |
|||
} |
|||
|
|||
// 补充祖先链路保持树结构完整 |
|||
const currentIds = [...ids]; |
|||
for (const id of currentIds) { |
|||
addAncestors(id); |
|||
} |
|||
|
|||
visibleIds.value = ids; |
|||
}; |
|||
|
|||
/** 树节点过滤方法 */ |
|||
const filterMethod = (query: string, node: TreeNode) => { |
|||
if (!query) return true; |
|||
return visibleIds.value.has(node.id); |
|||
}; |
|||
|
|||
/** 高亮匹配文本（高亮所有搜索段的关键词，去除+后缀） */ |
|||
const highlightText = (text: string) => { |
|||
if (!filterText.value || !text) return text; |
|||
const segments = parseSegments(filterText.value); |
|||
if (segments.length === 0) return text; |
|||
let result = text; |
|||
for (const segment of segments) { |
|||
const escaped = segment.keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); |
|||
const regex = new RegExp(`(${escaped})`, 'gi'); |
|||
result = result.replace(regex, '<span class="tree-highlight">$1</span>'); |
|||
} |
|||
return result; |
|||
}; |
|||
|
|||
/** 监听搜索框变化触发过滤 */ |
|||
watch(filterText, (val) => { |
|||
computeVisibleIds(val); |
|||
treeRef.value?.filter(val); |
|||
}); |
|||
|
|||
/** 将扁平列表构建为树结构 */ |
|||
const buildTree = (list: SrzDeptMinVo[]): TreeNode[] => { |
|||
const map = new Map<string, TreeNode>(); |
|||
const roots: TreeNode[] = []; |
|||
|
|||
// 先创建所有节点 |
|||
for (const item of list) { |
|||
map.set(item.organizationid, { |
|||
id: item.organizationid, |
|||
label: item.name || '', |
|||
zzlevel: item.zzlevel, |
|||
children: [] |
|||
}); |
|||
} |
|||
|
|||
// 建立父子关系 |
|||
for (const item of list) { |
|||
const node = map.get(item.organizationid)!; |
|||
const parent = map.get(item.parentid); |
|||
if (parent) { |
|||
parent.children!.push(node); |
|||
} else { |
|||
roots.push(node); |
|||
} |
|||
} |
|||
|
|||
// 移除空的children数组（叶子节点） |
|||
const removeEmptyChildren = (nodes: TreeNode[]) => { |
|||
for (const node of nodes) { |
|||
if (node.children && node.children.length === 0) { |
|||
delete node.children; |
|||
} else if (node.children) { |
|||
removeEmptyChildren(node.children); |
|||
} |
|||
} |
|||
}; |
|||
removeEmptyChildren(roots); |
|||
|
|||
return roots; |
|||
}; |
|||
|
|||
/** 收集前N层节点的id，用于默认展开 */ |
|||
const collectExpandKeys = (nodes: TreeNode[], currentLevel: number, maxLevel: number) => { |
|||
if (currentLevel > maxLevel) return; |
|||
for (const node of nodes) { |
|||
defaultExpandedKeys.value.push(node.id); |
|||
if (node.children?.length) { |
|||
collectExpandKeys(node.children, currentLevel + 1, maxLevel); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
/** 获取部门树数据 */ |
|||
const getDeptTree = async () => { |
|||
const res = await getSrzDeptTreeList(); |
|||
flatList.value = res.data; |
|||
const tree = buildTree(res.data); |
|||
treeData.value = tree; |
|||
defaultExpandedKeys.value = []; |
|||
collectExpandKeys(tree, 1, 1); |
|||
}; |
|||
|
|||
/** 节点点击事件 - 向外分发 */ |
|||
const handleNodeClick = (data: TreeNode) => { |
|||
emit('node-click', { id: data.id, label: data.label }); |
|||
}; |
|||
|
|||
/** 计算树高度自适应视口 */ |
|||
const calcTreeHeight = () => { |
|||
treeHeight.value = window.innerHeight - 180; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
calcTreeHeight(); |
|||
window.addEventListener('resize', calcTreeHeight); |
|||
getDeptTree(); |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
window.removeEventListener('resize', calcTreeHeight); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.dept-tree-card { |
|||
position: sticky; |
|||
top: 0; |
|||
} |
|||
|
|||
.search-row { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 4px; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.help-btn { |
|||
font-size: 18px; |
|||
color: var(--el-text-color-secondary); |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
:deep(.tree-highlight) { |
|||
color: var(--el-color-primary); |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.search-help { |
|||
.help-title { |
|||
font-weight: bold; |
|||
font-size: 14px; |
|||
margin: 0; |
|||
} |
|||
.help-list { |
|||
margin: 0; |
|||
padding-left: 16px; |
|||
li { |
|||
margin-bottom: 6px; |
|||
font-size: 13px; |
|||
code { |
|||
background: var(--el-fill-color-light); |
|||
padding: 1px 6px; |
|||
border-radius: 3px; |
|||
font-family: monospace; |
|||
color: var(--el-color-primary); |
|||
} |
|||
} |
|||
} |
|||
.help-note { |
|||
margin: 0; |
|||
font-size: 12px; |
|||
color: var(--el-text-color-secondary); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue