@dt-frames/ui 1.0.2 → 1.0.5

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/useHeaderCode.ts

@@ -0,0 +1,82 @@
+import { error, http, Recordable, useAppStore } from "@dt-frames/core"
+import { BasicColumn, CellFormat } from "../types/table.type"
+
+
+// 解析header
+export function useHeaderCode(code: string, templates: CellFormat = {}, changeColumns: ( rows: BasicColumn[] ) => void) {
+    const { appConf } = useAppStore()
+
+    if( !appConf.pages.queryColumnApi ) {
+        error('请在init.config.ts中配置queryColumnApi！')
+        return
+    }
+
+
+    // 设置文字对齐方式
+    const getAlign = ( key: number | null ) => key === 0 ? 'center' : key === 2 ? 'right' : 'left'
+    
+
+    // 渲染单元格
+    const renderCell = ( type: number, ctx: string ): Recordable => {
+        switch( type ) {
+            // 时间
+            case 0: return { date: ctx }
+
+            // 字典
+            case 1: return { dict: ctx }
+
+            // 百分比
+            case 5: return { percent: ctx }
+
+            // structure
+            case 7: 
+                if( !appConf.structure[ctx] ) {
+                    error(`未找到structure: ${ ctx } !`)
+                    return { }
+                }
+                return { dict: appConf.structure[ctx] }
+            
+            // 自定义模板
+            case 10: return templates[ctx]
+
+            // 数字
+            case 11: return { number: ctx }
+        }
+    }
+
+
+    function getColumns() {
+        http.post(
+            appConf.pages.queryColumnApi,
+            { tableCode: code }
+        ).then( rsp => {
+            handleData(rsp)
+        } )
+    }
+
+    function handleData(data: Recordable[]) {
+        let rows: BasicColumn[] = []
+
+        data.forEach( it => {
+            let obj: BasicColumn = {
+                title: it.cloumnName,
+                dataIndex: it.cloumnCode,
+                sorter: it.ifOrder,
+                align: getAlign(it.textAlign),
+                ifShow: Boolean( it.ifDisplay ),
+                defaultHidden: !Boolean( it.ifDisplay )
+            }
+
+            if( it.cloumnType !== undefined ) obj.render = renderCell( it.cloumnType, it.dictCode )
+
+            if( it.width ) obj.width = Number(it.width)
+
+            rows.push(obj)
+        } )
+
+        changeColumns( rows )
+    }
+
+    getColumns()
+
+}

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