msgDetail.js 4.81 KB
import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import {Table,Button,Row,Col,Message} from 'antd';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG } from '@src/Api';


export default class MsgDetail extends Component {
	state = {
		messageType: '', // 消息类型
		messageTitle: '', // 标题
        pushTime: '', // 执行时间
		displayBeginTime: '', //展示开始时间
		displayEndTime: '', // 展示结束时间
		receiverType: '', //接收者类型
		receiverAccount: '', // 接收者
		messageContent: '', // 消息内容
        showHtmlTemp: {dispaly: 'none'},  // 解析成html
        showComTemp: {display: 'none'}, // 普通解析
	}
	componentDidMount () {
		let id = this.props.match.params.msgId;
		this.getMsgDetail(id);
	}
	getMsgDetail = (id) => {
		axios.ajax({
			url: API_SYS_MSG.getSysMsgById,
			data: {id}
		}).then((res) => {
			let {messageType,messageTitle,pushTime,displayBeginTime,displayEndTime,receiverType,receiverNumber,receiverAccount,messageContent} = res;
			if (messageType == 1) {
                this.setState({
                    showHtmlTemp: {display: 'block'},
                    showComTemp: {display: 'none'}
                });
            } else {
                this.setState({
                    showHtmlTemp: {display: 'none'},
                    showComTemp: {display: 'block'}
                });
            }
            this.setState({
				messageType,
				messageTitle,
                pushTime,
				displayBeginTime,
				displayEndTime,
				receiverType,
				receiverNumber,
                receiverAccount,
				messageContent
			});
		});
	}
	goBack = () => {
		this.props.history.push({
			pathname: '/home/msgpush/msgPushControl'
		});
	}
	render () {
        let messageContent = this.state.messageContent;
		return (
			<div className="com-msgDetail">
				<div className="nav">
                    <a href="#/home/msgpush/msgPushControl">消息推送</a> > <span>消息详情</span>
                </div>
                <WhiteBar title="基本信息" />
                <div className="detail-wrapper">
                	<Row>
                		<Col span={6}>
                			<span className="msgName">消息类型</span>
                			<span className="msgVal">{{'1':'pc','2':'app','3': '短信','4': '邮件','5':'微信'}[this.state.messageType]}</span>
                		</Col>
                		<Col span={6}>
                			<span className="msgName">标题</span>
                			<span className="msgVal">{this.state.messageTitle}</span>
                		</Col>
                		<Col span={6}>
                			<span className="msgName">执行时间</span>
                			<span className="msgVal">{Utils.formateDateToYMDSFM(this.state.pushTime)}</span>
                		</Col>
                	</Row>
                	<Row>
                		<Col span={12}>
                			<span className="msgName">展示时间</span>
                            <span className="msgVal">
                                {this.state.displayBeginTime ? Utils.formateDateToYMDSFM(this.state.displayBeginTime) + '至' + Utils.formateDateToYMDSFM(this.state.displayEndTime) : '暂无设置'}
                            </span>
                		</Col>
                		<Col span={6}>
                			<span className="msgName">消息模板</span>
                			<span className="msgVal">保单短信提醒</span>
                		</Col>
                	</Row>
                	<Row>
                		<Col span={6}>
                			<span className="msgName">接收者类型</span>
                			<span className="msgVal">{{'1':'所有人','2':'机构','3':'个人'}[this.state.receiverType]}</span>
                		</Col>
                		<Col span={6}>
                			<span className="msgName">接收者</span>
                			<span className="msgVal">{this.state.receiverAccount}</span>
                		</Col>
                	</Row>
                	<Row>
                		<Col span={2}>
                			<span className="msgName">消息内容</span>
                		</Col>
                        <Col span={15}>
                            <div style={this.state.showHtmlTemp} className="msgVal" dangerouslySetInnerHTML={{ __html: messageContent}}>
                            
                            </div>
                            <div style={this.state.showComTemp} className="msgVal">
                                {messageContent}
                            </div>
                        </Col>
                	</Row>
                	<Row>
                		<Col span={18} style={{textAlign: 'center'}}>
                			<Button onClick={this.goBack}>返回</Button>
                		</Col>
                	</Row>
                </div>
			</div>
		);
	}
}