forked from Gitlink/forgeplus-react
106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Table, Tooltip } from 'antd';
|
|
import './index.scss';
|
|
import { freeTaskList, taskList } from '../../api';
|
|
import ProjectDetail from '../component/projectDetail';
|
|
import bgPng from "../../img/bgPng.png";
|
|
|
|
// 课题列表
|
|
function TaskList() {
|
|
const [data, setData] = useState([]);
|
|
// table
|
|
const [current, setCurrent] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
const [pageSize, setPageSize] = useState(20);
|
|
const [loading, setLoading] = useState(false);
|
|
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
|
|
|
|
const columns = [
|
|
{ title: '序号', dataIndex: 'index', align: 'center', className:"taskTableColumns", width: '6%', render: (text, item, index) => <span>{(current-1)*pageSize+index + 1}</span> },
|
|
{ title: '课题名称', dataIndex: 'taskName', className:"taskTableColumns taskName", width: '28%', ellipsis: true, render: (text, item) => <Tooltip title={text} placement="topLeft"><span onClick={()=>{window.open(`/glcc/2023/subjects/detail/${item.id}`)}}>{text}</span></Tooltip> },
|
|
{ title: '课题类型', dataIndex: 'projectType', className:"taskTableColumns", width: '12%', ellipsis: true, },
|
|
{ title: '项目名称', dataIndex: 'projectName', className:"taskTableColumns", width: '24%', ellipsis: true, render: (text) => <Tooltip title={text} placement="topLeft">{text}</Tooltip> },
|
|
{ title: '课题奖金', dataIndex: 'taskReward', className:"taskTableColumns", ellipsis: true, width: '10%', render: (text) => <Tooltip title={text} placement="topLeft"><span>{text}</span></Tooltip> },
|
|
{ title: '操作', dataIndex: 'action', align: 'center', className:"actionColumns taskTableColumns"},
|
|
]
|
|
|
|
const customExpandIcon = (props) => {
|
|
if (props.expanded) {
|
|
return <a className='actionBox' style={{marginRight: 8 }} onClick={e => {
|
|
props.onExpand(props.record, e);
|
|
}}><i className='iconfont icon-ketixiangqingicon mr5'></i>项目详情<i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-12 ml5 down mr10"></i></a>
|
|
} else {
|
|
return <a className='actionBox' style={{marginRight: 8 }} onClick={e => {
|
|
props.onExpand(props.record, e);
|
|
}}><i className='iconfont icon-ketixiangqingicon mr5'></i>项目详情<i className="iconfont icon-jiantou9 font-12 ml5 down mr10"></i></a>
|
|
}
|
|
}
|
|
|
|
const expandRow = (record) => {
|
|
return <ProjectDetail detail={null} projectId={record.regId}/>
|
|
}
|
|
|
|
// 展开收起行回调
|
|
function onExpand(expanded, record){
|
|
const keys = new Set(expandedRowKeys);
|
|
if(expanded){
|
|
keys.add(record.id);
|
|
}else{
|
|
keys.delete(record.id);
|
|
}
|
|
setExpandedRowKeys(Array.from(keys));
|
|
}
|
|
|
|
// 改变pagesize
|
|
function onShowSizeChange(current, pageSize){
|
|
window.scrollTo(0, 0);
|
|
setCurrent(1);
|
|
setPageSize(pageSize);
|
|
}
|
|
|
|
// 切换页数
|
|
function changePage(page, pageSize){
|
|
window.scrollTo(0, 0);
|
|
setCurrent(page);
|
|
}
|
|
|
|
useEffect(() => {
|
|
setExpandedRowKeys([]);
|
|
setLoading(true);
|
|
const params = {
|
|
curPage: current,
|
|
pageSize,
|
|
round: 2
|
|
}
|
|
freeTaskList(params).then(response => {
|
|
if (response && response.message === "success") {
|
|
setData(response.data.rows);
|
|
setTotal(response.data.total);
|
|
}
|
|
setLoading(false);
|
|
})
|
|
}, [current, pageSize])
|
|
|
|
return (
|
|
<div className="taskList listBox">
|
|
<div className="listTable">
|
|
<Table
|
|
loading={loading}
|
|
columns={columns}
|
|
dataSource={data}
|
|
expandedRowRender={expandRow}
|
|
expandIconColumnIndex={5}
|
|
expandIconAsCell={false}
|
|
expandIcon={customExpandIcon}
|
|
rowKey={'id'}
|
|
expandedRowKeys={expandedRowKeys}
|
|
onExpand={onExpand}
|
|
pagination={{current: current, pageSize: pageSize, total: total, showSizeChanger: true, onShowSizeChange:onShowSizeChange, showQuickJumper: true, onChange: changePage}}
|
|
/>
|
|
</div>
|
|
<img src={bgPng} alt='' className='bgPng3'/>
|
|
<img src={bgPng} alt='' className='bgPng4'/>
|
|
</div>
|
|
)
|
|
}
|
|
export default TaskList; |