base-callcenter-web/src/components/main/msgModal/index.vue

<template>
	<div class="app_msg_modal" v-if="msg !== 'null'">
		<div class="title">{{ msg?.title }}</div>
		<div class="content">
			有新工单<span style="color:rgb(50, 104, 243);cursor: pointer;" @click="toPageFn(msg , '消息')">{{msg?.workorderid}}</span>，请及时查收处理 
		</div>
		<div class="butt">
			<el-button type="primary" size="small" @click="returnData(msg)">确认</el-button>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { getPageListData, deletePageData, createPageData, editPageData } from '@/api/main/system/system'

import { useRoute, useRouter } from 'vue-router';
const { back, push, go } = useRouter();
const router = useRoute();


const msg = ref('null');

const msgData = ref([]);

// 获取消息
const getMsg = function _f (){ 
	getPageListData('/sms/getmsg' ).then(({data})=>{
		msg.value = data[0] || 'null';
		msgData.value = data.slice(1);
	})
	return _f;
}();
setInterval( getMsg , 1000 * 30 )

// 循环调用 
function forFn (){
	const forData = function *() {
		for (const val of msgData.value) {
			yield val
		}
	}();
	
	return function _fn () { 
		const data = forData.next();
		console.log(data)
		if(!data.done){
			msg.value = data.value;
		}else{
			msg.value = 'null'
		}
	}
}

// 获取数据
let returnData = forFn();
// 方法重构 
let newFn = returnData.bind(); 
returnData = (data)=>{ 
	editPageData(`/sms/updatestate/${data.smsId}`); 
	return newFn(data)
} 



// 页面跳转
function toPageFn(v , type){ 

	editPageData(`/sms/updatestate/${v.smsId}`).then(()=>{ 
		
		newFn()

		let query = {
			workordercode : v.workorderid,
			type : type
		}  
		
		sessionStorage.setItem('workQuery', JSON.stringify(query))  

		if(router.path === '/workHandle'){
			go(0)
		}else{
			push({ path : '/workHandle' })
		} 
	}) 

} 

</script>

<style lang="scss" scoped>
	.app_msg_modal{
		position: absolute;
		bottom: 5px;
		right: 5px;

		width: 300px;
		height: 170px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-shadow: -1px -1px 15px -10px;
	
		display: grid;
		grid-template-rows: 33px 1fr 33px;
		grid-template-columns: 1fr;

		>div{
			padding: 5px;
		}

		.title{
			line-height: 21px;
			font-size: 16px; 
			border-bottom: 1px solid #ccc;
			background-color: #ddedf3;
		}
		.content{
			font-size: 14px;
			text-indent: 30px;
			border-bottom: 1px solid #ccc; 
		}
		.butt{
			justify-self: end;
			align-self: center;
		}
	}
</style>