diff --git a/packages/search-table-react/src/constants/style.tsx b/packages/search-table-react/src/constants/style.tsx index 377f1bb..136ecfb 100644 --- a/packages/search-table-react/src/constants/style.tsx +++ b/packages/search-table-react/src/constants/style.tsx @@ -1,8 +1,3 @@ -export const STYLE_ICON_MORE = { - marginInlineStart: 2, - fontSize: 12, -} - export const STYLE_CODE = { backgroundColor: '#ececec', padding: 16, diff --git a/packages/search-table-react/src/hooks/useColumns/helpers/actions.tsx b/packages/search-table-react/src/hooks/useColumns/helpers/actions.tsx index 06710dd..dbfeb08 100644 --- a/packages/search-table-react/src/hooks/useColumns/helpers/actions.tsx +++ b/packages/search-table-react/src/hooks/useColumns/helpers/actions.tsx @@ -1,44 +1,63 @@ import { DownOutlined } from '@ant-design/icons' import type { IObjectAny } from '@schema-render/core-react' import { utils } from '@schema-render/core-react' -import type { MenuProps } from 'antd' +import { cij } from '@schema-render/form-render-react' import { Button, Dropdown, Popconfirm } from 'antd' import type { ReactNode } from 'react' +import { Fragment } from 'react' import ButtonLoading from '../../../components/ButtonLoading' -import { STYLE_ICON_MORE } from '../../../constants/style' import type { ISearchTableProps } from '../../../typings' import type { IActionItem } from '../../../typings/table.d' const { isArray } = utils +const dropdownCls = cij` + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px 0 #ececec; + min-width: 70px; + padding: 6px; + + > * { + display: block; + width: 100%; + height: auto; + padding: 3px 6px; + + &:hover { + background: #f6f6f6 !important; + } + } +` + /** * 创建「操作栏」按钮 */ export function createActionItem(item: IActionItem, index: number) { - const handleClick = item.onClick + const { text, confirmAgain, confirmProps, onClick, ...restItem } = item const content = ( !item.confirmAgain && handleClick?.(e)} + {...restItem} + onClick={(e) => !confirmAgain && onClick?.(e)} > - {item.text} + {text} ) // 增加二次确认 - if (item.confirmAgain) { + if (confirmAgain) { return ( {content} @@ -80,7 +99,7 @@ export function createActions({ if (displayableItems.length > actionItemsCount) { const displayedItems: IActionItem[] = [] - const dropdownItems: MenuProps['items'] = [] + const dropdownItems: ReactNode[] = [] displayableItems.forEach((item, i) => { /** @@ -89,10 +108,7 @@ export function createActions({ if (i < actionItemsCount - 1) { displayedItems.push(item) } else { - dropdownItems.push({ - key: i, - label: createActionItem(item, i), - }) + dropdownItems.push(createActionItem(item, i)) } }) @@ -102,10 +118,16 @@ export function createActions({ ( +
+ {dropdownItems.map((label, i) => ( + {label} + ))} +
+ )} > -
diff --git a/packages/search-table-react/src/hooks/useColumns/useFinalColumns.tsx b/packages/search-table-react/src/hooks/useColumns/useFinalColumns.tsx index 11a024a..c29b094 100644 --- a/packages/search-table-react/src/hooks/useColumns/useFinalColumns.tsx +++ b/packages/search-table-react/src/hooks/useColumns/useFinalColumns.tsx @@ -78,7 +78,7 @@ export default function useFinalColumns({ table, sortColumns }: IParams) { title: '操作', align: 'center', fixed: 'right', - width: 140, + width: 134, render: actionsRender, key: EColumnsKeys.actions, ...actionItemsColumnData,