| 提交 | 用户 | age | ||
| a1ffb6 | 1 | import type { PaginationProps } from '../types/pagination'; |
| V | 2 | import type { BasicTableProps } from '../types/table'; |
| d6f65d | 3 | import { computed, unref, ref, ComputedRef, watch } from 'vue'; |
| faf3f4 | 4 | import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'; |
| a1ffb6 | 5 | import { isBoolean } from '/@/utils/is'; |
| faf3f4 | 6 | import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const'; |
| dc09de | 7 | import { useI18n } from '/@/hooks/web/useI18n'; |
| V | 8 | |
| 354904 | 9 | interface ItemRender { |
| V | 10 | page: number; |
| 11 | type: 'page' | 'prev' | 'next'; | |
| 12 | originalElement: any; | |
| 13 | } | |
| 14 | ||
| 15 | function itemRender({ page, type, originalElement }: ItemRender) { | |
| 16 | if (type === 'prev') { | |
| 17 | return page === 0 ? null : <LeftOutlined />; | |
| 18 | } else if (type === 'next') { | |
| 19 | return page === 1 ? null : <RightOutlined />; | |
| 20 | } | |
| 21 | return originalElement; | |
| 22 | } | |
| 23 | ||
| faf3f4 | 24 | export function usePagination(refProps: ComputedRef<BasicTableProps>) { |
| 391da9 | 25 | const { t } = useI18n(); |
| faf3f4 | 26 | |
| 391da9 | 27 | const configRef = ref<PaginationProps>({}); |
| a2c89d | 28 | const show = ref(true); |
| V | 29 | |
| d6f65d | 30 | watch( |
| L | 31 | () => unref(refProps).pagination, |
| 32 | (pagination) => { | |
| 33 | if (!isBoolean(pagination) && pagination) { | |
| 34 | configRef.value = { | |
| 35 | ...unref(configRef), | |
| 36 | ...(pagination ?? {}), | |
| 37 | }; | |
| 38 | } | |
| 39 | }, | |
| 40 | ); | |
| e32789 | 41 | |
| 354904 | 42 | const getPaginationInfo = computed((): PaginationProps | boolean => { |
| V | 43 | const { pagination } = unref(refProps); |
| 44 | ||
| a2c89d | 45 | if (!unref(show) || (isBoolean(pagination) && !pagination)) { |
| faf3f4 | 46 | return false; |
| 陈 | 47 | } |
| a2c89d | 48 | |
| faf3f4 | 49 | return { |
| 陈 | 50 | current: 1, |
| 51 | pageSize: PAGE_SIZE, | |
| 52 | size: 'small', | |
| 53 | defaultPageSize: PAGE_SIZE, | |
| 962f90 | 54 | showTotal: (total) => t('component.table.total', { total }), |
| faf3f4 | 55 | showSizeChanger: true, |
| 陈 | 56 | pageSizeOptions: PAGE_SIZE_OPTIONS, |
| 354904 | 57 | itemRender: itemRender, |
| faf3f4 | 58 | showQuickJumper: true, |
| 陈 | 59 | ...(isBoolean(pagination) ? {} : pagination), |
| 60 | ...unref(configRef), | |
| 61 | }; | |
| 62 | }); | |
| 63 | ||
| 64 | function setPagination(info: Partial<PaginationProps>) { | |
| 354904 | 65 | const paginationInfo = unref(getPaginationInfo); |
| faf3f4 | 66 | configRef.value = { |
| 354904 | 67 | ...(!isBoolean(paginationInfo) ? paginationInfo : {}), |
| faf3f4 | 68 | ...info, |
| 陈 | 69 | }; |
| 70 | } | |
| 354904 | 71 | |
| V | 72 | function getPagination() { |
| 73 | return unref(getPaginationInfo); | |
| 74 | } | |
| a2c89d | 75 | |
| V | 76 | function getShowPagination() { |
| 77 | return unref(show); | |
| 78 | } | |
| 79 | ||
| 80 | async function setShowPagination(flag: boolean) { | |
| 81 | show.value = flag; | |
| 82 | } | |
| 83 | ||
| 84 | return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination }; | |
| faf3f4 | 85 | } |
