YW_Goods/src/pages/B_enterTibet/B3goodsTable/index.tsx

import React, { useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import { B3eTableC } from '@/utils/tableData'
import MyPopconfirm from '@/components/MyPopconfirm'
import classNames from 'classnames'
import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'
import { openGoodsInfoFu } from '@/utils/history'
import { useParams } from 'react-router-dom'
import B3GaddNow from './B3GaddNow'
import { forwardRef, useImperativeHandle } from 'react'
import B3GaddNew from './B3GaddNew'
import { TypeB3PageSta } from '../B3_4page/type'

type Props = {
  pageSta: TypeB3PageSta
}

function B3goodsTable({ pageSta }: Props, ref: any) {
  const { key, id } = useParams<any>()

  // 点击删除
  const delTableFu = useCallback(async (id: number) => {}, [])

  // 打开侧边栏
  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={() => openGoodsInfoFu(item.id)}>
                查看
              </Button>
              {['查看', '审批'].includes(pageSta) ? null : (
                <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
              )}
            </>
          )
        }
      }
    ]
  }, [delTableFu, pageSta])

  // 从已存在的藏品中添加
  const [nowSta, setNowSta] = useState({ key: '', id: '', type: '' })

  // 可以让父组件调用子组件的方法

  const resData = useCallback(() => {
    return { xxx: '藏品清单数据' }
  }, [])

  useImperativeHandle(ref, () => ({
    resData
  }))

  return (
    <div className={styles.B3goodsTable}>
      <div className='B3eGtop'>
        <div className='B3eGtop1'>藏品清单</div>
        <div>
          {['查看', '审批'].includes(pageSta) ? null : (
            <>
              <Button type='primary' onClick={() => setNowSta({ key, id, type: 'now' })}>
                从已存在的藏品中添加
              </Button>
              &emsp;
              <Button type='primary' onClick={() => setNowSta({ key, id, type: 'new' })}>
                新增
              </Button>
            </>
          )}
        </div>
      </div>
      {/* 表格 */}
      <MyTable
        list={[{ id: 99, thumb: '', num: '一段编号_可点击' }]}
        columnsTemp={B3eTableC}
        startBtn={startBtn}
        lastBtn={tableLastBtn}
        pagingInfo={false}
      />
      {/* 打开侧边栏 */}
      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />

      {nowSta.id ? (
        nowSta.type === 'now' ? (
          <B3GaddNow nowSta={nowSta} closeFu={() => setNowSta({ key: '', id: '', type: '' })} />
        ) : (
          <B3GaddNew nowSta={nowSta} closeFu={() => setNowSta({ key: '', id: '', type: '' })} />
        )
      ) : null}
    </div>
  )
}
export default forwardRef(B3goodsTable)