basicPerson.jsx 23 KB

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