| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 | import React from 'react';import { Modal, Input, Spin, Switch, Select, message, Popconfirm, Button } from 'antd';import { provinceArr } from '../../dataDic.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,                '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: '',            email: '',            mobile: '',            roles: [],            visible: false,            loading: false,            provinceOption: [],            bindroles: []        }    }    handleCancel() {        this.setState({            visible: false,        });        this.props.handleReturn(false, false);    }    componentWillMount() {        let _me = this;        provinceArr.map(function (item) {            _me.state.provinceOption.push(                <Select.Option value={item} key={item}>{item}</Select.Option>            )        });    }    loadInitialData() {        this.setState({            loading: true        });        $.ajax({            url: globalConfig.context + '/api/roles',            cache: false        }).done((rolesres) => {            this.setState({                roles: rolesres.data,                loading: false            });        })    }    componentWillReceiveProps(nextProps) {        if (nextProps.show && !this.state.roles.length) {            this.loadInitialData();        };        let nextState = {            visible: nextProps.show,            id: nextProps.data ? nextProps.data.id : '',            name: nextProps.data ? nextProps.data.name : '',            email: nextProps.data ? nextProps.data.email : '',            mobile: nextProps.data ? nextProps.data.mobile : '',            province: nextProps.data ? nextProps.data.province : '',            bindroles: nextProps.data && nextProps.data.roles ? nextProps.data.roles.map((role) => { return String(role.id); }) : []        };        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 != '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>        }    }    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 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.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />                            </li>                            <li>                                <span className='modal-text'>省份</span>                                <Select placeholder="选择省份"                                    style={{ width: 200 }}                                    value={this.state.province}                                    showSearch                                    filterOption={companySearch}                                    onChange={(e) => { this.setState({ province: e }) }}>                                    {this.state.provinceOption}                                </Select>                            </li>                            <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>                                <Popconfirm                                    title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}                                    onConfirm={this.resetPwd.bind(this)}                                    okText="确认"                                    cancelText="取消"                                    placement="topLeft">                                    <Button>重置密码</Button>                                </Popconfirm>                            </li>                        </ul>                    </Modal>                </Spin>            </div >        );    }}
 |