From ef88995bb232b331d2e87d77b8e8ec487518aef5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-HR0JS52\\jun" <qqxion@163.com>
Date: Thu, 13 Oct 2022 15:47:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Layout/LeftRight/index.module.scss        |  29 +++
 src/components/Layout/LeftRight/index.tsx     |  54 +++++
 src/pages/apps/Routers.tsx                    |  13 ++
 src/pages/apps/index.tsx                      |  10 +-
 src/pages/apps/management/Routers.tsx         |  17 ++
 src/pages/apps/management/index.module.scss   |   0
 src/pages/apps/management/index.tsx           |  37 ++-
 .../system/privileges/index.module.scss       |   7 +
 .../management/system/privileges/index.tsx    | 216 ++++++++++++++++++
 .../management/system/role/index.module.scss  |   3 +
 .../apps/management/system/role/index.tsx     |  10 +
 11 files changed, 381 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Layout/LeftRight/index.module.scss
 create mode 100644 src/components/Layout/LeftRight/index.tsx
 create mode 100644 src/pages/apps/Routers.tsx
 create mode 100644 src/pages/apps/management/Routers.tsx
 create mode 100644 src/pages/apps/management/index.module.scss
 create mode 100644 src/pages/apps/management/system/privileges/index.module.scss
 create mode 100644 src/pages/apps/management/system/privileges/index.tsx
 create mode 100644 src/pages/apps/management/system/role/index.module.scss
 create mode 100644 src/pages/apps/management/system/role/index.tsx

diff --git a/src/components/Layout/LeftRight/index.module.scss b/src/components/Layout/LeftRight/index.module.scss
new file mode 100644
index 0000000..7b33b10
--- /dev/null
+++ b/src/components/Layout/LeftRight/index.module.scss
@@ -0,0 +1,29 @@
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.left {
+  height: 100%;
+  border-right: 1px solid #555;
+  :global {
+    .ant-menu-inline {
+      width: 180px;
+    }
+  }
+}
+
+.control {
+  overflow: hidden;
+}
+
+.controlIcon {
+  float: right;
+}
+
+.right {
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: auto;
+}
diff --git a/src/components/Layout/LeftRight/index.tsx b/src/components/Layout/LeftRight/index.tsx
new file mode 100644
index 0000000..3f4d0e6
--- /dev/null
+++ b/src/components/Layout/LeftRight/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
+import { MenuProps, Button, Menu } from 'antd'
+import { useNavigate } from 'react-router-dom'
+import styles from './index.module.scss'
+
+interface Props {
+  left: React.ReactNode | MenuItem[]
+  right: React.ReactNode
+  menuKeys?: string[]
+}
+
+type MenuItem = Required<MenuProps>['items'][number]
+
+const LeftRight: React.FC<Props> = ({ left, right, menuKeys = [] }) => {
+  const [collapsed, setCollapsed] = React.useState<boolean>(false)
+  const navigate = useNavigate()
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed)
+  }
+  let leftNode: React.ReactNode
+  if (left instanceof Array) {
+    leftNode = (
+      <>
+        <div className={styles.control}>
+          <Button
+            className={styles.controlIcon}
+            type="primary"
+            onClick={toggleCollapsed}>
+            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+          </Button>
+        </div>
+        <Menu
+          mode="inline"
+          theme="dark"
+          defaultSelectedKeys={menuKeys}
+          inlineCollapsed={collapsed}
+          onSelect={item => navigate(item.key)}
+          items={left.map(row => ({ ...row, key: `${row?.key}?type=menu` }))}
+        />
+      </>
+    )
+  } else {
+    leftNode = left
+  }
+  return (
+    <div className={styles.main}>
+      <div className={styles.left}>{leftNode}</div>
+      <div className={styles.right}>{right}</div>
+    </div>
+  )
+}
+
+export default LeftRight
diff --git a/src/pages/apps/Routers.tsx b/src/pages/apps/Routers.tsx
new file mode 100644
index 0000000..67ca46f
--- /dev/null
+++ b/src/pages/apps/Routers.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Management from './management'
+
+const Routers: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/manage/*" element={<Management />} />
+    </Routes>
+  )
+}
+
+export default Routers
diff --git a/src/pages/apps/index.tsx b/src/pages/apps/index.tsx
index 3704711..e989894 100644
--- a/src/pages/apps/index.tsx
+++ b/src/pages/apps/index.tsx
@@ -1,14 +1,8 @@
 import React from 'react'
-import { Routes, Route } from 'react-router-dom'
-import Management from './management'
+import Routers from './Routers'
 
 const Apps: React.FC = () => {
-  return (
-    <Routes>
-      asd
-      <Route path="/manage/*" element={<Management />} />
-    </Routes>
-  )
+  return <Routers />
 }
 
 export default Apps
diff --git a/src/pages/apps/management/Routers.tsx b/src/pages/apps/management/Routers.tsx
new file mode 100644
index 0000000..09a4686
--- /dev/null
+++ b/src/pages/apps/management/Routers.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Userinfo from './user/userinfo'
+import Privileges from './system/privileges'
+import Role from './system/role'
+
+const Routers: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/userinfo" element={<Userinfo />} />
+      <Route path="/privileges" element={<Privileges />} />
+      <Route path="/role" element={<Role />} />
+    </Routes>
+  )
+}
+
+export default Routers
diff --git a/src/pages/apps/management/index.module.scss b/src/pages/apps/management/index.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/apps/management/index.tsx b/src/pages/apps/management/index.tsx
index dda3231..2f74436 100644
--- a/src/pages/apps/management/index.tsx
+++ b/src/pages/apps/management/index.tsx
@@ -1,13 +1,36 @@
 import React from 'react'
-import { Routes, Route } from 'react-router-dom'
-import Userinfo from './user/userinfo'
+import Routers from './Routers'
+import { AlignLeftOutlined, UserOutlined } from '@ant-design/icons'
+import { useSearchParams, useLocation } from 'react-router-dom'
+import styles from './index.module.scss'
+import LeftRight from '@/components/Layout/LeftRight'
 
 const Management: React.FC = () => {
-  return (
-    <Routes>
-      <Route path="/userinfo" element={<Userinfo />} />
-    </Routes>
-  )
+  const [params] = useSearchParams()
+  const location = useLocation()
+  const type = params.getAll('type')[0]
+  if (type === 'menu') {
+    return (
+      <LeftRight
+        left={[
+          {
+            label: '权限管理',
+            key: '/apps/manage/privileges',
+            icon: <AlignLeftOutlined />
+          },
+          {
+            label: '角色管理',
+            key: '/apps/manage/role',
+            icon: <UserOutlined />
+          }
+        ]}
+        menuKeys={[`${location.pathname}${location.search}`]}
+        right={<Routers />}
+      />
+    )
+  } else {
+    return <Routers />
+  }
 }
 
 export default Management
diff --git a/src/pages/apps/management/system/privileges/index.module.scss b/src/pages/apps/management/system/privileges/index.module.scss
new file mode 100644
index 0000000..93319b7
--- /dev/null
+++ b/src/pages/apps/management/system/privileges/index.module.scss
@@ -0,0 +1,7 @@
+.icon {
+  margin-left: 15px;
+}
+
+.control {
+  margin-bottom: 15px;
+}
diff --git a/src/pages/apps/management/system/privileges/index.tsx b/src/pages/apps/management/system/privileges/index.tsx
new file mode 100644
index 0000000..38f1448
--- /dev/null
+++ b/src/pages/apps/management/system/privileges/index.tsx
@@ -0,0 +1,216 @@
+import React from 'react'
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
+import { Button, Tree, Popconfirm, Modal, Form, Input, TreeSelect } from 'antd'
+import styles from './index.module.scss'
+import type { DataNode } from 'antd/es/tree'
+import View from '@/components/View'
+import useMethods from '@utils/useMethods'
+
+interface Props {}
+
+interface Data extends DataNode {
+  pid: string
+  children?: Data[]
+}
+
+const initData = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    pid: '0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        pid: '0-0',
+        children: [
+          { title: 'leaf', key: '0-0-0-0', pid: '0-0-0' },
+          {
+            title: 'multiple',
+            pid: '0-0-0',
+            key: '0-0-0-1'
+          },
+          { title: 'leaf', key: '0-0-0-2', pid: '0-0-0' }
+        ]
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        pid: '0-0',
+        children: [{ title: 'leaf', key: '0-0-1-0', pid: '0-0-1' }]
+      },
+      {
+        title: 'parent 1-2',
+        key: '0-0-2',
+        pid: '0-0',
+        children: [
+          { title: 'leaf', key: '0-0-2-0', pid: '0-0-2' },
+          {
+            title: 'leaf',
+            pid: '0-0-2',
+            key: '0-0-2-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: 'parent 2',
+    key: '0-1',
+    pid: '0',
+    children: [
+      {
+        title: 'parent 2-0',
+        key: '0-1-0',
+        pid: '0-1',
+        children: [
+          { title: 'leaf', key: '0-1-0-0', pid: '0-1-0' },
+          { title: 'leaf', key: '0-1-0-1', pid: '0-1-0' }
+        ]
+      }
+    ]
+  }
+]
+
+interface PrivilegesData {
+  name: string
+  pid: string
+}
+
+const Privileges: React.FC<Props> = () => {
+  const [data, setData] = React.useState<Data[]>(initData)
+  const [open, setOpen] = React.useState<boolean>(false)
+  const [form] = Form.useForm()
+  const [confirmLoading, setConfirmLoading] = React.useState<boolean>(false)
+  const { generalData } = useMethods({
+    generalData(data: Data[]) {
+      return data.map(row => {
+        const obj: Data = {
+          ...row,
+          title: (
+            <>
+              {row.title}
+              <EditOutlined
+                className={styles.icon}
+                onClick={() => {
+                  form.setFieldsValue({
+                    name: row.title as string,
+                    pid: row.pid
+                  })
+                  setOpen(true)
+                }}
+              />
+              {!row.children && (
+                <Popconfirm
+                  title="是否确认删除该权限?"
+                  onConfirm={() => {}}
+                  okText="删除"
+                  cancelText="取消">
+                  <DeleteOutlined className={styles.icon} />
+                </Popconfirm>
+              )}
+            </>
+          )
+        }
+        if (row.children) {
+          obj.children = generalData(row.children)
+        }
+        return obj
+      })
+    }
+  })
+  const treeData = React.useMemo(() => {
+    return generalData(data)
+  }, [data])
+  const handleOk = () => {
+    setConfirmLoading(true)
+    form
+      .validateFields()
+      .then((values: PrivilegesData) => {
+        console.log(values)
+        setTimeout(() => {
+          setOpen(false)
+          setConfirmLoading(false)
+        }, 2000)
+      })
+      .catch(() => {
+        setConfirmLoading(false)
+        return
+      })
+  }
+
+  const handleCancel = () => {
+    console.log('Clicked cancel button')
+    setOpen(false)
+  }
+  const onFinish = (values: any) => {
+    console.log('Success:', values)
+  }
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo)
+  }
+  return (
+    <div className={styles.privileges}>
+      <View title="权限管理" margin={false} />
+      <View>
+        <div className={styles.control}>
+          <Button
+            type="primary"
+            onClick={() => {
+              form.resetFields()
+              setOpen(true)
+            }}>
+            新增权限
+          </Button>
+        </div>
+        <Tree
+          showLine={true}
+          defaultExpandedKeys={['0-0-0']}
+          treeData={treeData}
+          defaultExpandAll
+        />
+      </View>
+      <Modal
+        title="Title"
+        open={open}
+        onOk={handleOk}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}>
+        <Form
+          name="添加权限"
+          form={form}
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off">
+          <Form.Item
+            label="权限名称"
+            name="name"
+            rules={[{ required: true, message: '请输入权限名称!' }]}>
+            <Input placeholder="请输入权限名称" />
+          </Form.Item>
+
+          <Form.Item
+            label="上级权限"
+            name="pid"
+            rules={[{ required: true, message: '请选择上级权限！' }]}>
+            <TreeSelect
+              style={{ width: '100%' }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              fieldNames={{
+                value: 'key'
+              }}
+              treeData={data}
+              placeholder="请选择上级权限"
+              treeDefaultExpandAll
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+export default Privileges
diff --git a/src/pages/apps/management/system/role/index.module.scss b/src/pages/apps/management/system/role/index.module.scss
new file mode 100644
index 0000000..c24148b
--- /dev/null
+++ b/src/pages/apps/management/system/role/index.module.scss
@@ -0,0 +1,3 @@
+.role {
+
+}
diff --git a/src/pages/apps/management/system/role/index.tsx b/src/pages/apps/management/system/role/index.tsx
new file mode 100644
index 0000000..9d2cfbd
--- /dev/null
+++ b/src/pages/apps/management/system/role/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './index.module.scss'
+
+interface Props {}
+
+const Role: React.FC<Props> = () => {
+  return <div className={styles.role}>角色管理</div>
+}
+
+export default Role
-- 
Gitee


From 460f48da7b43d541968dc4edf72c698ae2c36f01 Mon Sep 17 00:00:00 2001
From: "DESKTOP-HR0JS52\\jun" <qqxion@163.com>
Date: Thu, 13 Oct 2022 15:47:38 +0800
Subject: [PATCH 2/2] eslint

---
 .stylelintrc.js                                         | 2 +-
 src/components/Layout/LeftRight/index.module.scss       | 9 +++++----
 src/pages/apps/management/system/privileges/index.tsx   | 2 +-
 src/pages/apps/management/system/role/index.module.scss | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 38d5535..9ab1191 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -9,7 +9,7 @@ module.exports = {
   ignoreFiles: ['build/**/*', 'public/**/*', 'src/common/style/**/*'],
   rules: {
     'no-empty-source': null,
-    'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$',
+    'selector-class-pattern': '^[a-z][a-zA-Z0-9-]+$',
     'selector-pseudo-class-no-unknown': [
       true,
       {
diff --git a/src/components/Layout/LeftRight/index.module.scss b/src/components/Layout/LeftRight/index.module.scss
index 7b33b10..306a062 100644
--- a/src/components/Layout/LeftRight/index.module.scss
+++ b/src/components/Layout/LeftRight/index.module.scss
@@ -1,12 +1,13 @@
 .main {
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
 }
 
 .left {
-  height: 100%;
   border-right: 1px solid #555;
+  height: 100%;
+
   :global {
     .ant-menu-inline {
       width: 180px;
@@ -23,7 +24,7 @@
 }
 
 .right {
-  flex-grow: 1;
-  height: 100%;
   overflow-y: auto;
+  height: 100%;
+  flex-grow: 1;
 }
diff --git a/src/pages/apps/management/system/privileges/index.tsx b/src/pages/apps/management/system/privileges/index.tsx
index 38f1448..9e4b8e9 100644
--- a/src/pages/apps/management/system/privileges/index.tsx
+++ b/src/pages/apps/management/system/privileges/index.tsx
@@ -121,7 +121,7 @@ const Privileges: React.FC<Props> = () => {
   })
   const treeData = React.useMemo(() => {
     return generalData(data)
-  }, [data])
+  }, [data]) // eslint-disable-line
   const handleOk = () => {
     setConfirmLoading(true)
     form
diff --git a/src/pages/apps/management/system/role/index.module.scss b/src/pages/apps/management/system/role/index.module.scss
index c24148b..9301178 100644
--- a/src/pages/apps/management/system/role/index.module.scss
+++ b/src/pages/apps/management/system/role/index.module.scss
@@ -1,3 +1,3 @@
 .role {
-
+  display: block;
 }
-- 
Gitee