personal.jsx 18 KB

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