@dt-frames/ui 1.0.11 → 1.0.12

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

@@ -8,7 +8,10 @@ export type ModalMethods = {
 }
 
 export interface ReturnMethods extends ModalMethods{
-    openModal: <T = any>(data?: T, openOnSet?: boolean) => void
+    openModal: (data?: {
+        data?: Recordable,
+        afterClose?: ( data: Recordable ) => void
+    }, openOnSet?: boolean) => void
     closeModal: () => void
     getVisible?: ComputedRef<boolean>
 }

package/src/components/source/src/hooks/useSource.ts

@@ -1,5 +1,5 @@
 import { ref, reactive, toRaw, Ref } from 'vue'
-import { isString, Recordable, useMessage } from "@dt-frames/core"
+import { isFunction, isString, Recordable, useMessage } from "@dt-frames/core"
 import { BaseDataType, SourceType } from "../types/source.type"
 import { useFetch } from './useFetch'
 import { TableParamsType } from '../types/table.type'

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

@@ -42,7 +42,7 @@
         },
         props: {
             tableTools: {
-                type: Object as PropType<TableSetting | boolean>
+                type: [Object, Boolean] as PropType<TableSetting | boolean>
             },
             toolbar: {
                 type: Array as PropType<BtnsType[]>,

package/src/components/table/src/hooks/useCustomRow.ts

@@ -0,0 +1,86 @@
+import { DtEvent, Recordable } from "@dt-frames/core"
+import { ComputedRef, unref } from "vue"
+import { BasicTableProps } from "../types/table.type"
+
+interface Options {
+    setSelectedRowKeys: (keys: string[]) => void
+    getSelectRowKeys: () => string[]
+    clearSelectedRowKeys: () => void
+    emit: any
+  }
+
+export function useCustomRow(
+    propsRef: ComputedRef<BasicTableProps>,
+    { setSelectedRowKeys, getSelectRowKeys, clearSelectedRowKeys, emit }: Options
+) {
+    const customRow = (record: Recordable, index: number) => {
+        return {
+            onClick: (e) => {
+                e?.stopPropagation()
+
+                function handleClick() {
+                    const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef)
+                    if (!rowSelection || !clickToRowSelect) return
+                    
+                    const keys = getSelectRowKeys()
+                    const key = record[rowKey]
+                    if (!key) return
+
+                    const isCheckbox = rowSelection.type === 'checkbox'
+                    if (isCheckbox) {
+                        const tr: HTMLElement = (e as MouseEvent)
+                            .composedPath?.()
+                            .find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
+                        if (!tr) return
+
+                        const checkBox = tr.querySelector('input[type=checkbox]')
+
+                        if (!checkBox || checkBox.hasAttribute('disabled')) return
+
+                        if (!keys.includes(key)) {
+                            setSelectedRowKeys([...keys, key])
+                            return
+                        }
+
+                        const keyIndex = keys.findIndex((item) => item === key)
+                        keys.splice(keyIndex, 1)
+                        setSelectedRowKeys(keys)
+                        return
+                    }
+
+                    const isRadio = rowSelection.type === 'radio'
+
+                    if (isRadio) {
+                        if (!keys.includes(key)) {
+                            if (keys.length) {
+                                clearSelectedRowKeys()
+                            }
+                            setSelectedRowKeys([key])
+                            return
+                        }
+                        clearSelectedRowKeys()
+                    }
+                }
+
+                handleClick()
+                emit('row-click', record, index, e)
+            },
+            onDblclick: (event: Event) => {
+                emit('row-dbClick', record, index, event);
+            },
+            onContextmenu: (event: Event) => {
+                emit('row-contextmenu', record, index, event);
+            },
+            onMouseenter: (event: Event) => {
+                emit('row-mouseenter', record, index, event);
+            },
+            onMouseleave: (event: Event) => {
+                emit('row-mouseleave', record, index, event);
+            },
+        }
+    }
+
+    return {
+        customRow,
+    }
+}

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({
@@ -52,6 +53,9 @@
             'selection-change',
             'row-click',
             'row-dbClick',
+            'row-contextmenu',
+            'row-mouseenter',
+            'row-mouseleave',
             'expanded-rows-change',
             'edit-change'
         ],
@@ -95,7 +99,7 @@
                 getRowSelection,
                 getSelectRows,
                 getSelectRowKeys,
-
+                setSelectedRowKeys
             } = useRowSelection(getProps, emit)
 
             // 关于滚动条的设置
@@ -145,6 +149,13 @@
                 emit
             )
 
+            // 表格的单击 双击事件
+            const { customRow } = useCustomRow(getProps, {
+                setSelectedRowKeys,
+                getSelectRowKeys,
+                clearSelectedRowKeys,
+                emit
+            })
 
             const getBind = computed(() => {
                 return {
@@ -158,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

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