| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 | 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;        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-nav clearfix">                    <div className="nav-logoBox">                        <img src={logoImg} alt="" />                    </div>                    <ul className="nav-list clearfix">                        <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>                        <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>                        <li className={this.props.searchType == 'subscriber' ? 'active' : ''}><a href={"/portal/search/subscriber.html"}>伙伴/行家</a></li>                    </ul>                    <div className="nav-search">                        <Input onChange={(e) => { this.state.keyword = e.target.value; }} />                        <Button onClick={() => { this.loadData() }}>                            <img src={searchImg} alt="" />                        </Button>                    </div>                </div>                <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={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>                    <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.setState({                                    demandType: e.target.value                                });                                this.state.demandType = e.target.value;                                this.loadData();                            }}>                                {this.state.demandTypeRadio}                            </Radio.Group>                        </Col>                    </Row>                    <Spin spinning={this.state.loading} style={{ marginBottom: '40px' }}>                        <ul className='detail_interest_sub'>                            {this.state.dataSource.map((item) => {                                return <li key={item.id} onClick={() => { this.tableRowClick(item) }}>                                    <div className="interest_list_title">                                        <img src={demand_sup} alt="" />                                        <span>{item.name}</span>                                    </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="detial_sub">                                        <span className="detial_sub_icon">                                            <img src={demand_ico_5} alt="需求" />                                        </span>                                        <span className="detial_sub_title">需求: </span>                                        <span className="detial_sub_text">{item.problemDes}</span>                                    </div>                                    <div className="detial_sub">                                        <span className="detial_sub_icon">                                            <img src={demand_ico_3} alt="预算" />                                        </span>                                        <span className="detial_sub_title">预算: </span>                                        <span className="money_text">{item.budgetCost ? item.budgetCost + ' 万元' : '价格面议'}</span>                                    </div>                                    <div className="detial_sub">                                        <span className="detial_sub_icon">                                            <img src={demand_ico_2} alt="类型" />                                        </span>                                        <span className="detial_sub_title">类型: </span>                                        <span className="detial_sub_text">{getDemandType(item.demandType)}</span>                                    </div>                                    <div className="detial_sub">                                        <span className="detial_sub_icon">                                            <img src={demand_ico_1} alt="行业" />                                        </span>                                        <span className="detial_sub_title">行业: </span>                                        <span className="detial_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;
 |