src/pages/Invoice/ReissueRecord/index.tsx

import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import Audit from '@/pages/Invoice/ReissueRecord/components/Audit';
import {
  postServiceConstInvoiceReissueRecordStatus,
  postServiceInvoiceReissueRecordDelete,
  postServiceInvoiceReissueRecordFlush,
  postServiceInvoiceReissueRecords,
} from '@/services';
import { enumToSelect } from '@/utils';
import { useModel } from '@@/exports';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { message } from 'antd';
import { useRef } from 'react';
export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
export default () => {
  const actionRef = useRef<ActionType>();
  const { getInvoiceFlushStatus, getPayees } = useModel('enum');
  const columns: ProColumns[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '重开的发票',
      dataIndex: 'invoiceNumbers',
      width: 200,
      render: (_, record) => {
        return (
          <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
            {record.invoiceNumbers?.join(',\n')}
          </div>
        );
      },
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '收款单位',
      dataIndex: 'payees',
      width: 230,
      render: (_, record) => {
        return (
          <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
            {record.payees?.join(',\n')}
          </div>
        );
      },
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '联系人',
      dataIndex: 'contacts',
      width: 100,
      render: (_, record) => {
        return (
          <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
            {record.contacts?.join(',\n')}
          </div>
        );
      },
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '重开原因',
      dataIndex: 'notes',
      valueType: 'textarea',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '申请人',
      dataIndex: 'createByName',
      width: 80,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '审核状态',
      dataIndex: 'statusText',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '冲红状态',
      dataIndex: 'flushStatusText',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '财务负责人',
      dataIndex: 'financeManager',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '冲红时间',
      dataIndex: 'flushDatetime',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '审核备注',
      dataIndex: 'auditNotes',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '发票号码',
      dataIndex: 'invoiceNumber',
      hideInTable: true,
    },
    {
      title: '申请人',
      dataIndex: 'createByNameLike',
      hideInTable: true,
    },
    {
      title: '重开原因',
      dataIndex: 'notesLike',
      hideInTable: true,
    },
    {
      title: '申请时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createDatetimeGe: value[0],
              createDatetimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '审核状态',
      valueType: 'select',
      key: 'status',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstInvoiceReissueRecordStatus();
        return enumToSelect(res.data);
      },
    },
    {
      title: '冲红状态',
      valueType: 'select',
      key: 'flushStatus',
      dataIndex: 'flushStatus',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await getInvoiceFlushStatus();
        return enumToSelect(res);
      },
    },
    {
      title: '收款单位',
      valueType: 'select',
      key: 'payee',
      dataIndex: 'payee',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await getPayees();
        return enumToSelect(res);
      },
    },
    {
      title: '财务负责人',
      dataIndex: 'financeManager',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '冲红时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              flushDatetimeGe: value[0],
              flushDatetimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record) => {
        console.log(text);
        return [
          record.paths?.includes('audit') && (
            <Audit
              key={'audit'}
              recordIds={[record.id]}
              onClose={() => {
                actionRef.current?.reload();
              }}
            />
          ),
          record.paths?.includes('audit') && (
            <ButtonConfirm
              key="delete"
              className="p-0"
              title={'确认删除该记录？'}
              text="删除"
              onConfirm={async () => {
                let res = await postServiceInvoiceReissueRecordDelete({
                  data: { id: record.id },
                });
                if (res) {
                  message.success(res.message);
                  actionRef.current?.reload();
                }
              }}
            />
          ),
          record.paths?.includes('flush') && (
            <ButtonConfirm
              key="flush"
              className="p-0"
              title={'确认冲红发票？'}
              text="冲红"
              onConfirm={async () => {
                let res = await postServiceInvoiceReissueRecordFlush({
                  data: { id: record.id },
                });
                if (res) {
                  message.success(res.message);
                  actionRef.current?.reload();
                }
              }}
            />
          ),
        ];
      },
    },
  ];
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params) => {
        const res = await postServiceInvoiceReissueRecords({
          data: {
            ...params,
          },
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          return {
            data: res?.data?.data,
            total: res?.data?.total || 0,
          };
        }
        return {
          data: [],
          success: false,
        };
      }}
      editable={{
        type: 'multiple',
      }}
      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={{
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{
        //pageSize: 5, // 默认每页展示条数
        pageSizeOptions: ['5', '10', '20', '50'], // 可选的条数
        showSizeChanger: true, // 启用条数选择器
        /*
            onChange: (page, pageSize) => console.log(`Page: ${page}, PageSize: ${pageSize}`),
*/
      }}
      dateFormatter="string"
      headerTitle="高级表格"
      scroll={{ x: 'max-content' }}
    />
  );
};