|
|
@@ -3,6 +3,7 @@ import { Layout, Row, Col, Input, Table, Card } from 'antd'
|
|
|
import { connect } from 'dva'
|
|
|
import { dateFormat } from '../../utils/baseUtils'
|
|
|
import './logs.less'
|
|
|
+import ListFilter from '../common/listFilter/index';
|
|
|
const { Content } = Layout
|
|
|
const { Search } = Input
|
|
|
|
|
|
@@ -10,13 +11,16 @@ class Logs extends React.Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ pageSize: 0,
|
|
|
tableBodyHeight: 0,
|
|
|
}
|
|
|
};
|
|
|
|
|
|
componentDidMount() {
|
|
|
+ const { dispatch } = this.props;
|
|
|
this.tableSize();
|
|
|
+ dispatch({ type: 'logs/fetchList' });
|
|
|
window.addEventListener('resize', this.tableSize);
|
|
|
}
|
|
|
|
|
|
@@ -25,81 +29,147 @@ class Logs extends React.Component {
|
|
|
}
|
|
|
|
|
|
tableSize = () => {
|
|
|
- const tableEl = document.getElementsByClassName('logs-table')[0];
|
|
|
- const tableScrollEl = tableEl.getElementsByClassName('ant-table-scroll')[0];
|
|
|
+ const cardBody = document.getElementsByClassName('ant-card-body')[0];
|
|
|
+ const table = cardBody.getElementsByClassName('logs-table')[0];
|
|
|
+ const tableHeader = table.getElementsByClassName('ant-table-thead')[0];
|
|
|
+ const padding = table.getBoundingClientRect().top - cardBody.getBoundingClientRect().top;
|
|
|
+ const tableHeaderHeight = tableHeader.offsetHeight;
|
|
|
+ let tableBodyHeight = cardBody.offsetHeight - padding * 2 - tableHeaderHeight - 40;
|
|
|
+ let pageSize = Math.ceil((tableBodyHeight) / 38);
|
|
|
this.setState({
|
|
|
- tableBodyHeight: tableScrollEl.offsetHeight - 38,
|
|
|
- pageSize: Math.ceil((tableScrollEl.offsetHeight - 38) / 38)
|
|
|
+ pageSize,
|
|
|
+ tableBodyHeight
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ onSort = (list) => {
|
|
|
+ return list.sort((a, b) => new Date(b.date) - new Date(a.date));
|
|
|
+ }
|
|
|
+
|
|
|
+ onSearch = () => {
|
|
|
+ const { logs } = this.props;
|
|
|
+ const { list, filterLabel, filterItem } = logs;
|
|
|
+ const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
|
|
|
+ let _filterLabel = filterLabel ? (filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
|
|
|
+ let filterReg = new RegExp('(' + _filterLabel + '){1}', 'ig');
|
|
|
+
|
|
|
+ let dataList = list.map(l => {
|
|
|
+ if(filterItem.type === 'date') {
|
|
|
+ if(filterLabel===""){
|
|
|
+ return { ...l };
|
|
|
+ }else if(filterLabel.indexOf('#')>-1){
|
|
|
+ let start = filterLabel.split('#')[0]
|
|
|
+ let end = filterLabel.split('#')[1]
|
|
|
+ let nowTime = new Date(l[filterItem.name]).getTime();
|
|
|
+ if(nowTime>=start && nowTime<=end){
|
|
|
+ return { ...l };
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }else{
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ return ((l[filterItem.name] + '').search(filterReg) > -1) ? { ...l } : null
|
|
|
+ }
|
|
|
+ }).filter(l => l !== null);
|
|
|
+
|
|
|
+ return dataList;
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
- const { logs } = this.props
|
|
|
+ const { logs } = this.props;
|
|
|
+ const { pageSize, tableBodyHeight } = this.state;
|
|
|
+ const { filterItem, filterLabel } = logs;
|
|
|
+
|
|
|
+ let dataList = this.onSort(this.onSearch());
|
|
|
+ let total = dataList.length;
|
|
|
+
|
|
|
+ const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
|
|
|
+
|
|
|
const logsColumns = [{
|
|
|
- title: '界面名称',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
- width: 200
|
|
|
- }, {
|
|
|
- title: '界面模块',
|
|
|
+ title: '模块',
|
|
|
dataIndex: 'module',
|
|
|
key: 'module',
|
|
|
width: 100,
|
|
|
+ render: text => {
|
|
|
+ return (filterItem.name === 'module' && filterLabel) ?
|
|
|
+ ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
|
|
|
+ return (
|
|
|
+ fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
|
|
|
+ <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
|
|
|
+ fragment
|
|
|
+ )
|
|
|
+ }
|
|
|
+ )) : text
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ title: '名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ width: 200,
|
|
|
+ render: text => {
|
|
|
+ return (filterItem.name === 'name' && filterLabel) ?
|
|
|
+ ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
|
|
|
+ return (
|
|
|
+ fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
|
|
|
+ <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
|
|
|
+ fragment
|
|
|
+ )
|
|
|
+ }
|
|
|
+ )) : text
|
|
|
+ }
|
|
|
}, {
|
|
|
title: '操作人',
|
|
|
dataIndex: 'operator',
|
|
|
key: 'operator',
|
|
|
- width: 100
|
|
|
+ width: 100,
|
|
|
+ render: text => {
|
|
|
+ return (filterItem.name === 'operator' && filterLabel) ?
|
|
|
+ ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
|
|
|
+ return (
|
|
|
+ fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
|
|
|
+ <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
|
|
|
+ fragment
|
|
|
+ )
|
|
|
+ }
|
|
|
+ )) : text
|
|
|
+ }
|
|
|
}, {
|
|
|
title: '操作时间',
|
|
|
- dataIndex: 'createTime',
|
|
|
- key: 'createTime',
|
|
|
- render: (text, record) => dateFormat(text, 'yyyy-MM-dd hh:mm:ss'),
|
|
|
+ dataIndex: 'date',
|
|
|
+ key: 'date',
|
|
|
width: 100
|
|
|
- }, {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- key: 'action',
|
|
|
- width: 150
|
|
|
}];
|
|
|
|
|
|
return (
|
|
|
- <Layout className='logs-view'>
|
|
|
+ <Layout className='layout-logs'>
|
|
|
<Content>
|
|
|
- <Card className='logs-body' title={
|
|
|
- <Row className='logs-tools' type='flex' justify='space-between'>
|
|
|
- <Col className='search'>
|
|
|
- <Col>
|
|
|
- <Search
|
|
|
- //value={dataSource.filterLabel}
|
|
|
- placeholder="请输入关键字"
|
|
|
- // onChange={e => {
|
|
|
- // //dispatch({ type: 'dataSource/setFilterLabel', label: e.target.value });
|
|
|
- // }}
|
|
|
- />
|
|
|
- </Col>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- }>
|
|
|
+ <Card bordered={false} className='logs-body' title={
|
|
|
+ <Row className='logs-tools' type='flex' justify='space-between'>
|
|
|
+ <Col className='search'>
|
|
|
+ <ListFilter modelName='logs' model={logs} />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ }>
|
|
|
<Table
|
|
|
className='logs-table'
|
|
|
columns={logsColumns}
|
|
|
- dataSource={
|
|
|
- logs.dataList
|
|
|
- // this.onSort(
|
|
|
- // this.onSearch(this.onGroup(), dataSource.filterLabel)
|
|
|
- // )
|
|
|
- }
|
|
|
+ dataSource={dataList}
|
|
|
size='small'
|
|
|
- scroll={{
|
|
|
- x: false,
|
|
|
- y: 440,
|
|
|
- }}
|
|
|
+ // loading={loading}
|
|
|
pagination={{
|
|
|
- total: 20
|
|
|
+ pageSize,
|
|
|
+ total,
|
|
|
+ // simple: true,
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return `第${range[0]}到第${range[1]}条数据，共${total}条数据`;
|
|
|
+ },
|
|
|
+ // onChange: (page, pageSize) => {
|
|
|
+ // typeof fetchFunction === 'function' && fetchFunction(page, pageSize);
|
|
|
+ // }
|
|
|
}}
|
|
|
- />,
|
|
|
- mountNode
|
|
|
+ scroll={{ x: false, y: tableBodyHeight }}
|
|
|
+ />
|
|
|
</Card>
|
|
|
</Content>
|
|
|
</Layout>
|
zhuth