组件封装及父子组件传值

//index.tsx
  const { init: initFeeInfoModal, modal: modalFeeInfoModal } = useFeeInfoModal()
  ...
  {
        title: '费用信息',
        dataIndex: 'fy',
        hideInSearch: true,
        ellipsis: false,
        width: 120,
        render(dom, record, index, action, schema) {
          return (
            <Button onClick={() => initFeeInfoModal(pdCode, record.productId, '')} type="link">
              查看
            </Button>
          )
        },
      },
...
//useFeeInfoModal.tsx 
import { Button, Modal, Table, TableColumnsType } from 'antd'
import React, { useState } from 'react'
import { feePriceEnum, feePriceMap, feeTypeEnum, feeTypeMap } from './lib'
import { useRequest } from 'ahooks'
import { getFeeDataInfoList, queryChargesRecordInfo } from './service'
import RateBook from './RateBook'

const useFeeInfoModal = () => {
  const [open, setOpen] = useState(false)

  const [jifeiOpen, setJifeiOpen] = useState(false)
  const [rowRecord, setRowRecord] = useState<any>({})
  const [relatedProductRecordId, setRelatedProductRecordId] = useState<any>({})

  const init = (productDefCode, productId, relatedProductRecordId) => {
    setOpen(true)
    setRelatedProductRecordId(relatedProductRecordId)
    setTimeout(() => {
      const params: any = { productDefCode, productId }
      if (relatedProductRecordId) {
        params.relatedProductRecordId = relatedProductRecordId
      } else {
        // params.invalidation = 0
      }
      runGetFee(params)
    }, 10)
  }

  const {
    data: feeDataSource,
    run: runGetFee,
    loading,
  } = useRequest(relatedProductRecordId ? queryChargesRecordInfo : getFeeDataInfoList, { manual: true })

  const feeColumns: TableColumnsType<any> = [
    {
      title: '序号',
      dataIndex: 'index',
      ellipsis: false,
      width: 60,
      render: (text, record, inx) => inx + 1,
    },
    {
      title: '服务编码',
      dataIndex: 'serviceCode',
      width: 80,
      ellipsis: false,
    },
    {
      title: '服务名称',
      dataIndex: 'serviceName',
      width: 80,
      ellipsis: false,
    },
    {
      title: '费用代码',
      dataIndex: 'chargeCode',
      width: 80,
      ellipsis: false,
    },
    {
      title: '费用名称',
      dataIndex: 'chargeName',
      width: 80,
      ellipsis: false,
    },
    {
      title: '费用类型',
      dataIndex: 'chargeType',
      width: 80,
      ellipsis: false,
      render: (t, record, index) => {
        return record.tariffName ? (
          <Button type="link">{feeTypeMap[record.chargeType]}</Button>
        ) : (
          feeTypeMap[record.chargeType]
        )
      },
    },
    {
      title: '费率本名称',
      dataIndex: 'tariffName',
      width: 100,
      ellipsis: true,
    },
    {
      title: '币种',
      dataIndex: 'currencyName',
      width: 80,
      ellipsis: false,
    },
    {
      title: '费率价格',
      dataIndex: 'rate',
      width: 120,
      ellipsis: false,
      render: (t, record, index) => {
        return (
          <>
            <span>{feePriceMap[record.discussPriceType]}</span>
            {record.discussPriceType == feePriceEnum.notFace && <span className="ml-10px">{record.rate}</span>}
          </>
        )
      },
    },
    {
      title: '计费单位',
      dataIndex: 'billingUnit',
      width: 80,
      ellipsis: false,
    },
    {
      title: '费率生效时间',
      dataIndex: 'rateBeginTime',
      width: 120,
      ellipsis: true,
      render(t, record) {
        return record.rateBeginTime?.split(' ')?.[0]
      },
    },
    {
      title: '费率失效时间',
      dataIndex: 'rateEndTime',
      width: 120,
      ellipsis: true,
      render(t, record) {
        return record.rateEndTime?.split(' ')?.[0]
      },
    },
    {
      title: '是否失效',
      width: 100,
      render: (_, record: any) => {
        return +record?.invalidation === 1 ? '是' : '否'
      },
    },
    {
      title: '价格更新人',
      dataIndex: 'updateUser',
      width: 100,
      ellipsis: true,
    },
    {
      title: '价格更新时间',
      dataIndex: 'updateTime',
      width: 120,
      ellipsis: true,
    },
  ]

  return {
    init,
    modal: (
      <>
        <Modal
          key={'feeinfo'}
          width={1100}
          onCancel={() => setOpen(false)}
          footer={[<Button onClick={() => setOpen(false)}>关闭</Button>]}
          open={open}
          title="费用信息">
          <Table
            rowClassName={(record, index) => {
              let className = 'light-row'
              if (index % 2 === 1) className = 'dark-row'
              return className
            }}
            scroll={{ x: 1600, y: 500 }}
            pagination={false}
            columns={feeColumns}
            onRow={record => {
              console.log('record: ', record)
              return {
                onClick: () => {
                  if (record.chargeType == feeTypeEnum.book && record.tariffName) {
                    setRowRecord(record)
                    setJifeiOpen(true)
                  }
                },
              }
            }}
            rowKey={'id'}
            dataSource={feeDataSource}
            loading={loading}
          />
        </Modal>

        <Modal
          width={1000}
          key={'jifeimodal'}
          open={jifeiOpen}
          title="计费信息"
          footer={null}
          maskClosable
          onCancel={() => setJifeiOpen(false)}>
          <RateBook tariffId={rowRecord.tariffId} />
        </Modal>
      </>
    ),
  }
}

export default useFeeInfoModal