@dt-frames/ui 1.0.12 → 1.0.16

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

@@ -1,326 +0,0 @@
-import type { PaginationProps } from 'ant-design-vue/lib/pagination'
-import { computed, ComputedRef, Ref, ref, unref, toRaw, watch, h } from "vue"
-import { cloneDeep, isEqual, omit } from 'lodash-es'
-import { renderEditCell } from '../components/editable'
-import { BasicColumn, BasicTableProps } 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,
-                    omit({
-                        ...columnObj,
-                        record,
-                        index
-                    }, 'align')
-                )
-            }
-        })
-    }
-}
-
-
-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) )
-            .map(column => {
-                if( column.edit ) {
-                    column.customRender = renderEditCell(column)
-                }
-
-                return 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/useCustomRow.ts

@@ -1,86 +0,0 @@
-import { DtEvent, Recordable } from "@dt-frames/core"
-import { ComputedRef, unref } from "vue"
-import { BasicTableProps } from "../types/table.type"
-
-interface Options {
-    setSelectedRowKeys: (keys: string[]) => void
-    getSelectRowKeys: () => string[]
-    clearSelectedRowKeys: () => void
-    emit: any
-  }
-
-export function useCustomRow(
-    propsRef: ComputedRef<BasicTableProps>,
-    { setSelectedRowKeys, getSelectRowKeys, clearSelectedRowKeys, emit }: Options
-) {
-    const customRow = (record: Recordable, index: number) => {
-        return {
-            onClick: (e) => {
-                e?.stopPropagation()
-
-                function handleClick() {
-                    const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef)
-                    if (!rowSelection || !clickToRowSelect) return
-                    
-                    const keys = getSelectRowKeys()
-                    const key = record[rowKey]
-                    if (!key) return
-
-                    const isCheckbox = rowSelection.type === 'checkbox'
-                    if (isCheckbox) {
-                        const tr: HTMLElement = (e as MouseEvent)
-                            .composedPath?.()
-                            .find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
-                        if (!tr) return
-
-                        const checkBox = tr.querySelector('input[type=checkbox]')
-
-                        if (!checkBox || checkBox.hasAttribute('disabled')) return
-
-                        if (!keys.includes(key)) {
-                            setSelectedRowKeys([...keys, key])
-                            return
-                        }
-
-                        const keyIndex = keys.findIndex((item) => item === key)
-                        keys.splice(keyIndex, 1)
-                        setSelectedRowKeys(keys)
-                        return
-                    }
-
-                    const isRadio = rowSelection.type === 'radio'
-
-                    if (isRadio) {
-                        if (!keys.includes(key)) {
-                            if (keys.length) {
-                                clearSelectedRowKeys()
-                            }
-                            setSelectedRowKeys([key])
-                            return
-                        }
-                        clearSelectedRowKeys()
-                    }
-                }
-
-                handleClick()
-                emit('row-click', record, index, e)
-            },
-            onDblclick: (event: Event) => {
-                emit('row-dbClick', record, index, event);
-            },
-            onContextmenu: (event: Event) => {
-                emit('row-contextmenu', record, index, event);
-            },
-            onMouseenter: (event: Event) => {
-                emit('row-mouseenter', record, index, event);
-            },
-            onMouseleave: (event: Event) => {
-                emit('row-mouseleave', record, index, event);
-            },
-        }
-    }
-
-    return {
-        customRow,
-    }
-}

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

@@ -1,97 +0,0 @@
-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
-        })
-    }
-
-
-    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

@@ -1,89 +0,0 @@
-import { error, http, Recordable, useAppStore } from "@dt-frames/core"
-import { BasicColumn } from "../types/table.type"
-
-const codeMap = new Map()
-
-// 解析header
-export function useHeaderCode(code: string, templates: Recordable = {}, 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() {
-        if( codeMap.get(code ) ) {
-            changeColumns( codeMap.get(code ) )
-            return
-        }
-        
-        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)
-        } )
-
-        codeMap.set(code, rows )
-        changeColumns( rows )
-    }
-
-    getColumns()
-
-}

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

@@ -1,29 +0,0 @@
-/**
- * 设置表格的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

@@ -1,76 +0,0 @@
-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
-    }
-}