joywok-material-components/components/customusergroup/AddUserGroup.js

<h1 align="center"> Joywok Material Components </h1>

// 添加用户组
import React , {Component,Fragment} from 'react';
import {connect} from 'dva';
import ReactDOM from 'react-dom';
import request from '../utils/request';
import AloneTip from './../tips/aloneTip';
import Button from '@material-ui/core/Button';
import {createMuiTheme, MuiThemeProvider, withStyles} from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Select from './../select/menuSelect';
import { COMPONENT_DICT } from '../constants';

const styles = {

};

class AddGroupDialog extends  React.Component{
  constructor(props) {
    super(props);
    this.state = _.extend({
      originData: $.extend(true,{name:'',cid:''},props.data||{}),
      data: {
        name:'',
        cid:''
      },
      objectInfo: {},
      groupClasses: [],
      saving: false
    },props)
  }
  handleChange(e, key){
    let data = this.state.data;
    data[key] = e.target.value;
    this.setState({
      data: data
    });
  }
  handleClose(){
    typeof(this.props.onClose)=='function' && this.props.onClose()
  }
  handleSubmit(){
    let self = this;
    this.setState({
      saving: true
    })
    let params = this.state.data;
    let url = '/api/customusergroup/usergroup';
    if(this.state.objectInfo.otype == 'raffle'){
      url = '/api/raffleconsole/usergroup';
      params.oid = this.state.objectInfo.oid;
      params.utype = this.props.utype;
    }
    if(this.state.data.id){
      if(this.state.objectInfo.otype == 'raffle'){
        url = '/api/raffleconsole/usergroupsimple';
      }else {
        url = '/api/customusergroup/'+this.state.data.id+'/simple'
      }
    }
    request(url,{
      method:this.state.data.id ? "PUT" : "POST",
      body: JSON.stringify(params)
    })
    .then(function(resp){
      let params = {
        saving: false
      }
      if(resp.data&&resp.data.JMStatus && resp.data.JMStatus.errmemo){
        // let a = AloneTip({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message:COMPONENT_DICT('label.business.err.info')+ resp.data.JMStatus.errmemo })
      }else{
        let a = AloneTip({ type: 'success', duration: 1000, hasclose: false, autoHideDuration: 1000, message: self.state.data.id?i18n('btn.edit-success'):i18n('label.add-success') })
        typeof(self.props.onSubmitSuccess)=='function' && self.props.onSubmitSuccess(resp.data.JMUsergroup,self.state.data)
      }
      self.setState(params)
    })
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.data && JSON.stringify(this.state.data)!=JSON.stringify(nextProps.data) || nextProps.groupClasses!=this.state.groupClasses ){
      this.setState(_.extend({
        originData: $.extend(true,{},nextProps.data),
        data: nextProps.data
      },nextProps),()=>{

      });
    }
  }
  componentDidMount(){
    let self = this;
  }
  render(){
    let self = this;
    let groupClasses = _.map(this.state.groupClasses,(item)=>{
      return {key:item.id,value:item.name}
    })
    let buttonDisabled = (JSON.stringify(this.state.originData) === JSON.stringify(this.state.data)||this.state.data.name=='') ? true : false;
    return <Dialog
             className="jw-m-addusergroup-dialog"
             open={this.props.open}
             onClose={()=>this.handleClose()}
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
            >
             <DialogTitle id="alert-dialog-title">{this.state.data.id?i18n('label.usergroup.edit.group'):i18n('label.usergroup.add.group')}<i className="icon-close-big" onClick={()=>this.handleClose()}></i></DialogTitle>
             <DialogContent>
                <div className="addusergroup-name">
                  <span className="label">{i18n('label.usergroup.name')}<span className="label-required">*</span></span>
                  <TextField className="addusergroup-name-input" placeholder={i18n('label.form.please.input')} value={this.state.data.name} onChange={(e)=>this.handleChange(e,'name')}/>
                </div>
                <div className="addusergroup-belong">
                  <span className="label">{i18n('label.usergroup.belong')}</span>
                  <Select className="addusergroup-belong-select" key={this.state.data.cid} value={this.state.data.cid} options={groupClasses} onChange={(e)=>this.handleChange(e,'cid')} />
                </div>
             </DialogContent>
             <DialogActions className="addusergroup-actions">
                <Button onClick={()=>this.handleClose()} className="addusergroup-cancel-btn" color="primary">
                  {i18n('btn.cancel')}
                </Button>
                {
                  buttonDisabled==true||this.state.saving==true ?
                  <Button className="addusergroup-save-btn" disabled >
                    { this.state.saving==true ? i18n('btn.saving') : i18n('btn.save') }
                  </Button> :
                  <Button className="addusergroup-save-btn" onClick={()=>this.handleSubmit()}>
                    {i18n('btn.save')}
                  </Button>
                }
             </DialogActions>
          </Dialog>
  }
}

export default connect((state)=>{return state})(AddGroupDialog);