company.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. import React from 'react';
  2. import { Input, Button, Form, Select, Upload, Icon, Spin, message, InputNumber } from 'antd';
  3. import './person.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. import { addressInit } from '../../tools.js';
  7. function getBase64(img, callback) {
  8. const reader = new FileReader();
  9. reader.addEventListener('load', () => callback(reader.result));
  10. reader.readAsDataURL(img);
  11. };
  12. function beforeUpload(file) {
  13. const isJPG = file.type === 'image/jpeg';
  14. if (!isJPG) {
  15. message.error('You can only upload JPG file!');
  16. }
  17. const isLt2M = file.size / 1024 / 1024 < 2;
  18. if (!isLt2M) {
  19. message.error('Image must smaller than 2MB!');
  20. }
  21. return isJPG && isLt2M;
  22. };
  23. class Avatar extends React.Component {
  24. constructor(props) {
  25. super(props);
  26. this.state = {
  27. imageUrl: ''
  28. }
  29. }
  30. handleChange(info) {
  31. if (info.file.status === 'done') {
  32. // Get this url from response in real world.
  33. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
  34. }
  35. }
  36. render() {
  37. const imageUrl = this.state.imageUrl;
  38. return (
  39. <Upload
  40. className="avatar-uploader"
  41. name="avatar"
  42. showUploadList={false}
  43. action="/upload.do"
  44. beforeUpload={beforeUpload}
  45. onChange={this.handleChange}
  46. >
  47. {
  48. imageUrl ?
  49. <img src={imageUrl} role="presentation" className="avatar" /> :
  50. <Icon type="plus" className="avatar-uploader-trigger" />
  51. }
  52. </Upload>
  53. );
  54. }
  55. };
  56. const PersonFrom = Form.create()(React.createClass({
  57. getData() {
  58. this.props.spinState(true);
  59. $.ajax({
  60. method: "get",
  61. dataType: "json",
  62. url: globalConfig.context + "/api/user/member",
  63. success: function (data) {
  64. if (data.data) {
  65. addressInit('cmbProvince', 'cmbCity', 'cmbArea',
  66. data.data.residenceProvince, data.data.residenceCity, data.data.residenceArea);
  67. this.setState({
  68. nickname: data.data.nickname,
  69. cmbP: data.data.residenceProvince,
  70. cmbC: data.data.residenceCity,
  71. cmbA: data.data.residenceArea,
  72. intro: data.data.personalProfile,
  73. email: data.data.email,
  74. fixTelArea: data.data.fixedTelArea,
  75. fixTel: data.data.fixedTel,
  76. fixTelExtension: data.data.fixedTelExtension,
  77. qq: data.data.qq,
  78. address: data.data.postalAddress,
  79. postcode: data.data.postcode,
  80. });
  81. }
  82. //"personPortraitUrl": "/avadar/4303502988139.jpg",
  83. //"lifePhotoUrl": "/avadar/4303502988131.jpg",
  84. }.bind(this),
  85. }).always(function () {
  86. this.props.spinState(false);
  87. }.bind(this));
  88. },
  89. getInitialState() {
  90. return {
  91. loading: false,
  92. idttType: '企业',
  93. companyDis: 'block',
  94. schoolDis: 'none',
  95. resDis: 'none',
  96. aca: 0,
  97. PhDTutor: 0,
  98. MSTutor: 0,
  99. otherExperts: 0,
  100. StateKeyLab: 0,
  101. EduKeyLab: 0,
  102. ComCenter: 0,
  103. otherCenter: 0
  104. };
  105. },
  106. handleSubmit(e) {
  107. e.preventDefault();
  108. this.props.form.validateFields((err, values) => {
  109. //地址值
  110. let cmbP = document.getElementById('cmbProvince').value;
  111. let cmbC = document.getElementById('cmbCity').value;
  112. let cmbA = document.getElementById('cmbArea').value;
  113. if (!err) {
  114. this.props.spinState(true);
  115. $.ajax({
  116. method: "POST",
  117. dataType: "json",
  118. crossDomain: false,
  119. url: globalConfig.context + "/api/user/userInfo",
  120. data: {
  121. "info.identityType": this.state.idttType,
  122. "info.companyName": values.unitName,
  123. "info.locationProvince": cmbP,
  124. "info.locationCity": cmbC,
  125. "info.locationArea": cmbA,
  126. "info.unitSize": values.unitNumber,
  127. "info.companyIntroduction": values.unitIntro,
  128. "info.homeUnit": values.unitFrom,
  129. //"info.logoUrl": "logo图",
  130. //"info.publicityPictureUrl": "宣传图片",
  131. "pro.qualification": values.qiyezizhi,
  132. "pro.turnover": values.turnover,
  133. "pro.collegeAttribute": values.schoolProp,
  134. "pro.collegeEstablishTime": values.schoolTime,
  135. "pro.academician": this.state.aca,
  136. "pro.doctoralTutor": this.state.PhDTutor,
  137. "pro.masterTutor": this.state.MSTutor,
  138. "pro.otherExpert": this.state.otherExperts,
  139. "pro.nationalLab": this.state.StateKeyLab,
  140. "pro.educationLab": this.state.EduKeyLab,
  141. "pro.enterpriseCenter": this.state.ComCenter,
  142. "pro.otherCenter": this.state.otherCenter,
  143. "pro.institutionEstablishTime": this.state.resTime
  144. }
  145. }).done(function (data) {
  146. if (!data.error.length) {
  147. message.success('保存成功!');
  148. } else {
  149. message.warning(data.error[0].message);
  150. }
  151. }.bind(this)).always(function () {
  152. this.props.spinState(false);
  153. }.bind(this));
  154. }
  155. });
  156. },
  157. idttTypeChange(e) {
  158. if (e === '企业') {
  159. this.props.form.setFieldsValue({ 'indentityType': e });
  160. this.setState({
  161. companyDis: 'block',
  162. schoolDis: 'none',
  163. resDis: 'none'
  164. });
  165. } else if (e === '院校') {
  166. this.props.form.setFieldsValue({ 'indentityType': e });
  167. this.setState({
  168. companyDis: 'none',
  169. schoolDis: 'block',
  170. resDis: 'none'
  171. });
  172. } else if (e === '研究机构') {
  173. this.props.form.setFieldsValue({ 'indentityType': e });
  174. this.setState({
  175. companyDis: 'none',
  176. schoolDis: 'none',
  177. resDis: 'block'
  178. });
  179. } else {
  180. this.props.form.setFieldsValue({ 'indentityType': e });
  181. this.setState({
  182. companyDis: 'none',
  183. schoolDis: 'none',
  184. resDis: 'none'
  185. });
  186. }
  187. },
  188. componentDidMount() {
  189. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  190. this.getData();
  191. },
  192. render() {
  193. const FormItem = Form.Item;
  194. const Option = Select.Option;
  195. const edulvlArr = ["企业", "院校", "研究机构", "政府部门", "非法人团体"];
  196. const zizhiArr = ["高新技术型企业", "创新型企业", "双软企业", "小心微利企业", "科技部认定示范企业", "其他"];
  197. const schoolArr = ["普通本科院校", "高职专科院校", "独立学院", "中央部署院校", "地方所属院校", "211工程院校", "985工程院校"];
  198. const { getFieldDecorator } = this.props.form;
  199. const formItemLayout = {
  200. labelCol: { span: 3 },
  201. wrapperCol: { span: 12 },
  202. };
  203. const _me = this;
  204. return (
  205. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  206. <FormItem
  207. labelCol={{ span: 3 }}
  208. wrapperCol={{ span: 8 }}
  209. label="身份类型"
  210. >
  211. {getFieldDecorator('indentityType', {
  212. initialValue: this.state.idttType
  213. })(
  214. <Select className="acc-edu-lvl" onChange={this.idttTypeChange}>
  215. {
  216. edulvlArr.map(function (item, i) {
  217. return <Option key={i} value={item} >{item}</Option>
  218. })
  219. }
  220. </Select>
  221. )}
  222. </FormItem>
  223. <FormItem
  224. {...formItemLayout}
  225. label="单位名称"
  226. >
  227. {getFieldDecorator('unitName', {
  228. initialValue: this.props.unitName
  229. })(
  230. <Input />
  231. )}
  232. </FormItem>
  233. <FormItem
  234. {...formItemLayout}
  235. label="所在地"
  236. >
  237. {getFieldDecorator('province')(
  238. <div>
  239. <select id="cmbProvince" name="cmbProvince"></select>
  240. <select id="cmbCity" name="cmbCity"></select>
  241. <select id="cmbArea" name="cmbArea"></select>
  242. </div>
  243. )}
  244. </FormItem>
  245. <FormItem
  246. {...formItemLayout}
  247. label="单位规模"
  248. >
  249. {getFieldDecorator('unitNumber', {
  250. initialValue: this.props.unitNumber
  251. })(
  252. <InputNumber />
  253. )}
  254. <span>人</span>
  255. </FormItem>
  256. <FormItem
  257. labelCol={{ span: 3 }}
  258. wrapperCol={{ span: 20 }}
  259. label="单位简介"
  260. >
  261. {getFieldDecorator('unitIntro', {
  262. initialValue: this.props.unitIntro
  263. })(
  264. <Input type="textarea"
  265. placeholder="全面介绍自己,让商友更深入了解您,内容长度不超过1000个字。"
  266. rows={6} />
  267. )}
  268. <p>还可输入{
  269. (() => {
  270. if (_me.props.form.getFieldValue('intro') && _me.props.form.getFieldValue('intro').length) {
  271. return 1000 - _me.props.form.getFieldValue('intro').length;
  272. } else {
  273. return 1000;
  274. }
  275. })()
  276. }字/1000</p>
  277. </FormItem>
  278. <FormItem
  279. {...formItemLayout}
  280. label="归属单位"
  281. >
  282. {getFieldDecorator('unitFrom', {
  283. initialValue: this.state.unitFrom
  284. })(
  285. <Input placeholder="非法人单位填写。" />
  286. )}
  287. </FormItem>
  288. <FormItem style={{ 'display': this.state.companyDis }}
  289. labelCol={{ span: 3 }}
  290. wrapperCol={{ span: 8 }}
  291. label="企业资质"
  292. >
  293. {getFieldDecorator('qiyezizhi', {
  294. initialValue: this.state.qiyezizhi
  295. })(
  296. <Select className="acc-edu-lvl">
  297. {
  298. zizhiArr.map(function (item, i) {
  299. return <Option key={i} value={item} >{item}</Option>
  300. })
  301. }
  302. </Select>
  303. )}
  304. </FormItem>
  305. <FormItem style={{ 'display': this.state.companyDis }}
  306. labelCol={{ span: 3 }}
  307. wrapperCol={{ span: 6 }}
  308. label="年营业额"
  309. >
  310. {getFieldDecorator('turnover', {
  311. initialValue: this.state.turnover
  312. })(
  313. <InputNumber />
  314. )}
  315. <span>万元</span>
  316. </FormItem>
  317. <FormItem style={{ 'display': this.state.schoolDis }}
  318. labelCol={{ span: 3 }}
  319. wrapperCol={{ span: 8 }}
  320. label="院校属性"
  321. >
  322. {getFieldDecorator('schoolProp', {
  323. initialValue: this.state.schoolProp
  324. })(
  325. <Select className="acc-edu-lvl">
  326. {
  327. schoolArr.map(function (item, i) {
  328. return <Option key={i} value={item} >{item}</Option>
  329. })
  330. }
  331. </Select>
  332. )}
  333. </FormItem>
  334. <FormItem style={{ 'display': this.state.schoolDis }}
  335. {...formItemLayout}
  336. label="创办时间"
  337. >
  338. {getFieldDecorator('schoolTime', {
  339. initialValue: this.state.schoolTime
  340. })(
  341. <InputNumber />
  342. )}
  343. </FormItem>
  344. <FormItem style={{ 'display': this.state.schoolDis }}
  345. labelCol={{ span: 3 }}
  346. wrapperCol={{ span: 20 }}
  347. label=""
  348. >
  349. <div>
  350. <span>院士:<InputNumber value={this.state.aca} onChange={function (e) { this.setState({ aca: e }) }.bind(this)} />人</span>
  351. <span>博士生导师:<InputNumber value={this.state.PhDTutor} onChange={function (e) { this.setState({ PhDTutor: e }) }.bind(this)} />人</span>
  352. <span>硕士生导师:<InputNumber value={this.state.MSTutor} onChange={function (e) { this.setState({ MSTutor: e }) }.bind(this)} />人</span>
  353. <span>其他专家:<InputNumber value={this.state.otherExperts} onChange={function (e) { this.setState({ otherExperts: e }) }.bind(this)} />人</span>
  354. <span>国家级重点实验室:<InputNumber value={this.state.StateKeyLab} onChange={function (e) { this.setState({ StateKeyLab: e }) }.bind(this)} />所</span>
  355. <span>教育部重点实验室:<InputNumber value={this.state.EduKeyLab} onChange={function (e) { this.setState({ EduKeyLab: e }) }.bind(this)} />所</span>
  356. <span>企业共建研究中心:<InputNumber value={this.state.ComCenter} onChange={function (e) { this.setState({ ComCenter: e }) }.bind(this)} />所</span>
  357. <span>其他研究中心:<InputNumber value={this.state.otherCenter} onChange={function (e) { this.setState({ otherCenter: e }) }.bind(this)} />所</span>
  358. </div>
  359. </FormItem>
  360. <FormItem style={{ 'display': this.state.resDis }}
  361. {...formItemLayout}
  362. label="创办时间"
  363. >
  364. {getFieldDecorator('resTime', {
  365. initialValue: this.state.resTime
  366. })(
  367. <InputNumber />
  368. )}
  369. </FormItem>
  370. <FormItem
  371. {...formItemLayout}
  372. label="LOGO"
  373. labelCol={{ span: 3 }}
  374. wrapperCol={{ span: 20 }}
  375. hasFeedback
  376. >
  377. {getFieldDecorator('avatar')(
  378. <Avatar />
  379. )}
  380. </FormItem>
  381. <div className="set-explain">
  382. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  383. </div>
  384. <FormItem
  385. {...formItemLayout}
  386. label="宣传图片"
  387. >
  388. {getFieldDecorator('companyimg', {
  389. valuePropName: 'fileList',
  390. normalize: this.normFile,
  391. })(
  392. <Upload
  393. name="companyimg"
  394. action="/upload.do"
  395. listType="picture"
  396. beforeUpload={beforeUpload}
  397. onChange={this.handleUpload}>
  398. <Button type="primary">
  399. <Icon type="upload" /> 点击选择文件
  400. </Button>
  401. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  402. </Upload>
  403. )}
  404. </FormItem>
  405. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  406. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  407. </FormItem>
  408. </Form >
  409. );
  410. },
  411. }));
  412. const Person = React.createClass({
  413. getInitialState() {
  414. return {
  415. loading: false
  416. };
  417. },
  418. spinChange(e) {
  419. this.setState({
  420. loading: e
  421. });
  422. },
  423. render() {
  424. return (
  425. <Spin spinning={this.state.loading} className='spin-box'>
  426. <div className="set-person">
  427. <div className="acc-detail">
  428. <p className="acc-title">单位资料</p>
  429. <PersonFrom spinState={this.spinChange} />
  430. </div>
  431. </div>
  432. </Spin>
  433. )
  434. }
  435. });
  436. export default Person;