From 5eccd183f9c9e7209d5dd87d36715ce2ba53d7d8 Mon Sep 17 00:00:00 2001 From: ibiz_zhf <1204297681@qq.com> Date: Sat, 21 Sep 2024 19:55:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=9F=A5=E8=AF=A2?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=B7=A5=E5=85=B7=E8=A1=A5=E5=85=85=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E5=B1=95=E5=BC=80=E7=8A=B6=E6=80=81=E5=92=8C=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-query-cond-tree.tsx | 146 +++++++++++++++++- .../data-query-design-tree.scss | 1 + .../data-query-design-tree.tsx | 66 +++++++- .../data_query_design_operation.controller.ts | 14 ++ .../src/service/psdedqcond/psdedqcond.ts | 2 + 5 files changed, 220 insertions(+), 9 deletions(-) diff --git a/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.tsx b/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.tsx index 0ebe2840..3b21f9fa 100644 --- a/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.tsx +++ b/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.tsx @@ -1,6 +1,8 @@ +/* eslint-disable no-use-before-define */ import { useNamespace } from '@ibiz-template/vue3-util'; -import { PropType, defineComponent, nextTick, ref, watch } from 'vue'; +import { PropType, Ref, defineComponent, nextTick, ref, watch } from 'vue'; import { IActionItem, ITreeNode } from '@ibiz-template-plugin/design-base'; +import { uniq } from 'ramda'; import { createUUID, generateOrderValue } from 'qx-util'; import './data-query-cond-tree.scss'; @@ -34,7 +36,7 @@ export default defineComponent({ type: String, }, }, - emits: ['nodeSelect', 'actionClick', 'condNodeDrop'], + emits: ['nodeSelect', 'actionClick', 'condNodeDrop', 'nodeExpand'], setup(props, { emit }) { const ns = useNamespace('data-query-cond-tree'); @@ -142,7 +144,7 @@ export default defineComponent({ }; // 条件树数据 - const condData = ref(); + const condData = ref([]); // 根节点标识 const uuid: string = createUUID(); @@ -209,16 +211,82 @@ export default defineComponent({ // 节点选中 const handNodeSelect = (data: IData, node: IData): void => { + if (!data) { + return; + } if (data.isRoot) { + if ( + props.activeNode && + oldItems.value.some(item => item.id === props.activeNode) + ) { + tree.value.setCurrentKey?.(props.activeNode, false); + } else { + tree.value.setCurrentKey?.(null); + } return; } Object.assign(data.data, { psdataentity: props.parentData?.joinpsdeid }); emit('nodeSelect', data, node); }; + // 默认展开节点 + const expendNodeKeys: Ref = ref([]); + + // 计算展开节点 + const calcExpandAll = (nodes: IData[], items: string[]): void => { + nodes.forEach(item => { + if (item?.children != null) { + const i = items.findIndex(str => item.id === str); + if (i === -1) { + expendNodeKeys.value.push(item.id); + } + calcExpandAll(item.children, items); + } + }); + }; + + // 展开所有节点 + const expandAll = (): void => { + if (condData.value) { + const items = uniq(expendNodeKeys.value); + calcExpandAll(condData.value, items); + } + }; + + // 节点展开 + const handleNodeExpand = (data: IData): void => { + const i = expendNodeKeys.value.findIndex(str => data.id === str); + if (i === -1) { + expendNodeKeys.value.push(data.id); + } + }; + + // 节点收缩 + const handleNodeCollapse = (data: IData): void => { + const i = expendNodeKeys.value.findIndex(str => data.id === str); + if (i !== -1) { + expendNodeKeys.value.splice(i, 1); + } + }; + // el-tree实例 const tree = ref(); + // 获取节点 + const getNodes = (nodes: IData[], parent?: string) => { + const items: { id: string; parent?: string; node: IData }[] = []; + nodes.forEach(item => { + items.push({ id: item.id, parent, node: item }); + if (Array.isArray(item.children)) { + items.push(...getNodes(item.children, item.id)); + } + }); + return items; + }; + + // 旧节点 + const oldItems = ref<{ id: string; parent?: string; node: IData }[]>([]); + watch( () => props.data, newData => { @@ -260,30 +328,85 @@ export default defineComponent({ }, ]; } else { - condData.value = undefined; + condData.value = []; } + const items = getNodes(condData.value); + const map = new Map(items.map(item => [item.id, item])); + const oldMap = new Map(oldItems.value.map(item => [item.id, item])); + const keys: string[] = []; + const filterItems = items.filter(item => !oldMap.get(item.id)); + const isChange = !!filterItems.length; + if (isChange) { + emit('nodeExpand'); + } + filterItems.forEach(item => { + keys.push(item.id); + let parent = item.parent; + while (parent) { + keys.push(parent); + parent = map.get(parent)?.parent; + } + }); + expendNodeKeys.value.push(...keys); + expendNodeKeys.value = [...new Set(expendNodeKeys.value)]; + expendNodeKeys.value = expendNodeKeys.value.filter(item => + map.get(item), + ); + oldItems.value = items; + if (isChange) { + nextTick(() => { + if (tree.value) { + if ( + props.activeNode && + oldItems.value.some(item => item.id === props.activeNode) + ) { + tree.value.setCurrentKey?.(props.activeNode, false); + } else { + tree.value.setCurrentKey?.(null); + } + } + }); + } + }, + { immediate: true }, + ); + + watch( + () => props.activeNode, + () => { nextTick(() => { if (tree.value) { - tree.value.setCurrentKey?.(props.activeNode); + if ( + props.activeNode && + oldItems.value.some(item => item.id === props.activeNode) + ) { + tree.value.setCurrentKey?.(props.activeNode, false); + } else { + tree.value.setCurrentKey?.(null); + } } }); }, - { immediate: true }, ); + expandAll(); + return { ns, condData, tree, + expendNodeKeys, allowDrag, allowDrop, renderTreeItem, handNodeSelect, handleDrop, + handleNodeExpand, + handleNodeCollapse, }; }, render() { - if (!this.condData) { + if (!this.condData?.length) { return; } return ( @@ -294,7 +417,8 @@ export default defineComponent({ draggable={this.draggable} allow-drop={this.allowDrop} allow-drag={this.allowDrag} - default-expand-all={true} + default-expand-all={false} + default-expanded-keys={this.expendNodeKeys} node-key='id' highlight-current={true} expand-on-click-node={false} @@ -303,6 +427,12 @@ export default defineComponent({ render-content={this.renderTreeItem} onNodeDrop={this.handleDrop} onCurrentChange={this.handNodeSelect} + onNodeExpand={(data: IData) => { + this.handleNodeExpand(data); + }} + onNodeCollapse={(data: IData) => { + this.handleNodeCollapse(data); + }} > ); diff --git a/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss b/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss index d50a54b3..b11cad4e 100644 --- a/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss +++ b/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss @@ -30,6 +30,7 @@ } .el-tree-node__expand-icon { + z-index: 1; align-self: flex-start; padding: 10px 6px; font-size: 14px; diff --git a/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.tsx b/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.tsx index 016bced7..aebace66 100644 --- a/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.tsx +++ b/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.tsx @@ -208,6 +208,11 @@ export default defineComponent({ ]} onClick={() => { node.expanded = !node.expanded; + if (node.expanded) { + handleNodeExpand(data); + } else { + handleNodeCollapse(data); + } }} > @@ -284,6 +289,10 @@ export default defineComponent({ onCondNodeDrop={(items: IData[]) => { emit('condNodeDrop', items); }} + onNodeExpand={() => { + node.expanded = true; + handleNodeExpand(data); + }} > , ]; @@ -294,12 +303,67 @@ export default defineComponent({ // el-tree实例 const tree = ref(); + // 获取节点 + const getNodes = (nodes: IData[], parent?: string) => { + const items: { id: string; parent?: string; node: IData }[] = []; + nodes.forEach(item => { + items.push({ id: item.id, parent, node: item }); + if (Array.isArray(item.children)) { + items.push(...getNodes(item.children, item.id)); + } + }); + return items; + }; + + // 旧节点 + const oldItems = ref(getNodes(props.nodes)); + watch( () => props.nodes, + () => { + const items = getNodes(props.nodes); + const map = new Map(items.map(item => [item.id, item])); + const oldMap = new Map(oldItems.value.map(item => [item.id, item])); + const keys: string[] = []; + const filterItems = items.filter(item => !oldMap.get(item.id)); + const isChange = !!filterItems.length; + filterItems.forEach(item => { + keys.push(item.id); + let parent = item.parent; + while (parent) { + keys.push(parent); + parent = map.get(parent)?.parent; + } + }); + expendNodeKeys.value.push(...keys); + expendNodeKeys.value = [...new Set(expendNodeKeys.value)]; + expendNodeKeys.value = expendNodeKeys.value.filter(item => + map.get(item), + ); + oldItems.value = items; + if (isChange) { + if (tree.value) { + if (props.activeNode && map.get(props.activeNode)) { + tree.value.setCurrentKey?.(props.activeNode, false); + } else { + tree.value.setCurrentKey?.(null); + } + } + } + }, + ); + + watch( + () => props.activeNode, () => { nextTick(() => { if (tree.value) { - tree.value.setCurrentKey?.(props.activeNode); + const map = new Map(oldItems.value.map(item => [item.id, item])); + if (props.activeNode && map.get(props.activeNode)) { + tree.value.setCurrentKey?.(props.activeNode, false); + } else { + tree.value.setCurrentKey?.(null); + } } }); }, diff --git a/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.controller.ts b/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.controller.ts index 2fb611a1..9ce7f859 100644 --- a/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.controller.ts +++ b/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.controller.ts @@ -592,6 +592,14 @@ export class DataQueryDesignOperationController extends PanelItemController item.srfkey === data.psdedqjoinid, + ); + if (!parent) { + this.panel.view.call('onActiveRoot'); + } + } } } @@ -934,6 +942,9 @@ export class DataQueryDesignOperationController extends PanelItemController