src/pages/Invoice/waitProcessRecord/index.tsx

import { RESPONSE_CODE } from '@/constants/enum';
import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceRecord/components/InvoiceRecordDetailModal';
import InvoiceModal from '@/pages/Invoice/waitProcessRecord/components/InvoiceModal';
import InvoicingModal from '@/pages/Invoice/waitProcessRecord/components/InvoicingModal';
import ManualInvoicingModal from '@/pages/Invoice/waitProcessRecord/components/ManualInvoicingModal';
import { PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceConstBeforeInvoicingInvoiceRecordStatus,
  postServiceConstInvoiceType,
  postServiceConstInvoicingType,
  postServiceInvoiceCancelInvoiceRecord,
  postServiceInvoiceQueryInvoiceRecordList,
  postServiceOrderQuerySalesCode,
} from '@/services';
import { enumToProTableEnumValue, enumToSelect } from '@/utils';
import { ActionType, ProTable } from '@ant-design/pro-components';
import {
  Button,
  Divider,
  Popconfirm,
  Space,
  Table,
  Tooltip,
  message,
} from 'antd';
import { useEffect, useRef, useState } from 'react';
const InvoiceRecord = () => {
  const waitDealrecordActionRef = useRef<ActionType>();
  const [invoiceTypeValueEnum, setInvoiceTypeValueEnum] = useState({});
  const [invoicingTypeValueEnum, setInvoicingTypeValueEnum] = useState({});
  const [salesCodeValueEnum, setSalesCodeValueEnum] = useState({});
  const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
    useState(false);
  const [invoiceRecord, setInvoiceRecord] = useState({});
  useEffect(() => {
    async function extracted() {
      let invoiceTypeRet = await postServiceConstInvoiceType();
      setInvoiceTypeValueEnum(invoiceTypeRet.data);
    }
    extracted().catch(console.error);
  }, []);
  useEffect(() => {
    async function extracted() {
      let invoicingTypeRet = await postServiceConstInvoicingType();
      setInvoicingTypeValueEnum(invoicingTypeRet.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 reloadRecordTable = () => {
    waitDealrecordActionRef.current?.reload();
  };
  const waitDealRecordColumns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      hideInSearch: true,
      ellipsis: true,
      width: 48,
    },
    {
      title: '开票编号',
      valueType: 'text',
      dataIndex: 'id',
      copyable: true,
      hideInSearch: true,
      ellipsis: true,
      width: 100,
    },
    {
      title: '发票状态',
      valueType: 'Text',
      dataIndex: 'statusText',
      ellipsis: true,
      width: 100,
      hideInSearch: true,
    },
    {
      title: '重开发票',
      key: 'reissueInvoiceNumbers',
      ellipsis: true,
      width: 160,
      hideInSearch: true,
      render: (_, record) => {
        //将record.reissueInvoiceNumbers用，拼接
        const numbersText = record.reissueInvoiceNumbers?.join(',');
        return record.reissueInvoiceNumbers?.map((item) => {
          return (
            <Tooltip title={numbersText} key={item}>
              <Space>
                {item}
                <Divider type={'vertical'} />
              </Space>
            </Tooltip>
          );
        });
      },
    },
    {
      title: '申请开票时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      width: 160,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '订单号',
      valueType: 'text',
      dataIndex: 'mainOrderId',
      hideInTable: true,
    },
    {
      title: '申请人',
      valueType: 'text',
      hideInSearch: true,
      ellipsis: true,
      width: 100,
      dataIndex: 'createByName',
    },
    {
      title: '购方名称',
      valueType: 'text',
      dataIndex: 'partyAName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '联系人',
      valueType: 'text',
      dataIndex: 'contacts',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '购方税号',
      valueType: 'text',
      hideInSearch: true,
      dataIndex: 'partyATaxid',
      ellipsis: true,
    },
    {
      title: '收款单位',
      valueType: 'text',
      hideInSearch: true,
      dataIndex: 'partyBName',
      ellipsis: true,
    },
    {
      title: '开票金额',
      valueType: 'money',
      dataIndex: 'price',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '开具类型',
      valueType: 'Text',
      dataIndex: 'invoicingTypeText',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '发票类型',
      valueType: 'Text',
      dataIndex: 'typeText',
      width: 100,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '是否加急',
      valueType: 'Text',
      dataIndex: 'isUrgentText',
      width: 50,
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '申请备注',
      valueType: 'text',
      dataIndex: 'applyInvoicingNotes',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '购方名称',
      valueType: 'Text',
      dataIndex: 'partyANameLike',
      hideInTable: true,
    },
    {
      title: '联系人',
      valueType: 'text',
      dataIndex: 'contactsLike',
      hideInTable: true,
    },
    {
      title: '收款单位',
      valueType: 'select',
      dataIndex: 'partyB',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: enumToProTableEnumValue(PAYEE_OPTIONS),
    },
    {
      title: '主订单号',
      valueType: 'Text',
      dataIndex: 'mainOrderId',
      hideInTable: true,
    },
    {
      title: '子订单号',
      valueType: 'Text',
      dataIndex: 'subOrderId',
      hideInTable: true,
    },
    {
      title: '销售代表',
      valueType: 'select',
      dataIndex: 'salesCode',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: salesCodeValueEnum,
    },
    {
      title: '发票类型',
      valueType: 'select',
      dataIndex: 'type',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: enumToProTableEnumValue(invoiceTypeValueEnum),
    },
    {
      title: '开具类型',
      valueType: 'select',
      dataIndex: 'invoicingType',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: enumToProTableEnumValue(invoicingTypeValueEnum),
    },
    {
      title: '开票状态',
      valueType: 'select',
      key: 'status',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstBeforeInvoicingInvoiceRecordStatus();
        return enumToSelect(res.data);
      },
    },
    {
      title: '是否加急',
      valueType: 'select',
      dataIndex: 'isUrgent',
      filters: true,
      onFilter: true,
      hideInTable: true,
      valueEnum: {
        true: {
          text: '是',
          status: true,
        },
        false: {
          text: '否',
          status: false,
        },
      },
    },
    {
      title: '申请开票时间',
      dataIndex: 'createTime',
      valueType: 'dateTimeRange',
      width: 200,
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createTimeGe: value[0],
              createTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 200,
      render: (text, record) => {
        return [
          /*<InvoiceRecordDetailModal
                                          key="detail"
                                          id={record.id}
                                          subOrderIds={record.subOrderIds}
                                          onClose={()=>{
                                            waitDealrecordActionRef.current?.reload();
                                          }
                                          }
                                        />*/
          <>
            {record.paths.includes('DETAIL') && (
              <a
                key="detail"
                onClick={() => {
                  setInvoiceRecordDetailVisible(true);
                  setInvoiceRecord(record);
                }}
              >
                详情
              </a>
            )}
          </>,
          <>
            {record.paths.includes('PREVIEW') && (
              <InvoiceModal key="invoiceModal" recordId={record.id} />
            )}
          </>,
          <>
            {record.paths.includes('INVOICING') && (
              <ManualInvoicingModal
                key={'ManualInvoicingModal'}
                record={record}
              ></ManualInvoicingModal>
            )}
          </>,
          <>
            {record.paths.includes('CANCEL') && (
              <Popconfirm
                title="取消开票"
                description="确认取消开票?"
                onConfirm={async () => {
                  let res = await postServiceInvoiceCancelInvoiceRecord({
                    data: {
                      invoiceRecordIds: [record.id],
                    },
                  });
                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    message.success('取消成功');
                  }
                  waitDealrecordActionRef?.current?.reload();
                }}
                okText="确定"
                cancelText="取消"
              >
                <Button type="link" danger>
                  取消
                </Button>
              </Popconfirm>
            )}
          </>,
        ];
      },
    },
  ];
  return (
    <div className="invoice-index">
      <ProTable
        columns={waitDealRecordColumns}
        actionRef={waitDealrecordActionRef}
        cardBordered
        pagination={{
          showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
          pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
        }}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          alwaysShowAlert: true,
        }}
        tableAlertOptionRender={({ selectedRowKeys, selectedRows }) => {
          console.log(selectedRows);
          console.log(selectedRowKeys);
          return (
            <Space size={16}>
              <InvoicingModal
                reloadRecordTable={reloadRecordTable}
                key="button"
                selectedRowKeys={selectedRowKeys}
              />
            </Space>
          );
        }}
        request={async (params) => {
          let res = await postServiceInvoiceQueryInvoiceRecordList({
            data: {
              ...params,
              statusIn: [
                'WAITING_FOR_INVOICING',
                'AUDITING',
                'AUDITING_NOT_PASSED',
              ],
              needBuildDetails: true,
              needBuildSubOrders: true,
            },
          });
          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',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{}}
        dateFormatter="string"
        headerTitle="待开票列表"
        scroll={{ x: 2000, y: 500 }}
      />
      {invoiceRecordDetailVisible ? (
        <InvoiceRecordDetailModal
          key="detail"
          id={invoiceRecord.id}
          setVisible={setInvoiceRecordDetailVisible}
          reloadTable={() => {
            waitDealrecordActionRef?.current?.reload();
          }}
        />
      ) : (
        ''
      )}
    </div>
  );
};
export default InvoiceRecord;