xie_fang_tong_admin/src/pages/OperationsDashboard/ProductDetail.tsx

import Constants from '@/constants';
import { exportOperationalProductDataUsingPost, operationalProductDataUsingPost } from '@/services/pop-b2b2c/pbcUserRecordLogController';
import { ActionType, ProColumns, ProFormInstance, ProTable } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useSearchParams } from '@umijs/max';
import { Button, message } from 'antd';
import moment from 'moment';
import React, { useRef } from 'react';

/**
 * 查询表格
 * @param param0
 */
const fetchData = async (params: API.PbcOperationalDashboardDTO) => {
  const msg = await operationalProductDataUsingPost(params);
  return {
    data: msg.data?.records,
    total: msg.data?.total,
    success: msg.retcode,
  } as any;
};

const handleExport = async (values?: API.PbcOperationalDashboardDTO) => {
  
  const hide = message.loading('正在处理', 0);
  try {
    await exportOperationalProductDataUsingPost(
      { ...values },
      {
        responseType: 'blob',
        getResponse: true,
        parseResponse: false,
        data: { ...values, fileName: '导出' },
      },
    );
    hide();
    return false;
  } catch (error) {
    console.log(error);
    hide();
    message.error('处理失败，请重试');
    return false;
  }
};

// eslint-disable-next-line @typescript-eslint/ban-types
const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [searchParams] = useSearchParams();
  const userId = searchParams.get('userId');
  const userName = searchParams.get('userName');
  const ref = useRef<ProFormInstance<API.PbcOperationalProductVO>>();

  const columns: ProColumns<API.PbcOperationalProductVO>[] = [
    {
      title: '序号',
      width: 80,
      dataIndex: 'serialNumber',
      search: false
    },
    {
      title: '商品分类',
      dataIndex: 'pbcProductCategoryName',
      search: false,
    },
    {
      title: '商品名称',
      dataIndex: 'pbcProductTitle',
      search: false,
    },
    {
      title: '价格',
      dataIndex: 'pbcProductPrice',
      search: false,
    },
    {
      title: '所属商户',
      dataIndex: 'pbcBusinessName',
      search: false,
    },
    {
      title: '创建日期',
      dataIndex: 'pbcCreateAt',
      hideInTable: true,
      valueType: 'dateTimeRange'
    },
    {
      title: '状态',
      dataIndex: 'pbcProductState',
      valueType: 'select',
      search: false,
      valueEnum: Constants.pbcProductState,
    },
  ];
  return (
    <PageContainer
      header={{
        title: userName || '',
        breadcrumb: {},
      }}
    >
      <ProTable<API.PbcBusiness>
        columns={columns}
        actionRef={actionRef}
        request={(param: any) => {
          const queryParam = {
            ...param,
            userId: userId ? parseInt(userId) : undefined,
            startDate: param.pbcCreateAt && param.pbcCreateAt.length > 1 ? param.pbcCreateAt[0] : undefined,
            endDate: param.pbcCreateAt && param.pbcCreateAt.length > 1 ? param.pbcCreateAt[1] : undefined
          }
          return fetchData(queryParam);
        }}
        rowKey="serialNumber"
        size="small"
        bordered
        search={{
          labelWidth: 'auto',
          span: 6,
        }}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true,
        }}
        formRef={ref}
        toolbar={{
          actions: [
            <Button type="primary" key="export" onClick={() => {
              const values: any = ref.current?.getFieldsValue();
              const queryParam = {
                userId: userId ? parseInt(userId) : undefined,
                startDate: values?.pbcCreateAt && values?.pbcCreateAt.length > 1 ? moment(values?.pbcCreateAt[0]).format("YYYY-MM-DD HH:mm:ss") : undefined,
                endDate: values?.pbcCreateAt && values?.pbcCreateAt.length > 1 ? moment(values?.pbcCreateAt[1]).format("YYYY-MM-DD HH:mm:ss") : undefined
              }
              handleExport(queryParam)
            }}>导出</Button>
          ]
        }}
        scroll={{
          y: 'calc(100vh - 320px)',
        }}
        dateFormatter="string"
        options={false}
        toolBarRender={() => []}
      />
    </PageContainer>
  );
};

export default TableList;