104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import './style.less';
|
||
|
|
import { Input, List, Spin } from 'antd';
|
||
|
|
import topic_activity_default from '@/assets/topic/topic_activity_default.jpg'
|
||
|
|
import time_icon from '@/assets/topic/timeIcon.png'
|
||
|
|
import { getImageUrl } from './utils';
|
||
|
|
import { history } from 'umi';
|
||
|
|
import { getHomeGraceful } from './Home/service';
|
||
|
|
|
||
|
|
const { Search } = Input;
|
||
|
|
|
||
|
|
const JobStyleList: React.FC<{}> = () => {
|
||
|
|
//graceful data
|
||
|
|
const [gracefulList, setGracefulList] = useState<any[]>([]);
|
||
|
|
//loading
|
||
|
|
const [loading, setLoading] = useState<boolean>(false);
|
||
|
|
//page
|
||
|
|
const [page, setPage] = useState<number>(1);
|
||
|
|
|
||
|
|
//get graceful
|
||
|
|
const getGracefulData = (value: string) => {
|
||
|
|
setLoading(true);
|
||
|
|
getHomeGraceful({ param: value }).then(async res => {
|
||
|
|
if (res?.code == 200) {
|
||
|
|
setGracefulList(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(() => {
|
||
|
|
getGracefulData('');
|
||
|
|
}, [])
|
||
|
|
return (
|
||
|
|
<div className="h-page-container">
|
||
|
|
<div className="top-banner">
|
||
|
|
<div className="back-home">
|
||
|
|
<span onClick={() => toHome()}>返回首页</span>
|
||
|
|
{page > 1 && <span onClick={() => toPreviousPage()}>上一页</span>}
|
||
|
|
{gracefulList.length != 0 && page < Math.ceil(gracefulList.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={getGracefulData}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="list-content">
|
||
|
|
<List
|
||
|
|
itemLayout="horizontal"
|
||
|
|
pagination={{
|
||
|
|
size: 'small',
|
||
|
|
onChange: page => {
|
||
|
|
setPage(page);
|
||
|
|
},
|
||
|
|
current: page,
|
||
|
|
showTotal: (total) => `共 ${total} 条`,
|
||
|
|
pageSize: 10,
|
||
|
|
}}
|
||
|
|
dataSource={gracefulList}
|
||
|
|
renderItem={item => (
|
||
|
|
<List.Item>
|
||
|
|
<div className="list-pic">
|
||
|
|
<img src={getImageUrl(item.filePath, topic_activity_default)} />
|
||
|
|
<p className="tit"><span onClick={() => clickTitle(item)}>{item.title}</span></p>
|
||
|
|
<p className="detail">{item.secordTitle}</p>
|
||
|
|
<span className="time"><img src={time_icon} />{item.createTime}</span>
|
||
|
|
</div>
|
||
|
|
</List.Item>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Spin>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default JobStyleList;
|