@dt-frames/ui 1.0.2 → 1.0.3

package/src/components/table/src/index.less

@@ -0,0 +1,162 @@
+.table-striped td {
+    background-color: #fafafa;
+}
+
+.dt-table-header{
+    .dt-table-header-actions{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dt-table-header-actions__right{
+        display: flex;
+        .dt-icon{
+            margin: 0 5px;
+            cursor: pointer;
+        }
+    }
+}
+
+.column-setting{
+    &__check-item{
+        display: flex;
+        align-items: center;
+        min-width: 100%;
+        padding: 4px 16px 8px 0;
+    }
+    &__popover-title {
+        display: flex;
+    }
+}
+
+.column-setting__cloumn-list {
+    .ant-popover-inner-content{
+        padding: 12px 0 0 0;
+    }
+    .ant-checkbox-group {
+        width: 100%;
+        min-width: 260px;
+    }
+
+    .drag-icon{
+        margin: 0 5px;
+        cursor: move;
+    }
+
+    .ant-checkbox-wrapper{
+        flex: 1;
+    }
+
+    .dt-icon{
+        cursor: pointer;
+        display: flex;
+    }
+
+    .disabled{
+        .dt-icon{
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+
+    .active{
+        .dt-icon{
+            color: @primary-color !important;
+        }
+    }
+
+    .ant-popover-inner-content {
+        max-height: 400px;
+        overflow-y: auto;
+    }
+}
+
+.dt-table-action-btn{
+    width: 24px;
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    svg{
+        display: flex;
+    }
+}
+
+.ant-table-fixed-left table, .ant-table-fixed-right table{
+    width: min-content;
+}
+
+.ant-table-cell {
+    height: 44px !important;
+    line-height: 24px !important;
+    font-size: 14px !important;
+    padding: 4px 8px !important;
+} 
+
+.ant-table-small{
+    .ant-table-cell {
+        height: 32px !important;
+        line-height: 16px !important;
+        font-size: 12px !important;
+        padding: 2px 8px !important;
+    }
+}
+
+.ant-table-middle{
+    .ant-table-cell {
+        height: 38px !important;
+        line-height: 20px !important;
+        font-size: 13px !important;
+        padding: 4px 8px !important;
+    }  
+}
+
+.dt-action-select{
+    .ant-dropdown-menu-title-content{
+        display: flex;
+        align-items: center;
+        svg{
+            display: block;
+        }
+
+        .dt-icon{
+            padding: 0 8px;
+        }
+    }
+}
+
+
+.dt-table{
+    .ant-table-pagination{
+        margin: 0 !important;
+        padding: 10px 0;
+        border: 1px solid #f0f0f0;
+    }
+    
+    .ant-table-title{
+        padding: 8px 0 !important;
+        border: none !important;
+    }
+
+    .ant-table-resize-handle{
+        right: -7px;
+        .ant-table-resize-handle-line{
+            width: 2px;
+        }
+    }
+
+    .ant-table-body {
+        position: relative;
+        table{
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .form-btns{
+        button:first-of-type {
+            margin-left: 0;
+        }
+    }
+}

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

package/src/components/table/src/props.ts

@@ -0,0 +1,152 @@
+import { Recordable } from '@dt-frames/core'
+import { PropType } from 'vue'
+import { DEFAULT_SORT_FN } from './const'
+import type { PaginationProps } from 'ant-design-vue/lib/pagination'
+import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
+import { ActionType, BasicColumn, BtnsType, SizeType } from './types/table.type'
+import { ButtonProps } from '../../forms'
+import { DownloadType } from './types/tableHeader.type'
+
+export const TableProps = {
+    // 点击行是否选中数据
+    clickRowSelect: { type: Boolean, default: false },
+
+    // 表格设置
+    tableSetting: {type: Array, default: ['redo', 'size', 'setting', 'fullscreen']},
+
+    // 是否显示斑马条纹
+    striped: { type: Boolean, default: true },
+
+    // 是否支持拖拽排序
+    canColDrag: { type: Boolean, default: true },
+
+    // 是否支持拖拽改变列宽
+    resizable: { type: Boolean, default: true },
+    // 最小拖拽宽度
+    minWidth: { type: Number },
+    // 最大拖拽宽度
+    maxWidth: { type: Number },
+
+    // 是否需要虚拟滚动
+    virtual: { type: Boolean, default: true },
+
+    // 排序
+    sortFn: { type: Function, default: DEFAULT_SORT_FN },
+
+    // 过滤
+    filterFn: {
+        type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
+        default: (data: Partial<Recordable<string[]>>) => {
+            return data;
+        }
+    },
+
+    // 数据的key值
+    rowKey: {
+        type: String,
+        default: 'id'
+    },
+
+    // 默认的排序
+    defSort: { type: Object as PropType<Recordable>, default: null },
+
+    // 列 
+    columns: { type: [Array] as PropType<BasicColumn[]>, default: () => [] },
+
+    // 超出部分是否已省略号显示
+    ellipsis: { type: Boolean, default: true },
+
+    // 需要渲染的数据
+    dataSource: { type: Array as PropType<Recordable[]>, default: null },
+
+    // 表格是否需要边框
+    bordered: { type: Boolean, default: true },
+
+    // 分页数据
+    pagination: {
+        type: [Object, Boolean] as PropType<PaginationProps | boolean>,
+        default: {}
+    },
+
+    // 是否处于加载中
+    loading: { type: Boolean, default: false },
+
+    // 动态定义行class
+    rowClassName: { type: Function as PropType<(record: any, index: number) => string> },
+
+    // 定义何时出现滚动条
+    scroll: {
+        type: Object as PropType<{ x?: number | true; y?: number }>,
+        default: {},
+    },
+
+    size: {
+        type: String as PropType<SizeType>,
+        default: 'default',
+    },
+
+    // 分页、排序、筛选变化时触发
+    onTableChange: {
+        type: Function,
+        default: () => {}
+    },
+
+    // 下载
+    onDownload: {
+        type: Function,
+        default: (excelData: DownloadType) => {}
+    },
+
+    // 选中的行数据
+    rowSelection: {
+        type: Object as PropType<TableRowSelection | null>,
+        default: null,
+    },
+
+    /**
+     * 设置行属性
+     * 用法: 
+     * ( record ) => { 
+            onClick: (event) => {},
+            onDblclick: (event) => {},
+            onContextmenu: (event) => {},
+            onMouseenter: (event) => {},  // 鼠标移入行
+            onMouseleave: (event) => {}
+     * }
+    */
+    customRow: {
+        type: Function as PropType<( record, index ) => void>,
+        default: () => {}
+    },
+
+    childrenColumnName: {
+        type: String,
+        default: 'children'
+    },
+
+    showIndexColumn: {
+        type: Boolean,
+        default: false
+    },
+
+    indexColumnProps: {
+        type: [Array] as PropType<BasicColumn[]>, 
+        default: () => [],
+    },
+
+    isTreeTable: {
+        type: Boolean,
+        default: false
+    },
+
+    // 操作栏
+    operations: {
+        type: Object as PropType<ActionType | BtnsType[]>,
+    },
+
+    // 工具栏按钮
+    toolbar: {
+        type: Array as PropType<ButtonProps[]>
+    }
+
+}

package/src/components/table/src/types/table.type.ts

@@ -0,0 +1,133 @@
+import { DictType, Recordable } from '@dt-frames/core'
+import type { ColumnProps } from 'ant-design-vue/lib/table'
+import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface'
+import { ExtractPropTypes, VNode, DefineComponent } from 'vue'
+import { TableProps } from '../props'
+import { SetColumnsParams } from './tableHeader.type'
+
+export interface TableRowSelection<T = any> extends ITableRowSelection {
+    // table选择发生改变
+    onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any
+
+    // 触发一行选择
+    onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any
+
+    // 全选
+    onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any
+
+    // 反选
+    onSelectInvert?: (selectedRows: string[] | number[]) => any
+}
+
+export type TableSetting = {
+    // 表格刷新
+    redo?: boolean
+    // 表格的尺寸
+    size?: boolean
+    // 是否显示列控制
+    setting?: boolean
+    // 全屏按钮
+    fullscreen?: boolean
+}
+
+export type ColumnChangeParam = {
+    dataIndex: string
+    fixed: boolean | 'left' | 'right' | undefined
+    visible: boolean
+}
+
+export type BasicTableProps = ExtractPropTypes<typeof TableProps> & {
+    onColumnsChange?: (data: ColumnChangeParam[]) => void
+}
+
+export type SizeType = 'default' | 'middle' | 'small'
+
+export type SorterResult = {
+    column: ColumnProps
+    order: 'ascend' | 'descend'
+    field: string
+    columnKey: string
+}
+
+export type CellFormat =
+  | ((text: string, record: Recordable, index: number) => any)
+  | { dict: DictType }
+  | { number: string }
+  | { date: string }
+  | { percent: string }
+  | { [key: string]: Recordable }
+  | VNode 
+  | JSX.Element
+
+export type BtnsType = {
+    title?: string
+    icon?: string
+    auth?: string
+    color?: string
+    type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
+    size?: 'large' | 'middle' | 'small'
+    loading?: boolean
+    disabled?: boolean
+    ifShow?: boolean | ((column: BasicColumn) => boolean)
+    action?: (data: { 
+        row: Recordable,
+        index: number
+    }) => void
+}
+
+
+export type ActionType = {
+    title?: string
+    // 操作栏宽度
+    width?: number | string
+    // 图标是否展开
+    expand?: boolean
+    // 操作栏固定位置
+    fixed?: 'left' | 'right' | 'auto'
+    // 按钮设置
+    btns?: BtnsType[]
+}
+
+
+export interface BasicColumn extends ColumnProps {
+    // 子元素
+    children?: BasicColumn[]
+    
+    // 默认是否显示
+    defaultHidden?: boolean;
+
+    // 业务控制是否显示
+    ifShow?: boolean | ((row: Recordable) => boolean)
+
+    // 列标识
+    flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION'
+
+    // 过滤器转换
+    render?: CellFormat
+
+    edit?: boolean
+    editRow?: boolean
+    // editable?: boolean
+
+    // 是否显示序号列
+    showIndexColumn?: boolean
+
+    // 是否展开按钮组 只针对ACTION
+    expand?: boolean
+
+}
+
+
+// table相关的操作
+export type TableActionType = {
+    setProps: (props: Partial<BasicTableProps>) => void
+    setLoading: ( loading: boolean ) => void
+    getColumns: (opt?: SetColumnsParams) => BasicColumn[]
+    setColumns: (columns: BasicColumn[] | string[]) => void
+    getSize: () => SizeType
+    getRowSelection: () => TableRowSelection<Recordable>
+    getCacheColumns: () => BasicColumn[]
+    setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
+    getSelectRows: ( ) => void
+    getSelectRowKeys: ( ) => void
+}

package/src/components/table/src/types/tableHeader.type.ts

@@ -0,0 +1,27 @@
+import { Recordable } from "@dt-frames/core"
+import { BasicColumn } from "./table.type"
+
+export type ColumnStateType = {
+    checkAll: boolean
+    isInit?: boolean
+    checkedList: string[]
+    defaultCheckList: string[]
+}
+
+export type ColumnOptionsType = {
+    label: string
+    value: string
+    fixed?: boolean | 'left' | 'right'
+}
+
+export type SetColumnsParams = {
+    ignoreIndex?: boolean
+    ignoreAction?: boolean
+    sort?: boolean
+}
+
+export type DownloadType = {
+    type: 'current' | 'select' | 'all',
+    columns?: BasicColumn[],
+    rows?: Recordable<any>[]
+}

package/src/directives/icon.ts

@@ -0,0 +1,36 @@
+/**
+ * 字体图标指令，目前支持awesome、ant-design以及assets/icons/下的svg图标
+ * 使用方法: <span v-icon="'fa fa-user'" :color="'red'" :fontSize="12"></span>
+ * 
+ * 动态设置ant-design 图标
+ * https://blog.csdn.net/weixin_45803990/article/details/116270387
+ */
+import { DirectiveBinding, h, render, VNode } from "vue";
+import { Nullable } from '@dt-frames/core'
+import { DtIcon } from "../components";
+
+
+function setIconHTML( el: Element, binding: any, props: any ) {
+    const value = binding.value;
+    if (!value) return;
+
+    let vm: Nullable<VNode> = null;
+
+    vm = h(DtIcon, {
+        iconClass: value,
+        size: props?.size,
+        color: props?.color || null,
+        style: {
+            display: 'block'
+        }
+    });
+
+    if( vm ) {
+        render(vm, document.createElement('div'));
+        el.appendChild(vm.el as HTMLElement);
+    }
+ }
+ 
+export const iconMounted = (el: Element, binding: DirectiveBinding<any>, props: any) => {
+    setIconHTML(el, binding, props.props);
+};