LSDF/src/pages/ObjectSon/Object4/AddObject4/GoodsAll.tsx

import { Button, Input, Modal, Table } from 'antd'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { getGoodsListAllAPI } from '@/store/action/object4'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import ImageLazy from '@/components/ImageLazy'
import '../../Object3/AddObject3/GoodsAll.css'
import { MessageFu } from '@/utils/message'

type Props = {
  colsePage: any
  addPage: boolean
}
function GoodsAll({ colsePage, addPage }: Props) {
  const dispatch = useDispatch()

  // 进页面获取列表
  useEffect(() => {
    dispatch(getGoodsListAllAPI(''))
  }, [dispatch])

  // 藏品名称
  const [name, setName] = useState('')
  const nameTime = useRef(-1)
  const nameChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setName(e.target.value)
      clearTimeout(nameTime.current)
      nameTime.current = window.setTimeout(() => {
        dispatch(getGoodsListAllAPI(e.target.value))
      }, 500)
    },
    [dispatch]
  )

  // 有关表格
  const results = useSelector((state: RootState) => state.object4Store.goodsAllList)

  // 已经选中的表格数据
  const resultsAc = useSelector((state: RootState) => state.object4Store.goodsTableList)

  const columns = useMemo(() => {
    return [
      {
        title: '缩略图',
        render: (item: any) => <ImageLazy width={120} height={70} src={item.thumb} />
      },
      {
        title: '藏品编号名称',
        dataIndex: 'dictNum'
      },
      {
        title: '藏品编号',
        render: (item: any) => (item.num ? item.num : '-')
      },
      {
        title: '藏品名称',
        dataIndex: 'name'
      },
      {
        title: '类别',
        dataIndex: 'dictGoodType'
      }
    ]
  }, [])

  // 选中的表格数据
  const [tableSelectList, setTableSelectList] = useState([])
  // 表格的多选

  const rowSelection = useMemo(() => {
    return {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        setTableSelectList(selectedRows)
      },
      // 默认选中
      defaultSelectedRowKeys: resultsAc.map((v: any) => v.id)
    }
  }, [resultsAc])

  // 点击确定
  const btnOkFu = useCallback(() => {
    dispatch({
      type: 'object4/getGoodsTableList',
      payload: tableSelectList.map((v: any) => {
        return {
          ...v,
          outLocation: ''
        }
      })
    })
    MessageFu.success('添加成功!')
    colsePage()
  }, [colsePage, dispatch, tableSelectList])

  return (
    <div className={styles.GoodsAll}>
      <Modal
        open={addPage}
        destroyOnClose
        wrapClassName='GoodsAllModel'
        title='添加藏品'
        onCancel={colsePage}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <div className='ObjectAddTit'>
          <div className='topSearch'>
            <span>藏品编号：</span>
            <Input
              value={name}
              maxLength={10}
              style={{ width: 300 }}
              placeholder='请输入'
              allowClear
              onChange={e => nameChange(e)}
            />
          </div>
        </div>
        <div className='tableBox'>
          <Table
            size='small'
            scroll={{ y: 500 }}
            rowSelection={{
              type: 'checkbox',
              ...rowSelection
            }}
            dataSource={results}
            columns={columns}
            rowKey='id'
            pagination={false}
          />
        </div>
        <br />
        <div className='moveBtn'>
          <Button type='primary' onClick={btnOkFu} disabled={tableSelectList.length === 0}>
            提交
          </Button>
        </div>
      </Modal>
    </div>
  )
}

const MemoGoodsAll = React.memo(GoodsAll)

export default MemoGoodsAll