invoice_fill_admin/src/pages/invoiceFill/edit.jsx

import ProCard from '@ant-design/pro-card';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import BasicInfo from './components/BasicInfo.jsx';
import ReimbursementPerson from './components/ReimbursementPerson';
import InvoiceDetail from './components/InvoiceDetail.jsx';
import { Button, message } from 'antd';
import { useRef } from 'react';
import { saveInvoiceDetail } from '@/services/invoiceDetail'
import { getInvoicePersonList } from '@/services/invoicePerson'
import { getInvoiceItemTplList } from '@/services/invoiceItemTpl'

export default (props) => {
  const { location } = props;
  const { id } = location.query;
  const detailRef = useRef();
  const addDetail = () => {
    getInvoiceItemTplList({ invoiceId: id }).then(res => {
      if (res.records.length == 0) {
        message.info('清先添加报销项目信息')
        return
      } else {
        getInvoicePersonList({ invoiceId: id }).then(personRes => {
          if (personRes.records.length == 0) {
            message.info('清先添加报销人员信息')
            return
          } else {
            saveInvoiceDetail(id).then(detail => {
              message.success('生成成功')
              detailRef.current.refrash();
            }).catch(err => {
              message.info(err);
              console.log(err);
            })
          }
        }).catch(err => {
          message.info(err);
          console.log(err);
        })
      }
    }).catch(err => {
      message.info(err);
      console.log(err);
    })

  }
  return (
    <PageHeaderWrapper extra={[id && <Button key='addDetail' type='primary' onClick={addDetail}>生成模板</Button>]}>
      <ProCard tabs={{ type: 'card' }} style={{ minHeight: '700px' }}>
        <ProCard.TabPane key={1} tab="基本信息">
          <BasicInfo invoiceId={id} />
          {
            id &&
            <>报销模板
              <InvoiceDetail ref={detailRef} invoiceId={id} /></>
          }

        </ProCard.TabPane>
        <ProCard.TabPane key={2} disabled={!id} tab="报销人员">
          <ReimbursementPerson invoiceId={id} />
        </ProCard.TabPane>
      </ProCard>
    </PageHeaderWrapper>
  );
};