user.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import { Form, Radio, Icon, Button, Input, Select, AutoComplete, Spin, Table, Switch, message, DatePicker, Modal, Upload } from 'antd';
  6. import Newuser from "./newUser.jsx"
  7. import './userMangagement.less'
  8. import { techAuditStatusList, station, post } from '../../../dataDic.js';
  9. import {getPost,getStation} from '../../../tools.js';
  10. const User = Form.create()(React.createClass({
  11. loadData(pageNo) {
  12. this.state.data = [];
  13. this.setState({
  14. userDetaile:false,
  15. loading: true
  16. });
  17. $.ajax({
  18. method: "get",
  19. dataType: "json",
  20. crossDomain: false,
  21. url: globalConfig.context + '/api/admin/superviser/adminList',
  22. data: {
  23. pageNo: pageNo || 1,
  24. pageSize: this.state.pagination.pageSize,
  25. name: this.state.userNameSearch,
  26. departmentId: this.state.organizationSearch,
  27. rid: this.state.rolesSearch,
  28. duty: this.state.postSearch,
  29. position: this.state.stationSearch,
  30. status: this.state.statusSeach,
  31. mobile: this.state.signNameSearch,
  32. superiorId: this.state.theTypes
  33. },
  34. success: function(data) {
  35. let theArr = [];
  36. if(!data.data || !data.data.list) {
  37. if(data.error && data.error.length) {
  38. message.warning(data.error[0].message);
  39. };
  40. } else {
  41. for(let i = 0; i < data.data.list.length; i++) {
  42. let thisdata = data.data.list[i];
  43. theArr.push({
  44. key: i,
  45. id: thisdata.id,
  46. mobile: thisdata.mobile,
  47. name: thisdata.name,
  48. email: thisdata.email,
  49. createTime: thisdata.createTime,
  50. province: thisdata.province,
  51. position: thisdata.position,
  52. superior: thisdata.superior, //上级名称
  53. superiorId: thisdata.superiorId, //上级Id
  54. duty: thisdata.duty, //职务
  55. status: thisdata.status,
  56. userNo: thisdata.userNo,
  57. departmentName: thisdata.departmentName, //部门名称
  58. departmentId: thisdata.departmentId, //部门id
  59. roles:thisdata.roles[0],
  60. rolesId:thisdata.rolesId
  61. });
  62. };
  63. this.state.pagination.current = data.data.pageNo ? data.data.pageNo : '0';
  64. this.state.pagination.total = data.data.totalCount ? data.data.totalCount : '0';
  65. };
  66. this.setState({
  67. dataSource: theArr,
  68. pagination: this.state.pagination,
  69. selectedRowKeys:[]
  70. });
  71. }.bind(this),
  72. }).always(function() {
  73. this.setState({
  74. loading: false
  75. });
  76. }.bind(this));
  77. },
  78. getInitialState() {
  79. return {
  80. datauser: {},
  81. searchMore: true,
  82. selectedRowKeys: [],
  83. selectedRows: [],
  84. userDetaile: false,
  85. departmentArr: [],
  86. loading: false,
  87. roleArr:[],
  88. pagination: {
  89. defaultCurrent: 1,
  90. defaultPageSize: 10,
  91. showQuickJumper: true,
  92. pageSize: 10,
  93. onChange: function(page) {
  94. this.loadData(page);
  95. }.bind(this),
  96. showTotal: function(total) {
  97. return '共' + total + '条数据';
  98. }
  99. },
  100. columns: [{
  101. title: '用户编号',
  102. dataIndex: 'userNo',
  103. key: 'userNo',
  104. }, {
  105. title: '登录用户名',
  106. dataIndex: 'mobile',
  107. key: 'mobile',
  108. }, {
  109. title: '角色',
  110. dataIndex: 'roles',
  111. key: 'roles',
  112. }, {
  113. title: '用户姓名',
  114. dataIndex: 'name',
  115. key: 'name',
  116. }, {
  117. title: '部门',
  118. dataIndex: 'departmentName',
  119. key: 'departmentName',
  120. }, {
  121. title: '职务',
  122. dataIndex: 'duty',
  123. key: 'duty',
  124. render: text => { return getPost(text) }
  125. },
  126. {
  127. title: '岗位',
  128. dataIndex: 'position',
  129. key: 'position',
  130. render: text => { return getStation(text) }
  131. },
  132. {
  133. title: '上级主管姓名',
  134. dataIndex: 'superior',
  135. key: 'superior',
  136. },
  137. {
  138. title: '状态',
  139. dataIndex: 'status',
  140. key: 'status',
  141. }
  142. ],
  143. dataSource: [],
  144. };
  145. },
  146. componentWillMount() {
  147. this.loadData();
  148. this.departmentList();
  149. this.rolesList();
  150. },
  151. tableRowClick(record, index) {
  152. this.rolesArrS(record)
  153. this.setState({
  154. userDetaile:true,
  155. showDesc: true,
  156. datauser:record
  157. });
  158. },
  159. //新建获取id
  160. addIdS() {
  161. $.ajax({
  162. method: "post",
  163. dataType: "json",
  164. crossDomain: false,
  165. url: globalConfig.context + '/api/admin/superviser/newId',
  166. data: {},
  167. success: function(data) {
  168. this.setState({
  169. addId: data.data
  170. });
  171. }.bind(this),
  172. }).always(function() {
  173. this.setState({
  174. loading: false
  175. });
  176. }.bind(this));
  177. },
  178. //部门
  179. departmentList() {
  180. this.setState({
  181. loading: true
  182. });
  183. $.ajax({
  184. method: "post",
  185. dataType: "json",
  186. crossDomain: false,
  187. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  188. data: {
  189. },
  190. success: function(data) {
  191. let thedata = data.data;
  192. let theArr = [];
  193. if(!thedata) {
  194. if(data.error && data.error.length) {
  195. message.warning(data.error[0].message);
  196. };
  197. thedata = {};
  198. } else {
  199. thedata.map(function(item, index) {
  200. theArr.push({
  201. key: index,
  202. name: item.name,
  203. id: item.id,
  204. depNo: item.depNo
  205. })
  206. })
  207. }
  208. this.setState({
  209. departmentArr: theArr,
  210. })
  211. }.bind(this),
  212. }).always(function() {
  213. this.setState({
  214. loading: false
  215. });
  216. }.bind(this));
  217. },
  218. //修改时获取角色数组
  219. rolesArrS(e) {
  220. $.ajax({
  221. method: "get",
  222. dataType: "json",
  223. crossDomain: false,
  224. url: globalConfig.context + "/api/admin/role",
  225. data: {
  226. uid:e.id
  227. },
  228. success: function(data) {
  229. let thedata = data.data;
  230. let theArr = [];
  231. let theId=[]
  232. if(!thedata) {
  233. if(data.error && data.error.length) {
  234. message.warning(data.error[0].message);
  235. };
  236. thedata = {};
  237. } else {
  238. }
  239. this.setState({
  240. role:thedata
  241. })
  242. }.bind(this),
  243. }).always(function() {
  244. }.bind(this));
  245. },
  246. //角色
  247. rolesList() {
  248. this.setState({
  249. loading: true
  250. });
  251. $.ajax({
  252. method: "get",
  253. dataType: "json",
  254. crossDomain: false,
  255. url: globalConfig.context + "/api/roles",
  256. data: {
  257. },
  258. success: function(data) {
  259. let thedata = data.data;
  260. let theArr = [];
  261. if(!thedata) {
  262. if(data.error && data.error.length) {
  263. message.warning(data.error[0].message);
  264. };
  265. thedata = {};
  266. } else {
  267. thedata.map(function(item, index) {
  268. theArr.push({
  269. key: index,
  270. roleName: item.roleName,
  271. id: item.id,
  272. })
  273. })
  274. }
  275. this.setState({
  276. roleArr: theArr,
  277. })
  278. }.bind(this),
  279. }).always(function() {
  280. this.setState({
  281. loading: false
  282. });
  283. }.bind(this));
  284. },
  285. //锁定
  286. locking() {
  287. let deletedIds;
  288. let statust;
  289. let mobiles;
  290. let names;
  291. let rolesId=[];
  292. for(let idx = 0; idx < this.state.selectedRows.length; idx++) {
  293. let rowItem = this.state.selectedRows[idx];
  294. if(rowItem.id) {
  295. deletedIds=rowItem.id;
  296. statust=rowItem.status;
  297. names=rowItem.name;
  298. mobiles=rowItem.mobile;
  299. rolesId=rowItem.rolesId
  300. };
  301. };
  302. console.log(rolesId)
  303. this.setState({
  304. selectedRowKeys: [],
  305. loading: true
  306. });
  307. $.ajax({
  308. method: "POST",
  309. dataType: "json",
  310. crossDomain: false,
  311. url: globalConfig.context + "/api/admin/superviser/updateAdmin",
  312. data: {
  313. roles:rolesId,
  314. data:JSON.stringify({
  315. id: deletedIds,
  316. status: '锁定',
  317. name: names,
  318. mobile: mobiles,
  319. }),
  320. }
  321. }).done(function(data) {
  322. if(!data.error.length) {
  323. message.success('锁定成功!');
  324. this.setState({
  325. loading: false,
  326. });
  327. } else {
  328. message.warning(data.error[0].message);
  329. };
  330. this.loadData();
  331. }.bind(this));
  332. },
  333. //激活
  334. activation() {
  335. let deletedIds;
  336. let statust;
  337. let mobiles;
  338. let names;
  339. let rolesId=[]
  340. for(let idx = 0; idx < this.state.selectedRows.length; idx++) {
  341. let rowItem = this.state.selectedRows[idx];
  342. if(rowItem.id) {
  343. deletedIds=rowItem.id;
  344. statust=rowItem.status;
  345. names=rowItem.name;
  346. mobiles=rowItem.mobile;
  347. rolesId=rowItem.rolesId
  348. };
  349. };
  350. this.setState({
  351. selectedRowKeys: [],
  352. loading: true
  353. });
  354. $.ajax({
  355. method: "POST",
  356. dataType: "json",
  357. crossDomain: false,
  358. url: globalConfig.context + "/api/admin/superviser/updateAdmin",
  359. data: {
  360. roles:rolesId,
  361. data:JSON.stringify({
  362. id: deletedIds,
  363. status: '正常',
  364. name: names,
  365. mobile: mobiles,
  366. })
  367. }
  368. }).done(function(data) {
  369. if(!data.error.length) {
  370. message.success('激活成功!');
  371. this.setState({
  372. loading: false,
  373. });
  374. } else {
  375. message.warning(data.error[0].message);
  376. };
  377. this.loadData();
  378. }.bind(this));
  379. },
  380. //删除
  381. delectRow() {
  382. let deletedIds;
  383. for(let idx = 0; idx < this.state.selectedRows.length; idx++) {
  384. let rowItem = this.state.selectedRows[idx];
  385. if(rowItem.id) {
  386. deletedIds=rowItem.id;
  387. };
  388. };
  389. this.setState({
  390. selectedRowKeys: [],
  391. loading: true
  392. });
  393. $.ajax({
  394. method: "POST",
  395. dataType: "json",
  396. crossDomain: false,
  397. url: globalConfig.context + "/api/admin/superviser/deleteById",
  398. data: {
  399. id: deletedIds,
  400. }
  401. }).done(function(data) {
  402. if(!data.error.length) {
  403. message.success('删除成功!');
  404. this.setState({
  405. loading: false,
  406. });
  407. } else {
  408. message.warning(data.error[0].message);
  409. };
  410. this.loadData();
  411. }.bind(this));
  412. },
  413. addClick() {
  414. this.addIdS()
  415. this.state.userDetaile = false;
  416. this.setState({
  417. showDesc: true
  418. });
  419. },
  420. closeDesc(e, s) {
  421. this.state.showDesc = e;
  422. if(s) {
  423. this.loadData();
  424. };
  425. },
  426. search() {
  427. this.state.userDetaile = false
  428. this.loadData();
  429. },
  430. reset() {
  431. this.state.userNameSearch = '';
  432. this.state.organizationSearch = undefined;
  433. this.state.rolesSearch = undefined;
  434. this.state.postSearch = undefined;
  435. this.state.stationSearch = undefined;
  436. this.state.statusSeach = undefined;
  437. this.state.signNameSearch = '';
  438. this.state.mobileSearch = '';
  439. this.state.auto = '';
  440. this.state.theTypes='';
  441. this.loadData();
  442. },
  443. searchSwitch() {
  444. this.setState({
  445. searchMore: !this.state.searchMore
  446. });
  447. },
  448. //主管初始加载(自动补全)
  449. supervisor(e) {
  450. $.ajax({
  451. method: "post",
  452. dataType: "json",
  453. crossDomain: false,
  454. url: globalConfig.context + "/api/admin/organization/selectName",
  455. data: {
  456. name: e
  457. },
  458. success: function(data) {
  459. let thedata = data.data;
  460. if(!thedata) {
  461. if(data.error && data.error.length) {
  462. message.warning(data.error[0].message);
  463. };
  464. thedata = {};
  465. };
  466. this.setState({
  467. customerArr: thedata,
  468. });
  469. }.bind(this),
  470. }).always(function() {
  471. this.setState({
  472. loading: false
  473. });
  474. }.bind(this));
  475. },
  476. //上级主管输入框失去焦点是判断客户是否存在
  477. selectAuto(value, options) {
  478. this.setState({
  479. auto: value
  480. })
  481. },
  482. blurChange(e) {
  483. let theType = '';
  484. let contactLists = this.state.customerArr || [];
  485. if(e) {
  486. contactLists.map(function(item) {
  487. if(item.name == e.toString()) {
  488. theType = item.id;
  489. }
  490. });
  491. }
  492. this.setState({
  493. theTypes: theType
  494. })
  495. },
  496. //值改变时请求客户名称
  497. httpChange(e) {
  498. if(e.length >= 1) {
  499. this.supervisor(e);
  500. }
  501. this.setState({
  502. auto: e
  503. })
  504. },
  505. render() {
  506. const rowSelection = {
  507. selectedRowKeys: this.state.selectedRowKeys,
  508. onChange: (selectedRowKeys, selectedRows) => {
  509. this.setState({
  510. selectedRows: selectedRows.slice(-1),
  511. selectedRowKeys: selectedRowKeys.slice(-1)
  512. });
  513. },
  514. onSelectAll: (selected, selectedRows, changeRows) => {
  515. this.setState({
  516. selectedRowKeys: []
  517. })
  518. },
  519. };
  520. const dataSources = this.state.customerArr || [];
  521. const options = dataSources.map((group, index) =>
  522. <Select.Option key={index} value={group.name}>{group.name}</Select.Option>
  523. )
  524. const hasSelected = this.state.selectedRowKeys.length > 0;
  525. const { RangePicker } = DatePicker;
  526. let departmentArr = this.state.departmentArr || [];
  527. let roleArr = this.state.roleArr || [];
  528. return(
  529. <div className="user-content" >
  530. <div className="content-title">
  531. <div className="user-search">
  532. <Input placeholder="用户姓名" style={{width:'150px'}}
  533. value={this.state.userNameSearch}
  534. onChange={(e) => { this.setState({ userNameSearch: e.target.value }); }} />
  535. <Select placeholder="部门"
  536. style={{ width: 160 }}
  537. value={this.state.organizationSearch}
  538. onChange={(e) => { this.setState({ organizationSearch: e }) }}>
  539. {
  540. departmentArr.map(function (item) {
  541. return <Select.Option key={item.id} >{item.name}</Select.Option>
  542. })
  543. }
  544. </Select>
  545. <Select placeholder="角色"
  546. style={{ width: 160 }}
  547. value={this.state.rolesSearch}
  548. onChange={(e) => { this.setState({ rolesSearch: e }) }}>
  549. {
  550. roleArr.map(function (item) {
  551. return <Select.Option key={item.id} >{item.roleName}</Select.Option>
  552. })
  553. }
  554. </Select>
  555. <Button type="primary" onClick={this.search}>搜索</Button>
  556. <Button onClick={this.reset}>重置</Button>
  557. <Button style={{ background: "red", border: "none", color: "#fff" }}
  558. disabled={!hasSelected}
  559. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  560. <Button style={{ background: "#333333", border: "none", color: "#fff" }}
  561. disabled={!hasSelected}
  562. onClick={this.locking}>锁定<Icon type="lock" /></Button>
  563. <Button style={{ background: "green", border: "none", color: "#fff" }}
  564. disabled={!hasSelected}
  565. onClick={this.activation}>激活<Icon type="unlock" /></Button>
  566. <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  567. <Button type="primary" className="addButton" onClick={this.addClick} >新增用户<Icon type="user" /></Button>
  568. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  569. <Select placeholder="职务"
  570. style={{ width: 160 }}
  571. value={this.state.postSearch}
  572. onChange={(e) => { this.setState({ postSearch: e }) }}>
  573. {
  574. post.map(function (item) {
  575. return <Select.Option key={item.value} >{item.key}</Select.Option>
  576. })
  577. }
  578. </Select>
  579. <Select placeholder="岗位"
  580. style={{ width: 160 }}
  581. value={this.state.stationSearch}
  582. onChange={(e) => { this.setState({ stationSearch: e }) }}>
  583. {
  584. station.map(function (item) {
  585. return <Select.Option key={item.value} >{item.key}</Select.Option>
  586. })
  587. }
  588. </Select>
  589. <Select placeholder="状态"
  590. style={{ width: 160 }}
  591. value={this.state.statusSeach}
  592. onChange={(e) => { this.setState({ statusSeach: e }) }}>
  593. <Select.Option value="正常" >正常</Select.Option>
  594. <Select.Option value="锁定" >锁定</Select.Option>
  595. </Select>
  596. <Input placeholder="登录用户名" style={{width:'150px'}}
  597. value={this.state.signNameSearch}
  598. onChange={(e) => { this.setState({ signNameSearch: e.target.value }); }} />
  599. <AutoComplete
  600. className="certain-category-search"
  601. dropdownClassName="certain-category-search-dropdown"
  602. dropdownMatchSelectWidth={false}
  603. dropdownStyle={{ width: 200 }}
  604. size="large"
  605. style={{ width: '150px',height:'28px' ,marginLeft:'10px'}}
  606. dataSource={options}
  607. placeholder="输入上级主管名字"
  608. value={this.state.auto}
  609. onChange={this.httpChange}
  610. filterOption={true}
  611. onBlur={this.blurChange}
  612. onSelect={this.selectAuto}
  613. >
  614. <Input/>
  615. </AutoComplete>
  616. </div>
  617. </div>
  618. <div className="patent-table">
  619. <Spin spinning={this.state.loading}>
  620. <Table columns={this.state.columns}
  621. dataSource={this.state.dataSource}
  622. rowSelection={rowSelection}
  623. pagination={this.state.pagination}
  624. onRowClick={this.tableRowClick} />
  625. </Spin>
  626. </div>
  627. <Newuser
  628. role={this.state.role}
  629. addId={this.state.addId}
  630. roleArr={this.state.roleArr}
  631. departmentArr={this.state.departmentArr}
  632. userDetaile={this.state.userDetaile}
  633. datauser={this.state.datauser}
  634. showDesc={this.state.showDesc}
  635. closeDesc={this.closeDesc} />
  636. </div >
  637. </div>
  638. );
  639. }
  640. }));
  641. export default User;