import React from 'react'; import { Pagination, Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Table, Spin } from 'antd'; import '../portal.less'; import logoImg from '../../../../image/logo.png'; import searchImg from '../../../../image/search.png'; import demand_sup from '../../../../image/demand_sup.png'; import demand_ico_5 from '../../../../image/demand_ico_5.png'; import demand_ico_3 from '../../../../image/demand_ico_3.png'; import demand_ico_2 from '../../../../image/demand_ico_2.png'; import demand_ico_1 from '../../../../image/demand_ico_1.png'; import uncertify from '../../../../image/demand_ico_6.png'; import certify from '../../../../image/demand_ico_6_atv.png'; import { IndustryObject, getIndustryCategory } from '../../DicIndustryList'; import { demandTypeList } from '../../dataDic'; import { getDemandType } from '../../tools'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; const Content = React.createClass({ loadData(pageNo) { this.setState({ loading: true }); switch (this.state.budgetCost) { case 1: this.state.budgetCostLower = 1; this.state.budgetCostUpper = 10; break; case 2: this.state.budgetCostLower = 10; this.state.budgetCostUpper = 50; break; case 3: this.state.budgetCostLower = 50; this.state.budgetCostUpper = 100; break; case 4: this.state.budgetCostLower = 100; this.state.budgetCostUpper = 500; break; case 5: this.state.budgetCostLower = 500; this.state.budgetCostUpper = 1000; break; case 6: this.state.budgetCostLower = null; this.state.budgetCostUpper = null; this.state.sign = 1; break; case 999: this.state.budgetCostLower = null; this.state.budgetCostUpper = null; this.state.sign = 0; break; }; $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/portal/search/demandList", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, keyword: this.state.keyword, demandType: this.state.demandType == 999 ? null : this.state.demandType, budgetCostLower: this.state.budgetCostLower, //交易金额下限 budgetCostUpper: this.state.budgetCostUpper, //交易金额上限 industryCategoryA: this.state.fieldA || null, //技术领域(行业类别A) industryCategoryB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B) sign: this.state.sign }, success: function (data) { let theArr = []; if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; data.data = {}; } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, id: thisdata.id, serialNumber: thisdata.serialNumber, keyword: thisdata.keyword, dataCategory: thisdata.dataCategory, name: thisdata.name, level: thisdata.level, industryCategory: [thisdata.industryCategoryA, thisdata.industryCategoryB], industryCategoryA: thisdata.industryCategoryA, industryCategoryB: thisdata.industryCategoryB, demandType: thisdata.demandType, budgetCost: thisdata.budgetCost, problemDes: thisdata.problemDes, releaseDate: thisdata.releaseDate, employerName: thisdata.employerName, releaseDateFormattedDate: thisdata.releaseDateFormattedDate }); }; }; this.state.pagination.pageNo = data.data.pageNo; this.state.pagination.total = data.data.totalCount; this.setState({ dataSource: theArr, pagination: this.state.pagination }); }.bind(this), }).done(function (data) { this.state.sign = 0; if (data.error && data.error.length) { message.warning(data.error[0].message); }; this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false, showDesc: false, industryRadioB: [], sign: 0, budgetCost: 999, budgetCostLower: null, budgetCostUpper: null, pagination: { pageNo: 1, pageSize: 10, total: 0 }, dataSource: [] }; }, componentWillMount() { let theArr = []; let demandArr = []; //行业分类单选项 theArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); IndustryObject.map(function (item) { theArr.push( <Radio.Button key={item.value} value={item.value}>{item.label}</Radio.Button> ); }); //技术类型单选项目 demandArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); demandTypeList.map(function (item) { demandArr.push( <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button> ); }); this.state.industryRadioA = theArr; this.state.demandTypeRadio = demandArr; if (window.location.search) { let theUrl = window.location.search this.state.keyword = theUrl.substring(1, theUrl.length); this.state.keyword = decodeURIComponent(this.state.keyword); }; this.loadData(); }, industryChange(e) { let theArr = []; if (e.target.value !== 999) { theArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); IndustryObject.map(function (item1) { if (item1.value == e.target.value) { item1.children.map(function (item2) { theArr.push( <Radio.Button key={item2.value} value={item2.value}>{item2.label}</Radio.Button> ); }); } }); this.state.fieldA = e.target.value; } else { this.state.fieldA = null; this.state.fieldB = null; }; this.loadData(); this.setState({ industryRadioB: theArr }); }, tableRowClick(record, index) { window.open(globalConfig.context + '/portal/detail/demandDetail.html?id=' + record.id + '&type=' + record.dataCategory); }, closeDesc(e) { this.setState({ showDesc: e }); }, render() { const { pageNo, pageSize, total } = this.state.pagination; const _me = this; return ( <div className="portal-body"> <div className="portal-content"> <Row className="search-criteria"> <Col className="search-title" span={2}> <span>行业分类</span> </Col> <Col className="search-select" span={22}> <Radio.Group defaultValue={999} onChange={this.industryChange}> {this.state.industryRadioA} </Radio.Group> </Col> </Row> {this.state.industryRadioB.length > 1 ? <Row className="search-criteria"> <Col className="search-title" span={2}> <span>行业子分类</span> </Col> <Col className="search-select" span={22}> <Radio.Group defaultValue={999} onChange={(e) => { this.state.fieldB = e.target.value; this.loadData() }}> {this.state.industryRadioB} </Radio.Group> </Col> </Row> : <div></div>} <Row className="search-criteria"> <Col className="search-title" span={2}> <span>技术类型</span> </Col> <Col className="search-select" span={16}> <Radio.Group defaultValue={999} onChange={(e) => { this.setState({ demandType: e.target.value }); this.state.demandType = e.target.value; this.loadData(); }}> {this.state.demandTypeRadio} </Radio.Group> </Col> <Col span={6}> <div className="nav-search"> <Input value={this.state.keyword} placeholder="请输入关键词" onChange={(e) => { this.setState({ keyword: e.target.value }); }} /> <Button onClick={() => { this.loadData() }}> <img src={searchImg} alt="" /> </Button> </div> </Col> </Row> <Spin spinning={this.state.loading} style={{ marginBottom: '40px' }}> <ul className='detail_interest_sub clearfix'> {this.state.dataSource.map((item) => { return <li key={item.id} onClick={() => { this.tableRowClick(item) }}> <div className="interest_list_title"> <img src={demand_sup} alt="" /> <p title={item.name}>{item.name}</p> </div> <div className="interest_list_name" style={{ paddingLeft: '20px' }}> <p>{item.employerName}</p> <div className="interest_list_confirm"> <span>{item.level ? '身份已验证' : '身份未验证'}</span> <img src={item.level ? certify : uncertify} alt="" /> </div> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_5} alt="需求" /> </span> <span className="detail_sub_title">关键词: </span> <span className="detail_sub_text">{item.keyword}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_5} alt="需求" /> </span> <span className="detail_sub_title">需求描述: </span> <span title={item.problemDes} className="detail_sub_demandDes">{item.problemDes}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_3} alt="预算" /> </span> <span className="detail_sub_title">预算: </span> <span className="money_text">{item.budgetCost ? item.budgetCost + ' 万元' : '价格面议'}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_2} alt="类型" /> </span> <span className="detail_sub_title">类型: </span> <span className="detail_sub_text">{getDemandType(item.demandType)}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_1} alt="行业" /> </span> <span className="detail_sub_title">行业: </span> <span className="detail_sub_text">{getIndustryCategory(item.industryCategoryA, item.industryCategoryB)}</span> </div> </li> })} </ul> <Pagination style={{ float: 'right' }} onChange={(e) => { this.loadData(e); }} total={total} showTotal={() => { return '共' + total + '条数据' }} current={pageNo} pageSize={pageSize} /> </Spin> </div > </div> ) } }); export default Content; // <Row className="search-criteria"> // <Col className="search-title" span={2}> // <span>预算价格</span> // </Col> // <Col className="search-select" span={14}> // <Radio.Group value={this.state.budgetCost} // onChange={(e) => { // this.setState({ // budgetCost: e.target.value // }); // this.state.budgetCost = e.target.value; // this.loadData(); // }}> // <Radio.Button value={999}>不限</Radio.Button> // <Radio.Button value={1}>1-10万元</Radio.Button> // <Radio.Button value={2}>10-50万元</Radio.Button> // <Radio.Button value={3}>50-100万元</Radio.Button> // <Radio.Button value={4}>100-500万元</Radio.Button> // <Radio.Button value={5}>500-1000万元</Radio.Button> // <Radio.Button value={6}>面议</Radio.Button> // </Radio.Group> // </Col> // <Col span={8}> // <Checkbox checked={!this.state.budgetCost} onChange={(e) => { if (e.target.checked) { this.setState({ budgetCost: null }) } }}>自定义金额</Checkbox> // <InputNumber style={{ width: 80 }} disabled={Boolean(this.state.budgetCost)} onChange={(e) => { this.state.budgetCostLower = e; }} /> // <span> 到 </span> // <InputNumber style={{ width: 80 }} disabled={Boolean(this.state.budgetCost)} onChange={(e) => { this.state.budgetCostUpper = e; }} /> // <span> 万元</span> // <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.budgetCost)} onClick={() => { this.loadData() }}>确定</Button> // </Col> // </Row>