合并

src/pages/staff/list/RoleList.jsx

 import request from '../../../utils/request'
 import Styles from './style.less';
 
-
-function confirm() {
-  Modal.confirm({
-    title: '确认停用该角色？',
-    okText: '确认',
-    cancelText: '取消',
-    onOk() {
-      console.log('OK');
-    },
-    onCancel() {
-      console.log('Cancel');
+const header = props => {
+// function confirm(id) {
+//   Modal.confirm({
+//     title: '确认停用该角色？',
+//     okText: '确认',
+//     cancelText: '取消',
+//     onOk() {
+//     },
+//     onCancel() {
+//       console.log('Cancel');
+//     },
+//   });
+// }
+
+function addRole(roleId) {
+  router.push({
+    pathname: '/staff/list/addRole',
+    query: {
+      id: roleId,
     },
   });
-
 }
-function toEditRole() {
+
+function toEditRole(roleId) {
   router.push({
-    pathname: '/staff/list/addRole',
+    pathname: '/staff/list/editRole',
     query: {
-      a: 'b',
+      id: roleId,
     },
   });
 }
-
-
+const [data, setData] = useState({ data: [] })
+// 初始化角色
+ useEffect(() => {
+   localStorage.removeItem('value');
+    getList({ pageNum: 1, pageSize: 100 })
+ }, [])
+
+ function getList(params) {
+   request({
+     url: '/api/admin/taRole',
+     method: 'GET',
+     params: { ...params },
+ // eslint-disable-next-line no-shadow
+ }).then(data => {
+     console.log(data)
+     setData(data)
+ })
+ }
+// 是否停用
+function stop(id) {
+  request({
+    url: `/api/admin/taRole/stop/${id}`,
+    method: 'PUT',
+// eslint-disable-next-line no-shadow
+}).then(data => {
+  getList({ pageNum: 1, pageSize: 100 })
+})
+}
 const dataSource = [
   {
     name: '置业顾问',
-    status: '1',//显示停用
+    status: '1',
   },
   {
     name: '置业经理',
-    status: '1',//停用
+    status: '1',
   },
 ];
 
   // },
   {
     title: '角色名称',
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'roleName',
+    key: 'roleName',
     align: 'center',
-    render: text => <a>{text}</a>,
   },
 
   {
     key: 'status',
     align: 'center',
 
-    render: () => <>
-      <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>停用
-      <Icon type="stop" className={styles.shoppingCart} style={{fontSize:14}}/>
+    render: (text, record) => <>
+      <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}>编辑
       <Icon type="form" className={styles.edit} />
 ];
 
 
-const header = (props) => {
-
-
-
-
-  return (
+return (
     <>
-      <Button type="danger" className={styles.addBtn} onClick={toEditRole}>新增</Button>
+      <Button type="danger" className={styles.addBtn} onClick={addRole}>新增</Button>
       <div className={Styles.roletext}>
 
-        <Table dataSource={dataSource} columns={columns} />
+        <Table dataSource={data.records} columns={columns} />
       </div>
     </>
 
   )
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
-
-export default WrappedHeader
+export default header

src/pages/staff/list/addRole.jsx

 import XForm, { FieldTypes } from '../../../components/XForm';
 import request from '../../../utils/request';
 import channels from './channelList.less';
+import { resolve } from 'path';
 
 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 add = props => {
+  const Poster = propses => {
+    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)
+    })
+    }
+
+
+    // const [menus, setMenus] = useState([]);
+// 判断menus是否有值
+    const [menus, setMenus] = useState([]);
+
+
+    const addMenus = m => {
+      const newMenus = [...menus, m]
+      setMenus([...menus, m])
+    };
+    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)
+        addMenus(m)
+      } else {
+        delMenus(m)
+      }
+      console.log('menus1111', menus)
+    }
+
+    const [but, setBut] = useState([]);
+    // 判断menus是否有值
+        const addBut = m => setBut([...but, m]);
+        const delBut = m => setBut(but.filter(x => x.menuId !== m.menuId));
+        const handleButChange = m => e => {
+          console.log('e', m)
+          if (e.target.checked) {
+            addBut(m)
+          } else {
+            delBut(m)
+          }
+          // console.log('menus', menus)
+
+          console.log('menus', menus)
+          console.log('but', but)
+        }
 
-  const Poster = props => {
     const dataSource = [
       {
         name: '员工管理',
 
     return (
     <>
-      <div style={{}}>
+      <div >
+        {/* { console.log('userMenus', userMenus) }
+        { console.log('userBtns', userBtns) } */}
         {userMenus.map(item => (
-          <Card title={<Checkbox>{item.name}</Checkbox>} bordered style={{ width: '100%' }}>
+          (item.parentCode === '-1') &&
+          <Card title={<Checkbox 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>{menu.name}</Checkbox>
+                          <Checkbox onChange={handleMenuChange(menu)}>{menu.name}</Checkbox>
                       </Card.Grid>
                       <Card.Grid style={gridStyle2}>
                         {userBtns.map(btn => (
                           <>
                             {
                               btn.menuId === menu.menuId &&
-                              <Checkbox>{btn.name}</Checkbox>
+                              <Checkbox onChange={handleButChange(btn)}>{btn.name}</Checkbox>
                             }
                           </>
                         ))}
     </>
     )
   }
-
+  
   const fields = [
     {
       label: '角色名称',
       render:
         <>
           <div>
-
-            <Poster />
+            <Poster/>
           </div>
         </>,
     },
 
   ]
-
   const handleSubmit = val => {
     window.console.log('submit data --->', val)
+    request({
+      url: '/api/admin/menuList',
+      method: 'POST',
+      params: { ...params },
+  // eslint-disable-next-line no-shadow
+  }).then(data => {
+      console.log(data)
+  })
   }
   return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
 }
-
-
-export default connect(({ user }) => ({ user }))(Edit);
+export default connect(({ user }) => ({ user }))(add);

src/pages/staff/list/editRole.jsx

 import React, { useState, useEffect } from 'react';
-import { Checkbox, Row, Col, Input, Menu, Dropdown, Button, Icon, message, Table, Tooltip, Tabs, Radio, Divider, Tag, DatePicker, Select, Form, Alert, Card } from 'antd';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import styles from '../../style/GoodsList.less';
+import { Checkbox, Input, Card } from 'antd';
+import { connect } from 'dva';
 import XForm, { FieldTypes } from '../../../components/XForm';
-import Wangedit from '../../../components/Wangedit/Wangedit';
 import request from '../../../utils/request';
 import channels from './channelList.less';
-import Tagss from '../components/Tagss.jsx';
+import { resolve } from 'path';
 
 const { TextArea } = Input;
 
  * @param {*} props
  * @returns
  */
-const Edit = (props) => {
+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(() => {
       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 Basic = (props) => {
-
-  //   const dataSource = [
-
-
-  //     {
-  //       name: '员工管理',
-  //       per: [
-  //         '111111',
-  //         '22222',
-  //         '33333',
-  //       ]
-  //     },
-  //     {
-  //       name: '角色管理',
-  //       per: [
-  //         '444',
-  //         '555',
-  //         '666',
-  //       ]
-  //     },
-  //   ];
-
-  //   const columns = [
-  //     // {
-  //     //   title: '商品图片',
-  //     //   dataIndex: 'img',
-  //     //   key: 'img',
-  //     //   align: 'center',
-
-  //     //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
-  //     // },
-  //     {
-  //       title: '员工管理',
-  //       dataIndex: 'name',
-  //       key: 'name',
-  //       align: 'left',
-  //       render: text => <a>{text}</a>,
-  //     },
-
-  //     {
-  //       // title: '操作  ',
-  //       dataIndex: 'status',
-  //       key: 'per',
-  //       align: 'left',
-  //       render: () => <>
-  //         {/* {pre.map((item,index)=>(
-  //       <Checkbox>{item[index]}</Checkbox>
-
-
-  //               ))} */}
-  //       </>,
-  //     },
-  //   ];
-  //   return <Table dataSource={dataSource} columns={columns} />
-
-
+  const Poster = props => {
+    const [menus, setMenus] = useState([]);
+// 判断menus是否有值
+    const addMenus = m => setMenus([...menus, m]);
+    const delMenus = m => setMenus(menus.filter(x => x.menuId !== m.menuId));
+    const handleMenuChange = m => e => {
+      console.log('e', m)
+      if (e.target.checked) {
+        addMenus(m)
+      } else {
+        delMenus(m)
+      }
+      console.log('menus', menus)
+    }
 
+    const [but, setBut] = useState([]);
+    // 判断menus是否有值
+        const addBut = m => setBut([...but, m]);
+        const delBut = m => setBut(but.filter(x => x.menuId !== m.menuId));
+        const handleButChange = m => e => {
+          console.log('e', m)
+          if (e.target.checked) {
+            addBut(m)
+          } else {
+            delBut(m)
+          }
+          // console.log('menus', menus)
 
-  // }
-  // const [Card] = useState('Poster')
+          console.log('menus', menus)
+          console.log('but', but)
+        }
 
-  const Poster = props => {
 
     const dataSource = [
-
-
       {
         name: '员工管理',
         per: [
           '111111',
           '22222',
           '33333',
-        ]
+        ],
       },
       {
         name: '角色管理',
           '444',
           '555',
           '666',
-        ]
+        ],
       },
     ];
 
     const gridStyle2 = {
       width: '80%',
       textAlign: 'left',
+      height: '69px',
     };
 
-{/* <Checkbox>{Permission[index]}</Checkbox> */}
-    return <>
+    return (
+    <>
       <div style={{}}>
-      {Array.from(data).map(Item =>
-                <Checkbox value={ Item.menuId }> { Item.name } </Checkbox>,
-              )}
-        {Permission.map((item, index) => (
-          <Card title={<Checkbox>{Permission[index]}</Checkbox>} bordered={true} style={{ width: '100%' }}>
-            
-              {dataSource.map((items, indexs) => (
-              <>
-                <Card.Grid style={gridStyle1}><Checkbox>{items.name}</Checkbox></Card.Grid>
-                
-                <Card.Grid style={gridStyle2}>
-                {items.per.map((itemss,indexss) =>(
-                  <Checkbox>{items.per[indexss]}</Checkbox>
-                ))}
-                </Card.Grid>
-                </>
-            ))}
-            
+        {/* { console.log('userMenus', userMenus) }
+        { console.log('userBtns', userBtns) } */}
+        {userMenus.map(item => (
+          (item.parentCode === '-1') &&
+          <Card title={<Checkbox onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%' }}>
+              {
+                   userMenus.map(menu => (
+
+                    (item.menuId === menu.menuRoot && item.menuId !== menu.menuId) &&
+                    <>
+                      <Card.Grid style={gridStyle1} >
+                          <Checkbox onChange={handleMenuChange(menu)}>{menu.name}</Checkbox>
+                      </Card.Grid>
+                      <Card.Grid style={gridStyle2}>
+                        {userBtns.map(btn => (
+                          <>
+                            {
+                              btn.menuId === menu.menuId &&
+                              <Checkbox onChange={handleButChange(btn)}>{btn.name}</Checkbox>
+                            }
+                          </>
+                        ))}
+                      </Card.Grid>
+                   </>
+                   ))
+              }
           </Card>
-
-
-
         ))}
       </div>
     </>
+    )
   }
 
-  const Share = (props) => {
-    return <div>Share</div>
-  }
-
-
-
-
   const fields = [
     {
       label: '角色名称',
       // placeholder: '名称',
       value: ''
     },
-
-
-
     {
       label: '简介',
       name: 'roleIntroduction',
       render:
         <>
           <div>
-
-            <Poster />
-
-            {/* <Radio.Group value={tab} defaultValue="1" buttonStyle="solid">
-             
-        <Checkbox>Checkbox</Checkbox>
-                {Permission.map((item,index)=>(
-                  <Radio.Button style={BottonStyle} value="{index}">{Permission[index]}</Radio.Button>
-                 
-                ))}
-            </Radio.Group>
-          
-          </div>
-          <div>
-             
-          <Table dataSource={Permission[index]} columns={columns} />
-           
-             */}
+            <Poster value="111111" />
           </div>
         </>,
-
-    }
-    // {
-    //   label: '状态',
-    //   name: 'roleState',
-    //   render: <Radio.Group>
-    //     <Radio.Button style={{background:'#f0f0f0'}} value="a">禁用</Radio.Button>
-    //     <Radio.Button style={{background:'#f0f0f0',color:'#ff7e48'}} value="b">启用</Radio.Button>
-    //   </Radio.Group>,
-    //   value: 'b'
-    // },
+    },
 
   ]
 
   const handleSubmit = val => {
     window.console.log('submit data --->', val)
+    request({
+      url: '/api/admin/menuList',
+      method: 'POST',
+      params: { ...params },
+  // eslint-disable-next-line no-shadow
+  }).then(data => {
+      console.log(data)
+      setData(data)
+  })
   }
   return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
-
-
-
-
 }
-
-
-
-export default Edit
+export default connect(({ user }) => ({ user }))(Edit);