estateagents-admin-manager/src/pages/staff/list/addRole.jsx

import React, { useState, useEffect } from 'react';
import { Checkbox, Input, Card, Form, Button } from 'antd';
import { connect } from 'dva';
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 Poster = 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: [] })
   const [buutonDate, setBuutonDate] = useState({ })
    useEffect(() => {
      localStorage.removeItem('value');
      menuList({ pageNum: 1, pageSize: 100 })
      buttonList({ pageNum: 1, pageSize: 100 })
      // buttonAndMenuList()
    }, [])

    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 buttonList(params) {
      request({
        url: '/api/admin/buttonList',
        method: 'GET',
        params: { ...params },
    // eslint-disable-next-line no-shadow
    }).then(data => {
        console.log(data)
        setBuutonDate(data)
    })
    }

    // 根据角色id查询当前的菜单及其按钮
    function buttonAndMenuList(params) {
      request({
        url: `/api/admin/taRole/details/${2}`,
        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)
      }
    }

    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)
          }
        }
    const gridStyle1 = {
      width: '20%',
      textAlign: 'left',
    };
    const gridStyle2 = {
      width: '80%',
      textAlign: 'left',
      height: '69px',
    };

    function handleSubmit (e) {
      e.preventDefault();
      props.form.validateFields((err, values) => {
        request({
          url: '/api/admin/updateAuthMenu',
          method: 'PUT',
          data: { sysMenu: menus },
      // eslint-disable-next-line no-shadow
      }).then(data => {
          console.log(data)
          setData(data)
      })
      });
    }
    const { getFieldDecorator } = props.form;
    return (
    <>
      <div >
        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="渠道名称">
          {getFieldDecorator('channelName', {
            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' }} >
              {
                   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}>
                        {buutonDate.length > 0 && buutonDate.map(btn => (
                          <>
                            {
                              btn.menuId === menu.menuId &&
                              <Checkbox onChange={handleButChange(btn)}>{btn.name}</Checkbox>
                            }
                          </>
                        ))}
                      </Card.Grid>
                   </>
                   ))
              }
          </Card>
        ))}
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button className={channels.formButton} type="primary" htmlType="submit">
            取消
          </Button>
        </Form.Item>
      </Form>
      </div>
    </>
    )
  }
const WrappedNormalLoginForm = Form.create({ name: 'Poster' })(Poster);
export default connect(({ user }) => ({ user }))(WrappedNormalLoginForm);