import TreeNode, { ITreeNodeOptions } from './tree-node' import { ignoreEnum } from '../const' import { TreeNodeKeyType, IgnoreType } from '../types' import { Ref, ref } from 'vue' //#region Interfaces interface ITreeStoreOptions { [key: string]: any keyField: string ignoreMode?: IgnoreType filteredNodeCheckable?: boolean cascade?: boolean defaultExpandAll?: boolean load?: Function expandOnFilter?: boolean } interface IMapData { [key: string]: TreeNode [key: number]: TreeNode } interface IListenersMap { [eventName: string]: Function[] } export interface IEventNames { 'set-data': () => void 'visible-data-change': () => void change: () => void 'render-data-change': () => void expand: NodeGeneralListenerType select: NodeGeneralListenerType unselect: NodeGeneralListenerType 'selected-change': ( node: TreeNode | null, key: TreeNodeKeyType | null ) => void check: NodeGeneralListenerType uncheck: NodeGeneralListenerType 'checked-change': (nodes: TreeNode[], keys: TreeNodeKeyType[]) => void 'change-parent': (map: { node: TreeNode oldParent: TreeNode | null newParent: TreeNode | null }) => void 'selected-map-change': (map: { map: IMapData }) => void } //#endregion Interfaces //#region Types type NodeGeneralListenerType = (node: TreeNode) => void export type ListenerType = IEventNames[T] export type FilterFunctionType = (keyword: string, node: TreeNode) => boolean //#endregion Types export default class TreeStore { //#region Properties /** 树数据 */ data: TreeNode[] = [] hideElementIds: Ref = ref({}) /** 扁平化的树数据 */ flatData: TreeNode[] = [] /** 树数据 map */ mapData: IMapData = Object.create(null) /** 未加载但已选中的节点 key ,每次 flattenData 的时候进行检查,将加载的节点从此数组中剔除 */ private unloadCheckedKeys: TreeNodeKeyType[] = [] /** 未加载但选中的单选节点 key */ private unloadSelectedKey: TreeNodeKeyType | null = null /** 当前单选选中节点 key */ /** 当前单选选中节点 key */ private currentSelectedKey: TreeNodeKeyType | null = null currentSelectedMapData: IMapData = Object.create(null) /** 事件 listeners */ private listenersMap: IListenersMap = {} //#endregion Properties constructor(private readonly options: ITreeStoreOptions) {} changeNode(map: { type: 'showElement'; data: any }) { const { type, data } = map switch (type) { case 'showElement': { this.hideElementIds.value[data.id] = false } break } } setData( data: ITreeNodeOptions[], selectableUnloadKey: TreeNodeKeyType | null = null, checkableUnloadKeys: TreeNodeKeyType[] | null = null ): void { this.data = data.map( (nodeData: ITreeNodeOptions | TreeNode): TreeNode => nodeData.isTreeNode ? (nodeData as TreeNode) : new TreeNode( nodeData, null, this.options.keyField, !!this.options.load ) ) // 清空 mapData for (let key in this.mapData) delete this.mapData[key] // 扁平化之前清空单选选中,如果 value 有值,则是 selectableUnloadKey 有值,会重新设置 currentSelectedKey ;多选选中没有存储在 store 中,因此不必事先清空。 this.currentSelectedKey = null // 扁平化节点数据 this.flatData = this.flattenData(this.data) // 更新未载入多选选中节点 this.setUnloadCheckedKeys(checkableUnloadKeys || []) if (selectableUnloadKey) { // 更新未载入单选选中节点 this.currentSelectedKey = null this.setUnloadSelectedKey(selectableUnloadKey) } this.emit('visible-data-change') this.emit('set-data') } //#region Set api /** * 设置单个节点多选选中 * @param key 设置的节点 key * @param value 是否选中 * @param triggerEvent 是否触发事件 * @param triggerDataChange 是否触发 `data-change` 事件以通知外部刷新视图 * @param filtering 是否正在过滤,如果是,则考虑 `filteredNodeCheckable` Prop,用于判断是否是用户点击节点触发的勾选 */ setChecked( key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true, filtering: boolean = false ): void { const node = this.mapData[key] if (!node) return this.setUnloadChecked(key, value, triggerEvent, triggerDataChange) if (node.disabled) return // 首先确定没有变化的情况 if (node.checked && value) return // 已经勾选的再次勾选,直接返回 if (!node.checked && !node.indeterminate && !value) return // 未勾选且不是半选状态再次设置未勾选,直接返回 if (this.options.cascade) { // 向下勾选,包括自身 this.checkNodeDownward(node, value, filtering) // 向上勾选父节点直到根节点 this.checkNodeUpward(node) } else { node.checked = value } if (triggerEvent) { if (node.checked) { this.emit('check', node) } else { this.emit('uncheck', node) } } this.triggerCheckedChange(triggerEvent, triggerDataChange) } /** * 设置单个未加载节点选中,不公开此 API */ private setUnloadChecked( key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { const index = this.findIndex(key, this.unloadCheckedKeys) if (value) { if (index === -1) { this.unloadCheckedKeys.push(key) } } else { if (index !== -1) { this.unloadCheckedKeys.splice(index, 1) } } this.triggerCheckedChange(triggerEvent, triggerDataChange) } /** * 批量选中/取消多选选中节点 * @param keys 选中的节点 key 数组 * @param value 是否选中 * @param triggerEvent 是否触发事件 */ setCheckedKeys( keys: TreeNodeKeyType[], value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { keys.forEach(key => { this.setChecked(key, value, false, false) }) this.triggerCheckedChange(triggerEvent, triggerDataChange) } /** * 多选勾选全部节点 * @param triggerEvent 是否触发事件 * @param triggerDataChange 是否触发视图刷新 */ checkAll( triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { if (this.options.cascade) { // 级联时,只要勾选第一层节点即可,如果第一层被禁用了,则往下一层勾选 const checkCascade = (nodes: TreeNode[]): void => { nodes.forEach(node => { if (node.disabled) { checkCascade(node.children) } else { this.setChecked(node[this.options.keyField], true, false, false) } }) } checkCascade(this.data) } else { const length = this.flatData.length for (let i = 0; i < length; i++) { const node = this.flatData[i] this.setChecked(node[this.options.keyField], true, false, false) } } this.triggerCheckedChange(triggerEvent, triggerDataChange) } /** * 清除所有多选已选 * @param triggerEvent 是否触发事件 * @param triggerDataChange 是否触发视图刷新 */ clearChecked( triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { const currentCheckedNodes = this.getCheckedNodes() currentCheckedNodes.forEach(checkedNode => { this.setChecked(checkedNode[this.options.keyField], false, false, false) }) // 清空未加载多选选中节点 this.unloadCheckedKeys = [] this.triggerCheckedChange(triggerEvent, triggerDataChange) } /** * 触发 checked-change 的快捷方法 * @param triggerEvent 是否触发事件 * @param triggerDataChange 是否触发视图刷新 */ private triggerCheckedChange( triggerEvent: boolean = true, triggerDataChange: boolean = true ) { if (triggerEvent) { this.emit('checked-change', this.getCheckedNodes(), this.getCheckedKeys()) } if (triggerDataChange) { this.emit('render-data-change') } } /** * 设置单选选中 * @param key 选中节点 key * @param value 是否选中 * @param triggerEvent 是否触发事件 */ setSelected( key: TreeNodeKeyType, value: boolean, triggerEvent?: boolean, triggerDataChange?: boolean, triggerMapChange?: boolean ): void { const node = this.mapData[key] if (!node) return this.setUnloadSelected(key, value, triggerEvent, triggerDataChange) if (node.disabled) return if (node.selected === value) return // 当前节点已经是将要设置的状态,直接返回 node.selected = value Object.values(this.currentSelectedMapData).map(oldNode => { const isChilrenSelected = this._isIncludedSelected(node, oldNode) if (isChilrenSelected) { this.setSelected(oldNode.id, false) } }) if (value) { this.currentSelectedMapData[key] = node this.deepSetSubSelect(node, true) } else { delete this.currentSelectedMapData[key] this.deepSetSubSelect(node, false) } if (triggerEvent !== false) { if (node.selected) { this.emit('select', node) } else { this.emit('unselect', node) } this.emit( 'selected-change', this.getSelectedNode(), this.getSelectedKey() ) } if (triggerMapChange !== false) { this.emit('selected-map-change', { map: this.currentSelectedMapData }) } if (triggerDataChange !== false) { this.emit('render-data-change') } } /** * 设置未加载单选选中节点,不公开此 API */ private setUnloadSelected( key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { if (value) { if (this.currentSelectedKey) { this.setSelected(this.currentSelectedKey, false, false, false) } this.unloadSelectedKey = key } else { if (this.unloadSelectedKey === key) { this.unloadSelectedKey = null } } if (triggerEvent) { this.emit( 'selected-change', this.getSelectedNode(), this.getSelectedKey() ) } if (triggerDataChange) { this.emit('render-data-change') } } /** * 清除当前单选选中 * @param triggerEvent 是否触发事件 * @param triggerDataChange 是否触发视图刷新 */ clearSelected( triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { if (this.currentSelectedKey && this.mapData[this.currentSelectedKey]) { this.setSelected( this.currentSelectedKey, false, triggerEvent, triggerDataChange ) } else if (this.unloadSelectedKey !== null) { this.unloadSelectedKey = null if (triggerEvent) { this.emit( 'selected-change', this.getSelectedNode(), this.getSelectedKey() ) } if (triggerDataChange) { this.emit('render-data-change') } } } /** * 设置节点展开 * @param key 节点 key * @param value 是否展开 * @param expandParent 展开节点时是否同时展开父节点 * @param triggerEvent 是否触发事件 * @param triggerDataChange 是否触发 `data-change` 事件以通知外部刷新视图 */ setExpand( key: TreeNodeKeyType, value: boolean, expandParent: boolean = false, triggerEvent: boolean = true, triggerDataChange: boolean = true ): void { const node = this.mapData[key] if (!node || (!expandParent && node.isLeaf)) return if (node.expand === value) return // 当前节点已经是将要设置的状态,直接返回 if (!node.isLeaf) { if (typeof this.options.load === 'function') { // 如果节点未加载过且将要设置为加载,则调用 load 方法 if (!node._loaded && !node._loading && value) { node._loading = true if (triggerDataChange) { this.emit('visible-data-change') } new Promise((resolve, reject) => { const load = this.options.load as Function load(node, resolve, reject) }) .then(children => { if (Array.isArray(children)) { const parentIndex: number = this.findIndex(node) if (parentIndex === -1) return node._loaded = true node.expand = value node.setChildren(children) // 如果单选选中的值为空,则允许后续数据覆盖单选 value const currentCheckedKeys = this.getCheckedKeys() const flattenChildren = this.flattenData( node.children, this.getSelectedKey === null ) this.flatData.splice(parentIndex + 1, 0, ...flattenChildren) // 如果有未加载的选中节点,判断其是否已加载 this.setUnloadCheckedKeys(currentCheckedKeys) if (this.unloadSelectedKey !== null) { this.setUnloadSelectedKey(this.unloadSelectedKey) } this.emit('set-data') } }) .catch((e: Error | string) => { let err = e if (!(e instanceof Error)) { err = new Error(e) } // tslint:disable-next-line: no-console // console.error(err) }) .then(() => { node._loading = false if (triggerEvent) { this.emit('expand', node) } if (triggerDataChange) { this.emit('visible-data-change') } }) return } else if (node._loading) return // 正在加载的节点,直接返回 } node.expand = value // Set children visibility const queue = [...node.children] while (queue.length) { if (queue[0].expand && queue[0].children.length) { queue.push(...queue[0].children) } if (queue[0]._filterVisible === false) { queue[0].visible = false } else { queue[0].visible = queue[0]._parent === null || (queue[0]._parent.expand && queue[0]._parent.visible) } queue.shift() } if (triggerEvent) { this.emit('expand', node) } if (triggerDataChange) { this.emit('visible-data-change') } } if (expandParent && node._parent && value) { this.setExpand( node._parent[this.options.keyField], value, expandParent, false, triggerDataChange ) } } /** * 批量设置节点展开/折叠 * @param keys 展开的节点 key 数组 * @param value 是否展开 */ setExpandKeys( keys: TreeNodeKeyType[], value: boolean, triggerDataChange: boolean = true ): void { keys.forEach(key => { this.setExpand(key, value, false, false, false) }) if (triggerDataChange) { this.emit('visible-data-change') } } setExpandAll(value: boolean, triggerDataChange: boolean = true): void { this.flatData.forEach(node => { if (!this.options.load || node._loaded) { this.setExpand(node[this.options.keyField], value, false, false, false) } }) if (triggerDataChange) { this.emit('visible-data-change') } } //#endregion Set api //#region Get api /** * 获取多选选中节点 * @param ignoreMode 忽略模式,可选择忽略父节点或子节点,默认值是 CTree 的 ignoreMode Prop */ getCheckedNodes(ignoreMode = this.options.ignoreMode): TreeNode[] { if (ignoreMode === ignoreEnum.children) { const result: TreeNode[] = [] const traversal = (nodes: TreeNode[]) => { nodes.forEach(node => { if (node.checked) { result.push(node) } else if (!node.isLeaf && node.indeterminate) { traversal(node.children) } }) } traversal(this.data) return result } else { return this.flatData.filter(node => { if (ignoreMode === ignoreEnum.parents) return node.checked && node.isLeaf return node.checked }) } } /** * 获取多选选中的节点 key ,包括未加载的 key * @param ignoreMode 忽略模式,同 `getCheckedNodes` */ getCheckedKeys(ignoreMode = this.options.ignoreMode): TreeNodeKeyType[] { return this.getCheckedNodes(ignoreMode) .map(checkedNodes => checkedNodes[this.options.keyField]) .concat(this.unloadCheckedKeys) } /** * 获取多选半选状态节点 */ getIndeterminateNodes(): TreeNode[] { return this.flatData.filter(node => node.indeterminate) } /** * 获取当前单选选中节点 */ getSelectedNode(): TreeNode | null { if (this.currentSelectedKey === null) return null return this.mapData[this.currentSelectedKey] || null } /** * 获取当前单选选中节点 key ,有可能是未加载的选中项 */ getSelectedKey(): TreeNodeKeyType | null { return this.currentSelectedKey || this.unloadSelectedKey || null } /** * 获取未加载但多选选中的节点 */ getUnloadCheckedKeys(): TreeNodeKeyType[] { return this.unloadCheckedKeys } /** * 获取展开节点 */ getExpandNodes(): TreeNode[] { return this.flatData.filter(node => !node.isLeaf && node.expand) } /** * 获取展开节点 keys */ getExpandKeys(): TreeNodeKeyType[] { return this.getExpandNodes().map(node => node[this.options.keyField]) } /** * 根据节点 key 获取节点 * @param key 节点 key */ getNode(key: TreeNodeKeyType): TreeNode | null { return this.mapData[key] || null } //#endregion Get api //#region Node transfer api // 这边的 referenceKey 都是被执行的节点,比如 insertBefore ,在这里 referenceKey 就是指要插入到 referenceKey 节点前面 insertBefore( insertedNode: TreeNodeKeyType | ITreeNodeOptions, referenceKey: TreeNodeKeyType ): TreeNode | null { const node = this.getInsertedNode(insertedNode, referenceKey) if (!node) return null this.remove(node[this.options.keyField], false) const referenceNode = this.mapData[referenceKey] const parentNode = referenceNode._parent const childIndex = this.findIndex( referenceKey, parentNode && parentNode.children ) const flatIndex = this.findIndex(referenceKey) const dataIndex = (parentNode && -1) || this.findIndex(referenceKey, this.data) this.insertIntoStore(node, parentNode, childIndex, flatIndex, dataIndex) this.emit('change-parent', { node, oldParent: node.parent, newParent: parentNode }) this.emit('visible-data-change') return node } insertAfter( insertedNode: TreeNodeKeyType | ITreeNodeOptions, referenceKey: TreeNodeKeyType ): TreeNode | null { const node = this.getInsertedNode(insertedNode, referenceKey) if (!node) return null this.remove(node[this.options.keyField], false) const referenceNode = this.mapData[referenceKey] const parentNode = referenceNode._parent const childIndex = this.findIndex(referenceKey, parentNode && parentNode.children) + 1 const length = this.flatData.length const referenceIndex = this.findIndex(referenceKey) // 找到待插入节点应该插入 flatData 的索引 let flatIndex = referenceIndex + 1 for (let i = referenceIndex + 1; i <= length; i++) { if (i === length) { flatIndex = i break } if (this.flatData[i]._level <= referenceNode._level) { flatIndex = i break } } const dataIndex = (parentNode && -1) || this.findIndex(referenceKey, this.data) + 1 this.insertIntoStore(node, parentNode, childIndex, flatIndex, dataIndex) this.emit('change-parent', { node, oldParent: node.parent, newParent: parentNode }) this.emit('visible-data-change') return node } append( insertedNode: TreeNodeKeyType | ITreeNodeOptions, parentKey: TreeNodeKeyType ): TreeNode | null { const parentNode = this.mapData[parentKey] if (!parentNode.isLeaf) { const childrenLength = parentNode.children.length return this.insertAfter( insertedNode, parentNode.children[childrenLength - 1][this.options.keyField] ) } const node = this.getInsertedNode(insertedNode, parentKey, true) if (!node) return null this.remove(node[this.options.keyField], false) const flatIndex = this.findIndex(parentKey) + 1 this.insertIntoStore(node, parentNode, 0, flatIndex) this.emit('visible-data-change') return node } prepend( insertedNode: TreeNodeKeyType | ITreeNodeOptions, parentKey: TreeNodeKeyType ): TreeNode | null { const parentNode = this.mapData[parentKey] if (!parentNode.isLeaf) { return this.insertBefore( insertedNode, parentNode.children[0][this.options.keyField] ) } const node = this.getInsertedNode(insertedNode, parentKey, true) if (!node) return null this.remove(node[this.options.keyField], false) const flatIndex = this.findIndex(parentKey) + 1 this.insertIntoStore(node, parentNode, 0, flatIndex) this.emit('change-parent', { node, oldParent: node.parent, newParent: parentNode }) this.emit('visible-data-change') return node } /** * 删除节点 * @param removedKey 要删除的节点 key */ remove( removedKey: TreeNodeKeyType, triggerDataChange: boolean = true ): TreeNode | null { const node = this.mapData[removedKey] if (!node) return null // 从 flatData 中移除 const index = this.findIndex(node) if (index === -1) return null let deleteCount = 1 const length = this.flatData.length for (let i = index + 1; i < length; i++) { if (this.flatData[i]._level > node._level) { deleteCount++ } else break } this.flatData.splice(index, deleteCount) // 从 mapData 中移除 const deleteInMap = (key: TreeNodeKeyType): void => { const node = this.mapData[key] delete this.mapData[key] node.children.forEach(child => deleteInMap(child[this.options.keyField])) } deleteInMap(removedKey) // 从 data 中移除 if (!node._parent) { const index = this.findIndex(node, this.data) if (index > -1) { this.data.splice(index, 1) } } // 从父节点 children 中移除 if (node._parent) { const childIndex = this.findIndex(node, node._parent.children) if (childIndex !== -1) { node._parent.children.splice(childIndex, 1) } // 处理父节点 isLeaf node._parent.isLeaf = !node._parent.children.length // 处理父节点 expand if (node._parent.isLeaf) { node._parent.expand = false node._parent.indeterminate = false } // 更新被移除处父节点状态 this.updateMovingNodeStatus(node) } if (triggerDataChange) { this.emit('visible-data-change') } return node } private getInsertedNode( insertedNode: TreeNodeKeyType | ITreeNodeOptions, referenceKey: TreeNodeKeyType, isParent: boolean = false ): TreeNode | null { const referenceNode = this.mapData[referenceKey] if (!referenceNode) return null const parentNode = isParent ? referenceNode : referenceNode._parent if (insertedNode instanceof TreeNode) { // 与参照节点是同一个节点 if (insertedNode[this.options.keyField] === referenceKey) return null return insertedNode } else if (typeof insertedNode === 'object') { if (insertedNode[this.options.keyField] === referenceKey) return null const mapNode = this.mapData[insertedNode[this.options.keyField]] if (mapNode) return mapNode return new TreeNode( insertedNode, parentNode, this.options.keyField, !!this.options.load ) } else { if (!this.mapData[insertedNode] || insertedNode === referenceKey) return null return this.mapData[insertedNode] } } /** * 将一个节点插入 store 记录中 * @param node 要插入的节点 * @param parentNode 要插入节点的父节点 * @param childIndex 如果有父节点,则需提供要插入的节点在同级节点中的顺序 * @param flatIndex 在 flatData 中的索引 * @param dataIndex 如果没有父节点,需要提供节点在 data 中的索引 */ private insertIntoStore( node: TreeNode, parentNode: TreeNode | null, childIndex: number, flatIndex: number, dataIndex?: number ): void { if (flatIndex === -1) return // 插入父节点 children 中 if (childIndex !== -1 && parentNode) { parentNode.children.splice(childIndex, 0, node) } // 更新 _parent node._parent = parentNode // 更新父节点 isLeaf, expand if (parentNode) { parentNode.isLeaf = false this.setExpand( parentNode[this.options.keyField], true, false, false, false ) } else if (typeof dataIndex === 'number' && dataIndex > -1) { // 没有父节点,则需要插入到 this.data 中以保证数据正确 this.data.splice(dataIndex, 0, node) } // 插入 flatData 与 mapData const nodes: TreeNode[] = this.flattenData([node]) // 处理自身及子节点 _level node._level = parentNode ? parentNode._level + 1 : 0 nodes.forEach( childNode => (childNode._level = childNode._parent ? childNode._parent._level + 1 : 0) ) this.flatData.splice(flatIndex, 0, ...nodes) // 更新被移除处父节点状态 this.updateMovingNodeStatus(node) } private updateMovingNodeStatus(movingNode: TreeNode): void { // 处理多选 this.checkNodeUpward(movingNode) this.triggerCheckedChange() // 处理单选 if (movingNode.selected) { this.setSelected(movingNode[this.options.keyField], true) } } //#endregion Node transfer api /** * 过滤本地节点数据 * @param keyword 过滤关键词 * @param filterMethod 过滤方法 */ filter(keyword: string, filterMethod: FilterFunctionType): void { // 使用树形结构数据进行遍历 const filterVisibleNodes: TreeNode[] = [] this.flatData.forEach(node => { node._filterVisible = (node._parent && node._parent._filterVisible) || filterMethod(keyword, node) node.visible = node._filterVisible if (node._filterVisible) { filterVisibleNodes.push(node) } }) // 对于临时列表中的节点,都是可见的,因此将它们的父节点都设为可见并展开 filterVisibleNodes.forEach(node => { const stack = [] let parent = node._parent while (parent) { stack.unshift(parent) parent = parent._parent } stack.forEach(parent => { parent._filterVisible = true // parent.visible = parent._filterVisible // _filterVisible 且 无父级或者父级展开且可见,则设为可见 parent.visible = (parent._parent === null || (parent._parent.expand && parent._parent.visible)) && parent._filterVisible this.options.expandOnFilter && this.setExpand( parent[this.options.keyField], true, false, false, false ) }) node.visible = node._parent === null || (node._parent.expand && node._parent.visible) }) this.emit('visible-data-change') } /** * 过滤未加载多选节点,对比最终勾选节点是否有变化并触发 checked-change 事件 * @param keys 全量选中节点 key 数组,包括加载与未加载选中节点 */ private setUnloadCheckedKeys(keys: TreeNodeKeyType[]): void { this.unloadCheckedKeys = keys const checkedKeysCache = keys.concat() const length = this.unloadCheckedKeys.length for (let i = length - 1; i >= 0; i--) { const key = this.unloadCheckedKeys[i] if (this.mapData[key]) { this.setChecked(key, true, false, false) this.unloadCheckedKeys.splice(i, 1) } } const newCheckedKeys = this.getCheckedKeys() if ( newCheckedKeys.length === checkedKeysCache.length && newCheckedKeys.every(val => (checkedKeysCache as TreeNodeKeyType[]).some(cache => cache === val) ) ) return // 因为多选模式下,value 传过来的数据跟数据上标识 checked: true 的结果可能不一致,因此需要触发一个事件告诉外部最终勾选了哪些节点 this.emit('checked-change', this.getCheckedNodes(), newCheckedKeys) } /** * 过滤未加载单选选中节点,对比是否有变化并触发 selected-change 事件 * @param key 节点 key */ private setUnloadSelectedKey(key: TreeNodeKeyType): void { const selectedKeyCache = this.getSelectedKey() if (this.mapData[key]) { // 如果节点已加载 this.setSelected(key, true, false) this.unloadSelectedKey = null } else { // 节点未加载 this.currentSelectedKey && this.setSelected(this.currentSelectedKey, false, false) this.unloadSelectedKey = key } const newSelectedKey = this.getSelectedKey() if (newSelectedKey === selectedKeyCache) return this.emit('selected-change', this.getSelectedNode(), newSelectedKey) } /** * 保存扁平化的节点数据 `flatData` 与节点数据 Map `mapData` * @param nodes 树状节点数据 * @param overrideSelected 是否根据数据设置 `selected` */ private flattenData( nodes: TreeNode[], overrideSelected: boolean = true, result: TreeNode[] = [] ): TreeNode[] { const length = nodes.length for (let i = 0; i < length; i++) { const node = nodes[i] const key: TreeNodeKeyType = node[this.options.keyField] result.push(node) if (this.mapData[key]) { throw new Error('[CTree] Duplicate tree node key.') } this.mapData[key] = node // 如果数据上就是选中的,则更新节点状态 if (node.checked && this.options.cascade) { // 向下勾选,包括自身 this.checkNodeDownward(node, true) // 向上勾选父节点直到根节点 this.checkNodeUpward(node) } if (node.selected && overrideSelected) { this.clearSelected(false, false) this.currentSelectedKey = node[this.options.keyField] this.emit('selected-change', node, this.currentSelectedKey) } if ( (this.options.defaultExpandAll || node.expand) && !this.options.load && !node.isLeaf ) { node.expand = false this.setExpand(node[this.options.keyField], true, false, false, false) } if (node.children.length) { this.flattenData(node.children, overrideSelected, result) } } return result } //#region Check nodes /** * 向下勾选/取消勾选节点,包括自身 * @param node 需要向下勾选的节点 * @param value 勾选或取消勾选 * @param filtering 是否正在过滤,如果是,则考虑 `filteredNodeCheckable` Prop */ private checkNodeDownward( node: TreeNode, value: boolean, filtering: boolean = false ): void { node.children.forEach(child => { this.checkNodeDownward(child, value, filtering) }) if (node.isLeaf || (this.options.load && !node.children.length)) { if (!node.disabled) { // 正在过滤,若被过滤节点不可勾选,且节点过滤后不可见,则直接返回 if ( filtering && !this.options.filteredNodeCheckable && !node._filterVisible ) return node.checked = value node.indeterminate = false } } else { this.checkParentNode(node) } } /** * 向上勾选/取消勾选父节点,不包括自身 * @param node 需要勾选的节点 */ private checkNodeUpward(node: TreeNode) { let parent = node._parent while (parent) { this.checkParentNode(parent) parent = parent._parent } } /** * 根据子节点的勾选状态更新当前父节点的勾选状态 * @param node 需要勾选的节点 */ private checkParentNode(node: TreeNode): void { const length = node.children.length if (!length) return let hasChecked = false let hasUnchecked = false let isInterrupted = false for (let i = 0; i < length; i++) { const child = node.children[i] if (child.checked) { hasChecked = true } else { hasUnchecked = true } if ((hasChecked && hasUnchecked) || child.indeterminate) { isInterrupted = true node.checked = false node.indeterminate = true break } } if (!isInterrupted) { node.checked = hasChecked node.indeterminate = false } } //#endregion Check nodes //#region Utils /** * 搜索节点在指定数组中的位置 */ findIndex( keyOrNode: TreeNode | TreeNodeKeyType, searchList: TreeNode[] | TreeNodeKeyType[] | null = this.flatData ): number { if (searchList !== null) { let key: TreeNodeKeyType = keyOrNode instanceof TreeNode ? keyOrNode[this.options.keyField] : keyOrNode const length = searchList.length for (let i = 0; i < length; i++) { if (searchList[0] instanceof TreeNode) { if (key === (searchList as TreeNode[])[i][this.options.keyField]) { return i } } else { if (key === searchList[i]) { return i } } } } return -1 } //#endregion Utils //#region Mini EventTarget on( eventName: T, listener: ListenerType | Array> ): void { if (!this.listenersMap[eventName]) { this.listenersMap[eventName] = [] } let listeners: Array> = [] if (!Array.isArray(listener)) { listeners = [listener] } else { listeners = listener } listeners.forEach(listener => { if (this.listenersMap[eventName].indexOf(listener) === -1) { this.listenersMap[eventName].push(listener) } }) } off( eventName: T, listener?: ListenerType ): void { if (!this.listenersMap[eventName]) return if (!listener) { this.listenersMap[eventName] = [] } else { const index = this.listenersMap[eventName].indexOf(listener) if (index > -1) { this.listenersMap[eventName].splice(index, 1) } } } emit( eventName: T, ...args: Parameters ): void { if (!this.listenersMap[eventName]) return const length: number = this.listenersMap[eventName].length for (let i: number = 0; i < length; i++) { this.listenersMap[eventName][i](...args) } } disposeListeners(): void { for (const eventName in this.listenersMap) { this.listenersMap[eventName] = [] } } clearSelectedMap() { Object.values(this.currentSelectedMapData).map(node => { node.selected = false this.deepSetSubSelect(node, false) }) this.currentSelectedMapData = {} } deepSetSubSelect = (node: TreeNode, state: boolean) => { this.getNode(node['id'])?.children.map(i => { i.subSelected = state if (i.children.length) { this.deepSetSubSelect(i, state) } }) } setSelect( node: TreeNode, state: boolean, map?: { triggerEvent?: boolean triggerDataChange?: boolean triggerMapChange?: boolean } ) { const { triggerEvent, triggerDataChange, triggerMapChange } = map || {} this.setSelected( node.id, state, triggerEvent, triggerDataChange, triggerMapChange ) this.deepSetSubSelect(node, state) } isParent(map: { parentId: string; node: TreeNode }) {} isParentSelected(node: TreeNode): boolean { const tNode = this.mapData[node.id] console.log('Log-- ', node._parent, this.mapData, 'node._parent') if (!tNode._parent) return false if (tNode._parent.selected) return true return this.isParentSelected(tNode._parent) } isIncludedSelecteds( node: TreeNode, possibleIncludedNode: TreeNode | TreeNode[] ) { const ls = Array.isArray(possibleIncludedNode) ? possibleIncludedNode : [possibleIncludedNode] // ls.map(iNode => ) } private _isIncludedSelected( node: TreeNode, possibleIncludedNode: TreeNode ): boolean { if (!possibleIncludedNode._parent) return false if (possibleIncludedNode._parent.id === node.id) return true return this._isIncludedSelected(node, possibleIncludedNode._parent) } getSelectedNodes() { return Object.values(this.currentSelectedMapData) } //#endregion Mini EventTarget }