src/pages/Invoice/InvoiceRecord/index.tsx

import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceRecord/components/InvoiceRecordDetailModal';
import ManualInvoicingModal from '@/pages/Invoice/InvoiceRecord/components/ManualInvoicingModal';
import { PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceBankStatementEditBankStatement,
  postServiceConstAfterInvoicingInvoiceRecordStatus,
  postServiceConstInvoiceType,
  postServiceInvoiceConfirmInvoice,
  postServiceInvoiceDownloadInvoice,
  postServiceInvoiceInvoicing,
  postServiceInvoiceQueryInvoiceRecordList,
  postServiceOrderQuerySalesCode,
} from '@/services';
import { excelExport } from '@/services/exportRequest';
import { enumToProTableEnumValue, enumToSelect } from '@/utils';
import { ActionType, ModalForm, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Space, Table, Tooltip, message } from 'antd';
import axios from 'axios';
import { useEffect, useRef, useState } from 'react';
const InvoiceRecord = () => {
  const processedRecordRef = useRef<ActionType>();
  const [invoiceTypeValueEnum, setInvoiceTypeValueEnum] = useState({});
  const [salesCodeValueEnum, setSalesCodeValueEnum] = useState({});
  const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
    useState(false);
  const [invoiceRecord, setInvoiceRecord] = useState({});
  const [messageApi, contextHolder] = message.useMessage();
  useEffect(() => {
    async function extracted() {
      let invoiceTypeRet = await postServiceConstInvoiceType();
      setInvoiceTypeValueEnum(invoiceTypeRet.data);
    }
    extracted().catch(console.error);
  }, []);
  useEffect(() => {
    async function extracted() {
      const res = await postServiceOrderQuerySalesCode();
      let map = {};
      res.data?.forEach((item) => {
        map[item.userName] = {
          text: item.userName,
          status: item.userName,
        };
      });
      setSalesCodeValueEnum(map);
    }
    extracted().catch(console.error);
  }, []);
  const downloadImportTemplate = async (urls) => {
    messageApi.open({
      type: 'loading',
      content: '下载中',
      duration: 0,
    });
    axios({
      url: '/api/service/invoice/batchDown',
      method: 'post',
      responseType: 'blob',
      headers: { Authorization: localStorage.getItem('token') },
      data: {
        invoiceRecordIds: urls,
      },
    })
      .then((response) => {
        // 创建一个新的 Blob 对象，它包含了服务器响应的数据（即你的 Excel 文件）
        const blob = new Blob([response.data]); // Excel 的 MIME 类型
        const downloadUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = downloadUrl;
        a.download = '发票.zip'; // 你可以为文件命名
        document.body.appendChild(a);
        a.click(); // 模拟点击操作来下载文件
        URL.revokeObjectURL(downloadUrl); // 释放掉 blob 对象所占用的内存
        document.body.removeChild(a);
      })
      .catch((error) => {
        // 处理错误
        console.error('下载错误', error);
      })
      .finally(() => {
        messageApi.destroy();
      });
  };
  const processedRecordColumns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 50,
    },
    {
      title: '开票编号',
      valueType: 'text',
      dataIndex: 'id',
      width: 100,
      copyable: true,
      ellipsis: true,
    },
    {
      title: '发票号码',
      valueType: 'text',
      dataIndex: 'invoiceNumber',
      width: 150,
      copyable: true,
      ellipsis: true,
    },
    {
      title: '重开发票',
      key: 'reissueInvoiceNumbers',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
      render: (_, record) => {
        //将record.reissueInvoiceNumbers用，拼接
        const numbersText = record.reissueInvoiceNumbers?.join(',');
        return record.reissueInvoiceNumbers?.map((item) => {
          return (
            <Tooltip title={numbersText} key={item}>
              <Space key={item}>
                {item}
                <Divider type={'vertical'} />
              </Space>
            </Tooltip>
          );
        });
      },
    },
    {
      title: '开票日期',
      dataIndex: 'invoicingDate',
      valueType: 'date',
      width: 140,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '发票类型',
      valueType: 'Text',
      dataIndex: 'typeText',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '发票状态',
      valueType: 'Text',
      dataIndex: 'statusText',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '购方名称',
      valueType: 'text',
      dataIndex: 'partyAName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '联系人',
      valueType: 'text',
      dataIndex: 'contacts',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '购方税号',
      valueType: 'text',
      dataIndex: 'partyATaxid',
      ellipsis: true,
    },
    {
      title: '收款单位',
      valueType: 'text',
      dataIndex: 'partyBName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '申请人',
      valueType: 'text',
      width: 100,
      dataIndex: 'createByName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '开票金额(元)',
      valueType: 'money',
      dataIndex: 'price',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '备注',
      valueType: 'text',
      dataIndex: 'contacts',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '发票下载次数',
      dataIndex: 'downloadCount',
      valueType: 'Text',
      hideInSearch: true,
    },
    {
      title: '失败原因',
      valueType: 'text',
      dataIndex: 'failureReason',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '购方名称',
      valueType: 'text',
      dataIndex: 'partyANameLike',
      hideInTable: true,
    },
    {
      title: '主订单号',
      valueType: 'Text',
      dataIndex: 'mainOrderId',
      hideInTable: true,
    },
    {
      title: '子订单号',
      valueType: 'Text',
      dataIndex: 'subOrderId',
      hideInTable: true,
    },
    {
      title: '发票类型',
      valueType: 'select',
      dataIndex: 'type',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: enumToProTableEnumValue(invoiceTypeValueEnum),
    },
    {
      title: '开票状态',
      key: 'status',
      valueType: 'select',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstAfterInvoicingInvoiceRecordStatus();
        return enumToSelect(res.data);
      },
    },
    {
      title: '申请人',
      valueType: 'select',
      dataIndex: 'createByName',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: salesCodeValueEnum,
    },
    {
      title: '联系人',
      valueType: 'text',
      dataIndex: 'contactsLike',
      hideInTable: true,
    },
    {
      title: '开票日期',
      dataIndex: 'invoicingDate',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              invoicingDateGe: value[0],
              invoicingDateLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '收款单位',
      valueType: 'select',
      dataIndex: 'partyB',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: enumToProTableEnumValue(PAYEE_OPTIONS),
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record) => [
        <>
          {record.paths.includes('DETAIL') && (
            <a
              key="detail"
              onClick={() => {
                setInvoiceRecordDetailVisible(true);
                setInvoiceRecord(record);
              }}
            >
              详情
            </a>
          )}
        </>,
        <>
          {record.status === 'SUCCESS' &&
            record.paths.includes('DOWNLOAD_INVOICE') && (
              <a
                href={record.invoiceAddress}
                download
                onClick={() => {
                  postServiceInvoiceDownloadInvoice({
                    data: record.id,
                  });
                }}
              >
                下载发票
              </a>
            )}
        </>,
        <>
          {record.status === 'FAIL' && record.paths.includes('RETRY') && (
            <ModalForm
              title="提示"
              trigger={
                <Button type="link" danger>
                  重试
                </Button>
              }
              autoFocusFirstInput
              modalProps={{
                destroyOnClose: true,
              }}
              submitTimeout={2000}
              onFinish={async () => {
                const res = await postServiceInvoiceInvoicing({
                  data: {
                    invoiceRecordIds: [record.id],
                  },
                });
                if (res) {
                  message.success(res.message);
                  processedRecordRef?.current?.reload();
                }
                return true;
              }}
            >
              确定重试订单信息吗？
            </ModalForm>
          )}
        </>,
        <>
          {record.paths.includes('INVOICING') && (
            <ManualInvoicingModal
              key={'ManualInvoicingModal'}
              record={record}
            ></ManualInvoicingModal>
          )}
        </>,
        <>
          {!record.invoice?.invoiceConfirmStatusDatetime && (
            <ButtonConfirm
              key="delete"
              className="p-0"
              title={'确认发票？'}
              text="确认发票"
              onConfirm={async () => {
                let res = await postServiceInvoiceConfirmInvoice({
                  data: { invoiceIds: [record.invoice?.id] },
                });
                if (res.result === RESPONSE_CODE.SUCCESS) {
                  message.success(res.message);
                  processedRecordRef?.current?.reload();
                } else {
                  message.error(res.message);
                }
              }}
            />
          )}
        </>,
      ],
    },
  ];
  return (
    <div className="invoice-index">
      <ProTable
        columns={processedRecordColumns}
        actionRef={processedRecordRef}
        cardBordered
        pagination={{
          showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
          pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
        }}
        editable={{
          type: 'multiple',
          onSave: async (rowKey, data) => {
            await postServiceBankStatementEditBankStatement({ data: data });
          },
          actionRender: (row, config, defaultDom) => [
            defaultDom.save,
            defaultDom.cancel,
          ],
        }}
        search={{
          labelWidth: 'auto',
          defaultCollapsed: false,
          optionRender: (searchConfig, formProps, dom) => [
            ...dom,
            <Button
              key="out"
              onClick={() => {
                const values = searchConfig?.form?.getFieldsValue();
                console.log(values);
                messageApi.open({
                  type: 'loading',
                  content: '正在导出文件...',
                });
                excelExport(
                  '/api/service/invoice/exportInvoiceRecords',
                  {
                    ...values,
                    statusIn: ['INVOICING', 'SUCCESS', 'FAIL', 'REISSUED'],
                  },
                  () => {
                    messageApi.destroy();
                  },
                );
              }}
            >
              导出
            </Button>,
          ],
        }}
        request={async (params) => {
          let res = await postServiceInvoiceQueryInvoiceRecordList({
            data: {
              ...params,
              statusIn: ['INVOICING', 'SUCCESS', 'FAIL', 'REISSUED'],
            },
          });
          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"
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          alwaysShowAlert: true,
        }}
        tableAlertOptionRender={({ selectedRowKeys, selectedRows }) => {
          return (
            <Space size={16}>
              <Button
                type={'primary'}
                onClick={() => {
                  const ids = selectedRows.map((item) => {
                    return item.id;
                  });
                  downloadImportTemplate(ids);
                }}
                disabled={selectedRowKeys.length === 0}
              >
                下载发票
              </Button>
            </Space>
          );
        }}
        form={{}}
        dateFormatter="string"
        headerTitle="待开票列表"
        scroll={{ x: 2400, y: 360 }}
        toolBarRender={() => []}
      />
      {invoiceRecordDetailVisible ? (
        <InvoiceRecordDetailModal
          key="detail"
          id={invoiceRecord.id}
          setVisible={setInvoiceRecordDetailVisible}
          reloadTable={() => {
            processedRecordRef?.current?.reload();
          }}
        />
      ) : (
        ''
      )}
      {contextHolder}
    </div>
  );
};
export default InvoiceRecord;