102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import './style.less';
|
|
import { Input, List, Spin } from 'antd';
|
|
import { formatTime } from './utils';
|
|
import { history } from 'umi';
|
|
import { getClassroomList } from './Home/service';
|
|
|
|
const { Search } = Input;
|
|
|
|
const ClassroomList: React.FC<{}> = () => {
|
|
//project data
|
|
const [classroomList, setClassroomList] = useState<any[]>([]);
|
|
//loading
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
//page
|
|
const [page, setPage] = useState<number>(1);
|
|
|
|
//get project
|
|
const getClassroomData = (value: string) => {
|
|
setLoading(true);
|
|
getClassroomList({ param: value }).then(res => {
|
|
if (res?.code == 200) {
|
|
setClassroomList(res?.data);
|
|
setPage(1);
|
|
}
|
|
}).finally(() => {
|
|
setLoading(false);
|
|
})
|
|
}
|
|
|
|
//onclick
|
|
const clickTitle = (data: any) => {
|
|
history.push({ pathname: "/highQualityOperation/detail", state: { detail: data } });
|
|
}
|
|
//to home
|
|
const toHome = () => {
|
|
history.push("/highQualityOperation/home");
|
|
}
|
|
//to previous page
|
|
const toPreviousPage = () => {
|
|
setPage((page) => page - 1);
|
|
}
|
|
//to next page
|
|
const toNextPage = () => {
|
|
setPage((page) => page + 1);
|
|
}
|
|
|
|
useEffect(() => {
|
|
getClassroomData('');
|
|
}, [])
|
|
|
|
return (
|
|
<div className="h-page-container">
|
|
<div className="top-banner">
|
|
<div className="back-home">
|
|
<span onClick={() => toHome()}>返回首页</span>
|
|
{page > 1 && <span onClick={() => toPreviousPage()}>上一页</span>}
|
|
{classroomList.length != 0 && page < Math.ceil(classroomList.length / 10) && <span onClick={() => toNextPage()}>下一页</span>}
|
|
</div>
|
|
</div>
|
|
<Spin spinning={loading}>
|
|
<div className="search">
|
|
<span className="text"><span>运营提升小课堂</span></span>
|
|
<div className="search-box">
|
|
<Search
|
|
placeholder="输入标题"
|
|
allowClear
|
|
enterButton="搜索"
|
|
style={{ width: 322 }}
|
|
onSearch={getClassroomData}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="list-content">
|
|
<List
|
|
itemLayout="horizontal"
|
|
pagination={{
|
|
size: 'small',
|
|
onChange: page => {
|
|
setPage(page);
|
|
},
|
|
current: page,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
pageSize: 10,
|
|
}}
|
|
dataSource={classroomList}
|
|
renderItem={item => (
|
|
<List.Item>
|
|
<div className="list-box">
|
|
<p onClick={() => clickTitle(item)}>{item.title}</p>
|
|
<span>{formatTime(item.createTime, 'YYYY-MM-DD')}</span>
|
|
</div>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</div>
|
|
</Spin>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ClassroomList; |