expert.jsx 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005
  1. /*
  2. @author:李霆
  3. @update:2018/05/29
  4. */
  5. import React from 'react';
  6. import {
  7. Radio,
  8. Icon,
  9. Button,
  10. Cascader,
  11. Input,
  12. Select,
  13. Spin,
  14. message,
  15. DatePicker,
  16. Modal,
  17. Upload,
  18. Form,
  19. Row,
  20. Col
  21. } from 'antd';
  22. import $ from 'jquery/src/ajax';
  23. import moment from 'moment';
  24. import './unit.less';
  25. import { areaSelect } from '@/NewDicProvinceList';
  26. import { socialAttribute, industry, adviserType, lawType } from '@/dataDic.js';
  27. import { splitUrl, getAuthState, getAdviserType, getSocialAttribute } from '@/tools.js';
  28. const FormItem = Form.Item;
  29. const monthFormat = 'YYYY/MM';
  30. //图片组件
  31. const PicturesWall = React.createClass({
  32. getInitialState() {
  33. return {
  34. previewVisible: false,
  35. previewImage: '',
  36. fileList: []
  37. };
  38. },
  39. handleCancel() {
  40. this.setState({
  41. previewVisible: false
  42. });
  43. },
  44. handlePreview(file) {
  45. this.setState({
  46. previewImage: file.url || file.thumbUrl,
  47. previewVisible: true
  48. });
  49. },
  50. handleChange(info) {
  51. let fileList = info.fileList;
  52. this.setState({
  53. fileList
  54. });
  55. this.props.fileList(fileList);
  56. },
  57. componentWillReceiveProps(nextProps) {
  58. this.state.fileList = nextProps.pictureUrl;
  59. },
  60. render() {
  61. const { previewVisible, previewImage, fileList } = this.state;
  62. const uploadButton = (
  63. <div>
  64. <Icon type="plus" />
  65. <div className="ant-upload-text">点击上传</div>
  66. </div>
  67. );
  68. return (
  69. <div style={{ display: 'inline-block' }}>
  70. <Upload
  71. action={globalConfig.context + '/api/user/uploadPicture'}
  72. data={{ sign: 'user_picture' }}
  73. listType="picture-card"
  74. fileList={fileList}
  75. onPreview={this.handlePreview}
  76. onChange={this.handleChange}
  77. >
  78. {fileList.length >= 1 ? null : uploadButton}
  79. </Upload>
  80. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  81. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  82. </Modal>
  83. </div>
  84. );
  85. }
  86. });
  87. const Expert = React.createClass({
  88. getInitialState() {
  89. return {
  90. loading: false,
  91. orgCodeUrl: [],
  92. companyLogoUrl: [],
  93. headPortraitUrl: [],
  94. lawState: false,
  95. adviserUrl: [],
  96. positiveIdUrl: [],
  97. lawUrl: [],
  98. oppositeIdUrl: [],
  99. authenticationState: undefined
  100. };
  101. },
  102. loadInformation(record) {
  103. this.setState({
  104. loading: true
  105. });
  106. $.ajax({
  107. method: 'get',
  108. dataType: 'json',
  109. crossDomain: false,
  110. url: globalConfig.context + '/api/user/getUserDetail',
  111. success: function(data) {
  112. let thisData = data.data;
  113. if (!thisData) {
  114. if (data.error && data.error.length) {
  115. message.warning(data.error[0].message);
  116. }
  117. thisData = {};
  118. }
  119. let ProvinceCityArr = [];
  120. let ProvinceS = thisData.province; //getprovince
  121. let citys = thisData.city;
  122. let Areas = thisData.area;
  123. ProvinceCityArr.push(ProvinceS, citys, Areas);
  124. let month = thisData.dateOfBirthYear
  125. ? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth
  126. : undefined;
  127. let authenticationState = '';
  128. if (thisData.auditStatus == '3') {
  129. authenticationState = (thisData.expert - 1).toString();
  130. }
  131. this.setState({
  132. InformationId: thisData.id,
  133. InformationUid: thisData.uid,
  134. authentication: thisData.authentication,
  135. authenticationState: authenticationState,
  136. dateOfBirthYear: thisData.dateOfBirthYear,
  137. dateOfBirthMonth: thisData.dateOfBirthMonth,
  138. type: thisData.type,
  139. expert: thisData.expert, //认证类型 0-未认证专家顾问 1-专家认证 2-顾问认证
  140. authMessage: thisData.auditInfo,
  141. auditStatus: thisData.auditStatus || '0', //认证状态 0-未认证 1-认证审核中 2-已认证 3-认证失败
  142. headPortraitUrl: thisData.headPortraitUrl //专家照片
  143. ? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload')
  144. : [],
  145. adviserUrl: thisData.adviserUrl //顾问照片
  146. ? splitUrl(thisData.adviserUrl, ',', globalConfig.avatarHost + '/upload')
  147. : [],
  148. positiveIdUrl: thisData.positiveIdUrl
  149. ? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload')
  150. : [],
  151. oppositeIdUrl: thisData.oppositeIdUrl
  152. ? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload')
  153. : [],
  154. lawUrl: thisData.consultantCertificateUrl
  155. ? splitUrl(thisData.consultantCertificateUrl, ',', globalConfig.avatarHost + '/upload')
  156. : [],
  157. data: thisData,
  158. lawState: thisData.consultantType,
  159. ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
  160. yearMonth: month,
  161. workUnit: thisData.workUnit || '',
  162. graduateSchool: thisData.graduateSchool || '',
  163. professionalTitle: thisData.professionalTitle || '',
  164. qualification: thisData.qualification || '',
  165. majorCategory: thisData.majorCategory || '',
  166. adviserType: thisData.consultantType || '',
  167. headPortraitUrlCopy: thisData.headPortraitUrl,
  168. adviserUrlCopy: thisData.adviserUrl,
  169. positiveIdUrlCopy: thisData.positiveIdUrl,
  170. oppositeIdUrlCopy: thisData.oppositeIdUrl
  171. });
  172. }.bind(this)
  173. }).always(
  174. function() {
  175. this.setState({
  176. loading: false
  177. });
  178. }.bind(this)
  179. );
  180. },
  181. //图片
  182. getOrgCodeUrl(e) {
  183. this.setState({
  184. orgCodeUrl: e
  185. });
  186. },
  187. getCompanyLogoUrl(e) {
  188. this.setState({
  189. companyLogoUrl: e
  190. });
  191. },
  192. //基本信息提交
  193. newSubmit(values = {}) {
  194. this.state.data = [];
  195. let theorgCodeUrl = [];
  196. if (this.state.headPortraitUrl.length) {
  197. let picArr = [];
  198. this.state.headPortraitUrl.map(function(item) {
  199. if (item.response && item.response.data && item.response.data.length) {
  200. picArr.push(item.response.data);
  201. }
  202. });
  203. theorgCodeUrl = picArr.join(',');
  204. }
  205. let thecompanyLogoUrl = [];
  206. if (this.state.positiveIdUrl.length) {
  207. let picArr = [];
  208. this.state.positiveIdUrl.map(function(item) {
  209. if (item.response && item.response.data && item.response.data.length) {
  210. picArr.push(item.response.data);
  211. }
  212. });
  213. thecompanyLogoUrl = picArr.join(',');
  214. }
  215. let thecompanyLogoUrls = [];
  216. if (this.state.oppositeIdUrl.length) {
  217. let picArr = [];
  218. this.state.oppositeIdUrl.map(function(item) {
  219. if (item.response && item.response.data && item.response.data.length) {
  220. picArr.push(item.response.data);
  221. }
  222. });
  223. thecompanyLogoUrls = picArr.join(',');
  224. }
  225. //律师证书
  226. let lawUrls = [];
  227. if (this.state.lawUrl.length) {
  228. let picArr = [];
  229. this.state.lawUrl.map(function(item) {
  230. if (item.response && item.response.data && item.response.data.length) {
  231. picArr.push(item.response.data);
  232. }
  233. });
  234. lawUrls = picArr.join(',');
  235. }
  236. let years = [];
  237. years =
  238. this.state.yearList != undefined
  239. ? this.state.yearList.split('/')
  240. : [ this.state.dateOfBirthYear, this.state.dateOfBirthMonth ];
  241. this.setState({
  242. loading: true
  243. });
  244. let dataList = {};
  245. dataList = {
  246. id: this.state.InformationId,
  247. uid: this.state.InformationUid,
  248. type: this.state.type,
  249. societyTag: values.societyTag,
  250. identifyName: values.identifyName,
  251. industry: values.industry,
  252. dateOfBirthYear: years[0] || '', //出生年
  253. dateOfBirthMonth: years[1] || '', //出生月
  254. province: values.ProvinceCity[0], //省-
  255. city: values.ProvinceCity[1], //市
  256. area: values.ProvinceCity[2], //区
  257. sex: values.sex,
  258. expert: '0',
  259. authentication: this.state.authentication,
  260. // mobile: values.mobile,
  261. fixedTel: values.fixedTel,
  262. qq: values.qq,
  263. idNumber: values.idNumber,
  264. email: values.email,
  265. postalAddress: values.postalAddress,
  266. introduction: values.introduction,
  267. auditStatus: this.state.auditStatus || '0'
  268. };
  269. if (this.state.authenticationState == '0') {
  270. (dataList.expert = '1'), (dataList.workUnit = values.workUnit);
  271. dataList.professionalTitle = values.professionalTitle;
  272. dataList.qualification = values.qualification;
  273. dataList.majorCategory = values.majorCategory;
  274. dataList.graduateSchool = values.graduateSchool;
  275. dataList.headPortraitUrl = theorgCodeUrl.length != 0 ? theorgCodeUrl : '';
  276. dataList.positiveIdUrl = thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '';
  277. dataList.oppositeIdUrl = thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '';
  278. } else if (this.state.authenticationState == '1') {
  279. dataList.expert = '2';
  280. dataList.typicalCase = values.adviserType == '4' ? values.typicalCase : '';
  281. dataList.workUnit1 = values.adviserType == '4' ? values.workUnit1 : '';
  282. dataList.consultantCertificateUrl = values.adviserType == '4' && lawUrls.length != 0 ? lawUrls : ''; //法律职业资格证
  283. dataList.consultantType = values.adviserType; //顾问类型
  284. dataList.headPortraitUrl = theorgCodeUrl.length != 0 ? theorgCodeUrl : ''; //顾问照片
  285. dataList.positiveIdUrl = thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '';
  286. dataList.oppositeIdUrl = thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '';
  287. }
  288. $.ajax({
  289. method: 'post',
  290. dataType: 'json',
  291. url: globalConfig.context + '/api/user/updateUserDetail',
  292. data: dataList
  293. }).done(
  294. function(data) {
  295. this.setState({
  296. loading: false
  297. });
  298. if (!data.error.length) {
  299. //认证状态判定说明
  300. message.success(
  301. (this.state.auditStatus == '0' || this.state.auditStatus == '3') &&
  302. this.state.headPortraitUrl.length
  303. ? '认证审核提交成功,请耐心等待。'
  304. : '保存成功'
  305. );
  306. this.loadInformation();
  307. } else {
  308. message.warning(data.error[0].message);
  309. }
  310. }.bind(this)
  311. );
  312. },
  313. subFun(e) {
  314. e.preventDefault();
  315. this.props.form.validateFields((err, values) => {
  316. if (!err) {
  317. if (this.state.authenticationState == '0' || this.state.authenticationState == '1') {
  318. if ((this.state.headPortraitUrl.length)<1) {
  319. message.warning(this.state.authenticationState == '1' ? '请上传顾问照片!' : '请上传专家照片');
  320. return;
  321. }
  322. // if(!(this.state.lawUrl.length)){
  323. // message.warning('请上传您的律师职业资格证!');
  324. // return;
  325. // }
  326. if(!(this.state.oppositeIdUrl.length)||!(this.state.positiveIdUrl.length)){
  327. message.warning('请上传您的身份证正反照片!');
  328. return;
  329. }
  330. this.setState({
  331. visible: true,
  332. values: values
  333. });
  334. } else {
  335. this.newSubmit(values);
  336. }
  337. }
  338. });
  339. },
  340. handleOk() {
  341. this.newSubmit(this.state.values);
  342. this.setState({
  343. visible: false
  344. });
  345. },
  346. handleCancel() {
  347. this.setState({
  348. visible: false
  349. });
  350. },
  351. //顾问选择法律顾问
  352. handleSelectChange(value) {
  353. if (value == '4') {
  354. this.setState({
  355. lawState: true
  356. });
  357. } else {
  358. this.setState({
  359. lawState: false
  360. });
  361. }
  362. },
  363. getHeadPortraitUrl(e) {
  364. this.setState({ headPortraitUrl: e });
  365. },
  366. getPositiveIdUrl(e) {
  367. this.setState({ positiveIdUrl: e });
  368. },
  369. getOppositeIdUrl(e) {
  370. this.setState({ oppositeIdUrl: e });
  371. },
  372. componentWillMount() {
  373. this.loadInformation();
  374. },
  375. authenticationChange(e){
  376. this.setState({
  377. authenticationState: e.target.value,
  378. });
  379. if(this.state.auditStatus=='3'){
  380. this.loadInformation();
  381. }
  382. },
  383. componentWillReceiveProps(nextProps) {},
  384. render() {
  385. const { getFieldDecorator } = this.props.form;
  386. const { MonthPicker } = DatePicker;
  387. const formItemLayout = {
  388. labelCol: {
  389. span: 6
  390. },
  391. wrapperCol: {
  392. span: 14
  393. }
  394. };
  395. const theData = this.state.data || [];
  396. return (
  397. <div className="unit-wrap">
  398. <Form layout="horizontal" onSubmit={this.subFun} id="demand-form" style={{ width: '80%' }}>
  399. <Spin spinning={this.state.loading}>
  400. <Row style={{ marginBottom: 20 }}>
  401. <Col offset={2} span={4}>
  402. <h4 style={{ fontSize: 20 }}>个人资料</h4>
  403. </Col>
  404. </Row>
  405. <div className="clearfix">
  406. {this.state.auditStatus == '0' ? (
  407. <FormItem className="half-item" {...formItemLayout} label="姓名">
  408. {getFieldDecorator('identifyName', {
  409. rules: [ { required: true, message: '此项为必填项!' } ],
  410. initialValue: theData.identifyName
  411. })(<Input placeholder="输入姓名" maxLength={128} />)}
  412. </FormItem>
  413. ) : (
  414. <FormItem className="half-item" {...formItemLayout} label="姓名">
  415. <span>{theData.identifyName}</span>
  416. </FormItem>
  417. )}
  418. <FormItem className="half-item" {...formItemLayout} label="手机号码">
  419. <span>{theData.mobile}</span>
  420. </FormItem>
  421. {this.state.auditStatus == '0' ? (
  422. <FormItem className="half-item" {...formItemLayout} label="社会属性">
  423. {getFieldDecorator('societyTag', {
  424. rules: [ { required: true, message: '此项为必填项!' } ],
  425. initialValue: theData.societyTag || undefined
  426. })(
  427. <Select placeholder="客户社会属性" placeholder="请选择社会属性">
  428. {socialAttribute.map(function(item) {
  429. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  430. })}
  431. </Select>
  432. )}
  433. </FormItem>
  434. ) : (
  435. <FormItem className="half-item" {...formItemLayout} label="社会属性">
  436. <span>{getSocialAttribute(theData.societyTag)}</span>
  437. </FormItem>
  438. )}
  439. <FormItem className="half-item" {...formItemLayout} label="行业">
  440. {getFieldDecorator('industry', {
  441. rules: [ { required: true, message: '此项为必填项!' } ],
  442. initialValue: theData.industry ? theData.industry.toString() : undefined
  443. })(
  444. <Select placeholder="选择行业">
  445. {industry.map(function(item) {
  446. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  447. })}
  448. </Select>
  449. )}
  450. </FormItem>
  451. <FormItem className="half-item" {...formItemLayout} label="性别">
  452. {getFieldDecorator('sex', {
  453. initialValue: theData.sex
  454. })(
  455. <Radio.Group>
  456. <Radio value={'男'}>男</Radio>
  457. <Radio value={'女'}>女</Radio>
  458. </Radio.Group>
  459. )}
  460. </FormItem>
  461. <FormItem className="half-item" {...formItemLayout} label="出生日期">
  462. <MonthPicker
  463. value={this.state.yearMonth ? moment(this.state.yearMonth, monthFormat) : undefined}
  464. format={monthFormat}
  465. onChange={(time, times) => {
  466. this.setState({ yearMonth: time, yearList: times });
  467. }}
  468. />
  469. </FormItem>
  470. <FormItem className="half-item" {...formItemLayout} label="身份证号码">
  471. {getFieldDecorator('idNumber', {
  472. initialValue: theData.idNumber
  473. })(<Input placeholder="身份证号码" maxLength={20} />)}
  474. </FormItem>
  475. </div>
  476. <div className="clearfix">
  477. <FormItem className="half-item" {...formItemLayout} label="省-市-区">
  478. {getFieldDecorator('ProvinceCity', {
  479. rules: [ { required: true, message: '此项为必填项!' } ],
  480. initialValue: this.state.ProvinceCity
  481. })(<Cascader options={areaSelect()} placeholder="选择城市" />)}
  482. </FormItem>
  483. <FormItem className="half-item" {...formItemLayout} label="通信地址">
  484. {getFieldDecorator('postalAddress', {
  485. initialValue: theData.postalAddress
  486. })(<Input placeholder="输入通信地址" maxLength={255} />)}
  487. </FormItem>
  488. <FormItem className="half-item" {...formItemLayout} label="固定电话">
  489. {getFieldDecorator('fixedTel', {
  490. initialValue: theData.fixedTel
  491. })(<Input placeholder="输入固定电话" maxLength={13} />)}
  492. </FormItem>
  493. <FormItem className="half-item" {...formItemLayout} label="QQ">
  494. {getFieldDecorator('qq', {
  495. initialValue: theData.qq
  496. })(<Input placeholder="输入qq" maxLength={16} />)}
  497. </FormItem>
  498. <FormItem className="half-item" {...formItemLayout} label="电子邮箱">
  499. {getFieldDecorator('email', {
  500. initialValue: theData.email
  501. })(<Input placeholder="输入电子邮箱" maxLength={128} />)}
  502. </FormItem>
  503. </div>
  504. <div className="clearfix">
  505. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="个人简介">
  506. {getFieldDecorator('introduction', {
  507. initialValue: theData.introduction,
  508. rules: [ { required: true, message: '此项为必填项!' } ]
  509. })(
  510. <Input
  511. type="textarea"
  512. rows={4}
  513. maxLength={512}
  514. placeholder="输入个人简介,比如案例、简介、从业时间、服务企业等"
  515. />
  516. )}
  517. </FormItem>
  518. </div>
  519. {(this.state.expert == '0' ||
  520. this.state.auditStatus == '0' ||
  521. this.state.expert == null ||
  522. this.state.auditStatus == '3') &&
  523. this.state.type != null ? (
  524. <div>
  525. <div className="clearfix btnGrounp">
  526. <Radio.Group
  527. value={this.state.authenticationState}
  528. onChange={this.authenticationChange}
  529. >
  530. {/* <Radio.Button value="0">专家认证</Radio.Button> */}
  531. <Radio.Button value="1">顾问认证</Radio.Button>
  532. </Radio.Group>
  533. <Button
  534. type="dashed"
  535. style={{ marginLeft: 20 }}
  536. onClick={(e) => {
  537. this.setState({ authenticationState: undefined });
  538. }}
  539. >
  540. 暂不认证
  541. </Button>
  542. <span style={{ marginLeft: 10, color: '#f00' }}>
  543. {this.state.auditStatus == '3' ? '(认证失败:' + this.state.authMessage + ')' : ''}
  544. </span>
  545. </div>
  546. {this.state.authenticationState == '0' &&
  547. (this.state.auditStatus == '0' || this.state.auditStatus == '3') ? (
  548. <div className="patentBody">
  549. <FormItem className="half-item" {...formItemLayout} label="毕业院校">
  550. {getFieldDecorator('graduateSchool', {
  551. initialValue: theData.graduateSchool,
  552. rules: [ { required: true, message: '此项为必填项!' } ]
  553. })(<Input placeholder="输入毕业院校全称" maxLength={32} />)}
  554. </FormItem>
  555. <FormItem className="half-item" {...formItemLayout} label="专业类别">
  556. {getFieldDecorator('majorCategory', {
  557. initialValue: theData.majorCategory,
  558. rules: [ { required: true, message: '此项为必填项!' } ]
  559. })(<Input placeholder="输入专业" maxLength={16} />)}
  560. </FormItem>
  561. <FormItem className="half-item" {...formItemLayout} label="职业资格">
  562. {getFieldDecorator('qualification', {
  563. initialValue: theData.qualification,
  564. rules: [ { required: true, message: '此项为必填项!' } ]
  565. })(<Input placeholder="输入职业资格" maxLength={32} />)}
  566. </FormItem>
  567. <FormItem className="half-item" {...formItemLayout} label="就职单位">
  568. {getFieldDecorator('workUnit', {
  569. initialValue: theData.workUnit,
  570. rules: [ { required: true, message: '此项为必填项!' } ]
  571. })(<Input placeholder="输入就职单位全称" maxLength={64} />)}
  572. </FormItem>
  573. <FormItem className="half-item" {...formItemLayout} label="职称">
  574. {getFieldDecorator('professionalTitle', {
  575. initialValue: theData.professionalTitle,
  576. rules: [ { required: true, message: '此项为必填项!' } ]
  577. })(<Input placeholder="输入职称" maxLength={32} />)}
  578. </FormItem>
  579. </div>
  580. ) : this.state.authenticationState == '1' ? (
  581. <div>
  582. <FormItem className="half-item" {...formItemLayout} label="顾问类型">
  583. {getFieldDecorator('adviserType', {
  584. rules: [ { required: true, message: '此项为必填项!' } ],
  585. initialValue:
  586. theData.consultantType || theData.consultantType == '0'
  587. ? theData.consultantType.toString()
  588. : undefined
  589. })(
  590. <Select
  591. placeholder="选择类型"
  592. onChange={this.handleSelectChange.bind(this)}
  593. >
  594. {adviserType.map(function(item) {
  595. return (
  596. <Select.Option key={item.value}>{item.key}</Select.Option>
  597. );
  598. })}
  599. </Select>
  600. )}
  601. </FormItem>
  602. </div>
  603. ) : (
  604. ''
  605. )}
  606. {this.state.lawState && this.state.authenticationState == '1' ? (
  607. <div className="clearfix">
  608. <div className="clearfix">
  609. <FormItem className="half-item" {...formItemLayout} label="律师事务所">
  610. {getFieldDecorator('workUnit1', {
  611. rules: [ { required: true, message: '此项为必填项!' } ],
  612. initialValue: theData.workUnit1
  613. })(<Input placeholder="请填写所在律师事务所全称" />)}
  614. </FormItem>
  615. </div>
  616. <div className="clearfix">
  617. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="典型案例">
  618. {getFieldDecorator('typicalCase', {
  619. initialValue: theData.typicalCase,
  620. rules: [ { required: true, message: '此项为必填项!' } ]
  621. })(
  622. <Input
  623. type="textarea"
  624. rows={4}
  625. maxLength={10000}
  626. placeholder="输入典型案例"
  627. />
  628. )}
  629. </FormItem>
  630. </div>
  631. </div>
  632. ) : (
  633. ''
  634. )}
  635. {this.state.authenticationState == '1' || this.state.authenticationState == '0' ? (
  636. <div className="clearfix pictures">
  637. <div className="clearfix">
  638. <FormItem
  639. className="picWidth"
  640. labelCol={{ span: 9 }}
  641. wrapperCol={{ span: 10 }}
  642. label={
  643. <span>
  644. <strong style={{ color: '#f00' }}> * </strong>
  645. <span>
  646. {this.state.authenticationState == '0' ? '专家照片' : '顾问照片'}
  647. </span>
  648. </span>
  649. }
  650. >
  651. <PicturesWall
  652. fileList={this.getHeadPortraitUrl}
  653. pictureUrl={this.state.headPortraitUrl}
  654. />
  655. <p>建议:图片要清晰。</p>
  656. </FormItem>
  657. {this.state.lawState && this.state.authenticationState == '1' ? (
  658. <FormItem
  659. className="picWidth"
  660. labelCol={{ span: 9 }}
  661. wrapperCol={{ span: 10 }}
  662. label={
  663. <span>
  664. <strong style={{ color: '#f00' }}> * </strong>
  665. <span>律师职业资格证</span>
  666. </span>
  667. }
  668. >
  669. <PicturesWall
  670. fileList={(e) => {
  671. this.setState({ lawUrl: e });
  672. }}
  673. pictureUrl={this.state.lawUrl}
  674. />
  675. <p>建议:图片要清晰。</p>
  676. </FormItem>
  677. ) : (
  678. ''
  679. )}
  680. </div>
  681. <FormItem
  682. className="picWidth"
  683. labelCol={{ span: 9 }}
  684. wrapperCol={{ span: 10 }}
  685. label={
  686. <span>
  687. <strong style={{ color: '#f00' }}>*</strong>
  688. <span>身份证正面</span>
  689. </span>
  690. }
  691. >
  692. <PicturesWall
  693. fileList={this.getPositiveIdUrl}
  694. pictureUrl={this.state.positiveIdUrl}
  695. />
  696. <p>建议:图片要清晰。</p>
  697. </FormItem>
  698. <FormItem
  699. className="picWidth"
  700. labelCol={{ span: 9 }}
  701. wrapperCol={{ span: 10 }}
  702. label={
  703. <span>
  704. <strong style={{ color: '#f00' }}>*</strong>
  705. <span>身份证反面</span>
  706. </span>
  707. }
  708. >
  709. <PicturesWall
  710. fileList={this.getOppositeIdUrl}
  711. pictureUrl={this.state.oppositeIdUrl}
  712. />
  713. <p>建议:图片要清晰。</p>
  714. </FormItem>
  715. </div>
  716. ) : (
  717. ''
  718. )}
  719. </div>
  720. ) : (this.state.auditStatus == '2' || this.state.auditStatus == '1') &&
  721. this.state.expert == '1' ? (
  722. <div>
  723. <div className="authState">
  724. 专家认证<span>({getAuthState(this.state.auditStatus)})</span>
  725. </div>
  726. <FormItem className="half-item" {...formItemLayout} label="毕业院校">
  727. <span>{theData.graduateSchool}</span>
  728. </FormItem>
  729. <FormItem className="half-item" {...formItemLayout} label="专业类别">
  730. <span>{theData.majorCategory}</span>
  731. </FormItem>
  732. <FormItem className="half-item" {...formItemLayout} label="职业资格">
  733. <span>{theData.qualification}</span>
  734. </FormItem>
  735. <FormItem className="half-item" {...formItemLayout} label="就职单位">
  736. <span>{theData.workUnit}</span>
  737. </FormItem>
  738. <FormItem className="half-item" {...formItemLayout} label="职称">
  739. <span>{theData.professionalTitle}</span>
  740. </FormItem>
  741. <div className="clearfix">
  742. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 13 }} label="专家照片">
  743. <Upload
  744. className="demandDetailShow-upload"
  745. listType="picture-card"
  746. fileList={this.state.headPortraitUrl}
  747. onPreview={(file) => {
  748. this.setState({
  749. previewImage: file.url || file.thumbUrl,
  750. previewVisible: true
  751. });
  752. }}
  753. />
  754. <Modal
  755. maskClosable={false}
  756. footer={null}
  757. visible={this.state.previewVisible}
  758. onCancel={() => {
  759. this.setState({ previewVisible: false });
  760. }}
  761. >
  762. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  763. </Modal>
  764. </FormItem>
  765. </div>
  766. <FormItem
  767. className="picWidth"
  768. labelCol={{ span: 9 }}
  769. wrapperCol={{ span: 10 }}
  770. label="身份证正面"
  771. >
  772. <div className="clearfix">
  773. <Upload
  774. className="demandDetailShow-upload"
  775. listType="picture-card"
  776. fileList={this.state.positiveIdUrl}
  777. onPreview={(file) => {
  778. this.setState({
  779. previewImage: file.url || file.thumbUrl,
  780. previewVisible: true
  781. });
  782. }}
  783. />
  784. <Modal
  785. maskClosable={false}
  786. footer={null}
  787. visible={this.state.previewVisible}
  788. onCancel={() => {
  789. this.setState({ previewVisible: false });
  790. }}
  791. >
  792. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  793. </Modal>
  794. </div>
  795. </FormItem>
  796. <FormItem
  797. className="picWidth"
  798. labelCol={{ span: 9 }}
  799. wrapperCol={{ span: 10 }}
  800. label="身份证反面"
  801. >
  802. <div className="clearfix">
  803. <Upload
  804. className="demandDetailShow-upload"
  805. listType="picture-card"
  806. fileList={this.state.oppositeIdUrl}
  807. onPreview={(file) => {
  808. this.setState({
  809. previewImage: file.url || file.thumbUrl,
  810. previewVisible: true
  811. });
  812. }}
  813. />
  814. <Modal
  815. maskClosable={false}
  816. footer={null}
  817. visible={this.state.previewVisible}
  818. onCancel={() => {
  819. this.setState({ previewVisible: false });
  820. }}
  821. >
  822. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  823. </Modal>
  824. </div>
  825. </FormItem>
  826. </div>
  827. ) : (this.state.auditStatus == '2' || this.state.auditStatus == '1') &&
  828. this.state.expert == '2' ? (
  829. <div className="clearfix">
  830. <div className="authState">
  831. 顾问认证<span>({getAuthState(this.state.auditStatus)})</span>
  832. </div>
  833. <FormItem className="half-item" {...formItemLayout} label="顾问类型">
  834. <span>{getAdviserType(theData.consultantType)}</span>
  835. </FormItem>
  836. {theData.consultantType == '4' ? (
  837. <div className="clearfix">
  838. <div className="clearfix">
  839. <FormItem className="half-item" {...formItemLayout} label="律师事务所">
  840. <span>{theData.workUnit1}</span>
  841. </FormItem>
  842. </div>
  843. <div className="clearfix">
  844. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="典型案例">
  845. <span>{theData.typicalCase}</span>
  846. </FormItem>
  847. </div>
  848. </div>
  849. ) : (
  850. ''
  851. )}
  852. <div className="clearfix">
  853. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="顾问照片">
  854. <Upload
  855. className="demandDetailShow-upload"
  856. listType="picture-card"
  857. fileList={this.state.headPortraitUrl}
  858. onPreview={(file) => {
  859. this.setState({
  860. previewImage: file.url || file.thumbUrl,
  861. previewVisible: true
  862. });
  863. }}
  864. />
  865. <Modal
  866. maskClosable={false}
  867. footer={null}
  868. visible={this.state.previewVisible}
  869. onCancel={() => {
  870. this.setState({ previewVisible: false });
  871. }}
  872. >
  873. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  874. </Modal>
  875. </FormItem>
  876. {theData.consultantType == '4' && (
  877. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="律师职业资格证">
  878. <Upload
  879. className="demandDetailShow-upload"
  880. listType="picture-card"
  881. fileList={this.state.lawUrl}
  882. onPreview={(file) => {
  883. this.setState({
  884. previewImage: file.url || file.thumbUrl,
  885. previewVisible: true
  886. });
  887. }}
  888. />
  889. <Modal
  890. maskClosable={false}
  891. footer={null}
  892. visible={this.state.previewVisible}
  893. onCancel={() => {
  894. this.setState({ previewVisible: false });
  895. }}
  896. >
  897. <img
  898. alt=""
  899. style={{ width: '100%' }}
  900. src={this.state.previewImage || ''}
  901. />
  902. </Modal>
  903. </FormItem>
  904. )}
  905. </div>
  906. <div>
  907. <FormItem
  908. className="picWidth"
  909. labelCol={{ span: 9 }}
  910. wrapperCol={{ span: 10 }}
  911. label="身份证正面"
  912. >
  913. <div className="clearfix">
  914. <Upload
  915. className="demandDetailShow-upload"
  916. listType="picture-card"
  917. fileList={this.state.positiveIdUrl}
  918. onPreview={(file) => {
  919. this.setState({
  920. previewImage: file.url || file.thumbUrl,
  921. previewVisible: true
  922. });
  923. }}
  924. />
  925. <Modal
  926. maskClosable={false}
  927. footer={null}
  928. visible={this.state.previewVisible}
  929. onCancel={() => {
  930. this.setState({ previewVisible: false });
  931. }}
  932. >
  933. <img
  934. alt=""
  935. style={{ width: '100%' }}
  936. src={this.state.previewImage || ''}
  937. />
  938. </Modal>
  939. </div>
  940. </FormItem>
  941. <FormItem
  942. className="picWidth"
  943. labelCol={{ span: 9 }}
  944. wrapperCol={{ span: 10 }}
  945. label="身份证反面"
  946. >
  947. <div className="clearfix">
  948. <Upload
  949. className="demandDetailShow-upload"
  950. listType="picture-card"
  951. fileList={this.state.oppositeIdUrl}
  952. onPreview={(file) => {
  953. this.setState({
  954. previewImage: file.url || file.thumbUrl,
  955. previewVisible: true
  956. });
  957. }}
  958. />
  959. <Modal
  960. maskClosable={false}
  961. footer={null}
  962. visible={this.state.previewVisible}
  963. onCancel={() => {
  964. this.setState({ previewVisible: false });
  965. }}
  966. >
  967. <img
  968. alt=""
  969. style={{ width: '100%' }}
  970. src={this.state.previewImage || ''}
  971. />
  972. </Modal>
  973. </div>
  974. </FormItem>
  975. </div>
  976. </div>
  977. ) : (
  978. ''
  979. )}
  980. <div className="clearfix">
  981. <Row style={{ marginBottom: 20 }}>
  982. <Col offset={3} span={4}>
  983. <Button size="large" className="set-submit" type="primary" htmlType="submit">
  984. 保存
  985. </Button>
  986. </Col>
  987. </Row>
  988. </div>
  989. </Spin>
  990. </Form>
  991. <Modal visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
  992. {this.state.authenticationState == '0' && <p>是否申请专家认证?注意:认证成功后,您的信息将在本平台展示。</p>}
  993. {this.state.authenticationState == '1' && <p>是否申请顾问认证?注意:认证成功后,您的信息将在本平台展示。</p>}
  994. </Modal>
  995. </div>
  996. );
  997. }
  998. });
  999. export default Form.create()(Expert);