2020-10-20 10:31:47 +08:00
|
|
|
|
import { ref, computed, watch, getCurrentInstance, unref } from 'vue'
|
2021-09-17 15:27:31 +08:00
|
|
|
|
import { walkTreeNode, getRowIdentity } from '../util'
|
2021-08-24 13:36:48 +08:00
|
|
|
|
|
|
|
|
|
import type { WatcherPropsData } from '.'
|
|
|
|
|
import type { Table, TableProps } from '../table/defaults'
|
2020-10-20 10:31:47 +08:00
|
|
|
|
|
2021-05-13 17:55:04 +08:00
|
|
|
|
function useTree<T>(watcherData: WatcherPropsData<T>) {
|
|
|
|
|
const expandRowKeys = ref<string[]>([])
|
|
|
|
|
const treeData = ref<unknown>({})
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const indent = ref(16)
|
|
|
|
|
const lazy = ref(false)
|
|
|
|
|
const lazyTreeNodeMap = ref({})
|
|
|
|
|
const lazyColumnIdentifier = ref('hasChildren')
|
|
|
|
|
const childrenColumnName = ref('children')
|
2021-05-13 17:55:04 +08:00
|
|
|
|
const instance = getCurrentInstance() as Table<T>
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const normalizedData = computed(() => {
|
|
|
|
|
if (!watcherData.rowKey.value) return {}
|
|
|
|
|
const data = watcherData.data.value || []
|
|
|
|
|
return normalize(data)
|
|
|
|
|
})
|
|
|
|
|
const normalizedLazyNode = computed(() => {
|
|
|
|
|
const rowKey = watcherData.rowKey.value
|
|
|
|
|
const keys = Object.keys(lazyTreeNodeMap.value)
|
|
|
|
|
const res = {}
|
|
|
|
|
if (!keys.length) return res
|
2021-09-04 19:29:28 +08:00
|
|
|
|
keys.forEach((key) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
if (lazyTreeNodeMap.value[key].length) {
|
|
|
|
|
const item = { children: [] }
|
2021-09-04 19:29:28 +08:00
|
|
|
|
lazyTreeNodeMap.value[key].forEach((row) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const currentRowKey = getRowIdentity(row, rowKey)
|
|
|
|
|
item.children.push(currentRowKey)
|
|
|
|
|
if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
|
|
|
|
|
res[currentRowKey] = { children: [] }
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
res[key] = item
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return res
|
|
|
|
|
})
|
|
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
|
const normalize = (data) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const rowKey = watcherData.rowKey.value
|
|
|
|
|
const res = {}
|
|
|
|
|
walkTreeNode(
|
|
|
|
|
data,
|
|
|
|
|
(parent, children, level) => {
|
|
|
|
|
const parentId = getRowIdentity(parent, rowKey)
|
|
|
|
|
if (Array.isArray(children)) {
|
|
|
|
|
res[parentId] = {
|
2021-09-04 19:29:28 +08:00
|
|
|
|
children: children.map((row) => getRowIdentity(row, rowKey)),
|
2020-10-20 10:31:47 +08:00
|
|
|
|
level,
|
|
|
|
|
}
|
|
|
|
|
} else if (lazy.value) {
|
|
|
|
|
// 当 children 不存在且 lazy 为 true,该节点即为懒加载的节点
|
|
|
|
|
res[parentId] = {
|
|
|
|
|
children: [],
|
|
|
|
|
lazy: true,
|
|
|
|
|
level,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
childrenColumnName.value,
|
2021-09-04 19:29:28 +08:00
|
|
|
|
lazyColumnIdentifier.value
|
2020-10-20 10:31:47 +08:00
|
|
|
|
)
|
|
|
|
|
return res
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-12 18:00:22 +08:00
|
|
|
|
const updateTreeData = (
|
|
|
|
|
ifExpandAll = instance.store?.states.defaultExpandAll.value
|
|
|
|
|
) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const nested = normalizedData.value
|
|
|
|
|
const normalizedLazyNode_ = normalizedLazyNode.value
|
|
|
|
|
const keys = Object.keys(nested)
|
|
|
|
|
const newTreeData = {}
|
|
|
|
|
if (keys.length) {
|
|
|
|
|
const oldTreeData = unref(treeData)
|
|
|
|
|
const rootLazyRowKeys = []
|
|
|
|
|
const getExpanded = (oldValue, key) => {
|
2021-09-29 09:53:51 +08:00
|
|
|
|
if (expandRowKeys.value) {
|
|
|
|
|
return ifExpandAll || expandRowKeys.value.includes(key)
|
|
|
|
|
} else {
|
|
|
|
|
return !!(ifExpandAll || oldValue?.expanded)
|
|
|
|
|
}
|
2020-10-20 10:31:47 +08:00
|
|
|
|
}
|
|
|
|
|
// 合并 expanded 与 display,确保数据刷新后,状态不变
|
2021-09-04 19:29:28 +08:00
|
|
|
|
keys.forEach((key) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const oldValue = oldTreeData[key]
|
|
|
|
|
const newValue = { ...nested[key] }
|
|
|
|
|
newValue.expanded = getExpanded(oldValue, key)
|
|
|
|
|
if (newValue.lazy) {
|
|
|
|
|
const { loaded = false, loading = false } = oldValue || {}
|
|
|
|
|
newValue.loaded = !!loaded
|
|
|
|
|
newValue.loading = !!loading
|
|
|
|
|
rootLazyRowKeys.push(key)
|
|
|
|
|
}
|
|
|
|
|
newTreeData[key] = newValue
|
|
|
|
|
})
|
|
|
|
|
// 根据懒加载数据更新 treeData
|
|
|
|
|
const lazyKeys = Object.keys(normalizedLazyNode_)
|
|
|
|
|
if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
|
2021-09-04 19:29:28 +08:00
|
|
|
|
lazyKeys.forEach((key) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
const oldValue = oldTreeData[key]
|
|
|
|
|
const lazyNodeChildren = normalizedLazyNode_[key].children
|
|
|
|
|
if (rootLazyRowKeys.indexOf(key) !== -1) {
|
|
|
|
|
// 懒加载的 root 节点,更新一下原有的数据,原来的 children 一定是空数组
|
|
|
|
|
if (newTreeData[key].children.length !== 0) {
|
|
|
|
|
throw new Error('[ElTable]children must be an empty array.')
|
|
|
|
|
}
|
|
|
|
|
newTreeData[key].children = lazyNodeChildren
|
|
|
|
|
} else {
|
|
|
|
|
const { loaded = false, loading = false } = oldValue || {}
|
|
|
|
|
newTreeData[key] = {
|
|
|
|
|
lazy: true,
|
|
|
|
|
loaded: !!loaded,
|
|
|
|
|
loading: !!loading,
|
|
|
|
|
expanded: getExpanded(oldValue, key),
|
|
|
|
|
children: lazyNodeChildren,
|
|
|
|
|
level: '',
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
treeData.value = newTreeData
|
|
|
|
|
instance.store?.updateTableScrollY()
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-12 18:00:22 +08:00
|
|
|
|
watch(
|
|
|
|
|
() => normalizedData.value,
|
|
|
|
|
() => {
|
|
|
|
|
updateTreeData()
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
watch(
|
|
|
|
|
() => normalizedLazyNode.value,
|
|
|
|
|
() => {
|
|
|
|
|
updateTreeData()
|
|
|
|
|
}
|
|
|
|
|
)
|
2020-10-20 10:31:47 +08:00
|
|
|
|
|
2021-05-13 17:55:04 +08:00
|
|
|
|
const updateTreeExpandKeys = (value: string[]) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
expandRowKeys.value = value
|
|
|
|
|
updateTreeData()
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-13 17:55:04 +08:00
|
|
|
|
const toggleTreeExpansion = (row: T, expanded?: boolean) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
instance.store.assertRowKey()
|
|
|
|
|
|
|
|
|
|
const rowKey = watcherData.rowKey.value
|
|
|
|
|
const id = getRowIdentity(row, rowKey)
|
|
|
|
|
const data = id && treeData.value[id]
|
|
|
|
|
if (id && data && 'expanded' in data) {
|
|
|
|
|
const oldExpanded = data.expanded
|
|
|
|
|
expanded = typeof expanded === 'undefined' ? !data.expanded : expanded
|
|
|
|
|
treeData.value[id].expanded = expanded
|
|
|
|
|
if (oldExpanded !== expanded) {
|
|
|
|
|
instance.emit('expand-change', row, expanded)
|
|
|
|
|
}
|
|
|
|
|
instance.store.updateTableScrollY()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
|
const loadOrToggle = (row) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
instance.store.assertRowKey()
|
|
|
|
|
const rowKey = watcherData.rowKey.value
|
|
|
|
|
const id = getRowIdentity(row, rowKey)
|
|
|
|
|
const data = treeData.value[id]
|
|
|
|
|
if (lazy.value && data && 'loaded' in data && !data.loaded) {
|
|
|
|
|
loadData(row, id, data)
|
|
|
|
|
} else {
|
|
|
|
|
toggleTreeExpansion(row, undefined)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-13 17:55:04 +08:00
|
|
|
|
const loadData = (row: T, key: string, treeNode) => {
|
2021-09-04 19:29:28 +08:00
|
|
|
|
const { load } = instance.props as unknown as TableProps<T>
|
2020-10-20 10:31:47 +08:00
|
|
|
|
if (load && !treeData.value[key].loaded) {
|
|
|
|
|
treeData.value[key].loading = true
|
2021-09-04 19:29:28 +08:00
|
|
|
|
load(row, treeNode, (data) => {
|
2020-10-20 10:31:47 +08:00
|
|
|
|
if (!Array.isArray(data)) {
|
|
|
|
|
throw new Error('[ElTable] data must be an array')
|
|
|
|
|
}
|
|
|
|
|
treeData.value[key].loading = false
|
|
|
|
|
treeData.value[key].loaded = true
|
|
|
|
|
treeData.value[key].expanded = true
|
|
|
|
|
if (data.length) {
|
|
|
|
|
lazyTreeNodeMap.value[key] = data
|
|
|
|
|
}
|
|
|
|
|
instance.emit('expand-change', row, true)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
loadData,
|
|
|
|
|
loadOrToggle,
|
|
|
|
|
toggleTreeExpansion,
|
|
|
|
|
updateTreeExpandKeys,
|
|
|
|
|
updateTreeData,
|
|
|
|
|
normalize,
|
|
|
|
|
states: {
|
|
|
|
|
expandRowKeys,
|
|
|
|
|
treeData,
|
|
|
|
|
indent,
|
|
|
|
|
lazy,
|
|
|
|
|
lazyTreeNodeMap,
|
|
|
|
|
lazyColumnIdentifier,
|
|
|
|
|
childrenColumnName,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default useTree
|