diff --git a/src/pages/customerservice/support/conversation/components/ChatInput/ChatInput.jsx b/src/pages/customerservice/support/conversation/components/ChatInput/ChatInput.jsx
index b2b6679..7295d18 100644
--- a/src/pages/customerservice/support/conversation/components/ChatInput/ChatInput.jsx
+++ b/src/pages/customerservice/support/conversation/components/ChatInput/ChatInput.jsx
@@ -206,7 +206,8 @@ const ChatInput = ((props) => {
}
API.sendToCs(params).then(res => {
if (res && !res.data) {
- console.log(res && res.message)
+ }else{
+ message.warn(res && res.message)
}
})
diff --git a/src/pages/customerservice/support/conversation/components/ChatRecordList/ChatRecordList.jsx b/src/pages/customerservice/support/conversation/components/ChatRecordList/ChatRecordList.jsx
index 8e91dbb..d7e34d1 100644
--- a/src/pages/customerservice/support/conversation/components/ChatRecordList/ChatRecordList.jsx
+++ b/src/pages/customerservice/support/conversation/components/ChatRecordList/ChatRecordList.jsx
@@ -4,7 +4,7 @@ import MsgItem from '../MsgItem/MsgItem'
import PropTypes from 'prop-types';
const ChatRecordList = (props) => {
- let { data, me, showPic} = props
+ let { data, me, showPic, reConnect} = props
return (
{/*
@@ -15,7 +15,7 @@ const ChatRecordList = (props) => {
*/}
{data.map((bubble) => (
-
+
))}
)
diff --git a/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx b/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
index 916545c..c794d0d 100644
--- a/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
+++ b/src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
@@ -8,7 +8,7 @@ import { message, Tooltip } from "antd";
//import { downloadFile } from "@utils/utils";
export default function MsgBubble(props) {
- const { data, isMe, showPic} = props
+ const { data, isMe, showPic, reConnect} = props
const onDownload = (fileId) => {
API.getSecretKey({fileId: fileId}).then(res => {
@@ -43,6 +43,10 @@ export default function MsgBubble(props) {
}
const renderContent = (message) => {
switch (message.type) {
+ case 'dom':
+ return(
+
+ )
case 'text':
return(
{e.preventDefault()}} dangerouslySetInnerHTML={{ __html: message.content }} />
diff --git a/src/pages/customerservice/support/conversation/components/MsgItem/MsgItem.jsx b/src/pages/customerservice/support/conversation/components/MsgItem/MsgItem.jsx
index 6c1f0ed..bd7e38b 100644
--- a/src/pages/customerservice/support/conversation/components/MsgItem/MsgItem.jsx
+++ b/src/pages/customerservice/support/conversation/components/MsgItem/MsgItem.jsx
@@ -7,7 +7,7 @@ import moment from 'moment';
export default function MsgItem(props) {
- const { data, me ,showPic } = props
+ const { data, me ,showPic, reConnect } = props
const isMe = data.user.id === me.id
const isValidDate= (date)=>{
@@ -31,7 +31,7 @@ export default function MsgItem(props) {
{isValidDate(new Date(data.date))?moment(data.date).format('MM-DD HH:mm:ss'):data.date}
- {}
+ {}
)
diff --git a/src/pages/customerservice/support/conversation/index.jsx b/src/pages/customerservice/support/conversation/index.jsx
index 52415f3..f1f0423 100644
--- a/src/pages/customerservice/support/conversation/index.jsx
+++ b/src/pages/customerservice/support/conversation/index.jsx
@@ -8,6 +8,8 @@ import user from '@/assets/img/cs_user.png'
import client from '@/assets/img/cs_client.png'
import { customerserviceAPI as API} from '@/services/customerservice';
import { message, Modal, Table, Button, Popconfirm } from 'antd';
+import { delCategory } from '@/pages/Bid/ReviewConfig/Config/components/service'
+import { connect } from 'dva'
const conversation = (props) => {
const [msgList, setMsgList] = useState([])
@@ -26,7 +28,7 @@ const conversation = (props) => {
const [isSend, setIsSend] = useState(false)
const [sendMsg, setSendMsg] = useState([])
const [agentNumber, setAgentNumber] = useState('')
- //const [angle, setAngle] = useState(0)
+ const [serverNo, setServerNo] = useState('')
const [pagination, setPagination] = useState({
showQuickJumper: true,
showSizeChanger: false,
@@ -48,7 +50,7 @@ const conversation = (props) => {
let serverAvatar = user
let data = wsMsg
if(data && data.clientNo!=undefined){
- console.log('监听渲染')
+ setServerNo(data.serverNo) //保存客服编码
let type = data.contentType==1?'text':data.contentType==2?'image':data.contentType==3?'file':'text'
let content={}
setConversationId(data.conversationId)
@@ -90,6 +92,20 @@ const conversation = (props) => {
setMsgList([...msgList, msgData])
msgAlert && msgAlert()
}
+ }
+ const connect = () =>{
+ let serverAvatar = user
+ const msg = {
+ _id: Math.floor(Math.random() * 1000)+new Date(),
+ date: new Date(),
+ user: {
+ id: serverNo,
+ avatar: serverAvatar,
+ name: '供应链客服',
+ },
+ message: { type: 'dom', content: '' },
+ }
+ setMsgList([...msgList, msg])
}
/*websocket*/
const websocketInit = (id)=>{
@@ -102,7 +118,7 @@ const conversation = (props) => {
console.log("Connection open ...");
//记录ws
setShow(true) //连接建立后，才可以显示弹窗、收发消息
- if(sendMsg && sendMsg.length>0) setIsSend(true) //连接建立后，sendMsg有值才可以发及时消息
+ if(sendMsg && sendMsg.length>0) setIsSend(true) //连接建立后，sendMsg有值才可以发即时消息（用户不点击发送，打开窗口即发送）
setWsObj(ws)
};
@@ -110,8 +126,6 @@ const conversation = (props) => {
ws.onmessage = function (res) {
if(res.data){
let data = JSON.parse(res.data)
- console.log('onmessage')
- console.log(data)
setWsMsg(data)
}
};
@@ -181,11 +195,20 @@ const getProject = (params)=>{
record.style.height = listHeight + "px"
chatInput.style.height = textHeight + "px"
}else{
- if(isCloseWs) setMsgList([])
+ if(isCloseWs) {
+ setMsgList([])
+ }
}
//获取当前用户token
- if(isModalVisible && !isCloseWs && wsObj==null) getToken()
- }, [isModalVisible])
+ if(!show && isModalVisible && !isCloseWs && wsObj==null) {
+ //校验并创建websocket
+ console.log('创建websocket')
+ getToken()
+ }else if(show && isModalVisible && !isCloseWs && wsObj==null){ //websocket已经创建过了
+ console.log('websocket断开，重新连接')
+ connect()
+ }
+ }, [isModalVisible, wsObj])
useEffect(() => {
if(projectModal && supplierNumber!='EMPTY'){
@@ -199,21 +222,13 @@ const getProject = (params)=>{
}, [projectModal])
useEffect(() => {
- //关闭弹窗，清空消息列表
+ //主动关闭弹窗，清空消息列表
if(isCloseWs && wsObj!=null) {
setShow(false)
wsObj.close()
}
}, [isCloseWs])
- useEffect(() => {
- //关闭弹窗，断开ws连接
- //防止ws还没open，就关闭弹窗了。加一次判断：建立好连接后，只要弹窗已关闭，就断开。
- if(isCloseWs && wsObj!=null) {
- wsObj.close()
- }
- }, [wsObj])
-
useEffect(() => {
//onmessage时，触发，必须放到useEffect，直接写到onmessage里不渲染
if(wsMsg && wsMsg.clientNo!=undefined) onMsgRender()
@@ -294,6 +309,7 @@ const getProject = (params)=>{
setImageParams(imageParams)
setIsImgPreviewVisible(true)
}}
+ reConnect={()=>websocketInit(staffId)}
style={{
width: wid,
height: hei,