合并

src/pages/staff/list/RoleList.jsx

@@ -24,16 +24,13 @@ const header = props => {
 
 function addRole(roleId) {
   router.push({
-    pathname: '/staff/list/addRole',
-    query: {
-      id: roleId,
-    },
+    pathname: '/staff/addRole',
   });
 }
 
 function toEditRole(roleId) {
   router.push({
-    pathname: '/staff/list/editRole',
+    pathname: '/staff/addRole',
     query: {
       id: roleId,
     },
@@ -104,7 +101,7 @@ const columns = [
       <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={() => stop(record.roleId)}>{ record.status === 1 ? '停用' : '启用' }
       <Icon type="stop" className={styles.shoppingCart} style={{ fontSize: 14 }}/>
       </span>
-      <span style={{ color: '#FF925C' }} onClick={toEditRole}>编辑
+      <span style={{ color: '#FF925C' }} onClick={() => toEditRole(record.roleId)} >编辑
       <Icon type="form" className={styles.edit} />
       </span>
     </>,

src/pages/staff/list/addRole.jsx

@@ -4,7 +4,9 @@ import { connect } from 'dva';
 import XForm, { FieldTypes } from '../../../components/XForm';
 import request from '../../../utils/request';
 import channels from './channelList.less';
-import { resolve } from 'path';
+import { resolve, join } from 'path';
+import router from 'umi/router';
+
 const { TextArea } = Input;
 
 
@@ -22,13 +24,23 @@ const { TextArea } = Input;
    // 获取当前所有菜单
    const [data, setData] = useState({ data: [] })
    const [buutonDate, setBuutonDate] = useState({ })
+
+   // 展示要显示的菜单和按钮----（编辑）
+   const [dataMenuId, setDataMenuId] = useState([])
+   const [dataButtonId, setDataButtonId] = useState([])
+
     useEffect(() => {
-      localStorage.removeItem('value');
-      menuList({ pageNum: 1, pageSize: 100 })
+      // 新增和编辑用一个页面，判断新增是否为0和null
+      if (props.location.query) {
+        const { id } = props.location.query
+        if (id) {
+          buttonAndMenuList('', id)
+        }
+      }
+      // menuList({ pageNum: 1, pageSize: 100 })
       buttonList({ pageNum: 1, pageSize: 100 })
-      // buttonAndMenuList()
     }, [])
-
+    // 当前所有的菜单
     function menuList(params) {
       request({
         url: '/api/admin/menuList',
@@ -36,7 +48,6 @@ const { TextArea } = Input;
         params: { ...params },
     // eslint-disable-next-line no-shadow
     }).then(data => {
-        console.log(data)
         setData(data)
     })
     }
@@ -52,19 +63,39 @@ const { TextArea } = Input;
         setBuutonDate(data)
     })
     }
-
+    
     // 根据角色id查询当前的菜单及其按钮
-    function buttonAndMenuList(params) {
+    function buttonAndMenuList(params, id) {
+      console.log('id: ', id)
       request({
-        url: `/api/admin/taRole/details/${2}`,
+        url: `/api/admin/taRole/details/${id}`,
         method: 'GET',
         params: { ...params },
     // eslint-disable-next-line no-shadow
     }).then(data => {
+      console.log('data.roleName: ', data)
+      props.form.setFieldsValue({ roleName: data.roleName })
         console.log(data)
         setData(data)
+
+        // 获取所有的权限Id
+        setDataMenuId(data.sysMenuList.map(item => item.menuId))
+        setDataButtonId((data.sysMenuList.map(item => item.sysButtonInMenu.map(btn => btn.btnId).join(',')).filter(f => f !== '').join(',').split(',')).map(a => parseInt(a)))
     })
     }
+        // 添加角色
+        function addRole(params) {
+          request({
+            url: '/api/admin/taRole/',
+            method: 'GET',
+            params: { ...params },
+        // eslint-disable-next-line no-shadow
+        }).then(data => {
+            console.log(data)
+            setData(data)
+        })
+        }
+
 
     // const [menus, setMenus] = useState([]);
     // 判断menus是否有值
@@ -75,13 +106,15 @@ const { TextArea } = Input;
     };
     const delMenus = m => setMenus(menus.filter(x => x.menuId !== m.menuId));
     const handleMenuChange = m => e => {
-      console.log('e', m)
       if (e.target.checked) {
-        // setMenusData(m)
+        setDataMenuId(dataMenuId.concat(m.menuId))
         addMenus(m)
       } else {
+        setDataMenuId([m.menuId])
         delMenus(m)
       }
+      console.log('dataMenuId', dataMenuId)
+      console.log('menus', menus)
     }
 
     const [but, setBut] = useState([]);
@@ -97,26 +130,71 @@ const { TextArea } = Input;
           }
         }
     const gridStyle1 = {
-      width: '20%',
+      width: '17%',
       textAlign: 'left',
     };
     const gridStyle2 = {
       width: '80%',
       textAlign: 'left',
-      height: '69px',
+      height: '72px',
     };
+// 添加菜单
+function addMenuList() {
+  request({
+    url: '/api/admin/updateAuthMenu',
+    method: 'PUT',
+    data: { sysMenu: menus },
+// eslint-disable-next-line no-shadow
+}).then(data => {
+    console.log(data)
+})
+}
+
+// 添加按钮
+function addButt() {
+  request({
+    url: '/api/admin/updateAuthMenu',
+    method: 'PUT',
+    data: { sysMenu: but },
+// eslint-disable-next-line no-shadow
+}).then(data => {
+    console.log(data)
+})
+}
+
+// 添加按钮
+function editAndAddRole() {
+  request({
+    url: '/admin/editAndAddRole/{id}',
+    method: 'PUT',
+    data: { sysMenu: but },
+// eslint-disable-next-line no-shadow
+}).then(data => {
+    console.log(data)
+})
+}
+
+function toRoleList(roleId) {
+  router.push({
+    pathname: '/staff/RoleList',
+  });
+}
 
     function handleSubmit (e) {
       e.preventDefault();
       props.form.validateFields((err, values) => {
+      console.log('values', values)
+        // 保存菜单
+        // addMenuList()
+        // setm
+        const sumitMenu = [...data.sysMenuList, ...menus]
         request({
           url: '/api/admin/updateAuthMenu',
-          method: 'PUT',
-          data: { sysMenu: menus },
+          method: 'POST',
+          data: { sysMenu: sumitMenu, name: values.roleName, id: props.location.query.id },
       // eslint-disable-next-line no-shadow
       }).then(data => {
-          console.log(data)
-          setData(data)
+        toRoleList()
       })
       });
     }
@@ -125,29 +203,29 @@ const { TextArea } = Input;
     <>
       <div >
         <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
-        <Form.Item label="渠道名称">
-          {getFieldDecorator('channelName', {
+        <Form.Item label="角色名称">
+          {getFieldDecorator('roleName', {
             rules: [{ required: true, message: '请输入渠道名称' }],
           })(<Input className={channels.inpuit} />)}
 
         </Form.Item>
         {userMenus.map(item => (
           (item.parentCode === '-1') &&
-          <Card title={<Checkbox onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%', alignItems: 'center' }} >
+          <Card title={<Checkbox checked={ dataMenuId.includes(item.menuId) } onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%', alignItems: 'center' }} >
               {
                    userMenus.map(menu => (
 
                     (item.menuId === menu.menuRoot && item.menuId !== menu.menuId) &&
                     <>
                       <Card.Grid style={gridStyle1} >
-                          <Checkbox onChange={handleMenuChange(menu)}>{menu.name}</Checkbox>
+                          <Checkbox checked={ dataMenuId.includes(menu.menuId) } onChange={handleMenuChange(menu)}>{menu.name}</Checkbox>
                       </Card.Grid>
                       <Card.Grid style={gridStyle2}>
                         {buutonDate.length > 0 && buutonDate.map(btn => (
                           <>
                             {
                               btn.menuId === menu.menuId &&
-                              <Checkbox onChange={handleButChange(btn)}>{btn.name}</Checkbox>
+                              <Checkbox checked={ dataButtonId.includes(btn.btnId) } onChange={handleButChange(btn)}>{btn.name}</Checkbox>
                             }
                           </>
                         ))}