achievement.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  1. import React from 'react';
  2. import { Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Table, Spin, Carousel } from 'antd';
  3. import '../portal.less';
  4. import logoImg from '../../../../image/logo.png';
  5. import searchImg from '../../../../image/search.png';
  6. import slideImg from '../../../../image/slide_img_1.png';
  7. import { IndustryObject, getIndustryCategory } from '../../DicIndustryList';
  8. import { achievementCategoryList, transferModeList, maturityList } from '../../dataDic';
  9. import { getAchievementCategory } from '../../tools';
  10. import ajax from 'jquery/src/ajax/xhr.js'
  11. import $ from 'jquery/src/ajax';
  12. import AchievementDesc from './achievementDesc';
  13. const Content = React.createClass({
  14. loadData(pageNo) {
  15. this.setState({
  16. loading: true
  17. });
  18. switch (this.state.transferPrice) {
  19. case 1:
  20. this.state.transferPriceLower = 1;
  21. this.state.transferPriceUpper = 10;
  22. break;
  23. case 2:
  24. this.state.transferPriceLower = 10;
  25. this.state.transferPriceUpper = 50;
  26. break;
  27. case 3:
  28. this.state.transferPriceLower = 50;
  29. this.state.transferPriceUpper = 100;
  30. break;
  31. case 4:
  32. this.state.transferPriceLower = 100;
  33. this.state.transferPriceUpper = 500;
  34. break;
  35. case 5:
  36. this.state.transferPriceLower = 500;
  37. this.state.transferPriceUpper = 1000;
  38. break;
  39. case 6:
  40. this.state.bargainingMode = 1;
  41. break;
  42. case 999:
  43. this.state.transferPriceLower = null;
  44. this.state.transferPriceUpper = null;
  45. break;
  46. }
  47. $.ajax({
  48. method: "get",
  49. dataType: "json",
  50. url: globalConfig.context + "/portal/search/achievementList",
  51. data: {
  52. pageNo: pageNo || 1,
  53. pageSize: this.state.pagination.pageSize,
  54. category: this.state.category == 999 ? null : this.state.category, //技术类型
  55. keyword: this.state.keyword,
  56. maturity: this.state.maturity == 999 ? null : this.state.maturity, //成熟度
  57. transferPriceLower: this.state.transferPriceLower, //交易金额下限
  58. transferPriceUpper: this.state.transferPriceUpper, //交易金额上限
  59. bargainingMode: this.state.bargainingMode,
  60. transferMode: this.state.transferMode == 999 ? null : this.state.transferMode, //交易方式
  61. fieldA: this.state.fieldA, //技术领域(行业类别A)
  62. fieldB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B)
  63. },
  64. success: function (data) {
  65. let theArr = [];
  66. if (!data.data || !data.data.list) {
  67. if (data.error && data.error.length) {
  68. message.warning(data.error[0].message);
  69. };
  70. } else {
  71. for (let i = 0; i < data.data.list.length; i++) {
  72. let thisdata = data.data.list[i];
  73. theArr.push({
  74. key: i,
  75. id: thisdata.id,
  76. serialNumber: thisdata.serialNumber,
  77. keyword: thisdata.keyword,
  78. name: thisdata.name,
  79. dataCategory: thisdata.dataCategory,
  80. category: thisdata.category,
  81. ownerName: thisdata.username || thisdata.unitName,
  82. username: thisdata.username,
  83. unitName: thisdata.unitName,
  84. releaseDate: thisdata.releaseDate,
  85. ownerType: thisdata.ownerType,
  86. field: [thisdata.fieldA, thisdata.fieldB],
  87. transferPrice: thisdata.transferPrice,
  88. maturity: thisdata.maturity,
  89. transferMode: thisdata.transferMode,
  90. releaseDateFormattedDate: thisdata.releaseDateFormattedDate
  91. });
  92. };
  93. };
  94. this.state.pagination.defaultCurrent = data.data.pageNo;
  95. this.state.pagination.total = data.data.totalCount;
  96. this.setState({
  97. dataSource: theArr,
  98. pagination: this.state.pagination
  99. });
  100. }.bind(this),
  101. }).done(function (data) {
  102. if (data.error && data.error.length) {
  103. message.warning(data.error[0].message);
  104. };
  105. this.setState({
  106. loading: false
  107. });
  108. this.state.bargainingMode = 0;
  109. }.bind(this));
  110. },
  111. getInitialState() {
  112. return {
  113. loading: false,
  114. showDesc: false,
  115. industryRadioB: [],
  116. transferPrice: 999,
  117. pagination: {
  118. defaultCurrent: 1,
  119. defaultPageSize: 10,
  120. showQuickJumper: true,
  121. pageSize: 10,
  122. onChange: function (page) {
  123. this.loadData(page);
  124. }.bind(this),
  125. showTotal: function (total) {
  126. return '共' + total + '条数据';
  127. }
  128. },
  129. columns: [
  130. {
  131. title: '编号',
  132. dataIndex: 'serialNumber',
  133. key: 'serialNumber',
  134. }, {
  135. title: '名称',
  136. dataIndex: 'name',
  137. key: 'name',
  138. }, {
  139. title: '关键字',
  140. dataIndex: 'keyword',
  141. key: 'keyword',
  142. }, {
  143. title: '成果类型',
  144. dataIndex: 'dataCategory',
  145. key: 'dataCategory',
  146. render: text => {
  147. switch (text) {
  148. case "0":
  149. return <span>成果</span>;
  150. case "1":
  151. return <span>技术</span>;
  152. case "2":
  153. return <span>项目</span>;
  154. }
  155. }
  156. }, {
  157. title: '类型',
  158. dataIndex: 'category',
  159. key: 'category',
  160. render: text => { return getAchievementCategory(text); }
  161. }, {
  162. title: '行业分类',
  163. dataIndex: 'field',
  164. key: 'field',
  165. render: text => { return getIndustryCategory(text[0], text[1]) }
  166. }, {
  167. title: '所有人名称',
  168. dataIndex: 'ownerName',
  169. key: 'ownerName',
  170. }, {
  171. title: '所有人类型',
  172. dataIndex: 'ownerType',
  173. key: 'ownerType',
  174. render: text => {
  175. switch (text) {
  176. case "0":
  177. return <span>个人</span>;
  178. case "1":
  179. return <span>组织</span>
  180. }
  181. }
  182. }, {
  183. title: '发布时间',
  184. dataIndex: 'releaseDateFormattedDate',
  185. key: 'releaseDateFormattedDate',
  186. }
  187. ],
  188. dataSource: []
  189. };
  190. },
  191. componentWillMount() {
  192. let theArr = [];
  193. let theCategoryArr = [], theTransferModeArr = [], theMaturityArr = [];
  194. //行业分类单选项
  195. theArr.push(
  196. <Radio.Button key={999} value={999}>不限</Radio.Button>
  197. );
  198. IndustryObject.map(function (item) {
  199. theArr.push(
  200. <Radio.Button key={item.value} value={item.value}>{item.label}</Radio.Button>
  201. );
  202. });
  203. //技术类型单选项目
  204. theCategoryArr.push(
  205. <Radio.Button key={999} value={999}>不限</Radio.Button>
  206. );
  207. achievementCategoryList.map(function (item) {
  208. theCategoryArr.push(
  209. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  210. );
  211. });
  212. //交易方式单选项目
  213. theTransferModeArr.push(
  214. <Radio.Button key={999} value={999}>不限</Radio.Button>
  215. );
  216. transferModeList.map(function (item) {
  217. theTransferModeArr.push(
  218. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  219. );
  220. });
  221. //成熟度单选项目
  222. theMaturityArr.push(
  223. <Radio.Button key={999} value={999}>不限</Radio.Button>
  224. );
  225. maturityList.map(function (item) {
  226. theMaturityArr.push(
  227. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  228. );
  229. });
  230. this.state.industryRadioA = theArr;
  231. this.state.categoryRadio = theCategoryArr;
  232. this.state.transferModeRadio = theTransferModeArr;
  233. this.state.maturityRadio = theMaturityArr;
  234. this.loadData();
  235. },
  236. industryChange(e) {
  237. let theArr = [];
  238. if (e.target.value !== 999) {
  239. theArr.push(
  240. <Radio.Button key={999} value={999}>不限</Radio.Button>
  241. );
  242. IndustryObject.map(function (item1) {
  243. if (item1.value == e.target.value) {
  244. item1.children.map(function (item2) {
  245. theArr.push(
  246. <Radio.Button key={item2.value} value={item2.value}>{item2.label}</Radio.Button>
  247. );
  248. });
  249. }
  250. });
  251. this.state.fieldA = e.target.value;
  252. } else {
  253. this.state.fieldA = null;
  254. };
  255. this.loadData();
  256. this.setState({ industryRadioB: theArr });
  257. },
  258. tableRowClick(record, index) {
  259. window.open(globalConfig.context + '/portal/detail/achievementDetail.html?id=' + record.id + '&type=' + record.ownerType);
  260. },
  261. closeDesc(e) {
  262. this.setState({
  263. showDesc: e
  264. });
  265. },
  266. render() {
  267. return (
  268. <div className="portal-body">
  269. <div className="portal-nav clearfix">
  270. <div className="nav-logoBox">
  271. <img src={logoImg} alt="" />
  272. </div>
  273. <ul className="nav-list clearfix">
  274. <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>
  275. <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>
  276. </ul>
  277. <div className="nav-search">
  278. <Input onChange={(e) => { this.state.keyword = e.target.value; }} />
  279. <Button onClick={() => { this.loadData() }}>
  280. <img src={searchImg} alt="" />
  281. </Button>
  282. </div>
  283. </div>
  284. <Carousel autoplay className="portal-carousel">
  285. <div className="slide-box"><img src={slideImg} alt="" /></div>
  286. <div className="slide-box"><img src={slideImg} alt="" /></div>
  287. <div className="slide-box"><img src={slideImg} alt="" /></div>
  288. <div className="slide-box"><img src={slideImg} alt="" /></div>
  289. </Carousel>
  290. <div className="portal-content">
  291. <Row className="search-criteria">
  292. <Col className="search-title" span={2}>
  293. <span>行业分类</span>
  294. </Col>
  295. <Col className="search-select" span={22}>
  296. <Radio.Group defaultValue={999} onChange={this.industryChange}>
  297. {this.state.industryRadioA}
  298. </Radio.Group>
  299. </Col>
  300. </Row>
  301. {this.state.industryRadioB.length > 1 ? <Row className="search-criteria">
  302. <Col className="search-title" span={2}>
  303. <span>行业子分类</span>
  304. </Col>
  305. <Col className="search-select" span={22}>
  306. <Radio.Group defaultValue={999} onChange={(e) => { this.state.fieldB = e.target.value; this.loadData() }}>
  307. {this.state.industryRadioB}
  308. </Radio.Group>
  309. </Col>
  310. </Row> : <div></div>}
  311. <Row className="search-criteria">
  312. <Col className="search-title" span={2}>
  313. <span>交易价格</span>
  314. </Col>
  315. <Col className="search-select" span={13}>
  316. <Radio.Group value={this.state.transferPrice}
  317. onChange={(e) => {
  318. this.setState({
  319. transferPrice: e.target.value
  320. });
  321. this.state.transferPrice = e.target.value;
  322. this.loadData();
  323. }}>
  324. <Radio.Button value={999}>不限</Radio.Button>
  325. <Radio.Button value={1}>1-10万元</Radio.Button>
  326. <Radio.Button value={2}>10-50万元</Radio.Button>
  327. <Radio.Button value={3}>50-100万元</Radio.Button>
  328. <Radio.Button value={4}>100-500万元</Radio.Button>
  329. <Radio.Button value={5}>500-1000万元</Radio.Button>
  330. <Radio.Button value={6}>面议</Radio.Button>
  331. </Radio.Group>
  332. </Col>
  333. <Col span={9}>
  334. <Checkbox checked={!this.state.transferPrice} onChange={(e) => { if (e.target.checked) { this.setState({ transferPrice: null }) } }}>自定义金额</Checkbox>
  335. <InputNumber style={{ width: 80 }}
  336. disabled={Boolean(this.state.transferPrice)}
  337. onChange={(e) => { this.state.transferPriceLower = e; }} />
  338. <span> 到 </span>
  339. <InputNumber style={{ width: 80 }}
  340. disabled={Boolean(this.state.transferPrice)}
  341. onChange={(e) => { this.state.transferPriceUpper = e; }} />
  342. <span> 万元</span>
  343. <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.transferPrice)} onClick={() => { this.loadData() }}>确定</Button>
  344. </Col>
  345. </Row>
  346. <Row className="search-criteria">
  347. <Col className="search-title" span={2}>
  348. <span>技术类型</span>
  349. </Col>
  350. <Col className="search-select" span={22}>
  351. <Radio.Group defaultValue={999} onChange={(e) => {
  352. this.setState({
  353. category: e.target.value
  354. });
  355. this.state.category = e.target.value;
  356. this.loadData();
  357. }}>
  358. {this.state.categoryRadio}
  359. </Radio.Group>
  360. </Col>
  361. </Row>
  362. <Row className="search-criteria">
  363. <Col className="search-title" span={2}>
  364. <span>交易方式</span>
  365. </Col>
  366. <Col className="search-select" span={22}>
  367. <Radio.Group defaultValue={999} onChange={(e) => {
  368. this.setState({
  369. transferMode: e.target.value
  370. });
  371. this.state.transferMode = e.target.value
  372. this.loadData();
  373. }}>
  374. {this.state.transferModeRadio}
  375. </Radio.Group>
  376. </Col>
  377. </Row>
  378. <Row className="search-criteria">
  379. <Col className="search-title" span={2}>
  380. <span>成熟度</span>
  381. </Col>
  382. <Col className="search-select" span={22}>
  383. <Radio.Group defaultValue={999} onChange={(e) => {
  384. this.setState({
  385. maturity: e.target.value
  386. });
  387. this.state.maturity = e.target.value
  388. this.loadData();
  389. }}>
  390. {this.state.maturityRadio}
  391. </Radio.Group>
  392. </Col>
  393. </Row>
  394. <Spin spinning={this.state.loading}>
  395. <Table columns={this.state.columns}
  396. dataSource={this.state.dataSource}
  397. pagination={this.state.pagination}
  398. onRowClick={this.tableRowClick} />
  399. </Spin>
  400. <AchievementDesc
  401. data={this.state.RowData}
  402. showDesc={this.state.showDesc}
  403. closeDesc={this.closeDesc} />
  404. </div >
  405. </div>
  406. )
  407. }
  408. });
  409. export default Content;