|
|
|
@ -1,62 +1,44 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="process-center"> |
|
|
|
<ul class="process-left"> |
|
|
|
<li class="active-li">系统通知</li> |
|
|
|
<li>档案流程管理</li> |
|
|
|
<li>流程完成提醒</li> |
|
|
|
<li>赋权提醒</li> |
|
|
|
</ul> |
|
|
|
<div class="process-right"> |
|
|
|
<div class="head-container"> |
|
|
|
<el-button icon="el-icon-delete" :disabled="!(selections.length)" size="mini" @click="delVisible=true">删除</el-button> |
|
|
|
<el-button class="iconfont icon-biaojiyidu-fanbai" :disabled="!(selections.length)" size="mini" @click="handleRead">标记已读</el-button> |
|
|
|
<el-button class="iconfont icon-biaojiyidu-fanbai" size="mini" @click="handleAllRead">全部标记已读</el-button> |
|
|
|
<!-- <el-button icon="el-icon-delete" :disabled="!(selections.length)" size="mini" @click="delVisible=true">删除</el-button> |
|
|
|
<el-button class="iconfont icon-biaojiyidu-fanbai" :disabled="!(selections.length)" size="mini" @click="handleRead">标记已读</el-button> --> |
|
|
|
<el-input v-model="query.keyword" clearable size="small" placeholder="输入标题关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" /> |
|
|
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
|
|
|
<el-button icon="el-icon-search" size="mini" style="background:#3A99FD;margin-left: -10px;" @click="getTableData">搜索</el-button> |
|
|
|
<el-button icon="el-icon-search" size="mini" class="user-search-btn" @click="getTableData">搜索</el-button> |
|
|
|
<el-button class="iconfont icon-quanbuyidu" size="mini" @click="handleAllRead">全部已读</el-button> |
|
|
|
</div> |
|
|
|
<div class="message-center-list"> |
|
|
|
<div class="message-item"> |
|
|
|
<div class="message-date">2020-10-01 10:00:00</div> |
|
|
|
<div class="message-cont"> |
|
|
|
<div class="message-cont-info"> |
|
|
|
<span class="message-type-title">系统通知</span> |
|
|
|
<span class="is-read-tip">未读</span> |
|
|
|
<div class="message-title">这是系统通知标题</div> |
|
|
|
<ul class="message-list-info"> |
|
|
|
<li>创建人：admin</li> |
|
|
|
<li>创建时间：2020-10-01 10:00:00</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="message-more">查看详情<i class="iconfont icon-chakan" /></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="isLoading" |
|
|
|
:data="tableData" |
|
|
|
style="width: 100%;" |
|
|
|
:row-class-name="cell" |
|
|
|
@row-click="clickRowHandler" |
|
|
|
@selection-change="selectionChangeHandler" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
|
|
|
<el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="通知内容" min-width="300" align="center" /> |
|
|
|
<el-table-column prop="noticeType" label="消息类型" align="center" min-width="150"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.noticeType===1">系统消息</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="pushUserName" label="推送人" align="center" min-width="150" /> |
|
|
|
<el-table-column prop="create_time" label="推送时间" align="center" min-width="180"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.create_time | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination |
|
|
|
:page-size.sync="page.size" |
|
|
|
:total="page.total" |
|
|
|
:current-page.sync="page.page" |
|
|
|
style="margin-top: 8px;" |
|
|
|
layout="total, prev, pager, next, sizes" |
|
|
|
@size-change="sizeChangeHandler($event)" |
|
|
|
@current-change="pageChangeHandler" |
|
|
|
/> |
|
|
|
<!-- 删除 --> |
|
|
|
<el-dialog :visible.sync="delVisible" title="提示"> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<p class="delMsg">确定删除所选消息吗？</p> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="handleDelConfirm">确定</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
import { getUserNotice, isread, userMsgDel } from '@/api/system/logs' |
|
|
|
import { getUserNotice, isread } from '@/api/system/logs' |
|
|
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -73,55 +55,16 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [], |
|
|
|
selections: [], |
|
|
|
query: { |
|
|
|
createTime: [] |
|
|
|
}, |
|
|
|
page: { |
|
|
|
total: 0, |
|
|
|
size: 10, |
|
|
|
page: 1 |
|
|
|
}, |
|
|
|
isLoading: false, |
|
|
|
delVisible: false |
|
|
|
createTime: [], |
|
|
|
keyword: null |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getTableData() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getTableData() { |
|
|
|
this.isLoading = true |
|
|
|
getUserNotice(this.getParams()).then(res => { |
|
|
|
this.page.total = res.totalElements |
|
|
|
const table = res.content |
|
|
|
table.forEach(item => { |
|
|
|
item.pushUserName = item.noticeUsers[0].pushUserName |
|
|
|
item.isRead = item.noticeUsers[0].isRead |
|
|
|
}) |
|
|
|
this.tableData = table |
|
|
|
this.isLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
getParams() { |
|
|
|
const params = { |
|
|
|
page: this.page.page - 1, |
|
|
|
size: this.page.size, |
|
|
|
createTime: this.query.createTime, |
|
|
|
sort: 'createTime,desc' |
|
|
|
} |
|
|
|
return params |
|
|
|
}, |
|
|
|
getUserMsgId(list) { |
|
|
|
const ids = [] |
|
|
|
list.forEach(item => { |
|
|
|
item.noticeUsers.forEach(i => { |
|
|
|
ids.push(i.id) |
|
|
|
}) |
|
|
|
}) |
|
|
|
return ids |
|
|
|
}, |
|
|
|
// 标记已读 |
|
|
|
handleRead() { |
|
|
|
isread(this.getUserMsgId(this.selections)).then(res => { |
|
|
|
@ -160,72 +103,77 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
return allList |
|
|
|
}, |
|
|
|
// 删除 |
|
|
|
handleDelConfirm() { |
|
|
|
userMsgDel(this.getUserMsgId(this.selections)).then(res => { |
|
|
|
if (res) { |
|
|
|
// this.getTableData() |
|
|
|
this.delVisible = false |
|
|
|
this.reload() |
|
|
|
this.$message({ |
|
|
|
message: '删除成功', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message.error('删除失败') |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
clickRowHandler(row) { |
|
|
|
// this.$refs.table.clearSelection() |
|
|
|
this.$refs.table.toggleRowSelection(row) // 单选选中 |
|
|
|
}, |
|
|
|
selectionChangeHandler(val) { |
|
|
|
this.selections = val |
|
|
|
}, |
|
|
|
cell({ row }) { |
|
|
|
if (row.isRead) { // 已读 |
|
|
|
return 'read-color' |
|
|
|
} |
|
|
|
}, |
|
|
|
// 每页条数改变 |
|
|
|
sizeChangeHandler(e) { |
|
|
|
this.loading = true |
|
|
|
this.page.size = e |
|
|
|
this.page.page = 1 |
|
|
|
this.getTableData() |
|
|
|
this.loading = false |
|
|
|
}, |
|
|
|
// 当前页改变 |
|
|
|
pageChangeHandler(e) { |
|
|
|
this.loading = true |
|
|
|
this.page.page = e |
|
|
|
this.getTableData() |
|
|
|
this.loading = false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.head-container { |
|
|
|
padding-top: 0; |
|
|
|
.date-item{ |
|
|
|
margin: -1px 20px 0 12px; |
|
|
|
.message-center-list{ |
|
|
|
height: calc(100% - 90px); |
|
|
|
padding: 16px 30px; |
|
|
|
margin-bottom: 20px; |
|
|
|
background-color: #F5F5F5; |
|
|
|
.message-item{ |
|
|
|
font-size: 14px; |
|
|
|
.message-date{ |
|
|
|
text-align: center; |
|
|
|
color: #A6ADB6; |
|
|
|
} |
|
|
|
.message-cont{ |
|
|
|
margin: 12px 0 16px 0; |
|
|
|
background-color: #fff; |
|
|
|
.message-cont-info{ |
|
|
|
position: relative; |
|
|
|
padding: 16px 20px; |
|
|
|
color: #545B65; |
|
|
|
.message-type-title{ |
|
|
|
display: block; |
|
|
|
padding-left: 33px; |
|
|
|
height: 33px; |
|
|
|
line-height: 33px; |
|
|
|
background: url('~@/assets/images/icon/xttz.png') no-repeat left center; |
|
|
|
background-size: 23px 23px; |
|
|
|
} |
|
|
|
.is-read-tip{ |
|
|
|
position: absolute; |
|
|
|
right: 20px; |
|
|
|
top: 16px; |
|
|
|
font-size: 12px; |
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
padding: 0 7px; |
|
|
|
color: #ED4A41; |
|
|
|
background-color: #FDEFEE; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
.message-title{ |
|
|
|
margin: 8px 0 20px 0; |
|
|
|
font-weight: 400; |
|
|
|
color: #0C0E1E; |
|
|
|
} |
|
|
|
.message-list-info{ |
|
|
|
font-size: 12px; |
|
|
|
line-height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
.message-more{ |
|
|
|
position: relative; |
|
|
|
padding: 0 20px; |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
color: #545B65; |
|
|
|
border-top: 1px solid #E6E8ED; |
|
|
|
cursor: pointer; |
|
|
|
i{ |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
top: 0; |
|
|
|
font-size: 12px; |
|
|
|
color: #888D94; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.container-wrap{ |
|
|
|
margin-top: 0; |
|
|
|
min-height: 0; |
|
|
|
height: calc(100vh - 240px); |
|
|
|
} |
|
|
|
::v-deep .read-color td{ |
|
|
|
color: #999 !important; |
|
|
|
} |
|
|
|
.delMsg{ |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
</style> |
