byte-sailing-new/src/components/notice/index.vue

<template>
	<div class="commons-notice">
		<el-dialog
			title="系统公告"
			v-model="value"
			width="460px"
			:align-center="true"
			:before-close="handleClose"
		>
			<div class="title">
				<!-- {{ data.length == 0 ? '暂无数据' :  data[indexCopy].title}} -->
			</div>
			<div
				class="text-content"
				v-if="data.length > 0"
				style="margin-top: 10px"
			>
				<h3>{{ data[index].title }}</h3>
				{{ data[index].businessData }}
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button
						size="small"
						@click="index--"
						:disabled="data.length < 2 || index == 0"
						>上一条</el-button
					>
					<el-button
						size="small"
						@click="index++"
						:disabled="data.length == index + 1"
						>下一条</el-button
					>
					<el-button
						type="primary"
						size="small"
						:disabled="data.length == 0 || data[index].isRead"
						@click="confirm"
						>确认已读</el-button
					>
					<!-- <span class="more" @click="moreFn">查看更多 &gt;</span> -->
				</span>
			</template>
		</el-dialog>
		<div
			class="notice-table-warp"
			:class="modelValue ? 'notice-table-warp-open' : ''"
			@click.stop="closeNoticeTableModal"
		>
			<div class="notice-table" @click.stop  v-loading="loading" >
				<div class="tabs">
					<ul>
						<li style="padding-left: 0; border: none" @click="pushInfoReq.whetherFlow = '';getPushInfo()" :class="pushInfoReq.whetherFlow === '' ? 'active' : ''">
							全部（{{pushInfoReq.total}}）
						</li>
						<li  @click="pushInfoReq.whetherFlow = 1;getPushInfo()" :class="pushInfoReq.whetherFlow === 1 ? 'active' : ''">流程</li>
						<li  @click="pushInfoReq.whetherFlow = 0;getPushInfo()" :class="pushInfoReq.whetherFlow === 0 ? 'active' : ''">业务</li>
					</ul>
					<!-- <div class="more">查看更多&gt;</div> -->
				</div>
				<el-table :data="noticeData" style="width: 100%">
					<el-table-column prop="title" label="标题内容" width="250">
						<template #default="scope">
							<el-tooltip
								class="box-item"
								effect="dark"
								:content="scope.row.title"
								placement="top"
							>
								<div class="noticeData-title" @click="toDealWith(scope.row)">{{ scope.row.title }}</div>
							</el-tooltip>
							
						</template>
					</el-table-column>
					<el-table-column prop="businessType" label="类型" width="120">
						<template #default="scope">
							<span>{{ scope.row.businessType === 0 ? '流程' : '业务' }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="操作">
						<template #default="scope">
							<span style="cursor: pointer" @click="readFn(scope)">确认已读</span>
						</template>
					</el-table-column>
				</el-table>
				<div >
					<el-pagination style="text-align: center;" :page-size="5" layout="prev, pager, next" :total="pushInfoReq.total" @current-change="handlePageChange" />
				</div>
				<div class="notice-btn-box" style="margin-top: 20px">
					<!-- <el-button plain disabled>点击清空</el-button> -->
					<el-button type="primary" @click="allReadFn"  v-if="noticeData.length != 0">全部已读</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ElMessageBox, ElNotification,ElMessage } from 'element-plus'
import {
  getToken
} from '@/utils/auth'
const { proxy } = getCurrentInstance();
defineProps({
  modelValue: {
    type: Object,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue"],'changeNum');
const closeNoticeTableModal = () => {
	emit("update:modelValue", false);
};
let noticeData = ref([])
let index = ref(0)
let data = ref([])
let value = ref(false)
const moreFn = () => {
	noticeTableModal.value = true
}

const toDealWith = (item) => {
	
	let urlConfig = {
		"0":'DealWith',
		"5":'Claim',
		"6":"Abnormal"
	}
	proxy.$router.push({
		name:urlConfig[item.businessType],
	})
}

const allReadFn = () => {
	ElMessageBox.confirm('此操作将会把所有未读消息标记为已读，是否继续？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		let arr = []
		noticeData.value.filter(item=>{
			arr.push(item.id)
		})
		commonRead(arr)
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消操作'
		});          
	});
}

const readFn = (item) => {
	commonRead([item.row.id])
}
const commonRead = (ids,type) => {
	proxy.post('/pushInfo/read',{idList:ids}).then(res=>{
		console.log(res)
		ElMessage({
			message: '已读成功',
			type: 'success',
		})
		if(type == 'confirm'){
			data.value[index].isRead = true
		}else{
			getPushInfo()
		}
	})
}
const confirm = () => {
	value.value = false
	commonRead([data.value[index.value].id],'confirm')
	
}
// proxy.post('sendMeg/page',{
// 	pageNum:1,
// 	pageSize:30,
// }).then(res=>{
// 	data.value = res.rows 
// })

const socketInit = () => {
	window.ws = new WebSocket(
		'ws://'+ import.meta.env.VITE_APP_IP +':20001'+ import.meta.env.VITE_APP_WS_API +'/webStock/' +
			getToken()
		// 'ws://192.168.1.97:8300/webStock/' + window.localStorage.getItem('token')
	)
	//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
	window.ws.onopen = function () {
		//当WebSocket创建成功时，触发onopen事件
		console.log('open')
	}
	window.ws.onmessage = function (e) {
		//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
		//在data.value前面插入
		const res = JSON.parse(e.data)
		console.log(res)
		
		
		if(res.type == 1) {
			index.value = 0
			data.value = res.list
			if(res.list.length > 0) value.value = true
		}
		if(res.type == 2) {
			emit('changeNum',res.count * 1)
			getPushInfo()
		}
		if(res.type == 3) {
			ElNotification({
				title: '提示',
				message: res.title,
				position: 'bottom-right',
				duration:0,
			})
		}
		
	}
	window.ws.onclose = function (e) {
		//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
		console.log('close')
	}
	window.ws.onerror = function (e) {
		//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
		console.log(error)
	}
}
let pushInfoReq = ref({
	pageNum: 1,
	pageSize: 5,
	pushRead: 0,
	type: '',
	total:0,
	whetherFlow:'',
})

const handlePageChange = (val) => {
	pushInfoReq.value.pageNum = val
	getPushInfo()
}

const loading = ref(false)
const getPushInfo = () => {
	loading.value = true
	proxy.post('/pushInfo/page',pushInfoReq.value).then(res=>{
		noticeData.value = res.rows
		pushInfoReq.value.total = pushInfoReq.value.whetherFlow === '' ? res.total : pushInfoReq.value.total
		console.log(pushInfoReq)
		setTimeout(() => {
			loading.value = false
		}, 500);
	})
}
socketInit()
const handleClose = () => {
	value.value = false
}

const openBottomBar = (type) => {
	if (type == 1) {
		ElNotification({
			message: '您有一封新的邮件，请注意查收。',
			type: 'warning',
			position: 'bottom-right',
		})
	} else if (type == 2) {
		value.value = true
	} else {
		noticeTableModal.value = true
	}
}
</script>
<style lang="scss">
.notice-table-warp {
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-in-out;
	opacity: 0;
	display: none;
}

.notice-table-warp-open {
	opacity: 1;
	display: block;
}
.notice-table {
	position: fixed;
	right: 2px;
	top: 52px;
	padding: 0 20px 20px;
	width: 500px;
	background: #fff;
	box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
	z-index: 20;
	.notice-btn-box {
		text-align: right;
	}
	.tabs {
		display: flex;
		justify-content: space-between;
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		font-weight: 400;
		ul {
			display: flex;
			margin: 23px 0;
			padding: 0;
			li {
				list-style: none;
				padding: 0 20px;
				cursor: pointer;
				height: 14px;
				line-height: 14px;
				border-left: 1px solid #dcdcdc;
			}
			.active {
				color: #0084ff;
			}
		}
		.more {
			color: #0084ff;
			cursor: pointer;
		}
	}
}
</style>
<style>

.noticeData-title{
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.commons-notice .el-table__row {
	height: 50px;
}
.commons-notice .el-dialog__footer {
	text-align: left !important;
	margin-top: 24px;
}
.commons-notice .more {
	color: #0084ff;
	float: right;
	cursor: pointer;
}
.commons-notice .el-dialog__header {
	background: #eeeeee;
}
.commons-notice .el-dialog__title {
	position: relative;
	padding-left: 30px;
	color: #333333;
	font-weight: bold;
}
.commons-notice .el-dialog__title::before {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAftJREFUOE+tlT9MU1EUxr9zWwgBI/D6Boh/EnbCRiImMhBCGqNhcnDQrbgRAyxGBgYICzXYDbrB4OBENIaY4GAMrmqc3DQxMrxWNGkH0Hv83m0ptvS1EHqTm/fuO+f+zjn3nHueoGYoIFju7kGXGeTrJOd1qlwqq30HdJdzCwX7GY9+7QsX/yO4Ph66gHb0+EkiUzAyRklnrcHyugirb4jKYj/YlgUcHOlVgJrxLkLMHJVSEOmLAFV/Vt2j8SzUrsh0/ncodEDnmec9BswsYV1Vu1RD6+842zmvUR6vkRcAm0Y+vxR6Ku7MVv3bMFir65nVT/gZDNNgBw1+oM7ACe9DTy0e4GHwQnS5uxedbRs8s1t1w1S7I9O5cRfJU/8j9Ybq6ll9ieLhfdFM7w1IfDsyAacFAkXonySB3gokNhuZhNMDGcLfNIGJXWZ3pDVA+z4EfiXwaouA384GzDApEpEUlzXrgI1Dhn7B4cEITOwCYob1aK40iCYMuVlS1BLAY0GMz8ssWxMNdElpVjaaJ+RZCaJ3GbIXASyXTdPC1udAcK8E8TcJvNO4sJtePfsa/bmbDvIj8QrGTDS8ei6QsDkk/Hl2mpm6zUH0bSliGaU8bBLHQ7XA832CXLDomsORxLUvgDfGTJ2pfcGuc1+6qn1VoK1ssBXoOX8B/wDYqv5bje949AAAAABJRU5ErkJggg==);
}
</style>