@dt-frames/ui 1.0.0

package/src/components/table/src/components/TableActions.vue

@@ -0,0 +1,108 @@
+<template>
+    <template v-if="props.expand">
+        <span v-for="item in props.btns" class="dt-table-action-btn">
+            <Tooltip placement="bottom" v-if="item.ifShow">
+                <template #title>{{ item.title }}</template>
+                <span v-icon="item.icon" :color="item.color" @click="handleAction(item)"></span>
+            </Tooltip>
+        </span>
+    </template>
+
+    <template v-else>
+        <Dropdown 
+            :getPopupContainer="getPopupContainer"
+            :trigger="['click']"
+        >
+            <DtIcon :icon-class="'mdi:cog-outline'"></DtIcon>
+
+            <template #overlay>
+                <Menu class="dt-action-select">
+                    <template v-for="item in props.btns">
+                        <MenuItem
+                            v-if="item.ifShow"
+                            @click="handleAction(item)"
+                        >
+                            <DtIcon :icon-class="item.icon" :color="item.color"></DtIcon>
+                            <span>{{ item.title }}</span>
+                        </MenuItem>
+                    </template>
+                    
+                </Menu>
+            </template>
+
+        </Dropdown>
+
+    </template>
+
+</template>
+
+<script lang="ts" setup>
+    import { PropType, watch, useAttrs } from 'vue';
+    import { Tooltip, Dropdown, Menu, MenuItem } from 'ant-design-vue'
+    import { BtnsType } from '../types/table.type';
+    import { DtIcon } from '../../../icons/index'
+    import { isBoolean, isFunction, getPopupContainer as getParentContainer } from '@dt-frames/core';
+
+    const props = defineProps({
+        fixed: {
+            type: String as PropType<boolean | 'left' | 'right' | undefined>,
+            default: 'right'
+        },
+        title: {
+            type: String
+        },
+        expand: {
+            type: Boolean,
+            default: false
+        },
+        width: {
+            type: String,
+            default: '70px'
+        },
+        btns: {
+            type: Array as PropType<BtnsType[]>,
+            default: []
+        },
+        flag: {
+            type: String as PropType<'ACTION'>
+        },
+        record: {
+            default: { }
+        },
+        index: {
+            type: Number
+        }
+    })
+
+    watch(
+        () => props.btns,
+        (btns) => {
+            btns.map( it => {
+                it.ifShow = isBoolean( it.ifShow )
+                    ? it.ifShow
+                    : isFunction( it.ifShow )
+                    ? it.ifShow( props.record )
+                    : true
+            } )
+        },{
+            immediate: true
+        }
+    )
+
+    function handleAction(it: BtnsType) {
+        if( isFunction( it.action ) ) {
+            it.action({
+                row: props.record,
+                index: props.index
+            })
+        }
+    }
+
+    const attrs = useAttrs()
+    function getPopupContainer() {
+        return isFunction(attrs.getPopupContainer)
+          ? attrs.getPopupContainer()
+          : getParentContainer();
+    }
+
+</script>

package/src/components/table/src/components/TableHeader.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="dt-table-header">
+        <div class="dt-table-header-actions">
+            <div class="dt-table-header-actions__left">
+                <FormButtons 
+                    v-bind="getActionsProps"
+                    @handle-method="handleMethod"
+                ></FormButtons>
+                <slot name="toolbar"></slot>
+            </div>
+
+            <div class="dt-table-header-actions__right">
+                <TableSettinCom
+                    @columns-change="handleColumnChange"
+                ></TableSettinCom>
+            </div>
+        </div>
+
+        <div v-if="$slots.headerTop" style="margin: 5px">
+            <slot name="headerTop"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent, PropType } from "vue"
+    import { Button } from 'ant-design-vue'
+    import type { BtnsType, ColumnChangeParam, TableSetting } from "../types/table.type"
+    import TableSettinCom from './setting/index.vue'    
+    import { DtIcon } from '../../../icons/index'
+    import { FormButtons } from "../../../forms"
+    import { isFunction } from "@dt-frames/core"
+
+    export default defineComponent({
+        name: 'table-header',
+        components: {
+            TableSettinCom,
+            Button,
+            DtIcon,
+            FormButtons
+        },
+        props: {
+            tableTools: {
+                type: Object as PropType<TableSetting>
+            },
+            toolbar: {
+                type: Array as PropType<BtnsType[]>,
+                default: []
+            }
+        },
+        emits: ['columns-change'],
+        setup(props, { emit }) {
+            function handleColumnChange(data: ColumnChangeParam[]) {
+                emit('columns-change', data);
+            }
+
+            function handleMethod( e ) {
+                if( isFunction(e.onClick) ) {
+                    e.onClick()
+                }
+            }
+
+            const getActionsProps = {
+                mode: null,
+                showAdvancedButton: false,
+                show: true,
+                buttonList: props.toolbar
+            } as any
+
+            return {
+                getActionsProps,
+                handleColumnChange,
+                handleMethod
+            }
+        }
+    })
+</script>

package/src/components/table/src/components/TableRender.vue

@@ -0,0 +1,76 @@
+<script lang="tsx">
+    import { getDictValueByCode, isFunction, isObject, Recordable, formatNumber, isVnode } from '@dt-frames/core'
+    import dayjs from 'dayjs'
+    import { defineComponent, PropType, unref, ref, h, toRaw, render as render1, resolveComponent, resolveDynamicComponent, createVNode } from 'vue'
+    import { BasicColumn } from '../types/table.type'
+
+    export default defineComponent({
+        name: 'TableFormat',
+        props: {
+            column: {
+                type: Object as PropType<BasicColumn>
+            },
+            record: {
+                type: Object as PropType<Recordable>
+            },
+            index: {
+                type: Number
+            }
+        },
+        setup(props: {
+            column: BasicColumn,
+            record: Recordable,
+            index: number
+        }) {
+            let renderText = ref()
+
+            function renderCell() {
+                const { column, record, index } = props
+                const { render, dataIndex } = column
+                const text = record[dataIndex.toString()]
+                
+                if( isFunction(render) ) {
+                    renderText.value = render(text, record, index)
+                }
+
+                if( isObject(render) ) {
+                    const { dict, date, number, percent } = render as Recordable
+                     
+                    if( dict ) {
+                        renderText = getDictValueByCode(text, dict)
+                    }
+
+                    if( date ) {
+                        renderText.value = dayjs(text).format(date || 'YYYY-MM-DD')
+                    }
+
+                    if( number ) {
+                        renderText.value = formatNumber(text, number)
+                    }
+
+                    if( percent ) {
+                        renderText.value = formatNumber((text || 0) * 100, percent) + '%'
+                    }
+
+                    if( isVnode(render) ) {
+                        renderText.value = render
+                    }
+
+                    if( render['setup'] ) {
+                        renderText.value = createVNode(render as any, { text })
+                    }
+
+                    
+                } else {
+                    console.log(text)
+                    renderText.value = text
+                }
+            }
+
+            renderCell()
+
+            return () => <span>{unref(renderText)}</span>
+        }
+    })
+
+</script>

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

@@ -0,0 +1,355 @@
+<template>
+    <Tooltip placement="top">
+        <template #title>
+            <span>列控制</span>
+        </template>
+
+        <Popover
+            placement="bottomLeft"
+            trigger="click"
+            :overlayClassName="`${prefixCls}__cloumn-list`"
+            @visibleChange="handleVisibleChange"
+            :getPopupContainer="getPopupContainer"
+        >
+
+            <template #title>
+                <div :class="`${ prefixCls }__popover-title`">
+                    <Checkbox
+                        :indeterminate="indeterminate"
+                        v-model:checked="state.checkAll"
+                        @change="onCheckAllChange"
+                    >
+                        列展示
+                    </Checkbox>
+
+                    <Checkbox v-model:checked="checkIndex" @change="handleIndexCheckChange">
+                        序列号
+                    </Checkbox>
+
+                    <Checkbox v-model:checked="checkSelect" @change="handleSelectCheckChange" :disabled="!defaultRowSelection">
+                        复选框
+                    </Checkbox>
+
+                    <Button size="small" type="link" @click="reset">重置</Button>
+                </div>
+            </template>
+
+            <template #content>
+                    <CheckboxGroup v-model:value="state.checkedList" @change="onChange" ref="columnListRef">
+                        <template v-for="item in plainOptions" :key="item.value">
+                         <!-- v-if="!!(item as any).ifShow" -->
+                            <div :class="`${ prefixCls }__check-item`">
+                                <span v-icon="'ant-design:drag-outlined'" :size="16" :className="'drag-icon'"></span>
+
+                                <Checkbox :value="item.value">
+                                    {{ item.label }}
+                                </Checkbox>
+
+                                <Tooltip
+                                    placement="bottomLeft"
+                                    :mouseLeaveDelay="0.4"
+                                    :getPopupContainer="getPopupContainer"
+                                >
+                                    <template #title>固定到左侧</template>
+                                    <span :class="{
+                                        disabled: !state.checkedList.includes(item.value),
+                                        active: item.fixed === 'left'
+                                    }">
+                                        <DtIcon 
+                                            :icon-class="'mdi:arrow-collapse-left'" 
+                                            :className="`${ prefixCls }__fixed-left`" 
+                                            @click="handleColumnFixed(item, 'left')"
+                                            :size="16"
+                                        ></DtIcon>
+                                    </span>
+                                </Tooltip>
+
+                                <Divider type="vertical" />
+
+                                <Tooltip
+                                    placement="bottomLeft"
+                                    :mouseLeaveDelay="0.4"
+                                    :getPopupContainer="getPopupContainer"
+                                >
+                                    <template #title>固定到右侧</template>
+                                    <span :class="{
+                                        disabled: !state.checkedList.includes(item.value),
+                                        active: item.fixed === 'right',
+                                    }">
+                                        <DtIcon 
+                                            :icon-class="'mdi:arrow-collapse-right'" 
+                                            :className="`${prefixCls}__fixed-right`" 
+                                            @click="handleColumnFixed(item, 'right')"
+                                            :size="16"
+                                        ></DtIcon>
+                                    </span>
+                                    
+                                </Tooltip>
+                            </div>
+                        </template>
+                    </CheckboxGroup>
+            </template>
+
+            <span v-icon="'ant-design:setting-outlined'"></span>
+        </Popover>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+    import { Tooltip, Popover, Checkbox, Button, CheckboxGroup, Divider } from 'ant-design-vue'
+    import { getPopupContainer as getParentContainer, isNullAndUnDef } from '@dt-frames/core'
+    import { DtIcon } from '../../../../icons/index'
+    import { computed, reactive, ref, unref, watchEffect, useAttrs } from 'vue'
+    import type { ColumnStateType, ColumnOptionsType } from '../../types/tableHeader.type'
+    import { getTableInstance } from '../../hooks/useTableInstance'
+    import { BasicColumn } from '../../types/table.type'
+    import { nextTick } from 'process'
+    import { isFunction } from '@vueuse/core'
+    import { cloneDeep, omit } from 'lodash-es'
+
+    import Sortablejs from 'sortablejs'
+    import type Sortable from 'sortablejs'
+    import { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
+
+
+    const emits = defineEmits([
+        'columns-change'
+    ])
+
+    const attrs = useAttrs()
+
+    const prefixCls = 'column-setting'
+
+    const table = getTableInstance()
+    const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys')
+
+    let inited = false
+
+    const cachePlainOptions = ref<ColumnOptionsType[]>([])
+    const plainOptions = ref<ColumnOptionsType[]>([])
+    const plainSortOptions = ref<ColumnOptionsType[]>([])
+
+    // 列表实例
+    const columnListRef = ref(null)
+
+    // 是否显示序列号
+    const checkIndex = ref(false)
+    // 是否显示复选框
+    const checkSelect = ref(false)
+
+    const getValues = computed(() => {
+        return unref(table?.getBind);
+    })
+    
+    let sortable: Sortable
+    let sortableOrder: string[] = []
+
+    const state = reactive<ColumnStateType>({
+        checkAll: true,
+        checkedList: [],
+        defaultCheckList: []
+    })
+
+    // 列展示半选状态
+    const indeterminate = computed(() => {
+        let len = plainOptions.value.length
+        let checkedLen = state.checkedList.length
+
+        unref(checkIndex) && checkedLen--
+
+        return checkedLen > 0 && checkedLen < len
+    })
+
+    watchEffect(() => {
+        const columns = table.getColumns()
+        
+        if( columns && columns.length ) {
+            init()
+        }
+    })
+
+    watchEffect(() => {
+        const values = unref(getValues)
+
+        checkIndex.value = !!values.showIndexColumn
+        checkSelect.value = !!values.rowSelection
+    })
+
+
+    function handleVisibleChange() {
+        if( inited ) return
+
+        nextTick(() => {
+            const columnListEl = unref( columnListRef )
+            if( !columnListEl ) return 
+
+            const el = columnListEl.$el as any
+            if( !el ) return
+
+            sortable = Sortablejs.create(unref(el), {
+                animation: 500,
+                delay: 400,
+                delayOnTouchOnly: true,
+                handle: '.drag-icon ',
+                onEnd: (evt) => {
+                    const { oldIndex, newIndex } = evt
+
+                    if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+                        return;
+                    }
+
+                    const columns = cloneDeep(plainSortOptions.value)
+
+                    if (oldIndex > newIndex) {
+                        columns.splice(newIndex, 0, columns[oldIndex]);
+                        columns.splice(oldIndex + 1, 1)
+                    } else {
+                        columns.splice(newIndex + 1, 0, columns[oldIndex]);
+                        columns.splice(oldIndex, 1)
+                    }
+
+                    plainSortOptions.value = columns
+                    setColumns(columns)
+                }
+            })
+
+            sortableOrder = sortable.toArray()
+            inited = true
+        })
+    }
+
+    // 全选复选框改变
+    function onCheckAllChange(e: CheckboxChangeEvent) {
+        const checkList = plainOptions.value.map((item) => item.value)
+
+        if( e.target.checked ) {
+            state.checkedList = checkList
+            setColumns(checkList)
+        }else {
+          state.checkedList = []
+          setColumns([])
+        }
+    }
+
+    // 显示序列号
+    function handleIndexCheckChange(e: CheckboxChangeEvent) {
+        table.setProps({
+            showIndexColumn: e.target.checked,
+        })
+    }
+
+    // table上是否显示复选框
+    function handleSelectCheckChange(e: CheckboxChangeEvent) {
+        table.setProps({
+            rowSelection: e.target.checked ? defaultRowSelection : null,
+        })
+    }
+
+    // 复选框选择
+    function onChange(checkedList: string[]) {
+        const len = plainSortOptions.value.length
+        state.checkAll = checkedList.length === len
+
+        const sortList = unref(plainSortOptions).map((item) => item.value)
+        checkedList.sort((prev, next) => {
+            return sortList.indexOf(prev) - sortList.indexOf(next);
+        })
+
+        setColumns(checkedList)
+    }
+
+    // 重置所有选项
+    function reset() {
+        state.checkedList = [...state.defaultCheckList]
+        state.checkAll = true
+
+        plainOptions.value = unref(cachePlainOptions)
+        plainSortOptions.value = unref(cachePlainOptions)
+        setColumns(table.getCacheColumns())
+        sortable.sort(sortableOrder)
+    }
+
+    function getColumns() {
+        return table.getColumns({ 
+            ignoreIndex: true, 
+            ignoreAction: true 
+        }).reduce( (ret, it) => {
+            ret.push({
+                label: it.title,
+                value: it.dataIndex || it.title,
+                ...it
+            })
+
+            return ret
+        }, [] )
+    }
+
+    function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
+        if (!state.checkedList.includes(item.dataIndex as string)) return
+
+        const columns = getColumns() as BasicColumn[]
+        const isFixed = item.fixed === fixed ? false : fixed
+        const index = columns.findIndex( col => col.dataIndex === item.dataIndex )
+
+        if( index !== -1 ) {
+            columns[index].fixed = isFixed
+        }
+
+        item.fixed = isFixed
+
+        if (isFixed && !item.width) {
+            item.width = 100;
+        }
+
+        table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed })
+        setColumns(columns)
+    }
+
+    function setColumns(columns: BasicColumn[] | string[]) {
+        table.setColumns(columns)
+
+        const data = unref(plainSortOptions).map( col => {
+            const visable = columns.findIndex(
+                (c: BasicColumn | string) => c === col.value || (typeof c !== 'string' && c.dataIndex === col.value)
+            ) !== -1
+
+            return { dataIndex: col.value, fixed: col.fixed, visable }
+        } )
+
+        emits('columns-change', data)
+    }
+
+    function init() {
+        const columns = getColumns()
+
+        const checkList = table
+            .getColumns({ ignoreAction: true })
+            .map( it => it.defaultHidden ? '' : (it.dataIndex || it.title) )
+            .filter( Boolean ) as string[]
+
+        if(!plainOptions.value.length) {
+
+            plainOptions.value = columns
+            plainSortOptions.value = columns
+            cachePlainOptions.value = cloneDeep(columns)
+            state.defaultCheckList = checkList
+
+        } else {
+            unref( plainOptions )
+                .forEach( 
+                    (it: BasicColumn) => 
+                    it.fixed === columns.find(col => col.dataIndex === it.dataIndex)?.fixed 
+                )
+        }
+
+        state.isInit = true
+        state.checkedList = checkList
+    }
+
+
+    function getPopupContainer() {
+        return isFunction(attrs.getPopupContainer)
+          ? attrs.getPopupContainer()
+          : getParentContainer();
+    }
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+<!--  -->
+    <Tooltip placement="top">
+        <template #title>
+            <span>导出</span>
+        </template>
+
+         <Dropdown 
+            placement="bottom" 
+            :trigger="['click']" 
+            :getPopupContainer="getPopupContainer"
+        >
+            <span v-icon="'ic:baseline-file-download'"></span>
+
+            <template #overlay>
+                <Menu 
+                    @click="handleTitleClick"
+                >
+                    <MenuItem key="current"> <span>导出当前页</span> </MenuItem>
+                    <MenuItem key="select"> <span>导出选中列</span> </MenuItem>
+                    <MenuItem key="all"> <span>导出所有列</span> </MenuItem>
+                </Menu>
+            </template>
+        </Dropdown>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+    import { getPopupContainer } from '@dt-frames/core';
+    import { unref } from 'vue'
+    import { Tooltip, Dropdown, Menu, MenuItem } from 'ant-design-vue'
+    import { DtIcon } from '../../../../icons/index'
+    import { getTableInstance } from '../../hooks/useTableInstance';
+
+    const table = getTableInstance()
+    
+
+
+    function handleTitleClick({ key }) {
+        const { onDownload, columns: allColumns, dataSource, rowSelection } = unref(table.getBind)
+
+        const excludesFlag = [ 'ACTION', 'CHECKBOX', 'RADIO' ]
+        const columns = allColumns.filter( it => !excludesFlag.includes(it.flag) )
+
+        onDownload( {
+            type: key,
+            columns, 
+            rows: key === 'select' 
+                ? table.getSelectRows()
+                : key === 'current' 
+                    ? dataSource
+                    : []
+        } )
+    }
+</script>