import {Component} from 'react'; import {Button,Modal,message,Table,Spin,Input, Row,Col,Card,Form} from 'antd'; import './selectContent.less'; import {getMsgType} from '@/tools'; class SelectContent extends Component { constructor(props) { super(props); this.state = { loading:false, RowData:[], recD:[], selectedRowKeys: [], selectedRows: [], loading: false, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, 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> } } ], dataSource: [], } } loadData(pageNo) { this.state.data = []; this.setState({ selectedRowKeys:[], page:pageNo, loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/portal/globalSearch", data: { 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, keyword: thisdata.keyword, summary:thisdata.summary, title:thisdata.title, fromTable:thisdata.fromTable }); }; }; 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; 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="选择推送内容" 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.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;