|
@@ -1,25 +1,130 @@
|
|
|
import React from 'react';
|
|
|
-import { Modal, Input, Spin, Switch, Select, message, Popconfirm, Button, Cascader } from 'antd';
|
|
|
-import { citySelect } from '../../NewDicProvinceList.js';
|
|
|
+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';
|
|
|
|
|
|
-export default class TheModal extends React.Component {
|
|
|
+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/updateAdmin" : globalConfig.context + "/api/admin/insertAdmin",
|
|
|
+ url: this.state.id ? globalConfig.context + "/api/admin/supervise/updateAdmin" : globalConfig.context + "/api/admin/supervise/insertAdmin",
|
|
|
data: {
|
|
|
- 'id': this.state.id,
|
|
|
- 'name': this.state.name,
|
|
|
- 'position': this.state.position,
|
|
|
- 'email': this.state.email,
|
|
|
- 'mobile': this.state.mobile,
|
|
|
- 'province': this.state.province,
|
|
|
+ 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) => {
|
|
@@ -39,26 +144,28 @@ export default class TheModal extends React.Component {
|
|
|
})
|
|
|
})
|
|
|
this.props.postData;
|
|
|
- }
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.state = {
|
|
|
+ },
|
|
|
+ getInitialState() {
|
|
|
+ return {
|
|
|
name: '',
|
|
|
- position: '',
|
|
|
email: '',
|
|
|
mobile: '',
|
|
|
roles: [],
|
|
|
visible: false,
|
|
|
loading: false,
|
|
|
- bindroles: []
|
|
|
+ bindroles: [],
|
|
|
+ locations: [],
|
|
|
+ cityOption: [],
|
|
|
+ provinceList: [],
|
|
|
+ locationsObj: {}
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
handleCancel() {
|
|
|
this.setState({
|
|
|
visible: false,
|
|
|
});
|
|
|
this.props.handleReturn(false, false);
|
|
|
- }
|
|
|
+ },
|
|
|
loadInitialData() {
|
|
|
this.setState({
|
|
|
loading: true
|
|
@@ -72,7 +179,33 @@ export default class TheModal extends React.Component {
|
|
|
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
|
|
@@ -89,32 +222,64 @@ export default class TheModal extends React.Component {
|
|
|
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 : '',
|
|
|
- position: nextProps.data ? nextProps.data.position : '',
|
|
|
email: nextProps.data ? nextProps.data.email : '',
|
|
|
mobile: nextProps.data ? nextProps.data.mobile : '',
|
|
|
- province: nextProps.data ? nextProps.data.province : ''
|
|
|
+ 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/resetPwd",
|
|
|
+ url: globalConfig.context + "/api/admin/supervise/resetPwd",
|
|
|
dataType: "json",
|
|
|
data: {
|
|
|
id: this.state.id
|
|
@@ -130,27 +295,26 @@ export default class TheModal extends React.Component {
|
|
|
loading: false
|
|
|
})
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
getRolesSelection() {
|
|
|
if (!this.state.id) {
|
|
|
return <li></li>
|
|
|
} else if (this.state.id != '1') {
|
|
|
- return <li>
|
|
|
+ return <li className="list">
|
|
|
<span className='modal-text'>角色</span>
|
|
|
<Select
|
|
|
multiple
|
|
|
style={{ width: '60%' }}
|
|
|
placeholder="选择用户关联角色"
|
|
|
value={this.state.bindroles}
|
|
|
- onChange={this.bindRoles.bind(this)}
|
|
|
- >
|
|
|
+ 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>
|
|
@@ -177,69 +341,115 @@ export default class TheModal extends React.Component {
|
|
|
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}
|
|
|
+ closable={false} width={1000}
|
|
|
visible={this.state.visible}
|
|
|
- onOk={this.postData.bind(this)}
|
|
|
- onCancel={this.handleCancel.bind(this)}
|
|
|
- >
|
|
|
- <ul className="modal-content">
|
|
|
- <li>
|
|
|
+ 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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
- {this.getProvinceSelection()}
|
|
|
- <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()}
|
|
|
- <li>
|
|
|
+ {this.state.id ? <li className="list">
|
|
|
<span></span>
|
|
|
- {this.state.id ?
|
|
|
- <Popconfirm
|
|
|
- title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}
|
|
|
- onConfirm={this.resetPwd.bind(this)}
|
|
|
- okText="确认"
|
|
|
- cancelText="取消"
|
|
|
- placement="topLeft">
|
|
|
- <Button>重置密码</Button>
|
|
|
- </Popconfirm>
|
|
|
- : <span></span>}
|
|
|
- </li>
|
|
|
+ <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;
|