增加日期选择，查询数据

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "global.highlights.hub",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "global.highlights.hub",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "antd": "^5.4.0",
         "mobx": "^6.9.0",
         "mobx-react": "^7.6.0",
+        "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0"
@@ -1536,6 +1537,14 @@
         }
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "antd": "^5.4.0",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0"

src/stores/Plan.js

@@ -1,20 +1,51 @@
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, runInAction } from "mobx";
+import * as req from '../utils/request';
+import { prepareUrl } from '../utils/commons';
 
 class Plan {
-  count = 0;
 
   constructor(root) {
     makeAutoObservable(this, { rootStore: false });
     this.root = root;
   }
 
-  increase() {
+  fetchRecent() {
-    this.count += 1;
+    runInAction(() => {
+      this.planList = [
+        {
+          key: '1',
+          name: '中华游111029-N111025076',
+          age: 32,
+          address: '5大1小',
+          tags: ['nice', 'developer'],
+        },
+        {
+          key: '2',
+          name: '中华游111030-HY110704017',
+          age: 42,
+          address: '2大',
+          tags: ['loser'],
+        },
+        {
+          key: '3',
+          name: '中华游111030-Y111004040',
+          age: 32,
+          address: '30大',
+          tags: ['cool', 'teacher'],
+        },
+      ];
+    });
   }
 
-  decrease() {
+  planList = [
-    this.count -= 1;
+    {
-  }
+      key: '1',
+      name: '-',
+      age: 0,
+      address: '-',
+      tags: ['*'],
+    }
+  ];
 }
 
 export default Plan;

src/views/App.jsx

@@ -113,13 +113,6 @@ export default function App() {
           <Layout style={{
             padding: '0 24px 24px',
           }}>
-            <Breadcrumb
-              style={{
-                margin: '16px 0',
-              }}
-              items={[{ title: 'Home' }, { title: 'Plan' }, { title: 'Recent' }]}
-            >
-            </Breadcrumb>
             <Content
               style={{
                 padding: 24,

src/views/Plan.jsx

@@ -1,10 +1,14 @@
 import { useParams } from "react-router-dom";
 import { useEffect } from 'react';
 import { observer } from "mobx-react";
-import { Row, Col, Space, Button, Table, Tag } from 'antd';
+import { toJS } from "mobx";
+import moment from "moment";
+import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from 'antd';
 import { useStore } from '../stores/StoreContext.js';
 
-const columns = [
+const { Title } = Typography;
+
+const planListColumns = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -52,56 +56,41 @@ const columns = [
     ),
   },
 ];
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sydney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
 
 function Plan() {
-  
+
-  const {planId} = useParams();
+  const { planId } = useParams();
-  const {plan} = useStore();
+  const { plan } = useStore();
+  const { planList } = plan;
 
   useEffect(() => {
     console.info('planId: ' + planId);
-	}, [planId]);
+  }, [planId]);
 
   return (
     <Space direction="vertical" style={{ width: '100%' }}>
-    <Row gutter={{ md: 24 }} justify="end">
+      <Title level={3}>Newest Plans</Title>
-    <Col span={4}>
+      <Row gutter={{ md: 24 }} justify="end">
-      Parameter: {planId}
+        <Col span={4}>
-      </Col>
+          Parameter: {planId}
-      
+        </Col>
-    <Col span={20}>
+        <Col span={6}>
-    <Button onClick={() => plan.increase()}>increase {plan.count}</Button>
+        <Space direction="horizontal" style={{ width: '100%' }}>
-    <Button onClick={() => plan.decrease()}>decrease {plan.count}</Button>
+        Group Date: 
-      </Col>
+          <DatePicker.RangePicker
-    </Row>
+            allowClear={false}
-    <Row>
+          />
-      <Col span={24}>
+          </Space>
-        <Table columns={columns} dataSource={data} />
+        </Col>
-      </Col>
+        <Col span={12}>
-    </Row>
+          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
+          <Table columns={planListColumns} dataSource={toJS(planList)} />
+        </Col>
+      </Row>
     </Space>
   );
 }