埃驰前端
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.
 
 
 
 

337 lines
9.7 KiB

<template>
<!-- v-if="errorLogs.length>0" -->
<div>
<el-dialog :visible.sync="dialogVisible" width="80%" top="8vh" append-to-body>
<div slot="title">
<span style="padding-right: 10px;">消息列表</span>
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-table
v-loading="hasReadLoading"
:data="tableDataHasRead"
height="400"
style="width: 100%"
@sort-change="sortChange"
@row-click="handleRowHasReadClick"
>
<el-table-column
prop="title"
label="标题"
width="180"
align="center"
sortable="custom"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="hasRead"
label="状态"
align="center"
sortable="custom"
>
<template slot-scope="scope" >
<span v-if="scope.row.hasRead == true">已读</span>
<span v-else-if="scope.row.hasRead == false">未读</span>
</template>
</el-table-column>
<el-table-column
prop="readTime"
label="已读时间"
width="180"
align="center"
sortable="custom"
:show-overflow-tooltip="true"
/>
</el-table>
</el-col>
<el-col :span="12">
<el-table
v-loading="notReadLoading"
:data="tableData"
height="400"
style="width: 100%"
@sort-change="sortChange"
@row-click="handleRowClick"
>
<el-table-column
prop="title"
label="标题"
width="180"
align="center"
sortable="custom"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="hasRead"
label="状态"
align="center"
sortable="custom"
>
<template slot-scope="scope" >
<span v-if="scope.row.hasRead == true">已读</span>
<span v-else-if="scope.row.hasRead == false">未读</span>
</template>
</el-table-column>
<el-table-column
prop="creationTime"
label="创建时间"
width="180"
align="center"
sortable="custom"
:show-overflow-tooltip="true"
/>
</el-table>
</el-col>
</el-row>
<!-- <div class="Footer">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.currentPage"
:page-sizes="[10, 15, 20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<el-button
type="primary"
size="mini"
style="margin-left: 10px; background-color: #409eff"
>确定</el-button
>
</div> -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="close">关 闭</el-button>
<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
</span>
<el-dialog
width="30%"
:title="details.titleDialog"
:visible.sync="innerVisible"
append-to-body>
<el-descriptions direction="vertical" :column="2" border v-loading="DialogLoading">
<el-descriptions-item label="消息标题">{{details.title}}</el-descriptions-item>
<el-descriptions-item label="内容">{{details.content}}</el-descriptions-item>
<el-descriptions-item label="消息类别">{{details.messageType}}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{details.sendTime}}</el-descriptions-item>
</el-descriptions>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="innerVisible = false"> </el-button>
</span>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import { userNotifyNotReadList, userNotifyHasRead, userNotifyMessageUpdate, notifyMessage, getPageList } from "@/api/wms-api"
import { formatTimeStrToStr } from "@/utils/formatTime"
export default {
name: 'News',
data() {
return {
userId: '',
innerVisible: false,
details: {
titleDialog: '',
title: '',
content: '',
messageType: '',
sendTime: ''
},
hasReadLoading: false,
notReadLoading: false,
DialogLoading: false,
//总条数
total: 0,
//分页器
queryInfo: {
//当前页数
currentPage: 1,
//每页条数
pagesize: 20,
Sorting: "",
},
tableData: [],
tableDataHasRead:[],
}
},
props:{
dialogVisible: {
type: Boolean,
default: () => {
return false
}
},
},
computed: {
errorLogs() {
return this.$store.getters.errorLogs
}
},
mounted () {
this.userId = this.$store.getters.currentUserInfo.id
// todo-new:
// this.getList()
},
methods: {
getList(){
// --------未读列表-------
this.notReadLoading = true
userNotifyNotReadList(this.userId).then(res => {
this.tableData = res
this.tableData.forEach(item => {
if (item.creationTime) {
item.creationTime = formatTimeStrToStr(item.creationTime)
}
})
this.notReadLoading = false
}).catch(err => {
console.log(err)
this.notReadLoading = false
})
// --------已读列表-------
this.hasReadLoading = true
userNotifyHasRead(this.userId).then(res => {
this.tableDataHasRead = res
this.tableDataHasRead.forEach(item => {
if (item.readTime) {
item.readTime = formatTimeStrToStr(item.readTime)
}
})
this.hasReadLoading = false
}).catch(err => {
console.log(err)
this.hasReadLoading = false
})
},
//选择每页条数分页
handleSizeChange(val) {
this.queryInfo.pagesize = val;
this.getList();
},
//选择当前页分页
handleCurrentChange(val) {
this.queryInfo.currentPage = val;
this.getList();
},
//排序
sortChange(data) {
const { prop, order } = data;
if (!prop || !order) {
this.queryInfo.Sorting = "";
this.handleFilter();
return;
}
this.queryInfo.Sorting = prop + " " + order;
this.handleFilter();
},
//点击table行渲染权限模板
handleRowClick(row, column, event) {
let that = this
this.innerVisible = true
this.details.titleDialog = row.title
this.DialogLoading = true
notifyMessage({id: row.messageId}, row.messageId).then(res => {
this.details.title = res.title
this.details.content = res.content
this.details.messageType = res.messageType
this.details.sendTime = formatTimeStrToStr(res.sendTime)
// 查询消息类型对应数据
let params = {
sorting: null,
maxResultCount: 1000,
skipCount: 0,
condition: {
filters: null
}
}
getPageList(params,'message/message-type').then(resType => {
resType.items.forEach(item => {
if (item.messageTypeCode == res.messageType) {
that.details.messageType = item.messageTypeName
}
})
this.DialogLoading = false
}).catch(err => {
this.DialogLoading = false
console.log(err)
})
userNotifyMessageUpdate(row.id).then(res => {
that.getList();
that.$emit('getNoReadCount', that.userId)
}).catch(err => {
this.notReadLoading = false
console.log(err)
})
}).catch(err => {
console.log(err)
this.DialogLoading = false
})
// this.$router.push('/taskManage/InspectJob')
},
handleRowHasReadClick(row, column, event) {
let that = this
this.innerVisible = true
this.details.titleDialog = row.title
this.DialogLoading = true
notifyMessage({id: row.messageId}, row.messageId).then(res => {
this.details.title = res.title
this.details.content = res.content
this.details.messageType = res.messageType
this.details.sendTime = formatTimeStrToStr(res.sendTime)
// 查询消息类型对应数据
let params = {
sorting: null,
maxResultCount: 1000,
skipCount: 0,
condition: {
filters: null
}
}
getPageList(params,'message/message-type').then(resType => {
resType.items.forEach(item => {
if (item.messageTypeCode == res.messageType) {
that.details.messageType = item.messageTypeName
}
})
this.DialogLoading = false
}).catch(err => {
console.log(err)
this.DialogLoading = false
})
}).catch(err => {
console.log(err)
this.DialogLoading = false
})
},
close() {
this.$emit('close')
}
}
}
</script>
<style lang="scss" scoped>
.message-title {
font-size: 16px;
color: #333;
font-weight: bold;
padding-right: 8px;
}
.Footer {
padding: 40px 40px;
display: flex;
justify-content: flex-end;
::v-deep button {
background-color: #fff;
}
::v-deep .number {
background-color: #fff;
}
}
</style>