GHHub/src/views/feedback/Index.jsx

import { NavLink } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio } from "antd";
import { useStore } from "@/stores/StoreContext.js";

const { Title } = Typography;

const groupListColumns = [
	{
		title: "团名",
		dataIndex: "referenceNumber",
		key: "Reference number",
		render: (text, record) => <NavLink to={`/feedback/${record.EOI_SN}`}>{text}</NavLink>,
	},
	{
		title: "离团日期",
		dataIndex: "arrivalDate",
		key: "Arrival date",
	},
	{
		title: "城市",
		key: "Pax",
		dataIndex: "pax",
	},
	{
		title: "导游",
		key: "Status",
		dataIndex: "status",
	},
	{
		title: "平均分",
		key: "Reservation date",
		dataIndex: "reservationDate",
	},
	{
		title: "图片数",
		key: "Guide",
		dataIndex: "guide",
	},
	{
		title: "操作",
		key: "Guide",
		dataIndex: "guide",
	},
];

function Index() {
	const { feedbackStore } = useStore();
	const { groupList } = feedbackStore;

	useEffect(() => {
		console.info("Newest.useEffect");
	}, []);

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Title level={3}>反馈表</Title>

			<Row gutter={16}>
				<Col md={24} lg={4} xxl={4}>
					<Input placeholder="团号" />
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<DatePicker.RangePicker allowClear={true} inputReadOnly={true} placeholder={["离团日期 从", "截止"]} />
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button type="primary" loading={feedbackStore.loading} onClick={() => feedbackStore.searchFeedbackList(32531,'','2023-02-01 00:00','2023-03-30 23:59')}>
						搜索
					</Button>
				</Col>
			</Row>
			<Row>
				<Col md={24} lg={24} xxl={24}>
					<Table bordered={true} columns={groupListColumns} dataSource={groupList} />
				</Col>
			</Row>
		</Space>
	);
}

export default observer(Index);