| | |
| | | * @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, |
| | |
| | | scroll = null, |
| | | expandable = null, |
| | | rowClassName, |
| | | offsetHeight = 0,//高度偏移量 |
| | | tableHeight,//自定义表格高度 |
| | | ...other |
| | | }) => { |
| | | // 80 ['类型','登记人','调解员','承办法官','调解员','签收人','退回人','处理时限','调解进度/司法确认进度','其他调解员','申请渠道','司法确认结果','助理/书记员','调解类型'] |
| | |
| | | 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 && ( |
| | |
| | | </div> |
| | | </div> |
| | | )} |
| | | <div style={{ height: height + 'px' }} id="table" ref={scrollRef}> |
| | | <Table |
| | | columns={myColumns} |
| | | dataSource={dataSource} |
| | |
| | | rowKey={rowKey} |
| | | bordered={bordered} |
| | | rowSelection={rowSelection} |
| | | scroll={scroll} |
| | | scroll={{ |
| | | y: height - 80, |
| | | ...scroll |
| | | }} |
| | | expandable={expandable} |
| | | pagination={ |
| | | !pagination |
| | |
| | | } |
| | | {...other} |
| | | /> |
| | | </div> |
| | | </> |
| | | ); |
| | | }; |