From 2c947a24d56801c4c48c5d6ac7c43f1ede04d3d7 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Thu, 12 Sep 2024 15:39:47 +0800
Subject: [PATCH] feat: 大厅来访完善
---
gz-customerSystem/src/components/TableView/index.jsx | 79 +++++++++++++++++++++++++++------------
1 files changed, 54 insertions(+), 25 deletions(-)
diff --git a/gz-customerSystem/src/components/TableView/index.jsx b/gz-customerSystem/src/components/TableView/index.jsx
index 6ef01a6..085038b 100644
--- a/gz-customerSystem/src/components/TableView/index.jsx
+++ b/gz-customerSystem/src/components/TableView/index.jsx
@@ -7,12 +7,13 @@
* @Version: 1.0.0
* @Description: 公共Table封装组件
*/
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Space, Tooltip, Table } from 'antd';
import { ReloadOutlined, FolderFilled } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import './index.less';
+import { getOffset, getSize } from '@/utils/utility';
const TableView = ({
showHeader,
@@ -30,6 +31,8 @@
scroll = null,
expandable = null,
rowClassName,
+ offsetHeight = 0,//高度偏移量
+ tableHeight,//自定义表格高度
...other
}) => {
// 80 ['类型','登记人','调解员','承办法官','调解员','签收人','退回人','处理时限','调解进度/司法确认进度','其他调解员','申请渠道','司法确认结果','助理/书记员','调解类型']
@@ -143,6 +146,27 @@
myColumns.push(x);
});
+ const scrollRef = useRef(null)
+ const [height, setHeight] = useState(500);//表格高度
+
+ useEffect(() => {
+ onWindowResize()
+ window.addEventListener("resize", onWindowResize);
+ // 返回一个函数，该函数会在组件卸载前执行
+ return () => {
+ // 组件销毁时执行
+ window.removeEventListener("resize", onWindowResize);
+ };
+ }, [])
+
+ const onWindowResize = () => {
+ let offsetTop = 0;
+ if (scrollRef && scrollRef.current) {
+ offsetTop = getOffset(scrollRef.current).top;
+ }
+ setHeight(getSize().windowH - offsetTop - 46 - offsetHeight)
+ };
+
return (
<>
{showHeader && (
@@ -171,30 +195,35 @@
</div>
</div>
)}
- <Table
- columns={myColumns}
- dataSource={dataSource}
- rowClassName={(record, index) => {
- return `${rowClassName && rowClassName(record, index)}`;
- }}
- size={size}
- rowKey={rowKey}
- bordered={bordered}
- rowSelection={rowSelection}
- scroll={scroll}
- expandable={expandable}
- pagination={
- !pagination
- ? false
- : {
- showSizeChanger: true,
- showTotal: (total) => `共${total}条`,
- pageSizeOptions: [10, 20, 30],
- ...pagination,
- }
- }
- {...other}
- />
+ <div style={{ height: height + 'px' }} id="table" ref={scrollRef}>
+ <Table
+ columns={myColumns}
+ dataSource={dataSource}
+ rowClassName={(record, index) => {
+ return `${rowClassName && rowClassName(record, index)}`;
+ }}
+ size={size}
+ rowKey={rowKey}
+ bordered={bordered}
+ rowSelection={rowSelection}
+ scroll={{
+ y: height - 80,
+ ...scroll
+ }}
+ expandable={expandable}
+ pagination={
+ !pagination
+ ? false
+ : {
+ showSizeChanger: true,
+ showTotal: (total) => `共${total}条`,
+ pageSizeOptions: [10, 20, 30],
+ ...pagination,
+ }
+ }
+ {...other}
+ />
+ </div>
</>
);
};
--
Gitblit v1.8.0