@dt-frames/ui 1.0.1 → 1.0.4

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

@@ -0,0 +1,319 @@
+import type { PaginationProps } from 'ant-design-vue/lib/pagination'
+import { computed, ComputedRef, Ref, ref, unref, toRaw, watch, h } from "vue";
+import { cloneDeep, isEqual } from 'lodash-es'
+import { BasicColumn, BasicTableProps, CellFormat } from "../types/table.type";
+import { SetColumnsParams } from '../types/tableHeader.type';
+import { isArray, isBoolean, isFunction, isObject, isString, Recordable, useAppStore, getDictValueByCode } from '@dt-frames/core';
+import TableAction from '../components/TableActions.vue'
+
+// 索引列及操作列标识
+const INDEX_FLAG = 'INDEX'
+const ACTION_COLUMN = 'ACTION'
+
+// 处理单条数据的ellipsis 对齐方式
+function handleItem(item: BasicColumn, ellipsis: boolean) {
+    const { appConf } = useAppStore();
+    const { align } = appConf.ui.table
+
+    const { key, dataIndex, children } = item
+    item.align = item.align || align
+
+    if( ellipsis ) {
+        if (!key) item.key = dataIndex && dataIndex.toString()
+
+        if (!isBoolean(item.ellipsis)) {
+            item = Object.assign(item, {
+                ellipsis,
+            })
+        }
+    }
+
+    if (children && children.length) {
+        handleChildren(children, !!ellipsis);
+    }
+}
+
+function handleChildren(children: BasicColumn[] | undefined, ellipsis: boolean) {
+    if (!children) return
+
+    children.forEach((item) => {
+        const { children } = item
+        handleItem(item, ellipsis)
+        handleChildren(children, ellipsis)
+    })
+}
+
+// 重新排序列
+function sortFixedColumn(columns: BasicColumn[]) {
+    const fixedLeftColumn: BasicColumn[] = []
+    const fixedRightColumn: BasicColumn[] = []
+    const defaultColumn: BasicColumn[] = []
+
+    for( let column of columns ) {
+        if( column.defaultHidden ) continue
+
+        if( column.fixed === 'left' ) {
+            fixedLeftColumn.push( column )
+            continue
+        }
+
+        if( column.fixed === 'right' ) {
+            fixedRightColumn.push( column )
+            continue
+        }
+
+        defaultColumn.push( column )
+    }
+
+    return [
+        ...fixedLeftColumn,
+        ...defaultColumn,
+        ...fixedRightColumn
+    ]
+}
+
+// 处理序号
+function handleIndexColumn(
+    propsRef: ComputedRef<BasicTableProps>,
+    getPaginationRef: ComputedRef<boolean | PaginationProps>,
+    columns: BasicColumn[]
+) {
+    const { showIndexColumn, indexColumnProps, isTreeTable } = unref(propsRef)
+
+    let pushIndexColumns = false
+    if (unref(isTreeTable)) {
+        return;
+    }
+
+    columns.forEach(() => {
+        const indIndex = columns.findIndex((column) => column.flag === INDEX_FLAG);
+        if (showIndexColumn) {
+            pushIndexColumns = indIndex === -1;
+        } else if (!showIndexColumn && indIndex !== -1) {
+            columns.splice(indIndex, 1);
+        }
+    })
+
+    if (!pushIndexColumns) return
+
+    const isFixedLeft = columns.some((item) => item.fixed === 'left')
+
+    columns.unshift({
+        flag: INDEX_FLAG,
+        width: 50,
+        title: '序号',
+        align: 'center',
+        customRender: ( { index } ) => {
+            const getPagination = unref(getPaginationRef)
+
+            const { appConf } = useAppStore()
+            const { defaultPageSize } = appConf.ui.table
+
+            if (isBoolean(getPagination)) {
+                return `${index + 1}`;
+            }
+
+            const { current = 1, pageSize = defaultPageSize } = getPagination;
+            return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1
+        },
+        ...(isFixedLeft
+            ? {
+                fixed: 'left',
+              }
+            : {}),
+        ...indexColumnProps,
+    })
+}
+
+// 处理操作栏的列
+function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
+    const { operations } = unref(propsRef)
+
+    if (
+        !operations
+        || (isObject( operations ) && !operations?.btns )
+        || ( isArray(operations) && !operations )
+    ) return
+
+    const hasIndex = columns.findIndex((column) => column.flag === ACTION_COLUMN)
+    
+    if( hasIndex === -1 ) {
+        let column = isObject( operations ) ? operations
+            : isArray( operations ) ? { btns: operations } : {}
+
+        let expand = column.expand ? column.expand : false
+        let columnObj = {
+            fixed: 'right',
+            title: '操作',
+            align: 'center',
+            expand,
+            width: (expand ? (column.btns.length * 30 + 40) : 70) + 'px',
+            ...column,
+            flag: ACTION_COLUMN,
+        }
+
+        columns.push({
+            ...(columnObj as any),
+            customRender: ({ record, index}) => {
+                return h(
+                    TableAction as any,
+                    {
+                        ...columnObj,
+                        record,
+                        align: null,
+                        index
+                    }
+                )
+            }
+        })
+    }
+}
+
+
+export function useColumns(
+    propsRef: ComputedRef<BasicTableProps>,
+    getPaginationRef: ComputedRef<boolean | PaginationProps>,
+) {
+    
+    const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>
+    let cacheColumns = unref(propsRef).columns
+
+    const getColumnsRef = computed(() => {
+        const columns = cloneDeep(unref(columnsRef)) as BasicColumn[]
+        if (!columns) return []
+
+        const { ellipsis, resizable, minWidth = 50, maxWidth = 700 } = unref(propsRef)
+
+        columns.forEach( (it, index) => {
+            const { slots } = it
+            it.width = it.width || (index === columns.length - 1 ? 119.9 : 120)
+            if( Reflect.has(it, 'resizable') ? !!it.resizable : resizable ) {
+                it.resizable = true
+                it.minWidth = it.minWidth || minWidth 
+                it.maxWidth = it.maxWidth || maxWidth
+            }
+            
+            handleItem( 
+                it,
+                Reflect.has(it, 'ellipsis') ? !!it.ellipsis : !!ellipsis && !slots
+            )
+        } )
+
+        handleIndexColumn(propsRef, getPaginationRef, columns)
+        handleActionColumn(propsRef, columns)
+
+        return columns
+    })
+
+    const getViewColumns = computed(() => {
+        const viewColumns = sortFixedColumn(unref(getColumnsRef))
+        const columns: BasicColumn[] = cloneDeep(viewColumns)
+
+        return columns
+            .filter( column => isIfShow(column) )
+
+    })
+
+    function isIfShow( column: BasicColumn ): boolean {
+        const ifShow = column.ifShow
+
+        return isBoolean(ifShow) 
+            ? ifShow
+            : isFunction(ifShow) ? ifShow(column) : true
+
+    }
+
+    watch(
+        () => unref(propsRef).columns,
+        columns => {
+            columnsRef.value = columns
+            cacheColumns = columns.filter( it => !it.flag ) ?? []
+        }
+    )
+
+
+    // 获取列信息
+    function getColumns(opt?: SetColumnsParams) {
+        const { ignoreIndex, ignoreAction, sort } = opt || {}
+
+        let columns = toRaw(unref(getColumnsRef))
+
+        if( ignoreIndex ) {
+            columns = columns.filter( it => it.flag !== INDEX_FLAG )
+        }
+
+        if( ignoreAction ) {
+            columns = columns.filter( it => it.flag !== ACTION_COLUMN )
+        }
+
+        // 重新排序
+        if( sort ) {
+            columns = sortFixedColumn( columns )
+        }
+
+        return columns
+    }
+
+
+    // 设置列信息
+    function setColumns(columnList: Partial<BasicColumn>[] | string[]) {
+        const columns = cloneDeep(columnList)
+
+        if( !isArray( columns ) ) return
+
+        // 重置所有的列
+        if( !columns.length ) {
+            columnsRef.value = []
+            return
+        }
+
+        const cacheKeys = cacheColumns.map((item) => item.dataIndex)
+
+        if( !isString( columns[0] ) ) {
+            columnsRef.value = columns as BasicColumn[]
+        } else {
+            const columnKeys = columns as string[]
+            const newColumns: BasicColumn[] = []
+
+            cacheColumns.forEach( it => {
+                newColumns.push({
+                    ...it,
+                    defaultHidden: !columnKeys.includes((it.dataIndex! || it.key) as string),
+                })
+            } )
+
+            
+            if( !isEqual(cacheKeys, columns) ) {
+                newColumns.sort((prev, next) => {
+                    return columnKeys.indexOf(prev.dataIndex as string) - columnKeys.indexOf(next.dataIndex as string)
+                })
+            }
+
+            columnsRef.value = newColumns
+        }
+    }
+
+    function setCacheColumnsByField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
+        if (!dataIndex || !value) return
+
+        cacheColumns.forEach((item) => {
+            if (item.dataIndex === dataIndex) {
+                Object.assign(item, value);
+                return;
+            }
+        })
+    }
+
+    function getCacheColumns() {
+        return cacheColumns;
+    }
+
+    return {
+        getViewColumns,
+        getColumnsRef,
+        getColumns,
+        setColumns,
+        setCacheColumnsByField,
+        getCacheColumns
+    }
+}

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

@@ -0,0 +1,99 @@
+import { ComputedRef, ref, Ref, unref, toRaw, watch, computed, onMounted } from "vue"
+import type { PaginationProps } from 'ant-design-vue/lib/pagination'
+import { BasicTableProps, SorterResult } from "../types/table.type"
+import { isFunction, Recordable, useAppStore, useTimeoutFn } from "@dt-frames/core"
+
+/**
+ * 处理表格数据
+ */
+type ActionsType = {
+    getPaginationInfo: ComputedRef<boolean | PaginationProps>
+    setPagination: (info: Partial<PaginationProps>) => void
+    clearSelectedRowKeys: () => void
+}
+
+export function useDataSource(
+    propsRef: ComputedRef<BasicTableProps>,
+    {
+        getPaginationInfo,
+        setPagination,
+        clearSelectedRowKeys,
+    }: ActionsType,
+    emit
+) {
+    // 拷贝一份表格数据 然后再做数据处理
+    const dataSourceRef = ref<Recordable[]>([])
+
+    watch(
+        () => unref(propsRef).dataSource,
+        (dataSource) => {
+            dataSource && (dataSourceRef.value = dataSource)
+        },
+        {
+            immediate: true
+        }
+    )
+
+    const getDataSourceRef = computed( () => {
+        return unref(dataSourceRef)
+    } )
+
+    // 表单改变事件
+    function handleTableChange(
+        pagination: PaginationProps,
+        filters: Partial<Recordable<string[]>>,
+        sorter: SorterResult,
+    ) {
+        const { sortFn, filterFn, onTableChange } = unref( propsRef )
+        const { appConf } = useAppStore()
+        const { current = 1, pageSize = appConf.ui.table.defaultPageSize  } = pagination
+
+        // clearSelectedRowKeys()
+
+        setPagination( pagination )
+
+        const params: Recordable = {}
+
+        if( sorter && isFunction(sortFn) ) {
+            params.sortInfo = sortFn(sorter)
+        }
+
+        if (filters && isFunction(filterFn)) {
+            params.filterInfo = filterFn( filters )
+        }
+
+
+        return onTableChange({
+            pagination: {
+                current,
+                pageSize 
+            },
+            sort: unref( params.sortInfo ),
+            filter: toRaw(unref( params.filterInfo )),
+            showBtnLoading: false
+        })
+    }
+
+
+    onMounted(() => {
+        const { defSort, onTableChange } = unref( propsRef )
+        const { appConf } = useAppStore()
+
+        onTableChange({
+            pagination: {
+                current: 1,
+                pageSize: appConf.ui.table.defaultPageSize
+            },
+            sort:defSort,
+            filter: null,
+            showBtnLoading: false
+        }, false)
+    })
+
+
+    return {
+        getDataSourceRef,
+        handleTableChange
+    }
+
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 设置表格的loading状态
+ * 这里做二次封装 主要原因是暴露一个方法  外面可以调用这个方法 从而改变loading状态
+ */
+
+import { ComputedRef, ref, unref, watch, computed } from "vue"
+import { BasicTableProps } from "../types/table.type"
+
+export function useLoading(props: ComputedRef<BasicTableProps>) {
+    const loadingRef = ref( unref(props).loading )
+
+    watch(
+        () => unref(props).loading,
+        (v) => {
+            loadingRef.value = v
+        }
+    )
+
+    const getLoading = computed(() => unref(loadingRef))
+
+    function setLoading( loading: boolean ) {
+        loadingRef.value = loading
+    }
+
+    return {
+        getLoading,
+        setLoading
+    }
+}

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

@@ -0,0 +1,76 @@
+import { computed, ComputedRef, ref, unref, watch } from "vue"
+import type { PaginationProps } from 'ant-design-vue/lib/pagination'
+import { BasicTableProps } from "../types/table.type"
+import { isBoolean, useAppStore } from "@dt-frames/core"
+
+
+export function usePagination(props: ComputedRef<BasicTableProps>) {
+    const paginationRef = ref<PaginationProps>({})
+    const show = ref(true)
+
+    watch(
+        () => unref(props).pagination,
+        (pagination) => {
+            if( !isBoolean(pagination) && pagination ) {
+                paginationRef.value = {
+                    ...unref(paginationRef),
+                    ...(pagination ?? {})
+                }
+            }
+        }
+    )
+
+    // 获取分页数据
+    const getPaginationInfo = computed((): PaginationProps | boolean => {
+        const { pagination } = unref( props )
+
+        if( !unref(show) || isBoolean( pagination ) && !pagination ) {
+            return false
+        }
+
+        const { appConf } = useAppStore()
+        const { defaultPageSize, pageSizeOptions, size } = appConf.ui.table
+
+        return {
+            current: 1,
+            pageSize: defaultPageSize,
+            size: size === 'small' ? 'small' : 'default',
+            defaultPageSize,
+            showTotal: (total, range) => `总共${ total }页`,
+            showSizeChanger: true,
+            pageSizeOptions,
+            showQuickJumper: true,
+            ...(isBoolean(pagination) ? {} : pagination),
+            ...unref(paginationRef),
+        }
+    })
+
+    function setPagination(info: Partial<PaginationProps>) {
+        const paginationInfo = unref( getPaginationInfo )
+
+        paginationRef.value = {
+            ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+            ...info
+        }
+    }
+
+    function getPagination() {
+        return unref( getPaginationInfo )
+    }
+
+    function getShowPagination() {
+        return unref(show);
+      }
+    
+      async function setShowPagination(flag: boolean) {
+        show.value = flag;
+      }
+
+    return {
+        getPaginationInfo,
+        setPagination,
+        getPagination,
+        getShowPagination,
+        setShowPagination
+    }
+}

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