achievementDesc.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Button, Row, Col, Upload, Tooltip, Tag } from 'antd';
  3. import '../portal.less';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import { getIndustryCategory } from '../../DicIndustryList.js';
  7. import { getAchievementCategory, getMaturity, getInnovation } from '../../tools.js';
  8. const AchievementDetail = React.createClass({
  9. getInitialState() {
  10. return {
  11. visible: false,
  12. loading: false,
  13. tags: [],
  14. technicalPictureUrl: [],
  15. maturityPictureUrl: [],
  16. };
  17. },
  18. handleCancel(e) {
  19. this.props.closeDesc(false);
  20. },
  21. loadData(id) {
  22. this.setState({
  23. loading: true
  24. });
  25. $.ajax({
  26. method: "get",
  27. dataType: "json",
  28. crossDomain: false,
  29. url: globalConfig.context + '/api/user/portal/achievementDetail',
  30. data: {
  31. id: id
  32. },
  33. success: function (data) {
  34. let thisData = data.data;
  35. if (!thisData) {
  36. if (data.error && data.error.length) {
  37. message.warning(data.error[0].message);
  38. };
  39. thisData = {};
  40. };
  41. this.setState({
  42. data: thisData,
  43. tags: thisData.keyword ? thisData.keyword.split(",") : [],
  44. technicalPictureUrl: thisData.technicalPictureUrl ? splitUrl(thisData.technicalPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  45. maturityPictureUrl: thisData.maturityPictureUrl ? splitUrl(thisData.maturityPictureUrl, ',', globalConfig.avatarHost + '/upload') : []
  46. });
  47. }.bind(this),
  48. }).always(function () {
  49. this.setState({
  50. loading: false
  51. });
  52. }.bind(this));
  53. },
  54. interestClick() {
  55. this.setState({
  56. loading: true
  57. });
  58. $.ajax({
  59. method: "post",
  60. dataType: "json",
  61. crossDomain: false,
  62. url: globalConfig.context + '/api/user/portal/achievementInterest',
  63. data: {
  64. id: this.props.data.id
  65. },
  66. success: function (data) {
  67. if (data.error && data.error.length) {
  68. message.warning(data.error[0].message);
  69. } else {
  70. this.loadData(this.props.data.id);
  71. };
  72. }.bind(this),
  73. }).always(function () {
  74. this.setState({
  75. loading: false
  76. });
  77. }.bind(this));;
  78. },
  79. cancelInterestClick() {
  80. this.setState({
  81. loading: true
  82. });
  83. $.ajax({
  84. method: "post",
  85. dataType: "json",
  86. crossDomain: false,
  87. url: globalConfig.context + '/api/user/portal/achievementCancelInterest',
  88. data: {
  89. id: this.state.data.achievementInterestId
  90. },
  91. success: function (data) {
  92. if (data.error && data.error.length) {
  93. message.warning(data.error[0].message);
  94. } else {
  95. this.loadData(this.props.data.id);
  96. };
  97. }.bind(this),
  98. }).always(function () {
  99. this.setState({
  100. loading: false
  101. });
  102. }.bind(this));;
  103. },
  104. componentWillReceiveProps(nextProps) {
  105. if (!this.props.showDesc && nextProps.showDesc) {
  106. if (nextProps.data.id) {
  107. this.loadData(nextProps.data.id);
  108. } else {
  109. this.state.data = {};
  110. this.state.tags = [];
  111. this.state.maturityPictureUrl = [];
  112. this.state.technicalPictureUrl = [];
  113. };
  114. };
  115. },
  116. render() {
  117. const theData = this.state.data || {};
  118. if (this.props.data) {
  119. return (
  120. <Spin spinning={this.state.loading} className="portal-desc">
  121. <Modal maskClosable={false}
  122. visible={this.props.showDesc}
  123. onCancel={this.handleCancel}
  124. title={"成果详情"}
  125. width='1000px'
  126. footer=''
  127. className="portal-desc-content">
  128. <Row>
  129. <Col span={4}>编号</Col>
  130. <Col span={8}>{theData.serialNumber}</Col>
  131. <Col span={4}>名称</Col>
  132. <Col span={8}>{theData.name}</Col>
  133. </Row>
  134. <Row>
  135. <Col span={4}>数据类别</Col>
  136. <Col span={8}>
  137. {(() => {
  138. switch (theData.dataCategory) {
  139. case "0":
  140. return <span>成果</span>;
  141. case "1":
  142. return <span>技术</span>;
  143. case "2":
  144. return <span>项目</span>;
  145. }
  146. })()}
  147. </Col>
  148. <Col span={4}>类型</Col>
  149. <Col span={8}>{getAchievementCategory(theData.category)}</Col>
  150. </Row>
  151. <Row>
  152. <Col span={4}>应用领域</Col>
  153. <Col span={8}>{getIndustryCategory(theData.fieldA, theData.fieldB)}</Col>
  154. <Col span={4}>发布时间</Col>
  155. <Col span={8}>{theData.releaseDateFormattedDate}</Col>
  156. </Row>
  157. <Row>
  158. <Col span={4}>关键词</Col>
  159. <Col span={20}>
  160. {this.state.tags.map((tag) => {
  161. return <Tooltip key={tag} title={tag}>
  162. <Tag key={tag}>{tag}</Tag>
  163. </Tooltip>;
  164. })}
  165. </Col>
  166. </Row>
  167. <Row>
  168. <Col span={4}>摘要</Col>
  169. <Col span={20}>{theData.summary}</Col>
  170. </Row>
  171. <Row>
  172. <Col span={4}>成果简介</Col>
  173. <Col span={20}>{theData.introduction}</Col>
  174. </Row>
  175. <Row>
  176. <Col span={4}>技术图片</Col>
  177. <Col span={20}>
  178. <div className="clearfix">
  179. <Upload
  180. listType="picture-card"
  181. fileList={this.state.technicalPictureUrl}
  182. onPreview={(file) => {
  183. this.setState({
  184. previewImage: file.url || file.thumbUrl,
  185. previewVisible: true,
  186. });
  187. }} >
  188. </Upload>
  189. <Modal maskClosable={false} footer={null}
  190. visible={this.state.previewVisible}
  191. onCancel={() => { this.setState({ previewVisible: false }) }}>
  192. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  193. </Modal>
  194. </div>
  195. </Col>
  196. </Row>
  197. <Row>
  198. <Col span={4}>成熟度</Col>
  199. <Col span={8}>{getMaturity(theData.maturity)}</Col>
  200. <Col span={4}>创新度</Col>
  201. <Col span={8}>{getInnovation(theData.innovation)}</Col>
  202. </Row>
  203. <Row>
  204. <Col span={4}>成熟度证明材料(图片)</Col>
  205. <Col span={20}>
  206. <Upload className="demandDetailShow-upload"
  207. listType="picture-card"
  208. fileList={this.state.maturityPictureUrl}
  209. onPreview={(file) => {
  210. this.setState({
  211. previewImage: file.url || file.thumbUrl,
  212. previewVisible: true,
  213. });
  214. }} >
  215. </Upload>
  216. </Col>
  217. </Row>
  218. <Row>
  219. <Col span={4}>成熟度证明材料(文本)</Col>
  220. <Col span={20}>
  221. {theData.maturityTextFileUrl ?
  222. <span className="download-file">
  223. <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + this.props.data.id + '&sign=achievement_maturity_text_file') }}>成熟度证明材料(文本文件)</a>
  224. </span>
  225. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  226. </Col>
  227. </Row>
  228. <Row>
  229. <Col span={4}>成熟度证明材料(视频地址)</Col>
  230. <Col span={20}>{theData.maturityVideoUrl}</Col>
  231. </Row>
  232. <Row>
  233. <Col span={4}>成果所有人名称</Col>
  234. <Col span={8}>{theData.username || theData.unitName}</Col>
  235. <Col span={4}>合作方式</Col>
  236. <Col span={8}>
  237. {(() => {
  238. switch (theData.cooperationMode) {
  239. case "0":
  240. return <span>技术转让</span>;
  241. case "1":
  242. return <span>授权生产</span>;
  243. }
  244. })()}
  245. </Col>
  246. </Row>
  247. <Row>
  248. <Col span={4}>转让方式</Col>
  249. <Col span={8}>
  250. {(() => {
  251. switch (theData.transferMode) {
  252. case "0":
  253. return <span>完全转让</span>;
  254. case "1":
  255. return <span>许可转让</span>;
  256. case "2":
  257. return <span>技术入股</span>;
  258. }
  259. })()}
  260. </Col>
  261. <Col span={4}>转让价格</Col>
  262. <Col span={8}>
  263. {(() => {
  264. switch (theData.bargainingMode) {
  265. case "0":
  266. return <span>面议</span>;
  267. case "1":
  268. return <span>{theData.transferPrice} 万元</span>;
  269. }
  270. })()}
  271. </Col>
  272. </Row>
  273. <Row>
  274. <Col span={4}>技术场景</Col>
  275. <Col span={20}>{theData.technicalScene}</Col>
  276. </Row>
  277. <Row>
  278. <Col span={4}>技术突破</Col>
  279. <Col span={20}>{theData.breakthrough}</Col>
  280. </Row>
  281. <Row>
  282. <Col span={4}>专利情况</Col>
  283. <Col span={20}>{theData.patentCase}</Col>
  284. </Row>
  285. <Row>
  286. <Col span={4}>获奖情况</Col>
  287. <Col span={20}>{theData.awards}</Col>
  288. </Row>
  289. <Row>
  290. <Col span={4}>技术团队情况</Col>
  291. <Col span={20}>{theData.teamDes}</Col>
  292. </Row>
  293. <Row>
  294. <Col span={4}>技术参数</Col>
  295. <Col span={20}>{theData.parameter}</Col>
  296. </Row>
  297. <Row>
  298. <Col span={4}>技术方案</Col>
  299. <Col span={20}>
  300. {theData.techPlanUrl ?
  301. <span className="download-file">
  302. <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + this.props.data.id + '&sign=achievement_tech_plan') }}>技术方案</a>
  303. </span>
  304. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  305. </Col>
  306. </Row>
  307. <Row>
  308. <Col span={4}>商业计划书</Col>
  309. <Col span={20}>
  310. {theData.businessPlanUrl ?
  311. <span className="download-file">
  312. <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + this.props.data.id + '&sign=achievement_business_plan') }}>商业计划书</a>
  313. </span>
  314. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  315. </Col>
  316. </Row>
  317. <div className="interest clearfix">
  318. {theData.achievementInterestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
  319. : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
  320. </div>
  321. </Modal>
  322. </Spin>
  323. );
  324. } else {
  325. return <div></div>
  326. }
  327. },
  328. });
  329. export default AchievementDetail;