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

import React, { useState, useEffect } from 'react';
import { Checkbox, Input, Card, Form, Button, Row, Col, Spin } from 'antd';
import { connect } from 'dva';
import XForm, { FieldTypes } from '../../../components/XForm';
import request from '../../../utils/request';
import channels from './channelList.less';
import { resolve, join } from 'path';
import router from 'umi/router';
import apis from '../../../services/apis';

const { TextArea } = Input;


/**
 *
 *
 * @param {*} props
 * @returns
 */
const Poster = props => {
  const userMenus = props.user.currentUser.menus;
  const userBtns = props.user.currentUser.buttons;

  // 获取当前所有菜单
  const [data, setData] = useState({ data: [] })
  const [buutonDate, setBuutonDate] = useState({})

  // 展示要显示的菜单和按钮----（编辑）
  const [dataMenuId, setDataMenuId] = useState([])
  const [dataButtonId, setDataButtonId] = useState([])

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 新增和编辑用一个页面
    if (props.location.query) {
      const { id } = props.location.query
      if (id) {
        buttonAndMenuList('', id)
      }
    }
    // menuList({ pageNum: 1, pageSize: 100 })
    buttonList({ pageNum: 1, pageSize: 100 })
  }, [])
  // 当前所有的菜单
  function menuList(params) {
    request({ ...apis.role.menuList, params: { ...params } }).then((data) => {
      setData(data)
  }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
  })
  }

  // 所有按钮
  function buttonList(params) {
    request({ ...apis.role.buttonList, params: { ...params } }).then((data) => {
      setBuutonDate(data)
  }).catch((err) => {
      console.log(err)
  })
  }


  // 根据角色id查询当前的菜单及其按钮
  function buttonAndMenuList(params, ids) {
    request({ ...apis.role.buttonAndMenuList, urlData: { id: ids }, params: { ...params } }).then(data => {
      setLoading(false)
      props.form.setFieldsValue({ roleName: data.roleName })
      console.log(data)
      setData(data)

      // 获取所有的权限Id
      if (data.sysMenuList) {
        setDataMenuId(data.sysMenuList.map(item => item && item.menuId))
        // setDataButtonId((data.sysMenuList.map(item => item.sysButtonInMenu && item.sysButtonInMenu.map(btn => btn.btnId).join(',')).filter(f => f !== '').join(',').split(',')).map(a => parseInt(a) ) )
        setDataButtonId(data.sysButtonInMenu.map(item => item && item.btnId))
      }
  }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
  })
  }

  // const [menus, setMenus] = useState([]);
  // 判断menus是否有值
  const [menus, setMenus] = useState([]);

  const addMenus = m => setMenus([...menus, m])
  const delMenus = m => setMenus(menus.filter(x => x.menuId !== m.menuId));

  const handleMenuChange = m => e => {
    if (e.target.checked) {
      setDataMenuId(dataMenuId.concat(m.menuId))
      addMenus(m)
    } else {
      setDataMenuId(dataMenuId.filter(item => item !== m.menuId));
      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 => {
    if (e.target.checked) {
      setDataButtonId(dataButtonId.concat(m.btnId))
      addBut(m)
    } else {
      setDataButtonId(dataButtonId.filter(item => item !== m.btnId));
      delBut(m)
    }
  }
  const gridStyle1 = {
    width: '16%',
    textAlign: 'left',
    height: '72px',
    padding:'24px 10px'
  };
  const gridStyle2 = {
    width: '84%',
    textAlign: 'left',
    height: '72px',
  };

  function toRoleList() {
    router.push({
      pathname: '/staff/RoleList',
    });
  }

  function updateAuthMenu(data) {
    request({ ...apis.role.updateAuthMenu, data: { ...data } }).then((data) => {
      toRoleList()
  }).catch((err) => {
      console.log(err)
  })
  }


  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (props.location.query.id !== undefined) {
        console.log('menus', menus)
      
        const sumitMenu = userMenus.filter(item => dataMenuId.includes(item.menuId))
        const sumitBtn = buutonDate.filter(item => dataButtonId.includes(item.btnId))
        updateAuthMenu({ sysMenu: sumitMenu, name: values.roleName, id: props.location.query.id, sysButton: sumitBtn })
      } else {
        updateAuthMenu({ sysMenu: menus, name: values.roleName, id: props.location.query.id, sysButton: but })
        }
    });
  }
  const { getFieldDecorator } = props.form;
  
  return (
    <>
      <div>
      <Spin spinning={ loading } size="large">
        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
          <Form.Item label="角色名称">
            {getFieldDecorator('roleName', {
              rules: [{ required: true, message: '请输入角色名称' }],
            })(<Input className={channels.inpuit} />)}

          </Form.Item>
          {userMenus.map(item => (
            (item.parentCode === '-1') &&
            <Row >
              <Col span={6}>
              </Col>
              <Col span={18}>

                <Card title={<Checkbox checked={dataMenuId.includes(item.menuId)} onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%', alignItems: 'center',margin:'10px 0', boxShadow:'3px 3px 10px  rgba(0,0,0,0.15)',borderRadius:'8px'}} >
                  {
                    userMenus.map(menu => (

                      (item.menuId === menu.menuRoot && item.menuId !== menu.menuId) &&
                      <>
                        <Card.Grid style={gridStyle1} >
                          <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 checked={dataButtonId.includes(btn.btnId)} onChange={handleButChange(btn)}>{btn.name}</Checkbox>
                              }
                            </>
                          ))}
                        </Card.Grid>
                      </>
                    ))
                  }
                </Card>
              </Col>

            </Row>
          ))}
          <Form.Item wrapperCol={{ span: 15, offset: 7 }} style={{ marginTop: '10px' }}>
            <Button type="primary" htmlType="submit">
              保存
          </Button>
            <Button className={channels.formButton} htmlType="submit" onChange = {toRoleList}>
              取消
          </Button>
          </Form.Item>
        </Form>
        </Spin>
      </div>
    </>
  )
}
const WrappedNormalLoginForm = Form.create({ name: 'Poster' })(Poster);
export default connect(({ user }) => ({ user }))(WrappedNormalLoginForm);