| 提交 | 用户 | age | ||
| 354904 | 1 | import type { ComputedRef } from 'vue'; |
| V | 2 | import type { BasicTableProps } from '../types/table'; |
| 3 | import { unref } from 'vue'; | |
| 4 | import { ROW_KEY } from '../const'; | |
| 5 | import { isString, isFunction } from '/@/utils/is'; | |
| 6 | ||
| 7 | interface Options { | |
| 8 | setSelectedRowKeys: (keys: string[]) => void; | |
| 9 | getSelectRowKeys: () => string[]; | |
| 10 | clearSelectedRowKeys: () => void; | |
| 11 | emit: EmitType; | |
| 12 | getAutoCreateKey: ComputedRef<boolean | undefined>; | |
| 13 | } | |
| 14 | ||
| 15 | function getKey( | |
| 16 | record: Recordable, | |
| 17 | rowKey: string | ((record: Record<string, any>) => string) | undefined, | |
| 18 | autoCreateKey?: boolean | |
| 19 | ) { | |
| 20 | if (!rowKey || autoCreateKey) { | |
| 21 | return record[ROW_KEY]; | |
| 22 | } | |
| 23 | if (isString(rowKey)) { | |
| 24 | return record[rowKey]; | |
| 25 | } | |
| 26 | if (isFunction(rowKey)) { | |
| 27 | return record[rowKey(record)]; | |
| 28 | } | |
| 29 | return null; | |
| 30 | } | |
| 31 | ||
| 32 | export function useCustomRow( | |
| 33 | propsRef: ComputedRef<BasicTableProps>, | |
| 34 | { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options | |
| 35 | ) { | |
| 36 | const customRow = (record: Recordable, index: number) => { | |
| 37 | return { | |
| 38 | onClick: (e: Event) => { | |
| 39 | emit('row-click', record, index, e); | |
| 40 | e?.stopPropagation(); | |
| 41 | const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef); | |
| 42 | if (!rowSelection || !clickToRowSelect) return; | |
| 43 | const keys = getSelectRowKeys(); | |
| 44 | const key = getKey(record, rowKey, unref(getAutoCreateKey)); | |
| 45 | if (!key) return; | |
| 46 | ||
| 47 | const isCheckbox = rowSelection.type === 'checkbox'; | |
| 48 | if (isCheckbox) { | |
| 49 | if (!keys.includes(key)) { | |
| 50 | setSelectedRowKeys([...keys, key]); | |
| 51 | return; | |
| 52 | } | |
| 53 | const keyIndex = keys.findIndex((item) => item === key); | |
| 54 | keys.splice(keyIndex, 1); | |
| 55 | setSelectedRowKeys(keys); | |
| 56 | return; | |
| 57 | } | |
| 58 | ||
| 59 | const isRadio = rowSelection.type === 'radio'; | |
| 60 | if (isRadio) { | |
| 61 | if (!keys.includes(key)) { | |
| 62 | if (keys.length) { | |
| 63 | clearSelectedRowKeys(); | |
| 64 | } | |
| 65 | setSelectedRowKeys([key]); | |
| 66 | return; | |
| 67 | } | |
| 68 | clearSelectedRowKeys(); | |
| 69 | } | |
| 70 | }, | |
| 71 | onDblclick: (event: Event) => { | |
| 72 | emit('row-dbClick', record, index, event); | |
| 73 | }, | |
| 74 | onContextmenu: (event: Event) => { | |
| 75 | emit('row-contextmenu', record, index, event); | |
| 76 | }, | |
| 77 | onMouseenter: (event: Event) => { | |
| 78 | emit('row-mouseenter', record, index, event); | |
| 79 | }, | |
| 80 | onMouseleave: (event: Event) => { | |
| 81 | emit('row-mouseleave', record, index, event); | |
| 82 | }, | |
| 83 | }; | |
| 84 | }; | |
| 85 | ||
| 86 | return { | |
| 87 | customRow, | |
| 88 | }; | |
| 89 | } | |
