m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

commit

Browse Source
dev_static
tangjiang 5 years ago
parent e76f048fab
commit 05e69e8f74
5 changed files with 239 additions and 77 deletions
Show Stats Download Patch File Download Diff File

3
public/react/package.json
Unescape View File

@ -7,6 +7,7 @@
"@monaco-editor/react": "^2.3.0",
"@novnc/novnc": "^1.1.0",
"antd": "^3.23.2",
"antd-table-infinity": "^1.1.3",
"array-flatten": "^2.1.2",
"autoprefixer": "7.1.6",
"axios": "^0.18.0",
@ -71,7 +72,6 @@
"rc-tree": "^1.7.11",
"rc-upload": "^2.5.1",
"react": "^16.9.0",
"react-base-table": "^1.9.1",
"react-beautiful-dnd": "^10.0.4",
"react-codemirror": "^1.0.0",
"react-codemirror2": "^6.0.0",
@ -177,6 +177,7 @@
"compression-webpack-plugin": "^1.1.12",
"concat": "^1.0.3",
"happypack": "^5.0.1",
"mockjs": "^1.1.0",
"node-sass": "^4.12.0",
"reqwest": "^2.0.5",
"webpack-bundle-analyzer": "^3.0.3",

57
public/react/src/modules/paths/statics/DisplayTableData.js
Unescape View File

@ -4,21 +4,64 @@
* @Github:
* @Date: 2020-01-10 13:46:30
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-10 13:48:54
* @LastEditTime : 2020-01-11 11:20:50
*/
import React from 'react';
// import { Table } from 'antd';
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';
const DisplayTableData = ({
columns,
datas
// columns = [],
// datas,
// fetchData
}) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const handleFetchData = () => {
setLoading(true);
fetchData(data.length).then(newData => {
setLoading(false);
const _data = data.concat(newData);
setData(_data);
})
}
useEffect(() => {
handleFetchData();
}, []);
const loadMoreContent = () => (
<div
style={{
textAlign: 'center',
paddingTop: 40,
paddingBottom: 40,
border: '1px solid #e8e8e8',
}}
>
<Spin tip="Loading..." />
</div>
);
return (
<Table
pagination={false}
dataSource={datas}
className='statc_table'
key="key"
loading={loading}
onFetch={handleFetchData}
pageSize={50}
loadingIndicator={loadMoreContent}
columns={columns}
sumData={sumData}
scroll={{ y: 450 }}
dataSource={data}
bordered
debug
/>
);
}

130
public/react/src/modules/paths/statics/index.js
Unescape View File

@ -4,80 +4,104 @@
* @Github:
* @Date: 2020-01-10 09:33:45
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-10 13:45:26
* @LastEditTime : 2020-01-11 11:18:38
*/
import './index.scss';
import React from 'react';
import React, { useState } from 'react';
import StaticNumberAndTxt from './StaticNumberAndTxt';
import DisplayTableData from './DisplayTableData';
import { Table, Tabs } from 'antd';
const { TabPane } = Tabs;
const App = () => {
// const datas = [
// {
// key: '1',
// id: 1,
// id2: '',
// id3: '',
// id4: '',
// id5: '',
// id6: ''
// },
// {
// key: '2',
// id: 2,
// id2: '',
// id3: '',
// id4: '',
// id5: '',
// id6: ''
// },
// {
// key: '3',
// id: 3,
// id2: '',
// id3: '',
// id4: '',
// id5: '',
// id6: ''
// },
// {
// key: '4',
// id: 4,
// id2: '',
// id3: '',
// id4: '',
// id5: '',
// id6: ''
// }
// ];
const [datas, setDatas] = useState([]);
const columns = [
{
title: '序号',
dataIndex: 'id'
id: 'id',
//align: 'center',
width: 100
},
{
title: '使用单位',
dataIndex: 'id2'
id: 'id2',
//align: 'center',
flexGrow: 1
},
{
title: '使用课堂/个',
dataIndex: 'id3'
id: 'id3',
//align: 'center',
flexGrow: 1,
sortable: true
},
{
title: '课堂实训/个',
dataIndex: 'id4'
id: 'id4',
//align: 'center',
flexGrow: 1,
sortable: true
},
{
title: '选用实训/个',
dataIndex: 'id5'
id: 'id5',
//align: 'center',
flexGrow: 1,
sortable: true
},
{
title: '选用实训/次',
dataIndex: 'id6'
id: 'id6',
//align: 'center',
flexGrow: 1,
sortable: true
}
];
const datas = [
{
key: '1',
id: 1,
id2: '',
id3: '',
id4: '',
id5: '',
id6: ''
},
{
key: '1',
id: 1,
id2: '',
id3: '',
id4: '',
id5: '',
id6: ''
},
{
key: '1',
id: 1,
id2: '',
id3: '',
id4: '',
id5: '',
id6: ''
},
{
key: '1',
id: 1,
id2: '',
id3: '',
id4: '',
id5: '',
id6: ''
const handleFetchData = () => {
}
];
return (
<div className="static_wrap">
<div className="ant-spin-container">
@ -121,9 +145,13 @@ const App = () => {
</div>
</section>
<section className="static_section_table">
<Tabs defaultActiveKey="1">
{/* <Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
<DisplayTableData
columns={columns}
datas={datas}
fetchData={handleFetchData}
/>
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
@ -131,11 +159,11 @@ const App = () => {
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Table
pagination={false}
dataSource={datas}
</Tabs> */}
<DisplayTableData
columns={columns}
datas={datas}
fetchData={handleFetchData}
/>
</section>
</div>

20
public/react/src/modules/paths/statics/index.scss
Unescape View File

@ -7,6 +7,10 @@
margin-top: 20px;
}
.static_section_table{
margin-bottom: 140px;
}
.static_section_header{
.header_title{
line-height: 1;
@ -75,14 +79,16 @@
}
}
}
.static_section_table{
.ant-table-body th{
background: rgba(241,248,255,1);
color:#303133;
text-align: center;
.statc_table{
.ant-table-header{
overflow-x: hidden !important;
margin-bottom: 0px !important;
border-bottom: 2px solid #e8e8e8;
background: green;
}
.ant-table-body tr:nth-child(even){
background: rgba(241,248,255,.4);
.ant-table-footer .ant-table-content{
border-top: 1px solid #e8e8e8;
box-sizing: border-box;
}
}
}

84
public/react/src/modules/paths/statics/mockData.js
Unescape View File

@ -0,0 +1,84 @@
/*
* @Description: 模拟数据
* @Author: tangjiang
* @Github:
* @Date: 2020-01-11 10:55:33
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-11 11:58:08
*/
import { random } from 'lodash';
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 fetchData = (startIndex = 0) =>
new Promise(resolve => {
setTimeout(() => {
resolve(
startIndex >= 500 // 总共只有500条数据
? []
: Array.from({ length: 50 }).map((_, i) => {
// 每次返回100条
const index = startIndex + i;
return {
key: getGuid(),
index: `${index}`,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
};
}),
);
}, random(0, 1.0) * 1000);
});
const columns = [
{
title: '序号',
dataIndex: 'index',
render: text => text,
width: 50,
},
{
title: '使用单位',
dataIndex: 'name',
// width: 100,
},
{
title: '使用课堂/个',
// width: 200,
dataIndex: 'age',
},
{
title: '课堂学生/个',
// width: 200,
dataIndex: 'address',
},
{
title: '选用实训/个',
// width: 200,
dataIndex: 'address',
},
{
title: '选用实训/个',
// width: 200,
dataIndex: 'address',
}
];
const sumData = [
{
index: '合计',
key: ',4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
},
];
export { columns, fetchData, sumData };
Write Preview
Loading…
Cancel
Save