| 提交 | 用户 | 时间 | ||
| 820397 | 1 | interface TreeHelperConfig { |
| H | 2 | id: string |
| 3 | children: string | |
| 4 | pid: string | |
| 5 | } | |
| 6 | ||
| 7 | const DEFAULT_CONFIG: TreeHelperConfig = { | |
| 8 | id: 'id', | |
| 9 | children: 'children', | |
| 10 | pid: 'pid' | |
| 11 | } | |
| 12 | export const defaultProps = { | |
| 13 | children: 'children', | |
| 14 | label: 'name', | |
| 15 | value: 'id', | |
| 16 | isLeaf: 'leaf', | |
| 17 | emitPath: false // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | |
| 18 | } | |
| 19 | ||
| 20 | const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config) | |
| 21 | ||
| 22 | // tree from list | |
| 23 | export const listToTree = <T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] => { | |
| 24 | const conf = getConfig(config) as TreeHelperConfig | |
| 25 | const nodeMap = new Map() | |
| 26 | const result: T[] = [] | |
| 27 | const { id, children, pid } = conf | |
| 28 | ||
| 29 | for (const node of list) { | |
| 30 | node[children] = node[children] || [] | |
| 31 | nodeMap.set(node[id], node) | |
| 32 | } | |
| 33 | for (const node of list) { | |
| 34 | const parent = nodeMap.get(node[pid]) | |
| 35 | ;(parent ? parent.children : result).push(node) | |
| 36 | } | |
| 37 | return result | |
| 38 | } | |
| 39 | ||
| 40 | export const treeToList = <T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T => { | |
| 41 | config = getConfig(config) | |
| 42 | const { children } = config | |
| 43 | const result: any = [...tree] | |
| 44 | for (let i = 0; i < result.length; i++) { | |
| 45 | if (!result[i][children!]) continue | |
| 46 | result.splice(i + 1, 0, ...result[i][children!]) | |
| 47 | } | |
| 48 | return result | |
| 49 | } | |
| 50 | ||
| 51 | export const findNode = <T = any>( | |
| 52 | tree: any, | |
| 53 | func: Fn, | |
| 54 | config: Partial<TreeHelperConfig> = {} | |
| 55 | ): T | null => { | |
| 56 | config = getConfig(config) | |
| 57 | const { children } = config | |
| 58 | const list = [...tree] | |
| 59 | for (const node of list) { | |
| 60 | if (func(node)) return node | |
| 61 | node[children!] && list.push(...node[children!]) | |
| 62 | } | |
| 63 | return null | |
| 64 | } | |
| 65 | ||
| 66 | export const findNodeAll = <T = any>( | |
| 67 | tree: any, | |
| 68 | func: Fn, | |
| 69 | config: Partial<TreeHelperConfig> = {} | |
| 70 | ): T[] => { | |
| 71 | config = getConfig(config) | |
| 72 | const { children } = config | |
| 73 | const list = [...tree] | |
| 74 | const result: T[] = [] | |
| 75 | for (const node of list) { | |
| 76 | func(node) && result.push(node) | |
| 77 | node[children!] && list.push(...node[children!]) | |
| 78 | } | |
| 79 | return result | |
| 80 | } | |
| 81 | ||
| 82 | export const findPath = <T = any>( | |
| 83 | tree: any, | |
| 84 | func: Fn, | |
| 85 | config: Partial<TreeHelperConfig> = {} | |
| 86 | ): T | T[] | null => { | |
| 87 | config = getConfig(config) | |
| 88 | const path: T[] = [] | |
| 89 | const list = [...tree] | |
| 90 | const visitedSet = new Set() | |
| 91 | const { children } = config | |
| 92 | while (list.length) { | |
| 93 | const node = list[0] | |
| 94 | if (visitedSet.has(node)) { | |
| 95 | path.pop() | |
| 96 | list.shift() | |
| 97 | } else { | |
| 98 | visitedSet.add(node) | |
| 99 | node[children!] && list.unshift(...node[children!]) | |
| 100 | path.push(node) | |
| 101 | if (func(node)) { | |
| 102 | return path | |
| 103 | } | |
| 104 | } | |
| 105 | } | |
| 106 | return null | |
| 107 | } | |
| 108 | ||
| 109 | export const findPathAll = (tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}) => { | |
| 110 | config = getConfig(config) | |
| 111 | const path: any[] = [] | |
| 112 | const list = [...tree] | |
| 113 | const result: any[] = [] | |
| 114 | const visitedSet = new Set(), | |
| 115 | { children } = config | |
| 116 | while (list.length) { | |
| 117 | const node = list[0] | |
| 118 | if (visitedSet.has(node)) { | |
| 119 | path.pop() | |
| 120 | list.shift() | |
| 121 | } else { | |
| 122 | visitedSet.add(node) | |
| 123 | node[children!] && list.unshift(...node[children!]) | |
| 124 | path.push(node) | |
| 125 | func(node) && result.push([...path]) | |
| 126 | } | |
| 127 | } | |
| 128 | return result | |
| 129 | } | |
| 130 | ||
| 131 | export const filter = <T = any>( | |
| 132 | tree: T[], | |
| 133 | func: (n: T) => boolean, | |
| 134 | config: Partial<TreeHelperConfig> = {} | |
| 135 | ): T[] => { | |
| 136 | config = getConfig(config) | |
| 137 | const children = config.children as string | |
| 138 | ||
| 139 | function listFilter(list: T[]) { | |
| 140 | return list | |
| 141 | .map((node: any) => ({ ...node })) | |
| 142 | .filter((node) => { | |
| 143 | node[children] = node[children] && listFilter(node[children]) | |
| 144 | return func(node) || (node[children] && node[children].length) | |
| 145 | }) | |
| 146 | } | |
| 147 | ||
| 148 | return listFilter(tree) | |
| 149 | } | |
| 150 | ||
| 151 | export const forEach = <T = any>( | |
| 152 | tree: T[], | |
| 153 | func: (n: T) => any, | |
| 154 | config: Partial<TreeHelperConfig> = {} | |
| 155 | ): void => { | |
| 156 | config = getConfig(config) | |
| 157 | const list: any[] = [...tree] | |
| 158 | const { children } = config | |
| 159 | for (let i = 0; i < list.length; i++) { | |
| 160 | // func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿 | |
| 161 | if (func(list[i])) { | |
| 162 | return | |
| 163 | } | |
| 164 | children && list[i][children] && list.splice(i + 1, 0, ...list[i][children]) | |
| 165 | } | |
| 166 | } | |
| 167 | ||
| 168 | /** | |
| 169 | * @description: Extract tree specified structure | |
| 170 | */ | |
| 171 | export const treeMap = <T = any>( | |
| 172 | treeData: T[], | |
| 173 | opt: { children?: string; conversion: Fn } | |
| 174 | ): T[] => { | |
| 175 | return treeData.map((item) => treeMapEach(item, opt)) | |
| 176 | } | |
| 177 | ||
| 178 | /** | |
| 179 | * @description: Extract tree specified structure | |
| 180 | */ | |
| 181 | export const treeMapEach = ( | |
| 182 | data: any, | |
| 183 | { children = 'children', conversion }: { children?: string; conversion: Fn } | |
| 184 | ) => { | |
| 185 | const haveChildren = Array.isArray(data[children]) && data[children].length > 0 | |
| 186 | const conversionData = conversion(data) || {} | |
| 187 | if (haveChildren) { | |
| 188 | return { | |
| 189 | ...conversionData, | |
| 190 | [children]: data[children].map((i: number) => | |
| 191 | treeMapEach(i, { | |
| 192 | children, | |
| 193 | conversion | |
| 194 | }) | |
| 195 | ) | |
| 196 | } | |
| 197 | } else { | |
| 198 | return { | |
| 199 | ...conversionData | |
| 200 | } | |
| 201 | } | |
| 202 | } | |
| 203 | ||
| 204 | /** | |
| 205 | * 递归遍历树结构 | |
| 206 | * @param treeDatas 树 | |
| 207 | * @param callBack 回调 | |
| 208 | * @param parentNode 父节点 | |
| 209 | */ | |
| 210 | export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => { | |
| 211 | treeDatas.forEach((element) => { | |
| 212 | const newNode = callBack(element, parentNode) || element | |
| 213 | if (element.children) { | |
| 214 | eachTree(element.children, callBack, newNode) | |
| 215 | } | |
| 216 | }) | |
| 217 | } | |
| 218 | ||
| 219 | /** | |
| 220 | * 构造树型结构数据 | |
| 221 | * @param {*} data 数据源 | |
| 222 | * @param {*} id id字段 默认 'id' | |
| 223 | * @param {*} parentId 父节点字段 默认 'parentId' | |
| 224 | * @param {*} children 孩子节点字段 默认 'children' | |
| 225 | */ | |
| 226 | export const handleTree = (data: any[], id?: string, parentId?: string, children?: string) => { | |
| 227 | if (!Array.isArray(data)) { | |
| 228 | console.warn('data must be an array') | |
| 229 | return [] | |
| 230 | } | |
| 231 | const config = { | |
| 232 | id: id || 'id', | |
| 233 | parentId: parentId || 'parentId', | |
| 234 | childrenList: children || 'children' | |
| 235 | } | |
| 236 | ||
| 237 | const childrenListMap = {} | |
| 238 | const nodeIds = {} | |
| 239 | const tree: any[] = [] | |
| 240 | ||
| 241 | for (const d of data) { | |
| 242 | const parentId = d[config.parentId] | |
| 243 | if (childrenListMap[parentId] == null) { | |
| 244 | childrenListMap[parentId] = [] | |
| 245 | } | |
| 246 | nodeIds[d[config.id]] = d | |
| 247 | childrenListMap[parentId].push(d) | |
| 248 | } | |
| 249 | ||
| 250 | for (const d of data) { | |
| 251 | const parentId = d[config.parentId] | |
| 252 | if (nodeIds[parentId] == null) { | |
| 253 | tree.push(d) | |
| 254 | } | |
| 255 | } | |
| 256 | ||
| 257 | for (const t of tree) { | |
| 258 | adaptToChildrenList(t) | |
| 259 | } | |
| 260 | ||
| 261 | function adaptToChildrenList(o) { | |
| 262 | if (childrenListMap[o[config.id]] !== null) { | |
| 263 | o[config.childrenList] = childrenListMap[o[config.id]] | |
| 264 | } | |
| 265 | if (o[config.childrenList]) { | |
| 266 | for (const c of o[config.childrenList]) { | |
| 267 | adaptToChildrenList(c) | |
| 268 | } | |
| 269 | } | |
| 270 | } | |
| 271 | ||
| 272 | return tree | |
| 273 | } | |
| 274 | ||
| 275 | /** | |
| 276 | * 构造树型结构数据 | |
| 277 | * @param {*} data 数据源 | |
| 278 | * @param {*} id id字段 默认 'id' | |
| 279 | * @param {*} parentId 父节点字段 默认 'parentId' | |
| 280 | * @param {*} children 孩子节点字段 默认 'children' | |
| 281 | * @param {*} rootId 根Id 默认 0 | |
| 282 | */ | |
| 283 | // @ts-ignore | |
| 284 | export const handleTree2 = (data, id, parentId, children, rootId) => { | |
| 285 | id = id || 'id' | |
| 286 | parentId = parentId || 'parentId' | |
| 287 | // children = children || 'children' | |
| 288 | rootId = | |
| 289 | rootId || | |
| 290 | Math.min( | |
| 291 | ...data.map((item) => { | |
| 292 | return item[parentId] | |
| 293 | }) | |
| 294 | ) || | |
| 295 | 0 | |
| 296 | // 对源数据深度克隆 | |
| 297 | const cloneData = JSON.parse(JSON.stringify(data)) | |
| 298 | // 循环所有项 | |
| 299 | const treeData = cloneData.filter((father) => { | |
| 300 | const branchArr = cloneData.filter((child) => { | |
| 301 | // 返回每一项的子级数组 | |
| 302 | return father[id] === child[parentId] | |
| 303 | }) | |
| 304 | branchArr.length > 0 ? (father.children = branchArr) : '' | |
| 305 | // 返回第一层 | |
| 306 | return father[parentId] === rootId | |
| 307 | }) | |
| 308 | return treeData !== '' ? treeData : data | |
| 309 | } | |
| 310 | ||
| 311 | /** | |
| 312 | * 校验选中的节点，是否为指定 level | |
| 313 | * | |
| 314 | * @param tree 要操作的树结构数据 | |
| 315 | * @param nodeId 需要判断在什么层级的数据 | |
| 316 | * @param level 检查的级别, 默认检查到二级 | |
| 317 | * @return true 是；false 否 | |
| 318 | */ | |
| 319 | export const checkSelectedNode = (tree: any[], nodeId: any, level = 2): boolean => { | |
| 320 | if (typeof tree === 'undefined' || !Array.isArray(tree) || tree.length === 0) { | |
| 321 | console.warn('tree must be an array') | |
| 322 | return false | |
| 323 | } | |
| 324 | ||
| 325 | // 校验是否是一级节点 | |
| 326 | if (tree.some((item) => item.id === nodeId)) { | |
| 327 | return false | |
| 328 | } | |
| 329 | ||
| 330 | // 递归计数 | |
| 331 | let count = 1 | |
| 332 | ||
| 333 | // 深层次校验 | |
| 334 | function performAThoroughValidation(arr: any[]): boolean { | |
| 335 | count += 1 | |
| 336 | for (const item of arr) { | |
| 337 | if (item.id === nodeId) { | |
| 338 | return true | |
| 339 | } else if (typeof item.children !== 'undefined' && item.children.length !== 0) { | |
| 340 | if (performAThoroughValidation(item.children)) { | |
| 341 | return true | |
| 342 | } | |
| 343 | } | |
| 344 | } | |
| 345 | return false | |
| 346 | } | |
| 347 | ||
| 348 | for (const item of tree) { | |
| 349 | count = 1 | |
| 350 | if (performAThoroughValidation(item.children)) { | |
| 351 | // 找到后对比是否是期望的层级 | |
| 352 | if (count >= level) { | |
| 353 | return true | |
| 354 | } | |
| 355 | } | |
| 356 | } | |
| 357 | ||
| 358 | return false | |
| 359 | } | |
| 360 | ||
| 361 | /** | |
| 362 | * 获取节点的完整结构 | |
| 363 | * @param tree 树数据 | |
| 364 | * @param nodeId 节点 id | |
| 365 | */ | |
| 366 | export const treeToString = (tree: any[], nodeId) => { | |
| 367 | if (typeof tree === 'undefined' || !Array.isArray(tree) || tree.length === 0) { | |
| 368 | console.warn('tree must be an array') | |
| 369 | return '' | |
| 370 | } | |
| 371 | // 校验是否是一级节点 | |
| 372 | const node = tree.find((item) => item.id === nodeId) | |
| 373 | if (typeof node !== 'undefined') { | |
| 374 | return node.name | |
| 375 | } | |
| 376 | let str = '' | |
| 377 | ||
| 378 | function performAThoroughValidation(arr) { | |
| 379 | for (const item of arr) { | |
| 380 | if (item.id === nodeId) { | |
| 381 | str += ` / ${item.name}` | |
| 382 | return true | |
| 383 | } else if (typeof item.children !== 'undefined' && item.children.length !== 0) { | |
| 384 | str += ` / ${item.name}` | |
| 385 | if (performAThoroughValidation(item.children)) { | |
| 386 | return true | |
| 387 | } | |
| 388 | } | |
| 389 | } | |
| 390 | return false | |
| 391 | } | |
| 392 | ||
| 393 | for (const item of tree) { | |
| 394 | str = `${item.name}` | |
| 395 | if (performAThoroughValidation(item.children)) { | |
| 396 | break | |
| 397 | } | |
| 398 | } | |
| 399 | return str | |
| 400 | } | |
