src/pages/Invoice/InvoiceVerification/index.tsx

import ButtonConfirm from '@/components/ButtomConfirm';
import EllipsisDiv from '@/components/Div/EllipsisDiv';
import { RESPONSE_CODE } from '@/constants/enum';
import InvoiceWriteOffModal from '@/pages/Invoice/Invoice/components/invoiceWriteOffModal';
import BankImportModal from '@/pages/Invoice/InvoiceVerification/components/BankImportModal';
import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceRecordDetailModal';
import InvoiceVerificationModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceVerificationModal';
import {
  BANK_STATEMENT_COLUMNS,
  INVOICE_STATUS,
} from '@/pages/Invoice/constant';
import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceBankStatementDeleteBankStatement,
  postServiceBankStatementEditBankStatement,
  postServiceBankStatementQueryBankStatement,
  postServiceInvoiceGetWriteOffRecord,
} from '@/services';
import { orderExport } from '@/services/order';
import { enumValueToLabel, formatDateTime } from '@/utils';
import { formatDate } from '@/utils/time';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { useRef, useState } from 'react';
const InvoiceRecord = () => {
  const invoiceActionRef = useRef<ActionType>();
  const bankActionRef = useRef<ActionType>();
  const [bankImportModalVisible, setBankImportModalVisible] = useState(false);
  const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
    useState(false);
  const [perms, setPerms] = useState([]);
  const [messageApi, contextHolder] = message.useMessage();
  const [invoiceId] = useState(undefined);
  const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
    useState(false);
  const [invoiceRecord] = useState({});
  const reloadBankStatementTable = () => {
    bankActionRef.current?.reload();
  };
  const getTableCellText = (target: any) => {
    if (!target) {
      return '';
    }
    if (target.props) {
      return target.props.text;
    }
    return target;
  };
  const bankStatemetColumnsInit = () => {
    let columns = BANK_STATEMENT_COLUMNS.map((item) => {
      let newItem = { ...item };
      let dataIndex = item.dataIndex;
      let dataType = item.valueType;
      newItem.render = (text, record) => {
        let textValue = record[dataIndex];
        if (dataType === 'date') {
          textValue = formatDate(textValue);
        }
        if (dataType === 'dateTime') {
          textValue = formatDateTime(textValue);
        }
        if (dataType === 'money') {
          if (textValue === null || textValue === undefined) {
            textValue = '';
          } else {
            textValue = '￥' + textValue;
          }
        }
        switch (dataIndex) {
          case 'invoiceStatus':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOCING_STATUS,
                )}
              />
            );
          case 'status':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOICE_STATUS,
                )}
              />
            );
          case 'payee':
            return (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  PAYEE_OPTIONS,
                )}
              />
            );
          default:
            return <EllipsisDiv text={getTableCellText(textValue)} />;
        }
      };
      return newItem;
    });
    columns.push({
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 80,
      render: (text, record, _, action) => {
        let btns = [];
        if (record.paths?.includes('editBankStatement')) {
          btns.push(
            <a
              key="editable"
              onClick={() => {
                action?.startEditable?.(record.id);
              }}
            >
              编辑
            </a>,
          );
        }
        if (record.paths?.includes('writeOff') && record.writeOffId !== null) {
          btns.push(
            <InvoiceWriteOffModal
              getData={async () => {
                console.log(record.writeOffId);
                const res = await postServiceInvoiceGetWriteOffRecord({
                  data: { id: record.writeOffId },
                });
                const data = res.data;
                return {
                  invoiceWriteOffId: data.id,
                  invoices: data.invoiceDtos,
                  bankStatements: data.bankStatementDtos,
                };
              }}
              key="writeOff"
              triggerButton={<Button type="link">核销记录</Button>}
              readOnly={true}
            />,
          );
        }
        if (record.paths?.includes('deleteBankStatement')) {
          btns.push(
            <ButtonConfirm
              key="delete"
              className="p-0"
              title={'是否删除该银行流水记录？'}
              text="删除"
              onConfirm={async () => {
                let res = await postServiceBankStatementDeleteBankStatement({
                  data: { id: record.id },
                });
                if (res.result === RESPONSE_CODE.SUCCESS) {
                  message.success(res.message);
                  reloadBankStatementTable();
                }
              }}
            />,
          );
        }
        return btns;
      },
    });
    return columns;
  };
  return (
    <div className="invoice-index">
      <ProTable
        columns={bankStatemetColumnsInit()}
        actionRef={bankActionRef}
        cardBordered
        pagination={{
          pageSizeOptions: ['10', '20', '50', '100'],
        }}
        editable={{
          type: 'multiple',
          onSave: async (rowKey, data) => {
            await postServiceBankStatementEditBankStatement({ data: data });
          },
          actionRender: (row, config, defaultDom) => [
            defaultDom.save,
            defaultDom.cancel,
          ],
        }}
        request={async (params) => {
          const res = await postServiceBankStatementQueryBankStatement({
            data: { ...params },
          });
          if (res) {
            setPerms(res?.data?.specialPath);
            return {
              data: res?.data?.data || [],
              total: res?.data?.total || 0,
            };
          }
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
          optionRender: (searchConfig, formProps, dom) => [
            ...dom.reverse(),
            <Button
              key="out"
              onClick={() => {
                const values = searchConfig?.form?.getFieldsValue();
                messageApi.open({
                  type: 'loading',
                  content: '导出中...',
                  duration: 0,
                });
                orderExport(
                  '/api/service/invoice/exportBankStatements',
                  '银行流水.xlsx',
                  'POST',
                  values,
                  () => {
                    messageApi.destroy();
                  },
                );
              }}
            >
              导出
            </Button>,
          ],
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{}}
        dateFormatter="string"
        headerTitle="银行流水列表"
        scroll={{ x: 1400, y: 360 }}
        toolBarRender={() => [
          <>
            {perms?.includes('import') && (
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  setBankImportModalVisible(true);
                }}
                type="primary"
              >
                导入
              </Button>
            )}
          </>,
        ]}
      />
      {bankImportModalVisible ? (
        <BankImportModal
          setVisible={setBankImportModalVisible}
          onClose={() => {
            setBankImportModalVisible(false);
            invoiceActionRef.current?.reload();
            bankActionRef.current?.reload();
          }}
        ></BankImportModal>
      ) : (
        ''
      )}
      {invoiceVerificationVisible ? (
        <InvoiceVerificationModal
          setVisible={setInvoiceVerificationVisible}
          invoiceId={invoiceId}
          onClose={() => {
            invoiceActionRef.current?.reload();
            bankActionRef.current?.reload();
          }}
        ></InvoiceVerificationModal>
      ) : (
        ''
      )}
      {invoiceRecordDetailVisible ? (
        <InvoiceRecordDetailModal
          key="detail"
          id={invoiceRecord.id}
          setVisible={setInvoiceRecordDetailVisible}
        />
      ) : (
        ''
      )}
      {contextHolder}
    </div>
  );
};
export default InvoiceRecord;