newUser.jsx 23 KB

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