@dt-frames/ui 1.0.9 → 1.0.12

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

@@ -37,6 +37,7 @@
     import { useColumns } from "./hooks/useColumns"
     import { useTableHeader } from "./hooks/useTableHeader"
     import { useTableScroll } from "./hooks/useTableScroll"
+    import { useCustomRow } from "./hooks/useCustomRow"
 
 
     export default defineComponent({
@@ -49,7 +50,14 @@
         emits: [
             'register',
             'columns-change',
-            'selection-change'
+            'selection-change',
+            'row-click',
+            'row-dbClick',
+            'row-contextmenu',
+            'row-mouseenter',
+            'row-mouseleave',
+            'expanded-rows-change',
+            'edit-change'
         ],
         setup(props, { emit, attrs, slots }) {
             // table实例
@@ -91,7 +99,7 @@
                 getRowSelection,
                 getSelectRows,
                 getSelectRowKeys,
-
+                setSelectedRowKeys
             } = useRowSelection(getProps, emit)
 
             // 关于滚动条的设置
@@ -116,6 +124,7 @@
                 getCacheColumns,
                 getSelectRows,
                 getSelectRowKeys,
+                emit,
                 getSize: () => {
                     return unref(getBind).size as SizeType;
                 }
@@ -140,6 +149,13 @@
                 emit
             )
 
+            // 表格的单击 双击事件
+            const { customRow } = useCustomRow(getProps, {
+                setSelectedRowKeys,
+                getSelectRowKeys,
+                clearSelectedRowKeys,
+                emit
+            })
 
             const getBind = computed(() => {
                 return {
@@ -153,7 +169,8 @@
                     rowSelection: unref(getRowSelectionRef),
                     rowKey: unref(getProps).rowKey,
                     columns: unref(getViewColumns),
-                    tableLayout: 'fixed'
+                    tableLayout: 'fixed',
+                    customRow,
                 }
             })
 

package/src/components/table/src/props.ts

@@ -12,7 +12,10 @@ export const TableProps = {
     clickRowSelect: { type: Boolean, default: false },
 
     // 表格设置
-    tableSetting: {type: Object as PropType<TableSetting>, default: () => ({})},
+    tableSetting: {type: Object as PropType<TableSetting | boolean>, default: () => ({})},
+
+    // 点击行是否可以选中整行数据
+    clickToRowSelect: { type: Boolean, default: false },
 
     // 是否显示斑马条纹
     striped: { type: Boolean, default: true },

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

@@ -88,6 +88,22 @@ export type ActionType = {
     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 {
     // 子元素
@@ -107,7 +123,17 @@ export interface BasicColumn extends ColumnProps {
 
     edit?: boolean
     editRow?: boolean
-    // editable?: 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
@@ -130,4 +156,5 @@ export type TableActionType = {
     setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
     getSelectRows: ( ) => void
     getSelectRowKeys: ( ) => void
+    emit?: any
 }

package/src/components/tree/index.less

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

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

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

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

package/src/components/tree/src/hooks/useTree.ts

@@ -0,0 +1,239 @@
+import { TreeDataItem } from "ant-design-vue/lib/tree"
+import { ComputedRef, Ref, unref } from "vue"
+import { cloneDeep } from 'lodash-es'
+import { FieldNames, InsertNodeParams, TreeItem, KeyType } from "../type/tree"
+import { forEach } from "../utils/tree"
+
+export function useTree(
+    treeDataRef: Ref<TreeDataItem[]>, 
+    getFieldNames: ComputedRef<FieldNames>
+) {
+
+    function getAllKeys(list?: TreeDataItem[]) {
+        const keys: string[] = []
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return keys
+
+        for (let index = 0; index < treeData.length; index++) {
+            const node = treeData[index]
+            keys.push(node[keyField]!)
+
+            const children = node[childrenField]
+
+            if (children && children.length) {
+                keys.push(...(getAllKeys(children) as string[]))
+            }
+        }
+
+        return keys as KeyType[]
+    }
+
+    function getEnabledKeys(list?: TreeDataItem[]) {
+        const keys: string[] = []
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return keys
+
+        for (let index = 0; index < treeData.length; index++) {
+            const node = treeData[index]
+            node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!)
+
+            const children = node[childrenField]
+            if (children && children.length) {
+                keys.push(...(getEnabledKeys(children) as string[]))
+            }
+        }
+
+        return keys as KeyType[]
+    }
+
+    // 获取节点的keys
+    function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
+        const keys: KeyType[] = []
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return keys
+
+        for (let index = 0; index < treeData.length; index++) {
+            const node = treeData[index]
+            const children = node[childrenField]
+
+            if (nodeKey === node[keyField]) {
+                keys.push(node[keyField]!)
+
+                if (children && children.length) {
+                    keys.push(...(getAllKeys(children) as KeyType[]))
+                }
+            } else {
+                if (children && children.length) {
+                    keys.push(...getChildrenKeys(nodeKey, children))
+                }
+            }
+        }
+
+        return keys as KeyType[]
+    }
+
+
+    function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
+        if (!key) return
+
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return
+
+        for (let index = 0; index < treeData.length; index++) {
+            const element: any = treeData[index]
+            const children = element[childrenField]
+
+            if (element[keyField] === key) {
+                treeData[index] = { ...treeData[index], ...node }
+                break
+            } else if (children && children.length) {
+                updateNodeByKey(key, node, element[childrenField])
+            }
+        }
+
+    }
+
+
+    function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
+        if (!level) return [] 
+
+        const res: (string | number)[] = []
+        const data = list || unref(treeDataRef) || []
+
+        for (let index = 0; index < data.length; index++) {
+            const item = data[index]
+
+            const { key: keyField, children: childrenField } = unref(getFieldNames)
+            const key = keyField ? item[keyField] : ''
+            const children = childrenField ? item[childrenField] : []
+            res.push(key)
+
+            if (children && children.length && currentLevel < level) {
+                currentLevel += 1;
+                res.push(...filterByLevel(level, children, currentLevel));
+            }
+        }
+
+        return res as string[] | number[]
+    }
+
+    // 添加节点
+    function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
+        const treeData: any = cloneDeep(unref(treeDataRef))
+
+        if (!parentKey) {
+            treeData[push](node)
+            treeDataRef.value = treeData
+            return
+        }
+
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+        if (!childrenField || !keyField) return
+
+        forEach(treeData, (treeItem) => {
+            if (treeItem[keyField] === parentKey) {
+                treeItem[childrenField] = treeItem[childrenField] || []
+                treeItem[childrenField][push](node)
+                return true
+            }
+        })
+        treeDataRef.value = treeData
+    }
+
+    // 批量添加节点
+    function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
+        const treeData: any = cloneDeep(unref(treeDataRef))
+
+        if (!list || list.length < 1) return
+
+        if (!parentKey) {
+            for (let i = 0; i < list.length; i++) {
+                treeData[push](list[i]);
+            }
+        } else {
+            const { key: keyField, children: childrenField } = unref(getFieldNames)
+            if (!childrenField || !keyField) return
+
+            forEach(treeData, (treeItem) => {
+                if (treeItem[keyField] === parentKey) {
+                    treeItem[childrenField] = treeItem[childrenField] || []
+
+                    for (let i = 0; i < list.length; i++) {
+                        treeItem[childrenField][push](list[i])
+                    }
+
+                    treeDataRef.value = treeData
+
+                    return true
+                }
+            })
+        }
+    }
+
+    // 通过key 删除节点
+    function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
+        if (!key) return
+
+        const treeData = list || unref(treeDataRef)
+        const { key: keyField, children: childrenField } = unref(getFieldNames)
+
+        if (!childrenField || !keyField) return
+
+        for (let index = 0; index < treeData.length; index++) {
+            const element: any = treeData[index]
+            const children = element[childrenField]
+      
+            if (element[keyField] === key) {
+
+                treeData.splice(index, 1)
+                break
+
+            } else if (children && children.length) {
+
+                deleteNodeByKey(key, element[childrenField])
+
+            }
+        }
+    }
+
+    function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
+        if (!key && key !== 0) return null
+
+        const treeData = list || unref(treeDataRef)
+
+        treeData.forEach(item => {
+            if (selectedNode?.key || selectedNode?.key === 0) return selectedNode
+
+            if (item.key === key) {
+                selectedNode = item
+                return
+            }
+
+            if (item.children && item.children.length) {
+                selectedNode = getSelectedNode(key, item.children, selectedNode)
+            }
+        })
+
+        return selectedNode || null
+    }
+
+    return {
+        getAllKeys,
+        getEnabledKeys,
+        getChildrenKeys,
+        updateNodeByKey,
+        filterByLevel,
+        insertNodeByKey,
+        insertNodesByKey,
+        deleteNodeByKey,
+        getSelectedNode
+    }
+}