expert.jsx 15 KB

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