[Style 0000] 表格高度计算适配等比缩放功能，优化高度计算方法

src/components/Form/src/TableForm.vue

@@ -1,7 +1,7 @@
 <template>
   <Flex class="mb-6px" align="center" justify="space-between">
     <slot name="formTitle">
-      <FormGroup v-model:value="currentGroup" :groups="getBindValue.schemaGroupNames"></FormGroup>
+      <FormGroup v-model:value="currentGroup" :groups="getBindValue.schemaGroupNames" @change="$emit('advanced-change')" />
     </slot>
 
     <FormAction v-bind="getFormActionBindProps" :form-item-props="{ noStyle: true }" @toggle-advanced="handleToggleAdvanced">

src/components/Form/src/components/FormGroup.vue

@@ -32,15 +32,17 @@
         default: () => [],
       },
     },
-    emits: ['update:value'],
+    emits: ['update:value', 'change'],
     setup(props, { emit }) {
       const attrs = useAttrs();
 
       function handleClick(value?: string) {
         if (props.value === value) {
           emit('update:value', undefined);
+          emit('change', undefined);
         } else {
           emit('update:value', value);
+          emit('change', value);
         }
       }
 

src/components/Table/src/BasicTable.vue

@@ -31,7 +31,7 @@
           :rowClassName="getRowClassName"
           @resize-column="handleResizeColumn"
           @change="handleTableChange"
-          style="width: 100%; height: 80% !important; overflow: auto;"
+          style="width: 100%; height: 80% !important; overflow: auto"
         >
           <!-- antd的原生插槽直接传递 -->
           <template #[item]="data" v-for="item in slotNamesGroup.native" :key="item">
@@ -441,7 +441,6 @@
             findItem.width = w;
             setColumns(columns);
           }
-          console.log('col', col);
           col.width = w;
         },
         getFormProps: getFormProps as any,

src/components/Table/src/hooks/useTableScroll.ts

@@ -8,6 +8,7 @@ import { useModalContext } from '/@/components/Modal';
 import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
 import { useDebounceFn } from '@vueuse/core';
 import componentSetting from '/@/settings/componentSetting';
+import { useAppStore } from '/@/store/modules/app';
 
 export function useTableScroll(
   propsRef: ComputedRef<BasicTableProps>,
@@ -21,6 +22,7 @@ export function useTableScroll(
   const tableHeightRef: Ref<Nullable<number>> = ref(null);
 
   const modalFn = useModalContext();
+  const appStore = useAppStore();
 
   // Greater than animation time 280
   const debounceRedoHeight = useDebounceFn(redoHeight, 100);
@@ -58,7 +60,7 @@ export function useTableScroll(
   let bodyEl: HTMLElement | null;
 
   async function calcTableHeight() {
-    const { resizeHeightOffset, pagination, maxHeight, minHeight } = unref(propsRef);
+    const { resizeHeightOffset = 2, pagination, maxHeight, minHeight } = unref(propsRef);
     const tableData = unref(getDataSourceRef);
 
     const table = unref(tableElRef);
@@ -100,13 +102,18 @@ export function useTableScroll(
     if (!headEl) return;
 
     // Table height from bottom
-    const { bottomIncludeBody } = getViewportOffset(headEl);
+    const vpoffset = getViewportOffset(headEl);
+    // Table height after calculating the scale on html tag
+    const bottomIncludeBody = vpoffset.bottomIncludeBody / appStore.heightScale;
     // Table height from bottom height-custom offset
 
     const paddingHeight = 32;
     // Pager height
     let paginationHeight = 2;
-    if (!isBoolean(pagination)) {
+    // 经实践发现只有指定pagination为false才不会显示分页器
+    if (pagination === false) {
+      paginationHeight = -8;
+    } else {
       paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
       if (paginationEl) {
         const offsetHeight = paginationEl.offsetHeight;
@@ -115,8 +122,6 @@ export function useTableScroll(
         // TODO First fix 24
         paginationHeight += 24;
       }
-    } else {
-      paginationHeight = -8;
     }
 
     let footerHeight = 0;
@@ -132,7 +137,8 @@ export function useTableScroll(
       headerHeight = (headEl as HTMLElement).offsetHeight;
     }
 
-    let height = bottomIncludeBody - (resizeHeightOffset || 0) - paddingHeight - paginationHeight - footerHeight - headerHeight;
+    // 高度为表格高度减去底部各个元素高度-内外边距-布局下边距
+    let height = bottomIncludeBody - resizeHeightOffset - paddingHeight - paginationHeight - footerHeight - headerHeight;
     // update-begin--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
     // 10+6(外层边距padding:10 + 内层padding-bottom:6)
     height -= 16;