ShouBo3_houTai/src/pages/A3holding/index.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { A3FromDataType, A3Selct_1 } from './data'
import { A3_APIdel, A3_APIgetList } from '@/store/action/A3holding'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import { A3tableType } from '@/types'
import { Button, Input, Select } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A1EditInfoType, A1Selct } from '../A1event/data'
import MyTable from '@/components/MyTable'
import { A3tableC } from '@/utils/tableData'
import { A8_APIgetList } from '@/store/action/A8dict'
import A3add from './A3add'
function A3holding() {
  const dispatch = useDispatch()

  const [fromData, setFromData] = useState<A3FromDataType>({
    pageNum: 1,
    pageSize: 10,
    searchKey: '',
    type: '',
    dictAgeId: '',
    display: ''
  })
  const getListFu = useCallback(() => {
    dispatch(A3_APIgetList(fromData))
  }, [dispatch, fromData])

  useEffect(() => {
    getListFu()
  }, [getListFu])

  const [inputKey, setInputKey] = useState(1)

  // 标题的输入
  const timeRef = useRef(-1)
  const fromKeyChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
      clearTimeout(timeRef.current)
      timeRef.current = window.setTimeout(() => {
        setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 })
      }, 500)
    },
    [fromData]
  )

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setInputKey(Date.now())
    setFromData({
      pageNum: 1,
      pageSize: 10,
      searchKey: '',
      type: '',
      dictAgeId: '',
      display: ''
    })
  }, [])

  const tableInfo = useSelector((state: RootState) => state.A3holding.tableInfo)

  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A3_APIdel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A3tableType) => (
          <>
            <Button
              size='small'
              type='text'
              onClick={() => setEditInfo({ id: item.id, txt: '查看' })}
            >
              查看
            </Button>
            <Button
              size='small'
              type='text'
              onClick={() => setEditInfo({ id: item.id, txt: '编辑' })}
            >
              编辑
            </Button>
            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
          </>
        )
      }
    ]
  }, [delTableFu])

  //查看、新增、编辑
  const [editInfo, setEditInfo] = useState<A1EditInfoType>({
    id: 0,
    txt: ''
  })

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

  const A8tableList = useSelector((state: RootState) => state.A8dict.list)

  const selectAgeArr = useMemo(() => {
    return [{ value: '', label: '全部' }, ...A8tableList.map(v => ({ value: v.id, label: v.name }))]
  }, [A8tableList])

  return (
    <div className={styles.A3holding}>
      <div className='pageTitle'>馆藏管理{editInfo.id ? ` - ${editInfo.txt}` : ''}</div>

      {/* 顶部筛选 */}
      <div className='A3top'>
        <div className='A3topLeft'>
          <div>
            <span>名称：</span>
            <Input
              key={inputKey}
              maxLength={200}
              showCount
              style={{ width: 300 }}
              placeholder='请输入关键字'
              allowClear
              onChange={e => fromKeyChangeFu(e, 'searchKey')}
            />
          </div>

          <div>
            <span>类别：</span>
            <Select
              placeholder='请选择'
              style={{ width: 200 }}
              value={fromData.type}
              onChange={e => setFromData({ ...fromData, pageNum: 1, type: e })}
              options={A3Selct_1}
            />
          </div>

          <div>
            <span>年代：</span>
            <Select
              placeholder='请选择'
              style={{ width: 200 }}
              value={fromData.dictAgeId}
              onChange={e => setFromData({ ...fromData, pageNum: 1, dictAgeId: e })}
              options={selectAgeArr}
            />
          </div>

          <div>
            <span>状态：</span>
            <Select
              placeholder='请选择'
              style={{ width: 100 }}
              value={fromData.display}
              onChange={e => setFromData({ ...fromData, pageNum: 1, display: e })}
              options={A1Selct}
            />
          </div>
        </div>

        <div>
          <Button type='primary' onClick={() => setEditInfo({ id: -1, txt: '新增' })}>
            新增
          </Button>
          &emsp;
          <Button onClick={resetSelectFu}>重置</Button>
        </div>
      </div>

      {/* 表格主体 */}
      <div className='A3tableBox'>
        <MyTable
          yHeight={625}
          list={tableInfo.list}
          columnsTemp={A3tableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
        />
      </div>

      {/* 新增 编辑 查看 */}
      {editInfo.id ? (
        <A3add
          editInfo={editInfo}
          selectAgeArr={selectAgeArr}
          closeFu={() => setEditInfo({ id: 0, txt: '' })}
          editTableFu={() => getListFu()}
          addTableFu={() => resetSelectFu()}
        />
      ) : null}
    </div>
  )
}

const MemoA3holding = React.memo(A3holding)

export default MemoA3holding