liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

去掉全局变量

Browse Source
This commit is contained in:
unknown
2022-06-13 15:53:21 +08:00
parent 03535092c0
commit 4d2ad978ab
3 changed files with 78 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/customerservice/support/conversation/components/EmojiPopover/EmojiPopover.jsx
View File

@ -3,94 +3,6 @@ import PropTypes from 'prop-types'
import style from './style.module.css'
import { cns } from '../../utils/toClass'
// const emojiList = [
// '😀',
// '😃',
// '😄',
// '😁',
// '😆',
// '😅',
// '😂',
// '🤣',
// '😊',
// '😇',
// '🙂',
// '🙃',
// '😉',
// '😌',
// '😍',
// '🥰',
// '😘',
// '😗',
// '😙',
// '😚',
// '😋',
// '😛',
// '😝',
// '😜',
// '🤪',
// '🤨',
// '🧐',
// '🤓',
// '😎',
// '🤩',
// '🥳',
// '😏',
// '😒',
// '😞',
// '😔',
// '😟',
// '😕',
// '🙁',
// '😣',
// '😖',
// '😫',
// '😩',
// '🥺',
// '😢',
// '😭',
// '😤',
// '😠',
// '😡',
// '🤬',
// '🤯',
// '😳',
// '🥵',
// '🥶',
// '😱',
// '😨',
// '😰',
// '😥',
// '😓',
// '🤗',
// '🤔',
// '🤭',
// '🤫',
// '🤥',
// '😶',
// '😐',
// '😑',
// '😬',
// '🙄',
// '😯',
// '😦',
// '😧',
// '😮',
// '😲',
// '🥱',
// '😴',
// '🤤',
// '😪',
// '😵',
// '🤐',
// '🥴',
// '🤢',
// '🤮',
// '🤧',
// '😷',
// '🤒',
// '🤕',
// ]
const emojiList = [
'😃',
'😄',
@ -132,17 +44,20 @@ export default function EmojiPopover(props) {
const iconClickHandle = (emoji) => {
onSelect(emoji)
}
const emojiFn = (e)=>{
if (e.target.getAttribute('datatype') === 'emoji') {
switchEmojiModal(true)
} else {
switchEmojiModal(false)
}
}
useEffect(() => {
addEventListener('click', (e) => {
if (e.target.getAttribute('datatype') === 'emoji') {
switchEmojiModal(true)
} else {
switchEmojiModal(false)
}
})
addEventListener('click', emojiFn)
return () => {
removeEventListener('click',emojiFn)
}
}, [])
return (
<div className={style.customer_service_content}>
<div

31
src/pages/customerservice/support/conversation/constants.js Normal file
View File

@ -0,0 +1,31 @@
//保存websocket对象
export const CUSTOMERSERVICE_WEBSOCKET = []
//消息提醒计时器
export const CUSTOMERSERVICE_messageAlert = {
timeout: null,
oldTitle:'招投标系统',
time: 0,
num: 0,
showMessage(msg){
CUSTOMERSERVICE_messageAlert.num++;
if(CUSTOMERSERVICE_messageAlert.num==1){
CUSTOMERSERVICE_messageAlert.timeout = setInterval(function(){
CUSTOMERSERVICE_messageAlert.time ++;
let title = '';
if(CUSTOMERSERVICE_messageAlert.time % 2 === 0){
title = '[　　　]我的咨询';
}else{
title = '['+msg+']我的咨询';
}
document.getElementsByTagName('title')[0].innerText = title;
},500);
}
},
stopMessage(){
document.getElementsByTagName('title')[0].innerText = CUSTOMERSERVICE_messageAlert.oldTitle;
CUSTOMERSERVICE_messageAlert.num = 0;
clearInterval(CUSTOMERSERVICE_messageAlert.timeout);
}
}

107
src/pages/customerservice/support/conversation/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from 'react'
import Chat from './components/Chat/Chat'
import Chat from './components/Chat/Chat'
import ImgPreview from './components/ImgPreview/ImgPreview'
import SeactList from './components/SeactList'
import {entitiestoUtf16, handleElement, doEncrypt } from './utils/utils'
@ -7,40 +7,15 @@ 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'
import { disconnect } from 'echarts'
import { history } from 'umi'
import {CUSTOMERSERVICE_WEBSOCKET, CUSTOMERSERVICE_messageAlert} from './constants'
//未读消息提醒
window.messageAlert = {
timeout: null,
oldTitle:'招投标系统',
time: 0,
num: 0,
showMessage(msg){
window.messageAlert.num++;
if(window.messageAlert.num==1){
window.messageAlert.timeout = setInterval(function(){
window.messageAlert.time ++;
let title = '';
if(messageAlert.time % 2 === 0){
title = '[　　　]我的咨询';
}else{
title = '['+msg+']我的咨询';
}
document.getElementsByTagName('title')[0].innerText = title;
},500);
}
//网页刷新时，清空sessionStorage
window.onbeforeunload = function(){
sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal')
sessionStorage.removeItem('CUSTOMERSERVICE_msgFlash')
}
},
stopMessage(){
document.getElementsByTagName('title')[0].innerText = window.messageAlert.oldTitle;
window.messageAlert.num = 0;
clearInterval(window.messageAlert.timeout);
}
};
const conversation = (props) => {
const [msgList, setMsgList] = useState([])
const [scrollToBottom, setScrollToBottom] = useState(true)
@ -84,11 +59,12 @@ const conversation = (props) => {
document.addEventListener('visibilitychange',()=>{ //监听网页是否失焦
var isHidden = document.hidden
window.isBlurForCustomerService = isHidden
if(!isHidden && (window.isConversationURLChanged==undefined || !window.isConversationURLChanged)){
sessionStorage.setItem('CUSTOMERSERVICE_isBlur', isHidden? 1: 0)
if(!isHidden && sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged')==0){
stopMsg()
}
})
//项目信息
const onChange = () => {
setShowLoading(true)
@ -264,20 +240,14 @@ const disconnectedAlert = () =>{
}
//检验连接websocket
const checkDisconnected = ()=>{
if(window.isCloseChatUIModal!=undefined){ //弹窗没有关闭（弹窗开着或者隐藏，ws不应该断）
if(sessionStorage.getItem('CUSTOMERSERVICE_isCloseChatUIModal')==0){ //弹窗没有关闭（弹窗开着或者隐藏，ws不应该断）
console.log('websocket断开，重新连接')
console.log(window.isModalVisibleForCustomerService)
setConversationId('')
if(window.isModalVisibleForCustomerService){ //断连后，用户打开弹窗再发提醒
if(sessionStorage.getItem('CUSTOMERSERVICE_isModalVisible')==1){ //断连后，用户打开弹窗再发提醒
disconnectedAlert()
}
}else{
setConversationId('')
setMsgPage(0)
if(window.webSocketForCustomerService!=undefined) delete window.webSocketForCustomerService //释放websocket对象
if(window.isModalVisibleForCustomerService!=undefined) delete window.isModalVisibleForCustomerService
if(window.isConversationURLChanged!=undefined) delete window.isConversationURLChanged
if(window.msgAlertForCustomerService!=undefined) delete window.msgAlertForCustomerService
}
}
@ -292,17 +262,16 @@ const getToken = ()=>{
setLoading(true)
getMoreMessage(1)
}else{
console.log(window.webSocketForCustomerService)
if(window.webSocketForCustomerService!=undefined){
if(CUSTOMERSERVICE_WEBSOCKET && CUSTOMERSERVICE_WEBSOCKET.length>0){
//别的路由切过来，ws没断，重新监听
console.log('ws没断，重新监听')
setShow(true)
monitorWebSocket(window.webSocketForCustomerService)
monitorWebSocket(CUSTOMERSERVICE_WEBSOCKET[0])
setLoading(true)
getMoreMessage(1)
}else{
closeWin && closeWin()
delete window.isCloseChatUIModal
sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal')
message.warn(res && '您已在别的终端建立会话')
}
}
@ -314,19 +283,19 @@ const monitorWebSocket = (ws)=>{
ws.onopen = function () {
console.log("Connection open ...");
//记录ws
window.webSocketForCustomerService = ws
CUSTOMERSERVICE_WEBSOCKET.push(ws)
setShow(true) //连接建立后，才可以显示弹窗、收发消息
}
// 接收服务端数据时触发事件
ws.onmessage = function (res) {
if(res.data){
let data = JSON.parse(res.data)
if(window.isConversationURLChanged){//路由变化
window.msgAlertForCustomerService = true
if(sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged')==1){//路由变化
sessionStorage.setItem('CUSTOMERSERVICE_msgFlash',1)
showMsg()
}else {
if(window.isBlurForCustomerService){//失焦
window.msgAlertForCustomerService = true
if(sessionStorage.getItem('CUSTOMERSERVICE_isBlur')==1){//失焦
sessionStorage.setItem('CUSTOMERSERVICE_msgFlash',1)
showMsg()
}
setWsMsg(data)
@ -337,6 +306,8 @@ const monitorWebSocket = (ws)=>{
// 断开 web socket 连接成功触发事件
ws.onclose = function () {
console.log("连接已关闭...");
if(CUSTOMERSERVICE_WEBSOCKET && CUSTOMERSERVICE_WEBSOCKET.length>0)
CUSTOMERSERVICE_WEBSOCKET.splice(0,CUSTOMERSERVICE_WEBSOCKET.length);
checkDisconnected()
};
}
@ -350,38 +321,31 @@ const websocketInit = (id)=>{
//消息闪烁提醒
const showMsg = ()=>{
messageAlert.showMessage('新消息');
CUSTOMERSERVICE_messageAlert.showMessage('新消息');
}
//取消消息闪烁提醒
const stopMsg = ()=>{
messageAlert.stopMessage('新消息');
CUSTOMERSERVICE_messageAlert.stopMessage('新消息');
}
useEffect(()=>{
history.listen(location => {
// 最新路由的 location 对象，可以通过比较 pathname 是否相同来判断路由的变化情况
let isChanged = location.pathname.indexOf('/Dashboard')==-1
if(isChanged){
window.isConversationURLChanged = isChanged
}else{
if(window.isConversationURLChanged != undefined){ //路由切换回来
window.isConversationURLChanged = isChanged
}
}
sessionStorage.setItem("CUSTOMERSERVICE_isConversationURLChanged", isChanged? 1: 0)
})
if(window.msgAlertForCustomerService){
if(sessionStorage.getItem('CUSTOMERSERVICE_msgFlash')==1){
msgAlert && msgAlert() //侧边栏提醒
}
},[])
useEffect(()=>{
if(!isCloseWs){
if(window.isCloseChatUIModal==undefined){
window.isCloseChatUIModal = isCloseWs //false
}
sessionStorage.setItem("CUSTOMERSERVICE_isCloseChatUIModal", 0)
}
},[isCloseWs])
useEffect(() => {
window.isModalVisibleForCustomerService = isModalVisible
sessionStorage.setItem("CUSTOMERSERVICE_isModalVisible", isModalVisible? 1: 0)
if(isModalVisible){
stopMsg()
//登录人的信息的关键字 顺序是固定的。
@ -400,9 +364,8 @@ useEffect(() => {
record.style.height = listHeight + "px"
chatInput.style.height = textHeight + "px"
//清空全局变量
if(window.isConversationURLChanged!=undefined) delete window.isConversationURLChanged
if(window.msgAlertForCustomerService!=undefined) delete window.msgAlertForCustomerService
//清空alert
sessionStorage.removeItem('CUSTOMERSERVICE_msgFlash');
//校验登录
getToken()
}else{
@ -422,7 +385,7 @@ useEffect(() => {
useEffect(() => {
//实时渲染消息
if((!window.isConversationURLChanged || window.isConversationURLChanged== undefined) && wsMsg && wsMsg.clientNo!=undefined){
if(sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged') == 0 && wsMsg && wsMsg.clientNo!=undefined){
if(isModalVisible){ //弹窗开着才渲染
onMsgRender()
}else{
@ -483,8 +446,8 @@ useEffect(() => {
setIsRateModalVisible(true)
}
setShow(false)
delete window.isCloseChatUIModal
let ws = window.webSocketForCustomerService
sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal')
let ws = CUSTOMERSERVICE_WEBSOCKET.pop()
ws && ws.close()
closeWin && closeWin()
}}