canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import AddBankStatementModal from '@/pages/Invoice/Invoice/components/AddBankStatementModal';
import AddInvoiceModal from '@/pages/Invoice/Invoice/components/AddInvoiceModal';
import { postServiceInvoiceInvoiceWriteOff } from '@/services';
import {
  EditableFormInstance,
  EditableProTable,
  ModalForm,
  ProCard,
  ProForm,
  ProFormDependency,
  ProFormField,
  ProFormInstance,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Divider, Flex, message } from 'antd';
import React, { useRef, useState } from 'react';

let i = 0;

export default ({ getData, triggerButton, readOnly }) => {
  const [InvoiceEditableKeys, setInvoiceEditableKeys] = useState<React.Key[]>(
    () => [],
  );
  const formRef = useRef<ProFormInstance<any>>();

  const invoiceEditorFormRef = useRef<EditableFormInstance>();
  const getInvoiceColumns = () => {
    let columns = [
      {
        title: '发票号码',
        dataIndex: 'invoiceNumber',
        ellipsis: true,
      },
      {
        title: '收款方',
        dataIndex: 'payeeText',
        ellipsis: true,
      },
      {
        title: '付款方',
        dataIndex: 'purchaser',
        ellipsis: true,
      },
      {
        title: '金额',
        dataIndex: 'money',
        valueType: 'money',
        ellipsis: true,
      },
      {
        title: '日期',
        dataIndex: 'invoicingTime',
        valueType: 'date',
        ellipsis: true,
      },
    ];
    if (!readOnly) {
      columns.push({
        title: '操作',
        valueType: 'option',
        render: (text, record) => [
          <a
            key="delete"
            onClick={() => {
              const tableDataSource =
                formRef.current?.getFieldValue('invoices');
              console.log(JSON.stringify(tableDataSource));
              formRef.current?.setFieldValue(
                'invoices',
                tableDataSource.filter((item) => item.id !== record.id),
              );
            }}
          >
            删除
          </a>,
        ],
      });
    }
    return columns;
  };

  const [bankStatementEditableKeys, setBankStatementEditableKeys] = useState<
    React.Key[]
  >(() => []);
  const bankStatementEditorFormRef = useRef<EditableFormInstance>();
  const getBankStatementColumns = () => {
    let columns = [
      {
        title: '流水号',
        dataIndex: 'serialNumber',
        ellipsis: true,
      },
      {
        title: '收款方',
        dataIndex: 'payeeText',
        ellipsis: true,
      },
      {
        title: '付款方',
        dataIndex: 'payer',
        ellipsis: true,
      },
      {
        title: '金额',
        dataIndex: 'amount',
        valueType: 'money',
        ellipsis: true,
      },
      {
        title: '日期',
        dataIndex: 'collectionDatetime',
        valueType: 'date',
        ellipsis: true,
      },
    ];
    columns.push({
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text, record) => [
        <a
          key="delete"
          onClick={() => {
            const tableDataSource =
              formRef.current?.getFieldValue('bankStatements');
            console.log(JSON.stringify(tableDataSource));
            formRef.current?.setFieldValue(
              'bankStatements',
              tableDataSource.filter((item) => item.id !== record.id),
            );
          }}
        >
          删除
        </a>,
      ],
    });
    return columns;
  };

  return (
    <ModalForm
      title={'发票核销'}
      formRef={formRef}
      onFinish={async (values) => {
        const body = {
          invoiceWriteOffId: values.invoiceWriteOffId,
          invoiceIds: values.invoices?.map((item) => item.id),
          bankStatementIds: values.bankStatements?.map((item) => item.id),
        };
        const res = await postServiceInvoiceInvoiceWriteOff({
          data: body,
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success('核销成功');
          return true;
        }
        //return true;
      }}
      trigger={triggerButton}
      validateTrigger="onBlur"
      request={async () => {
        return getData();
      }}
      /*initialValues={{
                    invoiceWriteOffId:invoiceWriteOffId,
                    invoices:originInvoices,
                }}*/
    >
      <ProFormText name={'invoiceWriteOffId'} hidden={true}></ProFormText>

      <EditableProTable
        key={'invoices'}
        rowKey="id"
        editableFormRef={invoiceEditorFormRef}
        headerTitle="发票"
        maxLength={10}
        name="invoices"
        controlled={true}
        recordCreatorProps={false}
        toolBarRender={() => [
          <>
            {!readOnly && (
              <AddInvoiceModal
                key={'addInvoice'}
                getRows={() => formRef.current?.getFieldValue('invoices')}
                onFinish={(datas) => {
                  const invoices = formRef.current?.getFieldValue('invoices');
                  // 添加非空判断，并处理为空的情况
                  const mergedInvoices =
                    invoices && Array.isArray(invoices) ? invoices : [];
                  const mergedDatas =
                    datas && Array.isArray(datas) ? datas : [];
                  let res = [...mergedInvoices, ...mergedDatas];
                  //对res 进行去重处理，根据id去重
                  const resMap = new Map();
                  res.forEach((item) => {
                    resMap.set(item.id, item);
                  });
                  res = Array.from(resMap.values());
                  formRef.current?.setFieldValue('invoices', res);
                }}
              />
            )}
          </>,
        ]}
        columns={getInvoiceColumns()}
        editable={{
          type: 'multiple',
          editableKeys: InvoiceEditableKeys,
          onChange: setInvoiceEditableKeys,
          actionRender: (row, config, defaultDom) => {
            return [
              defaultDom.save,
              defaultDom.delete,
              defaultDom.cancel,
              <a
                key="set"
                onClick={() => {
                  console.log(config.index);
                  i++;
                  invoiceEditorFormRef.current?.setRowData?.(config.index!, {
                    title: '动态设置的title' + i,
                  });
                }}
              >
                动态设置此项
              </a>,
            ];
          },
        }}
      />
      <ProForm.Item>
        <ProCard
          hidden={true}
          title="表格数据"
          headerBordered
          collapsible
          defaultCollapsed
        >
          <ProFormDependency name={['invoices']}>
            {({ invoices }) => {
              return (
                <ProFormField
                  ignoreFormItem
                  fieldProps={{
                    style: {
                      width: '100%',
                    },
                  }}
                  mode="read"
                  valueType="jsonCode"
                  text={JSON.stringify(invoices)}
                />
              );
            }}
          </ProFormDependency>
        </ProCard>
      </ProForm.Item>

      <Divider orientation="left" plain>
        发票关联订单号
      </Divider>
      <ProCard bordered style={{}}>
        <Flex>
          <div>
            <ProFormDependency name={['invoices']}>
              {({ invoices }) => {
                return invoices?.map((item) => (
                  <>
                    {item.invoiceNumber}(
                    {item.mainOrderIds?.map((mainId) => (
                      <>
                        <Button
                          className="pl-1 pr-0"
                          type="link"
                          target="_blank"
                          href={'/order?id=' + mainId}
                        >
                          {mainId}
                        </Button>
                        <Divider type="vertical" />
                      </>
                    ))}
                    )
                    <Divider type="vertical" />
                  </>
                ));
              }}
            </ProFormDependency>
          </div>
        </Flex>
      </ProCard>

      <EditableProTable
        key={'bankStatements'}
        rowKey="id"
        editableFormRef={bankStatementEditorFormRef}
        headerTitle="流水"
        maxLength={10}
        name="bankStatements"
        controlled={true}
        recordCreatorProps={false}
        toolBarRender={() => [
          <>
            <AddBankStatementModal
              getRows={() => formRef.current?.getFieldValue('bankStatements')}
              onFinish={(datas) => {
                const bankStatements =
                  formRef.current?.getFieldValue('bankStatements');
                // 添加非空判断，并处理为空的情况
                const mergedBankStatements =
                  bankStatements && Array.isArray(bankStatements)
                    ? bankStatements
                    : [];
                const mergedDatas = datas && Array.isArray(datas) ? datas : [];
                let res = [...mergedBankStatements, ...mergedDatas];
                //对res 进行去重处理，根据id去重
                const resMap = new Map();
                res.forEach((item) => {
                  resMap.set(item.id, item);
                });
                res = Array.from(resMap.values());
                formRef.current?.setFieldValue('bankStatements', res);
              }}
            />
          </>,
        ]}
        columns={getBankStatementColumns()}
        editable={{
          type: 'multiple',
          editableKeys: bankStatementEditableKeys,
          onChange: setBankStatementEditableKeys,
          actionRender: (row, config, defaultDom) => {
            return [
              defaultDom.save,
              defaultDom.delete,
              defaultDom.cancel,
              <a
                key="set"
                onClick={() => {
                  console.log(config.index);
                  i++;
                  bankStatementEditorFormRef.current?.setRowData?.(
                    config.index!,
                    {
                      title: '动态设置的title' + i,
                    },
                  );
                }}
              >
                动态设置此项
              </a>,
            ];
          },
        }}
      />
      <ProForm.Item>
        <ProCard
          hidden={true}
          title="表格数据"
          headerBordered
          collapsible
          defaultCollapsed
        >
          <ProFormDependency name={['bankStatements']}>
            {({ bankStatements }) => {
              return (
                <ProFormField
                  ignoreFormItem
                  fieldProps={{
                    style: {
                      width: '100%',
                    },
                  }}
                  mode="read"
                  valueType="jsonCode"
                  text={JSON.stringify(bankStatements)}
                />
              );
            }}
          </ProFormDependency>
        </ProCard>
      </ProForm.Item>
    </ModalForm>
  );
};