kede-client/js/component/account/index/collection.jsx

import React from 'react';
import { Spin, Button, Tabs, Table } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import DemandDesc from '../../portal/search/demandDesc';
import AchievementDesc from '../../portal/search/achievementDesc';
import { getProvince } from '../../NewDicProvinceList';

import avatarImg from '../../../../image/avatarImg.png';

import './content.less';

const TabPane = Tabs.TabPane;

const Content = React.createClass({
    achievementLoadData(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/portal/achievementInterestList",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.achievementPagination.pageSize
            },
            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,
                            interestId: thisdata.id,
                            id: thisdata.achievementId,
                            createTime: thisdata.createTime,
                            name: thisdata.name,
                            serialNumber: thisdata.serialNumber,
                            keyword: thisdata.keyword,
                            deletedSign: thisdata.deletedSign,
                            auditStatus: thisdata.auditStatus,
                            createTimeFormattedDate: thisdata.createTimeFormattedDate
                        });
                    };
                }
                this.state.achievementPagination.current = data.data.pageNo;
                this.state.achievementPagination.total = data.data.totalCount;
                this.setState({
                    achievementDataSource: theArr,
                    achievementPagination: this.state.achievementPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    demandLoadData(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/portal/demandInterestList",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.demandPagination.pageSize
            },
            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,
                            interestId: thisdata.id,
                            id: thisdata.demandId,
                            createTime: thisdata.createTime,
                            keyword: thisdata.keyword,
                            name: thisdata.name,
                            status: thisdata.status,
                            serialNumber: thisdata.serialNumber,
                            deletedSign: thisdata.deletedSign,
                            auditStatus: thisdata.auditStatus,
                            createTimeFormattedDate: thisdata.createTimeFormattedDate
                        });
                    };
                }
                this.state.demandPagination.current = data.data.pageNo;
                this.state.demandPagination.total = data.data.totalCount;
                this.setState({
                    demandDataSource: theArr,
                    demandPagination: this.state.demandPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    subscriberLoadData(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/interest/interestUserList",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.subscriberPagination.pageSize
            },
            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,
                            interestId: thisdata.interestId,  //关注ID  /api/user/interest/interestUser接口 interestId
                            uid: thisdata.uid,  //被关注人ID
                            username: thisdata.username,  //个人用户名称
                            unitName: thisdata.unitName, //组织用户名称
                            name: thisdata.type == 0 ? thisdata.username : thisdata.unitName,
                            userProvince: thisdata.userProvince, //个人用户省份
                            orgProvince: thisdata.orgProvince, 		//组织用户省份
                            province: thisdata.type == 0 ? thisdata.userProvince : thisdata.orgProvince,
                            createTime: thisdata.createTime,
                            type: thisdata.type, 	//被关注人类型 (0--个人用户,1--组织用户)
                            demandNum: thisdata.demandNum, 	//科技需求数量
                            achievementNum: thisdata.achievementNum, 	//科技成果数量
                            personPortraitUrl: thisdata.personPortraitUrl,// 个人用户头像URL
                            logoUrl: thisdata.logoUrl, //公司LOGO URL
                            avaterUrl: thisdata.type == 0 ? thisdata.personPortraitUrl : thisdata.logoUrl,
                            createTimeFormattedDate: thisdata.createTimeFormattedDate, //关注时间
                        });
                    };
                }
                this.state.subscriberPagination.current = data.data.pageNo;
                this.state.subscriberPagination.total = data.data.totalCount;
                this.setState({
                    subscriberDataSource: theArr,
                    subscriberPagination: this.state.subscriberPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            achievementShowDesc: false,
            achievementPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.achievementLoadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            achievementColumns: [
                {
                    title: '编号',
                    dataIndex: 'serialNumber',
                    key: 'serialNumber',
                }, {
                    title: '成果名称',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '关键字',
                    dataIndex: 'keyword',
                    key: 'keyword',
                }, {
                    title: '状态',
                    dataIndex: 'auditStatus',
                    key: 'auditStatus',
                    render: (text, record) => {
                        if (record.deletedSign == 1) {
                            return "已删除"
                        } else if (record.auditStatus != 3) {
                            return "已下架"
                        } else {
                            return "正常"
                        }
                    }
                }, {
                    title: '关注时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate',
                }
            ],
            achievementDataSource: [],
            demandShowDesc: false,
            demandPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.demandLoadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            demandColumns: [
                {
                    title: '编号',
                    dataIndex: 'serialNumber',
                    key: 'serialNumber',
                }, {
                    title: '需求名称',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '关键字',
                    dataIndex: 'keyword',
                    key: 'keyword',
                }, {
                    title: '状态',
                    dataIndex: 'auditStatus',
                    key: 'auditStatus',
                    render: (text, record) => {
                        if (record.deletedSign == 1) {
                            return "已删除"
                        } else if (record.auditStatus != 3) {
                            return "已下架"
                        } else if (record.status == 0) {
                            return "未解决"
                        } else if (record.status == 1) {
                            return "已解决"
                        }
                    }
                }, {
                    title: '关注时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate',
                }
            ],
            demandDataSource: [],
            subscriberShowDesc: false,
            subscriberPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.subscriberLoadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            subscriberColumns: [
                {
                    title: null,
                    dataIndex: 'avaterUrl',
                    key: 'avaterUrl',
                    width: 120,
                    render: text => {
                        return <div className="avatar-box">
                            <img src={text ? (globalConfig.avatarHost + '/upload' + text) : avatarImg} alt="" />
                        </div>
                    }
                }, {
                    title: '名称',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '地区',
                    dataIndex: 'province',
                    key: 'province',
                    render: (text) => { return getProvince(text); }
                }, {
                    title: '类型',
                    dataIndex: 'type',
                    key: 'type',
                    render: (text) => {
                        if (text == 0) {
                            return "个人用户"
                        } else if (text == 1) {
                            return "组织用户"
                        }
                    }
                }, {
                    title: '科技成果数量',
                    dataIndex: 'achievementNum',
                    key: 'achievementNum',
                }, {
                    title: '科技需求数量',
                    dataIndex: 'demandNum',
                    key: 'demandNum',
                }, {
                    title: '关注时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate',
                }
            ],
            subscriberDataSource: [],
        };
    },
    componentWillMount() {
        this.achievementLoadData();
    },
    tabChange(key) {
        if (key == 1) {
            this.achievementLoadData();
        } else if (key == 2) {
            this.demandLoadData();
        } else if (key == 3) {
            this.subscriberLoadData();
        }
    },
    demandRowClick(record, index) {
        this.state.demandRowData = record;
        if (record.deletedSign !== 1 && record.auditStatus == 3) {
            this.setState({
                demandShowDesc: true
            });
        };
    },
    achievementRowClick(record, index) {
        this.state.achievementRowData = record;
        if (record.deletedSign !== 1 && record.auditStatus == 3) {
            this.setState({
                achievementShowDesc: true
            });
        };
    },
    subscriberRowClick(record, index) {
        window.open(globalConfig.context + '/user/subscriberDetail.html?rid=' + record.uid + '&type=' + record.type);
    },
    demandCloseDesc(e) {
        this.setState({
            demandShowDesc: e
        });
        this.demandLoadData();
    },
    achievementCloseDesc(e) {
        this.setState({
            achievementShowDesc: e
        });
        this.achievementLoadData();
    },
    render() {
        return (
            <div className="collection">
                <Spin spinning={this.state.loading} >
                    <Tabs defaultActiveKey="1" onChange={this.tabChange}>
                        <TabPane tab="我感兴趣的成果" key="1">
                            <Table columns={this.state.achievementColumns}
                                dataSource={this.state.achievementDataSource}
                                pagination={this.state.achievementPagination}
                                style={{
                                   cursor: 'pointer',
                                }}
                                onRowClick={this.achievementRowClick} />
                        </TabPane>
                        <TabPane tab="我感兴趣的需求" key="2">
                            <Table columns={this.state.demandColumns}
                                dataSource={this.state.demandDataSource}
                                pagination={this.state.demandPagination}
                                style={{
                                   cursor: 'pointer',
                                }}
                                onRowClick={this.demandRowClick} />
                        </TabPane>
                        <TabPane tab="我感兴趣的用户" key="3">
                            <Table columns={this.state.subscriberColumns}
                                dataSource={this.state.subscriberDataSource}
                                pagination={this.state.subscriberPagination}
                                style={{
                                   cursor: 'pointer',
                                }}
                                onRowClick={this.subscriberRowClick} />
                        </TabPane>
                    </Tabs>
                </Spin>
                <DemandDesc data={this.state.demandRowData}
                    showDesc={this.state.demandShowDesc}
                    closeDesc={this.demandCloseDesc} />
                <AchievementDesc data={this.state.achievementRowData}
                    showDesc={this.state.achievementShowDesc}
                    closeDesc={this.achievementCloseDesc} />
            </div>
        )
    }
});

export default Content;