patentAdd.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. import React from 'react';
  2. import { Icon, Modal, Button, Form, Upload, message, Input, Spin, Checkbox, Select } from 'antd';
  3. import { beforeUploadFile, downloadFile, setUserContactsList } from '../../tools.js';
  4. import './patent.less';
  5. import ajax from 'jquery/src/ajax/xhr.js'
  6. import $ from 'jquery/src/ajax';
  7. const PatentAddFrom = Form.create()(React.createClass({
  8. getInitialState() {
  9. return {
  10. loading: false,
  11. firstCheck: 0,
  12. secondCheck: 0,
  13. thirdCheck: 0
  14. };
  15. },
  16. componentWillMount() {
  17. this.state.contactsOption = setUserContactsList();
  18. },
  19. handleSubmit(e) {
  20. e.preventDefault();
  21. if (!this.state.patentProryStatementUrl) {
  22. message.warning('未上传代理委托书!');
  23. return;
  24. };
  25. this.props.form.validateFields((err, values) => {
  26. if (!err) {
  27. this.props.spinState(true);
  28. $.ajax({
  29. method: "POST",
  30. dataType: "json",
  31. crossDomain: false,
  32. url: globalConfig.context + "/api/user/patent/clientApplyPatent",
  33. data: {
  34. 'firstInventorIdNumber': values.firstInventorID,
  35. 'firstInventorName': values.firstInventorName,
  36. 'patentDes': values.intro,
  37. 'patentName': values.patentName,
  38. 'contacts': values.contacts,
  39. 'secondInventorName': values.secondInventorName,
  40. 'thirdInventorName': values.thirdInventorName,
  41. 'firstInventorIsPublish': this.state.firstCheck,
  42. 'secondInventorIsPublish': this.state.secondCheck,
  43. 'thirdInventorIsPublish': this.state.thirdCheck,
  44. 'patentProryStatementUrl': this.state.patentProryStatementUrl
  45. }
  46. }).done(function (data) {
  47. if (!data.error.length) {
  48. message.success('保存成功!');
  49. } else {
  50. message.warning(data.error[0].message);
  51. }
  52. }.bind(this)).always(function () {
  53. this.props.spinState(false);
  54. this.props.clickOk();
  55. this.props.form.resetFields();
  56. }.bind(this));
  57. }
  58. });
  59. },
  60. firstInventorCheck(e) {
  61. if (e.target.checked == true) {
  62. this.state.firstCheck = 1;
  63. } else if (e.target.checked == false) {
  64. this.state.firstCheck = 0;
  65. }
  66. },
  67. secondInventorCheck(e) {
  68. if (e.target.checked == true) {
  69. this.state.secondCheck = 1;
  70. } else if (e.target.checked == false) {
  71. this.state.secondCheck = 0;
  72. };
  73. },
  74. thirdInventorCheck(e) {
  75. if (e.target.checked == true) {
  76. this.state.thirdCheck = 1;
  77. } else if (e.target.checked == false) {
  78. this.state.thirdCheck = 0;
  79. };
  80. },
  81. avatarUrl(e) {
  82. this.state.avatarUrl = e;
  83. },
  84. checkIdcardnum(rule, value, callback) {
  85. if (!/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
  86. callback('请输入正确的身份证号!');
  87. } else {
  88. callback();
  89. }
  90. },
  91. render() {
  92. const FormItem = Form.Item;
  93. const { getFieldDecorator } = this.props.form;
  94. const formItemLayout = {
  95. labelCol: { span: 3 },
  96. wrapperCol: { span: 16 },
  97. };
  98. const _me = this;
  99. return (
  100. <Form horizontal onSubmit={this.handleSubmit} className="patent-form">
  101. <FormItem
  102. {...formItemLayout}
  103. label="专利名称"
  104. >
  105. {getFieldDecorator('patentName', {
  106. rules: [{ required: true, message: '请输入姓名!' }]
  107. })(
  108. <Input placeholder="请输入专利名称" style={{ width: 200 }} />
  109. )}
  110. </FormItem>
  111. <FormItem
  112. {...formItemLayout}
  113. label="选择联系人"
  114. >
  115. {getFieldDecorator('contacts', {
  116. rules: [{ required: true, message: '请选择一个联系人!' }]
  117. })(
  118. <Select placeholder="请选择联系人" style={{ width: 200 }}
  119. notFoundContent="未获取到联系人列表"
  120. onSelect={(e, n) => { this.setState({ contacts: e }); }}>
  121. {this.state.contactsOption}
  122. </Select>
  123. )}
  124. </FormItem>
  125. <FormItem
  126. labelCol={{ span: 24 }}
  127. wrapperCol={{ span: 24 }}
  128. label="专利简要描述"
  129. >
  130. {getFieldDecorator('intro', {
  131. initialValue: this.state.intro || null
  132. })(
  133. <Input type="textarea"
  134. placeholder="多行输入"
  135. rows={6} />
  136. )}
  137. </FormItem>
  138. <p>第一发明人</p>
  139. <FormItem
  140. {...formItemLayout}
  141. label="姓名"
  142. >
  143. {getFieldDecorator('firstInventorName', {
  144. rules: [{ required: true, message: '请输入姓名!' }]
  145. })(
  146. <Input className="mini-input" />
  147. )}
  148. <Checkbox onChange={this.firstInventorCheck}>是否同意专利局公布</Checkbox>
  149. </FormItem>
  150. <FormItem
  151. {...formItemLayout}
  152. label="身份证"
  153. >
  154. {getFieldDecorator('firstInventorID', {
  155. rules: [{ required: true, validator: this.checkIdcardnum, message: '请输入正确的身份证号!' }]
  156. })(
  157. <Input className="mini-input" />
  158. )}
  159. </FormItem>
  160. <p>第二发明人</p>
  161. <FormItem
  162. {...formItemLayout}
  163. label="姓名"
  164. >
  165. {getFieldDecorator('secondInventorName')(
  166. <Input className="mini-input" />
  167. )}
  168. <Checkbox onChange={this.secondInventorCheck}>是否同意专利局公布</Checkbox>
  169. </FormItem>
  170. <p>第三发明人</p>
  171. <FormItem
  172. {...formItemLayout}
  173. label="姓名"
  174. >
  175. {getFieldDecorator('thirdInventorName')(
  176. <Input className="mini-input" />
  177. )}
  178. <Checkbox onChange={this.thirdInventorCheck}>是否同意专利局公布</Checkbox>
  179. </FormItem>
  180. <div className="hrSituation-roster">
  181. <Upload
  182. name="ratepay"
  183. action={globalConfig.context + "/api/user/patent/upload"}
  184. data={{ 'sign': 'patent_prory_statement' }}
  185. beforeUpload={beforeUploadFile}
  186. showUploadList={false}
  187. onChange={(info) => {
  188. if (info.file.status !== 'uploading') {
  189. console.log(info.file, info.fileList);
  190. }
  191. if (info.file.status === 'done') {
  192. if (!info.file.response.error.length) {
  193. message.success(`${info.file.name} 文件上传成功!`);
  194. } else {
  195. message.warning(info.file.response.error[0].message);
  196. return;
  197. };
  198. this.state.patentProryStatementUrl = info.file.response.data;
  199. } else if (info.file.status === 'error') {
  200. message.error(`${info.file.name} 文件上传失败。`);
  201. }
  202. }}
  203. >
  204. <Button><Icon type="upload" /> 上传专利代理委托书 </Button>
  205. </Upload>
  206. <p style={{ paddingLeft: '10px', marginTop: '10px' }}>
  207. <a onClick={() => { window.open(globalConfig.context + "/api/user/patent/downloadTemplateFile?sign=patent_prory_statement") }}>专利代理委托书模板下载</a>
  208. </p>
  209. </div>
  210. <FormItem style={{ marginTop: '20px' }}>
  211. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  212. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  213. </FormItem>
  214. </Form >
  215. );
  216. },
  217. }));
  218. const PatentAdd = React.createClass({
  219. getInitialState() {
  220. return {
  221. visible: false,
  222. loading: false
  223. };
  224. },
  225. showModal() {
  226. this.setState({
  227. visible: true,
  228. });
  229. },
  230. handleOk() {
  231. this.setState({
  232. visible: false,
  233. });
  234. this.props.closeDesc(false, true);
  235. },
  236. handleCancel(e) {
  237. this.setState({
  238. visible: false,
  239. });
  240. this.props.closeDesc(false);
  241. },
  242. spinChange(e) {
  243. this.setState({
  244. loading: e
  245. });
  246. },
  247. render() {
  248. return (
  249. <div className="patent-addNew">
  250. <Button disabled={this.props.ButtonDisabled} className="patent-addNew" type="primary" onClick={this.showModal}>申请新专利<Icon type="plus" /></Button>
  251. <Spin spinning={this.state.loading} className='spin-box'>
  252. <Modal title="新专利申请" visible={this.state.visible}
  253. onOk={this.handleOk} onCancel={this.handleCancel}
  254. width='720px'
  255. footer=''
  256. >
  257. <PatentAddFrom spinState={this.spinChange} closeModal={this.handleCancel} clickOk={this.handleOk} />
  258. </Modal>
  259. </Spin>
  260. </div>
  261. );
  262. },
  263. });
  264. export default PatentAdd;