/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-10 11:25:15
|
* @LastEditTime: 2024-12-23 15:21:44
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 公共Table封装组件
|
*/
|
import React, { useRef, useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Space, Tooltip, Table, Empty } from 'antd';
|
import { ReloadOutlined, FolderFilled } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import { empty } from '@/assets/images';
|
import './index.less';
|
import { getOffset, getSize } from '@/utils/utility';
|
|
const TableView = ({
|
showHeader,
|
title,
|
buttonAction,
|
iconAction,
|
onReload,
|
columns,
|
dataSource = [],
|
size = 'middle',
|
rowKey = 'id',
|
bordered = true,
|
rowSelection = null,
|
pagination,
|
scroll = null,
|
expandable = null,
|
rowClassName,
|
offsetHeight = 0,//高度偏移量
|
tableHeight,//自定义表格高度
|
isScroll = false,//表格是否竖向滚动，兼容以前的，当需要表格竖向滚动，请设置这个
|
...other
|
}) => {
|
// 80 ['类型','登记人','调解员','承办法官','调解员','签收人','退回人','处理时限','调解进度/司法确认进度','其他调解员','申请渠道','司法确认结果','助理/书记员','调解类型']
|
const eightWidth = [
|
'perClassName',
|
'inputUserName',
|
'mediateUserName',
|
'judgeName',
|
'mediator',
|
'handlerUserName',
|
'returnUserName',
|
'expireTime',
|
'processName',
|
'otherMediator',
|
'canalName',
|
'judicResult',
|
'assistName',
|
'mediTypeName',
|
];
|
|
// 85 ['登记状态','审查标签/分案标签','审查结果','申请人','被申请人','任务标签']
|
const eightFiveWidth = ['inputStatusName', 'auditTag', 'auditResult', 'plaintiffs', 'defendants', 'taskType'];
|
|
// 100 ['任务名称','纠纷类型','调解结果']
|
const tenWidth = ['taskNodeName', 'caseTypeName', 'mediResultName'];
|
|
let myColumns = [];
|
|
columns.forEach((x) => {
|
// 格式化时间
|
if (
|
[
|
'createTime',
|
'applyTime',
|
'mediTime',
|
'mediEndTime',
|
'finishTime',
|
'fileTime',
|
'signTime',
|
'returnTime',
|
'acceptTime',
|
'mediStartTime',
|
'judicEndTime',
|
'inputTime',
|
'dispTime',
|
].includes(x.dataIndex)
|
) {
|
x.width = ['mediTime', 'mediEndTime', 'acceptTime'].includes(x.dataIndex) ? 102 : 90;
|
x.render = (text) => (
|
<Tooltip placement="topLeft" title={$$.timeFormat(text)}>
|
{$$.dateFormat(text)}
|
</Tooltip>
|
);
|
}
|
// 设置调解案号
|
if (x.dataIndex === 'caseNo') {
|
x.width = x.width || 180;
|
x.render = !!x.render
|
? x.render
|
: (text, record) =>
|
record.serieStatus === '2' ? (
|
<Space size={4}>
|
<FolderFilled className="public-folder" />
|
<span>系列案</span>
|
</Space>
|
) : (
|
<Tooltip placement="topLeft" title={text}>
|
{text}
|
</Tooltip>
|
);
|
}
|
// 设置司法确认案号
|
if (x.dataIndex === 'judicNo') {
|
x.width = 180;
|
x.render = (text, record) =>
|
record.serieStatus === '2' ? (
|
<Space size={4}>
|
<FolderFilled className="public-folder" />
|
<span>系列案</span>
|
</Space>
|
) : (
|
<Tooltip placement="topLeft" title={text}>
|
{text || '-'}
|
</Tooltip>
|
);
|
}
|
// 设置一些列的宽度
|
if (eightWidth.includes(x.dataIndex)) {
|
x.width = x.width || 80;
|
}
|
if (eightFiveWidth.includes(x.dataIndex)) {
|
x.width = x.width || 85;
|
}
|
if (tenWidth.includes(x.dataIndex)) {
|
x.width = x.width || 100;
|
}
|
// 操作
|
if (x.dataIndex !== 'action') {
|
x.ellipsis = { showTitle: false };
|
}
|
if (!x.render) {
|
x.render = (text) =>
|
!!text ? (
|
<Tooltip placement="topLeft" title={text}>
|
{text}
|
</Tooltip>
|
) : (
|
'-'
|
);
|
}
|
myColumns.push(x);
|
});
|
|
const scrollRef = useRef(null)
|
const [height, setHeight] = useState();//表格高度
|
|
useEffect(() => {
|
onWindowResize()
|
window.addEventListener("resize", onWindowResize);
|
// 返回一个函数，该函数会在组件卸载前执行
|
return () => {
|
// 组件销毁时执行
|
window.removeEventListener("resize", onWindowResize);
|
};
|
}, [])
|
|
const onWindowResize = () => {
|
if (tableHeight) {
|
setHeight(tableHeight)
|
} else {
|
let offsetTop = 0;
|
if (scrollRef && scrollRef.current) {
|
offsetTop = getOffset(scrollRef.current).top;
|
}
|
setHeight(getSize().windowH - offsetTop - 46 - offsetHeight)
|
}
|
};
|
|
return (
|
<>
|
{showHeader && (
|
<div className="tableView-header">
|
<div className="tableView-header-title">{title}</div>
|
<div>
|
<Space size="small">
|
{buttonAction?.map((x, t) => (
|
<div key={t}>{x}</div>
|
))}
|
</Space>
|
<Space style={{ marginLeft: !!iconAction || !!onReload ? 16 : 0 }} size="middle">
|
{iconAction?.map((x, t) => (
|
<Tooltip key={t} title={x.title}>
|
<div className="public-a">{x.dom}</div>
|
</Tooltip>
|
))}
|
{!!onReload && (
|
<div className="public-a" onClick={onReload}>
|
<Tooltip title="刷新">
|
<ReloadOutlined />
|
</Tooltip>
|
</div>
|
)}
|
</Space>
|
</div>
|
</div>
|
)}
|
<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: isScroll ? height - 80 : null,
|
...scroll
|
}}
|
locale={{
|
emptyText: <div className='public-noData'>
|
<Empty imageStyle={{ height: '160px' }} description={<span style={{ color: "#86909C" }}>暂无数据</span>} image={empty}>
|
<div className='ledger-main-display' style={{ marginTop: '8px' }}>
|
</div>
|
</Empty>
|
</div>, // 使用自定义组件作为空状态的展示
|
}}
|
expandable={expandable}
|
pagination={
|
!pagination
|
? false
|
: {
|
showSizeChanger: true,
|
showTotal: (total) => `共${total}条`,
|
pageSizeOptions: [10, 20, 30],
|
...pagination,
|
}
|
}
|
{...other}
|
/>
|
</div>
|
</>
|
);
|
};
|
|
TableView.propTypes = {
|
showHeader: PropTypes.bool,
|
title: PropTypes.any,
|
buttonAction: PropTypes.array,
|
iconAction: PropTypes.array,
|
onReload: PropTypes.func,
|
columns: PropTypes.any,
|
dataSource: PropTypes.array,
|
size: PropTypes.string,
|
rowKey: PropTypes.string,
|
bordered: PropTypes.bool,
|
rowSelection: PropTypes.object,
|
pagination: PropTypes.any,
|
};
|
|
export default TableView;
|
