@dt-frames/ui 1.0.1 → 1.0.4

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
+    }
+}

package/src/components/table/src/index.vue

@@ -0,0 +1,198 @@
+
+
+<template>
+    <Table
+        ref="tableElRef"
+        class="dt-table"
+        v-bind="getBind"
+        :rowClassName="getRowClassName"
+        @change="handleTableChange"
+        @resizeColumn="handleResizeColumn"
+    >
+        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+            <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+
+        <template #bodyCell="{ column, record, index }">
+            <template v-if="column.render">
+                <TableRender :column="column" :record="record" :index="index"></TableRender>
+            </template>
+        </template>
+    </Table>
+</template>
+
+<script lang="ts">
+    import { defineComponent, ref, unref, computed, ExtractPropTypes, toRaw } from "vue"
+    import { Table } from 'ant-design-vue'
+    import { TableProps } from './props'
+    import { BasicTableProps, SizeType, TableActionType } from "./types/table.type"
+    import { useRows } from './hooks/useRows'
+    import { Recordable } from "@dt-frames/core"
+    import { useLoading } from "./hooks/useLoading"
+    import { usePagination } from "./hooks/usePagination"
+    import { useDataSource } from "./hooks/useDataSource"
+    import { useRowSelection } from "./hooks/useRowSelection"
+    import TableHeader from './components/TableHeader.vue'
+    import TableRender from './components/TableRender.vue'
+    import { createTableInstance } from "./hooks/useTableInstance"
+    import { useColumns } from "./hooks/useColumns"
+    import { useTableHeader } from "./hooks/useTableHeader"
+    import { useTableScroll } from "./hooks/useTableScroll"
+
+
+    export default defineComponent({
+        name: 'dt-table',
+        props: TableProps,
+        components: {
+            Table,
+            TableHeader,
+            TableRender
+        },
+        emits: [
+            'register',
+            'columns-change',
+            'selection-change'
+        ],
+        setup(props, { emit, attrs, slots }) {
+            // table实例
+            const tableElRef = ref(null)
+            const tableData = ref<Recordable[]>([])
+
+            // 修改后的props属性
+            const innerPropsRef = ref<BasicTableProps>()
+
+            const getProps = computed(() => {
+                return { ...props, ...unref(innerPropsRef) } as BasicTableProps
+            })
+
+           
+            /**
+             * 重构loading状态
+            */
+            const { getLoading, setLoading } = useLoading( getProps )
+
+
+            /**
+             * 重构分页数据
+             */
+            const { getPaginationInfo, setPagination, getPagination, getShowPagination, setShowPagination } = usePagination( getProps )
+
+            // 关于列的控制
+            const {
+                getViewColumns,
+                getColumnsRef,
+                getColumns,
+                setColumns,
+                setCacheColumnsByField,
+                getCacheColumns
+            } = useColumns(getProps, getPaginationInfo)
+
+            const { 
+                getRowSelectionRef,
+                clearSelectedRowKeys,
+                getRowSelection,
+                getSelectRows,
+                getSelectRowKeys,
+
+            } = useRowSelection(getProps, emit)
+
+            // 关于滚动条的设置
+            const { getScrollRef, filterSource } = useTableScroll(
+                getProps,
+                tableElRef,
+                getColumnsRef,
+                getRowSelectionRef,
+            )
+
+            function setProps(props: Partial<BasicTableProps>) {
+                innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+            }
+
+            const tableAction: TableActionType = {
+                setProps,
+                setLoading,
+                getColumns,
+                setColumns,
+                getRowSelection,
+                setCacheColumnsByField,
+                getCacheColumns,
+                getSelectRows,
+                getSelectRowKeys,
+                getSize: () => {
+                    return unref(getBind).size as SizeType;
+                }
+            }
+
+            const {
+                getRowClassName
+            } = useRows( getProps )
+
+
+            const getBind = computed(() => {
+                return {
+                    ...attrs,
+                    ...unref(getProps),
+                    ...unref(getHeaderProps),
+                    scroll: unref(getScrollRef),
+                    loading: unref( getLoading ),
+                    dataSource: toRaw(unref(filterSource)),
+                    pagination: toRaw(unref(getPaginationInfo)),
+                    rowSelection: unref(getRowSelectionRef),
+                    rowKey: unref(getProps).rowKey,
+                    columns: toRaw(unref(getViewColumns)),
+                    tableLayout: 'fixed'
+                }
+            })
+
+            // 创建实例
+            createTableInstance({ ...tableAction, tableElRef, getBind })
+
+            /**
+             * 处理表格头部内容
+            */
+            const handlers = {
+                onColumnsChange: (data: {
+                    dataIndex: string
+                    fixed: boolean | 'left' | 'right' | undefined
+                    visible: boolean
+                }[]) => {
+                    emit('columns-change', data)
+
+                    unref(getProps).onColumnsChange?.(data)
+                }
+            }
+            const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
+            
+
+            /**
+             * 表格改变
+             */
+            const { 
+                handleTableChange
+            } = useDataSource(
+                getProps,
+                {
+                    getPaginationInfo,
+                    setPagination,
+                    clearSelectedRowKeys
+                },
+                emit
+            )
+
+            emit('register', tableAction)
+
+            return {
+                tableElRef,
+                getBind,
+                getRowClassName,
+                handleTableChange,
+                getSelectRows,
+                handleResizeColumn: (w, col) => {
+                    col.width = w;
+                    setCacheColumnsByField(col.dataIndex, col)
+                }
+            }
+        }
+    })
+</script>
+