forked from gzzfw/frontEnd/gzDyh

dminyi
2024-09-12 ccbe1710b9c52b0ca23150b0a9ca763da6e1223c
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,6 +195,7 @@
          </div>
        </div>
      )}
      <div style={{ height: height + 'px' }} id="table" ref={scrollRef}>
      <Table
        columns={myColumns}
        dataSource={dataSource}
@@ -181,7 +206,10 @@
        rowKey={rowKey}
        bordered={bordered}
        rowSelection={rowSelection}
        scroll={scroll}
          scroll={{
            y: height - 80,
            ...scroll
          }}
        expandable={expandable}
        pagination={
          !pagination
@@ -195,6 +223,7 @@
        }
        {...other}
      />
      </div>
    </>
  );
};