patentAdd.jsx 9.4 KB

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