From b9b707ab44ff3f696f434c57527d0abdf5a3d7b7 Mon Sep 17 00:00:00 2001
From: llq-yyds <958614130@qq.com>
Date: Sun, 16 Jul 2023 15:25:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A0=91=E5=BD=A2?=
 =?UTF-8?q?=E5=A4=8D=E9=80=89=E6=A1=86=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                 |  4 +--
 src/Table/base/BaseTable.tsx | 25 ++++++++++++---
 src/Table/demos/Demo12.tsx   | 60 ++++++++++++++++++++++++++++++++++++
 src/Table/demos/Demo5.tsx    | 57 +++++++++++++++++++---------------
 src/Table/index.md           |  9 ++++--
 5 files changed, 121 insertions(+), 34 deletions(-)
 create mode 100644 src/Table/demos/Demo12.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index dbfb3d3c..f8016d73 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,8 +10,8 @@ module.exports = {
 };
 
 //     提交信息规范 (冒号后面有个空格) 例如(test: 增加单元测试)
-//     feat: 新功能（feature）
-//     fix：修补bug 修改业务
+//     feat: 新功能（featu修改业务re）
+//     fix：修补bug
 //     docs：文档（documentation）
 //     style： 格式（不影响代码运行的变动,空格缩进等）
 //     refactor：重构代码（即不是新增功能，也不是修改bug的代码变动）
diff --git a/src/Table/base/BaseTable.tsx b/src/Table/base/BaseTable.tsx
index 6516c772..87c1d367 100644
--- a/src/Table/base/BaseTable.tsx
+++ b/src/Table/base/BaseTable.tsx
@@ -25,6 +25,7 @@ import type {
 import {
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -349,6 +350,8 @@ const showTotal = (total: number, range: [value0: Key, value1: Key]) => (
 const BaseTable: FC<Partial<LTableProps>> = (props) => {
   const {
     isSort = false,
+    fillSpace = false,
+
     className,
     nowrap,
 
@@ -621,11 +624,20 @@ const BaseTable: FC<Partial<LTableProps>> = (props) => {
     tableData:
       data?.list ?? ((restProps?.dataSource || []) as Record<string, any>[]),
     // 页码信息
-    pagination: {
-      current: paginationAction.current,
-      pageSize: paginationAction.pageSize,
-    },
+    pagination: paginationAction,
   }));
+  const tablecardref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (fillSpace) {
+      const _minHeght =
+        document.documentElement.clientHeight -
+        tablecardref.current!.getBoundingClientRect().top;
+      tablecardref.current!.style.minHeight = `${_minHeght}px`;
+    } else {
+      tablecardref.current!.style.minHeight = `auto`;
+    }
+  }, [fillSpace]);
 
   // 初始化请求
   useEffect(() => {
@@ -672,9 +684,12 @@ const BaseTable: FC<Partial<LTableProps>> = (props) => {
   const tableDom = (
     <Spin {...currentLoading}>
       <Card
+        ref={tablecardref}
         bordered={false}
         {...tableCardProps}
-        style={{ ...tableCardProps?.style }}
+        style={{
+          ...tableCardProps?.style,
+        }}
         className={classnames(`${LIGHTD_CARD}`, tableCardProps?.className)}
       >
         {toolbarRender ? toolbarRender(ToolbarActionDom) : toolbarDom}
diff --git a/src/Table/demos/Demo12.tsx b/src/Table/demos/Demo12.tsx
new file mode 100644
index 00000000..9cece962
--- /dev/null
+++ b/src/Table/demos/Demo12.tsx
@@ -0,0 +1,60 @@
+import { Switch, type FormInstance } from 'antd';
+import type { LTableInstance } from 'lighting-design';
+import { LFormItemInput, LTable } from 'lighting-design';
+import type { FC } from 'react';
+import { useRef, useState } from 'react';
+import { columns, originData } from './service';
+
+const formItems = [
+  <LFormItemInput key="0" name="input4" label="输入框1" />,
+  <LFormItemInput key="1" name="input5" label="输入框2" />,
+  <LFormItemInput key="2" name="input6" label="输入框3" />,
+  <LFormItemInput key="3" name="input7" label="输入框4" />,
+  <LFormItemInput key="4" name="input8" label="输入框5" />,
+];
+const publicCardProps = {
+  style: {
+    borderRadius: 0,
+  },
+};
+const data = originData.slice(6);
+
+const Demo12: FC = () => {
+  const formRef = useRef<FormInstance>();
+  const tableRef = useRef<LTableInstance>();
+  const [fillSpace, setFillSpace] = useState(false);
+
+  return (
+    <>
+      <div>
+        <span>是否占满视口剩余空间：</span>
+        <Switch checked={fillSpace} onChange={(b) => setFillSpace(b)} />
+      </div>
+      <LTable
+        queryFormProps={{
+          size: 'small',
+        }}
+        size="small"
+        fillSpace={fillSpace}
+        rowKey="key"
+        tableRef={tableRef}
+        tableCardProps={publicCardProps}
+        formCardProps={publicCardProps}
+        showToolbar={false}
+        formItems={formItems}
+        formRef={formRef}
+        columns={columns}
+        request={async (params) => {
+          console.log('params', params);
+          return {
+            success: true,
+            data,
+            total: data?.length,
+          };
+        }}
+      />
+    </>
+  );
+};
+
+export default Demo12;
diff --git a/src/Table/demos/Demo5.tsx b/src/Table/demos/Demo5.tsx
index ab98e1f8..f7eb021c 100644
--- a/src/Table/demos/Demo5.tsx
+++ b/src/Table/demos/Demo5.tsx
@@ -25,8 +25,8 @@ const Demo5: FC = () => {
     params: LTableRequestParams,
     requestType: LTableRequestType,
   ) => {
-    console.log('==params==', params);
-    console.log('==requestType==', requestType);
+    // console.log('==params==', params);
+    // console.log('==requestType==', requestType);
     const res: Record<string, any> = await apiGetUserList();
     return {
       success: true,
@@ -36,29 +36,36 @@ const Demo5: FC = () => {
   };
 
   return (
-    <LTable
-      // loading={{
-      //   spinning: true,
-      //   size: 'large',
-      // }}
-      sticky
-      rowKey="key"
-      tableRef={tableRef}
-      queryFormProps={{
-        showColsNumber: 3,
-      }}
-      showToolbar={false}
-      className="my-lightd-row-111"
-      rowClassName="my-lightd-row-999"
-      formItems={formItems}
-      formRef={formRef}
-      columns={columns}
-      defaultRequestParams={{ age: 25 }}
-      onChange={() => {
-        console.log(' onChange');
-      }}
-      request={requestGetUserList}
-    />
+    <>
+      <LTable
+        // loading={{
+        //   spinning: true,
+        //   size: 'large',
+        // }}
+        sticky
+        rowKey="key"
+        tableRef={tableRef}
+        queryFormProps={{
+          showColsNumber: 3,
+        }}
+        tableCardProps={{
+          style: {
+            borderRadius: 0,
+          },
+        }}
+        showToolbar={false}
+        className="my-lightd-row-111"
+        rowClassName="my-lightd-row-999"
+        formItems={formItems}
+        formRef={formRef}
+        columns={columns}
+        defaultRequestParams={{ age: 25 }}
+        onChange={() => {
+          console.log(' onChange');
+        }}
+        request={requestGetUserList}
+      />
+    </>
   );
 };
 
diff --git a/src/Table/index.md b/src/Table/index.md
index 8de3e5fe..b4b9cf4a 100644
--- a/src/Table/index.md
+++ b/src/Table/index.md
@@ -64,6 +64,12 @@ nav:
 
 <code src='./demos/Demo7.tsx' background="#f5f5f5"></code>
 
+### 填充视口剩余空间
+
+不要在弹窗，抽屉，下拉等组件中使用
+
+<code src='./demos/Demo12.tsx' background="#f5f5f5"  iframe='1080'></code>
+
 ### 编辑表格
 
 [编辑表格行](https://ant.design/components/table-cn#components-table-demo-edit-row)
@@ -90,11 +96,10 @@ import { LTable } from 'lighting-design';
 
 除了以下参数，其余和 [antd.Table](https://ant.design/components/table-cn/#api) 一样。
 
-<!-- | fillSpace | 表格外层 div 是否占满剩余空间 | `boolean` | `false` | -->
-
 | 参数                 | 说明                                                                                                 | 类型                                                                           | 默认值                                             |
 | -------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------- |
 | isSort               | 表格是否需要排序序号                                                                                 | `boolean`                                                                      | `false`                                            |
+| fillSpace            | 是否占满视口剩余空间的高度 `(不要在弹窗，抽屉，下拉等组件中配置)`                                    | `boolean`                                                                      | `false`                                            |
 | isReady              | 表格 表单是否准备好 false 时表格不会请求 表单不能提交查询                                            | `boolean`                                                                      | `true`                                             |
 | fullScreenBgColor    | 全屏时显示的背景颜色                                                                                 | `string`                                                                       | `#fff`                                             |
 | nowrap               | 表格宽度超过 100%自动处理横向滚动条。                                                                | `boolean`                                                                      | `true`                                             |