@dt-frames/ui 1.0.8 → 1.0.11

package/src/components/tree/src/hooks/useTree.ts

@@ -0,0 +1,239 @@
+import { TreeDataItem } from "ant-design-vue/lib/tree"
+import { ComputedRef, Ref, unref } from "vue"
+import { cloneDeep } from 'lodash-es'
+import { FieldNames, InsertNodeParams, TreeItem, KeyType } from "../type/tree"
+import { forEach } from "../utils/tree"
+
+export function useTree(
+    treeDataRef: Ref<TreeDataItem[]>, 
+    getFieldNames: ComputedRef<FieldNames>
+) {
+
+    function getAllKeys(list?: TreeDataItem[]) {
+        const keys: string[] = []
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return keys
+
+        for (let index = 0; index < treeData.length; index++) {
+            const node = treeData[index]
+            keys.push(node[keyField]!)
+
+            const children = node[childrenField]
+
+            if (children && children.length) {
+                keys.push(...(getAllKeys(children) as string[]))
+            }
+        }
+
+        return keys as KeyType[]
+    }
+
+    function getEnabledKeys(list?: TreeDataItem[]) {
+        const keys: string[] = []
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return keys
+
+        for (let index = 0; index < treeData.length; index++) {
+            const node = treeData[index]
+            node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!)
+
+            const children = node[childrenField]
+            if (children && children.length) {
+                keys.push(...(getEnabledKeys(children) as string[]))
+            }
+        }
+
+        return keys as KeyType[]
+    }
+
+    // 获取节点的keys
+    function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
+        const keys: KeyType[] = []
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return keys
+
+        for (let index = 0; index < treeData.length; index++) {
+            const node = treeData[index]
+            const children = node[childrenField]
+
+            if (nodeKey === node[keyField]) {
+                keys.push(node[keyField]!)
+
+                if (children && children.length) {
+                    keys.push(...(getAllKeys(children) as KeyType[]))
+                }
+            } else {
+                if (children && children.length) {
+                    keys.push(...getChildrenKeys(nodeKey, children))
+                }
+            }
+        }
+
+        return keys as KeyType[]
+    }
+
+
+    function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
+        if (!key) return
+
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return
+
+        for (let index = 0; index < treeData.length; index++) {
+            const element: any = treeData[index]
+            const children = element[childrenField]
+
+            if (element[keyField] === key) {
+                treeData[index] = { ...treeData[index], ...node }
+                break
+            } else if (children && children.length) {
+                updateNodeByKey(key, node, element[childrenField])
+            }
+        }
+
+    }
+
+
+    function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
+        if (!level) return [] 
+
+        const res: (string | number)[] = []
+        const data = list || unref(treeDataRef) || []
+
+        for (let index = 0; index < data.length; index++) {
+            const item = data[index]
+
+            const { key: keyField, children: childrenField } = unref(getFieldNames)
+            const key = keyField ? item[keyField] : ''
+            const children = childrenField ? item[childrenField] : []
+            res.push(key)
+
+            if (children && children.length && currentLevel < level) {
+                currentLevel += 1;
+                res.push(...filterByLevel(level, children, currentLevel));
+            }
+        }
+
+        return res as string[] | number[]
+    }
+
+    // 添加节点
+    function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
+        const treeData: any = cloneDeep(unref(treeDataRef))
+
+        if (!parentKey) {
+            treeData[push](node)
+            treeDataRef.value = treeData
+            return
+        }
+
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+        if (!childrenField || !keyField) return
+
+        forEach(treeData, (treeItem) => {
+            if (treeItem[keyField] === parentKey) {
+                treeItem[childrenField] = treeItem[childrenField] || []
+                treeItem[childrenField][push](node)
+                return true
+            }
+        })
+        treeDataRef.value = treeData
+    }
+
+    // 批量添加节点
+    function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
+        const treeData: any = cloneDeep(unref(treeDataRef))
+
+        if (!list || list.length < 1) return
+
+        if (!parentKey) {
+            for (let i = 0; i < list.length; i++) {
+                treeData[push](list[i]);
+            }
+        } else {
+            const { key: keyField, children: childrenField } = unref(getFieldNames)
+            if (!childrenField || !keyField) return
+
+            forEach(treeData, (treeItem) => {
+                if (treeItem[keyField] === parentKey) {
+                    treeItem[childrenField] = treeItem[childrenField] || []
+
+                    for (let i = 0; i < list.length; i++) {
+                        treeItem[childrenField][push](list[i])
+                    }
+
+                    treeDataRef.value = treeData
+
+                    return true
+                }
+            })
+        }
+    }
+
+    // 通过key 删除节点
+    function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
+        if (!key) return
+
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return
+
+        for (let index = 0; index < treeData.length; index++) {
+            const element: any = treeData[index]
+            const children = element[childrenField]
+      
+            if (element[keyField] === key) {
+
+                treeData.splice(index, 1)
+                break
+
+            } else if (children && children.length) {
+
+                deleteNodeByKey(key, element[childrenField])
+
+            }
+        }
+    }
+
+    function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
+        if (!key && key !== 0) return null
+
+        const treeData = list || unref(treeDataRef)
+
+        treeData.forEach(item => {
+            if (selectedNode?.key || selectedNode?.key === 0) return selectedNode
+
+            if (item.key === key) {
+                selectedNode = item
+                return
+            }
+
+            if (item.children && item.children.length) {
+                selectedNode = getSelectedNode(key, item.children, selectedNode)
+            }
+        })
+
+        return selectedNode || null
+    }
+
+    return {
+        getAllKeys,
+        getEnabledKeys,
+        getChildrenKeys,
+        updateNodeByKey,
+        filterByLevel,
+        insertNodeByKey,
+        insertNodesByKey,
+        deleteNodeByKey,
+        getSelectedNode
+    }
+}

package/src/components/tree/src/index.vue

@@ -0,0 +1,392 @@
+<template>
+    <div class="dt-tree">
+        <template v-if="showTitle">
+            <TreeHeader
+                :title="title"
+                :toolbar="toolbar"
+                :search="search"
+                :checkable="checkable"
+                :searchText="searchState.searchText"
+                :checkAll="checkAll"
+                :expandAll="expandAll"
+                @search="handleSearch"
+            >
+                {{ extendSlots(slots) }}
+            </TreeHeader>
+        </template>
+
+        <Spin :spinning="loading" tip="加载中...">
+            <div v-show="!getNotFound">
+                <Tree
+                    v-bind="getBindValues"
+                    :showIcon="false"
+                    :treeData="treeData"
+                ></Tree>
+            </div>
+            <Empty v-show="getNotFound"></Empty>
+        </Spin>
+    </div>
+</template>
+
+<script lang="tsx" setup>
+    import { computed, reactive, ref, toRaw, unref, useAttrs, useSlots as vueUseSlots, watch, watchEffect } from 'vue'
+    import { cloneDeep, omit, difference, get } from 'lodash-es'
+    import { Spin, Empty, Tree } from 'ant-design-vue'
+    import TreeHeader from './components/treeHeader.vue'
+    import { BasicProps } from './props'
+    import { CheckKeys, CreateContextOptions, FieldNames, TreeItem, TreeState, KeyType, TreeActionType } from './type/tree'
+    import { isArray, isBoolean, isFunction, Recordable, isEmpty, useSlots } from '@dt-frames/core'
+    import { eachTree, filter, treeToList } from './utils/tree'
+    import { useTree } from './hooks/useTree'
+
+    const props = defineProps( BasicProps )
+    const attrs = useAttrs()
+    const slots = vueUseSlots()
+
+    const { getSlot, extendSlots } = useSlots()
+
+    const emit = defineEmits([ 
+        'update:expandedKeys',
+        'update:selectedKeys',
+        'update:value',
+        'check',
+        'change',
+        'clickNode',
+        'update:searchValue'
+    ])
+
+
+    const state = reactive<TreeState>({
+        checkStrictly: props.checkStrictly,
+        expandedKeys: props.expandedKeys || [],
+        selectedKeys: props.selectedKeys || [],
+        checkedKeys: props.checkedKeys || [],
+    })
+
+    const searchState = reactive({
+        startSearch: false,
+        searchText: '',
+        searchData: [] as TreeItem[],
+    })
+
+    const treeDataRef = ref<TreeItem[]>([])
+
+    const getFieldNames = computed(() => {
+        const { fieldNames } = props
+        return {
+            children: 'children',
+            title: 'title',
+            key: 'key',
+            ...(fieldNames as FieldNames)
+        }
+    })
+
+    const getTreeData = computed((): TreeItem[] => {
+        return searchState.startSearch ? searchState.searchData : unref(treeDataRef)
+    })
+
+    const getNotFound = computed((): boolean => {
+        return !getTreeData.value || getTreeData.value.length === 0;
+    })
+
+    const getIcon = (params: Recordable, icon?: string) => {
+        if (!icon) {
+            if ( props.renderIcon && isFunction( props.renderIcon ) ) {
+                return props.renderIcon(params)
+            }
+        }
+
+        return icon
+    }
+
+    const treeData = computed(() => {
+        const data = cloneDeep(getTreeData.value)
+
+        eachTree(data, ( item, _parent ) => {
+            const searchText = searchState.searchText
+
+            const { highlight } = unref(props)
+            const { title: titleField, key: keyField, children: childrenField } = unref(getFieldNames)
+
+            const icon = getIcon(item, item.icon)
+            const title = get(item, titleField)
+
+            const searchIdx = searchText ? title.indexOf(searchText) : -1
+            const isHighlight = searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1
+            const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`
+            
+            const titleDom = isHighlight ? (
+                // 切割高亮的字
+                <span class="tree-content">
+                    <span>{title.substr(0, searchIdx)}</span>
+                    <span style={ highlightStyle }>{ searchText }</span>
+                    <span>{ title.substr(searchIdx + (searchText as string).length) }</span>
+                </span>
+            ) : (
+                title 
+            )
+
+            item[titleField] = (
+                <span 
+                    class="tree-title" 
+                    onClick={ handleClickNode.bind(null, item[keyField], item[childrenField], item) }
+                >
+                {slots?.title ? (
+                    getSlot(slots, 'title', item)
+                ) : (
+                    <>
+                    {icon && <i class={ `i ${icon}`} />}
+                    {titleDom}
+                    <span class='tree-action'>{renderAction(item)}</span>
+                    </>
+                )}
+                </span>
+            )
+
+        })
+
+        return data
+    })
+
+
+    const showTitle = computed(() => {
+        return true
+    })
+
+    const getBindValues = computed(() => {
+        let propsData = {
+            blockNode: true,
+            ...attrs,
+            ...props,
+            expandedKeys: state.expandedKeys,
+            selectedKeys: state.selectedKeys,
+            checkedKeys: state.checkedKeys,
+            checkStrictly: state.checkStrictly,
+            fieldNames: unref(getFieldNames),
+            'onUpdate:expandedKeys': (v: KeyType[]) => {
+                state.expandedKeys = v;
+                emit('update:expandedKeys', v);
+            },
+            'onUpdate:selectedKeys': (v: KeyType[]) => {
+                state.selectedKeys = v;
+                emit('update:selectedKeys', v);
+            },
+            onCheck: (v: CheckKeys, e) => {
+                let currentValue = toRaw( state.checkedKeys ) as KeyType[]
+
+                if ( isArray( currentValue ) && searchState.startSearch ) {
+                    const { key } = unref(getFieldNames)
+
+                    currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]))
+
+                    if (e.checked) {
+                        currentValue.push(e.node.$attrs.node[key]);
+                    }
+
+                    state.checkedKeys = currentValue
+                } else {
+                    state.checkedKeys = v;
+                }
+
+                const rawVal = toRaw(state.checkedKeys)
+
+                emit('update:value', rawVal)
+                emit('check', rawVal, e)
+            }
+        }
+
+        return omit(propsData, 'treeData', 'class')
+    })
+
+    // 设置节点点击事件
+    function handleClickNode(key: string, children: TreeItem[], node: TreeItem) {
+        emit('clickNode', node)
+        
+        if (!props.clickRowToExpand || !children || children.length === 0) return
+
+        if (!state.expandedKeys.includes(key)) {
+            setExpandedKeys([...state.expandedKeys, key])
+        } else {
+            const keys = [...state.expandedKeys]
+            const index = keys.findIndex((item) => item === key)
+            if (index !== -1) {
+                keys.splice(index, 1);
+            }
+
+            setExpandedKeys(keys)
+        }
+    }
+
+    // 渲染操作栏
+    function renderAction(node: TreeItem) {
+        const { actionList } = props
+        if (!actionList || actionList.length === 0) return
+
+        return actionList.map((item, index) => {
+            let nodeShow = true
+
+            if (isFunction(item.show)) {
+                nodeShow = item.show?.(node);
+            } else if (isBoolean(item.show)) {
+                nodeShow = item.show;
+            }
+
+            if (!nodeShow) return null
+
+            return (
+                <span key={index} class='tree-action'>
+                    { item.render(node) }
+                </span>
+            )
+        })
+
+    }
+
+    const { 
+        deleteNodeByKey,
+        insertNodeByKey,
+        insertNodesByKey,
+        filterByLevel,
+        updateNodeByKey,
+        getAllKeys,
+        getChildrenKeys,
+        getEnabledKeys,
+        getSelectedNode,
+    } = useTree( treeDataRef, getFieldNames )
+
+    // 设置实例暴露的方法
+    function setExpandedKeys(keys: KeyType[]) { state.expandedKeys = keys }
+    function getExpandedKeys() { return state.expandedKeys }
+
+    function setSelectedKeys( keys: KeyType[] ) { state.selectedKeys = keys }
+    function getSelectedKeys() { return state.selectedKeys }
+
+    function setCheckedKeys(keys: CheckKeys) { state.checkedKeys = keys }
+    function getCheckedKeys() { return state.checkedKeys }
+
+    function checkAll(checkAll: boolean) { state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]) }
+    function expandAll(expandAll: boolean) { state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]) }
+
+    function onStrictlyChange(strictly: boolean) { state.checkStrictly = strictly }
+
+    const instance: TreeActionType = {
+        setExpandedKeys,
+        getExpandedKeys,
+        setSelectedKeys,
+        getSelectedKeys,
+        setCheckedKeys,
+        getCheckedKeys,
+        insertNodeByKey,
+        insertNodesByKey,
+        deleteNodeByKey,
+        updateNodeByKey,
+        getSelectedNode,
+        checkAll,
+        expandAll,
+        onStrictlyChange,
+        filterByLevel: (level: number) => {
+            state.expandedKeys = filterByLevel(level);
+        },
+        setSearchValue: (value: string) => {
+            handleSearch(value);
+        },
+        getSearchValue: () => {
+            return searchState.searchText;
+        }
+    }
+
+    function handleSearch(searchValue: string) {
+        if (searchValue !== searchState.searchText) searchState.searchText = searchValue
+        emit('update:searchValue', searchValue)
+
+        if (!searchValue) {
+            searchState.startSearch = false
+            return
+        }
+
+        const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } = unref(props)
+        const { title: titleField, key: keyField } = unref(getFieldNames)
+        const matchedKeys: string[] = []
+
+        searchState.startSearch = true
+
+        searchState.searchData = filter(
+            unref(treeDataRef),
+            (node) => {
+                const result = filterFn
+                    ? filterFn(searchValue, node, unref(getFieldNames))
+                    : node[titleField]?.includes(searchValue) ?? false
+
+                if (result) {
+                    matchedKeys.push(node[keyField]);
+                }
+
+                return result;
+            },
+            unref(getFieldNames),
+        )
+
+        if (expandOnSearch) {
+            const expandKeys = treeToList(searchState.searchData).map((val) => {
+                return val[keyField]
+            })
+
+            if (expandKeys && expandKeys.length) {
+                setExpandedKeys(expandKeys)
+            }
+        }
+
+        if (checkOnSearch && checkable && matchedKeys.length) {
+            setCheckedKeys(matchedKeys)
+        }
+
+        if (selectedOnSearch && matchedKeys.length) {
+            setSelectedKeys(matchedKeys)
+        }
+    }
+
+    watch(
+        () => props.searchValue,
+        (val) => {
+            if (val !== searchState.searchText) {
+                searchState.searchText = val
+            }
+        },
+        { immediate: true }
+    )
+
+    watch(
+        () => props.treeData,
+        (val) => {
+            if (val) {
+                handleSearch(searchState.searchText)
+            }
+        }
+    )
+
+    watch(
+        () => props.value,
+        () => {
+            state.checkedKeys = toRaw(props.value || [])
+        },
+        { immediate: true }
+    )
+
+    watch(
+        () => state.checkedKeys,
+        () => {
+          const v = toRaw(state.checkedKeys)
+          emit('update:value', v)
+          emit('change', v)
+        }
+    )
+
+    watchEffect(() => { treeDataRef.value = props.treeData as TreeItem[] })
+    watchEffect(() => { state.expandedKeys = props.expandedKeys })
+    watchEffect(() => { state.selectedKeys = props.selectedKeys })
+    watchEffect(() => { state.checkedKeys = props.checkedKeys })
+    watchEffect(() => { state.checkStrictly = props.checkStrictly })
+
+    defineExpose(instance)
+
+</script>