代办新增页面布局

20_React.js_VIP22/day-9/code/react-project-demo/src/Layout/index.jsx

@@ -68,7 +68,7 @@ function LayoutAdmin() {
 
   useEffect(() => {
     let selectedItem = items.find((i) => i.url === pathname);
-    setSelectedKey(selectedItem.key);
+    selectedItem && setSelectedKey(selectedItem.key);
   }, [pathname, items]);
 
   return (

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/TodoList/TodoAdd.jsx

@@ -0,0 +1,91 @@
+import PageHeader from '../../components/PageHeader';
+import { Input, Button, Form, Upload } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import './TodoAdd.scss';
+//! 引入组件 并通过 as 重命名
+import { Form as RouterForm } from 'react-router-dom';
+
+const { TextArea } = Input;
+
+function TodoAdd() {
+  return (
+    <>
+      <PageHeader>新增代办</PageHeader>
+      <div className="todo-add">
+        <Form
+          labelCol={{
+            span: 4,
+          }}
+          wrapperCol={{
+            span: 14,
+          }}
+          layout="horizontal"
+          style={{
+            maxWidth: 600,
+            margin: '0 auto',
+          }}
+        >
+          <RouterForm method="post">
+            <Form.Item
+              label="代办标题"
+              rules={[{ required: true, message: '必须填写代办标题！' }]}
+            >
+              <Input placeholder="输入代办标题..." name="title" required />
+            </Form.Item>
+            <Form.Item
+              label="详细描述"
+              rules={[
+                { min: 0, max: 125, message: '代办详情字数在0-125之间！' },
+              ]}
+            >
+              <TextArea
+                showCount
+                maxLength={125}
+                style={{ height: 120, marginBottom: 24 }}
+                name="description"
+                placeholder="输入代办详细信息..."
+              />
+            </Form.Item>
+
+            <Form.Item label="代办封面">
+              <Upload listType="picture-card" accept="image/*">
+                <div>
+                  <PlusOutlined />
+                  <div
+                    style={{
+                      marginTop: 8,
+                    }}
+                  >
+                    上传
+                  </div>
+                </div>
+              </Upload>
+            </Form.Item>
+            <Form.Item
+              wrapperCol={{
+                offset: 4,
+                span: 13,
+              }}
+            >
+              <Button htmlType="submit" block type="primary">
+                提交
+              </Button>
+            </Form.Item>
+          </RouterForm>
+        </Form>
+      </div>
+    </>
+  );
+}
+
+export default TodoAdd;
+
+export async function todoAddAction({ request }) {
+  //! 在添加代办时 会发起当前路由的一个post请求，下面是获取请求体数据
+  let formData = await request.formData();
+
+  let data = Object.fromEntries(formData);
+
+  console.log(data);
+  return null;
+}

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/TodoList/TodoAdd.scss

@@ -0,0 +1,12 @@
+.todo-add {
+  background-color: #fff;
+  border-radius: 12px;
+
+  padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+
+  .ant-upload-list {
+    text-align: left;
+  }
+}

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/TodoList/index.jsx

@@ -3,7 +3,7 @@ import PageHeader from '../../components/PageHeader';
 function TodoList() {
   return (
     <div className="todo-list">
-      <PageHeader>代办列表</PageHeader>
+      <PageHeader addRoute={'/todo/add'}>代办列表</PageHeader>
     </div>
   );
 }

20_React.js_VIP22/day-9/code/react-project-demo/src/router/index.js

@@ -9,10 +9,13 @@ import withSuspense from '../utils/withSuspense';
 
 import { goodsLoader } from '../pages/GoodsList';
 
+import { todoAddAction } from '../pages/TodoList/TodoAdd';
+
 const About = lazy(() => import('../pages/About'));
 const Login = lazy(() => import('../pages/Login'));
 const GoodsList = lazy(() => import('../pages/GoodsList'));
 const TodoList = lazy(() => import('../pages/TodoList'));
+const TodoAdd = lazy(() => import('../pages/TodoList/TodoAdd'));
 
 const router = createBrowserRouter([
   {
@@ -41,9 +44,14 @@ const router = createBrowserRouter([
         element: withSuspense(GoodsList),
       },
       {
-        path: '/todo/list',
+        path: 'todo/list',
         element: withSuspense(TodoList),
       },
+      {
+        path: 'todo/add',
+        action: todoAddAction,
+        element: withSuspense(TodoAdd),
+      },
     ],
   },
 ]);