YW_Goods/src/pages/D_storeManage/D1storage/D1goods/index.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Select } from 'antd'
import { D1GselectNum, D1GselectSta } from './data'
import { TypeD1Gform } from './type'
import MyTable from '@/components/MyTable'
import { D1GtableC } from '@/utils/tableData'
import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'
import history from '@/utils/history'
import classNames from 'classnames'

const baseFormData: TypeD1Gform = {
  pageSize: 10,
  pageNum: 1,
  aaaa: '',
  bbbb: '',
  cccc: '',
  dddd: ''
}
// 待完善 没有接入后端

type Props = {
  lookData: string[]
}

function D1goods({ lookData }: Props) {
  useEffect(() => {
    console.log('获取参数', lookData)
  }, [lookData])

  const [formData, setFormData] = useState(baseFormData)
  const formDataRef = useRef(baseFormData)

  useEffect(() => {
    formDataRef.current = formData
  }, [formData])

  // 点击搜索的 时间戳
  const [timeKey, setTimeKey] = useState(0)

  // 点击搜索
  const clickSearch = useCallback(() => {
    setFormData({ ...formData, pageNum: 1 })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [formData])

  // 封装发送请求的函数
  const getListFu = useCallback(() => {
    console.log('发送请求', formDataRef.current)
  }, [])

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

  // 输入框的改变
  const txtChangeFu = useCallback(
    (txt: string, key: 'bbbb' | 'cccc') => {
      setFormData({
        ...formData,
        [key]: txt
      })
    },
    [formData]
  )

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setFormData(baseFormData)
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [])

  // 页码变化
  // const paginationChange = useCallback(
  //   (pageNum: number, pageSize: number) => {
  //     setFormData({ ...formData, pageNum, pageSize })
  //     setTimeout(() => {
  //       setTimeKey(Date.now())
  //     }, 50)
  //   },
  //   [formData]
  // )

  // 打开侧边栏
  const [cathet, setCathet] = useState(0)

  const startBtn = useMemo(() => {
    return [
      {
        title: '编号类型',
        render: (item: any) => {
          return (
            <span
              onClick={() => setCathet(item.id)}
              className={classNames('D1GtNum', item.id === cathet ? 'D1GtNumAc' : '')}
            >
              {item.num}
            </span>
          )
        }
      }
    ]
  }, [cathet])

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: any) => {
          return (
            <Button
              size='small'
              type='text'
              onClick={() => history.push(`/storage_look/${item.id}`)}
            >
              查看
            </Button>
          )
        }
      }
    ]
  }, [])

  return (
    <div className={styles.D1goods}>
      <div className='D1Gtop'>
        <div className='D1GtRow'>
          <span className='D1GtRowTxt'>编号类型：</span>
          <Select
            options={D1GselectNum}
            style={{ width: 160 }}
            value={formData.aaaa}
            onChange={e => setFormData({ ...formData, aaaa: e })}
          />
        </div>

        <div className='D1GtRow'>
          <span className='D1GtRowTxt'>藏品编号：</span>
          <Input
            placeholder='请输入内容'
            maxLength={30}
            value={formData.bbbb}
            onChange={e => txtChangeFu(e.target.value, 'bbbb')}
          />
        </div>

        <div className='D1GtRow'>
          <span className='D1GtRowTxt'>藏品名称：</span>
          <Input
            placeholder='请输入内容'
            maxLength={30}
            value={formData.cccc}
            onChange={e => txtChangeFu(e.target.value, 'cccc')}
          />
        </div>

        <div className='D1GtRow'>
          <span className='D1GtRowTxt'>库存状态：</span>
          <Select
            options={D1GselectSta}
            style={{ width: 160 }}
            value={formData.dddd}
            onChange={e => setFormData({ ...formData, dddd: e })}
          />
        </div>

        <div className='D1GtRow'>
          <Button type='primary' onClick={clickSearch}>
            查询
          </Button>
          &emsp;
          <Button onClick={resetSelectFu}>重置</Button>
        </div>
      </div>

      <div className='D1Gmain'>
        <div className='D1Gmainll'>
          {1 + 1 === 2 ? <div className='D1null'>暂无数据</div> : '树列表'}
        </div>
        <div className='D1Gmainrr'>
          {/* 表格 */}
          <MyTable
            yHeight={666}
            list={[
              { id: 99, thumb: '', num: '一段编号_可点击' },
              { id: 199, thumb: '', num: '一段编号_可点击' }
            ]}
            columnsTemp={D1GtableC}
            startBtn={startBtn}
            lastBtn={tableLastBtn}
            pagingInfo={false}
            widthSet={{ description: 200 }}
          />
        </div>
      </div>

      {/* 打开侧边栏 */}
      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />
    </div>
  )
}

const MemoD1goods = React.memo(D1goods)

export default MemoD1goods