FE-app-oam/pages/warningLog/index.vue

<template>
	<view id="warningLog">
		<view class="query-max-big-box">
			<view class="query-input-box">
				<input class="query-input" v-model="queryParams.searchValue"   
				style="width:180rpx;" :maxlength="10"
				type="text"  placeholder="输入名称" placeholder-style="color:#999;">
			</view>
			<view class="query-input-box">
				<picker @change="typeListChange" :value="typeListIndex" :range="typeList">
					<view style="width:160rpx;" class="query-input"
					:class="!typeName?'query-input-placeholder':''">
						{{typeName?typeName:'选择类型'}}
					</view>
				</picker>
			</view>
			<view class="query-button-one" @click="handleQuery">查询</view>
			<view class="query-button-two" @click="resetQuery">重置</view>
		</view>
		<view class="list-max-big-box">
			<view class="list-max-big-null" v-if="!dataList[0]">暂无数据</view>
			<view class="for-list-max-big-box" @click="shadeOpen(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-item-text-box">
					<view class="name-box">{{item.title}}</view>
					<view class="num-box">
						{{item.alarmType==1?'钉钉':
						(item.alarmType==2?'微信':
						(item.alarmType==3?'邮件':
						(item.alarmType==4?'电话':
						(item.alarmType==5?'短信':''))))}}
					</view>
					<view class="type-box" :class="item.state?'colorA':'colorB'">
						{{item.state?'成功':'失败'}}
					</view>
				</view>
				<view class="for-item-num">消息内容：{{item.content}}</view>
				<view class="for-item-address">发送时间：{{ parseTime(item.createTime,"{y}-{m}-{d} {h}:{i}") }}</view>
			</view>
		</view>
		<view class="pagination-max-big-box">
			<view class="pagination-button" @click="paginationButton(1)"
			:class="queryParams.page == 1 ? 'pagination-color':''">上一页</view>
			<view class="pagination-num">{{queryParams.page}}/{{pages}}</view>
			<view class="pagination-button" @click="paginationButton(2)"
			:class="queryParams.page == pages || queryParams.page > pages ? 'pagination-color':''">下一页</view>
		</view>
		<view class="info-positon-max-big-box" v-if="shadeType">
			<view class="info-positon-big-box">
				<view class="info-positon-box">
					<view class="info-positon-title">详情</view>
					<view class="info-positon-text-box">
						<view>标题：</view>
						<view>{{shadeData.title}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>方式：</view>
						<view>
							{{shadeData.alarmType==1?'钉钉':
							(shadeData.alarmType==2?'微信':
							(shadeData.alarmType==3?'邮件':
							(shadeData.alarmType==4?'电话':
							(shadeData.alarmType==5?'短信':''))))}}
						</view>
					</view>
					<view class="info-positon-text-box">
						<view>状态：</view>
						<view>{{shadeData.state?'成功':'失败'}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>消息内容：</view>
						<view>{{shadeData.content}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>接收人：</view>
						<view>{{shadeData.receiver}}</view>
					</view>
					<view class="info-positon-text-box">
						<view>发送时间：</view>
						<view>{{ parseTime(shadeData.createTime,"{y}-{m}-{d} {h}:{i}") }}</view>
					</view>
					<view class="info-positon-text-box" v-if="!shadeData.state">
						<view>失败原因：</view>
						<view>{{ shadeData.failDesc }}</view>
					</view>
				</view>
				<view class="info-positon-button-box">
					<view @click="shadeOff">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { itoAlarmLogList } from '@/api/index.js'
	export default {
	  data() {
	    return {
				//分类下拉列表
				typeDataList:[
          {name:"钉钉",id:1,},
          {name:"微信",id:2,},
          {name:"邮件",id:3,},
          {name:"电话",id:4,},
          {name:"短信",id:5,},
				],
				typeList:['钉钉','微信','邮件','电话','短信',],
				typeListIndex:0,
				typeName:'',
				//列表数据
				dataList:[],
				pages:0,
				queryParams:{
					page:1,
					pageSize:10,
					searchValue:'',
					alarmType:'',
				},
				//弹窗相关
				shadeType:false,
				shadeData:{},
			}
		},
		onLoad(option) {

		},
		onShow(){
			this.getList();
		},
		methods: {
			//开启弹窗
			shadeOpen(item){
				this.$set(this,'shadeData',item);
				this.$set(this,'shadeType',true);
			},
			//关闭弹窗
			shadeOff(){
				this.$set(this,'shadeType',false);
				this.$set(this,'shadeData',{});
			},
			//选中分类
			typeListChange(event){
				this.$set(this,'typeListIndex',event.target.value);
				this.$set(this,'typeName',this.typeDataList[event.target.value].name);
				this.$set(this.queryParams,'alarmType',this.typeDataList[event.target.value].id);
			},
			//查询按钮
			handleQuery(){
				this.$set(this.queryParams,'page',1);
				this.getList();
			},
			//重置按钮
			resetQuery(){
				this.$set(this,'typeListIndex',0);
				this.$set(this,'typeName','');
				this.$set(this,'queryParams',{
					page:1,
					pageSize:10,
					searchValue:'',
					alarmType:'',
				});
				this.getList();
			},
			//翻页
			paginationButton(type){
				if(type == 1){
					if(this.queryParams.page != 1){
						this.queryParams.page--
						this.getList();
					}
				}else if(type == 2){
					if(this.queryParams.page != this.pages && this.queryParams.page < this.pages){
						this.queryParams.page++
						this.getList();
					}
				}
			},
			//消息列表
			async getList(){
				const {data} = await itoAlarmLogList(this.queryParams);
				if(data.code==200){
					this.$set(this,'pages',data.data.pages);
					this.$set(this,'dataList',data.data.records);
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#warningLog{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.query-max-big-box{
			height:80rpx;
			background-color: #fff;
			display: flex;
			font-size:28rpx;
			.query-input-box{
				display: flex;
				margin:10rpx 0 0 10rpx;
				.query-input{
					padding:0 20rpx;
					height:60rpx;
					line-height:60rpx;
					font-size:26rpx;
					border-radius:8rpx;
					border:1px solid #dedede;
				}
				.query-input-placeholder{
					color: #999 !important;
				}
			}
			.query-button-one{
				margin:10rpx 0 0 10rpx;
				background-color: #0183FA;
				color:#fff;
				border-radius:8rpx;
				width:140rpx;
				height:62rpx;
				line-height:62rpx;
				text-align: center;
				font-size:28rpx;
			}
			.query-button-two{
				margin:10rpx;
				background-color: #999;
				color:#fff;
				border-radius:8rpx;
				width:140rpx;
				height:62rpx;
				line-height:62rpx;
				text-align: center;
				font-size:28rpx;
			}
			.query-button-three{
				margin:10rpx 10rpx 0 0;
				background-color: #409EFF;
				color:#fff;
				border-radius:8rpx;
				width:100rpx;
				height:62rpx;
				line-height:62rpx;
				text-align: center;
				font-size:28rpx;
			}
		}
		.list-max-big-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			margin:20rpx;
			.list-max-big-null{
				font-size:28rpx;
				text-align:center;
				line-height:100rpx;
				color:#999;
			}
			.for-list-max-big-box{
				background-color: #fff;
				color:#333;
				font-size:28rpx;
				margin-bottom:20rpx;
				padding:20rpx;
				border-radius:16rpx;
				.for-item-text-box{
					display: flex;
					.name-box{
						flex:1;
						line-height:50rpx;
					}
					.num-box{
						text-align: center;
						width:140rpx;
						line-height:50rpx;
					}
					.type-box{
						text-align: center;
						width:140rpx;
						line-height:50rpx;
					}
					.colorA{
						color:#14AE10;
					}
					.colorB{
						color:#FF6666;
					}
				}
				.for-item-num{
					line-height:50rpx;
					/*单行省略号*/
					display:block;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
				.for-item-address{
					line-height:50rpx;
				}
			}
		}
		.pagination-max-big-box{
			height:80rpx;
			background-color: #fff;
			display: flex;
			.pagination-button{
				margin:10rpx;
				border-radius:8rpx;
				width:140rpx;
				height:60rpx;
				line-height:60rpx;
				text-align: center;
				font-size:28rpx;
				background-color:#0183FA;
				color:#fff;
			}
			.pagination-num{
				flex:1;
				text-align: center;
				line-height:80rpx;
			}
			.pagination-color{
				background-color: #dedede;
			}
		}
		
		.info-positon-max-big-box{
			z-index:100;
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,0.6);
			.info-positon-big-box{
				width:80%;
				height:80%;
				margin-left:10%;
				margin-top:10%;
				border-radius:16rpx;
				display: flex;
				flex-direction:column;
				overflow: hidden;
				background-color: #fff;
				.info-positon-box{
					flex:1;
					overflow-x: hidden;
					overflow-y: scroll;
					.info-positon-title{
						height:80rpx;
						line-height:80rpx;
						text-align: center;
						border-bottom:1px solid #dedede;
						margin-bottom:20rpx;
						font-size:32rpx;
					}
					.info-positon-text-box{
						display: flex;
						padding:10rpx 40rpx;
						view:nth-child(1){
							width:140rpx;
							font-size:28rpx;
						}
						view:nth-child(2){
							width:380rpx;
							word-wrap: break-word;
							font-size:28rpx;
						}
					}
				}
				.info-positon-button-box{
					border-top:1px solid #dedede;
					view{
						background-color: #999;
						color:#fff;
						text-align: center;
						line-height:60rpx;
						height:60rpx;
						font-size:28rpx;
						width:160rpx;
						margin:10rpx auto;
						border-radius:12rpx;
					}
				}
			}
		}
	}
</style>