@dt-frames/ui 1.0.12 → 1.0.16

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

@@ -1,354 +0,0 @@
-<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, nextTick } from 'vue'
-    import type { ColumnStateType, ColumnOptionsType } from '../../types/tableHeader.type'
-    import { getTableInstance } from '../../hooks/useTableInstance'
-    import { BasicColumn } from '../../types/table.type'
-    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

@@ -1,55 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<template>
-    <Download v-if="getSetting.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 {
-                    download: 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

@@ -1,13 +0,0 @@
-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
-}