通知公告新增阅读用户列表

src/api/system/notice.ts

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import type { NoticeQueryParams, SysNotice, SysNoticeTopResult, AjaxResult, TableDataInfo } from '@/types'
+import type { NoticeQueryParams, NoticeReadUserQueryParams, SysNotice, NoticeReadUser, SysNoticeTopResult, AjaxResult, TableDataInfo } from '@/types'
 
 // 查询公告列表
 export function listNotice(query: NoticeQueryParams): Promise<TableDataInfo<SysNotice[]>> {
@@ -69,3 +69,12 @@ export function markNoticeReadAll(ids: string): Promise<AjaxResult> {
     params: { ids }
   })
 }
+
+// 查询公告已读用户列表
+export function listNoticeReadUsers(query: NoticeReadUserQueryParams): Promise<TableDataInfo<NoticeReadUser[]>> {
+  return request({
+    url: '/system/notice/readUsers/list',
+    method: 'get',
+    params: query
+  })
+}

src/types/api/system/notice.ts

@@ -29,3 +29,21 @@ export interface SysNotice extends BaseEntity {
 export interface SysNoticeTopResult extends AjaxResult<SysNotice[]> {
   unreadCount: number
 }
+
+/** 公告已读用户查询参数 */
+export interface NoticeReadUserQueryParams extends PageDomain {
+  /** 公告编号 */
+  noticeId?: number
+  /** 关键字（登录名/用户名） */
+  searchValue?: string
+}
+
+/** 公告已读用户 */
+export interface NoticeReadUser {
+  userId?: number
+  userName?: string
+  nickName?: string
+  deptName?: string
+  phonenumber?: string
+  readTime?: string
+}

src/views/system/notice/ReadUsers.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-dialog v-model="visible" :title="`「${noticeTitle}」已读用户`" width="760px" top="6vh" append-to-body @close="handleClose">
+    <el-form ref="queryRef" :model="queryParams" size="small" :inline="true" style="margin-bottom: 4px;">
+      <el-form-item prop="searchValue">
+        <el-input
+          v-model="queryParams.searchValue"
+          placeholder="登录名称 / 用户名称"
+          clearable
+          :prefix-icon="Search"
+          style="width: 220px;"
+          @keyup.enter="handleQuery"
+          @clear="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
+      </el-form-item>
+      <el-form-item style="float: right; margin-right: 0;">
+        <span class="read-stat">
+          共 <strong>{{ total }}</strong> 人已读
+        </span>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="userList" size="small" stripe height="340px">
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column label="登录名称" prop="userName" align="center" :show-overflow-tooltip="true" />
+      <el-table-column label="用户名称" prop="nickName" align="center" :show-overflow-tooltip="true" />
+      <el-table-column label="所属部门" prop="deptName" align="center" :show-overflow-tooltip="true" />
+      <el-table-column label="手机号码" prop="phonenumber" align="center" width="120" />
+      <el-table-column label="阅读时间" prop="readTime" align="center" width="160">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.readTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+      style="padding: 6px 0px;"
+    />
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ReadUsers">
+import { Search } from "@element-plus/icons-vue"
+import { listNoticeReadUsers } from "@/api/system/notice"
+import type { NoticeReadUser, NoticeReadUserQueryParams, SysNotice } from "@/types/api/system/notice"
+
+const { proxy } = getCurrentInstance()
+
+const visible = ref(false)
+const loading = ref(false)
+const noticeTitle = ref("")
+const total = ref(0)
+const userList = ref<NoticeReadUser[]>([])
+
+const queryParams = reactive<NoticeReadUserQueryParams>({
+  pageNum: 1,
+  pageSize: 10,
+  noticeId: undefined,
+  searchValue: undefined
+})
+
+function open(row: SysNotice) {
+  queryParams.noticeId = row.noticeId
+  noticeTitle.value = row.noticeTitle ?? ""
+  queryParams.searchValue = undefined
+  queryParams.pageNum = 1
+  visible.value = true
+  getList()
+}
+
+function getList() {
+  loading.value = true
+  listNoticeReadUsers(queryParams).then(res => {
+    userList.value = res.rows
+    total.value = res.total
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+function handleClose() {
+  userList.value = []
+  total.value = 0
+  queryParams.searchValue = undefined
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped>
+.read-stat {
+  font-size: 13px;
+  color: #606266;
+  line-height: 28px;
+}
+.read-stat strong {
+  color: #409eff;
+  font-size: 15px;
+  margin: 0 2px;
+}
+</style>

src/views/system/notice/index.vue

@@ -94,6 +94,7 @@
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
+               <el-button link type="primary" icon="User" @click="handleReadUsers(scope.row)" v-hasPermi="['system:notice:list']">阅读用户</el-button>
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button>
             </template>
@@ -155,11 +156,13 @@
          </template>
       </el-dialog>
       <notice-detail-view ref="noticeViewRef" />
+      <read-users-dialog ref="readUsersRef" />
    </div>
 </template>
 
 <script setup lang="ts" name="Notice">
 import NoticeDetailView from "@/layout/components/HeaderNotice/DetailView.vue"
+import ReadUsersDialog from "./ReadUsers.vue"
 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
 import type { SysNotice, NoticeQueryParams } from '@/types/api/system/notice'
 
@@ -284,6 +287,11 @@ function handleViewData(row: SysNotice) {
   proxy.$refs["noticeViewRef"].open(row)
 }
 
+/** 查看已读用户 */
+function handleReadUsers(row: SysNotice) {
+   proxy.$refs["readUsersRef"].open(row)
+}
+
 /** 删除按钮操作 */
 function handleDelete(row?: SysNotice) {
   const noticeIds = row?.noticeId || ids.value