LeShanDaFoGoods/src/pages/ObjectSon/Object7/index.tsx

import React, { useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import BreadTit from '@/components/BreadTit'
import { useDispatch, useSelector } from 'react-redux'
import { getObject7List, getObject7ListNum, object7DelAPI } from '@/store/action/object7'
import { RootState } from '@/store'
import { useLocation } from 'react-router-dom'
import history from '@/utils/history'
import { MessageFu } from '@/utils/message'
import { Button, DatePicker, Input, Popconfirm, Select, Table } from 'antd'
import AuthButton from '@/components/AuthButton'
import classNames from 'classnames'
const { RangePicker } = DatePicker

function Object7() {
  const dispatch = useDispatch()

  // 获取顶部数量

  useEffect(() => {
    dispatch(getObject7ListNum())
  }, [dispatch])

  // 顶部的状态改变了，统一管理，传到二级页码
  const statusRef = useRef<null | number>(null)

  const dataTit = useSelector((state: RootState) => state.object7Store.infoNum1)

  // 封装发送请求的函数
  const getList = () => {
    const data = {
      ...tableSelect,
      pageNum: pageNumRef.current,
      status: statusRef.current
    }
    dispatch(getObject7List(data))
  }

  // 获取地址栏参数
  const location = useLocation()

  const pageNumRef = useRef(1)

  // 如果有参数 根据参数页码在次发送请求
  useEffect(() => {
    const urlParam = location.state || {}
    setTableSelect({
      ...tableSelect,
      pageNum: Number(urlParam.k) ? Number(urlParam.k) : 1,
      // eslint-disable-next-line eqeqeq
      status: urlParam.d && urlParam.d != 'null' ? Number(urlParam.d) : null
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location])

  // 顶部筛选
  const [tableSelect, setTableSelect] = useState({
    status: null as null | number,
    sourceName: null,
    searchKey: '',
    startTime: '',
    endTime: '',
    pageSize: 10,
    pageNum: 1
  })

  // 当前页码统一
  useEffect(() => {
    pageNumRef.current = tableSelect.pageNum
  }, [tableSelect.pageNum])

  // 顶部状态统一
  useEffect(() => {
    statusRef.current = tableSelect.status
  }, [tableSelect.status])

  // 防止返回的时候发送了2次请求来对应页码

  const getListRef = useRef(-1)

  useEffect(() => {
    clearTimeout(getListRef.current)
    getListRef.current = window.setTimeout(() => {
      getList()
    }, 100)

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableSelect])

  // 藏品来源下拉框筛选
  const handleChange = (value: any) => {
    setTableSelect({ ...tableSelect, sourceName: value, pageNum: 1 })
  }

  // 登记人员输入
  const nameTime = useRef(-1)
  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    clearTimeout(nameTime.current)
    nameTime.current = window.setTimeout(() => {
      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 })
    }, 500)
  }

  // 时间选择器改变
  const timeChange = (date: any, dateString: any) => {
    let startTime = ''
    let endTime = ''
    if (dateString[0] && dateString[1]) {
      startTime = dateString[0] + ' 00:00:00'
      endTime = dateString[1] + ' 23:59:59'
    }
    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 })
  }

  // 点击新增或者编辑按钮
  const addObject = (id?: any) => {
    // 清空详情页面里面的附件表格信息
    dispatch({ type: 'login/setGoodsSonListZJ', payload: [] })

    if (id) history.push(`/object/7/add?k=${pageNumRef.current}&d=${statusRef.current}&id=${id}`)
    else history.push(`/object/7/add?k=${pageNumRef.current}&d=${statusRef.current}`)
  }

  // 点击删除按钮
  const delOne = async (id: number) => {
    const res: any = await object7DelAPI(id)
    if (res.code === 0) {
      MessageFu.success('删除成功!')
      getList()
      dispatch(getObject7ListNum())
    }
  }

  // ---------关于表格

  // 页码变化
  const paginationChange = (pageNum: number, pageSize: number) => {
    setTableSelect({ ...tableSelect, pageNum, pageSize })
  }

  const results = useSelector((state: RootState) => state.object7Store.info1)

  const columns = useMemo(() => {
    return [
      {
        title: '登记编号',
        dataIndex: 'num'
      },
      {
        title: '藏品来源',
        dataIndex: 'sourceName'
      },
      {
        title: '登记人员',
        dataIndex: 'creatorName'
      },
      {
        title: '创建日期',
        dataIndex: 'createTime'
      },
      {
        title: '完成日期',
        render: (item: any) => (item.day && item.status === 3 ? item.day : '-')
      },
      {
        title: '状态',
        dataIndex: 'statusTxt'
      },

      {
        title: '操作',
        render: (item: any) => (
          <>
            <Button
              type='text'
              danger
              onClick={() =>
                history.push(
                  `/object/7/look?k=${pageNumRef.current}&d=${statusRef.current}&id=${item.id}`
                )
              }
            >
              查看
            </Button>
            {item.status === 0 || item.status === 2 ? (
              <AuthButton id={902} type='text' danger onClick={() => addObject(item.id)}>
                编辑
              </AuthButton>
            ) : null}

            {item.status === 1 ? (
              <AuthButton
                id={904}
                onClick={() =>
                  history.push(
                    `/object/7/audit?k=${pageNumRef.current}&d=${statusRef.current}&id=${item.id}`
                  )
                }
                type='text'
                danger
              >
                审核
              </AuthButton>
            ) : null}

            {item.status === 0 || item.status === 2 ? (
              <Popconfirm
                title='确定删除吗?'
                okText='确定'
                cancelText='取消'
                onConfirm={() => delOne(item.id)}
              >
                <AuthButton id={903} type='text' danger>
                  删除
                </AuthButton>
              </Popconfirm>
            ) : null}
          </>
        )
      }
    ]
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // 从仓库中获取藏品来源下拉数据
  const options = useSelector((state: RootState) => state.loginStore.selectAll['文物来源'])

  return (
    <div className={styles.Object7}>
      <div className='breadTit'>
        <BreadTit>
          <div className='breadTitRow active'>征集管理</div>
        </BreadTit>
      </div>

      <div className='objectSonMain'>
        {/* 顶部筛选 */}
        <div className='objectSonMainTit'>
          {dataTit.map((v: any) => (
            <div
              key={v.id}
              onClick={() => setTableSelect({ ...tableSelect, status: v.id, pageNum: 1 })}
              className={classNames(v.id === tableSelect.status ? 'active' : '')}
            >
              {v.name}（{v.num}）
            </div>
          ))}
        </div>
        <div className='objectSonMainTable'>
          {/* 表格数据筛选 */}
          <div className='tableSelectBox'>
            <div className='row'>
              <span>藏品来源：</span>
              <Select
                placeholder='请选择'
                allowClear
                style={{ width: 150 }}
                value={tableSelect.sourceName}
                onChange={handleChange}
                options={options.map((v: any) => ({
                  label: v.name,
                  value: v.name
                }))}
              />
            </div>
            <div className='row'>
              <span>登记人员：</span>
              <Input
                maxLength={10}
                style={{ width: 150 }}
                placeholder='请输入'
                allowClear
                onChange={e => nameChange(e)}
              />
            </div>
            <div className='row'>
              <span>创建日期：</span>
              <RangePicker onChange={timeChange} />
            </div>
            <div className='row'>
              <AuthButton id={102} type='primary' onClick={() => addObject()}>
                新增
              </AuthButton>
            </div>
          </div>

          {/* 表格主体 */}
          <div className='tableMain'>
            <Table
              scroll={{ y: 428 }}
              dataSource={results.list}
              columns={columns}
              rowKey='id'
              pagination={{
                showQuickJumper: true,
                position: ['bottomCenter'],
                showSizeChanger: true,
                current: tableSelect.pageNum,
                pageSize: tableSelect.pageSize,
                total: results.total,
                onChange: paginationChange
              }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoObject7 = React.memo(Object7)

export default MemoObject7