tangjiang
5 years ago
parent
51205c9056
commit
841968d741
@ -1,69 +1,80 @@
|
||||
/*
|
||||
* @Description: 展示表格数据
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2020-01-10 13:46:30
|
||||
* @Date: 2020-01-14 13:39:12
|
||||
* @LastEditors : tangjiang
|
||||
* @LastEditTime : 2020-01-11 17:35:03
|
||||
* @LastEditTime : 2020-01-14 16:30:05
|
||||
*/
|
||||
import 'antd-table-infinity/dist/index.css';
|
||||
import 'antd-table-infinity/index.css';
|
||||
import './index.scss';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Spin } from 'antd';
|
||||
// import {SumTable as Table} from 'antd-table-infinity';
|
||||
import { SumTable as Table } from 'antd-table-infinity';
|
||||
import { columns, fetchData, sumData } from './mockData';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import ReactDom from 'react-dom';
|
||||
|
||||
const DisplayTableData = ({
|
||||
// columns = [],
|
||||
// datas,
|
||||
// fetchData
|
||||
}) => {
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const DisplayTableData = (props) => {
|
||||
const {columns, datas, fetchData, total} = props;
|
||||
let tableEl = useRef(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleFetchData = () => {
|
||||
setLoading(true);
|
||||
fetchData(data.length).then(newData => {
|
||||
setLoading(false);
|
||||
const _data = data.concat(newData);
|
||||
setData(_data);
|
||||
})
|
||||
const renderFooter = (obj = {}) => {
|
||||
const {course_count, student_count, choice_shixun_num, choice_shixun_frequency, total} = obj;
|
||||
if (!obj) return ''
|
||||
else {
|
||||
return (
|
||||
<ul className="footer_list">
|
||||
<li className="footer_item footer-total">总计</li>
|
||||
<li className="footer_name">{total || '-'}</li>
|
||||
<li className="footer_item">{course_count || '-'}</li>
|
||||
<li className="footer_item">{student_count || '-'}</li>
|
||||
<li className="footer_item">{choice_shixun_num || '-'}</li>
|
||||
<li className="footer_item">{choice_shixun_frequency || '-'}</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleFetchData();
|
||||
const table = ReactDom.findDOMNode(tableEl);
|
||||
// console.log(table);
|
||||
const tableBody = table.querySelector('.ant-table-body');
|
||||
let _scrollTop = 0;//保存上次滚动距离
|
||||
let isRun = false;//是否执行查询
|
||||
tableBody.addEventListener('scroll', () => {
|
||||
if(tableBody.scrollTop === 0 ){
|
||||
_scrollTop = 0;
|
||||
}
|
||||
// 上一次滚动高度与当前滚动高度不同则是纵向滚动
|
||||
if (_scrollTop !== tableBody.scrollTop) {
|
||||
//是否滑动到距离底部40px的位置
|
||||
const scorll = _scrollTop >= tableBody.scrollHeight-tableBody.clientHeight-40;
|
||||
//isRun为true时 代表已经执行查询
|
||||
if(isRun && scorll){
|
||||
return;
|
||||
}
|
||||
//_scrollTop < tableBody.scrollTop 判断是否向下滑动
|
||||
isRun = _scrollTop < tableBody.scrollTop && scorll;
|
||||
//保存当前滚动位置
|
||||
_scrollTop = tableBody.scrollTop;
|
||||
if (isRun) {
|
||||
fetchData && fetchData();
|
||||
}
|
||||
}
|
||||
})
|
||||
}, []);
|
||||
|
||||
const loadMoreContent = () => (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
paddingTop: 40,
|
||||
paddingBottom: 40,
|
||||
border: '1px solid #e8e8e8',
|
||||
}}
|
||||
>
|
||||
<Spin tip="Loading..." />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Table
|
||||
className='statc_table'
|
||||
key="key"
|
||||
loading={loading}
|
||||
onFetch={handleFetchData}
|
||||
pageSize={50}
|
||||
loadingIndicator={loadMoreContent}
|
||||
className='static_table'
|
||||
rowKey={record => record.id}
|
||||
columns={columns}
|
||||
sumData={sumData}
|
||||
scroll={{ y: 500 }}
|
||||
dataSource={data}
|
||||
// bordered
|
||||
// debug
|
||||
dataSource={datas}
|
||||
pagination={false}
|
||||
loading={loading}
|
||||
scroll={{y: 500}}
|
||||
ref={(ref)=>tableEl=ref}
|
||||
footer={total ? () => renderFooter(total) : ''}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default DisplayTableData;
|
||||
export default DisplayTableData;
|
||||
@ -0,0 +1,41 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2020-01-14 09:44:02
|
||||
* @LastEditors : tangjiang
|
||||
* @LastEditTime : 2020-01-14 17:02:45
|
||||
*/
|
||||
import types from "./actionTypes";
|
||||
import { fetchStaticList } from "../../services/staticService";
|
||||
|
||||
export const staticList = (id) => {
|
||||
return (dispatch, getState) => {
|
||||
const { params, total_count, other_info } = getState().staticReducer;
|
||||
|
||||
if (total_count !== 0 && total_count === other_info.length) return;
|
||||
fetchStaticList(id, params).then(res => {
|
||||
// console.log('统计数据=====>>>>>', res);
|
||||
const {data} = res;
|
||||
if (data.status === 0) {
|
||||
dispatch({
|
||||
type: types.GET_STATIC_INFO,
|
||||
payload: data.data
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const changeParams = (params) => {
|
||||
return {
|
||||
type: types.CHANGE_STATIC_PARAMS,
|
||||
payload: params
|
||||
}
|
||||
}
|
||||
|
||||
export const initTotal = () => {
|
||||
return {
|
||||
type: types.CHANGE_STATIC_TOTAL
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
/*
|
||||
* @Description: 统计
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2020-01-14 09:34:49
|
||||
* @LastEditors : tangjiang
|
||||
* @LastEditTime : 2020-01-14 15:49:55
|
||||
*/
|
||||
import types from "../actions/actionTypes";
|
||||
|
||||
// const maps = {
|
||||
// 1: 'shixun_info', // 实训使用情况
|
||||
// 2: 'user_info', // 用户使用情况
|
||||
// 3: 'subject_info' // 实践课程使用情况
|
||||
// }
|
||||
const initalState = {
|
||||
subject_info: {},
|
||||
other_info: [],
|
||||
total_count: 0,
|
||||
total: {},
|
||||
params: {
|
||||
// sort_by: '',
|
||||
// sort_direction: 'desc', // desc || asc
|
||||
limit: 20, // 一页多少条
|
||||
page: 1, // 第几页
|
||||
type: 'subject_info' // 类型: 实训 shixun_info,
|
||||
}
|
||||
};
|
||||
|
||||
// const getGuid = () =>
|
||||
// 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||
// /* eslint-disable */
|
||||
// let r = (Math.random() * 16) | 0,
|
||||
// v = c == 'x' ? r : (r & 0x3) | 0x8;
|
||||
// return v.toString(16);
|
||||
// });
|
||||
|
||||
const staticReducer = (state = initalState, action) => {
|
||||
const { payload = {}, type } = action;
|
||||
const {subject_info, other_info = [], total = {}, total_count} = payload;
|
||||
switch (type) {
|
||||
case types.GET_STATIC_INFO:
|
||||
return {
|
||||
...state,
|
||||
subject_info,
|
||||
other_info: state.other_info.concat(other_info),
|
||||
total,
|
||||
total_count,
|
||||
params: Object.assign({}, state.params, { page: state.params.page + 1 })
|
||||
}
|
||||
case types.CHANGE_STATIC_PARAMS: {
|
||||
return {
|
||||
...state,
|
||||
params: Object.assign({}, state.params, payload)
|
||||
};
|
||||
}
|
||||
case types.CHANGE_STATIC_TOTAL: {
|
||||
return {
|
||||
...state,
|
||||
other_info: [],
|
||||
total: {}
|
||||
}
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default staticReducer;
|
||||
@ -0,0 +1,14 @@
|
||||
import axios from "axios";
|
||||
|
||||
/*
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2020-01-14 09:40:53
|
||||
* @LastEditors : tangjiang
|
||||
* @LastEditTime : 2020-01-14 10:47:19
|
||||
*/
|
||||
export async function fetchStaticList (id, params) {
|
||||
const url = `/paths/${id}/statistics_info.json`;
|
||||
return axios.get(url, { params });
|
||||
}
|
||||
Loading…
Reference in new issue