demandDesc.jsx 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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 { getDemandType } from '../../tools.js';
  8. const DemandDetail = React.createClass({
  9. getInitialState() {
  10. return {
  11. visible: false,
  12. loading: false,
  13. tags: [],
  14. pictureUrl: [],
  15. };
  16. },
  17. handleCancel(e) {
  18. this.props.closeDesc(false);
  19. },
  20. loadData(id) {
  21. this.setState({
  22. loading: true
  23. });
  24. $.ajax({
  25. method: "get",
  26. dataType: "json",
  27. crossDomain: false,
  28. url: globalConfig.context + '/api/user/portal/demandDetail',
  29. data: {
  30. id: id
  31. },
  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. data: thisData,
  42. tags: thisData.keyword ? thisData.keyword.split(",") : [],
  43. pictureUrl: thisData.pictureUrl ? splitUrl(thisData.pictureUrl, ',', globalConfig.avatarHost + '/upload') : []
  44. });
  45. }.bind(this),
  46. }).always(function () {
  47. this.setState({
  48. loading: false
  49. });
  50. }.bind(this));
  51. },
  52. interestClick() {
  53. this.setState({
  54. loading: true
  55. });
  56. $.ajax({
  57. method: "post",
  58. dataType: "json",
  59. crossDomain: false,
  60. url: globalConfig.context + '/api/user/portal/demandInterest',
  61. data: {
  62. id: this.props.data.id
  63. },
  64. success: function (data) {
  65. if (data.error && data.error.length) {
  66. message.warning(data.error[0].message);
  67. } else {
  68. this.loadData(this.props.data.id);
  69. };
  70. }.bind(this),
  71. }).always(function () {
  72. this.setState({
  73. loading: false
  74. });
  75. }.bind(this));;
  76. },
  77. cancelInterestClick() {
  78. this.setState({
  79. loading: true
  80. });
  81. $.ajax({
  82. method: "post",
  83. dataType: "json",
  84. crossDomain: false,
  85. url: globalConfig.context + '/api/user/portal/demandCancelInterest',
  86. data: {
  87. id: this.state.data.demandInterestId
  88. },
  89. success: function (data) {
  90. if (data.error && data.error.length) {
  91. message.warning(data.error[0].message);
  92. } else {
  93. this.loadData(this.props.data.id);
  94. };
  95. }.bind(this),
  96. }).always(function () {
  97. this.setState({
  98. loading: false
  99. });
  100. }.bind(this));;
  101. },
  102. componentWillReceiveProps(nextProps) {
  103. if (!this.props.showDesc && nextProps.showDesc) {
  104. if (nextProps.data.id) {
  105. this.loadData(nextProps.data.id);
  106. } else {
  107. this.state.data = {};
  108. this.state.tags = [];
  109. this.state.pictureUrl = [];
  110. };
  111. };
  112. },
  113. render() {
  114. const theData = this.state.data || {};
  115. if (this.props.data) {
  116. return (
  117. <Spin spinning={this.state.loading} className="portal-desc">
  118. <Modal maskClosable={false}
  119. visible={this.props.showDesc}
  120. onCancel={this.handleCancel}
  121. title="需求详情"
  122. width='1000px'
  123. footer=''
  124. className="portal-desc-content">
  125. <Row>
  126. <Col span={4}>编号</Col>
  127. <Col span={8}>{theData.serialNumber}</Col>
  128. <Col span={4}>名称</Col>
  129. <Col span={8}>{theData.name}</Col>
  130. </Row>
  131. <Row>
  132. <Col span={4}>数据类别</Col>
  133. <Col span={8}>
  134. {(() => {
  135. switch (theData.dataCategory) {
  136. case "0":
  137. return <span>个人需求</span>;
  138. case "1":
  139. return <span>单位需求</span>;
  140. }
  141. })()}
  142. </Col>
  143. <Col span={4}>需求类型</Col>
  144. <Col span={8}>{getDemandType(theData.demandType)}</Col>
  145. </Row>
  146. <Row>
  147. <Col span={4}>应用领域</Col>
  148. <Col span={8}>{getIndustryCategory(theData.industryCategoryA, theData.industryCategoryB)}</Col>
  149. <Col span={4}>有效期限</Col>
  150. <Col span={8}>{theData.releaseDateFormattedDate}</Col>
  151. </Row>
  152. <Row>
  153. <Col span={4}>关键词</Col>
  154. <Col span={20}>
  155. {this.state.tags.map((tag) => {
  156. return <Tooltip key={tag} title={tag}>
  157. <Tag key={tag}>{tag}</Tag>
  158. </Tooltip>;
  159. })}
  160. </Col>
  161. </Row>
  162. <Row>
  163. <Col span={4}>问题说明</Col>
  164. <Col span={20}>{theData.problemDes}</Col>
  165. </Row>
  166. <Row>
  167. <Col span={4}>技术指标要求</Col>
  168. <Col span={20}>{theData.technicalRequirements}</Col>
  169. </Row>
  170. <Row>
  171. <Col span={4}>需求相关文件(图片)</Col>
  172. <Col span={20}>
  173. <div className="clearfix">
  174. <Upload
  175. listType="picture-card"
  176. fileList={this.state.pictureUrl}
  177. onPreview={(file) => {
  178. this.setState({
  179. previewImage: file.url || file.thumbUrl,
  180. previewVisible: true,
  181. });
  182. }} >
  183. </Upload>
  184. <Modal maskClosable={false} footer={null}
  185. visible={this.state.previewVisible}
  186. onCancel={() => { this.setState({ previewVisible: false }) }}>
  187. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  188. </Modal>
  189. </div>
  190. </Col>
  191. </Row>
  192. <Row>
  193. <Col span={4}>需求相关文件(文本)</Col>
  194. <Col span={20}>
  195. {theData.textFileUrl ?
  196. <span className="download-file">
  197. <a onClick={() => { window.open(globalConfig.context + '/api/user/demand/download?id=' + this.props.data.id + '&sign=demand_maturity_text_file') }}>需求文件(文本文件)</a>
  198. </span>
  199. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  200. </Col>
  201. </Row>
  202. <Row>
  203. <Col span={4}>需求文件(视频地址)</Col>
  204. <Col span={20}>{theData.videoUrl}</Col>
  205. </Row>
  206. <Row>
  207. <Col span={4}>雇佣方名称</Col>
  208. <Col span={8}>{theData.username || theData.unitName}</Col>
  209. <Col span={4}>固定周期</Col>
  210. <Col span={8}>{theData.fixedCycle}</Col>
  211. </Row>
  212. <Row>
  213. <Col span={4}>固定人数</Col>
  214. <Col span={8}>{theData.peopleNumber}</Col>
  215. <Col span={4}>预算价格</Col>
  216. <Col span={8}>{theData.budgetCost}</Col>
  217. </Row>
  218. <Row>
  219. <Col span={4}>固定方案</Col>
  220. <Col span={20}>{theData.fixedScheme}</Col>
  221. </Row>
  222. <div className="interest clearfix">
  223. {theData.demandInterestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
  224. : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
  225. </div>
  226. </Modal>
  227. </Spin>
  228. );
  229. } else {
  230. return <div></div>
  231. }
  232. },
  233. });
  234. export default DemandDetail;