newUser.jsx 24 KB

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