modal.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. import React from 'react';
  2. import { Tag, Modal, Input, Spin, Switch, Select, message, Popconfirm, Button, Cascader, Icon } from 'antd';
  3. import { provinceSelect, provinceList, getProvince } from '../../../NewDicProvinceList.js';
  4. import { companySearch } from '../../../tools.js';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. import {customerStatus} from '../../../dataDic.js'
  8. const ProvinceAdd = React.createClass({
  9. getInitialState() {
  10. return {
  11. cityOption: [],
  12. theProvince: [],
  13. citys: [],
  14. departmentArr:[]
  15. };
  16. },
  17. componentWillMount() {
  18. let theArr = [];
  19. this.state.theProvince = [this.props.locations[this.props.index].province];
  20. this.state.citys = this.props.locations[this.props.index].city || [];
  21. this.props.provinceList.map((item) => {
  22. if(item.id == this.props.locations[this.props.index].province) {
  23. item.cityList.map((city) => {
  24. theArr.push({
  25. value: city.id,
  26. label: city.name
  27. })
  28. });
  29. };
  30. });
  31. this.state.cityOption = theArr;
  32. },
  33. componentWillReceiveProps(nextProps) {
  34. let theArr = [];
  35. this.state.theProvince = [nextProps.locations[nextProps.index].province];
  36. this.state.citys = nextProps.locations[nextProps.index].city || [];
  37. this.props.provinceList.map((item) => {
  38. if(item.id == nextProps.locations[nextProps.index].province) {
  39. item.cityList.map((city) => {
  40. theArr.push({
  41. value: city.id,
  42. label: city.name
  43. })
  44. });
  45. };
  46. });
  47. this.state.cityOption = theArr;
  48. },
  49. render() {
  50. return(
  51. <div style={{ display: 'inline-block', marginRight: '20px', marginBottom: '10px' }}>
  52. <Cascader placeholder="选择省份"
  53. style={{ width: 80, marginRight: '20px', verticalAlign: 'middle' }}
  54. options={this.props.provinceOption}
  55. value={this.state.theProvince}
  56. showSearch
  57. filterOption={companySearch}
  58. onChange={(e) => {
  59. let bool = true, theArr = [], _me = this;;
  60. this.props.locations.map((item, i) => {
  61. if (item.province == e[0] && this.props.index != i) {
  62. bool = false;
  63. };
  64. });
  65. if (!bool) {
  66. message.warning('请选择一个其他省份');
  67. this.setState({
  68. theProvince: undefined,
  69. citys: undefined,
  70. cityOption: []
  71. });
  72. return;
  73. };
  74. this.props.provinceList.map((item) => {
  75. if (item.id == e) {
  76. item.cityList.map((city) => {
  77. theArr.push({
  78. value: city.id,
  79. label: city.name
  80. })
  81. });
  82. };
  83. });
  84. this.props.getLocations(this.props.index, e[0])
  85. this.setState({
  86. theProvince: e,
  87. citys: undefined,
  88. cityOption: theArr,
  89. })
  90. }} />
  91. <Select style={{ verticalAlign: 'middle', width: 584 }}
  92. placeholder="选择城市" notFoundContent="请先选择一个省份" multiple={true}
  93. showSearch
  94. filterOption={companySearch}
  95. value={this.state.citys}
  96. onChange={(e) => { this.setState({ citys: e }) }}
  97. onBlur={() => {
  98. this.props.getLocations(this.props.index, this.state.theProvince ? this.state.theProvince[0] : null, this.state.citys)
  99. }}>
  100. {this.state.cityOption.map((item) => {
  101. return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
  102. })}
  103. </Select>
  104. <Button style={{ verticalAlign: 'middle', marginLeft: '20px' }} type="dashed" size="small"
  105. onClick={() => { this.props.delLocations(this.props.index) }}>
  106. <Icon type="minus" />
  107. </Button>
  108. </div>
  109. );
  110. },
  111. })
  112. const TheModal = React.createClass({
  113. postData() {
  114. this.setState({
  115. loading: true
  116. });
  117. let theArr = [];
  118. let theLocations = this.state.locations.concat();
  119. theLocations.map((item, i) => {
  120. if(item.province) {
  121. theArr.push(item);
  122. };
  123. });
  124. theArr.map((item) => {
  125. if(item.city && item.city.length) {
  126. item.city = item.city.join(',');
  127. } else {
  128. item.city = null;
  129. };
  130. });
  131. let departmentIds='';
  132. if(!this.state.department){
  133. departmentIds=''
  134. }else if((this.state.department).length>30){
  135. departmentIds=this.state.department
  136. }else{
  137. departmentIds=this.state.departmentId
  138. }
  139. $.ajax({
  140. type: "POST",
  141. url: this.state.id ? globalConfig.context + "/api/admin/supervise/updateAdmin" : globalConfig.context + "/api/admin/supervise/insertAdmin",
  142. data: {
  143. data: JSON.stringify({
  144. 'id': this.state.id,
  145. 'name': this.state.name,
  146. 'email': this.state.email,
  147. 'mobile': this.state.mobile,
  148. 'position': this.state.position,
  149. 'locations': theArr,
  150. 'departmentId':departmentIds,
  151. 'superiorId': this.state.superiorId
  152. }),
  153. 'roles': this.state.bindroles
  154. }
  155. }).done((res) => {
  156. if(res.error.length) {
  157. message.error(res.error[0].message);
  158. } else {
  159. message.success("保存成功");
  160. this.setState({
  161. visible: false,
  162. });
  163. this.props.handleReturn(false, true);
  164. //第二个参数表示保存
  165. }
  166. }).always(() => {
  167. this.setState({
  168. loading: false
  169. })
  170. })
  171. this.props.postData;
  172. },
  173. getInitialState() {
  174. return {
  175. name: '',
  176. email: '',
  177. mobile: '',
  178. roles: [],
  179. visible: false,
  180. loading: false,
  181. theSwitch: true,
  182. bindroles: [],
  183. locations: [],
  184. cityOption: [],
  185. locationsObj: {},
  186. adminSelectObj: {}
  187. }
  188. },
  189. handleCancel() {
  190. this.setState({
  191. visible: false,
  192. locations: []
  193. });
  194. this.props.handleReturn(false, false);
  195. },
  196. loadAdminSelectList() {
  197. this.setState({
  198. loading: true
  199. });
  200. $.ajax({
  201. url: globalConfig.context + '/api/admin/supervise/adminSelectList',
  202. cache: false
  203. }).done((data) => {
  204. if(!data.data) {
  205. if(data.error && data.error.length) {
  206. message.warning(data.error[0].message);
  207. return;
  208. };
  209. };
  210. let theArr = [],
  211. i;
  212. for(i in data.data) {
  213. theArr.push(
  214. <Select.Option key={i}>{data.data[i]}</Select.Option>
  215. )
  216. };
  217. this.setState({
  218. adminSelectOption: theArr,
  219. adminSelectObj: data.data,
  220. loading: false
  221. });
  222. })
  223. },
  224. loadAdminOwnLocation() {
  225. this.setState({
  226. loading: true
  227. });
  228. $.ajax({
  229. url: globalConfig.context + '/api/admin/supervise/adminOwnLocation',
  230. cache: false
  231. }).done((data) => {
  232. if(!data.data) {
  233. if(data.error && data.error.length) {
  234. message.warning(data.error[0].message);
  235. return;
  236. };
  237. };
  238. let theArr = [],
  239. theList = [];
  240. if((typeof(data.data)).indexOf('string') == -1) {
  241. data.data.map((item) => {
  242. theArr.push({
  243. value: item.province,
  244. label: getProvince(item.province)
  245. });
  246. let cityList = [];
  247. if(item.city) {
  248. item.city.split(',').map((c) => {
  249. cityList.push({
  250. id: Number(c),
  251. name: getProvince(c)
  252. });
  253. });
  254. };
  255. theList.push({
  256. id: item.province,
  257. name: getProvince(item.province),
  258. cityList: cityList.length ? cityList : null
  259. });
  260. });
  261. } else {
  262. theArr = provinceSelect();
  263. theList = provinceList;
  264. }
  265. this.setState({
  266. provinceOption: theArr,
  267. provinceList: theList,
  268. loading: false
  269. });
  270. })
  271. },
  272. loadBindRoles(uid) {
  273. this.setState({
  274. loading: true
  275. });
  276. $.ajax({
  277. url: globalConfig.context + '/api/admin/role',
  278. cache: false,
  279. data: {
  280. "uid": uid
  281. }
  282. }).done((data) => {
  283. if(!data.data) {
  284. if(data.error && data.error.length) {
  285. message.warning(data.error[0].message);
  286. };
  287. return;
  288. } else if(data.data) {
  289. this.state.theSwitch = true;
  290. for(let i = 0; i < data.data.length; i++) {
  291. for(let n = 0; n < this.props.currentRoles.length; n++) {
  292. if(data.data[i] === this.props.currentRoles[n] && uid != 1) {
  293. this.state.theSwitch = false;
  294. }
  295. }
  296. };
  297. };
  298. this.setState({
  299. bindroles: data.data || [],
  300. theSwitch: this.state.theSwitch,
  301. loading: false
  302. });
  303. })
  304. },
  305. loadLocations(id) {
  306. this.setState({
  307. loading: true
  308. });
  309. $.ajax({
  310. url: globalConfig.context + '/api/admin/supervise/adminDetailLocation',
  311. cache: false,
  312. data: {
  313. "id": id
  314. }
  315. }).done((data) => {
  316. if(!data.data) {
  317. if(data.error && data.error.length) {
  318. message.warning(data.error[0].message);
  319. return;
  320. };
  321. };
  322. data.data.map((item) => {
  323. if(item.city) {
  324. item.city = item.city.split(',');
  325. }
  326. });
  327. this.setState({
  328. locations: data.data,
  329. loading: false
  330. });
  331. })
  332. },
  333. componentWillMount() {
  334. this.loadAdminSelectList();
  335. this.loadAdminOwnLocation();
  336. },
  337. componentWillReceiveProps(nextProps) {
  338. if(!this.state.visible && nextProps.show) {
  339. if(nextProps.data.id) {
  340. this.loadBindRoles(nextProps.data.id);
  341. this.loadLocations(nextProps.data.id);
  342. }
  343. };
  344. let nextState = {
  345. visible: nextProps.show,
  346. id: nextProps.data ? nextProps.data.id : '',
  347. name: nextProps.data ? nextProps.data.name : '',
  348. email: nextProps.data ? nextProps.data.email : '',
  349. mobile: nextProps.data ? nextProps.data.mobile : '',
  350. position: nextProps.data ? nextProps.data.position : '',
  351. department: nextProps.data ? nextProps.data.departmentName : '',
  352. departmentId:nextProps.data ? nextProps.data.departmentId : '',
  353. superiorId: nextProps.data ? nextProps.data.superiorId : '',
  354. };
  355. this.setState(nextState)
  356. },
  357. resetPwd(e) {
  358. this.setState({
  359. loading: true
  360. })
  361. $.ajax({
  362. type: 'post',
  363. url: globalConfig.context + "/api/admin/supervise/resetPwd",
  364. dataType: "json",
  365. data: {
  366. id: this.state.id
  367. }
  368. }).done((res) => {
  369. if(res.error && res.error.length) {
  370. message.error(res.error[0].message);
  371. } else {
  372. message.success("密码重置成功");
  373. }
  374. }).always(() => {
  375. this.setState({
  376. loading: false
  377. })
  378. });
  379. },
  380. getRolesSelection() {
  381. if(!this.state.id) {
  382. return <li></li>
  383. } else if(this.state.id != '1') {
  384. return <li className="list">
  385. <span className='modal-text'>角色</span>
  386. <Select
  387. multiple
  388. style={{ width: '60%' }}
  389. placeholder="选择用户关联角色"
  390. value={this.state.bindroles}
  391. onChange={this.bindRoles} >
  392. {this.getRolesOptions()}
  393. </Select>
  394. </li>
  395. } else if(this.state.id == "1") {
  396. return <li><span className='modal-text'>角色</span><span style={{width:'150px'}}>系统管理员</span></li>
  397. }
  398. },
  399. bindRoles(val) {
  400. this.setState({
  401. bindroles: val
  402. });
  403. },
  404. getRolesOptions() {
  405. let options = [];
  406. for(let i = 0; i < this.props.roles.length; i++) {
  407. options.push(<Select.Option key={String(this.props.roles[i].id)}>{this.props.roles[i].roleName}</Select.Option>);
  408. }
  409. return options;
  410. },
  411. getLocations(index, p, c) {
  412. this.state.locations.map((item, i) => {
  413. if(index == i) {
  414. item.province = p;
  415. item.city = c || [];
  416. };
  417. });
  418. },
  419. delLocations(index) {
  420. this.state.locations.splice(index, 1);
  421. this.setState({ locations: this.state.locations });
  422. },
  423. provinceAdd() {
  424. this.state.locations.push({
  425. province: null,
  426. city: null
  427. });
  428. this.setState({ locations: this.state.locations });
  429. },
  430. render() {
  431. let departmentArr=this.props.departmentArr||[];
  432. return(
  433. <div className="modal" >
  434. <Modal maskClosable={false} title="管理员详情"
  435. closable={false} width={1000}
  436. visible={this.state.visible}
  437. onOk={this.postData}
  438. onCancel={this.handleCancel} >
  439. <Spin spinning={this.state.loading} >
  440. {this.state.theSwitch ? <div className="modal-box">
  441. <ul className="modal-content clearfix">
  442. <li className="list">
  443. <span className='modal-text'>名字</span>
  444. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  445. </li>
  446. <li className="list">
  447. <span className='modal-text'>职位</span>
  448. <Input value={this.state.position} onChange={(e) => { this.state.position = e.target.value; this.setState({ position: this.state.position }); }} />
  449. </li>
  450. <li className="list">
  451. <span className='modal-text'>部门</span>
  452. <Select placeholder="选择部门" style={{width:'200px'}}
  453. value={this.state.department}
  454. onChange={(e) => { this.setState({ department: e }) }}>
  455. {
  456. departmentArr.map(function (item) {
  457. return <Select.Option key={item.id} >{item.name}</Select.Option>
  458. })
  459. }
  460. </Select>
  461. </li>
  462. <li className="list">
  463. <span className='modal-text'>上级</span>
  464. <Select style={{ verticalAlign: 'middle', width: 200 }}
  465. placeholder="选择一个上级" notFoundContent="没有获取到管理员列表"
  466. showSearch
  467. filterOption={companySearch}
  468. value={this.state.superiorId}
  469. onChange={(e) => { this.setState({ superiorId: e }) }} >
  470. {this.state.adminSelectOption}
  471. </Select>
  472. </li>
  473. <li className="list">
  474. <span className='modal-text'>登录账号</span>
  475. <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
  476. </li>
  477. <li className="list">
  478. <span className='modal-text'>邮箱</span>
  479. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  480. </li>
  481. {this.getRolesSelection()}
  482. {this.state.id ? <li className="list">
  483. <span></span>
  484. <Popconfirm
  485. title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}
  486. onConfirm={this.resetPwd}
  487. okText="确认"
  488. cancelText="取消"
  489. placement="topLeft">
  490. <Button>重置密码</Button>
  491. </Popconfirm>
  492. </li> : <li></li>}
  493. </ul>
  494. <div>
  495. <span className='modal-text' style={{ verticalAlign: 'top' }}>地区</span>
  496. {window.showPermissionList && window.showRoleList ? <div style={{ display: 'inline-block', width: '88%' }}>
  497. {this.state.locations.map((item, i) => {
  498. return <ProvinceAdd
  499. provinceList={this.state.provinceList}
  500. provinceOption={this.state.provinceOption}
  501. getLocations={this.getLocations}
  502. delLocations={this.delLocations}
  503. locations={this.state.locations}
  504. index={i} key={i} />
  505. })}
  506. <Button style={{ verticalAlign: 'middle' }} type="dashed" size="small"
  507. onClick={this.provinceAdd}>
  508. <Icon type="plus" />
  509. </Button>
  510. </div> : <div style={{ display: 'inline-block', width: '88%' }}>
  511. {this.state.locations.map((item, i) => {
  512. return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((c) => {
  513. return getProvince(c) + ' '
  514. }) : '')}</Tag>
  515. })}
  516. </div>}
  517. </div>
  518. </div> : <div className="modal-box">
  519. <ul className="modal-content clearfix">
  520. <li className="list">
  521. <span className='modal-text'>名字</span>
  522. <span className="modal-det">{this.state.name}</span>
  523. </li>
  524. <li className="list">
  525. <span className='modal-text'>职位</span>
  526. <span className="modal-det">{this.state.position}</span>
  527. </li>
  528. <li className="list">
  529. <span className='modal-text'>上级</span>
  530. <span className="modal-det">{this.state.adminSelectObj[this.state.superiorId]}</span>
  531. </li>
  532. <li className="list">
  533. <span className='modal-text'>登录账号</span>
  534. <span className="modal-det">{this.state.mobile}</span>
  535. </li>
  536. <li className="list">
  537. <span className='modal-text'>邮箱</span>
  538. <span className="modal-det">{this.state.email}</span>
  539. </li>
  540. </ul>
  541. <div>
  542. <span className='modal-text' style={{ verticalAlign: 'top' }}>地区</span>
  543. <div style={{ display: 'inline-block', width: '88%' }}>
  544. {this.state.locations.map((item, i) => {
  545. return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((c) => {
  546. return getProvince(c) + ' '
  547. }) : '')}</Tag>
  548. })}
  549. </div>
  550. </div>
  551. </div>}
  552. </Spin>
  553. </Modal>
  554. </div >
  555. );
  556. }
  557. })
  558. export default TheModal;