userDesc.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Input, Select, DatePicker, Button, Radio, Form, Cascader } from 'antd';
  3. import moment from 'moment';
  4. import './userList.less';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. import { provinceSelect } from '../../tools.js';
  8. import { auditStatusList, certifyStepList } from '../../dataDic.js';
  9. const UserForm = Form.create()(React.createClass({
  10. getInitialState() {
  11. return {
  12. visible: false,
  13. loading: false,
  14. saveSign: "save"
  15. };
  16. },
  17. loadData(uid) {
  18. this.setState({
  19. loading: true
  20. });
  21. $.ajax({
  22. method: window.showAuditStatus ? "get" : "post",
  23. dataType: "json",
  24. crossDomain: false,
  25. url: window.showAuditStatus ? globalConfig.context + "/api/admin/userCertify/userDetail" : globalConfig.context + "/api/admin/userDetail",
  26. data: {
  27. uid: uid
  28. },
  29. success: function (data) {
  30. let thisData = data.data;
  31. if (!thisData) {
  32. if (data.error && data.error.length) {
  33. message.warning(data.error[0].message);
  34. };
  35. thisData = {};
  36. };
  37. let d = new Date()
  38. if (thisData && thisData.dateOfBirthMonth && thisData.dateOfBirthYear) {
  39. d.setMonth(thisData.dateOfBirthMonth - 1);
  40. d.setYear(parseInt(thisData.dateOfBirthYear));
  41. };
  42. this.setState({
  43. username: thisData.username,
  44. sex: thisData.sex,
  45. id: thisData.id,
  46. birth: d,
  47. idNumber: thisData.idNumber,
  48. address: [thisData.province, thisData.city, thisData.area],
  49. positiveIdUrl: thisData.positiveIdUrl,
  50. oppositeIdUrl: thisData.oppositeIdUrl,
  51. aftUsername: thisData.aftUsername,
  52. contactMobile: thisData.contactMobile,
  53. bankName: thisData.bankName,
  54. bankAccount: thisData.bankAccount,
  55. bankCardNumber: thisData.bankCardNumber,
  56. amountMoney: thisData.amountMoney,
  57. auditStatus: thisData.auditStatus,
  58. process: thisData.process ? String(thisData.process) : undefined,
  59. paymentDateFormattedDate: thisData.paymentDateFormattedDate,
  60. paymentDate: thisData.paymentDate,
  61. aid: thisData.aid, //业务员ID
  62. mid: thisData.mid //客户经理ID
  63. });
  64. this.props.form.resetFields();
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getAccountManagerList() {
  73. this.setState({
  74. loading: true
  75. });
  76. $.ajax({
  77. method: "get",
  78. dataType: "json",
  79. crossDomain: false,
  80. url: globalConfig.context + "/api/admin/userCertify/accountManager",
  81. success: function (data) {
  82. let theArr = [];
  83. if (!data.data) {
  84. if (data.error && data.error.length) {
  85. message.warning(data.error[0].message);
  86. };
  87. return;
  88. };
  89. for (var item in data.data) {
  90. theArr.push(
  91. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  92. )
  93. };
  94. this.setState({
  95. accountManagerOption: theArr,
  96. accountManagerList: data.data
  97. });
  98. }.bind(this),
  99. }).always(function () {
  100. this.setState({
  101. loading: false
  102. });
  103. }.bind(this));
  104. },
  105. getTechnicianList() {
  106. this.setState({
  107. loading: true
  108. });
  109. $.ajax({
  110. method: "get",
  111. dataType: "json",
  112. crossDomain: false,
  113. url: globalConfig.context + "/api/admin/userCertify/technician",
  114. success: function (data) {
  115. let theArr = [];
  116. if (!data.data) {
  117. if (data.error && data.error.length) {
  118. message.warning(data.error[0].message);
  119. };
  120. return;
  121. };
  122. for (var item in data.data) {
  123. theArr.push(
  124. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  125. )
  126. };
  127. this.setState({
  128. technicianOption: theArr,
  129. technicianList: data.data
  130. });
  131. }.bind(this),
  132. }).always(function () {
  133. this.setState({
  134. loading: false
  135. });
  136. }.bind(this));
  137. },
  138. handleSubmit(e) {
  139. if (e) {
  140. e.preventDefault();
  141. };
  142. this.props.form.validateFields((err, values) => {
  143. //金额判断
  144. if (values.amountMoney && values.amountMoney < 0 && values.amountMoney > 100 && /^\d+(\.\d{2})?$/.test(values.amountMoney)) {
  145. message.warning('请输入0-100以内的金额');
  146. return;
  147. };
  148. if (!err) {
  149. this.setState({
  150. loading: true
  151. });
  152. $.ajax({
  153. method: "POST",
  154. dataType: "json",
  155. crossDomain: false,
  156. url: window.showAuditStatus ? globalConfig.context + "/api/admin/userCertify/updateUserDetail" : globalConfig.context + "/api/admin/updateUserDetail",
  157. data: {
  158. uid: this.props.uid,
  159. id: this.state.id,
  160. username: values.username,
  161. sex: values.sex,
  162. dateOfBirthYear: values.birth ? values.birth._d.getFullYear() : undefined,
  163. dateOfBirthMonth: values.birth ? values.birth._d.getMonth() + 1 : undefined,
  164. idNumber: values.idNumber,
  165. aftUsername: values.aftUsername,
  166. province: values.address[0],
  167. city: values.address[1],
  168. area: values.address[2],
  169. contactMobile: values.contactMobile,
  170. bankName: values.bankName,
  171. bankAccount: values.bankAccount,
  172. bankCardNumber: values.bankCardNumber,
  173. amountMoney: values.amountMoney,
  174. auditStatus: values.auditStatus,
  175. paymentDateFormattedDate: values.paymentDateFormattedDate ? values.paymentDateFormattedDate.format("YYYY-MM-DD") : undefined,
  176. aid: values.aid, //指派业务员ID
  177. mid: values.mid, //指派客户经理ID
  178. saveSign: this.state.saveSign
  179. }
  180. }).done(function (data) {
  181. if (!data.error.length) {
  182. message.success('保存成功!');
  183. } else {
  184. message.warning(data.error[0].message);
  185. }
  186. }.bind(this)).always(function () {
  187. this.setState({
  188. visible: false,
  189. saveSign: "save"
  190. });
  191. this.props.handleOk();
  192. }.bind(this));
  193. }
  194. });
  195. },
  196. componentWillMount() {
  197. this.loadData(this.props.uid);
  198. if (window.showAuditStatus) {
  199. this.getAccountManagerList();
  200. this.getTechnicianList();
  201. };
  202. },
  203. componentWillReceiveProps(nextProps) {
  204. if (!this.props.visible && nextProps.visible) {
  205. this.state.uid = undefined;
  206. this.state.mid = undefined;
  207. this.loadData(nextProps.uid);
  208. };
  209. },
  210. render() {
  211. const { getFieldDecorator } = this.props.form;
  212. const { MonthPicker } = DatePicker;
  213. const FormItem = Form.Item
  214. const formItemLayout = {
  215. labelCol: { span: 6 },
  216. wrapperCol: { span: 12 },
  217. };
  218. return (
  219. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  220. <FormItem
  221. {...formItemLayout}
  222. label="用户名"
  223. >
  224. {getFieldDecorator('username', {
  225. initialValue: this.state.username
  226. })(
  227. <Input />
  228. )}
  229. </FormItem>
  230. <FormItem
  231. {...formItemLayout}
  232. label="性别"
  233. >
  234. {getFieldDecorator('sex', {
  235. initialValue: this.state.sex
  236. })(
  237. <Radio.Group>
  238. <Radio value="男">男</Radio>
  239. <Radio value="女">女</Radio>
  240. </Radio.Group>
  241. )}
  242. </FormItem>
  243. <FormItem
  244. {...formItemLayout}
  245. label="出生日期"
  246. >
  247. {getFieldDecorator('birth', {
  248. initialValue: !this.state.birth ? null : moment(this.state.birth, 'YYYY/MM')
  249. })(
  250. <MonthPicker />
  251. )}
  252. </FormItem>
  253. <FormItem
  254. {...formItemLayout}
  255. label="身份证号"
  256. >
  257. {getFieldDecorator('idNumber', {
  258. initialValue: this.state.idNumber
  259. })(
  260. <Input />
  261. )}
  262. </FormItem>
  263. <FormItem
  264. labelCol={{ span: 6 }}
  265. wrapperCol={{ span: 18 }}
  266. label="身份证图片"
  267. >
  268. <div className="idcard-img clearfix">
  269. {this.state.positiveIdUrl ? <div>
  270. <div className="idcard-imgbox">
  271. <img src={globalConfig.context + '/open/writeImage?path=' + this.state.positiveIdUrl} alt="点击查看大图"
  272. onClick={(e) => { window.open(e.target.src) }} />
  273. </div>
  274. </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>}
  275. {this.state.oppositeIdUrl ? <div>
  276. <div className="idcard-imgbox">
  277. <img src={globalConfig.context + '/open/writeImage?path=' + this.state.oppositeIdUrl} alt="点击查看大图"
  278. onClick={(e) => { window.open(e.target.src) }} />
  279. </div>
  280. </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>}
  281. </div>
  282. </FormItem>
  283. <FormItem
  284. {...formItemLayout}
  285. label="认证姓名"
  286. >
  287. {getFieldDecorator('aftUsername', {
  288. initialValue: this.state.aftUsername
  289. })(
  290. <Input />
  291. )}
  292. </FormItem>
  293. <FormItem
  294. {...formItemLayout}
  295. label="联系电话"
  296. >
  297. {getFieldDecorator('contactMobile', {
  298. initialValue: this.state.contactMobile
  299. })(
  300. <Input />
  301. )}
  302. </FormItem>
  303. <FormItem
  304. {...formItemLayout}
  305. label="所在地"
  306. >
  307. {getFieldDecorator('address', {
  308. initialValue: this.state.address
  309. })(
  310. <Cascader options={provinceSelect()} placeholder="请选择地址" />
  311. )}
  312. </FormItem>
  313. <FormItem
  314. {...formItemLayout}
  315. label="开户银行"
  316. >
  317. {getFieldDecorator('bankAccount', {
  318. initialValue: this.state.bankAccount
  319. })(
  320. <Input />
  321. )}
  322. </FormItem>
  323. <FormItem
  324. {...formItemLayout}
  325. label="银行卡号"
  326. >
  327. {getFieldDecorator('bankCardNumber', {
  328. initialValue: this.state.bankCardNumber
  329. })(
  330. <Input />
  331. )}
  332. </FormItem>
  333. <div style={{ display: window.showAuditStatus ? 'none' : 'none' }}>
  334. <FormItem
  335. {...formItemLayout}
  336. label="认证状态"
  337. >
  338. <span>
  339. {(() => {
  340. let _me = this, theStatus;
  341. auditStatusList.map(function (item) {
  342. if (_me.state.auditStatus == item.value) {
  343. theStatus = item.key;
  344. };
  345. });
  346. return theStatus;
  347. })()}
  348. </span>
  349. </FormItem>
  350. <FormItem
  351. {...formItemLayout}
  352. label="业务员"
  353. >
  354. <span>{this.state.technicianList ? this.state.technicianList[this.state.aid] : ''}</span>
  355. </FormItem>
  356. <FormItem
  357. {...formItemLayout}
  358. label="客户经理"
  359. >
  360. <span>{this.state.accountManagerList ? this.state.accountManagerList[this.state.mid] : ''}</span>
  361. </FormItem>
  362. </div>
  363. <div style={{ display: window.showAuditStatus ? 'block' : 'none' }}>
  364. <FormItem
  365. {...formItemLayout}
  366. label="认证状态"
  367. >
  368. {getFieldDecorator('auditStatus', {
  369. initialValue: this.state.auditStatus
  370. })(
  371. <Select placeholder="选择要修改的认证状态" style={{ width: 200 }}
  372. onChange={(e) => { this.state.auditStatus = e }}>
  373. {
  374. auditStatusList.map(function (item, i) {
  375. return <Select.Option key={i} value={item.value} >{item.key}</Select.Option>
  376. })
  377. }
  378. </Select>
  379. )}
  380. </FormItem>
  381. <FormItem
  382. {...formItemLayout}
  383. label="业务员"
  384. >
  385. {getFieldDecorator('aid', {
  386. initialValue: this.state.aid
  387. })(
  388. <Select placeholder="选择一个业务员" style={{ width: 200 }}>
  389. {this.state.technicianOption}
  390. </Select>
  391. )}
  392. </FormItem>
  393. <FormItem
  394. {...formItemLayout}
  395. label="客户经理"
  396. >
  397. {getFieldDecorator('mid', {
  398. initialValue: this.state.mid
  399. })(
  400. <Select placeholder="选择一个客户经理" style={{ width: 200 }}>
  401. {this.state.accountManagerOption}
  402. </Select>
  403. )}
  404. </FormItem>
  405. </div>
  406. <FormItem wrapperCol={{ span: 12, offset: 4 }}>
  407. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  408. <Button className="set-submit" type="ghost"
  409. onClick={() => {
  410. this.state.saveSign = "submit";
  411. this.handleSubmit();
  412. }}>提交审核</Button>
  413. </FormItem>
  414. </Form >
  415. )
  416. }
  417. }));
  418. const PatentDesc = React.createClass({
  419. getInitialState() {
  420. return {
  421. visible: false,
  422. loading: false
  423. };
  424. },
  425. showModal() {
  426. this.setState({
  427. visible: true,
  428. });
  429. },
  430. handleCancel(e) {
  431. this.setState({
  432. visible: false,
  433. });
  434. this.props.closeDesc(false);
  435. },
  436. handleOk(e) {
  437. this.setState({
  438. visible: false,
  439. });
  440. this.props.closeDesc(false, true);
  441. },
  442. componentWillReceiveProps(nextProps) {
  443. this.state.visible = nextProps.showDesc;
  444. },
  445. render() {
  446. if (this.props.data) {
  447. return (
  448. <div className="patent-desc">
  449. <Spin spinning={this.state.loading} className='spin-box'>
  450. <Modal maskClosable={false} title="用户详情" visible={this.state.visible}
  451. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  452. width='600px'
  453. footer=''
  454. className="admin-desc-content">
  455. <UserForm
  456. uid={this.props.data.id}
  457. closeDesc={this.handleCancel}
  458. visible={this.state.visible}
  459. handleOk={this.handleOk} />
  460. </Modal>
  461. </Spin>
  462. </div>
  463. );
  464. } else {
  465. return <div></div>
  466. }
  467. },
  468. });
  469. export default PatentDesc;
  470. // <FormItem
  471. // {...formItemLayout}
  472. // label="打款金额"
  473. // >
  474. // {getFieldDecorator('amountMoney', {
  475. // initialValue: this.state.amountMoney
  476. // })(
  477. // <Input />
  478. // )}
  479. // </FormItem>
  480. // <FormItem
  481. // {...formItemLayout}
  482. // label="打款日期"
  483. // >
  484. // {getFieldDecorator('paymentDateFormattedDate', {
  485. // initialValue: this.state.paymentDate ? moment(this.state.paymentDate) : null
  486. // })(
  487. // <DatePicker />
  488. // )}
  489. // </FormItem>