/**
|
* 徐祥健<xuxj@hugeinfo.com.cn>
|
* 2018年7月22日 14:52
|
*
|
*/
|
|
|
import React from 'react';
|
|
import { Input, Button, message } from 'antd';
|
import moment from 'moment';
|
const { TextArea } = Input;
|
import Fetch from '../../fetch';
|
import './style.scss';
|
var client, destination;
|
|
export default class MsgReplyView extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
contacts: [],
|
user: {},
|
value: '',
|
senderType: 2
|
};
|
}
|
//接收消息时执行
|
onMessageArrived = message => {
|
var msg = message;
|
console.log(msg.payloadString);
|
this.setState({
|
contacts: this.state.contacts.concat(JSON.parse(msg.payloadString))
|
}, this.scrollTop);
|
}
|
//连接成功时执行
|
onConnect = (frame) => {
|
console.log("连接服务成功...");
|
client.subscribe(destination);
|
}
|
|
//连接失败时执行
|
onFailure = (failure) => {
|
console.log("连接服务失败...");
|
console.log(failure.errorMessage);
|
}
|
|
//连接断开时执行
|
onConnectionLost = (responseObject) => {
|
if (responseObject.errorCode !== 0) {
|
console.log(client.clientId + ": " + responseObject.errorCode + "\n");
|
}
|
}
|
|
scrollTop = () => {
|
if (this.contentDiv) {
|
this.contentDiv.scrollTop = 99999999;
|
}
|
}
|
componentDidMount() {
|
const { senderId, msgType } = this.props;
|
var type;
|
if( msgType == 'online') {
|
type = 1;
|
}else if( msgType == 'onlineCompany') {
|
type = 2;
|
}
|
Fetch.getMsgBySenderId(senderId, type)
|
.then(data => {
|
this.setState({
|
contacts: data.contacts,
|
user: data.user
|
}, this.scrollTop);
|
});
|
|
//连接基础信息
|
var host = 'xnwj.gznsjc.gov.cn';
|
var port = '61614';
|
var clientId = 'clientId-' + (Math.floor(Math.random() * 100000));
|
var user = 'admin';
|
var password = 'password';
|
|
destination = senderId;//订阅主题的名称
|
|
client = new Paho.MQTT.Client(host, Number(port), clientId);//初始化消息客户端
|
|
client.onConnect = this.onConnect;
|
|
client.onMessageArrived = this.onMessageArrived;
|
client.onConnectionLost = this.onConnectionLost;
|
|
client.connect({
|
userName: user,
|
password: password,
|
onSuccess: this.onConnect,
|
onFailure: this.onFailure
|
});
|
|
//关闭或者刷新当前页面时关闭连接
|
window.onbeforeunload = function () {
|
client.disconnect();
|
};
|
|
|
}
|
onChange = (e) => {
|
this.setState({
|
value: e.target.value
|
})
|
}
|
|
sendMsg = () => {
|
const { senderId } = this.props;
|
const { value, senderType } = this.state;
|
if(!value){
|
message.error('消息不能为空', 2)
|
return;
|
}
|
Fetch.sendMsg({ value, senderId, senderType }).then(res => {
|
if (res.code === 0) {
|
this.setState({
|
value: ''
|
}, this.scrollTop);
|
} else {
|
message.error('发送太过频繁，请稍后再试！', 2)
|
}
|
})
|
}
|
sexOfCode(code) {
|
switch (code) {
|
case '0':
|
return '未知';
|
case '1':
|
return '男';
|
case '2':
|
return '女';
|
}
|
}
|
render() {
|
const { contacts, user, value } = this.state;
|
const { msgType } = this.props;
|
return (
|
<div className="msg-reply-view-main">
|
<div className='msg-reply-view-list'>
|
<div className='msg-reply-view-content' ref={div => this.contentDiv = div}>
|
{contacts.map((contacts, key) => (
|
contacts.senderType === 1 ?
|
<React.Fragment key={key}>
|
<div className='msg-reply-view-time'>{moment(contacts.createTime).format('YYYY/MM/DD HH:mm:ss')}</div>
|
<div style={{ overflow: 'hidden' }}>
|
{
|
contacts.type == 'text' ? <div className='msg-reply-view-user'>{contacts.content}</div>
|
: <a href={contacts.content} target='_black'> <img src={contacts.content} width='70' height='70' /></a>
|
}
|
</div>
|
</React.Fragment>
|
:
|
<React.Fragment key={key}>
|
<div className='msg-reply-view-time'>{moment(contacts.createTime).format('YYYY/MM/DD HH:mm:ss')}</div>
|
<div style={{ overflow: 'hidden' }}>
|
<div className='msg-reply-view-admin'>{contacts.content}</div>
|
</div>
|
</React.Fragment>
|
))
|
}
|
</div>
|
<div>
|
<TextArea placeholder="请输入消息进行回复" value={value} autosize={{ minRows: 2, maxRows: 2 }} style={{ border: 'unset' }} onChange={this.onChange} onPressEnter={this.sendMsg} />
|
|
<Button type="primary" style={{ float: 'right', margin: '10px', width: '100px' }} onClick={this.sendMsg}>发送</Button>
|
</div>
|
</div>
|
{
|
msgType == 'online' &&
|
(
|
<div className='msg-reply-view-info'>
|
<table>
|
<tbody>
|
<tr>
|
<td style={{ width: '70px' }}>姓名</td>
|
<td>{user.userName}</td>
|
</tr>
|
<tr>
|
<td>性别</td>
|
<td>{this.sexOfCode(user.wxSex)}</td>
|
</tr>
|
<tr>
|
<td>证件类型</td>
|
<td>身份证</td>
|
</tr>
|
<tr>
|
<td>证件号码</td>
|
<td>{user.idcard}</td>
|
</tr>
|
<tr>
|
<td>手机</td>
|
<td>{user.mobile}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
)
|
}
|
|
{
|
msgType == 'onlineCompany' &&
|
(
|
<div className='msg-reply-view-info'>
|
<table>
|
<tbody>
|
<tr>
|
<td style={{ width: '70px' }}>法人姓名</td>
|
<td>{user.companyLegal}</td>
|
</tr>
|
<tr>
|
<td>公司名</td>
|
<td>{user.companyName}</td>
|
</tr>
|
<tr>
|
<td>联系方式</td>
|
<td>{user.companyTel}</td>
|
</tr>
|
{/* <tr>
|
<td>身份证号码</td>
|
<td>{user.idcard}</td>
|
</tr> */}
|
<tr>
|
<td>地址</td>
|
<td>{user.companyAddress}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
)
|
}
|
</div>
|
);
|
}
|
|
}
|
