appMsgDetail.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import SelecteReciver from './selecteReciver';
import SelecteOrg from './selecteOrg';
import {Table,Input,Form,Button,Row,Col,Select,DatePicker,Message,Icon} from 'antd';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG } from '@src/Api';

export default class AppMsgDetail extends Component {
	state = {
		dataList: [], // 消息列表
		isLoading: true, // 加载状态
		pagination: {}, // 分页配置
		searchData: {}, // 搜索条件
		messageId: '',  // 消息id
		expandStatus: false
	}
	// 查询页数和数量配置
	params = {
	    pageNum: 1,
	    pageSize: 10
	}
	componentDidMount () {
		let messageId = this.props.match.params.messageId;
		this.setState({messageId}, () => {
			this.getMsgList();
		});
	}
	// 条件搜索
	search = (searchData) => {
		this.params.pageNum = 1;
		this.setState({searchData,isLoading: true}, () => {
			this.getMsgList();
		});
	}
	// 重置
	reset = () => {
		this.params.pageNum = 1;
		this.setState({
			isLoading: true,
			searchData: {}
		}, () => {
			this.getMsgList();
		});
	}
	// 列表搜索
	getMsgList = () => {
		let _this = this;
		let messageId = this.state.messageId;
		axios.ajax({
			url: API_SYS_MSG.getSysAppMsgDetailList,
			data: {
				messageId,
				...this.params,
				...this.state.searchData
			}
		}).then((res) => {
			let dataList = res.records.map((item,index) => {
				return {key:index,...item}
			});

			this.setState({
				isLoading: false,
				dataList,
				pagination: Utils.pagination(res, (current) => {
		            _this.params.pageNum = current;
		            this.getMsgList();
		        })
			});
		});
	}
	// 展开条件
  	expandMenu = ()=> {
	    this.setState({
	     	expandStatus: !this.state.expandStatus,
	    })
	}
	goBack = () => {
		this.props.history.push({
			pathname: '/home/msgpush/appMsgHistory'
		});
	}
	render () {
		const columns = [
			{title: '发送时间', dataIndex: 'pushTime'},
			{title: '接收人', dataIndex: 'receiverAccount'},
			{title: '推送状态', dataIndex: 'pushStatus'}
		];
		return (
			<div className="com-appMsgDetail">
                <div className="searchWrap">
					<WhiteBar title="APP历史消息 > 详情" />
					<div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
						{ 
							this.state.expandStatus ? 
							<SearchForm search={this.search} reset={this.reset}></SearchForm>
							: ''
						} 
				</div>
				<div style={{marginTop:15,paddingLeft:20}}><Button onClick={this.goBack}>返回</Button></div>
                <WhiteBar title="详细数据" />
                <div className="detail-wrapper" style={{background: '#fff', width: '60%',marginLeft: 20}}>
                	<Table 
                		loading={this.state.isLoading}
                		pagination = {this.state.pagination}
                		dataSource={this.state.dataList} 
                		columns={columns}>
            		</Table>
                </div>
			</div>
		);
	}
}

/* 查询表单组件 */
const SearchForm = Form.create()(
	class extends Component {
		state = {
			modalVisible: false, // 机构查询弹框
			selecteReciverShow: {display: 'none'}, //接收人选择展示
			recOrgShow: {display: 'none'},  // 接收人机构展示
			recPeopleShow: {display: 'none'}, // 接收人展示
			canInputPeople: true,
			receiverNumber: '', // 接收人或机构字符串
		}
		componentDidMount () {}
		onRefReciver = () => {}
		onRef = () => {}
		// 条件搜索
		search = () => {
			let searchData = this.props.form.getFieldsValue();
			searchData.receiverNumber = this.state.receiverNumber;
			this.props.search(searchData);
		}
		// 重置
		reset = () => {
			this.props.form.resetFields();
			this.setState({
				recOrgShow: {display: 'none'},
				recPeopleShow: {display: 'none'},
				receiverNumber: ''
			});
			this.props.reset();
		}
		// 更换接收者类型
		onChangeRecType = (e) => {
			let receiverType = e;
			if (receiverType == 1) {
				// 所有人
				this.setState({
					recOrgShow: {display: 'none'},
					recPeopleShow: {display: 'block'},
					canInputPeople: true
				});
				this.props.form.setFieldsValue({receiverAccount: '所有人'});
				this.setState({
					receiverNumber: '所有人'
				});
			} else if (receiverType == 2) {
				// 机构
				this.setState({
					recOrgShow: {display: 'block'},
					recPeopleShow: {display: 'none'}
				});
				this.props.form.setFieldsValue({receiverAccount: ''});
			} else if (receiverType == 3) {
				// 个人
				this.setState({
					recOrgShow: {display: 'none'},
					recPeopleShow: {display: 'block'},
					canInputPeople: false
				});
				this.props.form.setFieldsValue({receiverAccount: ''});
			}
		}
		// 展示选择接收机构
		showModal = () => {
			this.setState({modalVisible: true});
		}
		// 机构选择确认
		handleOrgOk = (items) => {
			this.setState({modalVisible: false});
			let orgString = '';
			let receiverNumber = '';
			items.forEach((item,index) => {
				if (index !== items.length-1) {
					orgString += `${item.title},`;
					receiverNumber += `${item.key},`;
				} else {
					orgString += `${item.title}`;
					receiverNumber += `${item.key}`;
				}
			});
			this.setState({
				receiverNumber
			});
			this.props.form.setFieldsValue({
				receiverAccount: orgString
			});
		}
		// 取消机构选择弹框
		handleCancel = () => {
			this.setState({modalVisible: false});
		}
		// 展示选择接收人组件
		selectReciver = () => {
			this.setState({selecteReciverShow: {display: 'block'}});
		}
		// 关闭选择接收人组件
		closeSelectReciver = () => {
			this.setState({selecteReciverShow: {display: 'none'}});
		}
		// 设置选择的接收人
		setReciver = (revicers) => {
			let receiverAccount = []; // 前端展示姓名
			let receiverNumber = [];   // 提交的id
			revicers.forEach((item,index) => {
				// receiverNumber.push(item.split('&&')[0]);
				// receiverAccount.push(item.split('&&')[1]);
				if (index !== revicers.length-1) {
					receiverNumber += `${item.split('&&')[0]},`;
					receiverAccount += `${item.split('&&')[1]},`;
				} else {
					receiverNumber += `${item.split('&&')[0]},`;
					receiverAccount += `${item.split('&&')[1]}`;
				}
			});
			this.setState({receiverNumber});
			this.props.form.setFieldsValue({
				receiverAccount
			});
		}
		render () {
			const FormItem = Form.Item;
			const Option = Select.Option;
			const {getFieldDecorator}  = this.props.form;
			return (
				<div className="com-searchForm">
					<Form layout="vertical">
						<Row gutter={16}>
							<Col span={4}>
								<FormItem label="接收者类型">
									{
										getFieldDecorator('receiverType',{
											rules: []
										})(
											<Select onChange={this.onChangeRecType} placeholder="接收者类型">
                                                <Option value={1}>所有人</Option>
                                                <Option value={2}>机构</Option>
                                                <Option value={3}>个人</Option>
                                            </Select>
										)
									}
								</FormItem>
							</Col>
							<Col span={4} style={this.state.recOrgShow}>
								<FormItem label="接收者">
									{
										getFieldDecorator('receiverAccount',{
											rules: []
										})(
											<Input onClick={this.showModal} suffix={<Icon type="search" style={{ color: '#aaa' }} />} placeholder="接收机构" />
										)
									}
								</FormItem>
							</Col>
							<Col span={4} style={this.state.recPeopleShow}>
								<FormItem style={{marginTop: 28}}>
									{
										getFieldDecorator('receiverAccount',{
											rules: []
										})(
											<Input disabled={this.state.canInputPeople} onClick={this.selectReciver} suffix={<Icon type="search" style={{ color: '#aaa' }} />}  placeholder="接收人" />
										)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem style={{marginTop: 29}}>
									<Button onClick={this.search} style={{background: '#00BB29',color:'#fff'}}>查询</Button>
									<Button onClick={this.reset} style={{marginLeft: 15,background:'#ED1719',color:'#fff'}}>重置</Button>
								</FormItem>
							</Col>
						</Row>
					</Form>
					{/* 机构列表弹框 */}
					<SelecteOrg 
						onRef={this.onRef}
						modalVisible={this.state.modalVisible}
						handleOk={this.handleOrgOk}
						handleCancel={this.handleCancel}
					/>
					{/* 接收人选择 */}
					<div className="reciver-com-wrapper" style={this.state.selecteReciverShow}>
						<SelecteReciver 
							onRefReciver={this.onRefReciver}
							setReciver={this.setReciver}
							closeSelectReciver={this.closeSelectReciver} 
						/>
					</div>
				</div>
			);
		}
	}
);