uni-halo/pagesB/logs/logs.vue

<template>
	<view class="app-page flex flex-col">
		<view v-if="loading != 'success'" class="loading-wrap">
			<tm-skeleton model="list"></tm-skeleton>
			<tm-skeleton model="list"></tm-skeleton>
			<tm-skeleton model="list"></tm-skeleton>
			<tm-skeleton model="list"></tm-skeleton>
		</view>

		<view class="page-content pa-24 flex flex-col" v-else>
			<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无任何日志"></tm-empty></view>

			<block v-else>
				<block v-for="(item, index) in dataList" :key="index">
					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
						<view class="card mb-24 bg-white pa-24 round-3">
							<view class="border-b-1 pb-20 text-size-l text-weight-b">
								<tm-tags :dense="true" :shadow="0" color="bg-gradient-light-blue-accent" size="s" model="fill">ID：{{ item.id }}</tm-tags>
								<tm-tags class="ml-24" :shadow="0" :dense="true" color="bg-gradient-orange-accent" size="s" model="fill">
									类型：{{ item.type | formatLogType }}
								</tm-tags>
								<tm-tags class="ml-24" v-if="false" :shadow="0" :dense="true" color="bg-gradient-blue-grey-accent" size="s" model="fill">
									关键值：{{ item.logKey }}
								</tm-tags>
							</view>
							<view class="mt-20 text-size-m">
								<view v-if="false" class="desc-item flex  ">
									<view class="desc-label text-grey-darken-2">日志类型</view>
									<view class="desc-value">{{ item.type | formatLogType }}</view>
								</view>
								<view class="desc-item flex mt-12">
									<view class="desc-label text-grey-darken-2">关键值</view>
									<view class="desc-value">{{ item.logKey }}</view>
								</view>
								<view class="desc-item flex flex-top-start mt-12">
									<view class="desc-label text-grey-darken-2">IP地址</view>
									<view class="desc-value">{{ item.ipAddress }}</view>
								</view>

								<view class="desc-item flex mt-12">
									<view class="desc-label text-grey-darken-2">日志内容</view>
									<view class="desc-value">{{ item.content }}</view>
								</view>
								<view class="desc-item flex mt-12">
									<view class="desc-label text-grey-darken-2">操作时间</view>
									<view class="desc-value">{{ item.time }}</view>
								</view>
							</view>
						</view>
					</tm-translate>
				</block>

				<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
				<tm-flotbutton size="m" icon="icon-delete" color="bg-gradient-red-accent" @click="fnOnClear"></tm-flotbutton>
				<view class="load-text ">{{ loadMoreText }}</view>
			</block>
		</view>
	</view>
</template>

<script>
	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
	export default {
		components: {
			tmSkeleton,
			tmEmpty,
			tmButton,
			tmTags,
			tmFlotbutton,
			tmTranslate
		},
		data() {
			return {
				loading: 'loading',

				queryParams: {
					size: 8,
					page: 0,
					sort: undefined
				},

				result: {},
				dataList: [],
				total: 0,
				isLoadMore: false,
				loadMoreText: '加载中...'
			};
		},
		filters: {
			formatLogType(val) {
				const logTypes = {
					BLOG_INITIALIZED: {
						value: 0,
						text: '博客初始化'
					},
					POST_PUBLISHED: {
						value: 5,
						text: '文章发布'
					},
					POST_EDITED: {
						value: 15,
						text: '文章修改'
					},
					POST_DELETED: {
						value: 20,
						text: '文章删除'
					},
					LOGGED_IN: {
						value: 25,
						text: '用户登录'
					},
					LOGGED_OUT: {
						value: 30,
						text: '注销登录'
					},
					LOGIN_FAILED: {
						value: 35,
						text: '登录失败'
					},
					PASSWORD_UPDATED: {
						value: 40,
						text: '修改密码'
					},
					PROFILE_UPDATED: {
						value: 45,
						text: '资料修改'
					},
					SHEET_PUBLISHED: {
						value: 50,
						text: '页面发布'
					},
					SHEET_EDITED: {
						value: 55,
						text: '页面修改'
					},
					SHEET_DELETED: {
						value: 60,
						text: '页面删除'
					},
					MFA_UPDATED: {
						value: 65,
						text: '两步验证'
					},
					LOGGED_PRE_CHECK: {
						value: 70,
						text: '登录验证'
					}
				};
				return logTypes[val].text;
			}
		},

		onLoad() {
			this.fnSetPageTitle('日志管理');
		},
		created() {
			this.fnGetData();
		},
		onPullDownRefresh() {
			this.queryParams.page = 0;
			this.dataList = [];
			this.fnGetData();
		},
		onReachBottom(e) {
			if (this.result.hasNext) {
				this.queryParams.page += 1;
				this.isLoadMore = true;
				this.fnGetData();
			} else {
				uni.showToast({
					icon: 'none',
					title: '没有更多数据了'
				});
			}
		},
		methods: {
			fnGetData() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				// 设置状态为加载中
				if (!this.isLoadMore) {
					this.loading = 'loading';
				}
				this.loadMoreText = '加载中...';
				this.$httpApi.admin
					.getLogsListByPage(this.queryParams)
					.then(res => {
						if (res.status == 200) {
							this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
							this.result = res.data;
							this.total = res.data.total;
							const _tempDataList = res.data.content.map(item => {
								item['time'] = uni.$tm.dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
								return item;
							});
							if (this.isLoadMore) {
								this.dataList = this.dataList.concat(_tempDataList);
							} else {
								this.dataList = _tempDataList;
							}
							this.loading = 'success';
						} else {
							uni.$tm.toast('加载失败，请重试！');
							thi.loading = 'error';
						}
					})
					.catch(err => {
						console.error(err);
						uni.$tm.toast('加载失败，请重试！');
						this.loading = 'error';
						this.loadMoreText = '加载失败，请下拉刷新！';
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							uni.stopPullDownRefresh();
						}, 300);
					});
			},

			// 删除
			fnOnClear() {
				uni.$eShowModal({
						title: '提示',
						content: `您确定要清空所有的日志记录吗？`,
						showCancel: true,
						cancelText: '否',
						cancelColor: '#999999',
						confirmText: '是',
						confirmColor: '#03a9f4'
					})
					.then(res => {
						uni.showLoading({
							mask: true,
							title: '正在清空...'
						});
						this.$httpApi.admin
							.deleteAllLogs()
							.then(res => {
								if (res.status == 200) {
									uni.$tm.toast('操作成功！');
									setTimeout(() => {
										this.queryParams.page = 0;
										this.dataList = [];
										this.fnGetData();
									}, 1000);
								} else {
									uni.$tm.toast('操作失败，请重试！');
								}
							})
							.catch(err => {
								console.error(err);
								uni.$tm.toast('操作失败，请重试！');
							});
					})
					.catch(err => {});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100vw;
		min-height: 100vh;
	}

	.loading-wrap {
		padding: 24rpx;
	}

	.page-content {}

	.content-empty {
		width: 100vw;
		height: 65vh;
	}

	.card {
		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
	}

	.desc-item {
		.desc-label {
			width: 150rpx;
			position: relative;

			&::after {
				content: '：';
				position: absolute;
				right: 0px;
				top: 0rpx;
			}
		}

		.desc-value {
			word-wrap: break-word;
			word-break: break-all;
			padding-left: 6rpx;
		}
	}
</style>