realty/virgo.wzfrontend/console/src/views/message/list.vue

<template>
	<div class="hui-flex hui-content">
		<div class="hui-content-title">
			<div class="hui-title-item active">消息通知</div>
		</div>
		<div class="hui-flex-box hui-flex hui-table">
			<div class="hui-flex-box">
				<el-table :data="tableData" row-key="id" border height="100%">
					<el-table-column label="序号" width="50">
						<template slot-scope="scope">
							{{scope.$index + 1}}
						</template>
					</el-table-column>
					<el-table-column label="消息内容">
						<template slot-scope="scope">
							<div class="hui-ellipsis">
								{{scope.row.message}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="是否已读" width="180">
						<template slot-scope="scope">
							<div class="hui-table-tag">
								<div class="hui-tag hui-tag-info" v-if="scope.row.viewed">已读</div>
								<div class="hui-tag hui-tag-warning" v-else>未读</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="时间" prop="sentTime" width="180"></el-table-column>
					<el-table-column label="消息类型" prop="messageType" width="150">
						<template slot-scope="scope">
							<div class="hui-table-tag">
								<div class="hui-tag">
									<div>{{messageType(scope.row.messageType).name}}</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column width="150" label="操作">
						<template slot-scope="scope">
							<span class="table-operation" @click="detail(scope.row)">
								详情
							</span>
						</template>
					</el-table-column>
					<template slot="empty">
						<empty description="暂无数据"></empty>
					</template>
				</el-table>
			</div>
			<div class="hui-content-pagination">
				<el-pagination :page-size="pageSize" :pager-count="9" layout="prev, pager, next" :total="totalCount"
					@current-change="currentChange">
				</el-pagination>
			</div>
		</div>
		<el-drawer title="消息详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer" :type="item.messageType" :detail="item" @close="drawer = false">
			</detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		getMessagePageListByQuery
	} from '@/httpApi/message'
	import detail from '@/components/message/detail'
	export default {
		data() {
			return {
				tableData: [],
				pageIndex: 1,
				pageSize: 15,
				totalCount: 0,
				item: {},
				drawer: false
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				let data = {
					projectId: this.$store.getters.project.id,
					organizationId: this.$store.getters.organization.id,
					userId: this.$store.getters.user.userId
				}
				getMessagePageListByQuery(this.pageIndex, this.pageSize, data).then(res => {
					if (res.state) {
						this.tableData = res.data.dataList.map(node => {
							return Object.assign(node, JSON.parse(node.json));
						});
						this.totalCount = res.data.totalCount;
					}
				})
			},
			detail(item) {
				if (!item.viewed) this.$msg.viewed(item.id, this.init);
				this.item = item;
				this.drawer = true;
			},
			messageType(type) {
				return this.$msg.messageType.filter(item => item.id === type)[0];
			},
			currentChange(pageIndex) {
				this.pageIndex = pageIndex;
				this.init();
			}
		},
		components: {
			detail
		},
	}
</script>

<style lang="scss">
</style>