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

<template>
	<view id="networkComponent-add-apge">
		<view class="addForm-max-big-box">
			<view class="addForm-big-box">
				<!-- 名称 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">名称：</view>
					<input class="addForm-input" v-model="addForm.moduleName" style="width:340rpx;" type="text" :maxlength="20"
						placeholder="输入名称" placeholder-style="color:#999;">
				</view>
				<!-- 类型 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">类型：</view>
					<picker @change="classChange" :value="classIndex" :range="classNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!className?'addForm-input-placeholder':''">
							{{className?className:'请选择类型'}}
						</view>
					</picker>
				</view>
				<!-- 本地地址 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 1 || addForm.moduleType == 2 || addForm.moduleType == 3">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">本地地址：</view>
					<input class="addForm-input" v-model="addForm.localIp" style="width:340rpx;"
						type="text" :maxlength="20" placeholder="输入本地地址" placeholder-style="color:#999;">
				</view>
				<!-- 本地端口 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 1 || addForm.moduleType == 2 || addForm.moduleType == 3">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">本地端口：</view>
					<input class="addForm-input" v-model="addForm.localPort" style="width:340rpx;"
						type="text" :maxlength="10" placeholder="输入本地端口" placeholder-style="color:#999;">
				</view>
				<!-- 公网地址 -->
				<view class="addForm-input-box" v-if="addForm.moduleType">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">{{addForm.moduleType==4?'远程地址：':'公网地址：'}}</view>
					<input class="addForm-input" v-model="addForm.publicIp" style="width:340rpx;"
						type="text" :maxlength="20" :placeholder="addForm.moduleType==4?'请输入远程地址':'请输入公网地址'" placeholder-style="color:#999;">
				</view>
				<!-- 公网端口 -->
				<view class="addForm-input-box" v-if="addForm.moduleType">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">{{addForm.moduleType==4?'远程端口：':'公网端口：'}}</view>
					<input class="addForm-input" v-model="addForm.publicPort" style="width:340rpx;"
						type="text" :maxlength="10" :placeholder="addForm.moduleType==4?'请输入远程端口':'请输入公网端口'" placeholder-style="color:#999;">
				</view>
				<!-- 认证key/用户名 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 1 || addForm.moduleType == 4">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">{{addForm.moduleType==4?'用户名：':'认证key：'}}</view>
					<input class="addForm-input" v-model="addForm.authKey" style="width:340rpx;"
						type="text" :maxlength="200" :placeholder="addForm.moduleType==4?'请输入用户名':'请输入认证key'" placeholder-style="color:#999;">
				</view>
				<!-- 密匙/密码 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 1 || addForm.moduleType == 4">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">{{addForm.moduleType==4?'密码：':'密匙：'}}</view>
					<input class="addForm-input" v-model="addForm.authPassword" style="width:340rpx;"
						type="text" :maxlength="200" :placeholder="addForm.moduleType==4?'请输入密码':'请输入密匙'" placeholder-style="color:#999;">
				</view>
				<!-- 粘拆包 -->
				<view class="addForm-input-box" v-if="addForm.moduleType==2">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">粘拆包：</view>
					<picker @change="typeChange" :value="typeIndex" :range="typeNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!typeName?'addForm-input-placeholder':''">
							{{typeName?typeName:'请选择粘拆包'}}
						</view>
					</picker>
				</view>
				<!-- 粘拆包字符 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 2 && (addForm.dataPacket && addForm.dataPacket !== 0)">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">粘拆包字符：</view>
					<input class="addForm-input" v-model="addForm.dataPacketContent" style="width:340rpx;"
						type="text" :maxlength="200" placeholder="请输入粘拆包字符" placeholder-style="color:#999;">
				</view>
				<!-- 订阅前缀 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 4">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">订阅前缀：</view>
					<input class="addForm-input" v-model="addForm.prefix" style="width:340rpx;"
						type="text" :maxlength="30" placeholder="请输入订阅前缀" placeholder-style="color:#999;">
				</view>
				<!-- 消息长度 -->
				<view class="addForm-input-box" v-if="addForm.moduleType == 3 || addForm.moduleType == 4">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">消息长度：</view>
					<input class="addForm-input" v-model="addForm.messageLength" style="width:340rpx;"
						type="number" :maxlength="4" :min="10" :max="1000" placeholder="请输入消息长度" placeholder-style="color:#999;">
				</view>
				<!-- 自定义参数 -->
				<view class="addForm-input-box-one">
					<view class="addForm-input-box-one-top">
						<view class="addForm-input-icon"></view>
						<view class="addForm-input-title">自定义参数：</view>
						<view class="addForm-add-button" v-if="!addForm.params[4]" @click="addParams">添加</view>
					</view>
					<view class="addForm-input-box-one-bottom">
						<view class="addForm-max-for-box">
							<view class="addForm-for-box" v-for="(item,index) in addForm.params">
								<view class="addForm-for-min-box">
									<view class="for-input-box">
										<input class="addForm-input" v-model="item.key" style="width:360rpx;"
											type="text" :maxlength="30" placeholder="key" placeholder-style="color:#999;">
									</view>
									<view class="for-input-box-one">
										<input class="addForm-input" v-model="item.value" style="width:360rpx;"
											type="text" :maxlength="30" placeholder="value" placeholder-style="color:#999;">
									</view>
								</view>
								<view class="del-view" @click="dleParams(index)">删除</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 说明 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon"></view>
					<view class="addForm-input-title">说明：</view>
					<input class="addForm-input" v-model="addForm.remark" style="width:340rpx;"
						type="text" :maxlength="200" placeholder="请输入说明" placeholder-style="color:#999;">
				</view>
				
			</view>
		</view>
		<view class="addForm-button-box">
			<view class="button-null"></view>
			<view class="button-view" @click="submitForm">提交</view>
			<view class="button-null"></view>
		</view>
	</view>
</template>

<script>
	import { itoNetworkAdd,itoNetworkUpdate } from '@/api/index.js'
	export default {
	  data() {
	    return {
				addForm: {
					moduleName:"",
					moduleType:"",
					localIp:"",
					localPort:"",
					publicIp:"",
					publicPort:"",
					authKey:"",
					authPassword:"",
					dataPacket:"",
					dataPacketContent:"",
					prefix:"",
					messageLength:"",
					params:[],
					remark:"",
				},
				//类型
				classList:[
          {name:'HTTP服务',value:1},
					{name:'TCP服务',value:2},
					{name:'MQTT服务',value:3},
					{name:'MQTT客户端',value:4},
				],
				classNameList:['HTTP服务','TCP服务','MQTT服务','MQTT客户端'],
				classIndex:0,
				className:'',
				//粘拆包
				typeList: [
          {name:'不处理',value:0},
					{name:'分隔符',value:1},
					{name:'自定义脚本',value:2},
					{name:'固定长度',value:3},
					{name:'长度字段',value:4},
				],
				typeNameList: ['不处理','分隔符','自定义脚本','固定长度','长度字段',],
				typeIndex: 0,
				typeName: '',
			}
		},
		onLoad(option) {
			if(option.item){
				this.initialize(option.item);
			}
		},
		onShow(){
			
		},
		methods: {
			initialize(item){
				let obj = JSON.parse(decodeURIComponent(item));
				this.$set(this,'addForm',this.dataProcessing(obj,'get'));
			},
			//类型选择
			classChange(event) {
				if(this.classList[0]){
					this.$set(this, 'classIndex', event.target.value);
					this.$set(this, 'className', this.classList[event.target.value].name);
					this.$set(this.addForm, 'moduleType', this.classList[event.target.value].value);
				}
			},
			//粘拆包选择
			typeChange(event) {
				if(this.typeList[0]){
					this.$set(this, 'typeIndex', event.target.value);
					this.$set(this, 'typeName', this.typeList[event.target.value].name);
					this.$set(this.addForm, 'dataPacket', this.typeList[event.target.value].value);
				}
			},
			//添加自定义参数
			addParams(){
				this.addForm.params.push({key:'',value:''})
			},
			//删除自定义参数
			dleParams(index){
        this.addForm.params.splice(index,1);
			},
			//提交
			submitForm(){
				let self = this;
				if(!this.addForm.moduleName){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '输入名称',
						duration: 1000
					});
					return
				}else if(!this.addForm.moduleType){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请选择类型',
						duration: 1000
					});
					return
				}
				let num = 0;
				if(this.addForm.moduleType == 1 || this.addForm.moduleType == 2 || this.addForm.moduleType == 3){
					if(!this.addForm.localIp){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: '输入本地地址',
							duration: 1000
						});
						num++
						return
					}else if(!this.addForm.localPort){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: '输入本地端口',
							duration: 1000
						});
						num++
						return
					}
				}
				if(this.addForm.moduleType == 1 || this.addForm.moduleType == 4){
					if(!this.addForm.authKey){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: this.addForm.moduleType==4?'请输入用户名':'请输入认证key',
							duration: 1000
						});
						num++
						return
					}else if(!this.addForm.authPassword){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: this.addForm.moduleType==4?'请输入密码':'请输入密匙',
							duration: 1000
						});
						num++
						return
					}
				}
				if(this.addForm.moduleType == 3 || this.addForm.moduleType == 4){
					if(!this.addForm.messageLength){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: '请输入消息长度',
							duration: 1000
						});
						num++
						return
					}
				}
				if(this.addForm.moduleType){
					if(!this.addForm.publicIp){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: this.addForm.moduleType==4?'请输入远程地址':'请输入公网地址',
							duration: 1000
						});
						num++
						return
					}else if(!this.addForm.publicPort){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: this.addForm.moduleType==4?'请输入远程端口':'请输入公网端口',
							duration: 1000
						});
						num++
						return
					}
				}
				if(this.addForm.moduleType == 2){
					if(!this.addForm.dataPacket && this.addForm.dataPacket != 0){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: '请选择粘拆包',
							duration: 1000
						});
						num++
						return
					}else if(this.addForm.dataPacket != 0){
						if(!this.addForm.dataPacketContent){
							uni.showToast({
								mask: true,
								icon: "none",
								position: "center",
								title: '请输入粘拆包字符',
								duration: 1000
							});
							num++
							return
						}
					}
				}
				if(this.addForm.moduleType == 4){
					if(!this.addForm.prefix){
						uni.showToast({
							mask: true,
							icon: "none",
							position: "center",
							title: '请输入订阅前缀',
							duration: 1000
						});
						num++
						return
					}
				}
				if(this.addForm.params[0]){
					this.addForm.params.forEach((item,index)=>{
						if(!item.key){
							uni.showToast({
								mask: true,
								icon: "none",
								position: "center",
								title: '第'+(index+1)+'个自定义参数的key未填写',
								duration: 1000
							});
							num++
							return
						}else if(!item.value){
							uni.showToast({
								mask: true,
								icon: "none",
								position: "center",
								title: '第'+(index+1)+'个自定义参数的value未填写',
								duration: 1000
							});
							num++
							return
						}
					})
				}
				if(num !== 0){
					return
				}
				let obj = this.dataProcessing(this.addForm,'set');
				
				uni.showModal({
					title:'警告',
					content:'是否确认提交?',
					showCancel: true,
					cancelColor:'#999999,',
					confirmColor: '#0183FA',
					success: (res) => {
						if(res.confirm){
							if(obj.id){
								self.itoNetworkUpdate(obj);
							}else{
								self.itoNetworkAdd(obj);
							}
						}
					},
					fail: (res) => {}
				})
			},
			//编辑
			async itoNetworkUpdate(obj){
				const {data} = await itoNetworkUpdate(obj);
				if(data.code==200){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: data.message,
						duration: 2000
					});
					setTimeout(function(){
							uni.navigateBack();
					},1800);
				}
			},
			//新增
			async itoNetworkAdd(obj){
				const {data} = await itoNetworkAdd(obj);
				if(data.code==200){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: data.message,
						duration: 2000
					});
					setTimeout(function(){
							uni.navigateBack();
					},1800);
				}
			},
			//数据处理
			dataProcessing(data,type){
				let newData = {
					moduleName:data.moduleName,
					moduleType:data.moduleType,
					publicIp:data.publicIp,
					publicPort:data.publicPort,
					remark:data.remark,
					localIp:data.moduleType == 1 || data.moduleType == 2 || data.moduleType == 3?data.localIp:'',
					localPort:data.moduleType == 1 || data.moduleType == 2 || data.moduleType == 3?data.localPort:'',
					authKey:data.moduleType == 1 || data.moduleType == 4?data.authKey:'',
					authPassword:data.moduleType == 1 || data.moduleType == 4 ?data.authPassword:'',
					dataPacket:data.moduleType == 2 ?data.dataPacket:'',
					dataPacketContent:data.moduleType == 2 && data.dataPacket != 0 ?data.dataPacketContent:'',
					// clientId:data.moduleType == 4 ?data.clientId:'',
					// authKey:data.moduleType == 4 ?data.username:'',
					// authPassword:data.moduleType == 4 ?data.password:'',
					prefix:data.moduleType == 4 ?data.prefix:'',
					messageLength:data.moduleType == 3 || data.moduleType == 4 ?data.messageLength:'',
				}
				if(type == 'get'){
					if(data.params){
						let obj = data.params?JSON.parse(data.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 = [];
					}
					this.classList.forEach((item)=>{
						if(data.moduleType == item.value){
							this.$set(this,'className',item.name);
						}
					})
					if(data.moduleType == 2){
						this.typeList.forEach((item)=>{
							if(data.dataPacket == item.value){
								this.$set(this,'typeName',item.name);
							}
						})
					}
				}else if(type == 'set'){
					let obj = {};
					for(let i=0;i<data.params.length;i++){
						obj[data.params[i].key] = data.params[i].value
					}
					newData.params = data.params[0]?JSON.stringify(obj):'';
				}
				if(data.id){
					newData.id = data.id;
				}
				return JSON.parse(JSON.stringify(newData))
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#networkComponent-add-apge{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		
		.addForm-max-big-box {
			flex: 1;
			overflow-x: hidden;
			overflow-y: scroll;
		
			.addForm-big-box {
				background-color: #fff;
				margin: 20rpx;
				border-radius: 12rpx;
				padding: 0 0 30rpx;
				
				.addForm-input-box-one{
					margin: 10rpx 0 0 10rpx;
					font-size: 28rpx;
					padding: 20rpx 0 0 0;
					.addForm-input-box-one-top{
						display: flex;
						.addForm-input-icon {
							color: #FF6666;
							width: 40rpx;
							margin-right: 10rpx;
							text-align: right;
							line-height: 60rpx;
						}
								
						.addForm-input-title {
							width: 200rpx;
							color: #333;
							line-height: 60rpx;
						}
						.addForm-add-button{
							height:60rpx;
							width:380rpx;
							border-radius:8rpx;
							background-color: #0183FA;
							color:#fff;
							font-size:26rpx;
							line-height:60rpx;
							text-align: center;
						}
					}
					.addForm-input-box-one-bottom{
						.addForm-max-for-box{
							.addForm-for-box{
								display: flex;
								margin:30rpx 0;
								.addForm-for-min-box{
									margin-left:106rpx;
									.for-input-box{
										// margin-bottom:20rpx;
										.addForm-input {
											padding: 0 20rpx;
											height: 60rpx;
											line-height: 60rpx;
											font-size: 26rpx;
											// border-radius: 8rpx;
											border: 1px solid #dedede;
											border-right: none;
											border-top-left-radius: 8rpx
										}
										.addForm-input-placeholder{
											color: #999 !important;
										}
									}
									.for-input-box-one{
										.addForm-input {
											padding: 0 20rpx;
											height: 60rpx;
											line-height: 60rpx;
											font-size: 26rpx;
											// border-radius: 8rpx;
											border: 1px solid #dedede;
											border-top: none;
											border-right: none;
											border-bottom-left-radius: 8rpx
										}
										.addForm-input-placeholder{
											color: #999 !important;
										}
									}
								}
								.del-view{
									height:125rpx;
									width:120rpx;
									background-color: #FF6666;
									color:#fff;
									font-size:26rpx;
									line-height:125rpx;
									text-align: center;
									border-top-right-radius: 8rpx;
									border-bottom-right-radius: 8rpx;
								}
							}
						}
					}
				}
				.addForm-input-box {
					display: flex;
					margin: 10rpx 0 0 10rpx;
					font-size: 28rpx;
					padding: 20rpx 0 0 0;
		
					.addForm-input-icon {
						color: #FF6666;
						width: 40rpx;
						margin-right: 10rpx;
						text-align: right;
						line-height: 60rpx;
					}
		
					.addForm-input-title {
						width: 200rpx;
						color: #333;
						line-height: 60rpx;
					}
					.addForm-max-for-box{
						.addForm-for-box{
							margin-bottom:20rpx;
							.addForm-for-min-box{
								display: flex;
								.for-input-box{
									margin-right:20rpx;
								}
							}
							.del-view{
								height:60rpx;
								width:100rpx;
								border-radius:8rpx;
								background-color: #FF6666;
								color:#fff;
								font-size:26rpx;
								line-height:60rpx;
								text-align: center;
							}
						}
						.addForm-add-button{
							height:60rpx;
							width:160rpx;
							border-radius:8rpx;
							background-color: #0183FA;
							color:#fff;
							font-size:26rpx;
							line-height:60rpx;
							text-align: center;
						}
					}
					.addForm-input {
						padding: 0 20rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 26rpx;
						border-radius: 8rpx;
						border: 1px solid #dedede;
					}
					.addForm-input-placeholder{
						color: #999 !important;
					}
				}
			}
		}
		
		.addForm-button-box {
			height: 80rpx;
			display: flex;
		
			.button-null {
				flex: 1;
			}
		
			.button-view {
				width: 260rpx;
				margin: 10rpx 0 0 0;
				background-color: #0183FA;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
				height: 60rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>