新增通知中心
This commit is contained in:
parent
cd7251091b
commit
61d52e1571
50
src/components/Notice/noticeDialog/index.vue
Normal file
50
src/components/Notice/noticeDialog/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Editor
|
||||
style="height: 600px; overflow-y: hidden"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
mode="default"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="handleChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
import { Editor } from '@wangeditor/editor-for-vue'
|
||||
interface props {
|
||||
modelValue: string
|
||||
}
|
||||
const props = defineProps<props>()
|
||||
const emit = defineEmits()
|
||||
const valueHtml = ref(props.modelValue)
|
||||
const editorRef = shallowRef()
|
||||
const editorConfig = {
|
||||
readOnly: true
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor
|
||||
}
|
||||
const handleChange = (editor) => {
|
||||
emit('update:modelValue', editor.getHtml())
|
||||
}
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
const editor = editorRef.value
|
||||
if (value == undefined) {
|
||||
editor.clear()
|
||||
return
|
||||
}
|
||||
valueHtml.value = value
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -91,6 +91,20 @@ export const constantRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/notice',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'title',
|
||||
name: 'Title',
|
||||
component: () => import('@/views/noticecenter/index'),
|
||||
meta: { title: '通知中心', icon: 'Bell' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 不用可删掉
|
||||
{
|
||||
path: '',
|
||||
|
||||
155
src/views/noticecenter/index.vue
Normal file
155
src/views/noticecenter/index.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="app-container" style="position: absolute; left: 10px; right: 10px">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane name="notice">
|
||||
<template #label>
|
||||
<el-badge :value="unreadNoticeList.length" style="line-height: 18px" :hidden="unreadNoticeList.length === 0"> 通知公告 </el-badge>
|
||||
</template>
|
||||
<el-divider />
|
||||
<el-empty :image-size="150" description="暂无通知公告" v-if="noticeList.length === 0" />
|
||||
<el-table :data="noticeList" height="600" :show-header="false" v-else>
|
||||
<el-table-column prop="noticeTitle" label="标题">
|
||||
<template #default="{ row }">
|
||||
<el-link :type="row.isRead ? 'primary' : 'danger'" @click="viewNoticeDetail(row.noticeId, row.isRead, row.noticeContent)">{{
|
||||
row.noticeTitle
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.create_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="aimMsg">
|
||||
<template #label>
|
||||
<el-badge :value="unreadAimList.length" style="line-height: 18px" :hidden="unreadAimList.length === 0"> 业务信息 </el-badge>
|
||||
</template>
|
||||
<el-divider />
|
||||
<el-empty :image-size="150" description="暂无业务信息" v-if="aimList.length === 0" />
|
||||
<el-table :data="aimList" height="600" :show-header="false" v-else>
|
||||
<el-table-column prop="noticeTitle" label="标题">
|
||||
<template #default="{ row }">
|
||||
<el-link :type="row.isRead ? 'primary' : 'danger'" @click="viewAimMsgDetail(row.noticeId, row.isRead, row.noticeContent)">{{
|
||||
row.noticeTitle
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.create_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-popconfirm title="是否确定把全部内容消息设为已读？" :width="300" @confirm="onAllReadClick">
|
||||
<template #reference>
|
||||
<el-button type="primary" link class="left-top-button">全部标为已读</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dialog v-model="noticeDialogOpen" title="查看通知详情" draggable :close-on-click-modal="false">
|
||||
<noticeDialog v-model="form.noticeContent" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useSocketStore from '@/store/modules/socket'
|
||||
import signalR from '@/utils/signalR'
|
||||
import noticeDialog from '@/components/Notice/noticeDialog/index.vue'
|
||||
import { ElTable } from 'element-plus'
|
||||
|
||||
const activeTab = ref('notice')
|
||||
const readNoticeList = computed(() => {
|
||||
return useSocketStore().readNoticeList
|
||||
})
|
||||
const unreadNoticeList = computed(() => {
|
||||
return useSocketStore().unreadNoticeList
|
||||
})
|
||||
const noticeList = computed(() => {
|
||||
return readNoticeList.value
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
isRead: true
|
||||
}))
|
||||
.concat(unreadNoticeList.value.map((item: any) => ({ ...item, isRead: false })))
|
||||
})
|
||||
|
||||
const readAimList = computed(() => {
|
||||
return useSocketStore().readAimList
|
||||
})
|
||||
const unreadAimList = computed(() => {
|
||||
return useSocketStore().unreadAimList
|
||||
})
|
||||
const aimList = computed(() => {
|
||||
return readAimList.value
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
isRead: true
|
||||
}))
|
||||
.concat(unreadAimList.value.map((item: any) => ({ ...item, isRead: false })))
|
||||
})
|
||||
const form = ref({
|
||||
noticeContent: ''
|
||||
})
|
||||
const noticeDialogOpen = ref(false)
|
||||
const viewNoticeDetail = (noticeId, isRead, noticeContent) => {
|
||||
if (!isRead) signalR.ReadNotice(noticeId)
|
||||
noticeDialogOpen.value = true
|
||||
form.value.noticeContent = noticeContent
|
||||
}
|
||||
const viewAimMsgDetail = (noticeId, isRead, noticeContent) => {
|
||||
if (!isRead) signalR.ReadAimMsg(noticeId)
|
||||
noticeDialogOpen.value = true
|
||||
form.value.noticeContent = noticeContent
|
||||
}
|
||||
function onAllReadClick() {
|
||||
if (activeTab.value === 'notice') {
|
||||
signalR.AllReadNotice()
|
||||
} else {
|
||||
signalR.AllReadAimMsg()
|
||||
}
|
||||
}
|
||||
const formatDate = (dateTime) => {
|
||||
const dateObj = new Date(dateTime)
|
||||
const options: any = {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
// hour: '2-digit',
|
||||
// minute: '2-digit',
|
||||
// second: '2-digit'
|
||||
}
|
||||
return dateObj.toLocaleDateString('zh-CN', options)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content-box {
|
||||
font-size: 13px;
|
||||
|
||||
.content-box-item {
|
||||
//padding-top: 12px;
|
||||
&:last-of-type {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-box-msg {
|
||||
color: #999999;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content-box-time {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-top-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user