![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/85e364fc097042c614dd258191697c66.png)
import React, { useState, useEffect } from 'react'
import { Row, Col, Form, Input, Select, Pagination, Empty } from 'antd';
import { useIntl, connect, history, Link, getLocale } from 'umi';
import { SearchOutlined } from '@ant-design/icons';
import Header from '@/components/UserHeader'
import UserBanner from '@/components/UserBanner'
import { debounce } from 'lodash';
import styles from './index.less'
import { GetTargetGroupSelect, GetUserLearningJourneyList } from '@/services/journeyList';
import NoData from '@/components/NoData';
export default (props) => {
const intl = useIntl()
const { Item } = Form
const { Option } = Select
const [form] = Form.useForm()
const [current, setCurrentPage] = useState(1)
const [perItemPage, setperItemPage] = useState(10)
const [searchWord, setSearchWord] = useState('')
const [souceData, setSouceData] = useState([])
const [basicData, setBasicData] = useState({});
const { Function, Level } = basicData;
useEffect(() => {
GetTargetGroupSelect({}).then(res => {
if (!!res) {
setBasicData(res)
}
})
}, [])
const [currentFormValue, setCurrentFormValue] = useState({
Function: '',
StaffLevel: '',
})
useEffect(() => {
getTableData2({ ...currentFormValue })
}, [current, perItemPage, searchWord])
const getTableData2 = ({
StaffLevel = '',
Function = '',
} = {}) => {
GetUserLearningJourneyList(
{
StaffLevel,
Function,
Keywords: searchWord,
Page: current,
ItemsPerPage: perItemPage,
}
).then(res => {
if (res.ReturnCode == 1001 && res.Data.length > 0) {
setSouceData(res)
} else {
setSouceData([])
}
})
}
// 表单数据变动触发表格数据更新
const onFormValuesChange = debounce((changedValues, allValues) => {
const data = {
"Function": allValues.Function,
"StaffLevel": allValues.Level,
}
setCurrentFormValue(data)//把对象存入 hook
if (changedValues.hasOwnProperty('keyword')) return//手动输入触发onFormValuesChange事件(搜索框) 不发请求
getTableData2({ ...data })//打散 筛选改变的参数
setSearchWord('')
setCurrentPage(1)//发2次请求,这里在最下面,保证后一次请求 页码重置为1
form.setFieldsValue({
keyword: ''
});
}, 300)
// 关键词搜索
const searchParamsChange = (value) => {
setSearchWord(value)
setCurrentPage(1)
};
const initialValues = {
Function: '1005001',
Level: '1007001',
};
const handleLink = (Id) => {
history.push({
pathname: '/userInterface/learningJourneyDetails',
search: `?id=${Id}`,
})
}
const onPageChange = (current, pageSize) => {
setCurrentPage(current)
setperItemPage(pageSize)
if (showOne) {
setCurrentPage(1)
}
}
let showOne = false
const handlePageSizeChange = (page, pageSize) => {
showOne = true
}
return (
<>
<Header isActive={false} tabOr={true} />
<UserBanner />
<div className={styles.Box}>
<Form
form={form}
initialValues={initialValues}
onValuesChange={onFormValuesChange}
name="basic"
>
<Row className={styles.RowBox}>
<Col span={8}>
<Item
labelCol={{ span: 6, offset: 0 }}
wrapperCol={{ span: 16, offset: 0 }}
label={<span style={{ fontWeight: 'normal', fontSize: '16px' }}>{intl.formatMessage({ id: 'UserLearJ.Level' })}</span>}//职位级别
name="Level"
>
<Select>
{!!Level && Level.length ? Level.map(item => (
<Option value={item.Code} key={item.Code}> {getLocale() == 'zh-CN' ? item.ValueCN : item.Value}</Option>
)) : ""}
</Select>
</Item>
</Col>
<Col span={6}>
<Item
label={<span style={{ fontWeight: 'normal', fontSize: '16px' }}>{intl.formatMessage({ id: 'UserLearJ.Function' })}</span>}//业务部门
name="Function"
>
<Select>
{!!Function && Function.length ? Function.map(item => (
<Option value={item.Code} key={item.Code}> {getLocale() == 'zh-CN' ? item.ValueCN : item.Value}</Option>
)) : ""}
</Select>
</Item>
</Col>
<Col span={8}>
<Item
labelCol={{ span: 8, offset: 0 }}
wrapperCol={{ span: 14, offset: 0 }}
label={<span style={{ fontWeight: 'normal', fontSize: '16px' }}>{intl.formatMessage({ id: 'UserLearJ.Search' })}</span>}
name="keyword"
>
<Input.Search
placeholder={intl.formatMessage({ id: 'UserLearJ.path' })}
allowClear
onSearch={(value) => searchParamsChange(value)}
/>
</Item>
</Col>
</Row>
</Form>
<div className={styles.line}></div>
<Row className={styles.RowBoxDown}>
{!!souceData.Data ? souceData.Data.map((item, index) => {
return (
<div className={styles.imgTxtBox}>
{item.IsNewIindicator ? <div className={styles.triangle}><span>NEW</span></div> : null}
<img onClick={() => { handleLink(item.Id) }} className={styles.img} src={`${ATTACHMENT_URL}${item.ImageUrl}`} alt="Network error" />
<h1 className={styles.txt}>{item.Title}</h1>
</div>
)
}) : <div className={styles.Empty}> <NoData></NoData> </div>}
</Row>
{!!souceData.Data ?
<Pagination
className={styles.Pagination}
total={souceData.TotalCount}
defaultPageSize={perItemPage}
defaultCurrent={current}
current={current}
showSizeChanger
size={'small'}
onChange={onPageChange}
onShowSizeChange={handlePageSizeChange}
/>
: null}
</div>
</>
)
}
.Box {
width: 80%;
margin: 0 auto;
background: #fff;
margin: 10px auto 120px;
.line {
width: 100%;
background: #eeeeee;
height: 10px;
}
div {
margin: 0;
}
.RowBox {
padding: 14px 0;
margin: 10px 0 0;
}
.RowBoxDown {
// padding: 14px 0;
// margin: 10px 0;
display: flex;
justify-content: start // justify-content: space-evenly
// justify-content: space-between
}
.Empty{
width: 100%;
}
.imgTxtBox {
width: 200px;
text-align: center;
position: relative;
margin: 20px;
.img {
width: 200px;
height: 150px;
margin: 0 1%;
}
.txt {
margin-top: 10px;
font-weight: normal;
font-size: 16px;
display: inline-block;
}
.triangle {
position: absolute;
right: -2px;
top: 0;
width: 0;
height: 0;
border-top: 46px solid #86bc25;
border-left: 66px solid transparent;
span {
color: #fff;
position: absolute;
right: 5px;
top: -40px;
font-size: 12px;
display: inline-block;
}
}
}
.Pagination{
width: 100%;
display: inline-block;
margin: 80px auto 50px;
text-align: center;
}
.ColFlexBox {
display: flex;
align-items: center;
padding: 14px 0;
}
:global{
.ant-pagination-item-active{
background: #86bc25;
border-color: #86bc25;
}
.ant-pagination-item-active a {
color: #fff;
}
}
}