合并

config/config.js

@@ -346,7 +346,12 @@ export default {
                   hideInMenu: true,
                   component: './staff/list/editRole',
                 },
-
+                {
+                  path: '/staff/list/addRole',
+                  name: '添加角色',
+                  hideInMenu: true,
+                  component: './staff/list/addRole',
+                },  
               ],
             },
             {

src/pages/staff/list/RoleList.jsx

@@ -25,7 +25,7 @@ function confirm() {
 }
 function toEditRole() {
   router.push({
-    pathname: '/staff/editRole',
+    pathname: '/staff/list/addRole',
     query: {
       a: 'b',
     },

src/pages/staff/list/addRole.jsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import { Checkbox, Input, Card } from 'antd';
+import { connect } from 'dva';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import request from '../../../utils/request';
+import channels from './channelList.less';
+
+const { TextArea } = Input;
+
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const Edit = props => {
+  console.log('props,props', props.user.currentUser)
+  const userMenus = props.user.currentUser.menus;
+  const userBtns = props.user.currentUser.buttons;
+
+
+  const [data, setData] = useState({ data: [] })
+ // 获取当前所有菜单
+  useEffect(() => {
+    localStorage.removeItem('value');
+    menuList({ pageNum: 1, pageSize: 100 })
+  }, [])
+
+  function menuList(params) {
+    request({
+      url: '/api/admin/menuList',
+      method: 'GET',
+      params: { ...params },
+  // eslint-disable-next-line no-shadow
+  }).then(data => {
+      console.log(data)
+      setData(data)
+  })
+  }
+
+  // function SuBmenu(params) {
+  //  return Array.from(userMenus).map(Item =>
+  //  <Checkbox value={ Item.menuId }> { Item.name }</Checkbox>)
+  // }
+  // const [tab, changeTab] = useState('basic')
+
+  const Permission = [
+    '项目管理',
+    '员工管理',
+    '客户管理',
+    '系统管理',
+    '渠道管理',
+    '轮播图管理',
+    '资讯管理',
+    '活动管理',
+    '积分商城',
+    '首页数据',
+  ]
+
+  const Poster = props => {
+    const dataSource = [
+      {
+        name: '员工管理',
+        per: [
+          '111111',
+          '22222',
+          '33333',
+        ],
+      },
+      {
+        name: '角色管理',
+        per: [
+          '444',
+          '555',
+          '666',
+        ],
+      },
+    ];
+
+
+    const gridStyle1 = {
+      width: '20%',
+      textAlign: 'left',
+    };
+    const gridStyle2 = {
+      width: '80%',
+      textAlign: 'left',
+      height: '69px',
+    };
+
+    return (
+    <>
+      <div style={{}}>
+        {userMenus.map(item => (
+          <Card title={<Checkbox>{item.name}</Checkbox>} bordered style={{ width: '100%' }}>
+              {
+                   userMenus.map(menu => (
+
+                    (item.menuId === menu.menuRoot && item.menuId !== menu.menuId) &&
+                    <>
+                      <Card.Grid style={gridStyle1} >
+                          <Checkbox>{menu.name}</Checkbox>
+                      </Card.Grid>
+                      <Card.Grid style={gridStyle2}>
+                        {userBtns.map(btn => (
+                          <>
+                            {
+                              btn.menuId === menu.menuId &&
+                              <Checkbox>{btn.name}</Checkbox>
+                            }
+                          </>
+                        ))}
+                      </Card.Grid>
+                   </>
+                   ))
+              }
+          </Card>
+        ))}
+      </div>
+    </>
+    )
+  }
+
+  const fields = [
+    {
+      label: '角色名称',
+      name: 'roleName',
+      type: FieldTypes.Text,
+      // placeholder: '名称',
+      value: ''
+    },
+    {
+      label: '简介',
+      name: 'roleIntroduction',
+      render: <TextArea className={channels.inpuitTxt} ></TextArea>,
+      value: ''
+
+    },
+
+    {
+      label: '菜单权限',
+      name: 'rolePermission',
+      render:
+        <>
+          <div>
+
+            <Poster />
+          </div>
+        </>,
+    },
+
+  ]
+
+  const handleSubmit = val => {
+    window.console.log('submit data --->', val)
+  }
+  return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
+}
+
+
+export default connect(({ user }) => ({ user }))(Edit);