userProcessing.jsx 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  1. import React,{Component} from "react";
  2. import {AutoComplete, Button, Form, Icon, Input, message, Modal, Popconfirm, Select, Spin} from "antd";
  3. import {cityArr, post, station} from "../../../dataDic";
  4. import $ from "jquery/src/ajax";
  5. import {splitUrl} from "../../../tools";
  6. import moment from "moment";
  7. import ImgList from "../../../common/imgList";
  8. class PicturesWall extends Component{
  9. constructor(props) {
  10. super(props);
  11. this.state={
  12. previewVisible: false,
  13. previewImage: '',
  14. fileList: [],
  15. role:[],
  16. district:[],
  17. cityOption:[],
  18. }
  19. }
  20. handleCancel() {
  21. this.setState({ previewVisible: false })
  22. }
  23. handlePreview(file) {
  24. this.setState({
  25. previewImage: file.url || file.thumbUrl,
  26. previewVisible: true,
  27. });
  28. }
  29. handleChange(info) {
  30. let fileList = info.fileList;
  31. this.setState({ fileList });
  32. this.props.fileList(fileList);
  33. }
  34. componentWillReceiveProps(nextProps) {
  35. this.state.fileList = nextProps.pictureUrl;
  36. }
  37. render() {
  38. const { fileList } = this.state;
  39. return (
  40. <ImgList
  41. domId={this.props.domId}
  42. uploadConfig={{
  43. action:globalConfig.context + "/api/admin/superviser/uploadAdminImg",
  44. data:{ 'sign': this.props.pictureSign },
  45. multiple:true,
  46. listType:"picture-card",
  47. }}
  48. onChange={(infor)=>{
  49. this.handleChange(infor)
  50. }}
  51. fileList={fileList}
  52. />
  53. );
  54. }
  55. }
  56. class UserProcessing extends Component{
  57. constructor(props) {
  58. super(props);
  59. this.state={
  60. orgCodeUrl:[],
  61. loading: false,
  62. loaduser: {},
  63. visible:false,
  64. datauser:[],
  65. role:[],
  66. roleArr:[],
  67. departmentArr:[],
  68. addId:'',
  69. customerArr:[],
  70. }
  71. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  72. this.handleSubmit = this.handleSubmit.bind(this);
  73. this.httpChange = this.httpChange.bind(this);
  74. this.blurChange = this.blurChange.bind(this);
  75. this.selectAuto = this.selectAuto.bind(this);
  76. this.resetPwd = this.resetPwd.bind(this);
  77. }
  78. //新建获取id
  79. addIdS() {
  80. $.ajax({
  81. method: "get",
  82. dataType: "json",
  83. crossDomain: false,
  84. url: globalConfig.context + '/api/admin/superviser/newId',
  85. data: {},
  86. success: function(data) {
  87. this.setState({
  88. id: data.data
  89. });
  90. }.bind(this),
  91. }).always(function() {
  92. this.setState({
  93. loading: false
  94. });
  95. }.bind(this));
  96. }
  97. handleSubmit(e) {
  98. e.preventDefault();
  99. this.props.inspect(()=>{
  100. if(!this.state.role || this.state.role.length === 0){
  101. message.warning('请选择角色');
  102. return false;
  103. };
  104. if(!this.state.status&&this.props.userDetaile){
  105. message.warning('请选择角色状态');
  106. return false;
  107. };
  108. if(window.adminData.isSuperAdmin){
  109. if(!this.state.departmentId){
  110. message.warning('请选择组织部门');
  111. return false;
  112. };
  113. }
  114. if(!this.state.theTypes&&!this.state.superiorId){
  115. message.warning('请输入正确的上级主管');
  116. return false;
  117. };
  118. if(this.state.contactMobile){
  119. if(!(/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile))){
  120. message.warning("不是完整的11位手机号或者正确的手机号前七位");
  121. this.setState({
  122. loading: false
  123. });
  124. return false;
  125. }
  126. }
  127. let theorgCodeUrl = [];
  128. if (this.state.orgCodeUrl.length) {
  129. let picArr = [];
  130. this.state.orgCodeUrl.map(function (item) {
  131. if ( item.response && item.response.data && item.response.data.length ){
  132. picArr.push(item.response.data);
  133. }
  134. });
  135. theorgCodeUrl = picArr.join(",");
  136. };
  137. let api = this.props.userDetaile?"/api/admin/superviser/updateAdmin":'/api/admin/superviser/insertAdmin'
  138. this.setState({
  139. loading: true
  140. });
  141. $.ajax({
  142. method: "POST",
  143. dataType: "json",
  144. crossDomain: false,
  145. url: globalConfig.context + api,
  146. data: {
  147. roles:this.state.role,
  148. data:JSON.stringify({
  149. id:this.state.id?this.state.id:this.props.aid,
  150. mobile:this.state.mobile,
  151. status:this.state.status,
  152. contactMobile:this.state.contactMobile,
  153. name:this.props.name,
  154. departmentId:window.adminData.isSuperAdmin?this.state.departmentId:window.adminData.departmentId,
  155. duty:this.state.duty,
  156. position:this.state.position,//岗位
  157. email:this.state.email,
  158. superiorId:this.state.theTypes?this.state.theTypes:this.state.superiorId,
  159. district:this.state.district,
  160. headPortraitUrl:theorgCodeUrl.length?theorgCodeUrl:'',
  161. entryTime:this.state.selTime
  162. })
  163. }
  164. }).done(function (data) {
  165. this.setState({
  166. loading: false
  167. });
  168. if (!data.error.length) {
  169. if(this.props.userDetaile){
  170. this.props.onPreservation(this.props.aid);
  171. }else{
  172. this.props.onPreservation(data.data.id);
  173. }
  174. } else {
  175. message.warning(data.error[0].message);
  176. }
  177. }.bind(this));
  178. });
  179. }
  180. //主管初始加载(自动补全)
  181. supervisor(e){
  182. $.ajax({
  183. method: "post",
  184. dataType: "json",
  185. crossDomain: false,
  186. url: globalConfig.context + "/api/admin/organization/selectName",
  187. data:{
  188. name:e
  189. },
  190. success: function (data) {
  191. let thedata=data.data;
  192. if (!thedata) {
  193. if (data.error && data.error.length) {
  194. message.warning(data.error[0].message);
  195. };
  196. thedata = {};
  197. };
  198. this.setState({
  199. customerArr:thedata,
  200. });
  201. }.bind(this),
  202. }).always(function () {
  203. this.setState({
  204. loading: false
  205. });
  206. }.bind(this));
  207. }
  208. //上级主管输入框失去焦点是判断客户是否存在
  209. selectAuto(value,options){
  210. this.setState({
  211. superior:value
  212. })
  213. }
  214. blurChange(e){
  215. let theType='';
  216. let contactLists=this.state.customerArr || [];
  217. if (e) {
  218. contactLists.map(function (item) {
  219. if (item.name == e.toString()) {
  220. theType = item.id;
  221. }
  222. });
  223. }
  224. this.setState({
  225. theName:e,
  226. theTypes:theType
  227. })
  228. }
  229. //值改变时请求客户名称
  230. httpChange(e){
  231. if(e.length>=1){
  232. this.supervisor(e);
  233. }
  234. this.setState({
  235. superior:e
  236. })
  237. }
  238. rolesArrS() {
  239. $.ajax({
  240. method: "get",
  241. dataType: "json",
  242. crossDomain: false,
  243. url: globalConfig.context + "/api/admin/role",
  244. data: {
  245. uid: this.props.aid
  246. },
  247. success: function(data) {
  248. let thedata = data.data;
  249. if(data.error && data.error.length) {
  250. message.warning(data.error[0].message);
  251. }else{
  252. this.setState({
  253. role:thedata,
  254. })
  255. }
  256. }.bind(this),
  257. }).always(function() {
  258. }.bind(this));
  259. }
  260. //查看基本详情基本信息
  261. loaduser(aid){
  262. if(aid){
  263. $.ajax({
  264. method: "post",
  265. dataType: "json",
  266. crossDomain: false,
  267. url: globalConfig.context + '/api/admin/superviser/selectAllByid',
  268. data: {
  269. id: aid
  270. },
  271. success: function (data) {
  272. let thisdata = data.data;
  273. if (!thisdata) {
  274. if (data.error && data.error.length) {
  275. message.warning(data.error[0].message);
  276. };
  277. thisdata = {};
  278. };
  279. this.setState({
  280. id: thisdata.id,
  281. mobile: thisdata.mobile,
  282. name: thisdata.name,
  283. email: thisdata.email,
  284. createTime: thisdata.createTime,
  285. district:thisdata.district!=' '?JSON.parse(thisdata.district):undefined,
  286. position: thisdata.position?thisdata.position:undefined,
  287. superior:thisdata.superior,
  288. superiorId: thisdata.superiorId,//上级Id
  289. duty:thisdata.duty?thisdata.duty:undefined,//职务
  290. status:thisdata.status?thisdata.status:undefined,
  291. contactMobile:thisdata.contactMobile?thisdata.contactMobile:undefined,//手机号
  292. departmentId:thisdata.departmentId?thisdata.departmentId:undefined,//部门id
  293. userNo:thisdata.userNo,
  294. orgCodeUrl: thisdata.headPortraitUrl? splitUrl(thisdata.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [],
  295. theTypes:'',
  296. entryTime:thisdata.entryTime?moment(thisdata.entryTime,'YYYY-MM-DD'):undefined,
  297. selTime:thisdata.entryTime
  298. });
  299. }.bind(this),
  300. }).always(function () {
  301. this.setState({
  302. loading: false
  303. });
  304. }.bind(this));
  305. }
  306. }
  307. //重置密码
  308. resetPwd() {
  309. this.setState({
  310. loading: true
  311. })
  312. $.ajax({
  313. type: 'post',
  314. url: globalConfig.context + "/api/admin/superviser/resetPwd",
  315. dataType: "json",
  316. data: {
  317. id: this.props.aid
  318. },
  319. }).done((res) => {
  320. if (res.error && res.error.length) {
  321. message.error(res.error[0].message);
  322. } else {
  323. message.success("密码重置成功");
  324. }
  325. }).always(() => {
  326. this.setState({
  327. loading: false
  328. })
  329. });
  330. }
  331. //入职时间选择
  332. selTime(e,index){
  333. this.setState({
  334. entryTime:e,
  335. selTime:index
  336. })
  337. }
  338. getOrgCodeUrl(e) {
  339. this.setState({ orgCodeUrl: e });
  340. }
  341. componentDidMount() {
  342. if(!this.props.userDetaile){
  343. this.addIdS();
  344. };
  345. this.rolesList();
  346. this.departmentList();
  347. if(this.props.userDetaile && this.props.aid){
  348. this.loaduser(this.props.aid);
  349. this.rolesArrS();
  350. }else{
  351. this.state.name='';
  352. this.state.mobile='',
  353. this.state.role=[];
  354. this.state.departmentId=undefined;
  355. this.state.mobile='';
  356. this.state.duty=undefined;
  357. this.state.position=undefined;
  358. this.state.station=undefined;
  359. this.state.contactMobile='';
  360. this.state.email='';
  361. this.state.superiorId='';
  362. this.state.superior='';
  363. this.state.district=[];
  364. this.state.orgCodeUrl=[];
  365. this.state.id='';
  366. this.state.entryTime=undefined;
  367. }
  368. }
  369. componentWillMount(e){
  370. const cityArrs=[];
  371. cityArr.map(function (item) {
  372. cityArrs.push(
  373. <Select.Option key={item.value}>{item.key}</Select.Option>
  374. )
  375. });
  376. this.state.cityOption=cityArrs;
  377. }
  378. rolesList() {
  379. this.setState({
  380. loading: true
  381. });
  382. $.ajax({
  383. method: "get",
  384. dataType: "json",
  385. crossDomain: false,
  386. url: globalConfig.context + "/api/roles",
  387. data: {},
  388. success: function (data) {
  389. let thedata = data.data;
  390. let theArr = [];
  391. if (!thedata) {
  392. if (data.error && data.error.length) {
  393. message.warning(data.error[0].message);
  394. }
  395. ;
  396. thedata = {};
  397. } else {
  398. thedata.map(function (item, index) {
  399. theArr.push({
  400. key: index,
  401. roleName: item.roleName,
  402. id: item.id,
  403. })
  404. })
  405. }
  406. this.setState({
  407. roleArr: theArr,
  408. })
  409. }.bind(this),
  410. }).always(function () {
  411. this.setState({
  412. loading: false
  413. });
  414. }.bind(this));
  415. }
  416. //部门
  417. departmentList() {
  418. this.setState({
  419. loading: true
  420. });
  421. $.ajax({
  422. method: "get",
  423. dataType: "json",
  424. crossDomain: false,
  425. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  426. data: {
  427. },
  428. success: function(data) {
  429. let thedata = data.data;
  430. let theArr = [];
  431. if(!thedata) {
  432. if(data.error && data.error.length) {
  433. message.warning(data.error[0].message);
  434. };
  435. } else {
  436. thedata.map(function(item, index) {
  437. theArr.push({
  438. key: index,
  439. name: item.name,
  440. id: item.id,
  441. depNo: item.depNo
  442. })
  443. })
  444. }
  445. this.setState({
  446. departmentArr: theArr,
  447. })
  448. }.bind(this),
  449. }).always(function() {
  450. this.setState({
  451. loading: false
  452. });
  453. }.bind(this));
  454. }
  455. render() {
  456. const FormItem = Form.Item
  457. const formItemLayout = {
  458. labelCol: { span: 8 },
  459. wrapperCol: { span: 14 },
  460. };
  461. const dataSources=this.state.customerArr || [];
  462. const options = dataSources.map((group,index) =>
  463. <Select.Option key={index} value={group.name}>{group.name}</Select.Option>
  464. )
  465. return (
  466. <div>
  467. <h2
  468. style={{
  469. textAlign: "center",
  470. paddingBottom: 10,
  471. marginBottom: 10,
  472. }}
  473. >
  474. {this.props.userDetaile?'修改系统账户':'同步系统账户'}
  475. </h2>
  476. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  477. <Spin spinning={this.state.loading}>
  478. <div className="clearfix">
  479. <FormItem
  480. labelCol={{ span: 4 }}
  481. wrapperCo={{ span: 14 }}
  482. label="用户角色"
  483. >
  484. <Select
  485. mode="tags"
  486. tokenSeparators={[',']}
  487. placeholder="选择用户角色"
  488. value={this.state.role}
  489. style={{width:'200px'}}
  490. onChange={(e)=>{
  491. this.setState({
  492. role:e
  493. })
  494. }} >
  495. {
  496. this.state.roleArr.map(function (item) {
  497. return <Select.Option key={item.id} >{item.roleName}</Select.Option>
  498. })
  499. }
  500. </Select>
  501. <span className="mandatory">*</span>
  502. <span style={{color:'red',padding:'0 15px'}}>存在多个角色</span>
  503. {this.props.userDetaile?
  504. <Popconfirm
  505. title={"用户 [ " + this.props.name + " ] 的密码将会重置为123456,确认操作?"}
  506. onConfirm={this.resetPwd}
  507. okText="确认"
  508. cancelText="取消"
  509. placement="topLeft">
  510. <Button>重置密码</Button>
  511. </Popconfirm>:''}
  512. </FormItem>
  513. {this.props.userDetaile?<FormItem className="half-item"
  514. {...formItemLayout}
  515. label="用户状态" >
  516. <Select placeholder="用户状态" value={this.state.status} style={{width:'200px'}}
  517. onChange={(e)=>{this.setState({status:e})}} >
  518. <Select.Option value="正常" >正常</Select.Option>
  519. <Select.Option value="注销" >注销</Select.Option>
  520. <Select.Option value="锁定" >锁定</Select.Option>
  521. </Select>
  522. <span className="mandatory">*</span>
  523. </FormItem>:''}
  524. <FormItem className="half-item"
  525. {...formItemLayout}
  526. label="用户名" >
  527. <Input placeholder="请输入用户名" style={{width:'200px'}} value={this.state.mobile}
  528. onChange={(e)=>{this.setState({mobile:e.target.value})}} required="required"/>
  529. <span className="mandatory">*</span>
  530. </FormItem>
  531. <FormItem className="half-item"
  532. {...formItemLayout}
  533. label="联系方式" >
  534. <Input placeholder="请输入手机号" style={{width:'200px'}} value={this.state.contactMobile}
  535. onChange={(e)=>{this.setState({contactMobile:e.target.value})}} />
  536. </FormItem>
  537. {window.adminData.isSuperAdmin?<FormItem className="half-item"
  538. {...formItemLayout}
  539. label="组织部门" >
  540. <Select placeholder="选择组织部门"
  541. style={{ width: 200 }}
  542. value={this.state.departmentId}
  543. onChange={(e) => { this.setState({ departmentId: e }) }}>
  544. {
  545. this.state.departmentArr.map(function (item) {
  546. return <Select.Option key={item.id} >{item.name}</Select.Option>
  547. })
  548. }
  549. </Select>
  550. <span className="mandatory">*</span>
  551. </FormItem>:''}
  552. <FormItem className="half-item"
  553. {...formItemLayout}
  554. label="职务"
  555. >
  556. <Select placeholder="选择职务" style={{width:'200px'}} value={this.state.duty} onChange={(e)=>{this.setState({duty:e})}}>
  557. {
  558. post.map(function (item) {
  559. return <Select.Option key={item.value} >{item.key}</Select.Option>
  560. })
  561. }
  562. </Select>
  563. </FormItem>
  564. <FormItem className="half-item"
  565. {...formItemLayout}
  566. label="岗位"
  567. >
  568. <Select placeholder="选择岗位" style={{width:'200px'}} value={this.state.position} onChange={(e)=>{this.setState({position:e})}}>
  569. {
  570. station.map(function (item) {
  571. return <Select.Option key={item.value} >{item.key}</Select.Option>
  572. })
  573. }
  574. </Select>
  575. </FormItem>
  576. <FormItem className="half-item"
  577. {...formItemLayout}
  578. label="电子邮箱" >
  579. <Input placeholder="请输入邮箱" style={{width:'200px'}} value={this.state.email}
  580. onChange={(e)=>{this.setState({email:e.target.value})}} />
  581. </FormItem>
  582. <FormItem className="half-item"
  583. {...formItemLayout}
  584. label="上级主管"
  585. >
  586. <AutoComplete
  587. className="certain-category-search"
  588. dropdownClassName="certain-category-search-dropdown"
  589. dropdownMatchSelectWidth={false}
  590. dropdownStyle={{ width: 200 }}
  591. size="large"
  592. style={{ width: '200px' }}
  593. dataSource={options}
  594. placeholder="输入名称"
  595. value={this.state.superior}
  596. onChange={this.httpChange}
  597. filterOption={true}
  598. onBlur={this.blurChange}
  599. onSelect={this.selectAuto}
  600. >
  601. <Input/>
  602. </AutoComplete>
  603. <span className="mandatory">*</span>
  604. </FormItem>
  605. {this.props.userDetaile?
  606. <FormItem className="half-item"
  607. {...formItemLayout}
  608. label="用户编号" >
  609. <span>{this.state.userNo}</span>
  610. </FormItem>
  611. :''}
  612. <div className='clearfix'>
  613. <FormItem className="half-item"
  614. {...formItemLayout}
  615. label="地区" >
  616. <Select
  617. multiple
  618. style={{width:'500px'}}
  619. placeholder="选择地区"
  620. filterOption={(input, option) => { return option.props.children.indexOf(input) >= 0 }}
  621. value={this.state.district}
  622. onChange={(pids) => {
  623. this.state.district = pids;
  624. this.setState({
  625. district: this.state.district
  626. })
  627. }}
  628. >
  629. {this.state.cityOption}
  630. </Select>
  631. </FormItem>
  632. </div>
  633. <div className="clearfix pictures">
  634. <FormItem
  635. labelCol={{ span: 4 }}
  636. wrapperCol={{ span: 18 }}
  637. label="用户头像" >
  638. <PicturesWall
  639. domId={'newUser1'}
  640. pictureSign="customer_sys_file"
  641. fileList={this.getOrgCodeUrl}
  642. pictureUrl={this.state.orgCodeUrl} />
  643. <p>图片建议:要清晰。</p>
  644. </FormItem>
  645. </div>
  646. </div>
  647. <FormItem wrapperCol={{ span: 12, offset: 4 }} style={{
  648. paddingTop: '16px',
  649. paddingLeft: '140px',
  650. }}>
  651. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  652. </FormItem>
  653. </Spin>
  654. </Form>
  655. </div>
  656. );
  657. }
  658. }
  659. export default UserProcessing;