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,
  ProFormFieldSet,
  ProFormInstance,
  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 }) => {
  const [readOnly, setReadOnly] = useState(true);
  const [initialValues] = useState({});
  const [detailTableData, setDetailTableData] = useState([]);
  const [payees, setPayees] = useState([]);
  const [payeeNameOptions, setPayeeNameOptions] = useState([]);
  const formRef = useRef<ProFormInstance>();
  const [form] = Form.useForm();

  useEffect(() => {
    console.log('id' + id);
    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);
  };
  useEffect(() => {
    getRecord(id);
  }, []);

  const updateDetails = (values) => {
    setDetailTableData(values);
  };
  return (
    <>
      <Space>
        <ModalForm
          open
          title="发票详情"
          formRef={formRef}
          initialValues={initialValues}
          request={async () => {
            let ret = await postServiceInvoiceGetInvoiceRecord({
              query: {
                id: id,
              },
            });
            return ret.data;
          }}
          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,
            onCancel: () => {
              setVisible(false);
            },
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            const result = await postServiceInvoiceModifyRecord({
              data: {
                ...values,
                invoiceDetails: {
                  ...detailTableData,
                },
              },
            });
            if (result.result === RESPONSE_CODE.SUCCESS) {
              message.success('提交成功');
            }
            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!' },
              ]}
            />
            <ProFormFieldSet
              name="list"
              label="子订单号"
              transform={(value: any) => ({
                list: value,
                startTime: value[0],
                endTime: value[1],
              })}
            >
              {initialValues?.subOrderIds?.map((item) => {
                return (
                  <>
                    <Button
                      className="pl-1 pr-0"
                      type="link"
                      target="_blank"
                      href={'/order?subOrderId=' + item}
                    >
                      {item}
                    </Button>
                    <Divider type="vertical" />
                  </>
                );
              })}
            </ProFormFieldSet>
          </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>
    </>
  );
};