company.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  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. leftPicArr.push(item.response.data);
  188. });
  189. lifePhotoUrl = leftPicArr.join(",");
  190. };
  191. if (!err) {
  192. this.props.spinState(true);
  193. let ktt=values.companyType;
  194. let sktt;
  195. switch(ktt){
  196. case '待定':
  197. sktt='0';
  198. break;
  199. case '投资机构':
  200. sktt='1';
  201. break;
  202. };
  203. $.ajax({
  204. method: "POST",
  205. dataType: "json",
  206. crossDomain: false,
  207. url: globalConfig.context + "/api/user/orgPro",
  208. data: {
  209. "iid": this.state.iid,
  210. "pid": this.state.pid,
  211. "identityType": values.identityType,
  212. "companyType":sktt,
  213. "companyName": values.unitName,
  214. "locationProvince": values.province[0],
  215. "locationCity": values.province[1],
  216. "locationArea": values.province[2],
  217. "unitSize": values.unitNumber,
  218. "companyIntroduction": values.unitIntro,
  219. "homeUnit": values.unitFrom,
  220. "logoUrl": this.state.companyLogoUrl,
  221. "publicityPictureUrl": lifePhotoUrl,
  222. "qualification": values.qiyezizhi,
  223. "turnover": values.turnover,
  224. "collegeAttribute": values.schoolProp,
  225. "collegeEstablishTime": values.schoolTime,
  226. "academician": values.aca,
  227. "doctoralTutor": values.PhDTutor,
  228. "masterTutor": values.MSTutor,
  229. "otherExpert": values.otherExperts,
  230. "nationalLab": values.StateKeyLab,
  231. "educationLab": values.EduKeyLab,
  232. "enterpriseCenter": values.ComCenter,
  233. "otherCenter": values.otherCenter,
  234. "institutionEstablishTime": values.resTime
  235. }
  236. }).done(function (data) {
  237. if (!data.error.length) {
  238. message.success('保存成功!');
  239. this.getData();
  240. } else {
  241. message.warning(data.error[0].message);
  242. }
  243. }.bind(this)).always(function () {
  244. this.props.spinState(false);
  245. }.bind(this));
  246. }
  247. });
  248. },
  249. idttTypeChange(e) {
  250. if (e === '企业') {
  251. this.setState({
  252. companyDis: 'block',
  253. schoolDis: 'none',
  254. companys:'block',
  255. resDis: 'none'
  256. });
  257. } else if (e === '院校') {
  258. this.setState({
  259. companyDis: 'none',
  260. schoolDis: 'block',
  261. companys:'none',
  262. resDis: 'none'
  263. });
  264. } else if (e === '研究机构') {
  265. this.setState({
  266. companyDis: 'none',
  267. schoolDis: 'none',
  268. companys:'none',
  269. resDis: 'block'
  270. });
  271. } else {
  272. this.setState({
  273. companyDis: 'none',
  274. schoolDis: 'none',
  275. companys:'none',
  276. resDis: 'none'
  277. });
  278. }
  279. },
  280. downloadPic(type) {
  281. window.open(globalConfig.context + "/open/downLoadPicture?path=" + type)
  282. },
  283. companyLogoUrl(e) {
  284. this.state.companyLogoUrl = e;
  285. },
  286. companyLifePicUrl(e) {
  287. this.state.companyLifePicObj = e;
  288. },
  289. componentWillMount() {
  290. this.getData();
  291. },
  292. render() {
  293. const FormItem = Form.Item;
  294. const Option = Select.Option;
  295. const { getFieldDecorator } = this.props.form;
  296. const formItemLayout = {
  297. labelCol: { span: 3 },
  298. wrapperCol: { span: 12 },
  299. };
  300. const _me = this;
  301. return (
  302. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  303. <FormItem
  304. labelCol={{ span: 3 }}
  305. wrapperCol={{ span: 8 }}
  306. label="身份类型"
  307. >
  308. {getFieldDecorator('identityType', {
  309. initialValue: this.state.idttType
  310. })(
  311. <Select className="acc-edu-lvl" onChange={this.idttTypeChange}>
  312. {
  313. eduLevelList.map(function (item) {
  314. return <Option key={item.key} >{item.key}</Option>
  315. })
  316. }
  317. </Select>
  318. )}
  319. </FormItem>
  320. <FormItem style={{ 'display': this.state.companys}}
  321. labelCol={{ span: 3 }}
  322. wrapperCol={{ span: 8 }}
  323. label="企业类型"
  324. >
  325. {getFieldDecorator('companyType', {
  326. initialValue: this.state.companyt
  327. })(
  328. <Select className="acc-edu-lvl">
  329. {
  330. mechanism.map(function (item) {
  331. return <Option key={item.key} >{item.key}</Option>
  332. })
  333. }
  334. </Select>
  335. )}
  336. </FormItem>
  337. <FormItem
  338. {...formItemLayout}
  339. label="单位名称"
  340. >
  341. {getFieldDecorator('unitName', {
  342. initialValue: this.state.unitName
  343. })(
  344. <Input />
  345. )}
  346. </FormItem>
  347. <FormItem
  348. {...formItemLayout}
  349. label="所在地"
  350. >
  351. {getFieldDecorator('province', {
  352. initialValue: this.state.province || []
  353. })(
  354. <Cascader options={areaSelect()} placeholder="请选择所在地" />
  355. )}
  356. </FormItem>
  357. <FormItem
  358. labelCol={{ span: 3 }}
  359. wrapperCol={{ span: 20 }}
  360. label="单位简介"
  361. >
  362. {getFieldDecorator('unitIntro', {
  363. initialValue: this.state.unitIntro
  364. })(
  365. <Input type="textarea"
  366. placeholder="全面介绍自己,让商友更深入了解您,内容长度不超过1000个字。"
  367. rows={6} />
  368. )}
  369. <p>还可输入{
  370. (() => {
  371. if (_me.props.form.getFieldValue('unitIntro') && _me.props.form.getFieldValue('unitIntro').length) {
  372. return 1000 - _me.props.form.getFieldValue('unitIntro').length;
  373. } else {
  374. return 1000;
  375. }
  376. })()
  377. }字/1000</p>
  378. </FormItem>
  379. <FormItem
  380. {...formItemLayout}
  381. label="归属单位"
  382. >
  383. {getFieldDecorator('unitFrom', {
  384. initialValue: this.state.unitFrom
  385. })(
  386. <Input placeholder="非法人单位填写。" />
  387. )}
  388. </FormItem>
  389. <FormItem style={{ 'display': this.state.companyDis }}
  390. labelCol={{ span: 3 }}
  391. wrapperCol={{ span: 8 }}
  392. label="企业资质"
  393. >
  394. {getFieldDecorator('qiyezizhi', {
  395. initialValue: this.state.qiyezizhi
  396. })(
  397. <Select className="acc-edu-lvl">
  398. {
  399. zizhiArr.map(function (item, i) {
  400. return <Option key={i} value={item} >{item}</Option>
  401. })
  402. }
  403. </Select>
  404. )}
  405. </FormItem>
  406. <FormItem style={{ 'display': this.state.schoolDis }}
  407. labelCol={{ span: 3 }}
  408. wrapperCol={{ span: 8 }}
  409. label="院校属性"
  410. >
  411. {getFieldDecorator('schoolProp', {
  412. initialValue: this.state.schoolProp
  413. })(
  414. <Select className="acc-edu-lvl">
  415. {
  416. schoolArr.map(function (item, i) {
  417. return <Option key={i} value={item} >{item}</Option>
  418. })
  419. }
  420. </Select>
  421. )}
  422. </FormItem>
  423. <FormItem style={{ 'display': this.state.schoolDis }}
  424. {...formItemLayout}
  425. label="创办时间"
  426. >
  427. {getFieldDecorator('schoolTime', {
  428. initialValue: this.state.schoolTime || 0
  429. })(
  430. <InputNumber />
  431. )}
  432. <span>年</span>
  433. </FormItem>
  434. <div className="school-props clearfix" style={{ 'display': this.state.schoolDis }}>
  435. <FormItem
  436. labelCol={{ span: 10 }}
  437. wrapperCol={{ span: 12 }}
  438. label="院士"
  439. >
  440. {getFieldDecorator('aca', {
  441. initialValue: this.state.aca || 0
  442. })(
  443. <InputNumber />
  444. )}
  445. <span>人</span>
  446. </FormItem>
  447. <FormItem
  448. labelCol={{ span: 10 }}
  449. wrapperCol={{ span: 12 }}
  450. label="博士生导师"
  451. >
  452. {getFieldDecorator('PhDTutor', {
  453. initialValue: this.state.PhDTutor || 0
  454. })(
  455. <InputNumber />
  456. )}
  457. <span>人</span>
  458. </FormItem>
  459. <FormItem
  460. labelCol={{ span: 10 }}
  461. wrapperCol={{ span: 12 }}
  462. label="硕士生导师"
  463. >
  464. {getFieldDecorator('MSTutor', {
  465. initialValue: this.state.MSTutor || 0
  466. })(
  467. <InputNumber />
  468. )}
  469. <span>人</span>
  470. </FormItem>
  471. <FormItem
  472. labelCol={{ span: 10 }}
  473. wrapperCol={{ span: 12 }}
  474. label="其他专家"
  475. >
  476. {getFieldDecorator('otherExperts', {
  477. initialValue: this.state.otherExperts || 0
  478. })(
  479. <InputNumber />
  480. )}
  481. <span>人</span>
  482. </FormItem>
  483. <FormItem
  484. labelCol={{ span: 10 }}
  485. wrapperCol={{ span: 12 }}
  486. label="国家级重点实验室"
  487. >
  488. {getFieldDecorator('StateKeyLab', {
  489. initialValue: this.state.StateKeyLab || 0
  490. })(
  491. <InputNumber />
  492. )}
  493. <span>所</span>
  494. </FormItem>
  495. <FormItem
  496. labelCol={{ span: 10 }}
  497. wrapperCol={{ span: 12 }}
  498. label="教育部重点实验室"
  499. >
  500. {getFieldDecorator('EduKeyLab', {
  501. initialValue: this.state.EduKeyLab || 0
  502. })(
  503. <InputNumber />
  504. )}
  505. <span>所</span>
  506. </FormItem>
  507. <FormItem
  508. labelCol={{ span: 10 }}
  509. wrapperCol={{ span: 12 }}
  510. label="企业共建研究中心"
  511. >
  512. {getFieldDecorator('ComCenter', {
  513. initialValue: this.state.ComCenter || 0
  514. })(
  515. <InputNumber />
  516. )}
  517. <span>所</span>
  518. </FormItem>
  519. <FormItem
  520. labelCol={{ span: 10 }}
  521. wrapperCol={{ span: 12 }}
  522. label="其他研究中心"
  523. >
  524. {getFieldDecorator('otherCenter', {
  525. initialValue: this.state.otherCenter || 0
  526. })(
  527. <InputNumber />
  528. )}
  529. <span>所</span>
  530. </FormItem>
  531. </div>
  532. <FormItem style={{ 'display': this.state.resDis }}
  533. {...formItemLayout}
  534. label="创办时间"
  535. >
  536. {getFieldDecorator('resTime', {
  537. initialValue: this.state.resTime || 0
  538. })(
  539. <InputNumber />
  540. )}
  541. <span>年</span>
  542. </FormItem>
  543. <FormItem
  544. {...formItemLayout}
  545. label="LOGO"
  546. labelCol={{ span: 3 }}
  547. wrapperCol={{ span: 20 }}
  548. >
  549. {getFieldDecorator('avatar')(
  550. <Avatar name="companyLogo" urlData={this.companyLogoUrl} logoUrl={this.state.logoUrl} />
  551. )}
  552. </FormItem>
  553. <div className="set-explain">
  554. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  555. </div>
  556. <FormItem
  557. labelCol={{ span: 3 }}
  558. wrapperCol={{ span: 21 }}
  559. label="宣传图片"
  560. >
  561. {getFieldDecorator('companyLifePic')(
  562. <PicturesWall fileList={this.companyLifePicUrl} lifePhotoList={this.state.companyLifePicList} />
  563. )}
  564. </FormItem>
  565. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  566. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  567. </FormItem>
  568. </Form >
  569. );
  570. },
  571. }));
  572. const Person = React.createClass({
  573. getInitialState() {
  574. return {
  575. loading: false
  576. };
  577. },
  578. spinChange(e) {
  579. this.setState({
  580. loading: e
  581. });
  582. },
  583. render() {
  584. return (
  585. <Spin spinning={this.state.loading} className='spin-box'>
  586. <div className="set-person">
  587. <div className="acc-detail">
  588. <p className="acc-title">单位资料</p>
  589. <PersonFrom spinState={this.spinChange} />
  590. </div>
  591. </div>
  592. </Spin>
  593. )
  594. }
  595. });
  596. export default Person;