newUser.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. import React from 'react';
  2. import { Icon, Modal, message, AutoComplete,Spin, Input, Select, Button, Form,Upload,Popconfirm } 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. const Option = AutoComplete.Option;
  8. //图片组件
  9. const PicturesWall = React.createClass({
  10. getInitialState() {
  11. return {
  12. previewVisible: false,
  13. previewImage: '',
  14. fileList: [],
  15. }
  16. },
  17. handleCancel() {
  18. this.setState({ previewVisible: false })
  19. },
  20. handlePreview(file) {
  21. this.setState({
  22. previewImage: file.url || file.thumbUrl,
  23. previewVisible: true,
  24. });
  25. },
  26. handleChange(info) {
  27. let fileList = info.fileList;
  28. this.setState({ fileList });
  29. this.props.fileList(fileList);
  30. },
  31. componentWillReceiveProps(nextProps) {
  32. this.state.fileList = nextProps.pictureUrl;
  33. },
  34. render() {
  35. const { previewVisible, previewImage, fileList } = this.state;
  36. const uploadButton = (
  37. <div>
  38. <Icon type="plus" />
  39. <div className="ant-upload-text">点击上传</div>
  40. </div>
  41. );
  42. return (
  43. <div style={{display:"inline-block"}}>
  44. <Upload
  45. action={globalConfig.context + "/api/admin/customer/attachmentUpload"}
  46. data={{ 'sign': this.props.pictureSign }}
  47. listType="picture-card"
  48. fileList={fileList}
  49. onPreview={this.handlePreview}
  50. onChange={this.handleChange} >
  51. {fileList.length >= 1 ? null : uploadButton}
  52. </Upload>
  53. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  54. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  55. </Modal>
  56. </div>
  57. );
  58. }
  59. });
  60. const Newuser = Form.create()(React.createClass({
  61. getInitialState() {
  62. return {
  63. orgCodeUrl:[],
  64. loading: false,
  65. loaduser: {},
  66. visible:false
  67. };
  68. },
  69. handleSubmit(e) {
  70. e.preventDefault();
  71. if(!this.state.role){
  72. message.warning('亲!请选择角色');
  73. return false;
  74. };
  75. if(!this.state.roleState){
  76. message.warning('亲!请选择角色状态');
  77. return false;
  78. }
  79. let theorgCodeUrl = [];
  80. if (this.state.orgCodeUrl.length) {
  81. let picArr = [];
  82. this.state.orgCodeUrl.map(function (item) {
  83. picArr.push(item.response.data);
  84. });
  85. theorgCodeUrl = picArr.join(",");
  86. };
  87. this.setState({
  88. loading: true
  89. });
  90. $.ajax({
  91. method: "POST",
  92. dataType: "json",
  93. crossDomain: false,
  94. url: globalConfig.context + '/api/admin/customer/addCustomer',
  95. data: {
  96. id:this.props.datauser.id,
  97. uesrName:this.state.uesrName,
  98. role:this.state.role,
  99. roleState:this.state.roleState,
  100. customerName:this.state.customerName,
  101. department:this.state.department,
  102. post:this.state.post,
  103. station:this.state.station,
  104. phone:this.state.phone,
  105. email:this.state.email,
  106. director:this.state.theTypes,
  107. companyIntention:JSON.stringify(this.state.companyIntention),
  108. }
  109. }).done(function (data) {
  110. this.setState({
  111. loading: false
  112. });
  113. if (!data.error.length) {
  114. message.success('保存成功!');
  115. this.handleOk();
  116. } else {
  117. message.warning(data.error[0].message);
  118. }
  119. }.bind(this));
  120. },
  121. //主管初始加载(自动补全)
  122. supervisor(e){
  123. $.ajax({
  124. method: "get",
  125. dataType: "json",
  126. crossDomain: false,
  127. url: globalConfig.context + "/api/admin/customer/findCustomerByName",
  128. data:{
  129. name:e
  130. },
  131. success: function (data) {
  132. let thedata=data.data;
  133. if (!thedata) {
  134. if (data.error && data.error.length) {
  135. message.warning(data.error[0].message);
  136. };
  137. thedata = {};
  138. };
  139. this.setState({
  140. customerArr:thedata,
  141. });
  142. }.bind(this),
  143. }).always(function () {
  144. this.setState({
  145. loading: false
  146. });
  147. }.bind(this));
  148. },
  149. //上级主管输入框失去焦点是判断客户是否存在
  150. selectAuto(value,options){
  151. this.setState({
  152. auto:value
  153. })
  154. },
  155. blurChange(e){
  156. console.log(e)
  157. let theType='';
  158. let contactLists=this.state.customerArr||[];
  159. if (e) {
  160. contactLists.map(function (item) {
  161. if (item.name == e.toString()) {
  162. theType = item.id;
  163. }
  164. });
  165. }
  166. this.setState({
  167. theTypes:theType
  168. })
  169. },
  170. //值改变时请求客户名称
  171. httpChange(e){
  172. if(e.length>=2){
  173. this.supervisor(e);
  174. }
  175. this.setState({
  176. auto:e
  177. })
  178. },
  179. //查看基本详情基本信息
  180. loaduser(record){
  181. if(record){
  182. $.ajax({
  183. method: "get",
  184. dataType: "json",
  185. crossDomain: false,
  186. url: globalConfig.context + '/api/admin/customer/toUpdateBusiness',
  187. data: {
  188. businessId: record.name
  189. },
  190. success: function (data) {
  191. let thisData = data.data;
  192. if (!thisData) {
  193. if (data.error && data.error.length) {
  194. message.warning(data.error[0].message);
  195. };
  196. thisData = {};
  197. };
  198. this.setState({
  199. orgCodeUrl: thisData.orgCodeUrl ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload') : [],
  200. uids:thisData.uid,
  201. followSituation:thisData.followSituation,
  202. businessGlossoryId:thisData.businessGlossoryId,
  203. customerStatus:thisData.customerStatus,
  204. remarks:thisData.remarks,
  205. });
  206. }.bind(this),
  207. }).always(function () {
  208. this.setState({
  209. loading: false
  210. });
  211. }.bind(this));
  212. }
  213. },
  214. //重置密码
  215. resetPwd(e) {
  216. this.setState({
  217. loading: true
  218. })
  219. $.ajax({
  220. type: 'post',
  221. url: globalConfig.context + "/api/admin/supervise/resetPwd",
  222. dataType: "json",
  223. data: {
  224. id: this.state.id
  225. }
  226. }).done((res) => {
  227. if (res.error && res.error.length) {
  228. message.error(res.error[0].message);
  229. } else {
  230. message.success("密码重置成功");
  231. }
  232. }).always(() => {
  233. this.setState({
  234. loading: false
  235. })
  236. });
  237. },
  238. handleOk(e) {
  239. this.setState({
  240. visible: false,
  241. });
  242. this.props.closeDesc(false, true);
  243. },
  244. handleCancel(e) {
  245. this.setState({
  246. visible: false,
  247. });
  248. this.props.closeDesc(false);
  249. },
  250. getOrgCodeUrl(e) {
  251. this.setState({ orgCodeUrl: e });
  252. },
  253. componentWillMount(e){
  254. const cityArrs=[];
  255. cityArr.map(function (item) {
  256. cityArrs.push(
  257. <Select.Option key={item.value}>{item.key}</Select.Option>
  258. )
  259. });
  260. this.state.cityOption=cityArrs;
  261. },
  262. componentWillReceiveProps(nextProps) {
  263. this.state.visible = nextProps.showDesc;
  264. this.state.Detaile=nextProps.userDetaile;
  265. if(!nextProps.userDetaile){
  266. this.state.uesrName='';
  267. this.state.role=undefined;
  268. this.state.roleState=undefined;
  269. this.state.customerName='';
  270. this.state.department=undefined;
  271. this.state.post=undefined;
  272. this.state.station=undefined;
  273. this.state.phone='';
  274. this.state.email='';
  275. this.state.auto='';
  276. this.state.companyIntention=[];
  277. this.state.orgCodeUrl=[];
  278. }else{
  279. this.loaduser(nextProps.datauser)
  280. }
  281. },
  282. render() {
  283. const FormItem = Form.Item
  284. const formItemLayout = {
  285. labelCol: { span: 8 },
  286. wrapperCol: { span: 14 },
  287. };
  288. const dataSources=this.state.customerArr || [];
  289. const options = dataSources.map((group,index) =>
  290. <Select.Option key={index} value={group.name}>{group.name}</Select.Option>
  291. )
  292. return (
  293. <div>
  294. <Modal maskClosable={false} visible={this.state.visible}
  295. onOk={this.handleOk} onCancel={this.handleCancel}
  296. width='800px'
  297. title={this.props.userDetaile?'用户详情':'新建用户'}
  298. footer=''
  299. className="admin-desc-content">
  300. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  301. <Spin spinning={this.state.loading}>
  302. <div className="clearfix">
  303. <div className="clearfix">
  304. <FormItem className="half-item"
  305. {...formItemLayout}
  306. label="用户名" >
  307. <Input placeholder="输入客户姓名" value={this.state.uesrName}
  308. onChange={(e)=>{this.setState({uesrName:e.target.value})}} required="required" style={{width:'200px'}}/>
  309. <span className="mandatory">*</span>
  310. </FormItem>
  311. {this.props.userDetaile?
  312. <Popconfirm
  313. title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}
  314. onConfirm={this.resetPwd}
  315. okText="确认"
  316. cancelText="取消"
  317. placement="topLeft">
  318. <Button>重置密码</Button>
  319. </Popconfirm>:''}
  320. </div>
  321. <FormItem className="half-item"
  322. {...formItemLayout}
  323. label="用户角色"
  324. >
  325. <Select placeholder="选择用户角色" value={this.state.role}
  326. onChange={(e)=>{this.setState({role:e})}} style={{width:'200px'}}>
  327. {
  328. socialAttribute.map(function (item) {
  329. return <Select.Option key={item.value} >{item.key}</Select.Option>
  330. })
  331. }
  332. </Select>
  333. <span className="mandatory">*</span>
  334. </FormItem>
  335. {this.props.userDetaile?<FormItem className="half-item"
  336. {...formItemLayout}
  337. label="用户状态" >
  338. <Select placeholder="用户状态" value={this.state.roleState} style={{width:'200px'}}
  339. onChange={(e)=>{this.setState({roleState:e})}} >
  340. {
  341. socialAttribute.map(function (item) {
  342. return <Select.Option key={item.value} >{item.key}</Select.Option>
  343. })
  344. }
  345. </Select>
  346. <span className="mandatory">*</span>
  347. </FormItem>:''}
  348. <FormItem className="half-item"
  349. {...formItemLayout}
  350. label="用户姓名" >
  351. <Input placeholder="请输入用户姓名" style={{width:'200px'}} value={this.state.customerName}
  352. onChange={(e)=>{this.setState({customerName:e.target.value})}} required="required"/>
  353. <span className="mandatory">*</span>
  354. </FormItem>
  355. <FormItem className="half-item"
  356. {...formItemLayout}
  357. label="组织部门" >
  358. <Input placeholder="请输入组织部门" style={{width:'200px'}} value={this.state.department}
  359. onChange={(e)=>{this.setState({department:e.target.value})}} required="required"/>
  360. <span className="mandatory">*</span>
  361. </FormItem>
  362. <FormItem className="half-item"
  363. {...formItemLayout}
  364. label="职务"
  365. >
  366. <Select placeholder="选择职务" style={{width:'200px'}} value={this.state.post} onChange={(e)=>{this.setState({post:e})}}>
  367. {
  368. post.map(function (item) {
  369. return <Select.Option key={item.value} >{item.key}</Select.Option>
  370. })
  371. }
  372. </Select>
  373. </FormItem>
  374. <FormItem className="half-item"
  375. {...formItemLayout}
  376. label="岗位"
  377. >
  378. <Select placeholder="选择岗位" style={{width:'200px'}} value={this.state.station} onChange={(e)=>{this.setState({station:e})}}>
  379. {
  380. station.map(function (item) {
  381. return <Select.Option key={item.value} >{item.key}</Select.Option>
  382. })
  383. }
  384. </Select>
  385. </FormItem>
  386. <FormItem className="half-item"
  387. {...formItemLayout}
  388. label="联系手机" >
  389. <Input placeholder="请输入号码" style={{width:'200px'}} value={this.state.phone}
  390. onChange={(e)=>{this.setState({phone:e.target.value})}} required="required"/>
  391. <span className="mandatory">*</span>
  392. </FormItem>
  393. <FormItem className="half-item"
  394. {...formItemLayout}
  395. label="电子邮箱" >
  396. <Input placeholder="请输入邮箱" style={{width:'200px'}} value={this.state.email}
  397. onChange={(e)=>{this.setState({email:e.target.value})}} />
  398. </FormItem>
  399. <FormItem className="half-item"
  400. {...formItemLayout}
  401. label="上级主管"
  402. >
  403. <AutoComplete
  404. className="certain-category-search"
  405. dropdownClassName="certain-category-search-dropdown"
  406. dropdownMatchSelectWidth={false}
  407. dropdownStyle={{ width: 200 }}
  408. size="large"
  409. style={{ width: '200px' }}
  410. dataSource={options}
  411. placeholder="输入名称"
  412. value={this.state.auto}
  413. onChange={this.httpChange}
  414. filterOption={true}
  415. onBlur={this.blurChange}
  416. onSelect={this.selectAuto}
  417. >
  418. <Input/>
  419. </AutoComplete>
  420. <span className="mandatory">*</span>
  421. </FormItem>
  422. {this.props.userDetaile?
  423. <FormItem className="half-item"
  424. {...formItemLayout}
  425. label="用户编号" >
  426. <span>{this.state.id}</span>
  427. </FormItem>
  428. :''}
  429. <div className='clearfix'>
  430. <FormItem className="half-item"
  431. {...formItemLayout}
  432. label="地区" >
  433. <Select
  434. multiple
  435. style={{width:'500px'}}
  436. placeholder="选择地区"
  437. filterOption={(input, option) => { return option.props.children.indexOf(input) >= 0 }}
  438. value={this.state.companyIntention}
  439. onChange={(pids) => {
  440. this.state.companyIntention = pids;
  441. this.setState({
  442. companyIntention: this.state.companyIntention
  443. })
  444. }}
  445. >
  446. {this.state.cityOption}
  447. </Select>
  448. </FormItem>
  449. </div>
  450. <div className="clearfix pictures">
  451. <FormItem
  452. labelCol={{ span: 4 }}
  453. wrapperCol={{ span: 18 }}
  454. label="用户头像" >
  455. <PicturesWall
  456. pictureSign="customer_sys_file"
  457. fileList={this.getOrgCodeUrl}
  458. pictureUrl={this.state.orgCodeUrl} />
  459. <p>图片建议:要萌。</p>
  460. </FormItem>
  461. </div>
  462. </div>
  463. <FormItem wrapperCol={{ span: 12, offset: 4 }}>
  464. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  465. <Button className="set-submit" type="ghost" onClick={this.handleCancel}>取消</Button>
  466. </FormItem>
  467. </Spin>
  468. </Form >
  469. </Modal>
  470. </div>
  471. )
  472. }
  473. }));
  474. export default Newuser;