forgeplus-react/src/military/task/myTask/joinTask.jsx

import React, { useCallback, useEffect, useState } from 'react';
import { Tabs, Input, Table, Pagination } from 'antd';
import { Link } from "react-router-dom";
import ChooseNav from '../../components/chooseNav';
import ItemListMyTask from '../components/itemListMyTask';
import { taskStatusAllArr, applyStatusArr, publishModeArr } from '../static';
import { getJoinTaskList } from '../api';
import './index.scss';
const Search = Input.Search;
const { TabPane } = Tabs;

const publishStatusArr = taskStatusAllArr.slice(3);

const statusArr = [];
for (const item of taskStatusAllArr) {
  statusArr[item.dicItemCode] = item.dicItemName;
}

export default ({ taskCategoryValueArr }) => {

  const [paperStatusString, setPaperStatusString] = useState('0,1,2,3,4');
  const [taskStatusString, setTaskStatusString] = useState('3,4,5,6,7,8');

  const [requireAchieve, setRequireAchieve] = useState('1');

  const [searchInput, setSearchInput] = useState('');
  const [orderBy, setOrderBy] = useState('createdAtDesc');
  const [curPage, setCurPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [taskList, setTaskList] = useState([]);
  const [loading, setLoading] = useState(false);


  useEffect(() => {
    const params = {
      paperStatusString,
      taskStatusString,
      searchInput,
      orderBy,
      curPage,
      pageSize: 10,
    };
    setLoading(true);
    getJoinTaskList(params).then(data => {
      if (data) {
        setTaskList(data.rows);
        setTotal(data.total);
      }
      setLoading(false);
    })
  }, [paperStatusString, taskStatusString, searchInput, orderBy, curPage]);


  // const columns = useCallback(()=>{
  const columns = [
    {
      title: '任务',
      dataIndex: 'name',
    },
    {
      title: '类型',
      dataIndex: 'createdAt',
      render: (text, record) => {
        return <div className="flex-column">
          <span className="line_1">{taskCategoryValueArr[record.categoryId]}</span>
          <span className="line_1">{publishModeArr[record.publishMode]}</span>
        </div>
      }
    },
    {
      title: '应征投稿',
      dataIndex: 'papersCount',
      render: (text) => {
        return text || 0
      }
    },
    {
      title: '金额',
      dataIndex: 'bounty',
      render: (text) => {
        return <span className="color-orange">￥{text}</span>
      }
    },
    {
      title: '任务状态',
      dataIndex: 'status',
      render: (text, record) => {
        return statusArr[text]
      }
    },

    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <Link className="line_1 color-grey3" to={`/task/taskDetail/${record.id}`}>查看详情</Link>
        </span >
      ),
    },
  ];
  // },[taskCategoryValueArr,publishModeArr,statusArr]);



  const changeOptionId = useCallback((option, type) => {
    if (type === 'taskStatus') {
      setTaskStatusString(option.dicItemCode.toString() || '3,4,5,6,7,8');
    } else if (type === 'applyStatus') {
      setPaperStatusString(option.dicItemCode.toString() || '0,1,2,3,4');
    }
    setCurPage(1);
  }, [])

  function changeRequireAchieve(key) {
    if (key === '1') {
      setPaperStatusString('0,1,2,3,4');
    } else {
      setTaskStatusString('3,4,5,6,7,8');
      setPaperStatusString('0,1,2,3,4');
    }
    setCurPage(1);
    setRequireAchieve(key);
  }

  return (

    <Tabs className="childTab"
      activeKey={requireAchieve}
      onChange={changeRequireAchieve}
      tabBarExtraContent={
        <Search
          maxLength={20}
          style={{ width: "300px" }}
          placeholder="请输入任务编号/任务名称关键字"
          onSearch={(value) => setSearchInput(value)}
        />
      }
    >
      <TabPane tab="我参加的任务" key="1">
        <ChooseNav
          key={'taskStatus'}
          type={'taskStatus'}
          title={'任务状态：'}
          options={publishStatusArr}
          changeOptionId={changeOptionId}
        />

        <ChooseNav
          key={'applyStatus'}
          type={'applyStatus'}
          title={'应征状态：'}
          options={applyStatusArr}
          changeOptionId={changeOptionId}
        />

        <ItemListMyTask
          list={taskList}
          curPage={curPage}
          total={total}
          taskCategoryValueArr={taskCategoryValueArr}
          changePage={(page) => { setCurPage(page) }}
          loading={loading}
        />
      </TabPane>

      <TabPane tab="我的成果" key="2">
        <ChooseNav
          key={'applyStatus'}
          type={'applyStatus'}
          title={'应征状态：'}
          options={applyStatusArr}
          changeOptionId={changeOptionId}
        />

        <Table
          loading={loading}
          rowKey={(row) => row.id}
          dataSource={taskList}
          columns={columns}
          pagination={false}
          className="mt10"
        />
        {taskList.length > 10 &&
          <Pagination
            onChange={(page) => { setCurPage(page) }}
            current={curPage}
            total={total}
          />}
      </TabPane>
    </Tabs>

  )
}