更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://122.227.135.243:9888

1、个人中心，增加我的消息，修改的vue3代码如下：

<template><div class="app-container"><el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="公告标题" prop="noticeTitle"><el-inputv-model="queryParams.noticeTitle"placeholder="请输入公告标题"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="操作人员" prop="createBy"><el-inputv-model="queryParams.createBy"placeholder="请输入操作人员"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="类型" prop="noticeType"><el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable><el-optionv-for="dict in sys_notice_type":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click=""v-hasPermi="['system:noticeSend:list']">全部标注已读</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" align="center" prop="noticeId" width="100" /><el-table-columnlabel="消息标题"align="center"prop="noticeTitle":show-overflow-tooltip="true"/><el-table-column label="消息类型" align="center" prop="noticeType" width="100"><template #default="scope"><dict-tag :options="sys_notice_type" :value="scope.row.noticeType" /></template></el-table-column><el-table-column label="发布人" align="center" prop="sender" width="100" /><el-table-column label="发布时间" align="center" prop="sendTime" width="100" /><el-table-column label="优先级" align="center" prop="priority" width="100"><template #default="scope"><dict-tag :options="sys_priority" :value="scope.row.priority"/></template></el-table-column><el-table-column label="阅读状态" align="center" prop="readFlag" width="100"><template #default="scope"><dict-tag :options="sys_readflag" :value="scope.row.readFlag"/></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><el-buttonsize="mini"type="text"icon="el-icon-view"@click="handleSee(scope.row)"v-hasPermi="['system:noticeSend:list']">查看</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total"v-model:page="queryParams.pageNum"v-model:limit="queryParams.pageSize"@pagination="getList"/><show-notice ref="showNoticeRef" @ok="modalFormOk"></show-notice><dynamic-notice ref="showDynamNoticeRef" :path="openPath" :formData="formData"></dynamic-notice></div>
</template><script setup lang="ts" name ="MyNotice">import ShowNotice from '@/layout/components/HeaderNotice/ShowNotice.vue'import DynamicNotice from '@/layout/components/HeaderNotice/DynamicNotice.vue'import { getMyNoticeSend, updateUserIdAndNotice } from "@/api/system/notice";const { proxy } = getCurrentInstance() as ComponentInternalInstance;const { sys_priority, sys_notice_type, sys_readflag } = toRefs<any>(proxy?.useDict("sys_priority", "sys_notice_type", "sys_readflag"));const hovered = ref(false)// 遮罩层const loading = ref(true)// 选中数组const ids = ref<any>([])// 非单个禁用const single = ref(true)// 非多个禁用const multiple = ref(true)// 显示搜索条件const showSearch = ref(true)// 总条数const total = ref(0)// 公告表格数据const noticeList = ref<any>([])// 查询参数const queryParams = ref({noticeSendModel: {},pageNum: 1,pageSize: 10})const formData = ref<any>({})const openPath = ref('')const showDynamNoticeRef = ref(DynamicNotice)const showNoticeRef = ref(ShowNotice)const queryFormRef = ref(null)/** 查询公告列表 */const getList = () => {loading.value = true;console.log("queryParams",queryParams.value);getMyNoticeSend(queryParams.value).then(res => {console.log("getMyNoticeSend res", res);noticeList.value = res.data.records;total.value = res.data.total;loading.value = false;});}const handleSee = (record:any) => {console.log("handleSee record",record);if(record.readFlag == '0'){updateUserIdAndNotice({noticeId: record.noticeId}).then((res) => {if (res.code == 200) {getList();}});}hovered.value = false;if (record.openType === 'component') {openPath.value = record.openPage;formData.value = {id: record.busId};showDynamNoticeRef.value.detail(record.openPage);} else {showNoticeRef.value.detail(record);}}const modalFormOk = () => {}/** 搜索按钮操作 */const handleQuery = () => {queryParams.value.pageNum = 1;getList();}/** 重置按钮操作 */const resetQuery= () => {queryFormRef.value?.resetFields();handleQuery();}// 多选框选中数据const handleSelectionChange = (selection: any) => {ids.value = selection.map(item => item.noticeId)single.value = selection.length!=1multiple.value = !selection.length}onMounted(() => {getList();})</script>

2、效果图如下：