diff --git a/CHANGELOG.md b/CHANGELOG.md index fb4117d70d690c18762fecc7500d31acc7ca179e..77ddc7d1d7805675883f6dab3f2697d39bd481d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Fixed +- 更新树部件simple模式时节点加载时根据关系获取子节点 - 修复顶部菜单切换时菜单项闪烁白色底部border的问题 ### Changed diff --git a/src/control/tree/el-tree-util.ts b/src/control/tree/el-tree-util.ts index dc0999f9d8ad912a2e8115d67bbe9c084934cac2..6c8ce975c4abcb42f39d10e9bb63da5dd3a66334 100644 --- a/src/control/tree/el-tree-util.ts +++ b/src/control/tree/el-tree-util.ts @@ -7,8 +7,9 @@ import { } from '@ibiz-template/runtime'; import { IDETree } from '@ibiz/model-core'; import { ElTree } from 'element-plus'; +import { createUUID } from 'qx-util'; import { NodeDropType } from 'element-plus/es/components/tree/src/tree.type'; -import { debounce } from 'lodash-es'; +import { cloneDeep, debounce } from 'lodash-es'; import { Ref, watch } from 'vue'; /** @@ -207,3 +208,47 @@ export function useAppTreeBase(c: TreeController, props: ITreeProps): void { }, ); } + +/** + * 根据关系获取当前项的子节点 + * + * @export + * @param {TreeController} c + * @param {IData} modelData + * @param {IData} curItem + */ +export function findChildItems( + c: TreeController, + modelData: IData, + curItem: IData, +): IData[] { + const { detreeNodeRSs } = modelData; + const children: IData[] = []; + if (!detreeNodeRSs || detreeNodeRSs.length === 0) { + return children; + } + const rss = detreeNodeRSs.filter((_rss: IData) => { + const temp = c.state.items.find((_item: IData) => { + return _item._uuid === curItem.data._uuid; + }); + + if (temp) { + return _rss.parentDETreeNodeId === temp._nodeId?.toLowerCase(); + } + return false; + }); + rss.sort((a: IData, b: IData) => { + return a.ordervalue - b.ordervalue; + }); + rss.forEach((_rss: IData) => { + const child = c.state.items.find((_item: IData) => { + return _item._nodeId?.toLowerCase() === _rss.childDETreeNodeId; + }); + if (child) { + const temp = cloneDeep(child); + temp._id = createUUID(); + children.push(temp); + } + }); + return children; +} diff --git a/src/control/tree/tree.tsx b/src/control/tree/tree.tsx index 11c869e7339a07004c2d261cf7db55e2857da288..2395d09803f45ca8a20eaae9f188c12bde85afb8 100644 --- a/src/control/tree/tree.tsx +++ b/src/control/tree/tree.tsx @@ -44,6 +44,7 @@ import { formatNodeDropType, useAppTreeBase, useElTreeUtil, + findChildItems, } from './el-tree-util'; export const TreeControl = defineComponent({ @@ -240,39 +241,23 @@ export const TreeControl = defineComponent({ ) => { if (props.isSimple) { // simple模式 - let nodes: ITreeNodeData[] = []; + let children: ITreeNodeData[] = []; if (item.level === 0) { const tempNodes = c.state.items.find((_item: IData) => { return _item.isRoot; }); if (tempNodes) { - nodes = [tempNodes]; + children = [tempNodes]; } } else { - nodes = c.state.items - .filter((_item: IData) => { - return _item._pids?.some((_pid: IData) => { - return _pid.pid === item.data._uuid; - }); - }) - .map((_item: IData) => { - const tempItem = cloneDeep(_item); - // 避免树死循环,需要给一个随机值,节点真实数据id用_uuid保存 - tempItem._id = createUUID(); - return tempItem; - }) as ITreeNodeData[]; + children = findChildItems( + c, + props.modelData, + item, + ) as ITreeNodeData[]; } - nodes.sort((a: IData, b: IData) => { - const aOrder = a._pids.find((_pid: IData) => { - return _pid.pid === item.data._uuid; - })?.ordervalue; - const bOrder = b._pids.find((_pid: IData) => { - return _pid.pid === item.data._uuid; - })?.ordervalue; - return aOrder - bOrder; - }); - item._children = nodes; - callback(toElNodes(nodes)); + item._children = children; + callback(toElNodes(children)); updateUI(); return; } @@ -341,7 +326,11 @@ export const TreeControl = defineComponent({ /** * 节点单击事件 */ - const onNodeClick = (nodeData: ITreeNodeData, evt: MouseEvent) => { + const onNodeClick = ( + nodeData: ITreeNodeData, + data: IData, + evt: MouseEvent, + ) => { evt.stopPropagation(); // 设计态时向上抛出节点点击事件 if (c.context.srfrunmode === 'DESIGN') { @@ -370,8 +359,11 @@ export const TreeControl = defineComponent({ c.onExpandChange(nodeData, expanded!); } } - - c.onTreeNodeClick(nodeData, evt); + if (props.isSimple) { + treeRef.value!.setCurrentKey(data?._id || undefined); + } else { + c.onTreeNodeClick(nodeData, evt); + } forbidClick = true; setTimeout(() => { forbidClick = false; @@ -849,7 +841,7 @@ export const TreeControl = defineComponent({ return (
this.onNodeDbClick(nodeData, evt)} - onClick={evt => this.onNodeClick(nodeData, evt)} + onClick={evt => this.onNodeClick(nodeData, data, evt)} onContextmenu={evt => this.onNodeContextmenu(nodeData, evt)} class={[ this.ns.b('node'),