| | |
| | | import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table'; |
| | | import type { Ref, ComputedRef } from 'vue'; |
| | | import { computed, unref, nextTick, watch } from 'vue'; |
| | | import { Ref, ComputedRef, ref, computed, unref, nextTick, watch } from 'vue'; |
| | | import { getViewportOffset } from '/@/utils/domUtils'; |
| | | import { isBoolean } from '/@/utils/is'; |
| | | import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; |
| | | import { useModalContext } from '/@/components/Modal'; |
| | | import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'; |
| | | import { onMountedOrActivated } from '@vben/hooks'; |
| | | import { useDebounceFn } from '@vueuse/core'; |
| | | |
| | | export function useTableScroll( |
| | |
| | | columnsRef: ComputedRef<BasicColumn[]>, |
| | | rowSelectionRef: ComputedRef<TableRowSelection | null>, |
| | | getDataSourceRef: ComputedRef<Recordable[]>, |
| | | wrapRef: Ref<HTMLElement | null>, |
| | | formRef: Ref<ComponentRef>, |
| | | ) { |
| | | const tableHeightRef: Ref<Nullable<number | string>> = ref(167); |
| | | const modalFn = useModalContext(); |
| | | |
| | | // Greater than animation time 280 |
| | |
| | | }); |
| | | } |
| | | |
| | | function setHeight() { |
| | | function setHeight(height: number) { |
| | | tableHeightRef.value = height; |
| | | // Solve the problem of modal adaptive height calculation when the form is placed in the modal |
| | | modalFn?.redoModalHeight?.(); |
| | | } |
| | |
| | | let bodyEl: HTMLElement | null; |
| | | |
| | | async function calcTableHeight() { |
| | | const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef); |
| | | const { resizeHeightOffset, pagination, maxHeight, isCanResizeParent, useSearchForm } = |
| | | unref(propsRef); |
| | | const tableData = unref(getDataSourceRef); |
| | | |
| | | const table = unref(tableElRef); |
| | |
| | | |
| | | bodyEl!.style.height = 'unset'; |
| | | |
| | | if (!unref(getCanResize) || tableData.length === 0) return; |
| | | if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return; |
| | | |
| | | await nextTick(); |
| | | // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight |
| | |
| | | |
| | | if (!headEl) return; |
| | | |
| | | // Table height from bottom |
| | | const { bottomIncludeBody } = getViewportOffset(headEl); |
| | | // Table height from bottom height-custom offset |
| | | |
| | | const paddingHeight = 32; |
| | | let paddingHeight = 32; |
| | | // Pager height |
| | | let paginationHeight = 2; |
| | | if (!isBoolean(pagination)) { |
| | |
| | | headerHeight = (headEl as HTMLElement).offsetHeight; |
| | | } |
| | | |
| | | let bottomIncludeBody = 0; |
| | | if (unref(wrapRef) && isCanResizeParent) { |
| | | const tablePadding = 12; |
| | | const formMargin = 16; |
| | | let paginationMargin = 10; |
| | | const wrapHeight = unref(wrapRef)?.offsetHeight ?? 0; |
| | | |
| | | let formHeight = unref(formRef)?.$el.offsetHeight ?? 0; |
| | | if (formHeight) { |
| | | formHeight += formMargin; |
| | | } |
| | | if (isBoolean(pagination) && !pagination) { |
| | | paginationMargin = 0; |
| | | } |
| | | if (isBoolean(useSearchForm) && !useSearchForm) { |
| | | paddingHeight = 0; |
| | | } |
| | | |
| | | const headerCellHeight = |
| | | (tableEl.querySelector('.ant-table-title') as HTMLElement)?.offsetHeight ?? 0; |
| | | |
| | | console.log(wrapHeight - formHeight - headerCellHeight - tablePadding - paginationMargin); |
| | | bottomIncludeBody = |
| | | wrapHeight - formHeight - headerCellHeight - tablePadding - paginationMargin; |
| | | } else { |
| | | // Table height from bottom |
| | | bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody; |
| | | } |
| | | |
| | | let height = |
| | | bottomIncludeBody - |
| | | (resizeHeightOffset || 0) - |
| | |
| | | paginationHeight - |
| | | footerHeight - |
| | | headerHeight; |
| | | |
| | | height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; |
| | | setHeight(); |
| | | setHeight(height); |
| | | |
| | | bodyEl!.style.height = `${height}px`; |
| | | } |
| | |
| | | |
| | | const columns = unref(columnsRef).filter((item) => !item.defaultHidden); |
| | | columns.forEach((item) => { |
| | | width += Number.parseInt(item.width as string) || 0; |
| | | width += Number.parseFloat(item.width as string) || 0; |
| | | }); |
| | | const unsetWidthColumns = columns.filter((item) => !Reflect.has(item, 'width')); |
| | | |
| | |
| | | }); |
| | | |
| | | const getScrollRef = computed(() => { |
| | | const tableHeight = unref(tableHeightRef); |
| | | const { canResize, scroll } = unref(propsRef); |
| | | return { |
| | | x: unref(getScrollX), |
| | | y: canResize ? '100%' : null, |
| | | y: canResize ? tableHeight : null, |
| | | scrollToFirstRowOnChange: false, |
| | | ...scroll, |
| | | }; |