@dt-frames/ui 1.0.12 → 1.0.16

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

@@ -1,212 +0,0 @@
-
-
-<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 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"
-    import { useCustomRow } from "./hooks/useCustomRow"
-
-
-    export default defineComponent({
-        name: 'dt-table',
-        props: TableProps,
-        components: {
-            Table,
-            TableRender
-        },
-        emits: [
-            'register',
-            'columns-change',
-            'selection-change',
-            'row-click',
-            'row-dbClick',
-            'row-contextmenu',
-            'row-mouseenter',
-            'row-mouseleave',
-            'expanded-rows-change',
-            'edit-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,
-                setSelectedRowKeys
-            } = 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,
-                emit,
-                getSize: () => {
-                    return unref(getBind).size as SizeType;
-                }
-            }
-
-            const {
-                getRowClassName
-            } = useRows( getProps )
-
-            /**
-             * 表格改变
-             */
-            const { 
-                handleTableChange
-            } = useDataSource(
-                getProps,
-                {
-                    getPaginationInfo,
-                    setPagination,
-                    clearSelectedRowKeys
-                },
-                emit
-            )
-
-            // 表格的单击 双击事件
-            const { customRow } = useCustomRow(getProps, {
-                setSelectedRowKeys,
-                getSelectRowKeys,
-                clearSelectedRowKeys,
-                emit
-            })
-
-            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: unref(getViewColumns),
-                    tableLayout: 'fixed',
-                    customRow,
-                }
-            })
-
-            // 创建实例
-            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)
-            
-            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

@@ -1,160 +0,0 @@
-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, TableSetting } from './types/table.type'
-import { ButtonProps } from '../../forms'
-import { DownloadType } from './types/tableHeader.type'
-
-export const TableProps = {
-    // 点击行是否选中数据
-    clickRowSelect: { type: Boolean, default: false },
-
-    // 表格设置
-    tableSetting: {type: Object as PropType<TableSetting | boolean>, default: () => ({})},
-
-    // 点击行是否可以选中整行数据
-    clickToRowSelect: { type: Boolean, default: false },
-
-    // 是否显示斑马条纹
-    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: false },
-
-    // 排序
-    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 },
-
-    // 列code编码
-    columnCode: { type: String },
-    // 列自定义的模板
-    templates: { type: Object as PropType<Recordable>, default: {} },
-
-    // 列 
-    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: 'small',
-    },
-
-    // 分页、排序、筛选变化时触发
-    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

@@ -1,160 +0,0 @@
-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 = {
-    // 表格刷新
-    download?: 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 =
-  | ((record: Recordable, index: number, text: string) => 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 type ComponentType =
-  | 'Input'
-  | 'InputNumber'
-  | 'Select'
-  | 'TreeSelect'
-  | 'Checkbox'
-  | 'Switch'
-  | 'DatePicker'
-  | 'TimePicker'
-
-export type LableValOptions = {
-    label: string;
-    value: any;
-    [key: string]: string | number | boolean
-}[]
-
-
-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
-    editComponent?: ComponentType
-    editComponentProps?:
-    | ((opt: {
-        text: string | number | boolean | Recordable;
-        record: Recordable;
-        column: BasicColumn;
-        index: number;
-      }) => Recordable)
-    | Recordable
-    editRule?: boolean | ((text: string, record: Recordable) => Promise<string>)
-
-    // 是否显示序号列
-    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
-    emit?: any
-}

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

@@ -1,27 +0,0 @@
-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/components/tree/index.less

@@ -1,41 +0,0 @@
-.dt-tree{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .dt-tree-header{
-        .headerTitle{
-            text-align: center;
-            line-height: 32px;
-            font-weight: bolder;
-        }
-
-        .dt-tree-search{
-            display: flex;
-            padding: 0 0 10px 10px;
-            border-bottom: 1px solid #e7e7e7;
-            &>i{
-                width: 24px;
-                display: block;
-                text-align: center;
-                cursor: pointer;
-            }
-            .dt-tree-search-input{
-                flex: 1;
-                input{
-                    font-size: 12px;
-                }
-            }
-        }
-    }
-
-    .ant-spin-nested-loading{
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px 0;
-
-        .tree-title{
-            font-size: 12px;
-        }
-    }
-}

package/src/components/tree/index.ts

@@ -1,5 +0,0 @@
-import DtTree from './src/index.vue'
-
-export {
-    DtTree
-}

package/src/components/tree/src/components/TreeHeader.vue

@@ -1,97 +0,0 @@
-<template>
-    <div class="dt-tree-header">
-        <slot name="headerTitle" v-if="slots.headerTitle"></slot>
-
-        <h4 v-if="!slots.headerTitle && title" class="headerTitle">{{ title }}</h4>
-
-        <div v-if="search || toolbar" class="dt-tree-search">
-            <div class="dt-tree-search-input" v-if="search">
-                <InputSearch size="small" allowClear v-model:value="searchValue" placeholder="搜索"/>
-            </div>
-
-            <Dropdown @click.prevent v-if="toolbar">
-                <i class="i ic:baseline-more-vert"></i>
-                <template #overlay>
-                    <Menu @click="handleMenuClick">
-                        <template v-for="item in toolbarList" :key="item.value">
-                            <MenuItem v-bind="{ key: item.value }">
-                                {{ item.label }}
-                            </MenuItem>
-                            <MenuDivider v-if="item.divider" />
-                        </template>
-                    </Menu>
-                </template>
-            </Dropdown>
-        </div>
-
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { useSlots, ref, watch, computed } from 'vue'
-    import { InputSearch, Dropdown, Menu, MenuItem, MenuDivider } from 'ant-design-vue'
-    import { useDebounceFn } from '@vueuse/core'
-    import { searchProps } from '../props'
-    import { ToolbarEnum } from '../type/tree'
-
-    const slots = useSlots()
-    const emits = defineEmits([
-        'search',
-        'strictly-change',
-        'strictly-change'
-    ])
-    const props = defineProps( searchProps )
-
-    const searchValue = ref('')
-
-    function emitChange(value?: string){
-        emits('search', value)
-    }
-
-    function handleMenuClick(e) {
-        const { key } = e;
-        switch (key) {
-            case ToolbarEnum.SELECT_ALL: props.checkAll?.(true); break
-            case ToolbarEnum.UN_SELECT_ALL: props.checkAll?.(false); break
-            case ToolbarEnum.EXPAND_ALL: props.expandAll?.(true); break
-            case ToolbarEnum.UN_EXPAND_ALL: props.expandAll?.(false); break
-            case ToolbarEnum.CHECK_STRICTLY: emits('strictly-change', false); break
-            case ToolbarEnum.CHECK_UN_STRICTLY: emits('strictly-change', true); break
-        }
-    }
-
-    const toolbarList = computed(() => {
-        const { checkable } = props
-
-        const defaultToolbarList = [
-            { label: '展开全部', value: ToolbarEnum.EXPAND_ALL },
-            {
-                label: '折叠全部',
-                value: ToolbarEnum.UN_EXPAND_ALL,
-                divider: checkable,
-            },
-        ];
-
-        return checkable
-        ? [
-            { label: '选择全部', value: ToolbarEnum.SELECT_ALL },
-            {
-                label: '取消选择',
-                value: ToolbarEnum.UN_SELECT_ALL,
-                divider: checkable,
-            },
-            ...defaultToolbarList,
-            { label: '层级关联', value: ToolbarEnum.CHECK_STRICTLY },
-            { label: '层级独立', value: ToolbarEnum.CHECK_UN_STRICTLY },
-        ]
-        : defaultToolbarList;
-    })
-
-    const debounceEmitChange = useDebounceFn(emitChange, 200)
-    watch(
-        () => searchValue.value,
-        (v) => {
-            debounceEmitChange(v);
-        },
-    )
-</script>