@dt-frames/ui 1.0.7 → 1.0.10

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>

package/src/components/tree/src/props.ts

@@ -0,0 +1,133 @@
+import { Recordable } from "@dt-frames/core";
+import { TreeDataItem } from "ant-design-vue/lib/tree";
+import { PropType } from "vue";
+import { CheckKeys, ContextMenuItem, FieldNames, TreeActionItem, TreeItem } from "./type/tree"
+
+export const BasicProps = {
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    // 粘性选择
+    checkStrictly: Boolean,
+    // 展开的key值
+    expandedKeys: {
+        type: Array as PropType<KeyType[]>,
+        default: () => []
+    },
+    // 设置选中的key
+    selectedKeys: {
+        type: Array as PropType<KeyType[]>,
+        default: () => []
+    },
+    // 选中的节点
+    checkedKeys: {
+        type: Array as PropType<CheckKeys>,
+        default: () => []
+    },
+
+    // 定义树节点的lable title children 名称
+    fieldNames: {
+        type: Object as PropType<FieldNames>,
+    },
+
+    beforeRightClick: {
+        type: Function as PropType<(...arg: any) => ContextMenuItem[]>,
+        default: undefined,
+    },
+    
+    rightMenuList: {
+        type: Array as PropType<ContextMenuItem[]>,
+    },
+
+    // 
+    renderIcon: {
+        type: Function as PropType<(params: Recordable) => string>,
+    },
+
+    // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
+    highlight: {
+        type: [Boolean, String] as PropType<Boolean | String>,
+        default: false,
+    },
+
+    actionList: {
+        type: Array as PropType<TreeActionItem[]>,
+        default: () => [],
+    },
+
+    clickRowToExpand: {
+        type: Boolean,
+        default: false,
+    },
+
+    searchValue: {
+        type: String,
+        default: ''
+    },
+
+    filterFn: {
+        type: Function as PropType< (searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean >,
+        default: undefined,
+    },
+
+    checkable: Boolean,
+
+    // 搜索完成时自动展开结果
+    expandOnSearch: Boolean,
+
+    // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
+    checkOnSearch: Boolean,
+
+    // 搜索完成自动select所有结果
+    selectedOnSearch: Boolean,
+
+    // 树数据
+    treeData: {
+        type: Array as PropType<TreeDataItem[]>
+    },
+
+    value: {
+        type: [Object, Array] as PropType<KeyType[] | CheckKeys>
+    },
+
+    title: {
+        type: String,
+        default: '',
+    },
+
+    toolbar: Boolean,
+    search: Boolean,
+
+}
+
+export const searchProps = {
+    title: {
+        type: String,
+        default: '',
+    },
+    toolbar: {
+        type: Boolean,
+        default: false,
+    },
+    checkable: {
+        type: Boolean,
+        default: false,
+    },
+    search: {
+        type: Boolean,
+        default: false,
+    },
+    searchText: {
+        type: String,
+        default: '',
+    },
+    checkAll: {
+        type: Function,
+        default: undefined,
+    },
+    expandAll: {
+        type: Function,
+        default: undefined,
+    },
+}

package/src/components/tree/src/type/tree.ts

@@ -0,0 +1,105 @@
+import { Recordable } from "@dt-frames/core";
+import { Fn } from "@vueuse/core"
+import { TreeDataItem } from "ant-design-vue/lib/tree"
+
+
+export enum ToolbarEnum {
+    SELECT_ALL,
+    UN_SELECT_ALL,
+    EXPAND_ALL,
+    UN_EXPAND_ALL,
+    CHECK_STRICTLY,
+    CHECK_UN_STRICTLY,
+}
+
+export type KeyType = string | number
+
+export type CheckKeys =
+  | KeyType[]
+  | { 
+        checked: string[] | number[]; 
+        halfChecked: string[] | number[] 
+    }
+
+export interface TreeState {
+    expandedKeys: KeyType[]
+    selectedKeys: KeyType[]
+    checkedKeys: CheckKeys
+    checkStrictly: boolean
+}
+
+export interface FieldNames {
+    children?: string
+    title?: string
+    key?: string
+}
+
+export interface TreeItem extends TreeDataItem {
+    icon?: any
+}
+
+export interface CreateContextOptions {
+    event: MouseEvent
+    icon?: string
+    styles?: any
+    items?: ContextMenuItem[]
+}
+
+export interface InsertNodeParams {
+    parentKey: string | null
+    node: TreeDataItem
+    list?: TreeDataItem[]
+    push?: 'push' | 'unshift'
+}
+
+export interface ContextMenuItem {
+    label: string
+    icon?: string
+    hidden?: boolean
+    disabled?: boolean
+    handler?: Fn
+    divider?: boolean
+    children?: ContextMenuItem[]
+}
+
+export interface TreeActionItem {
+    render: (record: Recordable) => any
+    show?: boolean | ((record: Recordable) => boolean)
+}
+
+export interface InsertNodeParams {
+    parentKey: string | null
+    node: TreeDataItem
+    list?: TreeDataItem[]
+    push?: 'push' | 'unshift'
+}
+
+export interface TreeHelperConfig {
+    id: string;
+    children: string;
+    pid: string;
+}
+
+export interface TreeActionType {
+    checkAll: (checkAll: boolean) => void
+    expandAll: (expandAll: boolean) => void
+    setExpandedKeys: (keys: KeyType[]) => void
+    getExpandedKeys: () => KeyType[]
+    setSelectedKeys: (keys: KeyType[]) => void
+    getSelectedKeys: () => KeyType[]
+    setCheckedKeys: (keys: CheckKeys) => void
+    getCheckedKeys: () => CheckKeys
+    filterByLevel: (level: number) => void
+    insertNodeByKey: (opt: InsertNodeParams) => void
+    insertNodesByKey: (opt: InsertNodeParams) => void
+    deleteNodeByKey: (key: string) => void
+    updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void
+    setSearchValue: (value: string) => void
+    getSearchValue: () => string
+    onStrictlyChange: ( strictly: boolean ) => void
+    getSelectedNode: (
+        key: KeyType,
+        treeList?: TreeItem[],
+        selectNode?: TreeItem | null,
+    ) => TreeItem | null
+}

package/src/components/tree/src/utils/tree.ts

@@ -0,0 +1,73 @@
+import { TreeHelperConfig } from "../type/tree"
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树数据
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export function eachTree(treeDatas: any[], callBack: Function, parentNode = {}) {
+    treeDatas.forEach( el => {
+        const newNode = callBack(el, parentNode) || el
+
+        if (el.children) {
+            eachTree( el.children, callBack, newNode )
+        }
+    } )
+}
+
+
+// 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+export function forEach<T = any>(
+    tree: T[],
+    func: (n: T) => any,
+    config: Partial<TreeHelperConfig> = {},
+): void {
+    const list: any[] = [...tree]
+    const { children = 'children' } = config
+
+    for (let i = 0; i < list.length; i++) {
+        if (func(list[i])) {
+            return
+        }
+        children && list[i][children] && list.splice(i + 1, 0, ...list[i][children])
+    }
+}
+
+export function filter<T = any>(
+    tree: T[],
+    func: (n: T) => boolean,
+    config: Partial<TreeHelperConfig> = {},
+): T[] {
+    // 获取配置
+    const children = config.children as string || 'children';
+  
+    function listFilter(list: T[]) {
+        return list
+            .map((node: any) => ({ ...node }))
+            .filter((node) => {
+
+                // 递归调用 对含有children项  进行再次调用自身函数 listFilter
+                node[children] = node[children] && listFilter(node[children]);
+
+                // 执行传入的回调 func 进行过滤
+                return func(node) || (node[children] && node[children].length);
+            });
+    }
+  
+    return listFilter(tree);
+}
+
+export function treeToList<T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T {
+    const { children = 'children' } = config
+
+    const result: any = [...tree]
+
+    for (let i = 0; i < result.length; i++) {
+        if (!result[i][children!]) continue
+        result.splice(i + 1, 0, ...result[i][children!])
+    }
+
+    return result
+}
+