patent.jsx 18 KB

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