admin/src/layout/components/msg.vue

<template>
	<el-tabs v-model="msgTab" class="msg-tabs" stretch @tabChange="switchTab">
		<el-tab-pane label="业务" name="business"></el-tab-pane>
		<el-tab-pane label="审批" name="approval"></el-tab-pane>
		<el-tab-pane label="系统" name="system"></el-tab-pane>
	</el-tabs>
	<div class="msg-content">
		<div v-if="msgList.length===0" class="msg-empty">
			<el-icon class="icon">
				<pi-icon-no-message/>
			</el-icon>
		</div>
		<div v-else>
			<el-scrollbar height="230px" :view-style="{ 'overflow-x': 'hidden' }" @endReached="handleScroll">
				<el-link v-for="item in msgList" :key="item" underline="never"
						 :title="item.create_time + ' ' + item.title"
						 style="display: block; width: 100%;" @click="detail(item)">
					<template #default>
						<el-text truncated style="width: 100%;" :class="{isRead: item.read_flag}">
							<el-text type="primary" v-time.tip="item.create_time" style="margin-right: 5px;"
									 :class="{isRead: item.read_flag}"></el-text>
							{{ item.title }}
						</el-text>
					</template>
				</el-link>
			</el-scrollbar>
		</div>
	</div>
	<el-divider/>
	<div class="msg-more">
		<el-button v-if="!isRead" link type="primary" icon="el-icon-select" @click="readAll" :loading="loading">
			全部已读
		</el-button>
		<el-button v-else link type="danger" icon="el-icon-delete" @click="clearAll" :loading="loading">全部删除
		</el-button>
	</div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import api from "@/api"
import {useRouter} from "vue-router"
import {ElMessageBox} from "element-plus";
import tools from "@/utils/tools.js";

const {proxy} = getCurrentInstance()
const router = useRouter()
const emit = defineEmits(['closed'])

let msgTab = ref("business")
let msgList = ref([])
let page = ref(1)
const limit = ref(10)
const loading = ref(false)
const finish = ref(false)
const isRead = ref(false)

onMounted(() => {
	loadData()
})

async function loadData() {
	loading.value = true
	let res = await api.system.message.mine({page: page.value, limit: limit.value, type: msgTab.value})
	loading.value = false
	msgList.value = msgList.value.concat(res.data)
	if (res.data.length < limit.value) {
		finish.value = true
	}
}

async function switchTab() {
	page.value = 1
	msgList.value = []
	finish.value = false
	await loadData()
}

async function readAll() {
	let res = await api.system.message.read({type: msgTab.value})
	proxy.$message.success(res.msg)
	msgList.value.forEach((item) => {
		if (!item.read_flag) {
			item.read_flag = 1
		}
	})
	isRead.value = true
}

async function clearAll() {
	ElMessageBox.prompt('请输入“清空所有”以确认操作', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern: /^清空所有$/,
		inputErrorMessage: '输入错误',
	}).then(async () => {
		loading.value = true
		const [res, err] = await tools.go(api.system.message.clear({type: msgTab.value}));
		loading.value = false
		if (!err) {
			proxy.$message.error(res.msg)
			return
		}
		proxy.$message.success(res.msg)
		msgList.value = []
	}).catch(() => {
	})
}

async function handleScroll(event) {
	if (loading.value || finish.value || event !== "bottom") return
	page.value++
	await loadData()
}

function detail(item) {
	if (msgTab.value === "system") {
		router.push({
			path: "/dashboard/message/detail",
			query: {
				id: item.mess_id
			}
		})
	}
	emit('closed')
}
</script>

<style scoped>
.msg-content {
	height: 230px;
	overflow: hidden;
}

.msg-content .msg-empty {
	display: flex;
	height: 230px;
	justify-content: center;
	align-items: center;
}

.msg-content .msg-empty .icon {
	font-size: 128px;
}

.msg-content .el-link {
	line-height: 30px;
}

:deep(.el-link__inner) {
	display: flex;
}

.msg-more {
	text-align: center;
	margin-top: -14px;
}

.isRead {
	color: var(--el-color-info-light-3);
}
</style>