company.jsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. import React from 'react';
  2. import { Input, Button, Form, Select, Radio, Upload, Icon, Spin, message, InputNumber } from 'antd';
  3. import './person.less';
  4. import { addressInit } from '../../tools.js';
  5. const FormItem = Form.Item;
  6. const Option = Select.Option;
  7. const RadioGroup = Radio.Group;
  8. const edulvlArr = ["企业", "院校", "研究机构", "政府部门", "非法人团体"];
  9. const zizhiArr = ["高新技术型企业", "创新型企业", "双软企业", "小心微利企业", "科技部认定示范企业","其他"];
  10. function getBase64(img, callback) {
  11. const reader = new FileReader();
  12. reader.addEventListener('load', () => callback(reader.result));
  13. reader.readAsDataURL(img);
  14. };
  15. function beforeUpload(file) {
  16. const isJPG = file.type === 'image/jpeg';
  17. if (!isJPG) {
  18. message.error('You can only upload JPG file!');
  19. }
  20. const isLt2M = file.size / 1024 / 1024 < 2;
  21. if (!isLt2M) {
  22. message.error('Image must smaller than 2MB!');
  23. }
  24. return isJPG && isLt2M;
  25. };
  26. class Avatar extends React.Component {
  27. constructor(props) {
  28. super(props);
  29. this.state = {
  30. imageUrl: ''
  31. }
  32. }
  33. handleChange(info) {
  34. if (info.file.status === 'done') {
  35. // Get this url from response in real world.
  36. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
  37. }
  38. }
  39. render() {
  40. const imageUrl = this.state.imageUrl;
  41. return (
  42. <Upload
  43. className="avatar-uploader"
  44. name="avatar"
  45. showUploadList={false}
  46. action="/upload.do"
  47. beforeUpload={beforeUpload}
  48. onChange={this.handleChange}
  49. >
  50. {
  51. imageUrl ?
  52. <img src={imageUrl} role="presentation" className="avatar" /> :
  53. <Icon type="plus" className="avatar-uploader-trigger" />
  54. }
  55. </Upload>
  56. );
  57. }
  58. };
  59. const PersonFrom = Form.create()(React.createClass({
  60. getInitialState() {
  61. return {
  62. loading: false,
  63. };
  64. },
  65. handleSubmit(e) {
  66. e.preventDefault();
  67. this.props.form.validateFields((err, values) => {
  68. if (!err) {
  69. console.log('Received values of form: ', values);
  70. }
  71. });
  72. },
  73. normFile(e) {
  74. if (Array.isArray(e)) {
  75. return e;
  76. }
  77. return e && e.fileList;
  78. },
  79. componentDidMount() {
  80. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  81. },
  82. render() {
  83. const { getFieldDecorator } = this.props.form;
  84. const formItemLayout = {
  85. labelCol: { span: 3 },
  86. wrapperCol: { span: 12 },
  87. };
  88. const _me = this;
  89. return (
  90. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  91. <FormItem
  92. labelCol={{ span: 3 }}
  93. wrapperCol={{ span: 8 }}
  94. label="身份类型"
  95. >
  96. {getFieldDecorator('edulvl')(
  97. <Select className="acc-edu-lvl">
  98. {
  99. edulvlArr.map(function (item, i) {
  100. return <Option key={i} value={item} >{item}</Option>
  101. })
  102. }
  103. </Select>
  104. )}
  105. </FormItem>
  106. <FormItem
  107. {...formItemLayout}
  108. label="单位名称"
  109. >
  110. {getFieldDecorator('nickname', {
  111. initialValue: this.props.companyname
  112. })(
  113. <Input />
  114. )}
  115. </FormItem>
  116. <FormItem
  117. {...formItemLayout}
  118. label="居住地"
  119. >
  120. {getFieldDecorator('province')(
  121. <div>
  122. <select id="cmbProvince" name="cmbProvince"></select>
  123. <select id="cmbCity" name="cmbCity"></select>
  124. <select id="cmbArea" name="cmbArea"></select>
  125. </div>
  126. )}
  127. </FormItem>
  128. <FormItem
  129. {...formItemLayout}
  130. label="单位规模"
  131. >
  132. {getFieldDecorator('peoplenum')(
  133. <div className="numberinput">
  134. <InputNumber /><span>人</span>
  135. </div>
  136. )}
  137. </FormItem>
  138. <FormItem
  139. labelCol={{ span: 3 }}
  140. wrapperCol={{ span: 20 }}
  141. label="单位简介"
  142. >
  143. {getFieldDecorator('intro')(
  144. <div>
  145. <Input type="textarea"
  146. placeholder="全面介绍自己,让商友更深入了解您,内容长度不超过1000个字。"
  147. rows={6} />
  148. <p>还可输入{
  149. (() => {
  150. if (_me.props.form.getFieldValue('intro') && _me.props.form.getFieldValue('intro').length) {
  151. return 1000 - _me.props.form.getFieldValue('intro').length;
  152. } else {
  153. return 1000;
  154. }
  155. })()
  156. }字/1000</p>
  157. </div>
  158. )}
  159. </FormItem>
  160. <FormItem
  161. {...formItemLayout}
  162. label="归属单位"
  163. >
  164. {getFieldDecorator('companyfrom')(
  165. <Input placeholder="非法人单位填写。"/>
  166. )}
  167. </FormItem>
  168. <FormItem
  169. labelCol={{ span: 3 }}
  170. wrapperCol={{ span: 8 }}
  171. label="企业资质"
  172. >
  173. {getFieldDecorator('qiyezizhi')(
  174. <Select className="acc-edu-lvl">
  175. {
  176. zizhiArr.map(function (item, i) {
  177. return <Option key={i} value={item} >{item}</Option>
  178. })
  179. }
  180. </Select>
  181. )}
  182. </FormItem>
  183. <FormItem
  184. labelCol={{ span: 3 }}
  185. wrapperCol={{ span: 6 }}
  186. label="年营业额"
  187. >
  188. {getFieldDecorator('turnover')(
  189. <div>
  190. <InputNumber /><span>万元</span>
  191. </div>
  192. )}
  193. </FormItem>
  194. <FormItem
  195. {...formItemLayout}
  196. label="公司logo"
  197. labelCol={{ span: 3 }}
  198. wrapperCol={{ span: 20 }}
  199. hasFeedback
  200. >
  201. {getFieldDecorator('avatar')(
  202. <Avatar />
  203. )}
  204. </FormItem>
  205. <div className="set-explain">
  206. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  207. </div>
  208. <FormItem
  209. {...formItemLayout}
  210. label="宣传图片"
  211. >
  212. {getFieldDecorator('companyimg', {
  213. valuePropName: 'fileList',
  214. normalize: this.normFile,
  215. })(
  216. <Upload
  217. name="companyimg"
  218. action="/upload.do"
  219. listType="picture"
  220. beforeUpload={beforeUpload}
  221. onChange={this.handleUpload}>
  222. <Button type="primary">
  223. <Icon type="upload" /> 点击选择文件
  224. </Button>
  225. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  226. </Upload>
  227. )}
  228. </FormItem>
  229. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  230. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  231. </FormItem>
  232. </Form >
  233. );
  234. },
  235. }));
  236. const Person = React.createClass({
  237. getInitialState() {
  238. return {
  239. companyname: '湖南智明信息技术有限公司',
  240. loading: false
  241. };
  242. },
  243. render() {
  244. return (
  245. <Spin spinning={this.state.loading} className='spin-box'>
  246. <div className="set-person">
  247. <div className="acc-detail">
  248. <p className="acc-title">个人资料</p>
  249. <PersonFrom companyname={this.state.companyname} />
  250. </div>
  251. </div>
  252. </Spin>
  253. )
  254. }
  255. });
  256. export default Person;