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

<template>
	<view id="networkComponent">
		<view class="query-max-big-box">
			<view class="query-input-box">
				<input class="query-input" v-model="queryParams.searchValue"   
				style="width:150rpx;" :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:130rpx;" 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 class="query-button-three" @click="addButton">新增</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="clickButton(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-item-text-box">
					<view class="name-box">{{item.moduleName}}</view>
					<view class="num-box">
						{{item.moduleType==1?'HTTP服务':
						(item.moduleType==2?'TCP服务':
						(item.moduleType==3?'MQTT服务':
						(item.moduleType==4?'MQTT客户端':'')))}}
					</view>
				</view>
				<view class="for-text" v-if="item.publicIp&&item.publicPort">
					<view>本地地址：</view>
					<view>{{item.publicIp}}:{{item.publicPort}}</view>
				</view>
				<view class="for-text" v-if="item.localIp&&item.localPort">
					<view>公网地址：</view>
					<view>{{item.localIp}}:{{item.localPort}}</view>
				</view>
				<view class="for-text">
					<view>说明：</view>
					<view>{{item.remark}}</view>
				</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-title">详情</view>
				<view class="info-positon-box">
					<view class="info-positon-text-box">
						<view class="info-positon-one">名称：</view>
						<view class="info-positon-two">{{shadeData.moduleName}}</view>
					</view>
					<view class="info-positon-text-box">
						<view class="info-positon-one">类型：</view>
						<view class="info-positon-two">
							{{shadeData.moduleType==1?'HTTP服务':
							(shadeData.moduleType==2?'TCP服务':
							(shadeData.moduleType==3?'MQTT服务':
							(shadeData.moduleType==4?'MQTT客户端':'')))}}
						</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType == 1 || shadeData.moduleType == 2 || shadeData.moduleType == 3">
						<view class="info-positon-one">本地地址：</view>
						<view class="info-positon-two">{{shadeData.localIp}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType == 1 || shadeData.moduleType == 2 || shadeData.moduleType == 3">
						<view class="info-positon-one">本地端口：</view>
						<view class="info-positon-two">{{shadeData.localPort}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType">
						<view class="info-positon-one">{{shadeData.moduleType==4?'远程地址':'公网地址'}}：</view>
						<view class="info-positon-two">{{shadeData.publicIp}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType">
						<view class="info-positon-one">{{shadeData.moduleType==4?'远程端口':'公网端口'}}：</view>
						<view class="info-positon-two">{{shadeData.publicPort}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType == 1 || shadeData.moduleType == 4">
						<view class="info-positon-one">{{shadeData.moduleType==4?'用户名：':'认证key：'}}：</view>
						<view class="info-positon-two">{{shadeData.authKey}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType == 1 || shadeData.moduleType == 4">
						<view class="info-positon-one">{{shadeData.moduleType==4?'密码：':'密匙：'}}：</view>
						<view class="info-positon-two">{{shadeData.authPassword}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType==2">
						<view class="info-positon-one">粘拆包：</view>
						<view class="info-positon-two">
							{{shadeData.dataPacket==0?'不处理':
							(shadeData.dataPacket==1?'分隔符':
							(shadeData.dataPacket==2?'自定义脚本':
							(shadeData.dataPacket==3?'固定长度':
							(shadeData.dataPacket==4?'长度字段':''))))}}
						</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType==2 && shadeData.dataPacket!==0">
						<view class="info-positon-one">粘拆包字符：</view>
						<view class="info-positon-two">{{shadeData.dataPacketContent}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType==4">
						<view class="info-positon-one">订阅前缀：</view>
						<view class="info-positon-two">{{shadeData.prefix}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.moduleType==3 || shadeData.moduleType==4">
						<view class="info-positon-one">消息长度：</view>
						<view class="info-positon-two">{{shadeData.messageLength}}</view>
					</view>
					<view class="info-positon-text-box" v-if="shadeData.params[0]">
						<view class="info-positon-one">自定义参数：</view>
						<view class="info-positon-three" v-for="(item,index) in shadeData.params">
							<view>key：{{item.key}}</view>
							<view>value：{{item.value}}</view>
						</view>
					</view>
					<view class="info-positon-text-box">
						<view class="info-positon-one">说明：</view>
						<view class="info-positon-two">{{ shadeData.remark }}</view>
					</view>
				</view>
				<view class="info-positon-button-box">
					<view @click="shadeOff">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { itoNetworkList,itoNetworkDelete } from '@/api/index.js'
	export default {
	  data() {
	    return {
				//分类下拉列表
				typeDataList:[
          {name:'HTTP服务',value:1},
					{name:'TCP服务',value:2},
					{name:'MQTT服务',value:3},
					{name:'MQTT客户端',value:4}
				],
				typeList:['HTTP服务','TCP服务','MQTT服务','MQTT客户端'],
				typeListIndex:0,
				typeName:'',
				//列表数据
				dataList:[],
				pages:0,
				queryParams:{
					page:1,
					pageSize:10,
					searchValue:'',
					moduleType:'',
				},
				//弹窗相关
				shadeType:false,
				shadeData:{},
			}
		},
		onLoad(option) {

		},
		onShow(){
			this.getList();
		},
		methods: {
			//新增
			addButton(){
				uni.navigateTo({
					url: '/pages/networkComponent/addPage',
				});
			},
			//关闭弹窗
			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,'moduleType',this.typeDataList[event.target.value].value);
			},
			//查询按钮
			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:'',
					moduleType:'',
				});
				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 itoNetworkList(this.queryParams);
				if(data.code==200){
					this.$set(this,'pages',data.data.pages);
					this.$set(this,'dataList',data.data.records);
				}
			},
			//点击事件
			clickButton(item){
				let self = this;
				uni.showActionSheet({
					itemList: ['详情','编辑','删除'],
					success (res) {
						if(res.tapIndex == 0){
							//详情
							let newData = JSON.parse(JSON.stringify(item));
							if(newData.params){
								let obj = newData.params?JSON.parse(newData.params):{};
								let list = [];
								Object.keys(obj).forEach((key)=>{
									const value = obj[key];
									list.push({
										key:key,
										value:value
									})
								})
								newData.params = list[0]?list:[];
							}else{
								newData.params = [];
							}
							self.$set(self,'shadeData',newData);
							self.$set(self,'shadeType',true);
						}if(res.tapIndex == 1){
							//编辑
							uni.navigateTo({
								url:'/pages/networkComponent/addPage?item='+encodeURIComponent(JSON.stringify(item))
							});
						}else if(res.tapIndex == 2){
							//删除
							uni.showModal({
								title:'警告',
								content:'是否确认删除"'+item.moduleName+'"',
								showCancel: true,
								cancelColor:'#999999,',
								confirmColor: '#FF6666',
								success: (res) => {
									if(res.confirm){
										self.itoNetworkDelete(item);
									}
								},
								fail: (res) => {}
							})
						}
					},
					fail (res) {
						
					}
				});
			},
			//删除
			async itoNetworkDelete(item){
				let self = this;
				const {data} = await itoNetworkDelete({id:item.id});
				if(data.code==200){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: data.message,
						duration: 2000
					});
					setTimeout(function(){
						self.resetQuery();
					},1800);
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#networkComponent{
		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:110rpx;
				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:110rpx;
				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:110rpx;
				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;
						display:block;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					.num-box{
						text-align: center;
						width:200rpx;
						line-height:50rpx;
					}
					.colorA{
						color:#14AE10;
					}
					.colorB{
						color:#FF6666;
					}
				}
				.for-text{
					display: flex;
					view{
						font-size:28rpx;
						line-height:50rpx;
					}
					view:nth-child(1){
						width:160rpx;
					}
					view:nth-child(2){
						width:590rpx;
						font-size:28rpx;
						line-height:40rpx;
						padding:5rpx 0;
						word-wrap: break-word;
					}
				}
			}
		}
		.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-title{
					height:80rpx;
					line-height:80rpx;
					text-align: center;
					font-size:32rpx;
					border-bottom:1px solid #dedede;
				}
				.info-positon-box{
					flex:1;
					overflow-x: hidden;
					overflow-y: scroll;
					.info-positon-text-box{
						.info-positon-one{
							padding:0 20rpx;
							font-size:28rpx;
							line-height:60rpx;
							background-color: #dedede
						}
						.info-positon-two{
							padding:10rpx 40rpx;
							word-wrap: break-word;
							line-height:30rpx;
							font-size:28rpx;
						}
						.info-positon-three{
							padding:10rpx 40rpx;
							border-bottom:1px solid #dedede;
							view{
								word-wrap: break-word;
								line-height:40rpx;
								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>