personal.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
  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/admin/customer/findPersonalCustomerDetail',
  148. data: {
  149. uid: record
  150. },
  151. success: function(data) {
  152. let thisData = data.data;
  153. if (!thisData) {
  154. if (data.error && data.error.length) {
  155. message.warning(data.error[0].message);
  156. }
  157. thisData = {};
  158. }
  159. let ProvinceCityArr = [];
  160. let ProvinceS = thisData.province; //getprovince
  161. let citys = thisData.city;
  162. let Areas = thisData.area;
  163. ProvinceCityArr.push(ProvinceS, citys, Areas);
  164. let month = thisData.dateOfBirthYear
  165. ? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth
  166. : undefined;
  167. this.setState({
  168. InformationId: thisData.id,
  169. InformationUid: thisData.uid,
  170. identifyName: thisData.identifyName,
  171. listed: thisData.listed,
  172. highTechZone: thisData.highTechZone,
  173. headPortraitUrl: thisData.headPortraitUrl
  174. ? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload')
  175. : [],
  176. positiveIdUrl: thisData.positiveIdUrl
  177. ? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload')
  178. : [],
  179. oppositeIdUrl: thisData.oppositeIdUrl
  180. ? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload')
  181. : [],
  182. dataInformation: thisData,
  183. idNumber: thisData.idNumber,
  184. contacts: thisData.contacts,
  185. contactMobile: thisData.contactMobile,
  186. ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
  187. industry: thisData.industry ? String(thisData.industry) : undefined,
  188. societyTag: thisData.societyTag || undefined,
  189. sex: thisData.sex,
  190. yearMonth: month,
  191. postalAddress: thisData.postalAddress,
  192. fixedTel: thisData.fixedTel,
  193. consultationPrice: thisData.consultationPrice,
  194. email: thisData.email,
  195. qq: thisData.qq,
  196. introduction: thisData.introduction,
  197. expert: thisData.expert,
  198. celebrity: thisData.celebrity,
  199. consultant: thisData.consultant,
  200. international: thisData.international,
  201. investment: thisData.investment,
  202. professionalTitle: thisData.professionalTitle,
  203. workUnit: thisData.workUnit,
  204. education: thisData.education,
  205. graduateSchool: thisData.graduateSchool,
  206. majorCategory: thisData.majorCategory,
  207. qualification: thisData.qualification,
  208. businessAudit: thisData.businessAudit,
  209. auditStatus: thisData.auditStatus ? String(thisData.auditStatus) : undefined
  210. });
  211. }.bind(this)
  212. }).always(
  213. function() {
  214. this.setState({
  215. loading: false
  216. });
  217. }.bind(this)
  218. );
  219. },
  220. //图片
  221. getOrgCodeUrl(e) {
  222. this.setState({
  223. orgCodeUrl: e
  224. });
  225. },
  226. getCompanyLogoUrl(e) {
  227. this.setState({
  228. companyLogoUrl: e
  229. });
  230. },
  231. //基本信息提交
  232. newSubmit(e) {
  233. e.preventDefault();
  234. if(!this.state.identifyName){
  235. message.warning("请填写姓名!")
  236. return;
  237. }
  238. if (!this.state.industry) {
  239. message.warning('请选择行业!');
  240. return false;
  241. }
  242. if (!this.state.societyTag) {
  243. message.warning('请选择社会性质!');
  244. return false;
  245. }
  246. if (!this.state.ProvinceCity[1]) {
  247. message.warning('请选择地区!');
  248. return false;
  249. }
  250. let exPhoto = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$/;
  251. if(this.state.photo){
  252. if(!exPhoto.test(this.state.photo)){
  253. message.warning('请填写正确的手机号码!')
  254. return;
  255. }
  256. }else{
  257. message.warning("请填写手机号码!")
  258. return;
  259. }
  260. this.state.data = [];
  261. this.setState({
  262. selectedRowKeys: []
  263. });
  264. let theorgCodeUrl = [];
  265. if (this.state.headPortraitUrl.length) {
  266. let picArr = [];
  267. this.state.headPortraitUrl.map(function(item) {
  268. if (item.response && item.response.data && item.response.data.length) {
  269. picArr.push(item.response.data);
  270. }
  271. });
  272. theorgCodeUrl = picArr.join(',');
  273. }
  274. let thecompanyLogoUrl = [];
  275. if (this.state.positiveIdUrl.length) {
  276. let picArr = [];
  277. this.state.positiveIdUrl.map(function(item) {
  278. if (item.response && item.response.data && item.response.data.length) {
  279. picArr.push(item.response.data);
  280. }
  281. });
  282. thecompanyLogoUrl = picArr.join(',');
  283. }
  284. let thecompanyLogoUrls = [];
  285. if (this.state.oppositeIdUrl.length) {
  286. let picArr = [];
  287. this.state.oppositeIdUrl.map(function(item) {
  288. if (item.response && item.response.data && item.response.data.length) {
  289. picArr.push(item.response.data);
  290. }
  291. });
  292. thecompanyLogoUrls = picArr.join(',');
  293. }
  294. let years = [];
  295. let yearMonth = this.state.yearMonth != undefined ? new Date(this.state.yearMonth).toLocaleDateString() : '';
  296. years = yearMonth.split('/');
  297. this.setState({
  298. loading: true
  299. });
  300. $.ajax({
  301. method: 'post',
  302. dataType: 'json',
  303. url: globalConfig.context + '/api/admin/customer/updatePersonalCustomer',
  304. data: {
  305. id: this.state.InformationId,
  306. uid: this.state.InformationUid,
  307. societyTag: this.state.societyTag,
  308. identifyName: this.state.identifyName,
  309. industry: this.state.industry,
  310. dateOfBirthYear: years[0], //出生年
  311. dateOfBirthMonth: years[1], //出生月
  312. province: this.state.ProvinceCity[0], //省-
  313. city: this.state.ProvinceCity[1], //市
  314. area: this.state.ProvinceCity[2], //区
  315. sex: this.state.sex,
  316. expert: this.state.expert,
  317. celebrity: this.state.celebrity,
  318. consultant: this.state.consultant,
  319. international: this.state.international,
  320. fixedTel: this.state.fixedTel,
  321. consultationPrice: this.state.consultationPrice ? this.state.consultationPrice : '',
  322. qq: this.state.qq,
  323. contacts: this.state.contacts,
  324. contactMobile: this.state.contactMobile,
  325. idNumber: this.state.idNumber,
  326. email: this.state.email,
  327. isMember: this.state.isMember,
  328. postalAddress: this.state.postalAddress,
  329. introduction: this.state.introduction,
  330. positiveIdUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
  331. oppositeIdUrl: thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '',
  332. headPortraitUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
  333. investment: this.state.investment,
  334. professionalTitle: this.state.professionalTitle,
  335. workUnit: this.state.workUnit,
  336. education: this.state.education,
  337. graduateSchool: this.state.graduateSchool,
  338. majorCategory: this.state.majorCategory,
  339. qualification: this.state.qualification,
  340. businessAudit: this.state.businessAudit,
  341. auditStatus: this.state.auditStatus
  342. }
  343. }).done(
  344. function(data) {
  345. this.setState({
  346. loading: false
  347. });
  348. if (!data.error.length) {
  349. message.success('保存成功!');
  350. this.loadInformation();
  351. } else {
  352. message.warning(data.error[0].message);
  353. }
  354. }.bind(this)
  355. );
  356. },
  357. getHeadPortraitUrl(e) {
  358. this.setState({ headPortraitUrl: e });
  359. },
  360. getPositiveIdUrl(e) {
  361. this.setState({ positiveIdUrl: e });
  362. },
  363. getOppositeIdUrl(e) {
  364. this.setState({ oppositeIdUrl: e });
  365. },
  366. componentWillMount() {
  367. this.loadInformation();
  368. },
  369. componentWillReceiveProps(nextProps) {},
  370. render() {
  371. const { RangePicker, MonthPicker } = DatePicker;
  372. const formItemLayout = {
  373. labelCol: {
  374. span: 6
  375. },
  376. wrapperCol: {
  377. span: 14
  378. }
  379. };
  380. return (
  381. <div className="unit-wrap">
  382. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form">
  383. <Spin spinning={this.state.loading}>
  384. <Row style={{ marginBottom: 20 }}>
  385. <Col offset={2} span={4}>
  386. <h4>个人资料</h4>
  387. </Col>
  388. </Row>
  389. <div className="clearfix">
  390. <FormItem className="half-item" {...formItemLayout} label="姓名">
  391. <Input
  392. style={{ width: '90%' }}
  393. placeholder="输入姓名"
  394. value={this.state.identifyName}
  395. onChange={(e) => {
  396. this.setState({ identifyName: e.target.value });
  397. }}
  398. />
  399. <span className="color-red"> * </span>
  400. </FormItem>
  401. <FormItem className="half-item" {...formItemLayout} label="性别">
  402. <Radio.Group
  403. value={this.state.sex}
  404. onChange={(e) => {
  405. this.setState({ sex: e.target.value });
  406. }}
  407. >
  408. <Radio value={'男'}>男</Radio>
  409. <Radio value={'女'}>女</Radio>
  410. </Radio.Group>
  411. </FormItem>
  412. <FormItem className="half-item" {...formItemLayout} label="行业">
  413. <Select
  414. placeholder="选择行业"
  415. value={this.state.industry}
  416. style={{ width: '90%' }}
  417. onChange={(e) => {
  418. this.setState({ industry: e });
  419. }}
  420. >
  421. {industry.map(function(item) {
  422. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  423. })}
  424. </Select>
  425. <span className="color-red"> * </span>
  426. </FormItem>
  427. <FormItem className="half-item" {...formItemLayout} label="社会属性">
  428. <Select
  429. placeholder="客户社会属性"
  430. value={this.state.societyTag}
  431. style={{ width: '90%' }}
  432. onChange={(e) => {
  433. this.setState({ societyTag: e });
  434. }}
  435. >
  436. {socialAttribute.map(function(item) {
  437. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  438. })}
  439. </Select>
  440. <span className="color-red"> * </span>
  441. </FormItem>
  442. <FormItem className="half-item" {...formItemLayout} label="出生日期">
  443. {!this.state.yearMonth ? (
  444. <MonthPicker
  445. placeholder="选择出生年月"
  446. value={this.state.yearMonth}
  447. onChange={(time) => {
  448. this.setState({ yearMonth: time });
  449. }}
  450. />
  451. ) : (
  452. <MonthPicker
  453. value={moment(this.state.yearMonth, monthFormat)}
  454. format={monthFormat}
  455. onChange={(time) => {
  456. this.setState({ yearMonth: time });
  457. }}
  458. />
  459. )}
  460. </FormItem>
  461. <FormItem className="half-item" {...formItemLayout} label="身份证号码">
  462. <Input
  463. placeholder="身份证号码"
  464. value={this.state.idNumber}
  465. onChange={(e) => {
  466. this.setState({ idNumber: e.target.value });
  467. }}
  468. />
  469. </FormItem>
  470. </div>
  471. <div className="clearfix">
  472. <FormItem className="half-item" {...formItemLayout} label="省-市-区">
  473. <Cascader
  474. options={areaSelect()}
  475. value={this.state.ProvinceCity}
  476. placeholder="选择城市"
  477. style={{ width: '90%' }}
  478. onChange={(e, pre) => {
  479. this.setState({ ProvinceCity: e });
  480. }}
  481. />
  482. <span className="color-red"> * </span>
  483. </FormItem>
  484. <FormItem className="half-item" {...formItemLayout} label="通信地址">
  485. <Input
  486. placeholder="客户通信地址"
  487. value={this.state.postalAddress}
  488. onChange={(e, pre) => {
  489. this.setState({ postalAddress: e.target.value });
  490. }}
  491. />
  492. </FormItem>
  493. <FormItem className="half-item" {...formItemLayout} label="手机号码">
  494. <Input
  495. style={{width:'90%'}}
  496. placeholder="手机号码"
  497. value={this.state.photo}
  498. onChange={(e) => {
  499. this.setState({ photo: e.target.value });
  500. }}
  501. />
  502. <span className="color-red"> * </span>
  503. </FormItem>
  504. <FormItem className="half-item" {...formItemLayout} label="就业单位">
  505. <Input
  506. placeholder="传真"
  507. value={this.state.Fax}
  508. onChange={(e) => {
  509. this.setState({ Fax: e.target.value });
  510. }}
  511. />
  512. </FormItem>
  513. <FormItem className="half-item" {...formItemLayout} label="固定电话">
  514. <Input
  515. placeholder="客户固定电话"
  516. value={this.state.fixedTel}
  517. onChange={(e) => {
  518. this.setState({ fixedTel: e.target.value });
  519. }}
  520. />
  521. </FormItem>
  522. <FormItem className="half-item" {...formItemLayout} label="QQ">
  523. <Input
  524. placeholder="QQ"
  525. value={this.state.qq}
  526. onChange={(e) => {
  527. this.setState({ qq: e.target.value });
  528. }}
  529. />
  530. </FormItem>
  531. <FormItem className="half-item" {...formItemLayout} label="电子邮箱">
  532. <Input
  533. placeholder="客户电子邮箱"
  534. value={this.state.email}
  535. onChange={(e) => {
  536. this.setState({ email: e.target.value });
  537. }}
  538. />
  539. </FormItem>
  540. </div>
  541. <div className="clearfix">
  542. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="专家简介">
  543. <Input
  544. type="textarea"
  545. rows={4}
  546. value={this.state.introduction}
  547. onChange={(e, pre) => {
  548. this.setState({ introduction: e.target.value });
  549. }}
  550. />
  551. </FormItem>
  552. </div>
  553. <div className="clearfix pictures">
  554. <FormItem
  555. className="picWidth"
  556. labelCol={{ span: 10 }}
  557. wrapperCol={{ span: 10 }}
  558. label="身份证正面"
  559. >
  560. <PicturesWall
  561. fileList={this.getPositiveIdUrl}
  562. pictureUrl={this.state.positiveIdUrl}
  563. />
  564. <p>建议:图片要清晰。</p>
  565. </FormItem>
  566. <FormItem
  567. className="picWidth"
  568. labelCol={{ span: 10 }}
  569. wrapperCol={{ span: 10 }}
  570. label="身份证反面"
  571. >
  572. <PicturesWall
  573. fileList={this.getOppositeIdUrl}
  574. pictureUrl={this.state.oppositeIdUrl}
  575. />
  576. <p>建议:图片要清晰。</p>
  577. </FormItem>
  578. <FormItem
  579. className="picWidth"
  580. labelCol={{ span: 10 }}
  581. wrapperCol={{ span: 10 }}
  582. label="客户照片"
  583. >
  584. <PicturesWall
  585. fileList={this.getHeadPortraitUrl}
  586. pictureUrl={this.state.headPortraitUrl}
  587. />
  588. <p>建议:图片要清晰。</p>
  589. </FormItem>
  590. </div>
  591. <Row style={{ marginBottom: 20 }}>
  592. <Col offset={3} span={4}>
  593. <Button size="large" className="set-submit" type="primary" htmlType="submit">
  594. 保存
  595. </Button>
  596. </Col>
  597. </Row>
  598. </Spin>
  599. </Form>
  600. </div>
  601. );
  602. }
  603. });
  604. export default Personal;