kede-client/js/component/portal/search/achievement.jsx

import React from 'react';
import { Rate, Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Pagination, Spin } from 'antd';
import '../portal.less';

import logoImg from '../../../../image/logo.png';
import searchImg from '../../../../image/search.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 achievement_ico_1 from '../../../../image/achievement_ico_1.png';
import achievement_ico_2 from '../../../../image/achievement_ico_2.png';
import uncertify from '../../../../image/demand_ico_6.png';
import certify from '../../../../image/demand_ico_6_atv.png';
import score_ioc from '../../../../image/score_ioc.png';

import { IndustryObject, getIndustryCategory } from '../../DicIndustryList';
import { achievementCategoryList, transferModeList, maturityList } from '../../dataDic';
import { getAchievementCategory, getTransferMode, getMaturity } 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.transferPrice) {
            case 1:
                this.state.transferPriceLower = 1;
                this.state.transferPriceUpper = 10;
                break;
            case 2:
                this.state.transferPriceLower = 10;
                this.state.transferPriceUpper = 50;
                break;
            case 3:
                this.state.transferPriceLower = 50;
                this.state.transferPriceUpper = 100;
                break;
            case 4:
                this.state.transferPriceLower = 100;
                this.state.transferPriceUpper = 500;
                break;
            case 5:
                this.state.transferPriceLower = 500;
                this.state.transferPriceUpper = 1000;
                break;
            case 6:
                this.state.bargainingMode = 0;
                break;
            case 999:
                this.state.transferPriceLower = null;
                this.state.transferPriceUpper = null;
                this.state.bargainingMode = null;
                break;
        }
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/portal/search/achievementList",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                category: this.state.category == 999 ? null : this.state.category, //技术类型
                keyword: this.state.keyword,
                maturity: this.state.maturity == 999 ? null : this.state.maturity, //成熟度
                transferPriceLower: this.state.transferPriceLower, //交易金额下限
                transferPriceUpper: this.state.transferPriceUpper, //交易金额上限
                bargainingMode: this.state.bargainingMode,
                transferMode: this.state.transferMode == 999 ? null : this.state.transferMode, //交易方式
                fieldA: this.state.fieldA, //技术领域(行业类别A)
                fieldB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B)
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } 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,
                            level: thisdata.level,
                            name: thisdata.name,
                            dataCategory: thisdata.dataCategory,
                            category: thisdata.category,
                            ownerName: thisdata.ownerName,
                            releaseDate: thisdata.releaseDate,
                            ownerType: thisdata.ownerType,
                            fieldA: thisdata.fieldA,
                            fieldB: thisdata.fieldB,
                            field: [thisdata.fieldA, thisdata.fieldB],
                            transferPrice: thisdata.transferPrice,
                            maturity: thisdata.maturity,
                            transferMode: thisdata.transferMode,
                            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) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            };
            this.setState({
                loading: false
            });
            this.state.bargainingMode = 1;
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            showDesc: false,
            industryRadioB: [],
            transferPrice: 999,
            pagination: {
                pageNo: 1,
                pageSize: 12,
                total: 0
            },
            dataSource: []
        };
    },
    componentWillMount() {
        let theArr = [];
        let theCategoryArr = [], theTransferModeArr = [], theMaturityArr = [];
        //行业分类单选项
        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>
            );
        });
        //技术类型单选项目
        theCategoryArr.push(
            <Radio.Button key={999} value={999}>不限</Radio.Button>
        );
        achievementCategoryList.map(function (item) {
            theCategoryArr.push(
                <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
            );
        });
        //交易方式单选项目
        theTransferModeArr.push(
            <Radio.Button key={999} value={999}>不限</Radio.Button>
        );
        transferModeList.map(function (item) {
            theTransferModeArr.push(
                <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
            );
        });
        //成熟度单选项目
        theMaturityArr.push(
            <Radio.Button key={999} value={999}>不限</Radio.Button>
        );
        maturityList.map(function (item) {
            theMaturityArr.push(
                <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
            );
        });
        this.state.industryRadioA = theArr;
        this.state.categoryRadio = theCategoryArr;
        this.state.transferModeRadio = theTransferModeArr;
        this.state.maturityRadio = theMaturityArr;

        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/achievementDetail.html?id=' + record.id + '&type=' + record.ownerType);
    },
    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={12}>
                            <Radio.Group defaultValue={999} onChange={(e) => {
                                this.setState({
                                    transferMode: e.target.value
                                });
                                this.state.transferMode = e.target.value
                                this.loadData();
                            }}>
                                {this.state.transferModeRadio}
                            </Radio.Group>
                        </Col>
                        <Col span={10}>
                            <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" style={{ paddingLeft: '20px' }}>
                                        <p title={item.name}>{item.name}</p>
                                    </div>
                                    <div className="interest_list_name" style={{ paddingLeft: '20px' }}>
                                        <p>{item.ownerName}</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_2} alt="类型" />
                                        </span>
                                        <span className="detail_sub_title">技术类型: </span>
                                        <span className="detail_sub_text">{getAchievementCategory(item.category)}</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.fieldA, item.fieldB)}</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.transferPrice ? (item.transferPrice + '万元') : '价格面议'}</span>
                                    </div>
                                    <div className="detail_sub">
                                        <span className="detail_sub_icon">
                                            <img src={achievement_ico_1} alt="交易方式" />
                                        </span>
                                        <span className="detail_sub_title">交易方式: </span>
                                        <span className="money_text">{getTransferMode(item.transferMode)}</span>
                                    </div>
                                    <div className="detail_sub">
                                        <span className="detail_sub_icon">
                                            <img src={achievement_ico_2} alt="成熟度" />
                                        </span>
                                        <span className="detail_sub_title">技术成熟度: </span>
                                        <span className="detail_sub_score" >
                                            <span style={{ width: (item.maturity ? Number(item.maturity) * 20 : 0) + '%' }}>
                                                <img src={score_ioc} alt={getMaturity(item.maturity)} />
                                            </span>
                                        </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={13}>
//                             <Radio.Group value={this.state.transferPrice}
//                                 onChange={(e) => {
//                                     this.setState({
//                                         transferPrice: e.target.value
//                                     });
//                                     this.state.transferPrice = 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={9}>
//                             <Checkbox checked={!this.state.transferPrice} onChange={(e) => { if (e.target.checked) { this.setState({ transferPrice: null }) } }}>自定义金额</Checkbox>
//                             <InputNumber style={{ width: 80 }}
//                                 disabled={Boolean(this.state.transferPrice)}
//                                 onChange={(e) => { this.state.transferPriceLower = e; }} />
//                             <span> 到 </span>
//                             <InputNumber style={{ width: 80 }}
//                                 disabled={Boolean(this.state.transferPrice)}
//                                 onChange={(e) => { this.state.transferPriceUpper = e; }} />
//                             <span> 万元</span>
//                             <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.transferPrice)} 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({
//                                     category: e.target.value
//                                 });
//                                 this.state.category = e.target.value;
//                                 this.loadData();
//                             }}>
//                                 {this.state.categoryRadio}
//                             </Radio.Group>
//                         </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({
//                                     transferMode: e.target.value
//                                 });
//                                 this.state.transferMode = e.target.value
//                                 this.loadData();
//                             }}>
//                                 {this.state.transferModeRadio}
//                             </Radio.Group>
//                         </Col>
//                     </Row>
//                     <Row className="search-criteria">
//                         <Col className="search-title" span={2}>
//                             <span>成熟度</span>
//                         </Col>
//                         <Col className="search-select" span={12}>
//                             <Radio.Group defaultValue={999} onChange={(e) => {
//                                 this.setState({
//                                     maturity: e.target.value
//                                 });
//                                 this.state.maturity = e.target.value
//                                 this.loadData();
//                             }}>
//                                 {this.state.maturityRadio}
//                             </Radio.Group>
//                         </Col>
//                         <Col span={10}>
//                             <div className="nav-search">
//                                 <Input onChange={(e) => { this.state.keyword = e.target.value; }} />
//                                 <Button onClick={() => { this.loadData() }}>
//                                     <img src={searchImg} alt="" />
//                                 </Button>
//                             </div>
//                         </Col>
//                     </Row>