personal.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  1. /*
  2. @author:李霆
  3. @update:2018/05/29
  4. @descript:复制粘贴,拿起来就是干!!
  5. */
  6. import React from 'react';
  7. import {
  8. Radio,
  9. Icon,
  10. Button,
  11. AutoComplete,
  12. Cascader,
  13. layout,
  14. Input,
  15. Select,
  16. Tabs,
  17. Spin,
  18. Popconfirm,
  19. Popover,
  20. Table,
  21. Switch,
  22. message,
  23. DatePicker,
  24. Modal,
  25. Upload,
  26. Form,
  27. Row,
  28. Col,
  29. TimePicker
  30. } from 'antd';
  31. import ajax from 'jquery/src/ajax/xhr.js';
  32. import $ from 'jquery/src/ajax';
  33. import moment from 'moment';
  34. import './unit.less';
  35. import { citySelect, provinceList, areaSelect } from '@/NewDicProvinceList';
  36. import {
  37. socialAttribute,
  38. industry,
  39. newFollow,
  40. auditStatusL,
  41. lvl,
  42. currentMember,
  43. cityArr,
  44. statuslist,
  45. customerStatus,
  46. intentionalService,
  47. sex
  48. } from '@/dataDic.js';
  49. import {
  50. getCompanyIntention,
  51. splitUrl,
  52. getIndustry,
  53. getStatuslist,
  54. getAuditStatus,
  55. getContactType,
  56. getSocialAttribute,
  57. getfllowSituation,
  58. beforeUploadFile,
  59. getWhether,
  60. getcityArr,
  61. getcustomerStatue,
  62. getfllowSituationOn,
  63. getCertification,
  64. getcustomerTyp,
  65. getLvl,
  66. getCurrentMember,
  67. getprovince
  68. } from '@/tools.js';
  69. const FormItem = Form.Item;
  70. const monthFormat = 'YYYY/MM';
  71. //图片组件
  72. const PicturesWall = React.createClass({
  73. getInitialState() {
  74. return {
  75. previewVisible: false,
  76. previewImage: '',
  77. fileList: []
  78. };
  79. },
  80. handleCancel() {
  81. this.setState({
  82. previewVisible: false
  83. });
  84. },
  85. handlePreview(file) {
  86. this.setState({
  87. previewImage: file.url || file.thumbUrl,
  88. previewVisible: true
  89. });
  90. },
  91. handleChange(info) {
  92. let fileList = info.fileList;
  93. this.setState({
  94. fileList
  95. });
  96. this.props.fileList(fileList);
  97. },
  98. componentWillReceiveProps(nextProps) {
  99. this.state.fileList = nextProps.pictureUrl;
  100. },
  101. render() {
  102. const { previewVisible, previewImage, fileList } = this.state;
  103. const uploadButton = (
  104. <div>
  105. <Icon type="plus" />
  106. <div className="ant-upload-text">点击上传</div>
  107. </div>
  108. );
  109. return (
  110. <div style={{ display: 'inline-block' }}>
  111. <Upload
  112. action={globalConfig.context + '/api/admin/customer/uploadCustomerImg'}
  113. data={{ sign: '' }}
  114. listType="picture-card"
  115. fileList={fileList}
  116. onPreview={this.handlePreview}
  117. onChange={this.handleChange}
  118. >
  119. {fileList.length >= 1 ? null : uploadButton}
  120. </Upload>
  121. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  122. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  123. </Modal>
  124. </div>
  125. );
  126. }
  127. });
  128. const Personal = React.createClass({
  129. getInitialState() {
  130. return {
  131. loading: false,
  132. orgCodeUrl: [],
  133. companyLogoUrl: [],
  134. headPortraitUrl: [],
  135. positiveIdUrl: [],
  136. oppositeIdUrl: []
  137. };
  138. },
  139. loadInformation(record) {
  140. this.setState({
  141. loading: true
  142. });
  143. $.ajax({
  144. method: 'get',
  145. dataType: 'json',
  146. crossDomain: false,
  147. url: globalConfig.context + '/api/user/getUserDetail',
  148. success: function(data) {
  149. let thisData = data.data;
  150. if (!thisData) {
  151. if (data.error && data.error.length) {
  152. message.warning(data.error[0].message);
  153. }
  154. thisData = {};
  155. }
  156. let ProvinceCityArr = [];
  157. let ProvinceS = thisData.province; //getprovince
  158. let citys = thisData.city;
  159. let Areas = thisData.area;
  160. ProvinceCityArr.push(ProvinceS, citys, Areas);
  161. let month = thisData.dateOfBirthYear
  162. ? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth
  163. : undefined;
  164. this.setState({
  165. InformationId: thisData.id,
  166. InformationUid: thisData.uid,
  167. identifyName: thisData.identifyName,
  168. headPortraitUrl: thisData.headPortraitUrl
  169. ? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload')
  170. : [],
  171. positiveIdUrl: thisData.positiveIdUrl
  172. ? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload')
  173. : [],
  174. oppositeIdUrl: thisData.oppositeIdUrl
  175. ? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload')
  176. : [],
  177. dataInformation: thisData,
  178. idNumber: thisData.idNumber,
  179. mobile:thisData.mobile,
  180. ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
  181. industry: thisData.industry ? String(thisData.industry) : undefined,
  182. societyTag: thisData.societyTag || undefined,
  183. sex: thisData.sex,
  184. yearMonth: month,
  185. postalAddress: thisData.postalAddress,
  186. fixedTel: thisData.fixedTel,
  187. email: thisData.email,
  188. qq: thisData.qq,
  189. mobile:thisData.mobile,
  190. introduction: thisData.introduction,
  191. type:thisData.type,
  192. authentication:thisData.authentication
  193. });
  194. }.bind(this)
  195. }).always(
  196. function() {
  197. this.setState({
  198. loading: false
  199. });
  200. }.bind(this)
  201. );
  202. },
  203. //图片
  204. getOrgCodeUrl(e) {
  205. this.setState({
  206. orgCodeUrl: e
  207. });
  208. },
  209. getCompanyLogoUrl(e) {
  210. this.setState({
  211. companyLogoUrl: e
  212. });
  213. },
  214. //基本信息提交
  215. newSubmit(e) {
  216. if(!this.state.identifyName){
  217. message.warning("请填写姓名!")
  218. return;
  219. }
  220. if (!this.state.industry) {
  221. message.warning('请选择行业!');
  222. return false;
  223. }
  224. if (!this.state.societyTag) {
  225. message.warning('请选择社会性质!');
  226. return false;
  227. }
  228. if (!this.state.ProvinceCity||!this.state.ProvinceCity.length) {
  229. message.warning('请选择地区!');
  230. return false;
  231. }
  232. if(!this.state.mobile){
  233. message.warning("请填写手机号码!")
  234. return;
  235. }
  236. this.state.data = [];
  237. this.setState({
  238. selectedRowKeys: []
  239. });
  240. let theorgCodeUrl = [];
  241. if (this.state.headPortraitUrl.length) {
  242. let picArr = [];
  243. this.state.headPortraitUrl.map(function(item) {
  244. if (item.response && item.response.data && item.response.data.length) {
  245. picArr.push(item.response.data);
  246. }
  247. });
  248. theorgCodeUrl = picArr.join(',');
  249. }
  250. let thecompanyLogoUrl = [];
  251. if (this.state.positiveIdUrl.length) {
  252. let picArr = [];
  253. this.state.positiveIdUrl.map(function(item) {
  254. if (item.response && item.response.data && item.response.data.length) {
  255. picArr.push(item.response.data);
  256. }
  257. });
  258. thecompanyLogoUrl = picArr.join(',');
  259. }
  260. let thecompanyLogoUrls = [];
  261. if (this.state.oppositeIdUrl.length) {
  262. let picArr = [];
  263. this.state.oppositeIdUrl.map(function(item) {
  264. if (item.response && item.response.data && item.response.data.length) {
  265. picArr.push(item.response.data);
  266. }
  267. });
  268. thecompanyLogoUrls = picArr.join(',');
  269. }
  270. let years = [];
  271. let yearMonth = this.state.yearMonth != undefined ? new Date(this.state.yearMonth).toLocaleDateString() : '';
  272. years = yearMonth.split('/');
  273. this.setState({
  274. loading: true
  275. });
  276. $.ajax({
  277. method: 'post',
  278. dataType: 'json',
  279. url: globalConfig.context + '/api/user/updateUserDetail',
  280. data: {
  281. id: this.state.InformationId,
  282. uid: this.state.InformationUid,
  283. societyTag: this.state.societyTag,
  284. identifyName: this.state.identifyName,
  285. industry: this.state.industry,
  286. dateOfBirthYear: years[0], //出生年
  287. dateOfBirthMonth: years[1], //出生月
  288. province: this.state.ProvinceCity[0], //省-
  289. city: this.state.ProvinceCity[1], //市
  290. area: this.state.ProvinceCity[2], //区
  291. sex: this.state.sex,
  292. mobile:this.state.mobile,
  293. fixedTel: this.state.fixedTel,
  294. qq: this.state.qq,
  295. idNumber: this.state.idNumber,
  296. email: this.state.email,
  297. postalAddress: this.state.postalAddress,
  298. introduction: this.state.introduction,
  299. positiveIdUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
  300. oppositeIdUrl: thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '',
  301. headPortraitUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
  302. authentication:this.state.authentication,
  303. type:this.state.type
  304. }
  305. }).done(
  306. function(data) {
  307. this.setState({
  308. loading: false
  309. });
  310. if (!data.error.length) {
  311. if(this.state.type!='0'){
  312. message.warning('个人认证成功,1s后回到首页.')
  313. setTimeout(()=>{
  314. window.location.href = globalConfig.context + "/user/account/index.html";
  315. },1000)
  316. }else{
  317. message.success('保存成功!');
  318. this.loadInformation();
  319. }
  320. } else {
  321. message.warning(data.error[0].message);
  322. }
  323. }.bind(this)
  324. );
  325. },
  326. subFun(){
  327. if(this.state.type=='0'||this.state.type=='1'){
  328. this.newSubmit()
  329. }else{
  330. this.setState({
  331. visible:true
  332. })
  333. }
  334. },
  335. handleOk(){
  336. this.newSubmit();
  337. this.setState({
  338. visible:false
  339. })
  340. },
  341. handleCancel(){
  342. this.setState({
  343. visible:false
  344. })
  345. },
  346. getHeadPortraitUrl(e) {
  347. this.setState({ headPortraitUrl: e });
  348. },
  349. getPositiveIdUrl(e) {
  350. this.setState({ positiveIdUrl: e });
  351. },
  352. getOppositeIdUrl(e) {
  353. this.setState({ oppositeIdUrl: e });
  354. },
  355. componentWillMount() {
  356. this.loadInformation();
  357. },
  358. componentWillReceiveProps(nextProps) {},
  359. render() {
  360. const { RangePicker, MonthPicker } = DatePicker;
  361. const formItemLayout = {
  362. labelCol: {
  363. span: 6
  364. },
  365. wrapperCol: {
  366. span: 14
  367. }
  368. };
  369. return (
  370. <div className="unit-wrap">
  371. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form">
  372. <Spin spinning={this.state.loading}>
  373. <Row style={{ marginBottom: 20 }}>
  374. <Col offset={2} span={4}>
  375. <h4 style={{fontSize:20}}>个人资料</h4>
  376. </Col>
  377. </Row>
  378. <div className="clearfix">
  379. <FormItem className="half-item" {...formItemLayout} label="姓名">
  380. <Input
  381. style={{ width: '90%' }}
  382. placeholder="输入姓名"
  383. value={this.state.identifyName}
  384. onChange={(e) => {
  385. this.setState({ identifyName: e.target.value });
  386. }}
  387. />
  388. <span className="color-red"> * </span>
  389. </FormItem>
  390. <FormItem className="half-item" {...formItemLayout} label="性别">
  391. <Radio.Group
  392. value={this.state.sex}
  393. onChange={(e) => {
  394. this.setState({ sex: e.target.value });
  395. }}
  396. >
  397. <Radio value={'男'}>男</Radio>
  398. <Radio value={'女'}>女</Radio>
  399. </Radio.Group>
  400. </FormItem>
  401. <FormItem className="half-item" {...formItemLayout} label="行业">
  402. <Select
  403. placeholder="选择行业"
  404. value={this.state.industry}
  405. style={{ width: '90%' }}
  406. onChange={(e) => {
  407. this.setState({ industry: e });
  408. }}
  409. >
  410. {industry.map(function(item) {
  411. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  412. })}
  413. </Select>
  414. <span className="color-red"> * </span>
  415. </FormItem>
  416. <FormItem className="half-item" {...formItemLayout} label="社会属性">
  417. <Select
  418. placeholder="客户社会属性"
  419. value={this.state.societyTag}
  420. style={{ width: '90%' }}
  421. onChange={(e) => {
  422. this.setState({ societyTag: e });
  423. }}
  424. >
  425. {socialAttribute.map(function(item) {
  426. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  427. })}
  428. </Select>
  429. <span className="color-red"> * </span>
  430. </FormItem>
  431. <FormItem className="half-item" {...formItemLayout} label="出生日期">
  432. {!this.state.yearMonth ? (
  433. <MonthPicker
  434. placeholder="选择出生年月"
  435. value={this.state.yearMonth}
  436. onChange={(time) => {
  437. this.setState({ yearMonth: time });
  438. }}
  439. />
  440. ) : (
  441. <MonthPicker
  442. value={moment(this.state.yearMonth, monthFormat)}
  443. format={monthFormat}
  444. onChange={(time) => {
  445. this.setState({ yearMonth: time });
  446. }}
  447. />
  448. )}
  449. </FormItem>
  450. <FormItem className="half-item" {...formItemLayout} label="身份证号码">
  451. <Input
  452. placeholder="身份证号码"
  453. value={this.state.idNumber}
  454. onChange={(e) => {
  455. this.setState({ idNumber: e.target.value });
  456. }}
  457. />
  458. </FormItem>
  459. </div>
  460. <div className="clearfix">
  461. <FormItem className="half-item" {...formItemLayout} label="省-市-区">
  462. <Cascader
  463. options={areaSelect()}
  464. value={this.state.ProvinceCity}
  465. placeholder="选择城市"
  466. style={{ width: '90%' }}
  467. onChange={(e, pre) => {
  468. this.setState({ ProvinceCity: e });
  469. }}
  470. />
  471. <span className="color-red"> * </span>
  472. </FormItem>
  473. <FormItem className="half-item" {...formItemLayout} label="通信地址">
  474. <Input
  475. placeholder="客户通信地址"
  476. value={this.state.postalAddress}
  477. onChange={(e, pre) => {
  478. this.setState({ postalAddress: e.target.value });
  479. }}
  480. />
  481. </FormItem>
  482. <FormItem className="half-item" {...formItemLayout} label="手机号码">
  483. <Input
  484. style={{width:'90%'}}
  485. placeholder="手机号码"
  486. value={this.state.mobile}
  487. onChange={(e) => {
  488. this.setState({ mobile: e.target.value });
  489. }}
  490. />
  491. <span className="color-red"> * </span>
  492. </FormItem>
  493. <FormItem className="half-item" {...formItemLayout} label="固定电话">
  494. <Input
  495. placeholder="客户固定电话"
  496. value={this.state.fixedTel}
  497. onChange={(e) => {
  498. this.setState({ fixedTel: e.target.value });
  499. }}
  500. />
  501. </FormItem>
  502. <FormItem className="half-item" {...formItemLayout} label="QQ">
  503. <Input
  504. placeholder="QQ"
  505. value={this.state.qq}
  506. onChange={(e) => {
  507. this.setState({ qq: e.target.value });
  508. }}
  509. />
  510. </FormItem>
  511. <FormItem className="half-item" {...formItemLayout} label="电子邮箱">
  512. <Input
  513. placeholder="客户电子邮箱"
  514. value={this.state.email}
  515. onChange={(e) => {
  516. this.setState({ email: e.target.value });
  517. }}
  518. />
  519. </FormItem>
  520. </div>
  521. <div className="clearfix">
  522. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="专家简介">
  523. <Input
  524. type="textarea"
  525. rows={4}
  526. value={this.state.introduction}
  527. onChange={(e, pre) => {
  528. this.setState({ introduction: e.target.value });
  529. }}
  530. />
  531. </FormItem>
  532. </div>
  533. <div className="clearfix pictures">
  534. <FormItem
  535. className="picWidth"
  536. labelCol={{ span: 10 }}
  537. wrapperCol={{ span: 10 }}
  538. label="身份证正面"
  539. >
  540. <PicturesWall
  541. fileList={this.getPositiveIdUrl}
  542. pictureUrl={this.state.positiveIdUrl}
  543. />
  544. <p>建议:图片要清晰。</p>
  545. </FormItem>
  546. <FormItem
  547. className="picWidth"
  548. labelCol={{ span: 10 }}
  549. wrapperCol={{ span: 10 }}
  550. label="身份证反面"
  551. >
  552. <PicturesWall
  553. fileList={this.getOppositeIdUrl}
  554. pictureUrl={this.state.oppositeIdUrl}
  555. />
  556. <p>建议:图片要清晰。</p>
  557. </FormItem>
  558. <FormItem
  559. className="picWidth"
  560. labelCol={{ span: 10 }}
  561. wrapperCol={{ span: 10 }}
  562. label="客户照片"
  563. >
  564. <PicturesWall
  565. fileList={this.getHeadPortraitUrl}
  566. pictureUrl={this.state.headPortraitUrl}
  567. />
  568. <p>建议:图片要清晰。</p>
  569. </FormItem>
  570. </div>
  571. <Row style={{ marginBottom: 20 }}>
  572. <Col offset={3} span={4}>
  573. <Button size="large" className="set-submit" type="primary" onClick={this.subFun}>
  574. 保存
  575. </Button>
  576. </Col>
  577. </Row>
  578. </Spin>
  579. </Form>
  580. <Modal
  581. visible={this.state.visible}
  582. onOk={this.handleOk}
  583. onCancel={this.handleCancel}
  584. >
  585. <p>是否申请个人用户认证?</p>
  586. </Modal>
  587. </div>
  588. );
  589. }
  590. });
  591. export default Personal;