demand.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. import React from 'react';
  2. import { Pagination, Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Table, Spin } from 'antd';
  3. import '../portal.less';
  4. import logoImg from '../../../../image/logo.png';
  5. import searchImg from '../../../../image/search.png';
  6. import demand_sup from '../../../../image/demand_sup.png';
  7. import demand_ico_5 from '../../../../image/demand_ico_5.png';
  8. import demand_ico_3 from '../../../../image/demand_ico_3.png';
  9. import demand_ico_2 from '../../../../image/demand_ico_2.png';
  10. import demand_ico_1 from '../../../../image/demand_ico_1.png';
  11. import uncertify from '../../../../image/demand_ico_6.png';
  12. import certify from '../../../../image/demand_ico_6_atv.png';
  13. import { IndustryObject, getIndustryCategory } from '../../DicIndustryList';
  14. import { demandTypeList } from '../../dataDic';
  15. import { getDemandType } from '../../tools';
  16. import ajax from 'jquery/src/ajax/xhr.js'
  17. import $ from 'jquery/src/ajax';
  18. const Content = React.createClass({
  19. loadData(pageNo) {
  20. this.setState({
  21. loading: true
  22. });
  23. switch (this.state.budgetCost) {
  24. case 1:
  25. this.state.budgetCostLower = 1;
  26. this.state.budgetCostUpper = 10;
  27. break;
  28. case 2:
  29. this.state.budgetCostLower = 10;
  30. this.state.budgetCostUpper = 50;
  31. break;
  32. case 3:
  33. this.state.budgetCostLower = 50;
  34. this.state.budgetCostUpper = 100;
  35. break;
  36. case 4:
  37. this.state.budgetCostLower = 100;
  38. this.state.budgetCostUpper = 500;
  39. break;
  40. case 5:
  41. this.state.budgetCostLower = 500;
  42. this.state.budgetCostUpper = 1000;
  43. break;
  44. case 6:
  45. this.state.budgetCostLower = null;
  46. this.state.budgetCostUpper = null;
  47. this.state.sign = 1;
  48. break;
  49. case 999:
  50. this.state.budgetCostLower = null;
  51. this.state.budgetCostUpper = null;
  52. this.state.sign = 0;
  53. break;
  54. };
  55. $.ajax({
  56. method: "get",
  57. dataType: "json",
  58. url: globalConfig.context + "/portal/search/demandList",
  59. data: {
  60. pageNo: pageNo || 1,
  61. pageSize: this.state.pagination.pageSize,
  62. keyword: this.state.keyword,
  63. demandType: this.state.demandType == 999 ? null : this.state.demandType,
  64. budgetCostLower: this.state.budgetCostLower, //交易金额下限
  65. budgetCostUpper: this.state.budgetCostUpper, //交易金额上限
  66. industryCategoryA: this.state.fieldA || null, //技术领域(行业类别A)
  67. industryCategoryB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B)
  68. sign: this.state.sign
  69. },
  70. success: function (data) {
  71. let theArr = [];
  72. if (!data.data || !data.data.list) {
  73. if (data.error && data.error.length) {
  74. message.warning(data.error[0].message);
  75. };
  76. data.data = {};
  77. } else {
  78. for (let i = 0; i < data.data.list.length; i++) {
  79. let thisdata = data.data.list[i];
  80. theArr.push({
  81. key: i,
  82. id: thisdata.id,
  83. serialNumber: thisdata.serialNumber,
  84. keyword: thisdata.keyword,
  85. dataCategory: thisdata.dataCategory,
  86. name: thisdata.name,
  87. level: thisdata.level,
  88. industryCategory: [thisdata.industryCategoryA, thisdata.industryCategoryB],
  89. industryCategoryA: thisdata.industryCategoryA,
  90. industryCategoryB: thisdata.industryCategoryB,
  91. demandType: thisdata.demandType,
  92. budgetCost: thisdata.budgetCost,
  93. problemDes: thisdata.problemDes,
  94. releaseDate: thisdata.releaseDate,
  95. employerName: thisdata.employerName,
  96. releaseDateFormattedDate: thisdata.releaseDateFormattedDate
  97. });
  98. };
  99. };
  100. this.state.pagination.pageNo = data.data.pageNo;
  101. this.state.pagination.total = data.data.totalCount;
  102. this.setState({
  103. dataSource: theArr,
  104. pagination: this.state.pagination
  105. });
  106. }.bind(this),
  107. }).done(function (data) {
  108. this.state.sign = 0;
  109. if (data.error && data.error.length) {
  110. message.warning(data.error[0].message);
  111. };
  112. this.setState({
  113. loading: false
  114. });
  115. }.bind(this));
  116. },
  117. getInitialState() {
  118. return {
  119. loading: false,
  120. showDesc: false,
  121. industryRadioB: [],
  122. sign: 0,
  123. budgetCost: 999,
  124. budgetCostLower: null,
  125. budgetCostUpper: null,
  126. pagination: {
  127. pageNo: 1,
  128. pageSize: 10,
  129. total: 0
  130. },
  131. dataSource: []
  132. };
  133. },
  134. componentWillMount() {
  135. let theArr = [];
  136. let demandArr = [];
  137. //行业分类单选项
  138. theArr.push(
  139. <Radio.Button key={999} value={999}>不限</Radio.Button>
  140. );
  141. IndustryObject.map(function (item) {
  142. theArr.push(
  143. <Radio.Button key={item.value} value={item.value}>{item.label}</Radio.Button>
  144. );
  145. });
  146. //技术类型单选项目
  147. demandArr.push(
  148. <Radio.Button key={999} value={999}>不限</Radio.Button>
  149. );
  150. demandTypeList.map(function (item) {
  151. demandArr.push(
  152. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  153. );
  154. });
  155. this.state.industryRadioA = theArr;
  156. this.state.demandTypeRadio = demandArr;
  157. if (window.location.search) {
  158. this.state.keyword = window.location.search;
  159. };
  160. this.loadData();
  161. },
  162. industryChange(e) {
  163. let theArr = [];
  164. if (e.target.value !== 999) {
  165. theArr.push(
  166. <Radio.Button key={999} value={999}>不限</Radio.Button>
  167. );
  168. IndustryObject.map(function (item1) {
  169. if (item1.value == e.target.value) {
  170. item1.children.map(function (item2) {
  171. theArr.push(
  172. <Radio.Button key={item2.value} value={item2.value}>{item2.label}</Radio.Button>
  173. );
  174. });
  175. }
  176. });
  177. this.state.fieldA = e.target.value;
  178. } else {
  179. this.state.fieldA = null;
  180. this.state.fieldB = null;
  181. };
  182. this.loadData();
  183. this.setState({ industryRadioB: theArr });
  184. },
  185. tableRowClick(record, index) {
  186. window.open(globalConfig.context + '/portal/detail/demandDetail.html?id=' + record.id + '&type=' + record.dataCategory);
  187. },
  188. closeDesc(e) {
  189. this.setState({
  190. showDesc: e
  191. });
  192. },
  193. render() {
  194. const { pageNo, pageSize, total } = this.state.pagination;
  195. const _me = this;
  196. return (
  197. <div className="portal-body">
  198. <div className="portal-nav clearfix">
  199. <div className="nav-logoBox">
  200. <img onClick={() => { window.open(globalConfig.context + '/portal/index.html') }} src={logoImg} alt="" />
  201. </div>
  202. <ul className="nav-list clearfix">
  203. <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>
  204. <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>
  205. <li className={this.props.searchType == 'subscriber' ? 'active' : ''}><a href={"/portal/search/subscriber.html"}>伙伴/行家</a></li>
  206. </ul>
  207. <div className="nav-search">
  208. <Input onChange={(e) => { this.state.keyword = e.target.value; }} />
  209. <Button onClick={() => { this.loadData() }}>
  210. <img src={searchImg} alt="" />
  211. </Button>
  212. </div>
  213. </div>
  214. <div className="portal-content">
  215. <Row className="search-criteria">
  216. <Col className="search-title" span={2}>
  217. <span>行业分类</span>
  218. </Col>
  219. <Col className="search-select" span={22}>
  220. <Radio.Group defaultValue={999} onChange={this.industryChange}>
  221. {this.state.industryRadioA}
  222. </Radio.Group>
  223. </Col>
  224. </Row>
  225. {this.state.industryRadioB.length > 1 ? <Row className="search-criteria">
  226. <Col className="search-title" span={2}>
  227. <span>行业子分类</span>
  228. </Col>
  229. <Col className="search-select" span={22}>
  230. <Radio.Group defaultValue={999} onChange={(e) => { this.state.fieldB = e.target.value; this.loadData() }}>
  231. {this.state.industryRadioB}
  232. </Radio.Group>
  233. </Col>
  234. </Row> : <div></div>}
  235. <Row className="search-criteria">
  236. <Col className="search-title" span={2}>
  237. <span>预算价格</span>
  238. </Col>
  239. <Col className="search-select" span={14}>
  240. <Radio.Group value={this.state.budgetCost}
  241. onChange={(e) => {
  242. this.setState({
  243. budgetCost: e.target.value
  244. });
  245. this.state.budgetCost = e.target.value;
  246. this.loadData();
  247. }}>
  248. <Radio.Button value={999}>不限</Radio.Button>
  249. <Radio.Button value={1}>1-10万元</Radio.Button>
  250. <Radio.Button value={2}>10-50万元</Radio.Button>
  251. <Radio.Button value={3}>50-100万元</Radio.Button>
  252. <Radio.Button value={4}>100-500万元</Radio.Button>
  253. <Radio.Button value={5}>500-1000万元</Radio.Button>
  254. <Radio.Button value={6}>面议</Radio.Button>
  255. </Radio.Group>
  256. </Col>
  257. <Col span={8}>
  258. <Checkbox checked={!this.state.budgetCost} onChange={(e) => { if (e.target.checked) { this.setState({ budgetCost: null }) } }}>自定义金额</Checkbox>
  259. <InputNumber style={{ width: 80 }} disabled={Boolean(this.state.budgetCost)} onChange={(e) => { this.state.budgetCostLower = e; }} />
  260. <span> 到 </span>
  261. <InputNumber style={{ width: 80 }} disabled={Boolean(this.state.budgetCost)} onChange={(e) => { this.state.budgetCostUpper = e; }} />
  262. <span> 万元</span>
  263. <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.budgetCost)} onClick={() => { this.loadData() }}>确定</Button>
  264. </Col>
  265. </Row>
  266. <Row className="search-criteria">
  267. <Col className="search-title" span={2}>
  268. <span>技术类型</span>
  269. </Col>
  270. <Col className="search-select" span={22}>
  271. <Radio.Group defaultValue={999} onChange={(e) => {
  272. this.setState({
  273. demandType: e.target.value
  274. });
  275. this.state.demandType = e.target.value;
  276. this.loadData();
  277. }}>
  278. {this.state.demandTypeRadio}
  279. </Radio.Group>
  280. </Col>
  281. </Row>
  282. <Spin spinning={this.state.loading} style={{ marginBottom: '40px' }}>
  283. <ul className='detail_interest_sub'>
  284. {this.state.dataSource.map((item) => {
  285. return <li key={item.id} onClick={() => { this.tableRowClick(item) }}>
  286. <div className="interest_list_title">
  287. <img src={demand_sup} alt="" />
  288. <span>{item.name}</span>
  289. </div>
  290. <div className="interest_list_name" style={{ paddingLeft: '20px' }}>
  291. <p>{item.employerName}</p>
  292. <div className="interest_list_confirm">
  293. <span>{item.level ? '身份已验证' : '身份未验证'}</span>
  294. <img src={item.level ? certify : uncertify} alt="" />
  295. </div>
  296. </div>
  297. <div className="detial_sub">
  298. <span className="detial_sub_icon">
  299. <img src={demand_ico_5} alt="需求" />
  300. </span>
  301. <span className="detial_sub_title">需求: </span>
  302. <span className="detial_sub_text">{item.problemDes}</span>
  303. </div>
  304. <div className="detial_sub">
  305. <span className="detial_sub_icon">
  306. <img src={demand_ico_3} alt="预算" />
  307. </span>
  308. <span className="detial_sub_title">预算: </span>
  309. <span className="money_text">{item.budgetCost ? item.budgetCost + ' 万元' : '价格面议'}</span>
  310. </div>
  311. <div className="detial_sub">
  312. <span className="detial_sub_icon">
  313. <img src={demand_ico_2} alt="类型" />
  314. </span>
  315. <span className="detial_sub_title">类型: </span>
  316. <span className="detial_sub_text">{getDemandType(item.demandType)}</span>
  317. </div>
  318. <div className="detial_sub">
  319. <span className="detial_sub_icon">
  320. <img src={demand_ico_1} alt="行业" />
  321. </span>
  322. <span className="detial_sub_title">行业: </span>
  323. <span className="detial_sub_text">{getIndustryCategory(item.industryCategoryA, item.industryCategoryB)}</span>
  324. </div>
  325. </li>
  326. })}
  327. </ul>
  328. <Pagination style={{ float: 'right' }}
  329. onChange={(e) => { this.loadData(e); }}
  330. total={total}
  331. showTotal={() => { return '共' + total + '条数据' }}
  332. current={pageNo}
  333. pageSize={pageSize} />
  334. </Spin>
  335. </div >
  336. </div>
  337. )
  338. }
  339. });
  340. export default Content;