demandDesc.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Button, Row, Col, Upload, Tooltip, Tag, Input, Table } 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 { splitUrl, getDemandType, beforeUploadFile, getOrderStatus } from '../../tools.js';
  8. const DemandDetail = React.createClass({
  9. getInitialState() {
  10. return {
  11. visible: false,
  12. loading: false,
  13. buttonLoading: false,
  14. dataSource: [],
  15. orderVisible: false,
  16. fileList: false,
  17. tags: [],
  18. pictureUrl: [],
  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/demandDetail',
  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. pictureUrl: thisData.pictureUrl ? splitUrl(thisData.pictureUrl, ',', globalConfig.avatarHost + '/upload') : []
  64. });
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. loadLogsData(id) {
  73. this.setState({
  74. loading: true
  75. });
  76. $.ajax({
  77. method: "get",
  78. dataType: "json",
  79. crossDomain: false,
  80. url: globalConfig.context + '/api/user/portal/order/demandOrderLog',
  81. data: {
  82. demandOrderId: id
  83. },
  84. success: function (data) {
  85. let thisData = data.data, theArr = [];
  86. if (!thisData) {
  87. if (data.error && data.error.length) {
  88. message.warning(data.error[0].message);
  89. };
  90. } else {
  91. thisData.map(function (item, i) {
  92. theArr.push({
  93. key: i,
  94. recordTime: item.recordTime,
  95. recordTimeFormattedDate: item.recordTimeFormattedDate,
  96. status: item.status,
  97. comment: item.comment
  98. })
  99. });
  100. };
  101. this.setState({
  102. dataSource: theArr
  103. });
  104. }.bind(this),
  105. }).always(function () {
  106. this.setState({
  107. loading: false
  108. });
  109. }.bind(this));
  110. },
  111. interestClick() {
  112. this.setState({
  113. loading: true
  114. });
  115. $.ajax({
  116. method: "post",
  117. dataType: "json",
  118. crossDomain: false,
  119. url: globalConfig.context + '/api/user/portal/demandInterest',
  120. data: {
  121. id: this.props.data.id
  122. },
  123. success: function (data) {
  124. if (data.error && data.error.length) {
  125. message.warning(data.error[0].message);
  126. } else {
  127. this.loadData(this.props.data.id);
  128. };
  129. }.bind(this),
  130. }).always(function () {
  131. this.setState({
  132. loading: false
  133. });
  134. }.bind(this));;
  135. },
  136. cancelInterestClick() {
  137. this.setState({
  138. loading: true
  139. });
  140. $.ajax({
  141. method: "post",
  142. dataType: "json",
  143. crossDomain: false,
  144. url: globalConfig.context + '/api/user/portal/demandCancelInterest',
  145. data: {
  146. id: this.state.data.demandInterestId
  147. },
  148. success: function (data) {
  149. if (data.error && data.error.length) {
  150. message.warning(data.error[0].message);
  151. } else {
  152. this.loadData(this.props.data.id);
  153. };
  154. }.bind(this),
  155. }).always(function () {
  156. this.setState({
  157. loading: false
  158. });
  159. }.bind(this));;
  160. },
  161. handleSubmit() {
  162. this.setState({
  163. buttonLoading: true
  164. });
  165. $.ajax({
  166. method: "post",
  167. dataType: "json",
  168. crossDomain: false,
  169. url: globalConfig.context + '/api/user/portal/order/orderDemand',
  170. data: {
  171. demandId: this.state.data.id,
  172. enclosureUrl: this.state.enclosureUrl,
  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/demandShutdown',
  197. data: {
  198. id: this.state.data.demandOrderId
  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.pictureUrl = [];
  223. };
  224. };
  225. },
  226. render() {
  227. const theData = this.state.data || {};
  228. if (this.props.data) {
  229. return (
  230. <Modal maskClosable={false}
  231. visible={this.props.showDesc}
  232. onCancel={this.handleCancel}
  233. title={<div className="interest clearfix">
  234. <span>需求详情</span>
  235. {theData.demandInterestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
  236. : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
  237. </div>}
  238. width='1000px'
  239. footer=''
  240. className="portal-desc-content">
  241. <Spin spinning={this.state.loading} className="portal-desc">
  242. <Row>
  243. <Col span={4}>编号</Col>
  244. <Col span={8}>{theData.serialNumber}</Col>
  245. <Col span={4}>名称</Col>
  246. <Col span={8}>{theData.name}</Col>
  247. </Row>
  248. <Row>
  249. <Col span={4}>数据类别</Col>
  250. <Col span={8}>
  251. {(() => {
  252. switch (theData.dataCategory) {
  253. case "0":
  254. return <span>个人需求</span>;
  255. case "1":
  256. return <span>单位需求</span>;
  257. }
  258. })()}
  259. </Col>
  260. <Col span={4}>需求类型</Col>
  261. <Col span={8}>{getDemandType(theData.demandType)}</Col>
  262. </Row>
  263. <Row>
  264. <Col span={4}>应用领域</Col>
  265. <Col span={8}>{getIndustryCategory(theData.industryCategoryA, theData.industryCategoryB)}</Col>
  266. <Col span={4}>有效期限</Col>
  267. <Col span={8}>{theData.releaseDateFormattedDate}</Col>
  268. </Row>
  269. <Row>
  270. <Col span={4}>关键词</Col>
  271. <Col span={20}>
  272. {this.state.tags.map((tag) => {
  273. return <Tooltip key={tag} title={tag}>
  274. <Tag key={tag}>{tag}</Tag>
  275. </Tooltip>;
  276. })}
  277. </Col>
  278. </Row>
  279. <Row>
  280. <Col span={4}>问题说明</Col>
  281. <Col span={20}>{theData.problemDes}</Col>
  282. </Row>
  283. <Row>
  284. <Col span={4}>技术指标要求</Col>
  285. <Col span={20}>{theData.technicalRequirements}</Col>
  286. </Row>
  287. <Row>
  288. <Col span={4}>需求相关文件(图片)</Col>
  289. <Col span={20}>
  290. <div className="clearfix">
  291. <Upload
  292. listType="picture-card"
  293. fileList={this.state.pictureUrl}
  294. onPreview={(file) => {
  295. this.setState({
  296. previewImage: file.url || file.thumbUrl,
  297. previewVisible: true,
  298. });
  299. }} >
  300. </Upload>
  301. <Modal maskClosable={false} footer={null}
  302. visible={this.state.previewVisible}
  303. onCancel={() => { this.setState({ previewVisible: false }) }}>
  304. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  305. </Modal>
  306. </div>
  307. </Col>
  308. </Row>
  309. <Row>
  310. <Col span={4}>需求相关文件(文本)</Col>
  311. <Col span={20}>
  312. {theData.textFileUrl ?
  313. <span className="download-file">
  314. <a onClick={() => { window.open(globalConfig.context + '/api/user/demand/download?id=' + this.props.data.id + '&sign=demand_maturity_text_file') }}>需求文件(文本文件)</a>
  315. </span>
  316. : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}
  317. </Col>
  318. </Row>
  319. <Row>
  320. <Col span={4}>需求文件(视频地址)</Col>
  321. <Col span={20}>{theData.videoUrl}</Col>
  322. </Row>
  323. <Row>
  324. <Col span={4}>雇佣方名称</Col>
  325. <Col span={8}>{theData.username || theData.unitName}</Col>
  326. <Col span={4}>固定周期</Col>
  327. <Col span={8}>{theData.fixedCycle}</Col>
  328. </Row>
  329. <Row>
  330. <Col span={4}>固定人数</Col>
  331. <Col span={8}>{theData.peopleNumber}</Col>
  332. <Col span={4}>预算价格</Col>
  333. <Col span={8}>{theData.budgetCost}</Col>
  334. </Row>
  335. <Row>
  336. <Col span={4}>固定方案</Col>
  337. <Col span={20}>{theData.fixedScheme}</Col>
  338. </Row>
  339. {this.props.data.orderId ? <div>
  340. <p>状态流转记录: </p>
  341. <Table style={{ margin: '10px 0', background: "#eee" }}
  342. pagination={false}
  343. dataSource={this.state.dataSource}
  344. columns={this.state.columns} />
  345. </div> : <div></div>}
  346. <div>
  347. {theData.demandOrderId ? <Button type="ghost" loading={this.state.buttonLoading}
  348. disabled={Boolean(theData.orderStatus != "0")}
  349. onClick={this.cancelSubmit}>我要撤销</Button>
  350. : <Button type="primary" onClick={() => {
  351. if (window.userData.number) {
  352. this.setState({ orderVisible: true });
  353. } else {
  354. message.warning("请先登录!");
  355. }
  356. }}>我要接单</Button>}
  357. <Modal maskClosable={false}
  358. title="我要接单"
  359. width={600}
  360. style={{ 'top': '160px' }}
  361. visible={this.state.orderVisible}
  362. footer={null}
  363. onCancel={() => { this.setState({ orderVisible: false }); }}>
  364. <Row>
  365. <Col span={2}>附件 : </Col>
  366. <Col span={8}>
  367. <Upload action={globalConfig.context + "/api/user/portal/order/demandUpload"}
  368. data={{ 'sign': 'demand_order_file' }}
  369. beforeUpload={beforeUploadFile}
  370. fileList={this.state.fileList}
  371. onChange={(info) => {
  372. if (info.file.status !== 'uploading') {
  373. console.log(info.file, info.fileList);
  374. }
  375. if (info.file.status === 'done') {
  376. if (!info.file.response.error.length) {
  377. message.success(`${info.file.name} 文件上传成功!`);
  378. } else {
  379. message.warning(info.file.response.error[0].message);
  380. return;
  381. };
  382. this.state.enclosureUrl = info.file.response.data;
  383. } else if (info.file.status === 'error') {
  384. message.error(`${info.file.name} 文件上传失败。`);
  385. };
  386. this.setState({ fileList: info.fileList.slice(-1) });
  387. }} >
  388. <Button><Icon type="upload" /> 上传相关资质附件 </Button>
  389. </Upload>
  390. </Col>
  391. </Row>
  392. <Row style={{ marginTop: '20px' }} >
  393. <Col span={2}>备注 : </Col>
  394. <Col span={22}>
  395. <Input type="textarea" rows={4} onChange={(e) => { this.state.comment = e.target.value }} />
  396. </Col>
  397. </Row>
  398. <Button loading={this.state.buttonLoading} style={{ marginTop: '20px' }} type="primary" onClick={this.handleSubmit}>提交</Button>
  399. </Modal>
  400. </div>
  401. </Spin>
  402. </Modal>
  403. );
  404. } else {
  405. return <div></div>
  406. }
  407. },
  408. });
  409. export default DemandDetail;