feat: 新增统一页面

weiqinke · Jun 26, 2024 · 8ba55c3 · 8ba55c3
1 parent fe4a5cd
commit 8ba55c3
Show file tree

Hide file tree

Showing 12 changed files with 5,053 additions and 63 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Modals/MenuEditModal.tsx b/src/components/Modals/MenuEditModal.tsx
@@ -21,7 +21,8 @@ const MenuEditModal: FC<any> = ({ onOk, initMenuItem, parentUid, onCancel }) =>
     const payload = {
       parentUid,
       ...data,
-      version: 1
+      version: 1,
+      delete:0,
     };
     if (payload.id) {
       result = await updateMenuItem(payload);

diff --git a/src/components/PageIntroduction/index.module.scss b/src/components/PageIntroduction/index.module.scss
@@ -0,0 +1,8 @@
+.container{
+    background-color: #fff;
+    padding: 12px;
+    user-select: none;
+}
+.introduction{
+    margin-top: 12px;
+}
diff --git a/src/components/PageIntroduction/index.tsx b/src/components/PageIntroduction/index.tsx
@@ -0,0 +1,21 @@
+import { Breadcrumb } from "antd";
+
+import styles from "./index.module.scss";
+import TypingCard from "../TypingCard";
+
+const PageIntroduction = ({ infos, introduction }) => {
+  return (
+    <div className={styles.container}>
+      <Breadcrumb>
+        {infos.map((item, index) => (
+          <Breadcrumb.Item key={index}>{item.title}</Breadcrumb.Item>
+        ))}
+      </Breadcrumb>
+      <div className={styles.introduction}>
+        <TypingCard title="测试" source={`${introduction}`} fontSize="1rem" />
+      </div>
+    </div>
+  );
+};
+
+export default PageIntroduction;
diff --git a/src/components/TypingCard/index.tsx b/src/components/TypingCard/index.tsx
@@ -1,5 +1,4 @@
 import { useRef, useEffect } from "react";
-import { Card } from "antd";
 import Typing from "./Typing";
 
 const TypingCard = (props: any) => {
@@ -18,9 +17,9 @@ const TypingCard = (props: any) => {
   }, [props]);
 
   return (
-    <Card bordered={false} className="card-item" title={props.title}>
-      <div ref={outputEl} style={{ fontSize: "1.5rem" }} />
-    </Card>
+    <div>
+      <div ref={outputEl} style={{ fontSize: props.fontSize || "1.5rem" }} />
+    </div>
   );
 };
 

diff --git a/src/pages/MenuAdmin/index.module.scss b/src/pages/MenuAdmin/index.module.scss
@@ -3,5 +3,11 @@
 }
 
 .header {
-  margin-bottom: 12px;
+  margin: 12px 0;
 }
+
+.tableContainer{
+  background-color: #fff;;
+  padding: 0px 12px;
+  margin-top: 12px;
+}
diff --git a/src/pages/MenuAdmin/index.tsx b/src/pages/MenuAdmin/index.tsx
@@ -1,12 +1,21 @@
 import { menuFind, updateMenuItem } from "@/api/microservice/menu";
 import { MenuEditModal } from "@/components/Modals";
-import { getMenuStructure } from "@/utils/core";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { getMenuStructure, scrollToAnchor } from "@/utils/core";
+import { ExclamationCircleOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import { Button, Form, Modal, Space, Table, Tag, message } from "antd";
 import { FC, useEffect, useState } from "react";
 import styles from "./index.module.scss";
+import PageIntroduction from "@/components/PageIntroduction";
 
 const { confirm } = Modal;
+const infos = [
+  {
+    title: "系统设置"
+  },
+  {
+    title: "菜单管理"
+  }
+];
 
 const MenusAdmin: FC = () => {
   const [menuslist, setMenuslist] = useState([]);
@@ -48,10 +57,14 @@ const MenusAdmin: FC = () => {
       responsive: ["xxl", "xl", "lg", "md"]
     },
     {
-      title: "备注",
-      dataIndex: "remarks",
+      title: "状态",
+      dataIndex: "banned",
       responsive: ["xxl", "xl", "lg", "md"],
-      render: (text: any) => <span>{text.slice(0, 15)}</span>
+      render: (item: any) => (
+        <Tag color={item ? "#f50" : "#2db7f5"}>
+          <span>{item ? "禁用" : "启用"}</span>
+        </Tag>
+      )
     },
     {
       title: "操作",
@@ -67,7 +80,7 @@ const MenusAdmin: FC = () => {
               编辑
             </Button>
             <Button type="link" onClick={() => removeMenuitem(record)}>
-              删除
+              {record?.banned ? "启用" : "禁用"}
             </Button>
           </div>
         );
@@ -79,12 +92,12 @@ const MenusAdmin: FC = () => {
     confirm({
       title: "提示",
       icon: <ExclamationCircleOutlined />,
-      content: <span style={{ color: "red", fontSize: "19px" }}>{`是否删除${record.name}菜单？`}</span>,
+      content: <span style={{ color: "red", fontSize: "19px" }}>{`是否 ${record?.banned ? "启用" : "禁用"} ${record.name} 菜单？`}</span>,
       okText: "确定",
       okType: "danger",
       cancelText: "取消",
       onOk: async () => {
-        const result = await updateMenuItem({ id: record.id, delete: 1 });
+        const result = await updateMenuItem({ id: record.id, banned: record?.banned ? 0 : 1 });
         if (result.data.code === 200) {
           message.info("操作成功");
           getallmenusdata();
@@ -112,7 +125,7 @@ const MenusAdmin: FC = () => {
 
   const getallmenusdata = () => {
     setMenuslist([]);
-    menuFind({ version: 1, delete: 0 }).then((result: any) => {
+    menuFind({ version: 1 }).then((result: any) => {
       if (result.data.code === 200) {
         const menudata = getMenuStructure(result.data.data);
         setMenuslist(menudata || []);
@@ -127,17 +140,28 @@ const MenusAdmin: FC = () => {
 
   useEffect(getallmenusdata, []);
 
+  useEffect(()=>{
+    scrollToAnchor("Anchor")
+  },[])
+
   return (
     <div className={styles.menusAdminContainer}>
-      <Space size={[8, 16]} className={styles.header}>
-        <Button type="primary" onClick={getallmenusdata}>
-          查询菜单
-        </Button>
-        <Button type="primary" onClick={() => addmenuItem(0)}>
-          添加菜单
-        </Button>
-      </Space>
-      <Table columns={columns} dataSource={menuslist} rowKey={(record: any) => record.id} bordered={true} className="menutable" pagination={{ pageSize: 18 }} />
+      <span id="Anchor" />
+      <PageIntroduction
+        infos={infos}
+        introduction="本页面是展示和操作系统中的菜单，可以新增和编辑你想要配置的路径，图标，排序等信息。操作完成后，需要在权限管理中，再次进行分配。"
+      />
+      <div className={styles.tableContainer}>
+        <Space size={[8, 16]} className={styles.header}>
+          <Button type="primary" icon={<SearchOutlined />} iconPosition="end" onClick={getallmenusdata}>
+            查询菜单
+          </Button>
+          <Button type="primary" icon={<PlusOutlined />} iconPosition="end" onClick={() => addmenuItem(0)}>
+            添加菜单
+          </Button>
+        </Space>
+        <Table columns={columns} dataSource={menuslist} rowKey={(record: any) => record.id} bordered={true} className="menutable" pagination={{ pageSize: 18 }} />
+      </div>
       {visible && <MenuEditModal parentUid={parentUid} initMenuItem={initMenuItem} onOk={onOk} onCancel={() => setVisible(false)} />}
     </div>
   );

diff --git a/src/pages/RoleAdmin/index.module.scss b/src/pages/RoleAdmin/index.module.scss
@@ -2,15 +2,26 @@
   padding: 12px;
 }
 
+.tipContainer{
+  margin-bottom: 12px;
+}
+
 .tip {
   font-size: 1em;
 }
 
 .weightFont {
   font-size: 15px;
   color: #f00;
+  padding:0 6px;
 }
 
 .header {
-  padding: 12px 0;
+  margin: 12px 0;
 }
+
+.tableContainer{
+  background-color: #fff;;
+  padding: 0px 12px;
+  margin-top: 12px;
+}
diff --git a/src/pages/RoleAdmin/index.tsx b/src/pages/RoleAdmin/index.tsx
@@ -1,6 +1,6 @@
 import { updaterole } from "@/api/caravan/Rbac";
 import { OperationRoleModal, RoleAllocationMenuModal, RoleAllocationUserModal } from "@/components/Modals";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { ExclamationCircleOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import { Alert, Button, Modal, Space, Table, Tag, message } from "antd";
 import { FC, useEffect, useState } from "react";
 
@@ -9,9 +9,19 @@ import { findRoleMenus, findRoleUsers, findRoles } from "@/api/microservice/role
 import { findUsers } from "@/api/microservice/user";
 import { getMenuStructure } from "@/utils/core";
 import styles from "./index.module.scss";
+import PageIntroduction from "@/components/PageIntroduction";
 
 const { confirm } = Modal;
 
+const infos = [
+  {
+    title: "系统设置"
+  },
+  {
+    title: "权限管理"
+  }
+];
+
 const RoleList: FC = () => {
   const [dataSource, setDataSource] = useState([]);
   const [role, setRole] = useState<any>();
@@ -64,7 +74,7 @@ const RoleList: FC = () => {
   };
   // 分配菜单
   const willGiveMenu = (record: any) => {
-    findRoleMenus({ id: record.id, delete: 0 }).then(result => {
+    findRoleMenus({ id: record.id }).then(result => {
       if (result.data.code === 200) {
         setRoleCode(record.id);
         setChangeMenu(result.data.data || []);
@@ -143,27 +153,34 @@ const RoleList: FC = () => {
 
   return (
     <div className={styles.container}>
-      <Alert
-        type="success"
-        message={
-          <div className={styles.tip}>
-            朋友们,咱们尽量别改动
-            <span className={styles.weightFont}>qkstat</span>
-            的权限和菜单，因为新人登陆进来都是这个账号，祝大家体验愉快，有问题可以提
-            <span className={styles.weightFont}>issues</span>
-            ,我会及时回复您的。
-          </div>
-        }
-      />
-      <Space size={[8, 16]} className={styles.header}>
-        <Button type="primary" onClick={findAllRole}>
-          查询角色
-        </Button>
-        <Button type="primary" onClick={() => setRole({})}>
-          添加角色
-        </Button>
-      </Space>
-      <Table rowKey="id" columns={columns} dataSource={dataSource} />
+      <div className={styles.tipContainer}>
+        <Alert
+          type="success"
+          message={
+            <div className={styles.tip}>
+              朋友们,咱们尽量别改动
+              <span className={styles.weightFont}>qkstat</span>和<span className={styles.weightFont}>admin</span>
+              的权限和菜单，因为新人登陆进来都是这个账号，祝大家体验愉快，有问题可以提
+              <span className={styles.weightFont}>issues</span>
+              ,我会及时回复您的。
+            </div>
+          }
+        />
+      </div>
+
+      <PageIntroduction infos={infos} introduction="本页面是操作系统中的权限，可以用来分配人员和分配菜单。" />
+      <div className={styles.tableContainer}>
+        <Space size={[8, 16]} className={styles.header}>
+          <Button type="primary" icon={<SearchOutlined />} iconPosition="end" onClick={findAllRole}>
+            查询角色
+          </Button>
+          <Button type="primary" icon={<PlusOutlined />} iconPosition="end" onClick={() => setRole({})}>
+            添加角色
+          </Button>
+        </Space>
+        <Table rowKey="id" columns={columns} dataSource={dataSource} />
+      </div>
+
       {role && <OperationRoleModal role={role} onOk={() => findAllRole()} onCancel={() => setRole(null)} />}
       {shareUsers && (
         <RoleAllocationUserModal dataSource={userDataSource} initUIDs={initUIDs} id={roleCode} onOk={() => findAllRole()} onCancel={() => setShareUsers(false)} />

diff --git a/src/pages/UserAdmin/index.module.scss b/src/pages/UserAdmin/index.module.scss
@@ -3,5 +3,11 @@
 }
 
 .header {
-  margin-bottom: 12px;
+  margin: 12px 0;
 }
+
+.tableContainer{
+  background-color: #fff;;
+  padding: 0px 12px;
+  margin-top: 12px;
+}
diff --git a/src/pages/UserAdmin/index.tsx b/src/pages/UserAdmin/index.tsx
@@ -1,18 +1,27 @@
 import { UserEditModal } from "@/components/Modals";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { ArrowRightOutlined, ExclamationCircleOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import { Button, Modal, Space, Table, Tag, message } from "antd";
 import { FC, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { findUsers, updateUser } from "@/api/microservice/user";
 import styles from "./index.module.scss";
+import PageIntroduction from "@/components/PageIntroduction";
 
 const { confirm } = Modal;
 
+const infos = [
+  {
+    title: "系统设置"
+  },
+  {
+    title: "用户管理"
+  }
+];
+
 const UserAdmin: FC = () => {
   const [dataSource, setDataSource] = useState([]);
   const [user, setUser] = useState(null);
-
   const navigate = useNavigate();
 
   const showDeleteConfirm = (item: any) => {
@@ -98,18 +107,22 @@ const UserAdmin: FC = () => {
 
   return (
     <div className={styles.userAdminContainer}>
-      <Space size={[8, 16]} className={styles.header}>
-        <Button type="primary" onClick={findAll}>
-          查询人员
-        </Button>
-        <Button type="primary" onClick={() => setUser({})}>
-          添加人员
-        </Button>
-        <Button type="primary" onClick={() => navigate("/myinfo")}>
-          跳转
-        </Button>
-      </Space>
-      <Table columns={columns} dataSource={dataSource} rowKey="uid" />
+      <PageIntroduction infos={infos} introduction="本页面是操作系统中的用户，可以用来添加和编辑用户。" />
+      <div className={styles.tableContainer}>
+        <Space size={[8, 16]} className={styles.header}>
+          <Button type="primary" icon={<SearchOutlined />} iconPosition="end" onClick={findAll}>
+            查询人员
+          </Button>
+          <Button type="primary" icon={<PlusOutlined />} iconPosition="end" onClick={() => setUser({})}>
+            添加人员
+          </Button>
+          <Button type="primary" icon={<ArrowRightOutlined />} iconPosition="end" onClick={() => navigate("/profile")}>
+            跳转
+          </Button>
+        </Space>
+        <Table columns={columns} dataSource={dataSource} rowKey="uid" />
+      </div>
+
       {user && <UserEditModal initUser={user} onOk={() => findAll()} onCancel={() => setUser(null)} />}
     </div>
   );