import React from 'react'; import { Modal, Input, Spin, Switch, Select, message, Popconfirm, Button, Cascader } from 'antd'; import { citySelect } from '../../NewDicProvinceList.js'; import { companySearch } from '../../tools.js'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; export default class TheModal extends React.Component { postData() { this.setState({ loading: true }); $.ajax({ type: "POST", url: this.state.id ? globalConfig.context + "/api/admin/updateAdmin" : globalConfig.context + "/api/admin/insertAdmin", data: { 'id': this.state.id, 'name': this.state.name, 'position': this.state.position, 'email': this.state.email, 'mobile': this.state.mobile, 'province': this.state.province, 'roles': this.state.bindroles } }).done((res) => { if (res.error.length) { message.error(res.error[0].message); } else { message.success("保存成功"); this.setState({ visible: false, }); this.props.handleReturn(false, true); //第二个参数表示保存 } }).always(() => { this.setState({ loading: false }) }) this.props.postData; } constructor(props) { super(props); this.state = { name: '', position: '', email: '', mobile: '', roles: [], visible: false, loading: false, bindroles: [] } } handleCancel() { this.setState({ visible: false, }); this.props.handleReturn(false, false); } loadInitialData() { this.setState({ loading: true }); $.ajax({ url: globalConfig.context + '/api/roles', cache: false }).done((rolesres) => { this.setState({ roles: rolesres.data, loading: false }); }) } loadBindRoles(uid) { this.setState({ loading: true }); $.ajax({ url: globalConfig.context + '/api/admin/role', cache: false, data: { "uid": uid } }).done((data) => { this.setState({ bindroles: data.data || [], loading: false }); }) } componentWillReceiveProps(nextProps) { if (nextProps.show && !this.state.roles.length) { this.loadInitialData(); }; if (!this.state.visible && nextProps.show) { this.loadBindRoles(nextProps.data.id); }; let nextState = { visible: nextProps.show, id: nextProps.data ? nextProps.data.id : '', name: nextProps.data ? nextProps.data.name : '', position: nextProps.data ? nextProps.data.position : '', email: nextProps.data ? nextProps.data.email : '', mobile: nextProps.data ? nextProps.data.mobile : '', province: nextProps.data ? nextProps.data.province : '' }; this.setState(nextState) } resetPwd(e) { this.setState({ loading: true }) $.ajax({ type: 'post', url: globalConfig.context + "/api/admin/resetPwd", dataType: "json", data: { id: this.state.id } }).done((res) => { if (res.error && res.error.length) { message.error(res.error[0].message); } else { message.success("密码重置成功"); } }).always(() => { this.setState({ loading: false }) }); } getRolesSelection() { if (!this.state.id) { return <li></li> } else if (this.state.id != '1') { return <li> <span className='modal-text'>角色</span> <Select multiple style={{ width: '60%' }} placeholder="选择用户关联角色" value={this.state.bindroles} onChange={this.bindRoles.bind(this)} > {this.getRolesOptions()} </Select> </li> } else if (this.state.id == "1") { return <li><span className='modal-text'>角色</span><span>系统管理员</span></li> } } getProvinceSelection() { if (window.showPermissionList && window.showRoleList) { return <li> <span className='modal-text'>省份</span> <div style={{ display: 'inline-block' }}> <Cascader placeholder="选择省份" style={{ width: 200 }} value={this.state.province} options={citySelect()} showSearch filterOption={companySearch} onChange={(e) => { this.setState({ province: e }) }} /> </div> </li> } else { return <li> <span className='modal-text'>省份</span> <Cascader placeholder="选择省份" style={{ width: 200 }} value={this.state.province} options={citySelect()} showSearch filterOption={companySearch} onChange={(e) => { this.setState({ province: e }) }} /> </li> } } bindRoles(val) { this.setState({ bindroles: val }); } getRolesOptions() { let options = []; for (let i = 0; i < this.state.roles.length; i++) { options.push(<Select.Option key={String(this.state.roles[i].id)}>{this.state.roles[i].roleName}</Select.Option>); } return options; } render() { return ( <div className="modal" > <Spin spinning={this.state.loading} > <Modal maskClosable={false} title="管理员详情" closable={false} visible={this.state.visible} onOk={this.postData.bind(this)} onCancel={this.handleCancel.bind(this)} > <ul className="modal-content"> <li> <span className='modal-text'>名字</span> <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} /> </li> <li> <span className='modal-text'>职位</span> <Input value={this.state.position} onChange={(e) => { this.state.position = e.target.value; this.setState({ position: this.state.position }); }} /> </li> <li> <span className='modal-text'>登录账号</span> <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} /> </li> {this.getProvinceSelection()} <li> <span className='modal-text'>邮箱</span> <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} /> </li> {this.getRolesSelection()} <li> <span></span> {this.state.id ? <Popconfirm title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"} onConfirm={this.resetPwd.bind(this)} okText="确认" cancelText="取消" placement="topLeft"> <Button>重置密码</Button> </Popconfirm> : <span></span>} </li> </ul> </Modal> </Spin> </div > ); } }