@dt-frames/ui 1.0.2 → 1.0.3

package/src/components/table/src/hooks/useRowSelection.ts

@@ -0,0 +1,146 @@
+/**
+ * 处理表格选中事件
+ */
+
+import { isFunction, Recordable } from "@dt-frames/core";
+import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
+import { computed, ComputedRef, ref, Ref, toRaw, unref, watch, nextTick } from "vue";
+import { BasicTableProps } from "../types/table.type";
+import { omit } from 'lodash-es'
+
+interface TreeHelperConfig {
+    id: string;
+    children: string;
+    pid: string;
+}
+
+const DEFAULT_CONFIG: TreeHelperConfig = {
+    id: 'id',
+    children: 'children',
+    pid: 'pid',
+}
+
+export function useRowSelection(
+    propsRef: ComputedRef<BasicTableProps>,
+    emit
+) {
+    // 选中的节点 不包含子节点
+    const selectedRowKeysRef = ref<string[]>([])
+    // 选中的节点 包含子节点
+    const selectedRowRef = ref<Recordable[]>([])
+
+    // 获取选中的行数据
+    const getRowSelectionRef = computed((): TableRowSelection | null => {
+        const { rowSelection } = unref(propsRef)
+
+        if (!rowSelection) {
+            return null;
+        }
+
+        return {
+            ...rowSelection,
+            selectedRowKeys: toRaw(unref(selectedRowKeysRef)),
+            onChange: (selectedRowKeys: string[]) => {
+                setSelectedRowKeys(selectedRowKeys)
+            },
+        }
+    })
+
+    watch(
+        () => unref(propsRef).rowSelection?.selectedRowKeys,
+        (v: string[]) => {
+            setSelectedRowKeys(v);
+        },
+    )
+
+    watch(
+        () => unref(selectedRowKeysRef),
+        () => {
+            nextTick(() => {
+                const { rowSelection } = unref(propsRef)
+
+                if (rowSelection){
+                    const { onChange } = rowSelection
+                    if (onChange && isFunction(onChange)) onChange(getSelectRowKeys(), getSelectRows())
+                }
+
+                emit('selection-change', {
+                    keys: getSelectRowKeys(),
+                    rows: getSelectRows(),
+                })
+            })
+        },
+        { deep: true }
+    )
+
+    // 设置树节点的选中
+    function findeNodeAll(
+        tree: any,
+        func: Function,
+        config: Partial<TreeHelperConfig> = {}
+    ) {
+        config = Object.assign({}, DEFAULT_CONFIG, config)
+        const { children } = config
+
+        const result: any[] = []
+        const list = [...tree]
+
+        for (const node of list) {
+            func(node) && result.push(node);
+            node.children && list.push(...node.children);
+        }
+
+        return result
+    }
+
+    // 设置选中的key
+    function setSelectedRowKeys( rowKeys: string[] ) {
+        selectedRowKeysRef.value = rowKeys
+
+        const allSelectedRows = findeNodeAll(
+            toRaw(unref(propsRef).dataSource).concat(toRaw(unref(selectedRowRef))),
+            (item) => rowKeys.includes(item[ unref( propsRef ).rowKey]),
+            {
+                children: propsRef.value.childrenColumnName ?? 'children',
+            },
+        )
+
+        const trueSelectedRows: any[] = []
+
+        rowKeys.forEach( (key: string) => {
+            const found = allSelectedRows.find((item) => item[ unref( propsRef ).rowKey] === key)
+            found && trueSelectedRows.push(found)
+        } )
+
+        selectedRowRef.value = trueSelectedRows
+    }
+    
+
+    // 清除所有的选中数据
+    function clearSelectedRowKeys() {
+        selectedRowKeysRef.value = []
+        selectedRowRef.value = []
+    }
+
+    // 获取选中的行数据
+    function getRowSelection() {
+        return unref( getRowSelectionRef )
+    }
+
+    function getSelectRowKeys() {
+        return unref(selectedRowKeysRef);
+    }
+
+    function getSelectRows() {
+        return unref(selectedRowRef)
+    }
+
+    return {
+        getRowSelectionRef,
+        clearSelectedRowKeys,
+        getRowSelection,
+        getSelectRowKeys,
+        getSelectRows,
+        setSelectedRowKeys
+    }
+}

package/src/components/table/src/hooks/useRows.ts

@@ -0,0 +1,30 @@
+import { isFunction } from "@dt-frames/core";
+import { ComputedRef, unref } from "vue";
+import { BasicTableProps } from "../types/table.type";
+
+
+export function useRows(propsRef: ComputedRef<BasicTableProps>) {
+    /**
+     * 获取行的class
+    */
+    function getRowClassName(record: any, index: number) {
+
+        const { striped, rowClassName } = unref(propsRef)
+        const classNames: string[] = []
+
+        if( striped ) {
+            classNames.push( index % 2 === 1 ? 'table-striped' : '' )
+        }
+
+        if( rowClassName && isFunction(rowClassName) ) {
+            classNames.push( rowClassName( record, index ) )
+        }
+
+        return classNames.join(' ')
+    }
+
+    return {
+        getRowClassName
+    }
+
+}

package/src/components/table/src/hooks/useTable.ts

@@ -0,0 +1,77 @@
+import { DynamicProps, Nullable, getDynamicProps, error } from '@dt-frames/core'
+import { onUnmounted, ref, toRaw, unref, watch } from 'vue'
+import { BasicColumn, BasicTableProps, TableActionType } from '../types/table.type'
+
+
+type Props = Partial<DynamicProps<BasicTableProps>>
+
+export function useTable(tableProps?: Props) {
+    const tableRef = ref<Nullable<TableActionType>>(null)
+    const loadedRef = ref<Nullable<boolean>>(false)
+
+    function registerTable( instance: TableActionType ) {
+        onUnmounted(() => {
+            tableRef.value = null;
+            loadedRef.value = null;
+        })
+
+        if( unref(loadedRef) && instance === unref(tableRef) ) return
+
+        tableRef.value = instance
+        tableProps && instance.setProps(getDynamicProps(tableProps))
+
+        watch(
+            () => tableProps,
+            () => {
+                tableProps && instance.setProps(getDynamicProps(tableProps));
+            },
+            {
+                immediate: true,
+                deep: true,
+            },
+        )
+        
+    }
+
+    function getTableInstance(): TableActionType {
+        const table = unref(tableRef);
+        if (!table) {
+            error('没有table表单实例');
+        }
+
+        return table as TableActionType;
+    }
+
+    const methods: TableActionType = {
+        setProps: (props: Partial<BasicTableProps>) => {
+            getTableInstance().setProps(props);
+        },
+        setLoading: (loading: boolean) => {
+            getTableInstance().setLoading( loading )
+        },
+        getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
+            const columns = getTableInstance().getColumns({ ignoreIndex }) || []
+            return toRaw(columns);
+        },
+        setColumns: (columns: BasicColumn[]) => {
+            getTableInstance().setColumns(columns)
+        },
+        getRowSelection: () => {
+            return toRaw(getTableInstance().getRowSelection())
+        },
+        getCacheColumns: () => {
+            return toRaw(getTableInstance().getCacheColumns())
+        },
+        getSize: () => {
+            return toRaw(getTableInstance().getSize())
+        },
+        getSelectRowKeys: () => {
+            return getTableInstance().getSelectRowKeys()
+        },
+        getSelectRows: () => {
+            return getTableInstance().getSelectRows()
+        }
+    }
+
+    return [registerTable as any, methods]
+}

package/src/components/table/src/hooks/useTableHeader.ts

@@ -0,0 +1,48 @@
+import { Recordable, useSlots } from "@dt-frames/core"
+import { computed, ComputedRef, h, Slots, unref } from "vue"
+import TableHeader from '../components/TableHeader.vue'
+import { BasicTableProps, ColumnChangeParam } from "../types/table.type";
+
+export function useTableHeader(
+    propsRef: ComputedRef<BasicTableProps>,
+    slots: Slots,
+    handlers: { onColumnsChange: (data: ColumnChangeParam[]) => void }
+) {
+    const getHeaderProps = computed((): Recordable => {
+        const { tableSetting, toolbar } = unref(propsRef)
+
+        const { getSlot } = useSlots()
+        const hideTitle = !slots.toolbar && !slots.headerTop && (!tableSetting || !tableSetting.length)
+
+        return {
+            title: hideTitle 
+                ? null
+                : () => 
+                h(
+                    TableHeader,
+                    {
+                        tableSetting,
+                        toolbar,
+                        onColumnsChange: handlers.onColumnsChange
+                    } as Recordable,
+                    {
+                    ...(slots.toolbar
+                        ? {
+                            toolbar: () => getSlot(slots, 'toolbar'),
+                        }
+                        : {}),
+                    ...(slots.headerTop
+                        ? {
+                            headerTop: () => getSlot(slots, 'headerTop'),
+                        }
+                        : {}),
+                    },
+                )
+        }
+
+    })
+
+    return {
+        getHeaderProps
+    }
+}

package/src/components/table/src/hooks/useTableInstance.ts

@@ -0,0 +1,29 @@
+/** ======================================
+ *  保存table实例对象
+ *  ======================================*/
+
+import { Nullable, Recordable } from "@dt-frames/core"
+import { ComputedRef, inject, provide, Ref } from "vue"
+import { BasicTableProps, TableActionType } from "../types/table.type"
+
+
+const tableKey = Symbol('dt-page')
+
+type Instance = TableActionType & {
+    tableElRef: Ref<Nullable<HTMLElement>>
+    getBind: ComputedRef<Recordable>
+}
+
+type RetInstance = Omit<Instance, 'getBind'> & {
+    getBind: ComputedRef<BasicTableProps>
+}
+
+// 创建table实例
+export function createTableInstance(instance: Instance) {
+    provide(tableKey, instance)
+}
+
+// 获取table实例
+export function getTableInstance(): RetInstance {
+    return inject(tableKey) as RetInstance
+}

package/src/components/table/src/hooks/useTableScroll.ts

@@ -0,0 +1,227 @@
+import { isBoolean, windowResizeFn } from "@dt-frames/core"
+import { useDebounceFn } from "@vueuse/core"
+import { ComputedRef, ref, Ref, nextTick, watch, computed, unref, onMounted, h } from "vue"
+import { TABLE_SIZE_HEIGHT } from "../const"
+import { BasicColumn, BasicTableProps, TableRowSelection } from "../types/table.type"
+
+/**
+ * 计算table横向和纵向的滚动条
+ */
+export function useTableScroll(
+    propsRef: ComputedRef<BasicTableProps>,
+    tableElRef: Ref<HTMLDivElement & {$el: any} | null>,
+    columnsRef: ComputedRef<BasicColumn[]>,
+    rowSelectionRef: ComputedRef<TableRowSelection | null>
+) {
+    // 默认表格的高度
+    const tableHeightRef = ref(0)
+    const filterSource = ref([])
+
+    const debounceRedoHeight = useDebounceFn( redoHeight, 100 )
+
+    watch(
+        () => unref(propsRef)?.dataSource?.length,
+        () => {
+            debounceRedoHeight()
+        },
+        {
+            flush: 'post'   // 在dom渲染之后监听
+        }
+    )
+
+    windowResizeFn(calcTableHeight, 280)
+
+    function redoHeight() {
+        nextTick(() => {
+            calcTableHeight()
+        })
+    }
+
+    let footerEl: HTMLElement | null
+    let bodyEl: HTMLElement | null
+
+    function setHeight(height: number) {
+        tableHeightRef.value = height
+    }
+
+    async function calcTableHeight() {
+        const { pagination, virtual } = unref(propsRef)
+
+        const table = unref(tableElRef)
+
+        if( !table ) return
+
+        const tableEl = table?.$el
+
+        if( !bodyEl ) {
+            bodyEl = tableEl.querySelector('.ant-table-body')
+            if( !bodyEl ) return
+        }
+
+        const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight
+        const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth
+
+        if( hasScrollBarY ) {
+            tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.remove('hide-scrollbar-y')
+        } else {
+            !tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.add('hide-scrollbar-y')
+        }
+
+        if (hasScrollBarX) {
+            tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.remove('hide-scrollbar-x')
+        } else {
+            !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x')
+        }
+
+        bodyEl!.style.height = 'unset'
+        if( unref(propsRef).dataSource.length === 0 ) return
+
+        await nextTick()
+
+        let 
+            headerHeight = 0, 
+            paginationHeight = 2, 
+            footerHeight = 0, 
+            titleHeight = (tableEl.querySelector('.ant-table-title') as HTMLElement)?.offsetHeight ?? 0,
+            marginHeight = 15
+
+        const headEl = tableEl.querySelector('.ant-table-thead ')
+        if( headEl ) {
+            headerHeight = (headEl as HTMLElement).offsetHeight
+        }
+
+        if( !isBoolean(pagination) ) {
+            let paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement
+
+            if( paginationEl ) {
+                const offsetHeight = paginationEl.offsetHeight
+                paginationHeight += offsetHeight || 0
+            } else {
+                paginationHeight += 24
+            }
+
+            if( !footerEl ) {
+                footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement
+            } else {
+                const offsetHeight = footerEl.offsetHeight
+                footerHeight += offsetHeight || 0
+            }
+
+        } else {
+            paginationHeight = -8
+        }
+
+        const tableHeight = table?.$el?.offsetHeight ?? 0
+
+        let height = tableHeight - paginationHeight - footerHeight - headerHeight - titleHeight - marginHeight
+        height = Math.max(height, 167)
+
+        setHeight(height)
+        
+        bodyEl!.style.height = `${height}px`
+
+        // 表格虚拟滚动
+        virtual ? calcTableScroll( ) : filterSource.value = unref(propsRef)?.dataSource
+    }
+
+    onMounted(() => {
+        calcTableHeight();
+        nextTick(() => {
+            debounceRedoHeight();
+        });
+    });
+
+    const getScrollX = computed(() => {
+        let width = 0
+
+        // 如果有复选框或者单选框
+        if( unref(rowSelectionRef) ) {
+            width += 32
+        }
+
+        const NORMAL_WIDTH = 120
+
+        const columns = unref(columnsRef).filter((item) => !item.defaultHidden)
+
+        columns.forEach( item => {
+            width += Number.parseInt(item.width as string) || NORMAL_WIDTH
+        } )
+
+        const table = unref(tableElRef)
+        const tableWidth = table?.$el?.offsetWidth ?? 0
+
+        return tableWidth > width ? '100%' : width
+    })
+
+    const getScrollRef = computed(() => {
+        const tableHeight = unref(tableHeightRef)
+        const { scroll } = unref(propsRef)
+
+        return {
+            x: unref(getScrollX),
+            y: tableHeight,
+            scrollToFirstRowOnChange: false,
+            ...scroll,
+        };
+    })
+
+    // 创建滚动元素
+    function createScrollWrap(el: Element) {
+        let data = unref(propsRef)?.dataSource?.length
+        const { size } = unref(propsRef)
+        const rowHeight = TABLE_SIZE_HEIGHT[size]
+
+        let scrollWrap = el.querySelector('.tableScrollWrap')
+        let wrapHeight = data * rowHeight + 'px'
+
+        if( scrollWrap ) {
+            (scrollWrap as any).style.height = wrapHeight
+        } else {
+            let div = document.createElement('div')
+            div.className = 'tableScrollWrap'
+            div.style.height = wrapHeight
+            el.insertBefore(div, el.querySelector('table')[0])
+        }
+    }
+
+    async function calcTableScroll() {
+        const tableEl = unref(tableElRef)?.$el
+        bodyEl = tableEl.querySelector('.ant-table-body')
+
+        // 添加一个滚动div元素
+        createScrollWrap(bodyEl)
+
+        calcScroll(bodyEl)
+
+        bodyEl.addEventListener('scroll', (e) => {
+            calcScroll(bodyEl)
+        })
+    }
+
+    async function calcScroll(el: Element) {
+        const { size } = unref(propsRef)
+        const rowHeight = TABLE_SIZE_HEIGHT[size]
+        const scrollTop = el.scrollTop
+
+        // 留闲高度，默认留3个表格高度
+        const remainCount = 3
+        const remainH = remainCount * rowHeight
+
+        // 最小高度
+        const minItemHeight = scrollTop > remainH ? Math.floor((scrollTop - remainH) / rowHeight) * rowHeight : 0
+
+        // 最小索引
+        const minIndex = minItemHeight / rowHeight
+        // 最大索引
+        const maxIndex = minIndex + Math.ceil(tableHeightRef.value / rowHeight) + (minItemHeight && remainCount) + remainCount * 2
+
+        bodyEl.querySelector('table').style.transform = `translateY(${minItemHeight}px)`
+
+        filterSource.value = unref(propsRef)?.dataSource.slice(minIndex, maxIndex)
+    }
+
+    return {
+        getScrollRef,
+        filterSource
+    }
+}