jitao-client/js/component/administration/messagePush/messageOut/selectContent.jsx

import {Component} from 'react';
import {Button,Modal,message,Table,Spin,Input, Row,Col,Card,Form} from 'antd';
import './selectContent.less';
import {getMsgType,getGameState} from '@/tools';

class SelectContent extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            loading:false,
            RowData:[],
            recD:[],
            selectedRowKeys: [],
            selectedRows: [],
            loading: false,
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 5,
                showQuickJumper: true,
                pageSize: 5,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                 {
                    title: '名称',
                    dataIndex: 'title',
                    key: 'title',
                    render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
                },
                {
                    title: '简介',
                    dataIndex: 'summary',
                    key: 'summary',
                    render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
                },
                {
                    title: '类型',
                    dataIndex: 'fromTable',
                    key: 'fromTable',
                    render:(text)=>{
                        return getMsgType(text)
                    }
                },
                {
                    title: '关键字',
                    dataIndex: 'keyword',
                    key: 'keyword',
                    render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
                },
                {
                    title: '操作',
                    dataIndex: 'caozuo',
                    key: 'caozuo',
                    render:(text,recard) => {
                        return  <div className="btnRight">
                                    <Button type="primary" style={{ background: "#3fcf9e", border: "none", color: "#fff" }} onClick={(e)=>{e.stopPropagation();this.subVal(recard)}}>选择</Button>
                                </div>
                    }
                }
            ],
            objColumns: [
                {
                   title: '名称',
                   dataIndex: 'name',
                   key: 'name',
                   render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
               },
               {
                   title: '简介',
                   dataIndex: 'summary',
                   key: 'summary',
                   render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
               },
               {
                title: '市场价(万元)',
                dataIndex: 'price',
                key: 'price'
                },
                {
                    title: '最低折扣',
                    dataIndex: 'offset',
                    key: 'offset'
                },
                {
                    title: '会员价(万元)',
                    dataIndex: 'memberPrice',
                    key: 'memberPrice'
                },
                {
                    title: '活动价(万元)',
                    dataIndex: 'activityPrice',
                    key: 'activityPrice'
                },
                {
                    title: '活动生效标识',
                    dataIndex: 'activityFlag',
                    key: 'activityFlag',
                    render: (text) => {
                        return getGameState(text);
                    }
                },
               {
                   title: '操作',
                   dataIndex: 'caozuo',
                   key: 'caozuo',
                   render:(text,recard) => {
                       return  <div className="btnRight">
                                   <Button type="primary" style={{ background: "#3fcf9e", border: "none", color: "#fff" }} onClick={(e)=>{e.stopPropagation();this.subVal(recard)}}>选择</Button>
                               </div>
                   }
               }
           ],
            dataSource: [],
         }
    }
    loadData(pageNo) {
        this.state.data = [];
        this.setState({
            selectedRowKeys:[],
            page:pageNo,
            loading: true
        });
       
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context +  this.props.data&&this.props.data.url?this.props.data.url:"/portal/globalSearch",
            data: this.props.data&&this.props.data.url?
                {
                    pageNo: pageNo || 1,
                    pageSize: 5,
                    privateProject:this.props.data.privateProject,
                    auditStatus:this.props.data.auditStatus,
                    name:this.state.searchVal
                }
                :{
                    pageNo: pageNo || 1,
                    pageSize: 5,
                    name:this.state.searchVal
            },
            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,
                            rowId: thisdata.rowId,
                            id:thisdata.id,
                            keyword: thisdata.keyword,
                            summary:thisdata.summary,
                            title:thisdata.title,
                            fromTable:thisdata.fromTable,
                            name:thisdata.name,
                            price:thisdata.price,
                            offset:thisdata.offset,
                            memberPrice:thisdata.memberPrice,
                            activityPrice:thisdata.activityPrice,
                            activityFlag:thisdata.activityFlag
                        });
                    };
                };
                this.state.pagination.current = data.data.pageNo;
                this.state.pagination.total = data.data.totalCount;
                if(data.data&&data.data.list&&!data.data.list.length){
					this.state.pagination.current=0;
					this.state.pagination.total=0;
				};
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }
    //点推送时
    subVal(recard){
        this.props.visFun(true,recard)
    }
    handOk(){
        this.setState({
            visible:false
        })
        this.props.visFun(false);
    }
    handleCancel(){
        this.setState({
            visible:false
        })
        this.props.visFun(false);
    }
    componentWillReceiveProps(nextProps){
        this.state.visible = nextProps.visible;
    }
    tableRowClick(record, index) {
        this.state.RowData = record;
        if(this.props.data&&this.props.data.url){
            this.setState({
                DetailVis: false
            });
        }else{
            this.setState({
                DetailVis: true
            });
        }
    }
    searchFun(){
        this.loadData()
    }
    okDetail(){
        this.setState({
            DetailVis: false
        });
    }
    
    render() { 
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
        };
        const FormItem = Form.Item
        let RowData=this.state.RowData||[];
        return ( <div>
               <Modal
                visible={this.state.visible}
                onOk={this.handOk.bind(this)}
                onCancel={this.handleCancel.bind(this)}
                width="800px"
                title={this.props.data&&this.props.data.url?'我的项目':"选择推送内容"}
                footer=""
               >
                <div className="sendBody">
                    <div className="megSearch">
                       <Input type="text" 
                        size="large" 
                        value={this.state.searchVal} 
                        onChange={(e)=>{this.setState({searchVal:e.target.value})}}/>
                        <Button type="primary" size="large" onClick={this.searchFun.bind(this)}>搜索</Button>
                    </div>
                    <Spin spinning={this.state.loading}>
                        <Table columns={this.props.data&&this.props.data.url?this.state.objColumns:this.state.columns}
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                            onRowClick={this.tableRowClick.bind(this)} />
                    </Spin>
                </div>
               </Modal>
               <Modal
                    visible={this.state.DetailVis}
                    title="详情"
                    onOk={this.okDetail.bind(this)}
                    onCancel={this.okDetail.bind(this)}
                    footer=''
                    width="600px"
                >
                    <div className="detailList">
                        <div className="clearfix">
                            <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="名称">
                                <span>{RowData.title}</span>
                            </FormItem>	
                        </div>
                        <div className="clearfix">
                            <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="简介">
                                <p>{RowData.summary}</p>  
                            </FormItem>	
                        </div>
                        <div className="clearfix">
                            <FormItem className="half-item" {...formItemLayout} label="类型">
                                <p>{getMsgType(RowData.fromTable)}</p>  
                            </FormItem>	
                            <FormItem className="half-item" {...formItemLayout} label="关键字">
                                <p>{RowData.keyword}</p>  
                            </FormItem>	
                        </div>
                    </div>
                </Modal>
            </div> );
    }
}
 
export default SelectContent;