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 || []; 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; }; }); $.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: [], 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 }); }) }, 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) => { 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(); this.loadAdminOwnLocation(); }, componentWillReceiveProps(nextProps) { if (nextProps.show && !this.state.roles.length) { this.loadInitialData(); }; if (!this.state.visible && nextProps.show) { if (nextProps.data.id) { 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> } }, 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 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((item) => { return getProvince(item) + ' ' }) : '')}</Tag> })} </div>} </div> </Modal> </Spin> </div > ); } }) export default TheModal;