canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import InvoiceDetailTable from '@/pages/Invoice/components/InvoiceDetailTable';
import {
  postServiceConstGetPayeeEnum,
  postServiceConstInvoiceType,
  postServiceConstInvoicingType,
  postServiceInvoiceGetInvoiceRecord,
  postServiceInvoiceModifyRecord,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  ModalForm,
  ProForm,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, Space, message } from 'antd';
import { useEffect, useRef, useState } from 'react';

export default ({ id }) => {
  const [readOnly, setReadOnly] = useState(true);
  const [visible, setVisible] = useState(false);
  const [initialValues, setInitialValues] = useState({});
  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,
      },
    });
    const updatedInvoiceDetails = ret.data.invoiceDetails?.map(
      (item, index) => ({
        ...item, // 保留原有属性
        tid: index + 1, // 添加tid属性，这里以T开头，后面跟索引+1，仅作示例，实际可根据需求生成tid
      }),
    );
    setDetailTableData(updatedInvoiceDetails);
    setInitialValues(ret.data);
  };
  useEffect(() => {
    if (!visible) {
      getRecord(id);
    }
  }, [visible]);

  const updateDetails = (values) => {
    setDetailTableData(values);
  };
  return (
    <>
      <Space>
        <a
          type="primary"
          onClick={() => {
            setVisible(true);
          }}
        >
          详情
        </a>
        {visible && (
          <ModalForm
            open
            onOpenChange={setVisible}
            title="新建表单"
            formRef={formRef}
            initialValues={initialValues}
            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);
                          return true;
                        }}
                      >
                        提交
                      </Button>
                    )}
                  </>,
                  /*<Button
                                        type={'default'}
                                        key="ok"
                                        onClick={() => {
                                            setVisible(false)
                                        }}
                                    >
                                        取消
                                    </Button>,*/
                ];
              },
            }}
            width={1200}
            form={form}
            autoFocusFirstInput
            modalProps={{
              destroyOnClose: true,
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
              const result = await postServiceInvoiceModifyRecord({
                data: {
                  ...values,
                  invoiceDetails: {
                    ...detailTableData,
                  },
                },
              });
              if (result.result === RESPONSE_CODE.SUCCESS) {
                message.success('提交成功');
              }
              setVisible(false);
              return true;
            }}
          >
            基础信息
            <hr />
            <ProForm.Group>
              <ProFormText
                readonly
                name="id"
                label="订单批号"
                tooltip="最长为 24 位"
                placeholder="请输入名称"
              />

              <ProFormText
                readonly
                width="md"
                name="createByName"
                label="销售代表"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="createTime"
                label="申请时间"
                placeholder="请输入名称"
              />
              <ProFormSelect
                name="type"
                label="发票类型"
                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="开具类型"
                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!' },
                ]}
              />
              <ProFormText
                readonly
                width="md"
                name="subOrderIdsText"
                label="订单号"
                initialValue={initialValues?.subOrderIds
                  ?.map((item: any) => {
                    return item;
                  })
                  .join(',')}
                placeholder="请输入名称"
              />
            </ProForm.Group>
            购方信息
            <hr />
            <ProForm.Group>
              <ProFormText
                readonly={readOnly}
                width="md"
                name="partyAName"
                label="购方名称"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                name="partyATaxid"
                label="购方税号"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                label="开户银行"
                name={'partyAOpenBank'}
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                name="partyABankAccount"
                label="银行账号"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                name="partyAAddress"
                label="购方地址"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly={readOnly}
                width="md"
                name="partyAPhoneNumber"
                label="电话"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            销方信息
            <hr />
            <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="销方名称"
                placeholder="请输入名称"
              />

              <ProFormText
                readonly
                width="md"
                name="partyBTaxid"
                label="销方税号"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBOpenBank"
                label="开户银行"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBBankAccount"
                label="银行账号"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBAddress"
                label="销方地址"
                placeholder="请输入名称"
              />
              <ProFormText
                readonly
                width="md"
                name="partyBPhoneNumber"
                label="电话"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            订单信息
            <hr />
            <InvoiceDetailTable
              recordId={id}
              details={detailTableData}
              updateDetails={updateDetails}
              readOnly={readOnly}
            />
            <ProFormTextArea
              readonly={readOnly}
              name="comment"
              label="备注"
              placeholder="请输入备注"
            />
          </ModalForm>
        )}
      </Space>
    </>
  );
};