| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 | import React from 'react';import { Tag, Modal, Input, Spin, Switch, Select, message, Popconfirm, Button, Cascader, Icon } from 'antd';import { provinceSelect, provinceList, getProvince } from '../../NewDicProvinceList.js';import { companySearch } from '../../tools.js';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';const ProvinceAdd = React.createClass({    getInitialState() {        return {            cityOption: [],            theProvince: [],            citys: []        };    },    componentWillReceiveProps(nextProps) {        let theArr = [];        this.state.theProvince = [nextProps.locations[nextProps.index].province];        this.state.citys = nextProps.locations[nextProps.index].city || [];        provinceList.map((item) => {            if (item.id == nextProps.locations[nextProps.index].province) {                item.cityList.map((city) => {                    theArr.push({                        value: city.id,                        label: city.name                    })                });            };        });        this.state.cityOption = theArr;    },    render() {        return (            <div style={{ display: 'inline-block', marginRight: '20px', marginBottom: '10px' }}>                <Cascader placeholder="选择省份"                    style={{ width: 80, marginRight: '20px', verticalAlign: 'middle' }}                    options={provinceSelect()}                    value={this.state.theProvince}                    showSearch                    filterOption={companySearch}                    onChange={(e) => {                        let bool = true, theArr = [], _me = this;;                        this.props.locations.map((item, i) => {                            if (item.province == e[0] && this.props.index != i) {                                bool = false;                            };                        });                        if (!bool) {                            message.warning('请选择一个其他省份');                            this.setState({                                theProvince: undefined,                                citys: undefined,                                cityOption: []                            });                            return;                        };                        provinceList.map((item) => {                            if (item.id == e) {                                item.cityList.map((city) => {                                    theArr.push({                                        value: city.id,                                        label: city.name                                    })                                });                            };                        });                        this.props.getLocations(this.props.index, e[0])                        this.setState({                            theProvince: e,                            citys: undefined,                            cityOption: theArr,                        })                    }} />                <Select style={{ verticalAlign: 'middle', width: 584 }}                    placeholder="选择城市" notFoundContent="请先选择一个省份" multiple={true}                    showSearch                    filterOption={companySearch}                    value={this.state.citys}                    onChange={(e) => { this.setState({ citys: e }) }}                    onBlur={() => {                        this.props.getLocations(this.props.index, this.state.theProvince ? this.state.theProvince[0] : null, this.state.citys)                    }}>                    {this.state.cityOption.map((item) => {                        return <Select.Option key={String(item.value)}>{item.label}</Select.Option>                    })}                </Select>                <Button style={{ verticalAlign: 'middle', marginLeft: '20px' }} type="dashed" size="small"                    onClick={() => { this.props.delLocations(this.props.index) }}>                    <Icon type="minus" />                </Button>            </div>        );    },})const TheModal = React.createClass({    postData() {        this.setState({            loading: true        });        let theArr = [];        let theLocations = this.state.locations.concat();        theLocations.map((item, i) => {            if (item.province) {                theArr.push(item);            };        });        theArr.map((item) => {            if (item.city && item.city.length) {                item.city = item.city.join(',');            } else {                item.city = null;            };        });        $.ajax({            type: "POST",            url: this.state.id ? globalConfig.context + "/api/admin/supervise/updateAdmin" : globalConfig.context + "/api/admin/supervise/insertAdmin",            data: {                data: JSON.stringify({                    'id': this.state.id,                    'name': this.state.name,                    'email': this.state.email,                    'mobile': this.state.mobile,                    'position': this.state.position,                    'locations': theArr,                    'superiorId': this.state.superiorId                }),                '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;    },    getInitialState() {        return {            name: '',            email: '',            mobile: '',            roles: [],            visible: false,            loading: false,            bindroles: [],            locations: [],            cityOption: [],            provinceList: [],            locationsObj: {}        }    },    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            });        })    },    loadAdminSelectList() {        this.setState({            loading: true        });        $.ajax({            url: globalConfig.context + '/api/admin/supervise/adminSelectList',            cache: false        }).done((data) => {            if (!data.data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                    return;                };            };            let theArr = [], i;            for (i in data.data) {                theArr.push(                    <Select.Option key={i}>{data.data[i]}</Select.Option>                )            };            this.setState({                adminSelectOption: theArr,                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            });        })    },    loadLocations(id) {        this.setState({            loading: true        });        $.ajax({            url: globalConfig.context + '/api/admin/supervise/adminDetailLocation',            cache: false,            data: {                "id": id            }        }).done((data) => {            if (!data.data) {                if (data.error && data.error.length) {                    message.warning(data.error[0].message);                    return;                };            };            data.data.map((item) => {                if (item.city) {                    item.city = item.city.split(',');                }            });            this.setState({                locations: data.data,                loading: false            });        })    },    componentWillMount() {        this.loadAdminSelectList();    },    componentWillReceiveProps(nextProps) {        if (nextProps.show && !this.state.roles.length) {            this.loadInitialData();        };        if (!this.state.visible && nextProps.show) {            this.loadBindRoles(nextProps.data.id);            this.loadLocations(nextProps.data.id);        };        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 : '',            position: nextProps.data ? nextProps.data.position : '',            superiorId: nextProps.data ? nextProps.data.superiorId : '',        };        this.setState(nextState)    },    resetPwd(e) {        this.setState({            loading: true        })        $.ajax({            type: 'post',            url: globalConfig.context + "/api/admin/supervise/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 className="list">                <span className='modal-text'>角色</span>                <Select                    multiple                    style={{ width: '60%' }}                    placeholder="选择用户关联角色"                    value={this.state.bindroles}                    onChange={this.bindRoles} >                    {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;    },    getLocations(index, p, c) {        this.state.locations.map((item, i) => {            if (index == i) {                item.province = p;                item.city = c || [];            };        });    },    delLocations(index) {        this.state.locations.splice(index, 1);        this.setState({ locations: this.state.locations });    },    provinceAdd() {        this.state.locations.push({            province: null,            city: null        });        this.setState({ locations: this.state.locations });    },    render() {        return (            <div className="modal" >                <Spin spinning={this.state.loading} >                    <Modal maskClosable={false} title="管理员详情"                        closable={false} width={1000}                        visible={this.state.visible}                        onOk={this.postData}                        onCancel={this.handleCancel} >                        <ul className="modal-content clearfix">                            <li className="list">                                <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 className="list">                                <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 className="list">                                <span className='modal-text'>上级</span>                                <Select style={{ verticalAlign: 'middle', width: 200 }}                                    placeholder="选择一个上级" notFoundContent="没有获取到管理员列表"                                    showSearch                                    filterOption={companySearch}                                    value={this.state.superiorId}                                    onChange={(e) => { this.setState({ superiorId: e }) }} >                                    {this.state.adminSelectOption}                                </Select>                            </li>                            <li className="list">                                <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 className="list">                                <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()}                            {this.state.id ? <li className="list">                                <span></span>                                <Popconfirm                                    title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}                                    onConfirm={this.resetPwd}                                    okText="确认"                                    cancelText="取消"                                    placement="topLeft">                                    <Button>重置密码</Button>                                </Popconfirm>                            </li> : <li></li>}                        </ul>                        <div>                            <span className='modal-text' style={{ verticalAlign: 'top' }}>地区</span>                            {!window.showPermissionList && window.showRoleList ? <div style={{ display: 'inline-block', width: '88%' }}>                                {this.state.locations.map((item, i) => {                                    return <ProvinceAdd                                        getLocations={this.getLocations}                                        delLocations={this.delLocations}                                        locations={this.state.locations}                                        index={i} key={i} />                                })}                                <Button style={{ verticalAlign: 'middle' }} type="dashed" size="small"                                    onClick={this.provinceAdd}>                                    <Icon type="plus" />                                </Button>                            </div> : <div style={{ display: 'inline-block', width: '88%' }}>                                    {this.state.locations.map((item, i) => {                                        return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((item) => {                                            return getProvince(item) + ' '                                        }) : '')}</Tag>                                    })}                                </div>}                        </div>                    </Modal>                </Spin>            </div >        );    }})export default TheModal;
 |