@dt-frames/ui 1.0.2 → 1.0.3

package/src/components/table/src/components/setting/Fullscreen.vue

@@ -0,0 +1,43 @@
+<template>
+    <Tooltip placement="top">
+        <template #title>
+            <span v-if="!isFullscreen">全屏</span>
+        </template>
+
+        <span @click="toggle">
+            <span v-if="!isFullscreen" v-icon="'ic:baseline-fullscreen'"></span>
+            <span v-else v-icon="'ic:baseline-fullscreen-exit'"></span>
+        </span>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+    import { ref, watch } from 'vue'
+    import { useFullscreen } from '@vueuse/core';
+    import { Tooltip } from 'ant-design-vue'
+    import { DtIcon } from '../../../../icons/index'
+    import { getTableInstance } from '../../hooks/useTableInstance';
+
+    const table = getTableInstance()
+    const wrapEl = ref(null)
+
+    const { toggle, isFullscreen } = useFullscreen(wrapEl)
+
+    watch(
+        () => table.tableElRef.value,
+        ( v: any ) => {
+            const getParent = ( el ) => {
+                if( !el || !el.parentNode ) return null
+                
+                // 找到路由的下一层 进行全屏
+                if(el.parentNode.className.indexOf('dt-layout-content') !== -1) {
+                    wrapEl.value = el.parentNode
+                } else {
+                    getParent( el.parentNode )
+                }
+            }
+
+            getParent(v.$el)
+        }
+    )
+</script>

package/src/components/table/src/components/setting/Size.vue

@@ -0,0 +1,42 @@
+<template>
+    <Tooltip>
+        <template #title>密度</template>
+
+        <Dropdown 
+            placement="bottom" 
+            :trigger="['click']" 
+            :getPopupContainer="getPopupContainer"
+        >
+            <span v-icon="'ant-design:column-height-outlined'"></span>
+
+            <template #overlay>
+                <Menu 
+                    @click="handleTitleClick" 
+                    selectable 
+                    v-model:selectedKeys="selectedKeysRef"
+                >
+                    <MenuItem key="default"> <span>默认</span> </MenuItem>
+                    <MenuItem key="middle"> <span>中等</span> </MenuItem>
+                    <MenuItem key="small"> <span>紧凑</span> </MenuItem>
+                </Menu>
+            </template>
+        </Dropdown>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+    import { getPopupContainer } from '@dt-frames/core';
+    import { Tooltip, Dropdown, Menu, MenuItem } from 'ant-design-vue'
+    import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+    import { ref } from 'vue'
+    import { getTableInstance } from '../../hooks/useTableInstance';
+    import { SizeType } from '../../types/table.type';
+
+    const table = getTableInstance()
+    const selectedKeysRef = ref<SizeType[]>([table.getSize()])
+
+    function handleTitleClick({ key }: MenuInfo) {
+        selectedKeysRef.value = [key as SizeType]
+        table.setProps({ size: key as SizeType })
+    }
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+    <Download></Download>
+    <SizeSetting v-if="getSetting.size" />
+    <ColumnSetting
+        v-if="getSetting.setting"
+        @columns-change="handleColumnChange"
+    />
+    
+    <FullscreenSetting v-if="getSetting.fullscreen"></FullscreenSetting>
+    
+</template>
+
+<script lang="ts">
+    import { computed, defineComponent, unref } from "vue"
+    import type { PropType } from 'vue'
+    import { TableSetting } from "../../types/table.type"
+    import ColumnSetting from './Column.vue'
+    import FullscreenSetting from './Fullscreen.vue'
+    import SizeSetting from './Size.vue'
+    import Download from './Download.vue'
+
+    type ColumnChangeParam = {
+        dataIndex: string;
+        fixed: boolean | 'left' | 'right' | undefined;
+        visible: boolean;
+    }
+
+    export default defineComponent({
+        name: 'table-setting',
+        components: {
+            ColumnSetting,
+            FullscreenSetting,
+            SizeSetting,
+            Download
+        },
+        props: {
+            setting: {
+                type: Object as PropType<TableSetting>,
+                default: () => ({}),
+            },
+        },
+        emits: ['columns-change'],
+        setup(props, { emit }) {
+            const getSetting = computed((): TableSetting => {
+                return {
+                    redo: true,
+                    size: true,
+                    setting: true,
+                    fullscreen: true,
+                    ...props.setting,
+                };
+            })
+
+            function handleColumnChange(data: ColumnChangeParam[]) {
+                emit('columns-change', data);
+            }
+
+            return {
+                getSetting,
+                handleColumnChange
+            }
+        }
+    })
+</script>

package/src/components/table/src/const.ts

@@ -0,0 +1,13 @@
+export const DEFAULT_SORT_FN = (sortInfo) => {
+    const { field, order } = sortInfo
+
+    return field && order 
+        ? { field, order }
+        : { }
+}
+
+export const TABLE_SIZE_HEIGHT = {
+    default: 56,
+    middle: 47,
+    small: 32
+}

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