joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
123 lines (116 loc) • 4.49 kB
JavaScript
// 添加用户组分组
import React , {Component,Fragment} from 'react';
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 { FormControl, InputLabel, Input } from '@material-ui/core';
const styles = {
focused:{
color: '#3297fc!important'
},
shrink:{
color: '#404A53'
},
textPrimary: {
color: '#3297fc!important'
}
};
class AddGroupDialog extends React.Component{
constructor(props) {
super(props);
this.state = _.extend({
originData: $.extend(true,{name:''},props.data||{}),
data: {name:''},
saving: false
},props.data)
}
handleChange(e){
let data = this.state.data;
data['name'] = 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 data = this.state.data;
// http://192.168.1.12/api/customusergroup/{cid}/class PUT 更新自定义用户组分组
let url = '/api/customusergroup/usergroupclass';
let params = this.state.data;
if(params.otype == "raffle"){
url = "/api/raffleconsole/usergroupclass";
params.utype = this.props.utype;
}
request(url,{
method: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){
// request 中对错误有输出，所以这里不需要再出错误提示
}else{
let a = AloneTip({ type: 'success', duration: 1000, hasclose: false, autoHideDuration: 1000, message: data.id?i18n('btn.edit-success'):i18n('label.add-success') })
typeof(self.props.onSubmitSuccess)=='function' && self.props.onSubmitSuccess(resp.data.JMUsergroupclass)
}
self.setState(params)
})
}
componentWillReceiveProps(nextProps){
if(nextProps.data && JSON.stringify(this.state.data)!=JSON.stringify(nextProps.data) ){
this.setState({
originData: $.extend(true,{},nextProps.data),
data: nextProps.data
},()=>{
});
}
}
componentDidMount(){
}
render(){
let self = this;
let { classes } = this.props;
let data = this.state.data;
let buttonDisabled = (JSON.stringify(this.state.originData) === JSON.stringify(this.state.data)||this.state.data.name=='') ? true : false;
return <Dialog className="jw-m-addgroup-dialog" open={this.props.open} onClose={()=>this.handleClose()} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">{data.id ? i18n('label.usergroup.title.edit.groupclass') : i18n('label.usergroup.title.add.groupclass')}</DialogTitle>
<DialogContent>
<FormControl className="jw-m-addgroup-content">
<InputLabel classes={classes} htmlFor="component-simple">{i18n('label.usergroup.classname')}</InputLabel>
<Input id="component-simple" className="jw-m-addgroup-input" value={data.name} onChange={(e)=>this.handleChange(e)} />
</FormControl>
</DialogContent>
<DialogActions>
<Button classes={classes} onClick={()=>this.handleClose()} color="primary">
{i18n('btn.cancel')}
</Button>
{
buttonDisabled==true||this.state.saving==true ?
<Button classes={classes} disabled color="default">
{ this.state.saving==true ? i18n('btn.saving') : i18n('btn.sure') }
</Button> :
<Button classes={classes} onClick={()=>this.handleSubmit()} color="primary">
{i18n('btn.sure')}
</Button>
}
</DialogActions>
</Dialog>
}
}
export default withStyles(styles)(AddGroupDialog);