canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import BankImportModal from '@/pages/Invoice/Invoice/components/BankImportModal';
import InvoiceVerificationModal from '@/pages/Invoice/Invoice/components/InvoiceVerificationModal';
import { PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceInvoiceDeleteInvoice,
  postServiceInvoiceModify,
  postServiceInvoiceQueryInvoice,
} from '@/services';
import { downloadFile } from '@/services/order';
import { enumToProTableEnumValue, getUserInfo } from '@/utils';
import { ActionType, ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, Space, Table, message } from 'antd';
import { useRef, useState } from 'react';

const InvoiceRecord = () => {
  const invoiceActionRef = useRef<ActionType>();
  const [bankImportModalVisible, setBankImportModalVisible] = useState(false);
  const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
    useState(false);
  const [invoiceId, setInvoiceId] = useState(undefined);
  const [messageApi, contextHolder] = message.useMessage();
  const reloadInvoiceTable = () => {
    invoiceActionRef.current?.reload();
  };
  const userInfo = getUserInfo();

  return (
    <div className="invoice-index">
      <ProTable
        columns={[
          {
            dataIndex: 'invoiceId',
            title: 'id',
            valueType: 'text',
            hideInTable: true,
            hideInSearch: true,
            readonly: true,
            width: 100,
          },
          {
            dataIndex: 'invoiceNumber',
            title: '发票号码',
            valueType: 'text',
            width: 180,
          },
          {
            dataIndex: 'mainOrderId',
            title: '订单编号',
            valueType: 'text',
            width: 160,
            hideInTable: true,
          },
          {
            dataIndex: 'invoiceStatusText',
            title: '开票类型',
            hideInSearch: true,
            valueType: 'text',
            width: 100,
          },
          {
            dataIndex: 'invoiceStatus',
            title: '发票类型',
            valueType: 'select',
            hideInTable: true,
            width: 100,
            valueEnum: enumToProTableEnumValue({
              SPECIALLY_INVOICED: '专票',
              COMMON_INVOICED: '普票',
            }),
          },
          {
            title: '金额',
            dataIndex: 'money',
            hideInTable: false,
            hideInSearch: true,
            valueType: 'money',
            width: 180,
          },
          {
            title: '购买方',
            dataIndex: 'purchaser',
            valueType: 'text',
            width: 200,
          },
          {
            title: '购方税号',
            dataIndex: 'partyATaxid',
            hideInSearch: true,
            valueType: 'text',
            width: 180,
          },
          {
            title: '联系人',
            dataIndex: 'contacts',
            valueType: 'text',
            width: 100,
          },
          {
            title: '收款单位',
            dataIndex: 'payee',
            valueType: 'text',
            width: 250,
            valueEnum: enumToProTableEnumValue(PAYEE_OPTIONS),
          },
          {
            title: '开票日期',
            dataIndex: 'invoicingTime',
            valueType: 'date',
            width: 150,
            hideInSearch: true,
          },
          {
            title: '申请人',
            dataIndex: 'createByName',
            valueType: 'text',
            width: 100,
          },
          {
            title: '操作',
            valueType: 'option',
            key: 'option',
            fixed: 'right',
            width: 160,
            render: (record) => {
              let btns = [];
              if (record.paths?.includes('queryInvoiceDetails')) {
                btns.push(
                  <Button
                    className="p-0"
                    key="view"
                    type="link"
                    onClick={() => {
                      setInvoiceVerificationVisible(true);
                      setInvoiceId(record.id);
                    }}
                  >
                    查看
                  </Button>,
                );
              }
              if (record.paths?.includes('deleteInvoice')) {
                btns.push(
                  <Popconfirm
                    key="delete"
                    title={'冲红'}
                    description={
                      '确认冲红发票号码为[ ' +
                      record.invoiceNumber +
                      ' ]的发票吗？'
                    }
                    onConfirm={async () => {
                      let res = await postServiceInvoiceDeleteInvoice({
                        data: { invoiceIds: [record.id] },
                      });
                      if (res) {
                        message.success(res.message);
                        reloadInvoiceTable();
                      }
                    }}
                    okText="确认"
                    cancelText="取消"
                  >
                    <Button type={'link'} danger>
                      删除
                    </Button>
                  </Popconfirm>,
                );
              }
              return btns;
            },
          },
        ]}
        actionRef={invoiceActionRef}
        cardBordered
        pagination={{
          pageSizeOptions: ['10', '20', '50', '100'],
        }}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          alwaysShowAlert: true,
        }}
        tableAlertRender={({ selectedRowKeys, onCleanSelected }) => {
          return (
            <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
                <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                  取消选择
                </a>
              </span>
            </Space>
          );
        }}
        tableAlertOptionRender={({ selectedRowKeys, onCleanSelected }) => {
          console.log('selected' + JSON.stringify(selectedRowKeys));
          return (
            <>
              {(userInfo.roles?.includes('ADMIN') ||
                userInfo.roles?.includes('FINANCE')) && (
                <Space size={16}>
                  <Popconfirm
                    title="确定要冲红选中的订单吗？"
                    onConfirm={async () => {
                      const res = await postServiceInvoiceDeleteInvoice({
                        data: { invoiceIds: selectedRowKeys },
                      });
                      if (res.result === RESPONSE_CODE.SUCCESS) {
                        message.success('成功');
                      }
                      invoiceActionRef.current?.reload();
                      onCleanSelected();
                    }}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button type="primary" danger>
                      批量冲红
                    </Button>
                  </Popconfirm>
                </Space>
              )}
            </>
          );
        }}
        request={async (params) => {
          const res = await postServiceInvoiceQueryInvoice({
            data: {
              afterInvoicingStatus: 'WAIT_FLUSH',
              ...params,
            },
          });
          if (res) {
            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);
          },
        }}
        editable={{
          type: 'multiple',
          onSave: async (key, row, originRow) => {
            console.log('row: ', row);
            console.log('originRow: ', originRow);
            postServiceInvoiceModify({
              data: row,
            });
          },
        }}
        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,
                });
                downloadFile(
                  '/api/service/invoice/exportInvoices',
                  '发票.xlsx',
                  'POST',
                  {
                    ...values,
                    invoicingBeginTime: values.invoicingTime[0],
                    invoicingEndTime: values.invoicingTime[1],
                  },
                  () => {
                    messageApi.destroy();
                  },
                );
              }}
            >
              导出
            </Button>,
          ],
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{}}
        dateFormatter="string"
        headerTitle="发票列表"
        scroll={{ x: 1400, y: 360 }}
      />

      {bankImportModalVisible ? (
        <BankImportModal
          setVisible={setBankImportModalVisible}
          onClose={() => {
            setBankImportModalVisible(false);
            invoiceActionRef.current?.reload();
          }}
        ></BankImportModal>
      ) : (
        ''
      )}

      {invoiceVerificationVisible ? (
        <InvoiceVerificationModal
          setVisible={setInvoiceVerificationVisible}
          invoiceId={invoiceId}
          onClose={() => {
            invoiceActionRef.current?.reload();
          }}
        ></InvoiceVerificationModal>
      ) : (
        ''
      )}
      {contextHolder}
    </div>
  );
};

export default InvoiceRecord;