GHHub/src/views/feedback/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, Input, Typography, DatePicker, Radio } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
import dayjs from "dayjs";

const { Title } = Typography;
const feedbackListColumns = [
	{
		title: "团名",
		dataIndex: "EOI_Group_Name",
		// render: (text, record) => <NavLink to={`/feedback/${record.EOI_SN}`}>{text}</NavLink>,
	},
	{
		title: "离团日期",
		dataIndex: "EOI_Date",
	},
	{
		title: "城市",
		key: "City",
		dataIndex: "City",
	},
	{
		title: "评分",
		dataIndex: "Average",
	},
	{
		title: "操作",
		dataIndex: "EOI_SN",
		render: (text, record) => <NavLink to={`/feedback/${record.EOI_SN}`}>查看</NavLink>,
	},
];

function Index() {
	const { feedbackStore } = useStore();
	const { feedbackList } = feedbackStore;
	const [selectedDateRange, onDateRangeChange] = useState([config.DATE_PRESETS[0].value]);
	const [referenceNo, onNumberChange] = useState("");

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

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

			<Row gutter={16}>
				<Col md={24} lg={6} xxl={4}>
					<Input
						placeholder="团号"
						onChange={e => {
							onNumberChange(e.target.value);
						}}
					/>
				</Col>
				<Col md={24} lg={6} xxl={4}>
					<DatePicker.RangePicker
						format={config.DATE_FORMAT}
						allowClear={false}
						style={{ width: "100%" }}
						presets={config.DATE_PRESETS}
						onChange={(date, dateRange) => {
							onDateRangeChange(dateRange);
						}}
					/>
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button type="primary" loading={feedbackStore.loading} onClick={() => feedbackStore.searchFeedbackList(32531, referenceNo, selectedDateRange[0], selectedDateRange[1] + " 23:59")}>
						搜索
					</Button>
				</Col>
			</Row>
			<Row>
				<Col md={24} lg={24} xxl={24}>
					<Table bordered={true} columns={feedbackListColumns} dataSource={toJS(feedbackList)} />
				</Col>
			</Row>
		</Space>
	);
}

export default observer(Index);