achievementDesc.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Button, Row, Col, Upload, Tooltip, Tag, Table, Input } 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, getOrderStatus, beforeUploadFile } from '../../tools.js';
  8. const AchievementDetail = React.createClass({
  9. getInitialState() {
  10. return {
  11. visible: false,
  12. loading: false,
  13. buttonLoading: false,
  14. dataSourse: [],
  15. orderVisible: false,
  16. tags: [],
  17. technicalPictureUrl: [],
  18. maturityPictureUrl: [],
  19. columns: [
  20. {
  21. title: '状态',
  22. dataIndex: 'status',
  23. key: 'status',
  24. render: (text) => { return getOrderStatus(text) }
  25. }, {
  26. title: '处理时间',
  27. dataIndex: 'recordTimeFormattedDate',
  28. key: 'recordTimeFormattedDate',
  29. }, {
  30. title: '备注',
  31. dataIndex: 'comment',
  32. key: 'comment',
  33. }
  34. ]
  35. };
  36. },
  37. handleCancel(e) {
  38. this.props.closeDesc(false);
  39. },
  40. loadData(id) {
  41. this.setState({
  42. loading: true
  43. });
  44. $.ajax({
  45. method: "get",
  46. dataType: "json",
  47. crossDomain: false,
  48. url: globalConfig.context + '/api/user/portal/achievementDetail',
  49. data: {
  50. id: id
  51. },
  52. success: function (data) {
  53. let thisData = data.data;
  54. if (!thisData) {
  55. if (data.error && data.error.length) {
  56. message.warning(data.error[0].message);
  57. };
  58. thisData = {};
  59. };
  60. this.setState({
  61. data: thisData,
  62. tags: thisData.keyword ? thisData.keyword.split(",") : [],
  63. technicalPictureUrl: thisData.technicalPictureUrl ? splitUrl(thisData.technicalPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  64. maturityPictureUrl: thisData.maturityPictureUrl ? splitUrl(thisData.maturityPictureUrl, ',', globalConfig.avatarHost + '/upload') : []
  65. });
  66. }.bind(this),
  67. }).always(function () {
  68. this.setState({
  69. loading: false
  70. });
  71. }.bind(this));
  72. },
  73. loadLogsData(id) {
  74. this.setState({
  75. loading: true
  76. });
  77. $.ajax({
  78. method: "get",
  79. dataType: "json",
  80. crossDomain: false,
  81. url: globalConfig.context + '/api/user/portal/order/achievementOrderLog',
  82. data: {
  83. achievementOrderId: id
  84. },
  85. success: function (data) {
  86. let thisData = data.data, theArr = [];
  87. if (!thisData) {
  88. if (data.error && data.error.length) {
  89. message.warning(data.error[0].message);
  90. };
  91. } else {
  92. thisData.map(function (item, i) {
  93. theArr.push({
  94. key: i,
  95. recordTime: item.recordTime,
  96. recordTimeFormattedDate: item.recordTimeFormattedDate,
  97. status: item.status,
  98. comment: item.comment
  99. })
  100. });
  101. };
  102. this.setState({
  103. dataSourse: theArr
  104. });
  105. }.bind(this),
  106. }).always(function () {
  107. this.setState({
  108. loading: false
  109. });
  110. }.bind(this));
  111. },
  112. interestClick() {
  113. this.setState({
  114. loading: true
  115. });
  116. $.ajax({
  117. method: "post",
  118. dataType: "json",
  119. crossDomain: false,
  120. url: globalConfig.context + '/api/user/portal/achievementInterest',
  121. data: {
  122. id: this.props.data.id
  123. },
  124. success: function (data) {
  125. if (data.error && data.error.length) {
  126. message.warning(data.error[0].message);
  127. } else {
  128. this.loadData(this.props.data.id);
  129. };
  130. }.bind(this),
  131. }).always(function () {
  132. this.setState({
  133. loading: false
  134. });
  135. }.bind(this));;
  136. },
  137. cancelInterestClick() {
  138. this.setState({
  139. loading: true
  140. });
  141. $.ajax({
  142. method: "post",
  143. dataType: "json",
  144. crossDomain: false,
  145. url: globalConfig.context + '/api/user/portal/achievementCancelInterest',
  146. data: {
  147. id: this.state.data.achievementInterestId
  148. },
  149. success: function (data) {
  150. if (data.error && data.error.length) {
  151. message.warning(data.error[0].message);
  152. } else {
  153. this.loadData(this.props.data.id);
  154. };
  155. }.bind(this),
  156. }).always(function () {
  157. this.setState({
  158. loading: false
  159. });
  160. }.bind(this));;
  161. },
  162. handleSubmit() {
  163. this.setState({
  164. buttonLoading: true
  165. });
  166. $.ajax({
  167. method: "post",
  168. dataType: "json",
  169. crossDomain: false,
  170. url: globalConfig.context + '/api/user/portal/order/orderAchievement',
  171. data: {
  172. achievementId: this.state.data.id,
  173. comment: this.state.comment
  174. },
  175. success: function (data) {
  176. if (data.error && data.error.length) {
  177. message.warning(data.error[0].message);
  178. } else { message.success("提交成功!") };
  179. }.bind(this),
  180. }).always(function () {
  181. this.loadData(this.state.data.id);
  182. this.setState({
  183. orderVisible: false,
  184. buttonLoading: false
  185. });
  186. }.bind(this));
  187. },
  188. cancelSubmit() {
  189. this.setState({
  190. buttonLoading: true
  191. });
  192. $.ajax({
  193. method: "post",
  194. dataType: "json",
  195. crossDomain: false,
  196. url: globalConfig.context + '/api/user/portal/order/achievementShutdown',
  197. data: {
  198. id: this.state.data.achievementOrderId
  199. },
  200. success: function (data) {
  201. if (data.error && data.error.length) {
  202. message.warning(data.error[0].message);
  203. } else { message.success("撤销成功!") };
  204. }.bind(this),
  205. }).always(function () {
  206. this.loadData(this.state.data.id);
  207. this.setState({
  208. buttonLoading: false
  209. });
  210. }.bind(this));
  211. },
  212. componentWillReceiveProps(nextProps) {
  213. if (!this.props.showDesc && nextProps.showDesc) {
  214. if (nextProps.data.id) {
  215. this.loadData(nextProps.data.id);
  216. if (nextProps.data.orderId) {
  217. this.loadLogsData(nextProps.data.orderId)
  218. }
  219. } else {
  220. this.state.data = {};
  221. this.state.tags = [];
  222. this.state.maturityPictureUrl = [];
  223. this.state.technicalPictureUrl = [];
  224. };
  225. };
  226. },
  227. render() {
  228. const theData = this.state.data || {};
  229. if (this.props.data) {
  230. return (
  231. <Modal maskClosable={false}
  232. visible={this.props.showDesc}
  233. onCancel={this.handleCancel}
  234. title={<div className="interest clearfix">
  235. <span>成果详情</span>
  236. {theData.achievementInterestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
  237. : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
  238. </div>}
  239. width='1000px'
  240. footer=''
  241. className="portal-desc-content">
  242. <Spin spinning={this.state.loading} className="portal-desc">
  243. <Row>
  244. <Col span={4}>编号</Col>
  245. <Col span={8}>{theData.serialNumber}</Col>
  246. <Col span={4}>名称</Col>
  247. <Col span={8}>{theData.name}</Col>
  248. </Row>
  249. <Row>
  250. <Col span={4}>数据类别</Col>
  251. <Col span={8}>
  252. {(() => {
  253. switch (theData.dataCategory) {
  254. case "0":
  255. return <span>成果</span>;
  256. case "1":
  257. return <span>技术</span>;
  258. case "2":
  259. return <span>项目</span>;
  260. }
  261. })()}
  262. </Col>
  263. <Col span={4}>类型</Col>
  264. <Col span={8}>{getAchievementCategory(theData.category)}</Col>
  265. </Row>
  266. <Row>
  267. <Col span={4}>应用领域</Col>
  268. <Col span={8}>{getIndustryCategory(theData.fieldA, theData.fieldB)}</Col>
  269. <Col span={4}>发布时间</Col>
  270. <Col span={8}>{theData.releaseDateFormattedDate}</Col>
  271. </Row>
  272. <Row>
  273. <Col span={4}>关键词</Col>
  274. <Col span={20}>
  275. {this.state.tags.map((tag) => {
  276. return <Tooltip key={tag} title={tag}>
  277. <Tag key={tag}>{tag}</Tag>
  278. </Tooltip>;
  279. })}
  280. </Col>
  281. </Row>
  282. <Row>
  283. <Col span={4}>摘要</Col>
  284. <Col span={20}>{theData.summary}</Col>
  285. </Row>
  286. <Row>
  287. <Col span={4}>成果简介</Col>
  288. <Col span={20}>{theData.introduction}</Col>
  289. </Row>
  290. <Row>
  291. <Col span={4}>技术图片</Col>
  292. <Col span={20}>
  293. <div className="clearfix">
  294. <Upload
  295. listType="picture-card"
  296. fileList={this.state.technicalPictureUrl}
  297. onPreview={(file) => {
  298. this.setState({
  299. previewImage: file.url || file.thumbUrl,
  300. previewVisible: true,
  301. });
  302. }} >
  303. </Upload>
  304. <Modal maskClosable={false} footer={null}
  305. visible={this.state.previewVisible}
  306. onCancel={() => { this.setState({ previewVisible: false }) }}>
  307. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  308. </Modal>
  309. </div>
  310. </Col>
  311. </Row>
  312. <Row>
  313. <Col span={4}>成熟度</Col>
  314. <Col span={8}>{getMaturity(theData.maturity)}</Col>
  315. <Col span={4}>创新度</Col>
  316. <Col span={8}>{getInnovation(theData.innovation)}</Col>
  317. </Row>
  318. <Row>
  319. <Col span={4}>成熟度证明材料(图片)</Col>
  320. <Col span={20}>
  321. <Upload className="demandDetailShow-upload"
  322. listType="picture-card"
  323. fileList={this.state.maturityPictureUrl}
  324. onPreview={(file) => {
  325. this.setState({
  326. previewImage: file.url || file.thumbUrl,
  327. previewVisible: true,
  328. });
  329. }} >
  330. </Upload>
  331. </Col>
  332. </Row>
  333. <Row>
  334. <Col span={4}>成熟度证明材料(文本)</Col>
  335. <Col span={20}>
  336. {theData.maturityTextFileUrl ?
  337. <span className="download-file">
  338. <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + this.props.data.id + '&sign=achievement_maturity_text_file') }}>成熟度证明材料(文本文件)</a>
  339. </span>
  340. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  341. </Col>
  342. </Row>
  343. <Row>
  344. <Col span={4}>成熟度证明材料(视频地址)</Col>
  345. <Col span={20}>{theData.maturityVideoUrl}</Col>
  346. </Row>
  347. <Row>
  348. <Col span={4}>成果所有人名称</Col>
  349. <Col span={8}>{theData.username || theData.unitName}</Col>
  350. <Col span={4}>合作方式</Col>
  351. <Col span={8}>
  352. {(() => {
  353. switch (theData.cooperationMode) {
  354. case "0":
  355. return <span>技术转让</span>;
  356. case "1":
  357. return <span>授权生产</span>;
  358. }
  359. })()}
  360. </Col>
  361. </Row>
  362. <Row>
  363. <Col span={4}>转让方式</Col>
  364. <Col span={8}>
  365. {(() => {
  366. switch (theData.transferMode) {
  367. case "0":
  368. return <span>完全转让</span>;
  369. case "1":
  370. return <span>许可转让</span>;
  371. case "2":
  372. return <span>技术入股</span>;
  373. }
  374. })()}
  375. </Col>
  376. <Col span={4}>转让价格</Col>
  377. <Col span={8}>
  378. {(() => {
  379. switch (theData.bargainingMode) {
  380. case "0":
  381. return <span>面议</span>;
  382. case "1":
  383. return <span>{theData.transferPrice} 万元</span>;
  384. }
  385. })()}
  386. </Col>
  387. </Row>
  388. <Row>
  389. <Col span={4}>技术场景</Col>
  390. <Col span={20}>{theData.technicalScene}</Col>
  391. </Row>
  392. <Row>
  393. <Col span={4}>技术突破</Col>
  394. <Col span={20}>{theData.breakthrough}</Col>
  395. </Row>
  396. <Row>
  397. <Col span={4}>专利情况</Col>
  398. <Col span={20}>{theData.patentCase}</Col>
  399. </Row>
  400. <Row>
  401. <Col span={4}>获奖情况</Col>
  402. <Col span={20}>{theData.awards}</Col>
  403. </Row>
  404. <Row>
  405. <Col span={4}>技术团队情况</Col>
  406. <Col span={20}>{theData.teamDes}</Col>
  407. </Row>
  408. <Row>
  409. <Col span={4}>技术参数</Col>
  410. <Col span={20}>{theData.parameter}</Col>
  411. </Row>
  412. <Row>
  413. <Col span={4}>技术方案</Col>
  414. <Col span={20}>
  415. {theData.techPlanUrl ?
  416. <span className="download-file">
  417. <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + this.props.data.id + '&sign=achievement_tech_plan') }}>技术方案</a>
  418. </span>
  419. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  420. </Col>
  421. </Row>
  422. <Row>
  423. <Col span={4}>商业计划书</Col>
  424. <Col span={20}>
  425. {theData.businessPlanUrl ?
  426. <span className="download-file">
  427. <a onClick={() => { window.open(globalConfig.context + '/api/user/achievement/download?id=' + this.props.data.id + '&sign=achievement_business_plan') }}>商业计划书</a>
  428. </span>
  429. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  430. </Col>
  431. </Row>
  432. {this.props.data.orderId ? <div>
  433. <p>状态流转记录: </p>
  434. <Table style={{ margin: '10px 0', background: "#eee" }}
  435. pagination={false}
  436. dataSource={this.state.dataSource}
  437. columns={this.state.columns} />
  438. </div> : <div></div>}
  439. <div>
  440. {theData.achievementOrderId ? <Button type="ghost" loading={this.state.buttonLoading}
  441. disabled={Boolean(theData.orderStatus != "0")}
  442. onClick={this.cancelSubmit}>我要撤销</Button>
  443. : <Button type="primary" onClick={() => {
  444. if (window.userData.number) {
  445. this.setState({ orderVisible: true });
  446. } else {
  447. message.warning("请先登录!");
  448. }
  449. }}>我要购买</Button>}
  450. <Modal maskClosable={false}
  451. title="我要购买"
  452. width={600}
  453. style={{ 'top': '160px' }}
  454. visible={this.state.orderVisible}
  455. footer={null}
  456. onCancel={() => { this.setState({ orderVisible: false }); }}>
  457. <Row>
  458. <Col span={2}>备注 : </Col>
  459. <Col span={22}>
  460. <Input type="textarea" rows={4} onChange={(e) => { this.state.comment = e.target.value }} />
  461. </Col>
  462. </Row>
  463. <Button loading={this.state.buttonLoading} style={{ marginTop: '20px' }} type="primary" onClick={this.handleSubmit}>提交</Button>
  464. </Modal>
  465. </div>
  466. </Spin>
  467. </Modal>
  468. );
  469. } else {
  470. return <div></div>
  471. }
  472. },
  473. });
  474. export default AchievementDetail;