<template>
|
<div class="msgNotificationDialog-style">
|
<el-dialog :visible.sync="isShow" :title="title" width="1050px" :modal-append-to-body="false"
|
:close-on-click-modal="false">
|
<div class="msg-list">
|
<span>消息类型：</span>
|
<el-select v-model="messageType" placeholder="请选择" size="small" @change="queryData">
|
<el-option v-for="item in msgTypeArr" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
<div v-if="msgList.length" style="overflow-y: hidden;">
|
<div v-infinite-scroll="load" infinite-scroll-disabled="disabled"
|
infinite-scroll-distance="10">
|
<msg-notification-module :list="msgList" @clickInfo="getDetails" @del="handleDel">
|
</msg-notification-module>
|
</div>
|
<p v-if="loading" class="loading-s">加载中...</p>
|
<p v-if="noMore" class="loading-s">没有更多了</p>
|
</div>
|
<el-empty v-if="!msgList.length" description="暂无数据"></el-empty>
|
</div>
|
</el-dialog>
|
<msg-info-dialog ref="msgInfoDialog" :dialogVisible.sync="msgInfoDialogVisible" title="消息详情"
|
@handleInventory="handleInventory" :operItem="operItem">
|
</msg-info-dialog>
|
</div>
|
</template>
|
|
<script>
|
import msgNotificationModule from '@/views/layout/module/msgNotificationModule.vue'
|
import msgInfoDialog from '@/views/layout/components/msgInfoDialog.vue'
|
import msgApi from '@/api/messages'
|
import msgTypeArr from '@/utils/constant/msgTypeArr'
|
export default {
|
name: "msgNotificationDialog",
|
components: {
|
msgNotificationModule,
|
msgInfoDialog
|
},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
messageType: null,
|
pages: 1,
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
msgList: [],//消息列表
|
loading: false,
|
operItem: {},//当前操作项
|
msgInfoDialogVisible: false,//消息详情弹窗状态
|
msgTypeArr: msgTypeArr,
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
dialogVisible: function (newShow, oldShow) {
|
this.isShow = newShow
|
if (this.isShow) {
|
//获取站内消息列表
|
this.queryData();
|
}
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
isShow: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:dialogVisible', newDialogShow)
|
if (!newDialogShow) {
|
this.initData();
|
}
|
},
|
},
|
computed: {
|
noMore() {
|
return this.pageNum >= this.pages;
|
},
|
disabled() {
|
return this.loading || this.noMore
|
}
|
},
|
methods: {
|
/**
|
* 初始化数据
|
*/
|
initData() {
|
this.messageType = null;
|
this.pageDataReset();
|
},
|
/**
|
* 获取消息列表
|
*/
|
async getMsgList() {
|
const params = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
messageType: this.messageType,
|
}
|
try {
|
const res = await msgApi.getMsgList(params)
|
const _data = res.data
|
console.log(res)
|
if (res.code === '0' && _data.list) {
|
this.msgList = this.msgList.concat(_data.list)
|
this.total = _data.total
|
this.pages = _data.total > 0 ? Math.ceil(_data.total / this.pageSize) : 1
|
}
|
} catch (error) {
|
this.isShow = false
|
this.loading = false
|
}
|
},
|
/**
|
* 加载更多
|
*/
|
load() {
|
this.loading = true
|
setTimeout(() => {
|
this.pageNum += 1;
|
this.getMsgList();
|
this.loading = false
|
}, 500)
|
},
|
/**
|
* 查看详情
|
*/
|
async getDetails(data) {
|
this.operItem = data;
|
console.log(this.getMenuIsExist('orderMgtList'));
|
//消息状态为未读的情况下
|
if (data.readFlag === '0') {
|
this.setMsgStatus(data);
|
}
|
this.goPage(data);
|
},
|
/**
|
* 根据消息类型实现不同页面跳转
|
* 消息类型：1 商品推送，2 文章推送，3 系统消息，4 活动消息，5 账号通知 6 物流消息 7任务 8预警
|
*/
|
goPage(obj) {
|
const { messageType, promotionId, prodNo } = obj;
|
switch (messageType) {
|
case '6':
|
if (this.getMenuIsExist('orderMgtList').length) {
|
this.$router.push({ name: 'orderMgtList', query: { prodNo: prodNo } })
|
this.updateDialogStatus(false);
|
} else {
|
this.$message.warning('您当前暂无分配权限，请联系管理员！')
|
}
|
break;
|
case '7':
|
this.msgInfoDialogVisible = true;
|
break;
|
case '8':
|
if (this.getMenuIsExist('channelInventory').length) {
|
this.$router.push({ name: 'channelInventory', query: { promotionId: promotionId } })
|
this.updateDialogStatus(false);
|
} else {
|
this.$message.warning('您当前暂无分配权限，请联系管理员！')
|
}
|
break;
|
|
}
|
},
|
/**
|
* 更改消息状态为已读状态
|
*/
|
getMenuIsExist(name) {
|
return this.$store.state.userTreeFlat.filter(v => {
|
return v.code === name
|
})
|
},
|
/**
|
* 更改消息状态为已读状态
|
*/
|
async setMsgStatus(obj) {
|
let params = {
|
id: obj.id,
|
promotionId: obj.promotionId
|
}
|
const res = await msgApi.updateMsgStatus(params)
|
if (res.code === '0') {
|
obj.readFlag = '1';
|
}
|
},
|
/**
|
* 删除消息
|
*/
|
async handleDel(id) {
|
let params = {
|
id: id
|
}
|
const res = await msgApi.deleteRecord(params)
|
if (res.code === '0') {
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.queryData();
|
}
|
},
|
/**
|
* 查询条件改变数据获取
|
*/
|
queryData() {
|
this.pageDataReset();
|
this.getMsgList();
|
},
|
/**
|
* 分页数据重置
|
*/
|
pageDataReset() {
|
this.total = 0;
|
this.pageNum = 1;
|
this.loading = false;
|
this.msgList = [];
|
},
|
/**
|
* 显示/隐藏loadding
|
*/
|
updateDialogStatus(bool) {
|
this.isShow = bool;
|
},
|
/**
|
* 消息详情页----点击【去分配】
|
*/
|
handleInventory() {
|
if (this.getMenuIsExist('commodityStocks').length) {
|
this.$router.push({ name: 'commodityStocks' })
|
this.updateDialogStatus(false);
|
this.msgInfoDialogVisible = false;
|
} else {
|
this.$message.warning('您当前暂无分配权限，请联系管理员！')
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.msg-list {
|
max-height: 500px;
|
overflow: auto;
|
padding: 0 15px;
|
> span {
|
font-size: 16px;
|
}
|
}
|
.loading-s {
|
text-align: center;
|
}
|
.msgNotificationDialog-style {
|
.el-dialog__body {
|
padding: 30px 10px !important;
|
}
|
}
|
</style>
|
