GHHub/src/views/report/Index.jsx

import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Divider, Typography, Badge, List, DatePicker } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
import * as comm from "@/utils/commons";
import dayjs from "dayjs";

const { Title, Paragraph, Text } = Typography;

function Index() {
	const { reportStore, authStore } = useStore();
	const { search_date_start, search_date_end } = reportStore;

	useEffect(() => {}, []);

	const dataSource = [
		{
			key: "1",
			name: "Groups",
			age: 32,
			address: "西湖区湖底公园1号",
		},
		{
			key: "2",
			name: "胡彦祖",
			age: 42,
			address: "西湖区湖底公园1号",
		},
	];

	const columns_primary = [
		{
			title: "Groups",
			dataIndex: "Groups",
			key: "Groups",
		},
		{
			title: "Number of People",
			dataIndex: "PersonNum",
			key: "PersonNum",
		},
		{
			title: "Transaction Amount（USD)",
			dataIndex: "AmountUSD",
			key: "AmountUSD",
		},
		{
			title: "Evaluation Score",
			dataIndex: "EvaluationScore",
			key: "EvaluationScore",
		},
		{
			title: "TP Reviews",
			dataIndex: "TPReviews",
			key: "TPReviews",
		},
		{
			title: "TP Reviews Rate",
			dataIndex: "TPReviewRate",
			key: "TPReviewRate",
		},
		{
			title: "Complaints",
			dataIndex: "Complaints",
			key: "Complaints",
		},
		{
			title: "Complaint Rate",
			dataIndex: "ComplaintRate",
			key: "ComplaintRate",
		},
	];

	const columns_month = [
		{
			title: "Date",
			dataIndex: "VMonth",
			key: "VMonth",
		},
		{
			title: "Groups",
			dataIndex: "GroupsNum",
			key: "GroupsNum",
		},
		{
			title: "Number of People",
			dataIndex: "PersonNum",
			key: "PersonNum",
		},
		{
			title: "Transaction Amount（USD)",
			dataIndex: "AmountUSD",
			key: "AmountUSD",
		},
		{
			title: "Evaluation Score",
			dataIndex: "EvaluationScore",
			key: "EvaluationScore",
		},
		{
			title: "TP Reviews",
			dataIndex: "TPReviews",
			key: "TPReviews",
		},
		{
			title: "TP Reviews Rate",
			dataIndex: "TPReviewRate",
			key: "TPReviewRate",
		},
		{
			title: "Complaints",
			dataIndex: "Complaints",
			key: "Complaints",
		},
		{
			title: "Complaint Rate",
			dataIndex: "ComplaintRate",
			key: "ComplaintRate",
		},
	];

	const columns_dmc = [
		{
			title: "Category",
			dataIndex: "Category",
			key: "Category",
			onCell: (_, index) => {
				if (index === 0) {
					return {
						rowSpan: 3,
						//colSpan:0,
					};
				}
				if (index >= 1 && index <= 2) {
					return {
						rowSpan: 0,
						colSpan: 0,
					};
				}
			},
		},
		{
			title: "Item",
			dataIndex: "Item",
			key: "Item",
		},
		{
			title: "Your Scores",
			dataIndex: "Your Scores",
			key: "Your Scores",
		},
		{
			title: "Final Scores",
			dataIndex: "Final Scores",
			key: "Final Scores",
			onCell: (_, index) => {
				if (index === 0) {
					return {
						rowSpan: 5, //合并五行
						//colSpan: 5,
					};
				} else {
					return {
						rowSpan: 0, //不显示其他数据
						colSpan: 0,
					};
				}
			},
		},
	];

	const dataSource_dmc = [
		{
			key: "1",
			Category: "Category1",
			Item: "Item1",
			"Your Scores": "Your Scores1",
			"Final Scores": "Final Scores1",
		},
		{
			key: "2",
			Category: "Category2",
			Item: "Item2",
			"Your Scores": "Your Scores2",
			"Final Scores": "Final Scores2",
		},
		{
			key: "3",
			Category: "Category3",
			Item: "Item3",
			"Your Scores": "Your Scores3",
			"Final Scores": "Final Scores3",
		},
		{
			key: "4",
			Category: "Category4",
			Item: "Item4",
			"Your Scores": "Your Scores4",
			"Final Scores": "Final Scores4",
		},
		{
			key: "5",
			Category: "Category5",
			Item: "Item5",
			"Your Scores": "Your Scores5",
			"Final Scores": "Final Scores5",
		},
	];

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Title level={3}></Title>
			<Row gutter={16}>
				<Col md={24} lg={8} xxl={6}>
					<Space direction="horizontal">
						Select Date
						<DatePicker.RangePicker
							format={config.DATE_FORMAT_MONTH}
							allowClear={true}
							style={{ width: "100%" }}
							defaultValue={[search_date_start, search_date_end]}
							onChange={reportStore.onDateRangeChange}
							allowEmpty={true}
							picker="month"
						/>
					</Space>
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button
						type="primary"
						loading={reportStore.loading}
						// onClick={() =>
						// 	invoiceStore.fetchInvoiceList(
						// 		authStore.login.travelAgencyId,
						// 		groupNo,
						// 		search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
						// 		search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT),
						// 		OrderType
						// 	)
						// }
					>
						Get Report
					</Button>
				</Col>
				<Col md={24} lg={10} xxl={11}></Col>
			</Row>
			<Title level={3}></Title>
			<Row>
				<Col md={24} lg={24} xxl={24}>
					<Divider>Primary Data</Divider>
					<Table dataSource={dataSource} columns={columns_primary} pagination={false} bordered />
				</Col>

				<Col md={24} lg={24} xxl={24}>
					<Divider>Monthly Data</Divider>
					<Table dataSource={dataSource} columns={columns_month} pagination={false} bordered />
				</Col>

				<Col md={24} lg={24} xxl={24}>
					<Divider>地接考核分数</Divider>
					<Table dataSource={dataSource_dmc} columns={columns_dmc} pagination={false} bordered />
				</Col>
			</Row>
		</Space>
	);
}

export default observer(Index);