menuAdd.js

import React from 'react';
import './menu.less'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import SYS_CONFIG from '@src/config/constant.js'
import { NavLink } from 'react-router-dom'
import { API_MENU_MANAGE, API_FILEUPLOAD_MANAGE } from '@src/Api'
import { IconOptionsForm, UserManageBar, MenuOptionsForm } from '@components/Common'
import { Form, Button, Input, Icon, message, Modal, Radio, Checkbox, Col, Row, Upload, Spin } from 'antd'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const TextArea = Input.TextArea


class MenuAdd extends React.Component {
  //终端设备
  clientTermFlagsOpts = [
    { label: '安卓', value: 1 },
    { label: 'IOS', value: 2 },
    { label: '微信', value: 4 },
    { label: 'ipad(苹果)', value: 8 },
    { label: 'pad(安卓)', value: 16 },

  ];
  serverTermFlagsOpts = [
    { label: 'PC', value: 32 },
  ]
  state = {
    isShowMenuModal: false,//所属菜单弹窗是否展示
    menuOptionsArr: [],//菜单弹窗渲染树形数据
    checkedObj: {},//选中的菜单
    menuInfo: {},//修改带参返回角菜单信息
    titleParams: '新增菜单',
    termFlagsArr: [],
    showOrg: { display: 'block' },
    hideOrg: { display: 'none' },
    showUploadList:true,
    defaultFileList:[],
    showError: false,
    chgIconSelect:1,
    selectTerminal:1,
    spinStatus: false

  }
  componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
  }
  async componentDidMount() {
    //获取菜单树状图
    await this.getMenuTreeList()

    //获取跳转参数
    this.getRouterParams()
    //获取菜单信息
    //await this.getMenuByid()
  }
  // 菜单清空
  onRef = (ref) => {
    this.child = ref;
  }
  //选权限时显示菜单图标
  chgIconSelect = (e) => {
    const { selectTerminal } = this.state
    if (e.target.value === 2) {
      this.setState({
        chgIconSelect: 2,
      })
    } else {
      if (selectTerminal === 2) {
        this.setState({
          chgIconSelect: 1,
        })
      } else {
        this.setState({
          chgIconSelect: 1,
        })
      }

    }

  }
  //根据菜单ID查询菜单信息
  getMenuByid = () => {
    let _this = this
    this.setState({spinStatus: true})
    return new Promise((resolve, reject) => {
      const { optTag, id } = this.props.match.params
      const { defaultFileList} = this.state
      
      if (!id) {
        message.warn('请重新选择，或者刷新页面')
        this.props.history.push({
          pathname: '/home/permission/menuManage/menu/',
        });
        return
      } else {

        //if (id) {
        axios.ajax({
          url: API_MENU_MANAGE.getModuleByModuleId,
          data: {
            id
          }
        }).then(res => {
          if (res && Object.keys(res).length > 0) {
            let initModuleType
            
            if (optTag === 'updateItem') {
              if (res.moduleType === 32) {
                initModuleType = _this.getval(_this.serverTermFlagsOpts, res.moduleType)
                this.setState({
                  initModuleType,
                  selectTerminal: 2,
                  chgIconSelect: res.menuType ? res.menuType : 1,
                  termFlagsArr: this.serverTermFlagsOpts,
                })
              } else {
                 //渲染已上传图片
                let fileObj={}
                fileObj.uid=1
                fileObj.name=res.iconName
                res.menuIcon && res.iconName ? defaultFileList.push(fileObj):""
                
                initModuleType = _this.getval(_this.clientTermFlagsOpts, res.moduleType)
                this.setState({
                  initModuleType,
                  selectTerminal: 1,
                  chgIconSelect: res.menuType ? res.menuType : 1,
                  termFlagsArr: this.clientTermFlagsOpts,
                  defaultFileList,
                })
              }
              
              this.props.form.setFieldsValue({ 'parentId': res.parentId })
              if (res.parentId === 0) {
                this.props.form.setFieldsValue({ 'parentName': res.name })
                this.props.form.setFieldsValue({ 'upParentName': res.name })
              } else {
                this.props.form.setFieldsValue({ 'parentName': res.parentName })
                this.props.form.setFieldsValue({ 'upParentName': res.parentName })
              }

              this.props.form.setFieldsValue({ 'moduleType': res.moduleType })
              this.props.form.setFieldsValue({ 'module_Type': initModuleType })
            } else if (optTag === 'addNextItem') {

              this.props.form.setFieldsValue({ 'parentId': res.id })
              this.props.form.setFieldsValue({ 'parentName': res.name })
              this.props.form.setFieldsValue({ 'upParentName': res.name })
            }
            this.setState({spinStatus: false})
            resolve(this.setState({
              menuInfo: res,
              menuSelectedItem: res.menuIcon,
              checkedObj: {
                key: res.parentId,
                val: res.name,
              },
              parentCheckedObj: res.name
            }))
          }
        })
      }
      //}
    })
  }
  //获取跳转过来的传参
  getRouterParams = () => {
    const params = this.props.match.params

    if (!params || !params.optTag) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.push({
        pathname: '/home/permission/menuManage/menu',
      });
      return
    }

    if (params.optTag === 'addItem') {
      this.setState({
        chgIconSelect: 1,
        titleParams: '新增菜单',
        termFlagsArr: this.clientTermFlagsOpts
      })
    } else if (params.optTag === 'updateItem') {
      this.getMenuByid();
      this.setState({
        titleParams: '修改菜单',
        termFlagsArr: this.clientTermFlagsOpts
      })
    } else if (params.optTag === 'addNextItem') {
      this.getMenuByid();
      this.setState({
        chgIconSelect: 1,
        titleParams: '新增下级菜单',
        termFlagsArr: this.clientTermFlagsOpts,
        showOrg: { display: 'none' },
        hideOrg: { display: 'block' },
      })
    }
  }
  //根据菜单名称获取菜单树形结构
  getMenuByName = (menuName) => {
    axios.ajax({
      url: API_MENU_MANAGE.getModuleTreeList,
      data: {
        moduleName: menuName
      }

    }).then(res => {
      if (res && res.length > 0) {
        this.setState({
          menuOptionsArr: res
        })
      } else {
        this.setState({
          menuOptionsArr: []
        })
      }
    })
  }

  //获取菜单树状图
  getMenuTreeList = (menuName) => {
      axios.ajax({
        url: API_MENU_MANAGE.getModuleTreeList,
        data: {
          pageNum: 1,
          pageSize: 50
        }
      }).then(res => {
        if (res && res.length > 0) {

          this.setState({
            menuOptionsArr: res
          })
        } else {
          this.setState({
            menuOptionsArr: []
          })
        }
      })
  }
  //终端机使用标识数据初始化处理
  getval = (data, val) => {
    if (val === 0) return []
    let termFlagsOptsInit = data.map(k => {
      if ((k.value & val) === k.value) {
        return k.value
      }
    }).filter(k => k !== undefined)
    return termFlagsOptsInit
  }
  //选择终端
  selectTerminal = (e) => {
    const { chgIconSelect} = this.state
    this.props.form.setFieldsValue({ "moduleType": "" })
    this.props.form.setFieldsValue({ "module_Type": "" })
    this.clearUploadImgPath()
    if (chgIconSelect === 1) {
      if (e.target.value === 2) {
        this.setState({
          selectTerminal: 2,
          termFlagsArr: this.serverTermFlagsOpts
        })
      } else {

        this.setState({
          selectTerminal: 1,
          termFlagsArr: this.clientTermFlagsOpts
        })
      }
    }
    if (chgIconSelect === 2) {
      if (e.target.value === 2) {
        this.setState({
          selectTerminal: 2,
          termFlagsArr: this.serverTermFlagsOpts
        })
      } else {
        this.setState({
          selectTerminal: 1,
          termFlagsArr: this.clientTermFlagsOpts
        })
      }
    }
  }
  //选择终端设备
  onChange = (checkedValues) => {
    let moduleType
    if (checkedValues && checkedValues.length > 0) {
      moduleType = checkedValues.reduce((pre, cur) => {
        return pre + cur
      })
    }
    this.props.form.setFieldsValue({ moduleType })
  }
  //获取菜单弹窗选中项
  getCheckedObj = (obj) => {
    this.setState({
      checkedObj: obj
    })
  }



  //获取所属菜单
  showMenuModal = () => {
    let menuInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({
      isShowMenuModal: true,
      checkedObj: {
        key: menuInfo.parentId,
        val: menuInfo.parentName
      }
    })

  }

  //获取所属图标
  showIconModal = () => {
    let menuInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({
      isShowIconModal: true,
      iconCheckedObj: menuInfo.menuIcon,
    })

  }
  //获取图标
  getIconObj = (obj) => {
    this.setState({
      iconCheckedObj: obj
    })
  }
  //获取确定选中图标
  handleIconOptions = () => {
    const iconCheckedObj = this.state.iconCheckedObj
    if (!iconCheckedObj) {
      message.warn('请选择对应的图标')
      return
    } else {
      this.setState({
        iconCheckedObj
      })
      this.props.form.setFieldsValue({ 'menuIcon': iconCheckedObj })
      this.setState({
        isShowIconModal: false
      })
    }
  }
  //保存新增菜单
  handleOperator = (e) => {
    e && e.preventDefault();
    let data = Utils.trim(this.props.form.getFieldsValue());
    const { optTag } = this.props.match.params
    const { menuInfo ,menuIcon} = this.state
    const { chgIconSelect,selectTerminal} = this.state
    console.log("iconName",data.iconName)
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          spinStatus: true,
        })  
        axios.optAjax({
          url: API_MENU_MANAGE.insertModule,
          data: {
            ...data,
            id: optTag && optTag === 'updateItem' ? menuInfo.id : ""
          }
        }).then(res => {
          if(res && res.code && res.code !== 0){
            this.setState({
              spinStatus: false,
            }) 
            return
          }
          
          message.success(optTag && optTag === 'updateItem' ? '修改成功' : '新增成功')
          this.props.history.push({
            pathname: '/home/permission/menuManage/menu/',
          });
          
        })
      }
    });
  }
  //获取确定选中菜单
  handleMenuOptions = () => {
    const checkedObj = this.state.checkedObj
    if (Object.keys(checkedObj).length == 0 || !checkedObj) {
      message.warn('请选择对应的菜单')
      return
    } else {
      this.setState({
        checkedObj
      })
      this.props.form.setFieldsValue({ 'parentId': checkedObj.key })
      this.props.form.setFieldsValue({ 'parentName': checkedObj.val })
      this.props.form.setFieldsValue({ 'upParentName': checkedObj.val })

      this.setState({
        isShowMenuModal: false
      })
    }
  }

  //检查终端机使用标识
  chekckTerminal = (rule, value, callback) => {
    if (!value || value.length === 0) {
      callback('请选择终端机');
    } else {

      callback();
    }
  };
  //图片转base64
   getBase64 = (img, callback)=> {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img)
  }
  //获取上传图片后的路径
  onImageUpload = (imageUrl) => {
    axios.ajax({
      url: API_FILEUPLOAD_MANAGE.base64,
      data: {
        "imageDatas": [{
          "className": "menuImg",
          "data": imageUrl
        }]
      }
    }).then(res => {
      console.log('res',res)
      if(res && res.length > 0){
        if(!res[0]==''){
          this.setState({
              showUploadList: true,
          })
          this.props.form.setFieldsValue({ 'menuIcon': res[0] })
          this.props.form.setFieldsValue({ 'iconName': this.state.defaultFileList[0].name })
          message.success(`上传成功`);
        }
        
      }
    })
  }
  //清除上传的图片路径
  clearUploadImgPath= (imageUrl) => {
    this.props.form.setFieldsValue({ 'menuIcon': '' })
    this.props.form.setFieldsValue({ 'iconName': ''})
    this.setState({
          showUploadList: false
        })
    this.setState({
         defaultFileList: []
       })
  }
  render() {
    let _this = this
    const { getFieldDecorator } = this.props.form;
    const { optTag } = this.props.match.params
    const { menuInfo, termFlagsArr, selectTerminal ,showUploadList,defaultFileList,showError,chgIconSelect } = this.state
    const formItemLayout = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 6 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 18 },
      },
    }

    const formItemLayout2 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 3 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 21 },
      },
    }
    const props = {
      accept:"image/*",
      action:SYS_CONFIG.baseApi + API_MENU_MANAGE.getModuleTreeList,
      showUploadList,
      defaultFileList,
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
      },
      beforeUpload(file){
        const imgArr = ['image/jpeg', 'image/png', 'image/jpg']
        const isJPG = imgArr.indexOf(file.type) === -1
        if (isJPG) {
          message.error('图片只支持jpeg,png格式');
          _this.setState({
            showUploadList: false
          })
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('图片不能大于2MB');
           _this.setState({
            showUploadList: false
          })
        }
        return !isJPG && isLt2M;
      },
       onChange(info,fileList,e) {
        //console.log('info.file.originFileObj',info.file.originFileObj);
        if (info.fileList.length >1) {
          info.fileList =info.fileList.splice(0,1)
        }
        console.log("info.fileList",info.fileList)
        //this.props.form.setFieldsValue({ 'iconName': info.fileList.name })
          _this.setState({
             defaultFileList: info.fileList
           })
        
        if (info.file.status === 'done') {
          _this.getBase64(info.file.originFileObj, imageUrl => {_this.onImageUpload(imageUrl)});
        } else if (info.file.status === 'error') {
          _this.getBase64(info.file.originFileObj, imageUrl => {_this.onImageUpload(imageUrl)});
        }
      },
      onRemove(file) {
        _this.clearUploadImgPath();
      },

    };
    return (
      <div className="menuAdd">
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
        <div className="nav">
          <NavLink replace to={'/home/permission/menuManage/menu'} >菜单管理</NavLink> > <span>{this.state.titleParams}</span>
        </div>
        <UserManageBar title="基本信息" />

        <div className="userInfo menuInfo">
          <Form layout="horizontal" className="publicForm">
            <Row gutter={24}>
              <Col span="8" style={this.state.showOrg}>
                <FormItem label="上级菜单："{...formItemLayout} >
                  {
                    getFieldDecorator('parentName', {
                      rules: [
                        { required: true, message: '请选择上级菜单', }
                      ]
                      //initialValue: optTag && optTag === 'updateItem' ?  menuInfo.name :null,
                    })(
                      <Input disabled addonAfter={<Icon className="chooseRole" onClick={() => { this.showMenuModal() }} type="search" />} placeholder="上级菜单" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8" style={this.state.hideOrg}>
                <FormItem label="上级菜单："{...formItemLayout}  >
                  {
                    getFieldDecorator('upParentName', {
                      rules: [
                        { required: true, message: '请选择上级菜单', }
                      ]
                      //initialValue: optTag && optTag === 'updateItem' ?  menuInfo.name :null,
                    })(
                      <Input disabled placeholder="上级菜单" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8" style={{ display: 'none' }}>
                <FormItem >
                  {
                    getFieldDecorator('parentId', {
                      //initialValue: optTag && optTag === 'updateItem' ?  menuInfo.parentId :null,
                      rules: [
                        { required: true, message: '请选择上级菜单', }
                      ]
                    })(
                      <Input placeholder="" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="菜单类型：" {...formItemLayout} >
                  {
                    getFieldDecorator('menuType', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.menuType : 1,
                      rules: [
                        { required: true, message: '请选择菜单类型', }
                      ]
                    })(
                      <RadioGroup onChange={this.chgIconSelect}>
                        <Radio value={1}>菜单</Radio>
                        <Radio value={2}>权限（按钮）</Radio>
                      </RadioGroup>
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="菜单名称：" {...formItemLayout}>
                  {
                    getFieldDecorator('name', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.name : null,
                      rules: [
                        { required: true, message: '请输入菜单名称', },
                        { max: 128, whitespace: true, message: '菜单名称最长为128位字符' },
                      ]
                    })(
                      <Input placeholder="菜单名称" />
                    )
                  }
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span="8">
                <FormItem label="菜单link："{...formItemLayout}>
                  {
                    getFieldDecorator('link', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.link : null,
                      rules: [
                        { required: true, message: '请输入菜单link', },
                        { max: 128, message: '菜单link最长为128位字符' },
                      ]
                    })(
                      <Input placeholder="菜单link" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="排序(升序)："{...formItemLayout}>
                  {
                    getFieldDecorator('sequence', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.sequence : "",
                      rules: [
                        { pattern: /^(\s*||\s*[1-9]([0-9]){0,10}\s*)$/, message: '排序必须是正整数,最长为11位字符' },
                      ]
                    })(
                      <Input placeholder="排序(升序)" />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="可 &emsp;&emsp;见" {...formItemLayout}>
                  {
                    getFieldDecorator('status', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.status : 1,
                    })(
                      <RadioGroup>
                        <Radio value={1}>显示</Radio>
                        <Radio value={2}>隐藏</Radio>
                      </RadioGroup>
                    )
                  }
                </FormItem>
              </Col>
            </Row>
           
            
            <Row gutter={24} style={{marginTop:'10px'}}>
              <Col span="8">
                <FormItem label="选择终端" {...formItemLayout}>
                  {
                    getFieldDecorator('selectTerminal', {
                      initialValue: selectTerminal ? selectTerminal : 1,
                    })(
                      <RadioGroup onChange={this.selectTerminal}>
                        <Radio value={1}>客户端</Radio>
                        <Radio value={2}>服务端</Radio>
                      </RadioGroup>
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="显示终端" {...formItemLayout}>
                  {
                    getFieldDecorator(['module_Type'], {
                      initialValue: this.state.initModuleType,
                      rules: [{ required: true, validator: this.chekckTerminal }]
                    })(
                      <CheckboxGroup options={termFlagsArr} onChange={this.onChange} style={{ minWidth: 400 }} />
                    )
                  }
                </FormItem>
              </Col>
              <Col span="8" style={{ display: 'none' }} >
                <FormItem label="终端机使用标识" {...formItemLayout}>
                  {
                    getFieldDecorator('moduleType', {
                      initialValue: "",
                    })(
                      <Input />
                    )
                  }
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span="8">
               {
                chgIconSelect===2? 
                <FormItem label="菜单code"{...formItemLayout}>
                  {
                    getFieldDecorator('code', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.code : null,
                      rules: [
                        { required: true, message: '请输入菜单code', }
                      ]
                    })(
                      <Input placeholder="菜单code"  disabled={menuInfo.code}/>
                    )
                  }
                </FormItem>
                :
                selectTerminal===2?
                <FormItem label="菜单图标："{...formItemLayout}>
                  {
                    getFieldDecorator('menuIcon', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.menuIcon : null,
                      rules: [
                        { required: true, message: '请选择图标', }
                      ]
                    })(
                      <Input disabled addonAfter={<Icon className="menuIcon" onClick={() => { this.showIconModal() }} type="search" />} placeholder="菜单图标" />
                    )
                  }
                </FormItem>
                :

                <FormItem label="上传图片" {...formItemLayout} >
                  {
                    getFieldDecorator('menuIcon', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.menuIcon : null,
                      rules: [
                        { required: true, message: '请上传图片', }
                      ]
                    })(
                      <Input className='visibility' />
                    )
                  } 
                   <Upload ref="upload" {...props} className='uploadBtn'>
                      <Button>
                        <Icon type="upload" /> 点击上传
                      </Button>
                    </Upload>
                </FormItem>
              }
              </Col>
              <Col span="8" style={{display :'none'}}>
                <FormItem label="图片名称"{...formItemLayout}>
                  {
                    getFieldDecorator('iconName', {
                    })(
                      <Input />
                    )
                  }
                </FormItem>
              </Col>
              
            </Row>

            <div className="detail"  >
              <UserManageBar title="其他信息" />
            </div>

            <Row gutter={24} style={{ marginTop: 20 }}>
              <Col span="16">
                <FormItem label="备 &emsp;&emsp;注" {...formItemLayout2}>
                  {
                    getFieldDecorator('remark', {
                      initialValue: optTag && optTag === 'updateItem' ? menuInfo.remark : "",
                      rules: [{ max: 300, message: '备注最长为300位字符' },]
                    })(

                      <TextArea placeholder="备注" rows={8} columns={10} />
                    )
                  }
                </FormItem>
              </Col>
            </Row>

          </Form>
        </div>
        <div className="submitBtn" >
          <Button type="primary" onClick={this.handleOperator} >保存</Button>
          <NavLink to='/home/permission/menuManage/menu'><Button> 返回 </Button></NavLink>
        </div>
        {/* 所属菜单弹窗 */}
        <Modal
          title="所属菜单"
          visible={this.state.isShowMenuModal}
          width={800}
          className="modal"
          okText="确认"
          cancelText="取消"
          onOk={this.handleMenuOptions}
          onCancel={() => {
            this.child.reset();
            this.setState({
              isShowMenuModal: false
            })
          }}
        >
          <MenuOptionsForm
            getMenuByName={(orgName) => this.getMenuByName(orgName)}
            getMenuTreeList={this.getMenuTreeList}
            menuOptionsArr={this.state.menuOptionsArr}
            getCheckedObj={this.getCheckedObj}
            checkedObj={this.state.checkedObj}
            parentCheckedObj={this.state.parentCheckedObj}
            onRef={this.onRef}
          ></MenuOptionsForm>
        </Modal>

        {/*图标modal*/}
        <Modal
          title="图标选择"
          visible={this.state.isShowIconModal}
          width={800}
          className="modal"
          okText="确认"
          cancelText="取消"
          onOk={this.handleIconOptions}
          onCancel={() => {
            this.setState({
              isShowIconModal: false
            })
          }}
        >
          <IconOptionsForm
            iconCheckedObj={this.state.iconCheckedObj}
            getIconObj={this.getIconObj}

          ></IconOptionsForm>

        </Modal>
        </Spin>
      </div>
    )
  }
}

export default Form.create()(MenuAdd);