company.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
  1. import React from 'react';
  2. import { Input, Button, Form, Select, Upload, Icon, Spin, message, InputNumber, Modal, Cascader } from 'antd';
  3. import './person.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. import { areaSelect } from '../../NewDicProvinceList';
  7. import { splitUrl, getBase64, beforeUpload } from '../../tools.js';
  8. import { eduLevelList, zizhiArr, schoolArr ,mechanism} from '../../dataDic.js';
  9. class Avatar extends React.Component {
  10. constructor(props) {
  11. super(props);
  12. this.state = {
  13. imageUrl: '',
  14. propsbool: true,
  15. }
  16. }
  17. handleChange(info) {
  18. if (info.file.status === 'done') {
  19. // Get this url from response in real world.
  20. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
  21. this.props.urlData(info.file.response.data);
  22. }
  23. }
  24. componentWillReceiveProps(nextProps) {
  25. if (nextProps.logoUrl && this.state.propsbool) {
  26. this.state.imageUrl = globalConfig.avatarHost + "/upload" + nextProps.logoUrl;
  27. this.state.propsbool = false;
  28. }
  29. }
  30. render() {
  31. const imageUrl = this.state.imageUrl;
  32. return (
  33. <Upload
  34. className="avatar-uploader"
  35. name="avatar"
  36. showUploadList={false}
  37. action={globalConfig.context + "/api/user/avatar/uploadReplace"}
  38. data={{ 'sign': this.props.name }}
  39. beforeUpload={beforeUpload}
  40. onChange={this.handleChange.bind(this)}
  41. >
  42. {
  43. imageUrl ?
  44. <img src={imageUrl} role="presentation" className="avatar" /> :
  45. <Icon type="plus" className="avatar-uploader-trigger" />
  46. }
  47. </Upload>
  48. );
  49. }
  50. };
  51. class PicturesWall extends React.Component {
  52. constructor(props) {
  53. super(props);
  54. this.state = {
  55. previewVisible: false,
  56. propsbool: true,
  57. previewImage: '',
  58. fileList: [],
  59. }
  60. }
  61. handleCancel() {
  62. this.setState({ previewVisible: false })
  63. }
  64. handlePreview(file) {
  65. this.setState({
  66. previewImage: file.url || file.thumbUrl,
  67. previewVisible: true,
  68. });
  69. }
  70. handleChange(info) {
  71. let fileList = info.fileList;
  72. this.setState({ fileList });
  73. this.props.fileList(fileList);
  74. }
  75. componentWillReceiveProps(nextProps) {
  76. if (nextProps.lifePhotoList && this.state.propsbool) {
  77. this.state.fileList = nextProps.lifePhotoList;
  78. this.state.propsbool = false;
  79. }
  80. }
  81. render() {
  82. const { previewVisible, previewImage, fileList } = this.state;
  83. const uploadButton = (
  84. <div>
  85. <Icon type="plus" />
  86. <div className="ant-upload-text">Upload</div>
  87. </div>
  88. );
  89. return (
  90. <div className="clearfix">
  91. <Upload
  92. action={globalConfig.context + "/api/user/avatar/upload"}
  93. listType="picture-card"
  94. fileList={fileList}
  95. onPreview={this.handlePreview.bind(this)}
  96. onChange={this.handleChange.bind(this)}
  97. >
  98. {fileList.length >= 9 ? null : uploadButton}
  99. </Upload>
  100. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>
  101. <img alt="" style={{ width: '100%' }} src={previewImage} />
  102. </Modal>
  103. </div>
  104. );
  105. }
  106. };
  107. const PersonFrom = Form.create()(React.createClass({
  108. getData() {
  109. this.props.spinState(true);
  110. $.ajax({
  111. method: "get",
  112. dataType: "json",
  113. url: globalConfig.context + "/api/user/member",
  114. success: function (data) {
  115. if (data.data && data.data.info && data.data.pro) {
  116. let theArr = splitUrl(data.data.info.publicityPictureUrl, ',', globalConfig.avatarHost + '/upload');
  117. let comp=data.data.info.companyType;
  118. let pantt;
  119. switch(comp){
  120. case 0:
  121. pantt='待定';
  122. break;
  123. case 1:
  124. pantt='投资机构';
  125. break;
  126. };
  127. this.setState({
  128. iid: data.data.info.id,
  129. pid: data.data.pro.id,
  130. province: [data.data.info.locationProvince, data.data.info.locationCity, data.data.info.locationArea],
  131. idttType: data.data.info.identityType,
  132. companyt: pantt,
  133. unitName: data.data.info.companyName,
  134. unitNumber: data.data.info.unitSize,
  135. unitIntro: data.data.info.companyIntroduction,
  136. unitFrom: data.data.info.homeUnit,
  137. logoUrl: data.data.info.logoUrl,
  138. publicityPictureUrl: data.data.info.publicityPictureUrl,
  139. companyLifePicList: theArr,
  140. qiyezizhi: data.data.pro.qualification,
  141. turnover: data.data.pro.turnover,
  142. schoolProp: data.data.pro.collegeAttribute,
  143. schoolTime: data.data.pro.collegeEstablishTime,
  144. aca: data.data.pro.academician,
  145. PhDTutor: data.data.pro.doctoralTutor,
  146. MSTutor: data.data.pro.masterTutor,
  147. otherExperts: data.data.pro.otherExpert,
  148. StateKeyLab: data.data.pro.nationalLab,
  149. EduKeyLab: data.data.pro.educationLab,
  150. ComCenter: data.data.pro.enterpriseCenter,
  151. otherCenter: data.data.pro.otherCenter,
  152. resTime: data.data.pro.institutionEstablishTime
  153. });
  154. this.idttTypeChange(data.data.info.identityType);
  155. };
  156. }.bind(this),
  157. }).always(function () {
  158. this.props.spinState(false);
  159. }.bind(this));
  160. },
  161. getInitialState() {
  162. return {
  163. loading: false,
  164. idttType: '企业',
  165. companyt:'待定',
  166. companyDis: 'block',
  167. schoolDis: 'none',
  168. resDis: 'none',
  169. companyLifePicObj: [],
  170. aca: 0,
  171. PhDTutor: 0,
  172. MSTutor: 0,
  173. otherExperts: 0,
  174. StateKeyLab: 0,
  175. EduKeyLab: 0,
  176. ComCenter: 0,
  177. otherCenter: 0
  178. };
  179. },
  180. handleSubmit(e) {
  181. e.preventDefault();
  182. this.props.form.validateFields((err, values) => {
  183. let lifePhotoUrl = this.state.publicityPictureUrl;
  184. if (this.state.companyLifePicObj.length) {
  185. let leftPicArr = [];
  186. this.state.companyLifePicObj.map(function (item) {
  187. if ( item.response && item.response.data && item.response.data.length ){
  188. leftPicArr.push(item.response.data);
  189. }
  190. });
  191. lifePhotoUrl = leftPicArr.join(",");
  192. };
  193. if (!err) {
  194. this.props.spinState(true);
  195. let ktt=values.companyType;
  196. let sktt;
  197. switch(ktt){
  198. case '待定':
  199. sktt='0';
  200. break;
  201. case '投资机构':
  202. sktt='1';
  203. break;
  204. };
  205. $.ajax({
  206. method: "POST",
  207. dataType: "json",
  208. crossDomain: false,
  209. url: globalConfig.context + "/api/user/orgPro",
  210. data: {
  211. "iid": this.state.iid,
  212. "pid": this.state.pid,
  213. "identityType": values.identityType,
  214. "companyType":sktt,
  215. "companyName": values.unitName,
  216. "locationProvince": values.province[0],
  217. "locationCity": values.province[1],
  218. "locationArea": values.province[2],
  219. "unitSize": values.unitNumber,
  220. "companyIntroduction": values.unitIntro,
  221. "homeUnit": values.unitFrom,
  222. "logoUrl": this.state.companyLogoUrl,
  223. "publicityPictureUrl": lifePhotoUrl,
  224. "qualification": values.qiyezizhi,
  225. "turnover": values.turnover,
  226. "collegeAttribute": values.schoolProp,
  227. "collegeEstablishTime": values.schoolTime,
  228. "academician": values.aca,
  229. "doctoralTutor": values.PhDTutor,
  230. "masterTutor": values.MSTutor,
  231. "otherExpert": values.otherExperts,
  232. "nationalLab": values.StateKeyLab,
  233. "educationLab": values.EduKeyLab,
  234. "enterpriseCenter": values.ComCenter,
  235. "otherCenter": values.otherCenter,
  236. "institutionEstablishTime": values.resTime
  237. }
  238. }).done(function (data) {
  239. if (!data.error.length) {
  240. message.success('保存成功!');
  241. this.getData();
  242. } else {
  243. message.warning(data.error[0].message);
  244. }
  245. }.bind(this)).always(function () {
  246. this.props.spinState(false);
  247. }.bind(this));
  248. }
  249. });
  250. },
  251. idttTypeChange(e) {
  252. if (e === '企业') {
  253. this.setState({
  254. companyDis: 'block',
  255. schoolDis: 'none',
  256. companys:'block',
  257. resDis: 'none'
  258. });
  259. } else if (e === '院校') {
  260. this.setState({
  261. companyDis: 'none',
  262. schoolDis: 'block',
  263. companys:'none',
  264. resDis: 'none'
  265. });
  266. } else if (e === '研究机构') {
  267. this.setState({
  268. companyDis: 'none',
  269. schoolDis: 'none',
  270. companys:'none',
  271. resDis: 'block'
  272. });
  273. } else {
  274. this.setState({
  275. companyDis: 'none',
  276. schoolDis: 'none',
  277. companys:'none',
  278. resDis: 'none'
  279. });
  280. }
  281. },
  282. downloadPic(type) {
  283. window.open(globalConfig.context + "/open/downLoadPicture?path=" + type)
  284. },
  285. companyLogoUrl(e) {
  286. this.state.companyLogoUrl = e;
  287. },
  288. companyLifePicUrl(e) {
  289. this.state.companyLifePicObj = e;
  290. },
  291. componentWillMount() {
  292. this.getData();
  293. },
  294. render() {
  295. const FormItem = Form.Item;
  296. const Option = Select.Option;
  297. const { getFieldDecorator } = this.props.form;
  298. const formItemLayout = {
  299. labelCol: { span: 3 },
  300. wrapperCol: { span: 12 },
  301. };
  302. const _me = this;
  303. return (
  304. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  305. <FormItem
  306. labelCol={{ span: 3 }}
  307. wrapperCol={{ span: 8 }}
  308. label="身份类型"
  309. >
  310. {getFieldDecorator('identityType', {
  311. initialValue: this.state.idttType
  312. })(
  313. <Select className="acc-edu-lvl" onChange={this.idttTypeChange}>
  314. {
  315. eduLevelList.map(function (item) {
  316. return <Option key={item.key} >{item.key}</Option>
  317. })
  318. }
  319. </Select>
  320. )}
  321. </FormItem>
  322. <FormItem style={{ 'display': this.state.companys}}
  323. labelCol={{ span: 3 }}
  324. wrapperCol={{ span: 8 }}
  325. label="企业类型"
  326. >
  327. {getFieldDecorator('companyType', {
  328. initialValue: this.state.companyt
  329. })(
  330. <Select className="acc-edu-lvl">
  331. {
  332. mechanism.map(function (item) {
  333. return <Option key={item.key} >{item.key}</Option>
  334. })
  335. }
  336. </Select>
  337. )}
  338. </FormItem>
  339. <FormItem
  340. {...formItemLayout}
  341. label="单位名称"
  342. >
  343. {getFieldDecorator('unitName', {
  344. initialValue: this.state.unitName
  345. })(
  346. <Input />
  347. )}
  348. </FormItem>
  349. <FormItem
  350. {...formItemLayout}
  351. label="所在地"
  352. >
  353. {getFieldDecorator('province', {
  354. initialValue: this.state.province || []
  355. })(
  356. <Cascader options={areaSelect()} placeholder="请选择所在地" />
  357. )}
  358. </FormItem>
  359. <FormItem
  360. labelCol={{ span: 3 }}
  361. wrapperCol={{ span: 20 }}
  362. label="单位简介"
  363. >
  364. {getFieldDecorator('unitIntro', {
  365. initialValue: this.state.unitIntro
  366. })(
  367. <Input type="textarea"
  368. placeholder="全面介绍自己,让商友更深入了解您,内容长度不超过1000个字。"
  369. rows={6} />
  370. )}
  371. <p>还可输入{
  372. (() => {
  373. if (_me.props.form.getFieldValue('unitIntro') && _me.props.form.getFieldValue('unitIntro').length) {
  374. return 1000 - _me.props.form.getFieldValue('unitIntro').length;
  375. } else {
  376. return 1000;
  377. }
  378. })()
  379. }字/1000</p>
  380. </FormItem>
  381. <FormItem
  382. {...formItemLayout}
  383. label="归属单位"
  384. >
  385. {getFieldDecorator('unitFrom', {
  386. initialValue: this.state.unitFrom
  387. })(
  388. <Input placeholder="非法人单位填写。" />
  389. )}
  390. </FormItem>
  391. <FormItem style={{ 'display': this.state.companyDis }}
  392. labelCol={{ span: 3 }}
  393. wrapperCol={{ span: 8 }}
  394. label="企业资质"
  395. >
  396. {getFieldDecorator('qiyezizhi', {
  397. initialValue: this.state.qiyezizhi
  398. })(
  399. <Select className="acc-edu-lvl">
  400. {
  401. zizhiArr.map(function (item, i) {
  402. return <Option key={i} value={item} >{item}</Option>
  403. })
  404. }
  405. </Select>
  406. )}
  407. </FormItem>
  408. <FormItem style={{ 'display': this.state.schoolDis }}
  409. labelCol={{ span: 3 }}
  410. wrapperCol={{ span: 8 }}
  411. label="院校属性"
  412. >
  413. {getFieldDecorator('schoolProp', {
  414. initialValue: this.state.schoolProp
  415. })(
  416. <Select className="acc-edu-lvl">
  417. {
  418. schoolArr.map(function (item, i) {
  419. return <Option key={i} value={item} >{item}</Option>
  420. })
  421. }
  422. </Select>
  423. )}
  424. </FormItem>
  425. <FormItem style={{ 'display': this.state.schoolDis }}
  426. {...formItemLayout}
  427. label="创办时间"
  428. >
  429. {getFieldDecorator('schoolTime', {
  430. initialValue: this.state.schoolTime || 0
  431. })(
  432. <InputNumber />
  433. )}
  434. <span>年</span>
  435. </FormItem>
  436. <div className="school-props clearfix" style={{ 'display': this.state.schoolDis }}>
  437. <FormItem
  438. labelCol={{ span: 10 }}
  439. wrapperCol={{ span: 12 }}
  440. label="院士"
  441. >
  442. {getFieldDecorator('aca', {
  443. initialValue: this.state.aca || 0
  444. })(
  445. <InputNumber />
  446. )}
  447. <span>人</span>
  448. </FormItem>
  449. <FormItem
  450. labelCol={{ span: 10 }}
  451. wrapperCol={{ span: 12 }}
  452. label="博士生导师"
  453. >
  454. {getFieldDecorator('PhDTutor', {
  455. initialValue: this.state.PhDTutor || 0
  456. })(
  457. <InputNumber />
  458. )}
  459. <span>人</span>
  460. </FormItem>
  461. <FormItem
  462. labelCol={{ span: 10 }}
  463. wrapperCol={{ span: 12 }}
  464. label="硕士生导师"
  465. >
  466. {getFieldDecorator('MSTutor', {
  467. initialValue: this.state.MSTutor || 0
  468. })(
  469. <InputNumber />
  470. )}
  471. <span>人</span>
  472. </FormItem>
  473. <FormItem
  474. labelCol={{ span: 10 }}
  475. wrapperCol={{ span: 12 }}
  476. label="其他专家"
  477. >
  478. {getFieldDecorator('otherExperts', {
  479. initialValue: this.state.otherExperts || 0
  480. })(
  481. <InputNumber />
  482. )}
  483. <span>人</span>
  484. </FormItem>
  485. <FormItem
  486. labelCol={{ span: 10 }}
  487. wrapperCol={{ span: 12 }}
  488. label="国家级重点实验室"
  489. >
  490. {getFieldDecorator('StateKeyLab', {
  491. initialValue: this.state.StateKeyLab || 0
  492. })(
  493. <InputNumber />
  494. )}
  495. <span>所</span>
  496. </FormItem>
  497. <FormItem
  498. labelCol={{ span: 10 }}
  499. wrapperCol={{ span: 12 }}
  500. label="教育部重点实验室"
  501. >
  502. {getFieldDecorator('EduKeyLab', {
  503. initialValue: this.state.EduKeyLab || 0
  504. })(
  505. <InputNumber />
  506. )}
  507. <span>所</span>
  508. </FormItem>
  509. <FormItem
  510. labelCol={{ span: 10 }}
  511. wrapperCol={{ span: 12 }}
  512. label="企业共建研究中心"
  513. >
  514. {getFieldDecorator('ComCenter', {
  515. initialValue: this.state.ComCenter || 0
  516. })(
  517. <InputNumber />
  518. )}
  519. <span>所</span>
  520. </FormItem>
  521. <FormItem
  522. labelCol={{ span: 10 }}
  523. wrapperCol={{ span: 12 }}
  524. label="其他研究中心"
  525. >
  526. {getFieldDecorator('otherCenter', {
  527. initialValue: this.state.otherCenter || 0
  528. })(
  529. <InputNumber />
  530. )}
  531. <span>所</span>
  532. </FormItem>
  533. </div>
  534. <FormItem style={{ 'display': this.state.resDis }}
  535. {...formItemLayout}
  536. label="创办时间"
  537. >
  538. {getFieldDecorator('resTime', {
  539. initialValue: this.state.resTime || 0
  540. })(
  541. <InputNumber />
  542. )}
  543. <span>年</span>
  544. </FormItem>
  545. <FormItem
  546. {...formItemLayout}
  547. label="LOGO"
  548. labelCol={{ span: 3 }}
  549. wrapperCol={{ span: 20 }}
  550. >
  551. {getFieldDecorator('avatar')(
  552. <Avatar name="companyLogo" urlData={this.companyLogoUrl} logoUrl={this.state.logoUrl} />
  553. )}
  554. </FormItem>
  555. <div className="set-explain">
  556. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  557. </div>
  558. <FormItem
  559. labelCol={{ span: 3 }}
  560. wrapperCol={{ span: 21 }}
  561. label="宣传图片"
  562. >
  563. {getFieldDecorator('companyLifePic')(
  564. <PicturesWall fileList={this.companyLifePicUrl} lifePhotoList={this.state.companyLifePicList} />
  565. )}
  566. </FormItem>
  567. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  568. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  569. </FormItem>
  570. </Form >
  571. );
  572. },
  573. }));
  574. const Person = React.createClass({
  575. getInitialState() {
  576. return {
  577. loading: false
  578. };
  579. },
  580. spinChange(e) {
  581. this.setState({
  582. loading: e
  583. });
  584. },
  585. render() {
  586. return (
  587. <Spin spinning={this.state.loading} className='spin-box'>
  588. <div className="set-person">
  589. <div className="acc-detail">
  590. <p className="acc-title">单位资料</p>
  591. <PersonFrom spinState={this.spinChange} />
  592. </div>
  593. </div>
  594. </Spin>
  595. )
  596. }
  597. });
  598. export default Person;