From a4021472498952c1cee0243c772b39d3a47315ea Mon Sep 17 00:00:00 2001 From: dark Date: Sun, 7 Jul 2024 00:27:54 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dialog/useDialog.tsx | 10 ++- src/components/modal-pro/index.tsx | 37 +++++++++++ src/components/table/Table.tsx | 21 ++++++- src/components/table/style.ts | 120 ++++++++++++++++++++++++++---------- 4 files changed, 153 insertions(+), 35 deletions(-) create mode 100644 src/components/modal-pro/index.tsx diff --git a/src/components/dialog/useDialog.tsx b/src/components/dialog/useDialog.tsx index c8466b6..127f013 100644 --- a/src/components/dialog/useDialog.tsx +++ b/src/components/dialog/useDialog.tsx @@ -1,7 +1,11 @@ import Dialog, { DialogProps, DialogRef } from './index.tsx' -import { useRef, useCallback, useMemo } from 'react' +import React, { useRef, useCallback, useMemo } from 'react' -export const useDialog = (props: DialogProps) => { +export interface UseDialogProps extends DialogProps { + content?: React.ReactNode | JSX.Element +} + +export const useDialog = ({ content, children, ...props }: UseDialogProps) => { const dialogRef = useRef() const openDialog = useCallback((data?: any) => { @@ -20,7 +24,7 @@ export const useDialog = (props: DialogProps) => { } }, []) - const dialog = useMemo(() => , [ props ]) + const dialog = useMemo(() => {content || children}, [ props ]) return [ dialogRef, dialog, openDialog, closeDialog ] as const } diff --git a/src/components/modal-pro/index.tsx b/src/components/modal-pro/index.tsx new file mode 100644 index 0000000..b6af677 --- /dev/null +++ b/src/components/modal-pro/index.tsx @@ -0,0 +1,37 @@ +import { Modal, ModalFuncProps } from 'antd' +import React from 'react' +import { HookAPI } from 'antd/es/modal/useModal' +import { useDialog } from '@/components/dialog' + +export interface AlterProps extends ModalFuncProps { + onLoad?: () => void + alterType: keyof HookAPI | 'dialog' + children: JSX.Element | React.ReactNode + +} + +const ModalPro = ({ onLoad, alterType, children, ...props }: AlterProps) => { + + const [ modal, modalHolder ] = Modal.useModal() + const [ dialogRef, dialog, ] = useDialog(props) + + + return ( + <> + { + if (onLoad) { + onLoad() + } + if (alterType === 'dialog') { + dialogRef.current?.show() + } else { + modal[alterType]?.(props) + } + }}>{children} + {alterType !== 'dialog' && modalHolder} + {alterType === 'dialog' && dialog} + + ) +} + +export default ModalPro \ No newline at end of file diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx index dd6da13..ab301c8 100644 --- a/src/components/table/Table.tsx +++ b/src/components/table/Table.tsx @@ -1,6 +1,8 @@ import { ProTable, ProTableProps, ProCard } from '@ant-design/pro-components' import React, { useEffect, useRef, useState } from 'react' import { useStyle } from './style' +import { Pagination } from 'antd' +import { t } from '@/i18n.ts' export interface TableProps extends ProTableProps { @@ -65,6 +67,7 @@ export const Table = = any, D = any>(props: Table }, [ alterRef.current ]) + const style = { '--toolbar-height': `${toolbarHeight}px`, '--alter-height': `${alterHeight}px`, @@ -76,6 +79,13 @@ export const Table = = any, D = any>(props: Table className={styles.container} style={style} tableRender={(props, _dom, domList) => { + const pagination = props.pagination as any + + if (pagination !== false) { + pagination.align = pagination.align || 'end' + pagination.position = pagination.position || 'bottomRight' + } + return = any, D = any>(props: Table }} >
{domList.toolbar}
-
{domList.alert}
<>{domList.table} +
+ <>{domList.alert} +
+ `${t('pagination.total.range', '第')} ${range[0]}-${range[1]} ${t('pagination.total.total', '条/总共')} ${total} ${t('pagination.total.item', '条')}`} + showQuickJumper={true} + showSizeChanger={true}/> +
}} scroll={scroll} diff --git a/src/components/table/style.ts b/src/components/table/style.ts index 96e2cc9..4804c32 100644 --- a/src/components/table/style.ts +++ b/src/components/table/style.ts @@ -1,48 +1,106 @@ import { createStyles } from '@/theme' import { useScrollStyle } from '@/hooks/useScrollStyle.ts' +import { unit } from '@ant-design/cssinjs' export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => { - const prefix = `${prefixCls}-${token?.proPrefix}-my-table` - const { scrollbar } = useScrollStyle() + const prefix = `${prefixCls}-${token?.proPrefix}-my-table` + const { scrollbar } = useScrollStyle() - const container = css` + const container = css` - --toolbar-height: 65px; - --alter-height: 0px; - --padding: 33px; - --table-body-height: calc( var(--pageHeader, 0px) + var(--toolbar-height, 65px) + var(--alter-height, 0px) + var(--header-height, 56px) + var(--padding, 20px) * 4); + --toolbar-height: 65px; + --alter-height: 0px; + --padding: 33px; + --table-body-height: calc(var(--pageHeader, 0px) + var(--toolbar-height, 65px) + var(--alter-height, 0px) + var(--header-height, 56px) + var(--padding, 20px) * 4); - .ant-table-body { - overflow: auto scroll; - max-height: calc(100vh - var(--table-body-height)) !important; - height: calc(100vh - var(--table-body-height)) !important; - - } + .ant-table-body { + overflow: auto scroll; + max-height: calc(100vh - var(--table-body-height)) !important; + height: calc(100vh - var(--table-body-height)) !important; + + } + .ant-table-wrapper .ant-table { + scrollbar-color: unset; + } - .ant-table-wrapper .ant-table{ - scrollbar-color: unset; + .ant-table-wrapper { + .ant-pagination { + display: none; } - .ant-table-body{ + } - ${scrollbar} + .ant-table-body { + ${scrollbar} + + } + + .ant-table-pagination.ant-pagination { + margin: ${unit(token.margin)} 0; + } + + + .ant-table-cell { + .ant-divider-vertical { + margin-inline: 0; } - .ant-table-pagination.ant-pagination { - border-top: 1px solid #ebeef5; - height: 51px; - margin: 0; - align-content: center; - } + } + ` + + const pagination = { + + borderTop: '1px solid #ebeef5', + height: '51px', + margin: '0', + alignContent: 'center', + display: 'flex', + flexWrap: 'wrap', + rowGap: token.paddingXS, + justifyContent: 'flex-end', + + + '> *': { + flex: 'none', + }, + + '&-left': { + justifyContent: 'flex-start', + }, + + '&-center': { + justifyContent: 'center', + }, + + '&-right': { + justifyContent: 'flex-end', + }, + } + + const footer = css` + display: flex; + justify-content: space-between; + align-items: center; + overflow: hidden; + + .ant-pro-table-alert{ + max-width: 50%; + overflow: auto; + margin-block-end: 0; + background-color: transparent; - .ant-table-cell{ - .ant-divider-vertical{ - margin-inline: 0; - } + .ant-pro-table-alert-container{ + padding-inline: 0; } - ` - - return { - container: cx(prefix, props?.className, container), } + &-fill{ + flex: 1; + } + ` + + return { + container: cx(prefix, props?.className, container), + pagination: pagination as any, + footer, + } }) \ No newline at end of file