@dt-frames/ui 1.0.1 → 1.0.4

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>

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