content.jsx 16 KB

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