| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575 | import React from 'react';import { Tag, Modal, Input, Spin, Switch, Select, message, Popconfirm, Button, Cascader, Icon } from 'antd';import { provinceSelect, provinceList, getProvince ,citySelect} from '../../../NewDicProvinceList.js';import { companySearch } from '../../../tools.js';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import {customerStatus} from '../../../dataDic.js'const ProvinceAdd = React.createClass({	getInitialState() {		return {			cityOption: [],			theProvince: [],			citys: [],			departmentArr:[]		};	},	componentWillMount() {		let theArr = [];		this.state.theProvince = [this.props.locations[this.props.index].province];		this.state.citys = this.props.locations[this.props.index].city || [];		this.props.provinceList.map((item) => {			if(item.id == this.props.locations[this.props.index].province) {				item.cityList.map((city) => {					theArr.push({						value: city.id,						label: city.name					})				});			};		});		this.state.cityOption = theArr;	},	componentWillReceiveProps(nextProps) {		let theArr = [];		this.state.theProvince = [nextProps.locations[nextProps.index].province];		this.state.citys = nextProps.locations[nextProps.index].city || [];		this.props.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={this.props.provinceOption}                    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;                        };                        this.props.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;			};		});		let departmentIds='';		if(!this.state.department){			departmentIds=''		}else if((this.state.department).length>30){			departmentIds=this.state.department		}else{			departmentIds=this.state.departmentId		}		$.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,					'province':this.state.addressSearch.length?this.state.addressSearch[0]:'',					'city':this.state.addressSearch.length?this.state.addressSearch[1]:'',					'departmentId':departmentIds,					'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,			theSwitch: true,			bindroles: [],			locations: [],			cityOption: [],			locationsObj: {},			adminSelectObj: {}		}	},	handleCancel() {		this.setState({			visible: false,			locations: []		});		this.props.handleReturn(false, 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,				adminSelectObj: data.data,				loading: false			});		})	},	loadAdminOwnLocation() {		this.setState({			loading: true		});		$.ajax({			url: globalConfig.context + '/api/admin/supervise/adminOwnLocation',			cache: false		}).done((data) => {			if(!data.data) {				if(data.error && data.error.length) {					message.warning(data.error[0].message);					return;				};			};			let theArr = [],				theList = [];			if((typeof(data.data)).indexOf('string') == -1) {				data.data.map((item) => {					theArr.push({						value: item.province,						label: getProvince(item.province)					});					let cityList = [];					if(item.city) {						item.city.split(',').map((c) => {							cityList.push({								id: Number(c),								name: getProvince(c)							});						});					};					theList.push({						id: item.province,						name: getProvince(item.province),						cityList: cityList.length ? cityList : null					});				});			} else {				theArr = provinceSelect();				theList = provinceList;			}			this.setState({				provinceOption: theArr,				provinceList: theList,				loading: false			});		})	},	loadBindRoles(uid) {		this.setState({			loading: true		});		$.ajax({			url: globalConfig.context + '/api/admin/role',			cache: false,			data: {				"uid": uid			}		}).done((data) => {			if(!data.data) {				if(data.error && data.error.length) {					message.warning(data.error[0].message);				};				return;			} else if(data.data) {				this.state.theSwitch = true;				for(let i = 0; i < data.data.length; i++) {					for(let n = 0; n < this.props.currentRoles.length; n++) {						if(data.data[i] === this.props.currentRoles[n] && uid != 1) {							this.state.theSwitch = false;						}					}				};			};			this.setState({				bindroles: data.data || [],				theSwitch: this.state.theSwitch,				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();		this.loadAdminOwnLocation();	},	componentWillReceiveProps(nextProps) {		if(!this.state.visible && nextProps.show) {			if(nextProps.data.id) {				this.loadBindRoles(nextProps.data.id);				this.loadLocations(nextProps.data.id);			}		};		let proCity=[];		let province=nextProps.data ? parseInt(nextProps.data.province) : '';		let city = nextProps.data ? parseInt(nextProps.data.city) : '';		proCity.push(province,city);		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 : '',			addressSearch:proCity,			addressProvince:nextProps.data ? nextProps.data.province : '',			department: nextProps.data ? nextProps.data.departmentName : '',			departmentId:nextProps.data ? nextProps.data.departmentId : '',			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  style={{width:'150px'}}>系统管理员</span></li>		}	},	bindRoles(val) {		this.setState({			bindroles: val		});	},	getRolesOptions() {		let options = [];		for(let i = 0; i < this.props.roles.length; i++) {			options.push(<Select.Option key={String(this.props.roles[i].id)}>{this.props.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() {		let departmentArr=this.props.departmentArr||[];		return(			<div className="modal" >                <Modal maskClosable={false} title="管理员详情"                    closable={false} width={1000}                    visible={this.state.visible}                    onOk={this.postData}                    onCancel={this.handleCancel} >                    <Spin spinning={this.state.loading} >                        {this.state.theSwitch ?                         	<div className="modal-box">                            <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 placeholder="选择部门" style={{width:'200px'}}			                            value={this.state.department}			                            onChange={(e) => { this.setState({ department: e }) }}>			                            {		                                    departmentArr.map(function (item) {		                                            return <Select.Option key={item.id} >{item.name}</Select.Option>		                                    })		                                }		                            </Select>                                </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                                            provinceList={this.state.provinceList}                                            provinceOption={this.state.provinceOption}                                            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((c) => {                                                return getProvince(c) + ' '                                            }) : '')}</Tag>                                        })}                                    </div>}*/}                                               				                <Cascader options={citySelect()}  value={this.state.addressSearch} placeholder="选择城市"			    				   onChange={(e,pre) => { this.setState({ addressSearch: e }) }} />	                 			                                               </div>                        </div> : <div className="modal-box">                                <ul className="modal-content clearfix">                                    <li className="list">                                        <span className='modal-text'>名字</span>                                        <span className="modal-det">{this.state.name}</span>                                    </li>                                    <li className="list">                                        <span className='modal-text'>职位</span>                                        <span className="modal-det">{this.state.position}</span>                                    </li>                                    <li className="list">                                        <span className='modal-text'>上级</span>                                        <span className="modal-det">{this.state.adminSelectObj[this.state.superiorId]}</span>                                    </li>                                    <li className="list">                                        <span className='modal-text'>登录账号</span>                                        <span className="modal-det">{this.state.mobile}</span>                                    </li>                                    <li className="list">                                        <span className='modal-text'>邮箱</span>                                        <span className="modal-det">{this.state.email}</span>                                    </li>                                </ul>                                <div>                                    <span className='modal-text' style={{ verticalAlign: 'top' }}>地区</span>                                    <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((c) => {                                                return getProvince(c) + ' '                                            }) : '')}</Tag>                                        })}                                    </div>                                </div>                            </div>}                    </Spin>                </Modal>            </div >		);	}})export default TheModal;
 |