contentCooper/src/views/weData/qw/index.tsx

import { useState, useEffect } from 'react';
import { Tabs, Table, Button, message } from "antd";
import type { TableProps } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import http from '@src/http';
import { qwDataList, qwDataExport } from '@src/http/api.ts';

interface QwDataItem {
  dateStr: string;
  fansIncreaseCount: number;
  firstLevel: number;
  name: string;
  openRate: number;
  score: number;
}

interface QwDataResponse {
  curPageFirstRecNum: number;
  curPageLastRecNum: number;
  currentPage: number;
  nextPage: number;
  obj: QwDataItem;
  objs: QwDataItem[];
  offset: number;
  pageSize: number;
  prePage: number;
  totalPage: number;
  totalSize: number;
}

const Qw: React.FC = () => {
  const [dataSource, setDataSource] = useState<QwDataItem[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0
  });
  const [activeKey, setActiveKey] = useState("0");

  const columns:TableProps['columns'] = [
    {
      title: '日期',
      dataIndex: 'dateStr',
      key: 'dateStr',
    },
    {
      title: '小程序访问人数',
      dataIndex: 'firstLevel',
      key: 'firstLevel',
    },
    {
      title: '本渠道裂变率',
      dataIndex: 'score',
      key: 'score',
    },
  ];

  const specialColumns:TableProps['columns'] = [
    {
      title: '日期',
      dataIndex: 'dateStr',
      key: 'dateStr',
    },
    {
      title: '视频标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '视频ID',
      dataIndex: 'videoId',
      key: 'videoId',
    },
    {
      title: '传播得分',
      dataIndex: 'score',
      key: 'score',
    },
	];
	
	const subChannelColumns:TableProps['columns'] = [
		{
			title: '日期',
			dataIndex: 'dateStr',
			key: 'dateStr',
		},
		{
			title: '子渠道',
			dataIndex: 'subChannel',
			key: 'subChannel',
		},
		{
			title: '小程序访问人数',
			dataIndex: 'firstLevel',
			key: 'firstLevel',
		},
		{
			title: '传播得分',
			dataIndex: 'score',
			key: 'score',
		},
	];

  const fetchQwData = async (page = 1, pageSize = 10, type = 0) => {
    try {
      setLoading(true);
      const res = await http.post<QwDataResponse>(qwDataList, {
        pageNum: page,
        pageSize: pageSize,
        type: type
      });

      if (res.success && res.data) {
        setDataSource(res.data.objs || []);
        setPagination({
          current: res.data.currentPage,
          pageSize: res.data.pageSize,
          total: res.data.totalSize
        });
      }
    } catch (error) {
      console.error('获取企微数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchQwData(1, 10, 0);
  }, []);

  const onChange = (key: string) => {
    console.log(key);
    // 先清空数据源，避免显示上一个tab的数据
    setDataSource([]);
    fetchQwData(1, 10, Number(key));
  };

  const handleTableChange = (pagination: any) => {
    const { current, pageSize } = pagination;
    // 先清空数据源
    setDataSource([]);
    fetchQwData(current, pageSize, Number(activeKey));
  };

  const handleDownload = async () => {
    try {
      setDownloadLoading(true);
      // 根据当前选中的标签页设置type参数
      const type = Number(activeKey);

      // 使用当前分页信息
      const response = await http.post(qwDataExport, {
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
        type: type
      });

      if (response.success && response.data) {
        window.open(response.data as string);
      } else {
        message.error('下载失败');
      }
    } catch {
      message.error('下载失败');
    } finally {
      setDownloadLoading(false);
    }
  };

  return (
    <>
      <div className={"flex mb-[10px]"}>
        <div className={"flex-1 leading-[32px]"}>企微数据统计</div>
      </div>
      <Tabs
        defaultActiveKey="0"
        type="card"
        tabBarExtraContent={{
          right: <Button
            type="link"
            icon={<DownloadOutlined />}
            loading={downloadLoading}
            onClick={handleDownload}
          >
            下载数据
          </Button>
        }}
        onChange={(key) => {
          setActiveKey(key);
          onChange(key);
        }}
        items={[
          {
            key: "0",
            label: "总体",
            children: (
              <Table
                dataSource={dataSource}
                columns={columns}
                rowKey="dateStr"
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
          {
            key: "1",
            label: "群发",
            children: (
              <Table
                dataSource={dataSource}
                columns={columns}
                rowKey="dateStr"
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
          {
            key: "2",
            label: "私发",
            children: (
              <Table
                dataSource={dataSource}
                columns={columns}
                rowKey="dateStr"
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
          {
            key: "3",
            label: "自动回复",
            children: (
              <Table
                dataSource={dataSource}
                columns={columns}
                rowKey="dateStr"
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
          {
            key: "4",
            label: "分链接",
            children: (
              <Table
                dataSource={dataSource}
                columns={specialColumns}
                rowKey="dateStr"
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
					},
					{
            key: "5",
            label: "分子渠道",
            children: (
              <Table
                dataSource={dataSource}
                columns={subChannelColumns}
                rowKey="dateStr"
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
        ]}
      />
    </>
  )
}

export default Qw