feat: 通知中心 100%

src/api/system/message.ts

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { AxiosPromise } from 'axios'
 
 /**
  * 获取路由列表
@@ -10,3 +11,18 @@ export function getMessage() {
 		// extraConfig: { showFullscreenLoading: true }
 	})
 }
+
+export function getMessageInfo(data: any): AxiosPromise {
+	return request({
+		url: '/sys/message/page',
+		method: 'post',
+		data
+	})
+}
+
+export function getMessageInfoById(id: any): AxiosPromise {
+	return request({
+		url: '/sys/message/get?id=' + id,
+		method: 'get'
+	})
+}

src/views/message/list/detail.vue

@@ -0,0 +1,74 @@
+<template>
+	<el-dialog v-model="visibleDialog" title="查看详情" @close="handleCancel">
+		<div>
+			<!--title-->
+			<div>
+				<div class="content-title">{{ formOptions.title }}</div>
+				<span>发布人：{{ formOptions.createBy }} 发布时间： {{ formOptions.createTime }}</span>
+
+				<div class="content-title mbt20">{{ formOptions.category ? '通知公告' : '系统消息' }}</div>
+				<span>通知时间： - </span>
+				<br />
+				<br />
+				<span>通知内容：{{ formOptions.content }}</span>
+			</div>
+			<!--content-->
+		</div>
+	</el-dialog>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { getMessageInfoById } from '@/api/system/message'
+
+// 同步值
+const $myEmit = defineEmits(['update:modelValue'])
+
+const myProps = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	messageId: {
+		type: String,
+		default: null
+	}
+})
+
+const formOptions = ref({})
+const handleCancel = () => {
+	$myEmit('update:modelValue', false)
+}
+
+const getMessageInfoDetail = async () => {
+	const { messageId } = myProps
+	const res = await getMessageInfoById(messageId)
+	formOptions.value = res
+}
+
+getMessageInfoDetail()
+// computed
+const visibleDialog = computed({
+	get() {
+		return myProps.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.content-title {
+	overflow: hidden;
+	color: #000000d9;
+	font-weight: 500;
+	font-size: 16px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin-bottom: 20px;
+	&.mbt20 {
+		margin-top: 20px;
+	}
+}
+</style>

src/views/message/list/index.vue

@@ -0,0 +1,173 @@
+<template>
+	<div class="pageWrap">
+		<div class="content-warp flex-column-page-wrap">
+			<!-- 公用搜索组件 -->
+			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
+
+			<!--  LeTable 组件使用  -->
+			<LeTable
+				ref="tableRef"
+				v-model:searchParams="tableOpts.searchParams"
+				v-bind="tableOpts"
+				v-model:curRow="tableOpts.curRow"
+				v-model:checked-options="checkedColumns"
+				:columns="activeColumns"
+			>
+				<template #toolLeft>
+					<el-button type="primary">全部标记已读</el-button>
+				</template>
+
+				<template #categorySlot="scope">
+					<el-tag v-if="scope.row.category">通知公告</el-tag>
+					<el-tag v-else type="info">系统消息</el-tag>
+				</template>
+
+				<template #actionSlot="scope">
+					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+				</template>
+			</LeTable>
+		</div>
+
+		<message-detail v-if="visibleDetail" v-model="visibleDetail" @closed="visibleDetail = false" :messageId="currentId"> </message-detail>
+	</div>
+</template>
+<script lang="tsx" setup>
+import { getMessageInfo } from '@/api/system/message'
+import { nextTick, ref } from 'vue'
+import { useTablePage } from '@/hooks/useTablePage'
+import MessageDetail from './detail.vue'
+
+const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
+const currentId = ref(null)
+
+// 表格搜索条件
+const forms = ref([
+	{
+		prop: 'title',
+		label: '标题：',
+		itemType: 'input',
+		placeholder: '请输入标题'
+	},
+	{
+		prop: 'createBy',
+		label: '发布人：',
+		itemType: 'input',
+		placeholder: '请输入发布人'
+	}
+])
+
+// table列表数据请求
+const queryList = async () => {
+	const { options, searchParams } = tableOpts
+	options.loading = true
+	try {
+		const { records: list, total } = await getMessageInfo(searchParams)
+		tableOpts.total = total
+		tableOpts.list = list
+	} catch {
+		console.log('获取列表数据失败')
+		tableOpts.total = 0
+		tableOpts.list = []
+		options.loading = false // 更改加载中的 loading值
+	} finally {
+		options.loading = false
+	}
+}
+
+// table 参数
+const columns = [
+	{
+		prop: 'title',
+		label: '标题',
+		minWidth: 80
+	},
+	{
+		prop: 'category',
+		label: '消息类型',
+		minWidth: 100,
+		slots: {
+			default: 'categorySlot'
+		}
+	},
+	{
+		prop: 'createBy',
+		label: '发布人',
+		minWidth: 100
+	},
+	{
+		prop: 'createTime',
+		label: '发布时间',
+		minWidth: 126
+	},
+	{
+		prop: 'action',
+		label: '操作',
+		width: 100,
+		fixed: 'right',
+		slots: {
+			default: 'actionSlot'
+		}
+	}
+]
+
+const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+	{
+		options: {
+			showIndex: false
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+const openDetail = (row: any) => {
+	currentId.value = row.id
+	visibleDetail.value = true
+}
+
+nextTick(() => {
+	queryList()
+})
+</script>
+<style scoped lang="scss">
+.pageWrap {
+	flex: 1;
+	display: flex;
+	height: 100%;
+	//background: #fff;
+}
+.content-warp {
+	flex: 1;
+	//width: calc(100% - 250px);
+	width: calc(100% - 210px);
+}
+// 单独自己写的
+/*:deep(.box-card) {
+	height: 100%;
+	.el-card__body {
+		padding: 0;
+	}
+}*/
+
+// 应用的树结构样式
+:deep(.menu-tree) {
+	.el-tree-node__content {
+		height: 36px;
+	}
+	.el-tree-node__content .el-tree-node__label .icon {
+		margin-right: 5px;
+	}
+}
+
+.nopadding {
+	padding: 0px;
+}
+</style>