feats

config/routes.js

@@ -236,12 +236,13 @@ export default [
                     name: '角色编辑',
                     menuCode: 'system.role',
                     component: './System/Role/Edit',
+                    hideInMenu: true,
                   },
                   {
                     path: '/system/params',
                     name: '系统参数',
                     menuCode: 'system.params',
-                    component: '../layouts/BlankLayout',
+                    component: './System/Params',
                   },
               
                   {

src/pages/System/Params/index.jsx

@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react'
+import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import { Modal, Input, notification } from 'antd';
+import request, { queryTable } from '@/utils/request';
+
+export default () => {
+  const tableRef = useRef()
+  const [current, setCurrent] = useState()
+  const [inputVal, setInputVal] = useState([])
+  const [show, setShow] = useState(false)
+
+  const columns = [
+    {
+      title: '编码',
+      key: 'code',
+      dataIndex: 'code',
+    },
+    {
+      title: '描述',
+      key: 'description',
+      dataIndex: 'description',
+    },
+    {
+      title: '参数值',
+      key: 'value',
+      dataIndex: 'value',
+    },
+    {
+      title: '操作',
+      key: 'option',
+      valueType: 'option',
+      width: 240,
+      render: (_, role) => [
+        <a key="edit" onClick={() => handleEdit(role)}>修改</a>,
+      ]
+    },
+  ]
+
+  const handleEdit = (config) => {
+    setCurrent(config)
+    setInputVal(config.value)
+    setShow(true)
+  }
+
+  const handleSubmit = () => {
+    setShow(false)
+    request(`/sys-config/${current.serialNo}`, { method: 'put', data: { ...current, value: inputVal } }).then(() => {
+      tableRef.current.reload()
+      notification.success({ message: '修改成功' })
+    }).catch((e) => {
+      notification.error({ message: e.message })
+    })
+  }
+  
+  return (
+    <PageContainer>
+      <ProTable
+        actionRef={tableRef}
+        columns={columns}
+        request={queryTable('/sys-config')}
+        rowKey="code"
+        headerTitle="参数列表"
+        search={false}
+      />
+      <Modal title="修改参数值" visible={show} onOk={handleSubmit} onCancel={() => setShow(false)} >
+        <Input size="large" value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
+      </Modal>
+    </PageContainer>
+  )
+}

src/pages/System/Role/Edit.jsx

@@ -3,15 +3,41 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Button, Card, Divider, notification } from 'antd';
 import request from '@/utils/request';
 import RoleForm from './components/Form'
+import RoleMenu from './components/Menu'
 
-export default (props) => {
+export default  (props) => {
   const { id } = props.location.query;
   const [loading, setLoading] = useState(false);
+  const [saveLoading, setSaveLoading] = useState(false);
   const [role, setRole] = useState({});
+  // 数据库授权菜单
+  const [roleMenu, setRoleMenu] = useState([])
+  // 待保存菜单
+  const [menuData, setMenuData] = useState([])
   
   const handleFormChange = (newRole) => {
     setRole(newRole);
   };
+
+  const handleMenuChange = (menuList) => {
+    setMenuData(menuList)
+  }
+
+  const handleMenuSave = () => {
+    const data = menuData.map((m) => ({ roleId: id, menuId: m.menuId }))
+    setSaveLoading(true)
+    request(`/role-menu/${id}`, { method: 'post', data })
+      .then(() => {
+        setRoleMenu(data)
+        setMenuData([])
+        setSaveLoading(false);
+        notification.success({ message: '操作成功' });
+      })
+      .catch((e) => {
+        setSaveLoading(false);
+        notification.error({ message: e.message });
+      });
+  }
   
   useEffect(() => {
     if (id) {
@@ -19,6 +45,8 @@ export default (props) => {
       request(`/role/${id}`)
         .then((res) => {
           setRole(res);
+          setRoleMenu(res.menuList||[])
+          setMenuData([])
           setLoading(false);
         })
         .catch((e) => {
@@ -34,8 +62,12 @@ export default (props) => {
         <RoleForm role={role} onChange={handleFormChange} />
       </Card>
 
-      <Card title="授权菜单" style={{ width: '100%', marginTop: '2em' }}>
-        
+      <Card
+        title="授权菜单"
+        style={{ width: '100%', marginTop: '2em' }}
+        extra={<Button type="primary" disabled={!menuData.length} loading={saveLoading} onClick={handleMenuSave}>保存</Button>}
+      >
+        <RoleMenu roleMenu={roleMenu} onChange={handleMenuChange} />
       </Card>
     </PageContainer>
   )

src/pages/System/Role/components/Menu.jsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react'
+import { Tree, Spin } from 'antd'
+import { connect } from 'umi'
+
+const convert2Tree = (arr) => {
+  const rootId = -1
+  const tree = []
+
+  arr.forEach((menu) => {
+    const node = {
+      title: menu.name,
+      key: menu.menuId,
+      data: menu,
+    }
+
+    if (menu.children) {
+      node.children = menu.children
+    } else {
+      node.children = []
+      // eslint-disable-next-line
+      menu.children = node.children
+    }
+
+    // 如果是根节点
+    if (menu.menuPId === rootId) {
+      tree.push(node)
+    } else {
+      // 否则查询父节点
+      let parent = null
+      for(let i = 0; i < arr.length; i += 1) {
+        if (arr[i].menuId === menu.menuPId) {
+          parent = arr[i]
+          break
+        }
+      }
+
+      // 找到父节点, 则处理
+      // 否则直接丢弃
+      if (parent) {
+        if (parent.children) {
+          parent.children.push(node)
+        } else {
+          parent.children = [node]
+        }
+      }
+    }
+  })
+
+  return tree
+}
+
+const RoelMenu = (props) => {
+  const [treeData, setTreeData] = useState([])
+  const [expandedKeys, setExpandedKeys] = useState([])
+  const [checkedKeys, setCheckedKeys] = useState({ checked: [], halfChecked: [] })
+
+  const handleChecked = (keys, e) => {
+    setCheckedKeys({ checked: keys, halfChecked: e.halfCheckedKeys })
+
+    const allChecked = [...keys, ...e.halfCheckedKeys ]
+    const allMenus = props.menuList || []
+    const checkedMenus = allChecked.map((x) => allMenus.filter((m) => m.menuId === x)[0])
+    props.onChange(checkedMenus)
+  }
+
+  useEffect(() => {
+    // 因为 convert2Tree 方法有对 Object 的写入操作
+    // 此方法会触发 treeData 反复生成异常
+    // 所以需要进行一次解构操作
+    const list = (props.menuList || []).map((x) => ({ ...x, children: undefined }))
+    //
+    setTreeData(convert2Tree(list))
+
+    // 默认展开全部
+    setExpandedKeys(list.map((x) => x.menuId))
+  }, [props.menuList])
+
+  useEffect(() => {
+    const checked = []
+    const halfChecked = []
+    const menus = props.roleMenu || []
+    const allMenus = props.menuList || []
+
+    menus.forEach((menu) => {
+      // 当前选中的子节点
+      const checkedChildren = menus.filter((m) => m.menuPId === menu.menuId)
+      // 所有的子节点
+      const allChildren = allMenus.filter((m) => m.menuPId === menu.menuId)
+      // 如果当前选中的子节点全部都在选择列表中
+      if (checkedChildren.length === allChildren.length) {
+        checked.push(menu.menuId)
+      } else {
+        halfChecked.push(menu.menuId)
+      }
+    })
+
+    setCheckedKeys(checked, halfChecked)
+    // setCheckedKeys((props.roleMenu || []).map((x) => x.menuId))
+  }, [props.roleMenu, props.menuList])
+
+  return (
+    <div>
+      {
+        treeData.length && (
+          <Tree
+            checkable
+            checkedKeys={checkedKeys}
+            treeData={treeData}
+            defaultExpandedKeys={expandedKeys}
+            onCheck={handleChecked}
+          />
+        )
+      }
+      { !treeData.length && <Spin />}
+    </div>
+  )
+}
+
+export default connect((s) => ({ menuList: s.user.menus }))(RoelMenu)

src/pages/System/Role/index.jsx

@@ -34,11 +34,13 @@ export default () => {
       key: 'createDate',
       dataIndex: 'createDate',
       valueType: 'date',
+      width: 360,
     },
     {
       title: '操作',
       key: 'option',
       valueType: 'option',
+      width: 240,
       // 不能操作超级管理员
       render: (_, role) => [
         role.roleId !== '1' && <a key="edit" onClick={() => handleEdit(role)}>修改</a>,