forgeplus-react/src/achieveRequirement/achieve/achieveList/index.jsx

import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { Pagination, Button, Icon } from 'antd';
import ChooseNav from '../../components/chooseNav';
import ItemList from '../../components/itemList';
import { getDictionary, getAchieveList } from '../api';

export default (props) => {
  const { current_user } = props;
  // console.log(current_user);

  const [achievementTypeId, setAchievementTypeId] = useState('');  //成果类别
  const [achievementFileTypes, setAchievementFileTypes] = useState('');  //文件类型
  const [orderBy, setOrderBy] = useState('-1');
  const [curPage, setCurPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [industryOption, setIndustryOption] = useState([]);
  const [achiveList, setAchiveList] = useState([]);

  useEffect(() => {
    getDictionary('share_type').then(res => {
      if (res && res.data) setIndustryOption(res.data);
    });
  }, []);

  useEffect(() => {
    const params = {
      achievementTypeId,
      achievementFileTypes,
      achievementLabel: '',
      isOwned: '',
      orderBy,
      curPage,
      pageSize: 10
    };
    getAchieveList(params).then(data => {
      setAchiveList(data.rows);
      setTotal(data.total);
    })
  }, [achievementTypeId, achievementFileTypes, orderBy, curPage]);


  function changeOptionId(option, type) {
    if (type === 'share_type') {
      setAchievementTypeId(option.id);
      setCurPage(1);
    } else if (type === 'file_type') {
      setAchievementFileTypes(option.id);
      setCurPage(1);
    }
  }

  function changeSort(sortType) {
    setOrderBy(sortType);
    setCurPage(1);
  }

  function goAchieveMine() {
    props.history.push('/achieve/achieveMine');
  }
  function goAdd() {
    props.history.push("/achieve/achieveAdd");
  }

  function achiveClick(id) {
    props.history.push(`/achieve/achieveDetail/${id}`);
  }

  const filetypeOption = [
    {
      dicItemName: '文件',
      id: 1
    },
    {
      dicItemName: '视频',
      id: 2
    },
    {
      dicItemName: '图片',
      id: 3
    },
    {
      dicItemName: '软件',
      id: 4
    },
    {
      dicItemName: '其它',
      id: 5
    },
  ];


  return (
    <div className="centerbox">
      <div className="nav-content">
        <ChooseNav
          key={'share_type'}
          type={'share_type'}
          title={'成果类别'}
          options={industryOption}
          changeOptionId={changeOptionId}
        />

        <ChooseNav
          key={'file_type'}
          type={'file_type'}
          title={'文件类型'}
          options={filetypeOption}
          changeOptionId={changeOptionId}
        />
      </div>

      <div className="center-content">
        <div className="centerScreen">
          <div className="center-left-but">
            <div className={classNames({ 'center-left-butD': true, 'center-left-butDACT': orderBy === '-1' })} onClick={() => { changeSort('-1') }}>默认</div>
            <div className={classNames({ 'center-left-butD': true, 'center-left-butDACT': orderBy === 'created_at' })} onClick={() => { changeSort('created_at') }}><Icon type="arrow-down" />最新</div>
            <div className={classNames({ 'center-left-butD': true, 'center-left-butDACT': orderBy === 'view_count' })} onClick={() => { changeSort('view_count') }}><Icon type="arrow-down" />最热</div>
          </div>
          {
            // current_user.login &&
            <div className="center-right-but">
              <Button className="mr15 font-12" size="small" type="primary" onClick={goAchieveMine}>我的成果</Button>
              <Button className="mr20 font-12" size="small" type="primary" onClick={goAdd}><i className="iconfont icon-zaibianji font-12 mr3"></i>发布成果</Button>
            </div>
          }
        </div>

        <ItemList
          list={achiveList}
          itemClick={achiveClick}
        />

      </div>

      <div className="edu-txt-center ">
        <Pagination
          showQuickJumper
          onChange={(page) => { setCurPage(page) }}
          current={curPage}
          total={total}
          showTotal={total => `共 ${total} 条`}
        />
      </div>

    </div>
  )
}