patentDesc.jsx 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Timeline, Button } from 'antd';
  3. import { getPatentState, getTime } 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);
  25. },
  26. getStepList(thepid) {
  27. $.ajax({
  28. method: "post",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + "/techservice/patent/patentProcess",
  32. data: {
  33. pid: thepid
  34. },
  35. success: function (data) {
  36. if (data.error && data.error.length || !data.data) {
  37. return;
  38. };
  39. let _me = this;
  40. for (var item in data.data) {
  41. _me.state.stepList.push(
  42. <Timeline.Item key={item}> <span>{getPatentState(data.data[item].state)}</span> {getTime(data.data[item].recordTime)}</Timeline.Item>
  43. )
  44. };
  45. this.setState({
  46. stepList: this.state.stepList
  47. });
  48. }.bind(this),
  49. });
  50. },
  51. componentWillReceiveProps(nextProps) {
  52. this.state.visible = nextProps.showDesc
  53. if (nextProps.data && nextProps.data.pid !== null) {
  54. this.getStepList(nextProps.data.pid);
  55. }
  56. },
  57. handleCancel(e) {
  58. this.setState({
  59. visible: false,
  60. });
  61. this.props.closeDesc(false);
  62. },
  63. downloadFile(url, type) {
  64. window.open(globalConfig.context + "/techservice/patent/downloadFile?path=" + url + "&sign=" + type)
  65. },
  66. confirmButton() {
  67. this.setState({
  68. loading: true
  69. });
  70. $.ajax({
  71. method: "post",
  72. dataType: "json",
  73. crossDomain: false,
  74. url: globalConfig.context + "/techservice/patent/clientConfirm",
  75. data: {
  76. pid: this.props.data.pid
  77. }
  78. }).done(function (data) {
  79. if (data.error && data.error.length) {
  80. message.warning(data.error[0].message);
  81. }
  82. }.bind(this)).always(function () {
  83. this.setState({
  84. loading: false
  85. });
  86. }.bind(this));
  87. },
  88. render() {
  89. const theData = this.props.data;
  90. if (this.props.data) {
  91. return (
  92. <div className="patent-desc">
  93. <Spin spinning={this.state.loading} className='spin-box'>
  94. <Modal title="专利详情" visible={this.state.visible}
  95. onOk={this.handleOk} onCancel={this.handleCancel}
  96. width='800px'
  97. footer=''
  98. className="patent-desc-content">
  99. <div>
  100. <p className="widthHalf"><span>编号:</span>{theData.number}</p>
  101. <p className="widthHalf"><span>申请号/专利号:</span>{theData.patentNum}</p>
  102. </div>
  103. <div>
  104. <p className="widthHalf"><span>专利名称:</span>{theData.patentName}</p>
  105. <p className="widthHalf"><span>专利类型:</span>{theData.patentType}</p>
  106. </div>
  107. <div>
  108. <p className="widthHalf"><span>专利状态:</span>{theData.patentState}</p>
  109. <p className="widthHalf"><span>专利领域:</span>{theData.patentField}</p>
  110. </div>
  111. <div>
  112. <span>简介:</span>{theData.patentDes}
  113. </div>
  114. <div>
  115. <span>专利相关材料:</span>
  116. {theData.patentWritingUrl !== null && theData.patentWritingUrl !== undefined && theData.patentWritingUrl !== '' ?
  117. <p className="download-file">
  118. <a href="" onClick={this.downloadFile.bind(this, theData.patentWritingUrl, "patent_writing")}>专利稿件</a>
  119. {theData.confirmState == '0' ?
  120. <Button onClick={this.confirmButton}>确认稿件</Button> : <span></span>
  121. }
  122. </p> :
  123. <span></span>
  124. }
  125. {theData.authorizationNoticeUrl !== null && theData.authorizationNoticeUrl !== undefined && theData.authorizationNoticeUrl !== '' ?
  126. <p className="download-file">
  127. <a href="" onClick={this.downloadFile.bind(this, theData.authorizationNoticeUrl, "authorization_notice")}>授权通知书</a>
  128. </p> :
  129. <span></span>
  130. }
  131. {theData.patentCertificateUrl !== null && theData.patentCertificateUrl !== undefined && theData.patentCertificateUrl !== '' ?
  132. <p className="download-file">
  133. <a href="" onClick={this.downloadFile.bind(this, theData.patentCertificateUrl, "patent_certificate")}>专利证书</a>
  134. </p> :
  135. <span></span>
  136. }
  137. </div>
  138. <div>
  139. <span>专利申请日:</span>{theData.startTime}
  140. </div>
  141. <div>
  142. <span>专利授权日:</span>{theData.authorizedTime}
  143. </div>
  144. <div>
  145. <span>每年年费缴费截止日:</span>{theData.endTime}
  146. </div>
  147. <div>
  148. <p>第一发明人:</p>
  149. <p><span>姓名:</span>{theData.firstInventorName}</p>
  150. <p><span>身份证:</span>{theData.firstInventorIdNumber}</p>
  151. </div>
  152. <div style={theData.secondInventorName === '' ? { display: 'none' } : {}}>
  153. <p>第二发明人:</p>
  154. <p><span>姓名:</span>{theData.secondInventorName}</p>
  155. </div>
  156. <div style={theData.thirdInventorName === '' ? { display: 'none' } : {}}>
  157. <p>第三发明人:</p>
  158. <p><span>姓名:</span>{theData.thirdInventorName}</p>
  159. </div>
  160. <Timeline className="time-line">
  161. {this.state.stepList}
  162. </Timeline>
  163. </Modal>
  164. </Spin>
  165. </div>
  166. );
  167. } else {
  168. return <div></div>
  169. }
  170. },
  171. });
  172. export default PatentDesc;