patentDesc.jsx 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Timeline, Button } from 'antd';
  3. import { getPatentType, getPatentState, getTime, getPatentField, newDownloadFile, getStepList } from '../../tools.js';
  4. import './patent.less';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. const PatentDesc = React.createClass({
  8. getInitialState() {
  9. return {
  10. visible: false,
  11. loading: false,
  12. stepList: []
  13. };
  14. },
  15. showModal() {
  16. this.setState({
  17. visible: true,
  18. });
  19. },
  20. handleOk() {
  21. this.setState({
  22. visible: false,
  23. });
  24. this.props.closeDesc(false, true);
  25. },
  26. getPatentInfo(thepid) {
  27. $.ajax({
  28. method: "get",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + "/api/user/patent/clientPatentInfo?pid=" + thepid,
  32. success: function (data) {
  33. let thisData = data.data;
  34. if (!thisData) {
  35. if (data.error && data.error.length) {
  36. message.warning(data.error[0].message);
  37. }
  38. thisData = {};
  39. };
  40. this.setState({
  41. patentInfoData: thisData,
  42. stepList: this.state.stepList
  43. });
  44. }.bind(this),
  45. });
  46. },
  47. componentWillReceiveProps(nextProps) {
  48. if (nextProps.data && nextProps.data.pid !== null && !this.state.visible && nextProps.showDesc) {
  49. this.state.stepList = getStepList(nextProps.data.pid, '/api/user/patent/patentProcess');
  50. this.getPatentInfo(nextProps.data.pid);
  51. };
  52. this.state.visible = nextProps.showDesc;
  53. },
  54. handleCancel(e) {
  55. this.setState({
  56. visible: false,
  57. });
  58. this.props.closeDesc(false);
  59. },
  60. confirmButton() {
  61. this.setState({
  62. loading: true
  63. });
  64. $.ajax({
  65. method: "post",
  66. dataType: "json",
  67. crossDomain: false,
  68. url: globalConfig.context + "/api/user/patent/clientConfirm",
  69. data: {
  70. pid: this.props.data.pid
  71. }
  72. }).done(function (data) {
  73. if (data.error && data.error.length) {
  74. message.warning(data.error[0].message);
  75. } else {
  76. message.success('已确认完成!');
  77. this.state.patentInfoData.confirmState = 1;
  78. };
  79. }.bind(this)).always(function () {
  80. this.setState({
  81. loading: false
  82. });
  83. }.bind(this));
  84. },
  85. render() {
  86. let theData = this.state.patentInfoData;
  87. if (theData) {
  88. return (
  89. <div className="patent-desc">
  90. <Spin spinning={this.state.loading} className='spin-box'>
  91. <Modal title="专利详情" visible={this.state.visible}
  92. onOk={this.handleOk} onCancel={this.handleCancel}
  93. width='800px'
  94. footer=''
  95. className="patent-desc-content">
  96. <div>
  97. <p className="widthHalf"><span>编号:</span>{theData.serialNumber}</p>
  98. <p className="widthHalf"><span>申请号/专利号:</span>{theData.patentNumber}</p>
  99. </div>
  100. <div>
  101. <p className="widthHalf"><span>专利名称:</span>{theData.patentName}</p>
  102. <p className="widthHalf"><span>专利类型:</span>{getPatentType(theData.patentCatagory)}</p>
  103. </div>
  104. <div>
  105. <p className="widthHalf"><span>专利状态:</span>{getPatentState(theData.patentState)}</p>
  106. <p className="widthHalf"><span>专利领域:</span>{getPatentField(theData.patentField)}</p>
  107. </div>
  108. <div>
  109. <span>简介:</span>{theData.patentDes}
  110. </div>
  111. <div className="patent-download">
  112. <span>专利相关材料:</span>
  113. {theData.patentWritingUrl ?
  114. <p className="download-file">
  115. <a onClick={newDownloadFile.bind(this, theData.id, 'patent_writing', '/api/user/patent/download')}>专利稿件下载</a>
  116. {theData.confirmState == 0 ? <Button onClick={this.confirmButton}>确认稿件</Button> : <span></span>}
  117. </p> :
  118. <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />专利稿件未上传</p>
  119. }
  120. {theData.authorizationNoticeUrl ?
  121. <p className="download-file">
  122. <a onClick={newDownloadFile.bind(this, theData.id, 'authorization_notice', '/api/user/patent/download')}>授权通知书下载</a>
  123. </p> :
  124. <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />授权通知书未上传</p>
  125. }
  126. {theData.patentCertificateUrl ?
  127. <p className="download-file">
  128. <a onClick={newDownloadFile.bind(this, theData.id, 'patent_certificate', '/api/user/patent/download')}>专利证书下载</a>
  129. </p> :
  130. <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />专利证书未上传</p>
  131. }
  132. {theData.patentProryStatementUrl ?
  133. <p className="download-file">
  134. <a onClick={newDownloadFile.bind(this, theData.id, 'patent_prory_statement', '/api/user/patent/download')}>专利代理委托书下载</a>
  135. </p> :
  136. <p><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />专利代理委托书未上传</p>
  137. }
  138. </div>
  139. <div>
  140. <span>专利申请日:</span>{theData.startTime}
  141. </div>
  142. <div>
  143. <span>专利授权日:</span>{theData.authorizedTime}
  144. </div>
  145. <div>
  146. <span>每年年费缴费截止日:</span>{theData.endTime}
  147. </div>
  148. <div>
  149. <p>第一发明人:</p>
  150. <p><span>姓名:</span>{theData.firstInventorName}</p>
  151. <p><span>身份证:</span>{theData.firstInventorIdNumber}</p>
  152. </div>
  153. <div style={theData.secondInventorName === '' ? { display: 'none' } : {}}>
  154. <p>第二发明人:</p>
  155. <p><span>姓名:</span>{theData.secondInventorName}</p>
  156. </div>
  157. <div style={theData.thirdInventorName === '' ? { display: 'none' } : {}}>
  158. <p>第三发明人:</p>
  159. <p><span>姓名:</span>{theData.thirdInventorName}</p>
  160. </div>
  161. <Timeline className="time-line">
  162. {this.state.stepList}
  163. </Timeline>
  164. </Modal>
  165. </Spin>
  166. </div>
  167. );
  168. } else {
  169. return <div></div>
  170. }
  171. },
  172. });
  173. export default PatentDesc;