@dt-frames/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,197 @@
+
+
+<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 { 
+                handleTableChange
+            } = useDataSource(
+                getProps,
+                {
+                    getPaginationInfo,
+                    setPagination,
+                    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'
+                }
+            })
+
+            // 创建实例
+            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

@@ -0,0 +1,157 @@
+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, CellFormat, 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: 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<CellFormat> },
+
+    // 列 
+    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

@@ -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);
+};

package/src/directives/index.ts

@@ -0,0 +1,26 @@
+
+import { App } from 'vue'
+import { authMounted } from './permission'
+import { iconMounted } from './icon'
+
+
+const dtDirectives = [
+    { name: 'auth', directive: authMounted },
+    { name: 'icon', directive: iconMounted },
+];
+
+
+// 初始化所有组件
+export function initDirectives() {
+    return {
+        install(app: App) {
+            dtDirectives.forEach( comp => app.directive(comp.name, {
+                mounted: comp.directive
+            }));
+        }
+    }
+}
+
+
+export * from './permission'
+export * from './icon'

package/src/directives/permission.ts

@@ -0,0 +1,20 @@
+/**
+ * 权限控制，不使用传统的通过css隐藏dom元素
+ * 使用方法： v-auth="'ADD'"
+*/
+import { CacheKey, DtCache } from '@dt-frames/core';
+import type { DirectiveBinding } from 'vue';
+
+
+function hasAuth( el: Element, binding: any ) {
+    const value = binding.value;
+    if (!value) return;
+
+    if(!DtCache.getLocal(CacheKey.AUTHS).includes( value )) {
+        el.parentNode?.removeChild(el);
+    }
+}
+
+export const authMounted = (el: Element, binding: DirectiveBinding<any>) => {
+    hasAuth(el, binding);
+};

package/src/global.d.ts

@@ -0,0 +1,8 @@
+// 主要解决文件后缀引入后 代码报错的问题
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const Component: DefineComponent<{}, {}, any>;
+    export default Component;
+}
+
+declare module 'lodash-es';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components'
+export * from './theme'
+export * from './directives'
+

package/src/theme/content/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="dt-layout-content" :class="['dt-layout-content', getLayoutContentMode]" :loading="getPageLoading && getOpenPageLoading">
+        <LayoutContent>
+            <router-view #default="{ Component, route}">
+                <transition :name="getTransitionName(route)">
+                    <keep-alive v-if="!route.meta.hideTab && getCanCache" :include="getCaches">
+                        <component :is="Component" :key="route.path" />
+                    </keep-alive>
+
+                    <component v-else :is="Component" />
+                </transition>
+            </router-view>
+        </LayoutContent>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { unref, computed } from 'vue';
+    import { LayoutContent } from 'ant-design-vue';
+    import { useTheme, useApp, RouteReuseStore, useMultipleTab } from '@dt-frames/core';
+    import { RouteRecordRaw } from 'vue-router';
+
+    const { getTransitionMode, getOpenPageLoading } = useApp()
+    const { getLayoutContentMode, getPageLoading } = useTheme()
+    const { getCanCache } = useMultipleTab()
+
+    const tabStore = RouteReuseStore()
+
+    // 返回动画name
+    function getTransitionName( route: RouteRecordRaw ): string | undefined {
+        return (route.meta.transitionName || unref(getTransitionMode))  as string;
+    }
+
+    const getCaches = computed((): string[] => {
+        return tabStore.getCachedTabList
+    })
+</script>

package/src/theme/feature/back-top.vue

@@ -0,0 +1,11 @@
+<template>
+    <BackTop v-if="getShowBackToTop" :target="getTarget" :visibilityHeight="300" />
+</template>
+
+<script lang="ts" setup>
+    import { BackTop } from 'ant-design-vue'
+    import { useTheme } from '@dt-frames/core'
+
+    const getTarget = () => document.getElementById('dt-layout-content')
+    const { getShowBackToTop } = useTheme()
+</script>

package/src/theme/feature/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <DtBackTop />
+</template>
+
+<script lang="ts" setup>
+    import DtBackTop from './back-top.vue'
+</script>

package/src/theme/footer/index.less

@@ -0,0 +1,16 @@
+.dt-theme-footer{
+    text-align: center;
+    padding: 0;
+    width: 100%;
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background: #ebeff5;
+    color: #b5b5b5;
+    border-top: 1px solid #e7e7e7;
+    span:first-of-type{
+        padding-right: 10px;
+    }
+}