root/stand_lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: 新增消息通知

Browse Source
This commit is contained in:
liyongde
2023-05-09 20:49:45 +08:00
parent bb8706da63
commit 5e308a87df
23 changed files with 1209 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
nladmin-ui/src/layout/components/Navbar.vue
View File

@@ -15,6 +15,8 @@
<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip>
<notice-icon class="right-menu-item"/>
<notice-icon-reader ref="noticeIconReader"/>
<!-- <el-tooltip content="布局设置" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
@@ -24,9 +26,7 @@
<img :src="Avatar" class="user-avatar">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
<!-- <img :src="Avatar" class="user-avatar" style="border: #f5141e 1px solid">-->
<span class="user-nickname">{{ user.person_name }}</span>
<!-- <span class="user-nickname">258</span>-->
</div>
<el-dropdown-menu slot="dropdown">
<span style="display:block;" @click="show = true">
@@ -61,9 +61,13 @@ import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import Avatar from '@/assets/images/avatar.png'
import NoticeIcon from '@/views/system/notice/NoticeIcon.vue'
import NoticeIconReader from '@/views/system/notice/NoticeIconReader.vue'
export default {
components: {
NoticeIconReader,
NoticeIcon,
Breadcrumb,
Hamburger,
Screenfull,
@@ -102,6 +106,9 @@ export default {
}
}
},
created() {
this.initWebSocket()
},
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
@@ -119,6 +126,35 @@ export default {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
},
initWebSocket() {
// const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'messageInfo'
const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + 'messageInfo'
this.websock = new WebSocket(wsUri)
this.websock.onerror = this.webSocketOnError
this.websock.onmessage = this.webSocketOnMessage
},
webSocketOnError(e) {
this.$notify({
title: 'WebSocket连接发生错误',
type: 'error',
duration: 0
})
},
webSocketOnMessage(e) {
const data = JSON.parse(e.data)
if (data.msgType === 'INFO') {
console.log('data', data)
this.$bus.emit(data.msg.data, data.msg.msgType)
} else if (data.msgType === 'ERROR') {
this.$notify({
title: '',
message: data.msg,
dangerouslyUseHTMLString: true,
type: 'error',
duration: 0
})
}
}
}
}

3
nladmin-ui/src/main.js
View File

@@ -46,6 +46,8 @@ import { addDateRange, handleTree, parseTime, resetForm, selectDictLabel, select
import { getValueByCode } from '@/views/system/param/param'
import VueBus from 'vue-bus'
LogicFlow.use(Menu)
Vue.component('tinymce', Tinymce)
@@ -67,6 +69,7 @@ Vue.use(VueHighlightJS)
Vue.use(mavonEditor)
Vue.use(permission)
Vue.use(dict)
Vue.use(VueBus)
// 全局设置控件样式https://codeantenna.com/a/0IN5FMJk5h
Element.Table.props.border = { type: Boolean, default: true }
Element.TableColumn.props.align = { type: String, default: 'center' }

128
nladmin-ui/src/views/system/notice/NoticeIcon.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<el-popover
placement="top-end"
width="450"
trigger="manual"
v-model="visible">
<div style="margin: 5px" v-loading="loading">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="d.label" :name="d.value" v-for="d in dict.notice_type" :key="d.id">
<el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" ></el-empty>
<div v-for="o in notReadMsgList[d.value-1]" :key="o.notice_id">
<a href="javascript:" @click="showMessage(o)">
<el-row @click="showMessage">
<el-col :span="6">
<el-tag type="danger">{{ dict.label.notice_type[o.notice_type] }}</el-tag>
</el-col>
<el-col :span="9" style="font-weight: bolder">{{o.notice_title}}</el-col>
<el-col :span="9" style="color: #cccccc">{{o.create_time}}</el-col>
</el-row>
<el-divider ></el-divider>
</a>
</div>
</el-tab-pane>
</el-tabs>
<div style="text-align: right">
<el-button type="text" @click="visible = !visible">取消</el-button>
<el-button type="text" @click="toSiteMessage" >查看更多>></el-button>
</div>
</div>
<span slot="reference" @click="fetchNotice">
<el-badge :value="notReadMsgCount" :hidden="notReadMsgCount==0">
<el-icon class="el-icon-bell" style="font-size: 22px;"></el-icon>
</el-badge>
</span>
</el-popover>
</template>
<script>
import crudNotice from './sysNotice'
import { NOTICE_MESSAGE_UPDATE, NOTICE_SHOW_MESSAGE } from './VueBaseCode'
export default {
dicts: ['deal_status', 'have_read_type', 'notice_type'],
name: 'NoticeIcon',
data() {
return {
loading: false,
visible: false,
activeName: '1',
// 未读消息数量
notReadMsgCount: 0,
// 消息内容
notReadMsgList: []
}
},
methods: {
/**
* 打开列表页
*/
fetchNotice() {
if (this.visible) {
this.visible = false
this.loading = false
} else {
this.visible = true
this.loading = true
// 消息列表
this.getMessage()
}
},
getMessage() {
crudNotice.pageByReceive().then(res => {
this.notReadMsgList = res
this.loading = false
})
},
/**
* 未读的消息数量
*/
receivedCount() {
// 查询当前用户的未读消息数量
crudNotice.countByReceiveNotRead().then(res => {
this.notReadMsgCount = res
})
},
/**
* 查看消息
*/
showMessage(message) {
// 标记已读
crudNotice.read(message.notice_id).then(() => {
this.receivedCount()
})
this.$bus.emit(NOTICE_SHOW_MESSAGE, message)
this.visible = false
},
/**
* 跳转到站内信界面
*/
toSiteMessage() {
this.$router.push({
path: '/monitor/notice'
})
this.visible = false
},
handleClick(tab, event) {
// console.log(this.dict.notice_type)
// console.log(tab, event)
}
},
mounted() {
this.getMessage()
this.receivedCount()
this.$bus.on(NOTICE_MESSAGE_UPDATE, this.receivedCount) // 监听事件
},
destroyed() {
this.$bus.off(NOTICE_MESSAGE_UPDATE)
}
}
</script>
<style scoped>
/deep/.el-badge__content.is-fixed {
top: 10px;
}
.el-divider{
margin: 8px 0;
}
</style>

122
nladmin-ui/src/views/system/notice/NoticeIconReader.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<el-dialog
title="消息详情"
:visible.sync="visible"
:modal-append-to-body="false"
:append-to-body="true"
width="40%">
<div style="margin-top: 5px">
<el-descriptions class="margin-top" :column="3" border>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
标题
</template>
{{message.notice_title}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
信息类型
</template>
<el-tag size="small" type="danger">
{{ dict.label.notice_type[message.notice_type] }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-location-outline"></i>
创建时间
</template>
{{ message.create_time }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-tickets"></i>
处理情况
</template>
<el-tag size="small" type="warning">
{{ dict.label.deal_status[message.deal_status] }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-office-building"></i>
内容
</template>
{{message.notice_content}}
</el-descriptions-item>
</el-descriptions>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="handleCancel">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import crudNotice from './sysNotice'
import { NOTICE_SHOW_MESSAGE } from './VueBaseCode'
export default {
dicts: ['deal_status', 'have_read_type', 'notice_type'],
name: 'NoticeIconReader',
data() {
return {
visible: false,
confirmLoading: false,
message: {
have_read: false,
notice_type: null,
deal_status: null,
notice_content: null,
notice_id: '',
create_time: '',
notice_title: '',
read_time: ''
},
bodyStyle: {
padding: '0',
maxHeight: (window.innerHeight * 0.6) + 'px',
'overflow-y': 'auto'
},
modelStyle: {
width: '60%',
style: { top: '10px' },
fullScreen: false
}
}
},
methods: {
/**
* 显示消息内容
*/
show(row) {
console.log('sss', row)
this.visible = true
this.confirmLoading = true
this.message = row
crudNotice.findById(row.notice_id).then(res => {
this.message = res
this.confirmLoading = false
})
},
/**
* 关闭
*/
handleCancel() {
this.visible = false
}
},
mounted() {
// 绑定查看站内信消息事件
this.$bus.on(NOTICE_SHOW_MESSAGE, this.show)
},
destroyed() {
this.$bus.off(NOTICE_SHOW_MESSAGE)
}
}
</script>
<style scoped>
</style>

15
nladmin-ui/src/views/system/notice/VueBaseCode.js Normal file
View File

@@ -0,0 +1,15 @@
/* 消息服务 */
/**
* 显示站内信消息
*/
export const NOTICE_SHOW_MESSAGE = 'notice_show_message'
/**
* 通知消息发生消息更新 主要是 未读数量更新
*/
export const NOTICE_MESSAGE_UPDATE = 'notice_message_update'
/* 其他 */
/**
* ws测试事件
*/
export const EVENT_TEST_WEBSOCKET = 'event_test_websocket'

270
nladmin-ui/src/views/system/notice/index.vue Normal file
View File

@@ -0,0 +1,270 @@
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-form
:inline="true"
class="demo-form-inline"
label-position="right"
label-width="90px"
label-suffix=":"
>
<el-form-item label="信息标题">
<el-input
v-model="query.notice_title"
clearable
size="mini"
placeholder="请输入标题"
@keyup.enter.native="crud.toQuery"
/>
</el-form-item>
<el-form-item label="信息类型">
<el-select
v-model="query.notice_type"
clearable
size="mini"
placeholder="信息类型"
class="filter-item"
@change="hand"
>
<el-option
v-for="item in dict.notice_type"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="读取状态">
<el-select
v-model="query.have_read"
clearable
size="mini"
placeholder="读取状态"
class="filter-item"
@change="hand"
>
<el-option
v-for="item in dict.have_read_type"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="处理情况">
<el-select
v-model="query.deal_status"
clearable
size="mini"
placeholder="处理情况"
class="filter-item"
@change="hand"
>
<el-option
v-for="item in dict.deal_status"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<rrOperation />
</el-form>
</div>
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
<crudOperation :permission="permission">
<el-button
slot="right"
class="filter-item"
size="mini"
type="success"
icon="el-icon-circle-check"
:disabled="crud.selections.length === 0"
@click="changeRead(crud.selections)"
>
批量已读
</el-button>
</crudOperation>
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
<el-form-item label="信息标题" prop="notice_title">
<el-input v-model="form.notice_title" style="width: 370px;" />
</el-form-item>
<el-form-item label="信息内容" prop="notice_content">
<el-input v-model="form.notice_content" style="width: 370px;" />
</el-form-item>
<el-form-item label="信息类型" prop="notice_type">
<el-input v-model="form.notice_type" style="width: 370px;" />
</el-form-item>
<el-form-item label="读取状态" prop="have_read">
<el-input v-model="form.have_read" style="width: 370px;" />
</el-form-item>
<el-form-item label="读取时间">
<el-input v-model="form.read_time" style="width: 370px;" />
</el-form-item>
<el-form-item label="处理状态" prop="deal_status">
<el-input v-model="form.deal_status" style="width: 370px;" />
</el-form-item>
<el-form-item label="创建时间" prop="create_time">
<el-input v-model="form.create_time" style="width: 370px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="mini" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column prop="notice_title" label="信息标题" :min-width="flexWidth('notice_title',crud.data,'信息标题')" />
<el-table-column prop="notice_content" label="信息内容" :min-width="flexWidth('notice_content',crud.data,'信息内容')" />
<el-table-column prop="notice_type" label="信息类型" :min-width="flexWidth('notice_type',crud.data,'信息类型')">
<template slot-scope="scope">
<el-tag v-if="scope.row.notice_type == 1" type="danger">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
<el-tag v-else type="warning">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="have_read" label="读取状态" :min-width="flexWidth('have_read',crud.data,'读取状态')" >
<template slot-scope="scope">
<el-tag v-if="scope.row.have_read == 1" type="danger">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
<el-tag v-else type="success">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="read_time" label="读取时间" :min-width="flexWidth('read_time',crud.data,'读取时间')" />
<el-table-column prop="deal_status" label="处理状态" :min-width="flexWidth('deal_status',crud.data,'处理状态')" >
<template slot-scope="scope">
<el-tag v-if="scope.row.deal_status == 1" type="info">{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
<el-tag v-else>{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
<el-table-column v-permission="[]" label="操作" width="230px" align="center" fixed="right">
<template slot-scope="scope">
<el-button
type="text"
slot="left"
icon="el-icon-view"
@click="show(scope.row)">
查看
</el-button>
<el-button
type="text"
slot="left"
icon="el-icon-help"
@click="deal(scope.row)">
处理
</el-button>
<udOperation
:data="scope.row"
:permission="permission"
:is-visiable-edit="false"
style="display: inline"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</div>
</template>
<script>
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import crudNotice from './sysNotice'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import { NOTICE_SHOW_MESSAGE, NOTICE_MESSAGE_UPDATE } from './VueBaseCode'
const defaultForm = { notice_id: null, notice_title: null, notice_content: null, notice_type: null, have_read: null, read_time: null, deal_status: null, create_time: null }
export default {
name: 'Notice',
dicts: ['deal_status', 'have_read_type', 'notice_type'],
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
cruds() {
return CRUD({
title: '消息通知',
url: 'api/notice',
idField: 'notice_id',
sort: 'notice_id,desc',
crudMethod: { ...crudNotice },
optShow: {
add: false,
edit: false,
del: true,
download: false,
reset: true
}
})
},
data() {
return {
permission: {},
rules: {
notice_title: [
{ required: true, message: '信息标题不能为空', trigger: 'blur' }
],
notice_content: [
{ required: true, message: '信息内容不能为空', trigger: 'blur' }
],
notice_type: [
{ required: true, message: '信息类型不能为空', trigger: 'blur' }
],
have_read: [
{ required: true, message: '读取状态不能为空', trigger: 'blur' }
],
deal_status: [
{ required: true, message: '处理状态不能为空', trigger: 'blur' }
],
create_time: [
{ required: true, message: '创建时间不能为空', trigger: 'blur' }
]
}}
},
methods: {
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
},
show(record) {
if (record.have_read == '1') {
crudNotice.read(record.notice_id).then(() => {
record.have_read = '2'
this.$bus.emit(NOTICE_MESSAGE_UPDATE)
})
}
this.$bus.emit(NOTICE_SHOW_MESSAGE, record)
this.crud.toQuery()
},
hand(value) {
this.crud.toQuery()
},
deal(row) {
crudNotice.deal(row.notice_id).then(() => {
row.have_read = '2'
this.$bus.emit(NOTICE_MESSAGE_UPDATE)
})
this.crud.toQuery()
},
changeRead(data) {
const param = {}
param.data = data
param.have_read = '2'
crudNotice.changeRead(param).then(() => {
this.$bus.emit(NOTICE_MESSAGE_UPDATE)
})
this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.crud.toQuery()
}
}
}
</script>
<style scoped>
</style>

94
nladmin-ui/src/views/system/notice/sysNotice.js Normal file
View File

@@ -0,0 +1,94 @@
import request from '@/utils/request'
/**
* 获取未读信息
* @returns {AxiosPromise}
*/
export function pageByReceive() {
return request({
url: '/api/notice/pageByReceive',
method: 'get'
})
}
/**
* 未读消息数量
*/
export function countByReceiveNotRead() {
return request({
url: '/api/notice/countByReceiveNotRead',
method: 'GET'
})
}
/**
* 标记为已读
*/
export function read(id) {
return request({
url: '/api/notice/read',
method: 'post',
data: id
})
}
/**
* 标记为已修改
*/
export function deal(id) {
return request({
url: '/api/notice/deal',
method: 'post',
data: id
})
}
/**
* 批量已读
* @param data
* @returns {*}
*/
export function changeRead(data) {
return request({
url: 'api/notice/changeRead',
method: 'post',
data: data
})
}
/**
* 查看消息
*/
export function findById(id) {
return request({
url: '/api/notice/findById',
method: 'post',
data: id
})
}
export function add(data) {
return request({
url: 'api/notice',
method: 'post',
data
})
}
export function del(ids) {
return request({
url: 'api/notice/',
method: 'delete',
data: ids
})
}
export function edit(data) {
return request({
url: 'api/notice',
method: 'put',
data
})
}
export default { add, edit, del, pageByReceive, countByReceiveNotRead, read, findById, deal, changeRead }

14
nladmin-ui/src/views/system/user/center.vue
View File

@@ -28,7 +28,7 @@
<svg-icon icon-class="anq" /> 安全设置
<div class="user-right">
<a @click="$refs.pass.dialog = true">修改密码</a>
<a @click="$refs.email.dialog = true">修改邮箱</a>
<!-- <a @click="$refs.email.dialog = true">修改邮箱</a>-->
</div>
</li>
</ul>
@@ -41,7 +41,7 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户资料" name="first">
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="mini" label-width="65px">
<el-form-item label="姓名" prop="personName">
<el-form-item label="姓名" prop="person_name">
<el-input v-model="form.person_name" style="width: 35%" />
<span style="color: #C0C0C0;margin-left: 10px;">用户姓名不作为登录使用</span>
</el-form-item>
@@ -64,7 +64,7 @@
<el-tab-pane label="操作日志" name="second">
<el-table v-loading="loading" :data="data" style="width: 100%;">
<el-table-column prop="description" label="行为" min-width="130" show-overflow-tooltip />
<el-table-column prop="requestIp" label="IP" />
<el-table-column prop="request_ip" label="IP" />
<el-table-column show-overflow-tooltip prop="address" label="IP来源" />
<el-table-column prop="browser" label="浏览器" min-width="120" show-overflow-tooltip />
<el-table-column prop="time" label="请求耗时" align="center">
@@ -83,7 +83,7 @@
<div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
</template>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<span>{{ parseTime(scope.row.create_time) }}</span>
</template>
</el-table-column>
</el-table>
@@ -116,7 +116,7 @@ import store from '@/store'
import { isvalidPhone } from '@/utils/validate'
import { parseTime } from '@/utils/index'
import crud from '@/mixins/crud'
import { editUser } from '@/views/system/user'
import { editUser } from '@/views/system/user/user'
import Avatar from '@/assets/images/avatar.png'
export default {
name: 'Center',
@@ -143,7 +143,7 @@ export default {
},
form: {},
rules: {
personName: [
person_name: [
{ required: true, message: '请输入用户姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
@@ -161,7 +161,7 @@ export default {
])
},
created() {
this.form = { id: this.user.id, personName: this.user.personName, gender: this.user.gender, phone: this.user.phone }
this.form = { id: this.user.id, person_name: this.user.person_name, gender: this.user.gender, phone: this.user.phone }
store.dispatch('GetInfo').then(() => {})
},
methods: {

2
nladmin-ui/src/views/system/user/center/updatePass.vue
View File

@@ -22,7 +22,7 @@
<script>
import store from '@/store'
import { updatePass } from '@/views/system/user'
import { updatePass } from '@/views/system/user/user'
export default {
data() {
const confirmPass = (rule, value, callback) => {