demand.jsx 14 KB

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