kede-client/js/component/manageCenter/set/userManagement/modal.jsx

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;