feat: 完成管理后台菜单设置页面及菜单项增、删、改功能

jorben · Jul 29, 2024 · c189673 · c189673
1 parent d6c20c8
commit c189673
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 8 deletions.
diff --git a/web/src/pages/admin/setting/SettingMenu.js b/web/src/pages/admin/setting/SettingMenu.js
@@ -1,16 +1,31 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Row, Col, Space, Button, Tabs, message } from "antd";
+import {
+  Row,
+  Col,
+  Space,
+  Button,
+  Tabs,
+  Modal,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  message,
+} from "antd";
 import { PlusOutlined, MenuOutlined, NumberOutlined } from "@ant-design/icons";
 import ApiClient from "../../../services/client";
 import CONSTANTS from "../../../constants";
 import SettingMenuTable from "./SettingMenuTable";
 
 const SettingMenu = () => {
   const [isLoading, setIsLoading] = React.useState(true);
-
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [tabItems, setTabItems] = React.useState([]);
+  const [menuTypes, setMenuTypes] = React.useState([]);
+  const [currentTab, setCurrentTab] = React.useState("admin");
   const [messageApi, contextHolder] = message.useMessage();
+  const [newForm] = Form.useForm();
   const navigate = useNavigate();
 
   React.useEffect(() => {
@@ -33,6 +48,7 @@ const SettingMenu = () => {
                 ),
               })
             );
+            setMenuTypes(Object.keys(response.data?.data));
             setTabItems(data);
           } else if (
             response.data?.code === CONSTANTS.ERRCODE.ErrAuthNoLogin ||
@@ -60,6 +76,30 @@ const SettingMenu = () => {
     getAllMenus();
   }, [isLoading, messageApi, navigate]);
 
+  const handleModalOk = async () => {
+    newForm
+      .validateFields()
+      .then((row) => {
+        ApiClient.post("/admin/setting/menu", row)
+          .then((response) => {
+            if (response.data?.code === 0) {
+              messageApi.success("新增菜单项成功");
+              setIsModalOpen(false);
+              setIsLoading(true);
+            } else {
+              messageApi.error(response.data?.message);
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            messageApi.error("新增接口失败，请稍后重试！");
+          });
+      })
+      .catch((info) => {
+        console.log("Validate Failed:", info);
+      });
+  };
+
   return (
     <>
       <Row>
@@ -76,17 +116,98 @@ const SettingMenu = () => {
               float: "right",
             }}
             icon={<PlusOutlined />}
-            // onClick={() => setIsModalOpen(true)}
+            onClick={() => setIsModalOpen(true)}
           >
             添加菜单
           </Button>
         </Col>
       </Row>
       <Row>
         <Col span={24}>
-          <Tabs items={tabItems} tabPosition="left" type="line" />
+          <Tabs
+            defaultActiveKey={currentTab}
+            items={tabItems}
+            tabPosition="left"
+            type="line"
+            onChange={(key) => {
+              setCurrentTab(key);
+              // console.log("change to:", currentTab);
+            }}
+          />
         </Col>
       </Row>
+      <Modal
+        title="添加菜单项"
+        open={isModalOpen}
+        onOk={handleModalOk}
+        onCancel={() => setIsModalOpen(false)}
+        okText="确认添加"
+        cancelText="取消"
+      >
+        <Form
+          form={newForm}
+          labelCol={{
+            span: 6,
+          }}
+          wrapperCol={{
+            span: 16,
+          }}
+          style={{ margin: "40px 0" }}
+          initialValues={{ type: currentTab, order: 1 }}
+        >
+          <Form.Item
+            label="所属菜单"
+            name="type"
+            rules={[{ required: true, message: "请选择所属菜单" }]}
+          >
+            <Select
+              options={menuTypes.map((mt) => ({
+                value: mt,
+                label:
+                  mt === "admin"
+                    ? "后台菜单"
+                    : mt === "index"
+                    ? "前台菜单"
+                    : mt,
+              }))}
+              defaultValue={currentTab}
+            />
+          </Form.Item>
+          <Form.Item
+            label="菜单名称"
+            name="label"
+            rules={[{ required: true, message: "请输入菜单名称" }]}
+          >
+            <Input placeholder="请输入菜单名称" />
+          </Form.Item>
+          <Form.Item
+            label="菜单Path"
+            name="key"
+            rules={[{ required: true, message: "请输入菜单Path" }]}
+          >
+            <Input placeholder="请输入菜单Path" />
+          </Form.Item>
+          <Form.Item
+            label="菜单排序"
+            name="order"
+            rules={[
+              {
+                required: true,
+                message: "请输入菜单排序",
+              },
+              { pattern: /^[0-9]+$/, message: "排序只能是数字" },
+            ]}
+          >
+            <InputNumber defaultValue={1} min={0} />
+          </Form.Item>
+          <Form.Item label="父节点Path" name="parent">
+            <Input placeholder="一级菜单请留空" />
+          </Form.Item>
+          <Form.Item label="菜单ICON" name="icon">
+            <Input placeholder="请输入ICON名称" />
+          </Form.Item>
+        </Form>
+      </Modal>
       {contextHolder}
     </>
   );

diff --git a/web/src/pages/admin/setting/SettingMenuTable.js b/web/src/pages/admin/setting/SettingMenuTable.js
@@ -22,7 +22,7 @@ const SettingMenuTable = ({ menus, isLoading, setIsLoading }) => {
       title: "菜单名称",
       dataIndex: "label",
       width: 360,
-      fixed: "left",
+      // fixed: "left",
       render: (text, record) => {
         return isEditing(record) ? (
           <>
@@ -134,7 +134,7 @@ const SettingMenuTable = ({ menus, isLoading, setIsLoading }) => {
     {
       title: "排序",
       dataIndex: "order",
-      width: 100,
+      width: 110,
       render: (text, record) => {
         return isEditing(record) ? (
           <Form.Item
@@ -150,7 +150,7 @@ const SettingMenuTable = ({ menus, isLoading, setIsLoading }) => {
               { pattern: /^[0-9]+$/, message: "排序只能是数字" },
             ]}
           >
-            <InputNumber min={0} />
+            <InputNumber defaultValue={1} min={0} />
           </Form.Item>
         ) : (
           <span>{text}</span>
@@ -250,12 +250,15 @@ const SettingMenuTable = ({ menus, isLoading, setIsLoading }) => {
   };
   return (
     <>
-      <Form form={editForm} component={false}>
+      <Form form={editForm} component={false} initialValues={{ order: 1 }}>
         <Table
           columns={columns}
           dataSource={menus}
           loading={isLoading}
           pagination={false}
+          scroll={{
+            x: "100%",
+          }}
         />
       </Form>
       {contextHolder}