You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
11 KiB
307 lines
11 KiB
3 years ago
|
<template>
|
||
|
|
<el-dialog title="消息通知" :visible.sync="openStatus" @close="doClose">
|
||
|
|
<el-tabs v-model="activeName" tab-position="left" type="border-card" style="height: 500px" @tab-click="tabsClick">
|
||
|
|
<el-tab-pane name="first">
|
||
|
|
<span slot="label"><i class="el-icon-setting" /> 系统通知
|
||
|
|
<el-button size="mini" style="margin-left: 5px" circle disabled>{{ systemMessageCount }}</el-button>
|
||
|
|
</span>
|
||
|
|
<div>
|
||
|
|
<el-table ref="systemList" :data="systemMessage" style="width: 100%" height="450" @row-click="onSystemRowClick" @expand-change="settingReadMessage">
|
||
|
|
<el-table-column label="通知标题">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<i class="el-icon-message" />
|
||
|
|
<span style="margin-left: 10px">{{ scope.row.title }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="发送人" prop="createBy" />
|
||
|
|
<el-table-column label="发送时间" prop="createTime" />
|
||
|
|
<el-table-column label="查看" type="expand">
|
||
|
|
<template slot-scope="props">
|
||
|
|
<el-form label-position="left" inline>
|
||
|
|
<span>{{ props.row.content }}</span>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane name="second">
|
||
|
|
<span slot="label"><i class="el-icon-folder-opened" /> 已读信息
|
||
|
|
<el-button size="mini" style="margin-left: 5px" circle disabled>{{ readMessageCount }}</el-button>
|
||
|
|
</span>
|
||
|
|
<div>
|
||
|
|
<div class="filter-container">
|
||
|
|
<el-form>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input v-model="readListQuery.searchReadMessage.title" size="mini" style="width: 180px;" placeholder="请输入标题" clearable />
|
||
|
|
<el-date-picker v-model="readListQuery.searchReadMessage.createTime" size="mini" style="width: 150px;" type="date" placeholder="请选择发送时间" clearable />
|
||
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleReadFilter">
|
||
|
|
查询
|
||
|
|
</el-button>
|
||
|
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click="moveToRecycle">
|
||
|
|
删除
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<el-table ref="readList" :data="readMessage" style="width: 100%" border height="380" @row-click="onReadRowClick" @selection-change="handleReadSelectionChange">
|
||
|
|
<el-table-column type="selection" width="40" />
|
||
|
|
<el-table-column label="序号" type="index" width="50" />
|
||
|
|
<el-table-column label="通知标题" prop="title" />
|
||
|
|
<el-table-column label="发送人" prop="createBy" width="100" />
|
||
|
|
<el-table-column label="发送时间" prop="createTime" />
|
||
|
|
<el-table-column label="查看" width="50" type="expand">
|
||
|
|
<template slot-scope="props">
|
||
|
|
<el-form label-position="left" inline>
|
||
|
|
<span>{{ props.row.content }}</span>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<pagination v-show="readMessageTotal>0" :total="readMessageTotal" :page-num.sync="readListQuery.pageNum" :page-row.sync="readListQuery.pageRow" @pagination="getReadList" />
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane name="third">
|
||
|
|
<span slot="label"><i class="el-icon-receiving" /> 回 收 站
|
||
|
|
<el-button size="mini" style="margin-left: 5px" circle disabled>{{ recycleMessageCount }}</el-button>
|
||
|
|
</span>
|
||
|
|
<div>
|
||
|
|
<div class="filter-container">
|
||
|
|
<el-form>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input v-model="recycleListQuery.searchRecycleMessage.title" size="mini" style="width: 180px;" placeholder="请输入标题" clearable />
|
||
|
|
<el-date-picker v-model="recycleListQuery.searchRecycleMessage.createTime" size="mini" style="width: 150px;" type="date" placeholder="请选择发送时间" clearable />
|
||
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleRecycleFilter">
|
||
|
|
查询
|
||
|
|
</el-button>
|
||
|
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMessage">
|
||
|
|
彻底删除
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<el-table ref="recycleList" :data="recycleMessage" style="width: 100%" border height="380" @row-click="onRecycleRowClick" @selection-change="handleRecycleSelectionChange">
|
||
|
|
<el-table-column type="selection" width="40" />
|
||
|
|
<el-table-column label="序号" type="index" width="50" />
|
||
|
|
<el-table-column label="通知标题" prop="title" />
|
||
|
|
<el-table-column label="发送人" prop="createBy" width="100" />
|
||
|
|
<el-table-column label="发送时间" prop="createTime" />
|
||
|
|
<el-table-column label="查看" width="50" type="expand">
|
||
|
|
<template slot-scope="props">
|
||
|
|
<el-form label-position="left" inline>
|
||
|
|
<span>{{ props.row.content }}</span>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<pagination v-show="recycleMessageTotal>0" :total="recycleMessageTotal" :page-num.sync="recycleListQuery.pageNum" :page-row.sync="recycleListQuery.pageRow" @pagination="getRecycleList" />
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import Pagination from '@/components/Pagination'
|
||
|
|
import { settingReadMessage } from '@/api/message'
|
||
|
|
export default {
|
||
|
|
name: 'Message',
|
||
|
|
components: { Pagination },
|
||
|
|
props: {
|
||
|
|
result: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
messageInfo: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeName: 'first',
|
||
|
|
openStatus: this.result,
|
||
|
|
userId: this.$store.getters.userId,
|
||
|
|
systemMessage: [],
|
||
|
|
systemMessageCount: 0,
|
||
|
|
readMessage: [],
|
||
|
|
readMessageTotal: 0,
|
||
|
|
readMessageCount: 0,
|
||
|
|
readListQuery: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageRow: 20,
|
||
|
|
searchReadMessage: {}
|
||
|
|
},
|
||
|
|
readMultipleSelection: [],
|
||
|
|
recycleMessage: [],
|
||
|
|
recycleMessageTotal: 0,
|
||
|
|
recycleMessageCount: 0,
|
||
|
|
recycleListQuery: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageRow: 20,
|
||
|
|
searchRecycleMessage: {}
|
||
|
|
},
|
||
|
|
recycleMultipleSelection: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
result(val) {
|
||
|
|
this.openStatus = val
|
||
|
|
},
|
||
|
|
messageInfo(val) {
|
||
|
|
if (val.length > 0) {
|
||
|
|
this.systemMessage = val[0]
|
||
|
|
this.systemMessageCount = this.systemMessage.length
|
||
|
|
this.readMessageCount = val[1]
|
||
|
|
this.recycleMessageCount = val[2]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
click() {
|
||
|
|
},
|
||
|
|
doClose() {
|
||
|
|
this.$emit('dialogData', false)
|
||
|
|
},
|
||
|
|
settingReadMessage(val) {
|
||
|
|
settingReadMessage(this.userId, val.id)
|
||
|
|
},
|
||
|
|
onSystemRowClick(row) {
|
||
|
|
this.$refs.systemList.toggleRowExpansion(row)
|
||
|
|
},
|
||
|
|
onReadRowClick(row) {
|
||
|
|
this.$refs.readList.toggleRowExpansion(row)
|
||
|
|
},
|
||
|
|
onRecycleRowClick(row) {
|
||
|
|
this.$refs.recycleList.toggleRowExpansion(row)
|
||
|
|
},
|
||
|
|
handleReadSelectionChange: function(val) {
|
||
|
|
this.readMultipleSelection = val
|
||
|
|
},
|
||
|
|
handleRecycleSelectionChange: function(val) {
|
||
|
|
this.recycleMultipleSelection = val
|
||
|
|
},
|
||
|
|
tabsClick(tab) {
|
||
|
|
if (tab.name === 'first') {
|
||
|
|
this.api({
|
||
|
|
url: '/message/getAllMessageByUserId',
|
||
|
|
method: 'get',
|
||
|
|
params: {
|
||
|
|
userId: this.userId
|
||
|
|
}
|
||
|
|
}).then(data => {
|
||
|
|
const dataJSON = JSON.parse(data)
|
||
|
|
this.systemMessage = dataJSON[0]
|
||
|
|
this.systemMessageCount = this.systemMessage.length
|
||
|
|
this.readMessageCount = dataJSON[1]
|
||
|
|
this.recycleMessageCount = dataJSON[2]
|
||
|
|
})
|
||
|
|
} else if (tab.name === 'second') {
|
||
|
|
this.getReadList()
|
||
|
|
} else if (tab.name === 'third') {
|
||
|
|
this.getRecycleList()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getReadList() {
|
||
|
|
this.api({
|
||
|
|
url: '/message/readList',
|
||
|
|
method: 'get',
|
||
|
|
params: this.readListQuery
|
||
|
|
}).then(data => {
|
||
|
|
this.readMessage = data.list
|
||
|
|
this.readMessageTotal = data.totalCount
|
||
|
|
this.systemMessageCount = data.systemMessageCount
|
||
|
|
this.readMessageCount = data.readMessageCount
|
||
|
|
this.recycleMessageCount = data.recycleMessageCount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleReadFilter() {
|
||
|
|
this.readListQuery.pageNum = 1
|
||
|
|
this.getReadList()
|
||
|
|
},
|
||
|
|
moveToRecycle() {
|
||
|
|
if (this.readMultipleSelection.length === 0) {
|
||
|
|
this.$message.error('请选中需要删除的数据！')
|
||
|
|
return false
|
||
|
|
} else {
|
||
|
|
this.$confirm('删除的记录将会被移动到回收站，确定要删除吗？', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
showCancelButton: true,
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
let ids = ''
|
||
|
|
for (let i = 0; i < this.readMultipleSelection.length; i++) {
|
||
|
|
ids = this.readMultipleSelection[i].id + ',' + ids
|
||
|
|
if (i + 1 === this.readMultipleSelection.length) {
|
||
|
|
ids = ids.substring(0, ids.length - 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.api({
|
||
|
|
url: '/message/moveToRecycle',
|
||
|
|
method: 'post',
|
||
|
|
data: {
|
||
|
|
userId: this.userId,
|
||
|
|
ids: ids
|
||
|
|
}
|
||
|
|
}).then(() => {
|
||
|
|
this.$message.success('删除成功。')
|
||
|
|
this.getReadList()
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
this.$message.info('已取消删除')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getRecycleList() {
|
||
|
|
this.api({
|
||
|
|
url: '/message/recycleList',
|
||
|
|
method: 'get',
|
||
|
|
params: this.recycleListQuery
|
||
|
|
}).then(data => {
|
||
|
|
this.recycleMessage = data.list
|
||
|
|
this.recycleMessageTotal = data.totalCount
|
||
|
|
this.systemMessageCount = data.systemMessageCount
|
||
|
|
this.readMessageCount = data.readMessageCount
|
||
|
|
this.recycleMessageCount = data.recycleMessageCount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleRecycleFilter() {
|
||
|
|
this.recycleListQuery.pageNum = 1
|
||
|
|
this.getRecycleList()
|
||
|
|
},
|
||
|
|
deleteMessage() {
|
||
|
|
if (this.recycleMultipleSelection.length === 0) {
|
||
|
|
this.$message.error('请选中需要删除的数据！')
|
||
|
|
return false
|
||
|
|
} else {
|
||
|
|
this.$confirm('确定要永久删除吗？', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
showCancelButton: true,
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
let ids = ''
|
||
|
|
for (let i = 0; i < this.recycleMultipleSelection.length; i++) {
|
||
|
|
ids = this.recycleMultipleSelection[i].id + ',' + ids
|
||
|
|
if (i + 1 === this.recycleMultipleSelection.length) {
|
||
|
|
ids = ids.substring(0, ids.length - 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.api({
|
||
|
|
url: '/message/deleteUserMessage',
|
||
|
|
method: 'delete',
|
||
|
|
params: {
|
||
|
|
userId: this.userId,
|
||
|
|
ids: ids
|
||
|
|
}
|
||
|
|
}).then(() => {
|
||
|
|
this.$message.success('删除成功。')
|
||
|
|
this.getRecycleList()
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
this.$message.info('已取消删除')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|