src/pages/Invoice/InvoiceRecord/components/InvoiceRecordDetailModal.tsx

import { RESPONSE_CODE } from '@/constants/enum';
import InvoiceDetailTable from '@/pages/Invoice/InvoiceRecord/components/InvoiceDetailTable';
import {
  postServiceConstGetPayeeEnum,
  postServiceConstInvoiceType,
  postServiceConstInvoicingType,
  postServiceInvoiceGetInvoiceRecord,
  postServiceInvoiceModifyRecord,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  ModalForm,
  ProCard,
  ProForm,
  ProFormInstance,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Divider, Form, Space, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
export default ({ id, setVisible, reloadTable }) => {
  const [readOnly, setReadOnly] = useState(true);
  const [detailTableData, setDetailTableData] = useState([]);
  const [payees, setPayees] = useState([]);
  const [payeeNameOptions, setPayeeNameOptions] = useState([]);
  const formRef = useRef<ProFormInstance>();
  const [form] = Form.useForm();
  useEffect(() => {
    const getPayees = async () => {
      let res = await postServiceConstGetPayeeEnum();
      setPayees(res.data);
      let payeeNameOptions = res.data.map((item) => {
        return {
          label: item.payeeName,
          value: item.payeeName,
        };
      });
      setPayeeNameOptions(payeeNameOptions);
    };
    getPayees();
  }, []);
  const getRecord = async (id) => {
    let ret = await postServiceInvoiceGetInvoiceRecord({
      query: {
        id: id,
      },
    });
    console.log(ret.data);
    const updatedInvoiceDetails = ret.data.invoiceDetails?.map(
      (item, index) => ({
        ...item, // 保留原有属性
        tid: index + 1, // 添加tid属性，这里以T开头，后面跟索引+1，仅作示例，实际可根据需求生成tid
      }),
    );
    setDetailTableData(updatedInvoiceDetails);
  };
  useEffect(() => {
    getRecord(id);
  }, []);
  const updateDetails = (values) => {
    setDetailTableData(values);
  };
  return (
    <>
      <Space>
        <ModalForm
          open
          title="发票详情"
          formRef={formRef}
          request={async () => {
            let ret = await postServiceInvoiceGetInvoiceRecord({
              query: {
                id: id,
              },
            });
            const data = ret.data;
            const orderIdMap = data.orderIdMap;
            const orderIdList = [];
            // 使用Object.entries()遍历属性
            Object.entries(orderIdMap).forEach(([key, value]) => {
              const orderId = {
                mainId: key,
                subIds: value,
              };
              orderIdList.push(orderId);
            });
            return {
              ...data,
              orderIdList: orderIdList,
            };
          }}
          submitter={{
            render: () => {
              return [
                <Button
                  type={readOnly ? 'primary' : 'default'}
                  key="ok"
                  onClick={() => {
                    setReadOnly(!readOnly);
                  }}
                >
                  {readOnly ? '编辑' : '取消编辑'}
                </Button>,
                <>
                  {!readOnly && (
                    <Button
                      type="primary"
                      key="submit"
                      onClick={async () => {
                        const result = await postServiceInvoiceModifyRecord({
                          data: {
                            ...form.getFieldsValue(),
                            invoiceDetails: [...detailTableData],
                          },
                        });
                        if (result.result === RESPONSE_CODE.SUCCESS) {
                          message.success('提交成功');
                        }
                        setVisible(false);
                        reloadTable();
                        return true;
                      }}
                    >
                      提交
                    </Button>
                  )}
                </>,
                /*<Button
                                                                                                        type={'default'}
                                                                                                        key="ok"
                                                                                                        onClick={() => {
                                                                                                            setVisible(false)
                                                                                                        }}
                                                                                                    >
                                                                                                        取消
                                                                                                    </Button>,*/
              ];
            },
          }}
          width={1200}
          form={form}
          autoFocusFirstInput
          modalProps={{
            destroyOnClose: true,
            onCancel: () => {
              setVisible(false);
            },
          }}
          grid={true}
          layout="horizontal"
          rowProps={{
            gutter: [0, 0],
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            const result = await postServiceInvoiceModifyRecord({
              data: {
                ...values,
                invoiceDetails: {
                  ...detailTableData,
                },
              },
            });
            if (result.result === RESPONSE_CODE.SUCCESS) {
              reloadTable();
              message.success('提交成功');
            }
            return true;
          }}
        >
          <ProCard
            title="基础信息"
            bordered
            //
            headStyle={{}}
            headerBordered
            size={'small'}
          >
            <ProForm.Group>
              <ProFormText
                readonly
                name="id"
                label="订单批号"
                colProps={{
                  span: 5,
                }}
                tooltip="最长为 24 位"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                colProps={{
                  span: 5,
                }}
                name="createByName"
                label="销售代表"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                colProps={{
                  span: 5,
                }}
                name="createTime"
                label="申请时间"
                placeholder="请输入名称"
              />
              <ProFormSelect
                name="type"
                label="发票类型"
                colProps={{
                  span: 5,
                }}
                readonly={readOnly}
                request={async () => {
                  let invoiceTypeRet = await postServiceConstInvoiceType();
                  return enumToSelect(invoiceTypeRet.data);
                }}
                placeholder="Please select a country"
                rules={[
                  { required: true, message: 'Please select your country!' },
                ]}
              />
              <ProFormSelect
                name="invoicingType"
                readonly={readOnly}
                label="开具类型"
                colProps={{
                  span: 4,
                }}
                request={async () => {
                  let invoicingTypeRet = await postServiceConstInvoicingType();
                  let options = enumToSelect(invoicingTypeRet.data);
                  return options;
                }}
                placeholder="Please select a country"
                rules={[
                  { required: true, message: 'Please select your country!' },
                ]}
              />
              <ProFormList
                label="订单号"
                name="orderIdList"
                creatorButtonProps={false}
                itemRender={({}, { record }) => {
                  console.log('record' + JSON.stringify(record));
                  return (
                    <Space size={[8, 16]} wrap>
                      <Button
                        key={record.mainId}
                        className="pl-1 pr-0"
                        type="link"
                        target="_blank"
                        href={'/order/order?id=' + record.mainId}
                      >
                        {record.mainId}
                      </Button>
                      (
                      {record.subIds.map((item) => {
                        return (
                          <Button
                            key={item}
                            className="pl-1 pr-0"
                            type="link"
                            target="_blank"
                            href={'/order/order?subOrderId=' + item}
                          >
                            {item}
                          </Button>
                        );
                      })}
                      )
                      <Divider type="vertical" />
                    </Space>
                  );
                }}
              >
                <ProFormText allowClear={false} width="xs" name={['name']} />
              </ProFormList>
            </ProForm.Group>
          </ProCard>
          <hr />
          <ProCard title="购方信息" bordered headerBordered size={'small'}>
            <ProForm.Group>
              <ProFormText
                readonly={readOnly}
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyAName"
                label="购方名称"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyATaxid"
                label="购方税号"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                colProps={{
                  span: 8,
                }}
                label="开户银行"
                name={'partyAOpenBank'}
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyABankAccount"
                label="银行账号"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyAAddress"
                label="购方地址"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyAPhoneNumber"
                label="电话"
                placeholder="请输入名称"
              />
            </ProForm.Group>
          </ProCard>
          <hr />
          <ProCard title="销方信息" bordered headerBordered size={'small'}>
            <ProForm.Group>
              <ProFormSelect
                readonly={readOnly}
                width="md"
                name="partyBName"
                options={payeeNameOptions}
                onChange={(value: any) => {
                  let payee = payees.find((item: any) => {
                    return item.payeeName === value;
                  });
                  console.log(JSON.stringify(payee));
                  form.setFieldsValue({
                    partyBTaxid: payee.taxId,
                    partyBBankAccount: payee.bankAccount,
                    partyBOpenBank: payee.openBank,
                    partyBAddress: payee.address,
                    partyBPhoneNumber: payee.phoneNumber,
                  });
                }}
                label="销方名称"
                colProps={{
                  span: 8,
                }}
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBTaxid"
                label="销方税号"
                colProps={{
                  span: 8,
                }}
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBOpenBank"
                label="开户银行"
                colProps={{
                  span: 8,
                }}
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBBankAccount"
                label="银行账号"
                colProps={{
                  span: 8,
                }}
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyBAddress"
                label="销方地址"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                colProps={{
                  span: 8,
                }}
                name="partyBPhoneNumber"
                label="电话"
                placeholder="请输入名称"
              />
            </ProForm.Group>
          </ProCard>
          <hr />
          <ProCard title="发票明细" bordered headerBordered size={'small'}>
            <InvoiceDetailTable
              recordId={id}
              details={detailTableData}
              updateDetails={updateDetails}
              readOnly={readOnly}
            />
          </ProCard>
          <hr />
          <ProCard title="备注" bordered headerBordered size={'small'}>
            <ProFormTextArea
              readonly={readOnly}
              name="comment"
              placeholder="请输入备注"
            />
          </ProCard>
        </ModalForm>
      </Space>
    </>
  );
};