uniapp/pages/siteAdd/siteAdd.vue

<template>
	<view class="appWrapper">
		
		<!-- 站点新增start -->
		<form action="" @submit="formSubmit" v-if="!id">
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					站点名称:
				</view>
				<input name="userName" v-model="siteName"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>地址:</view>
				<input name="input" v-model="address"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>经度:</view>
				<input name="input" v-model="longitude"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>纬度:</view>
				<input name="input" v-model="latitude"></input>
			</view>
			<view class="form-item">
				<view class="title"></view>
				<button class=" cu-btn " style="padding:10rpx 20rpx"  @click="getLocation()">
					<image src="../../static/nav-icon.png" style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
					获取当前经纬度
				</button>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>联系人:</view>
				<input name="input" v-model="userName"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>手机号码:</view>
				<input name="input" v-model="phone"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属线路:</view>
				<select name="" id="" filterable clearable v-model="router_id">
					<option value="0">请选择</option>
					<option :value=item.id v-for="item in routeListData">{{ item.route_name}}</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属线区域:</view>
				<select name="" id="" v-model="region">
					<option value="0">请选择</option>
					<option value="1">宝山</option>
					<option value="2">嘉定</option>
				</select>
			</view>
			
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>装机容量:</view>
				<input name="input" v-model="installed_capacity"></input>
			</view>
			<view class="form-item" style="padding-bottom:200rpx">
				<view class="title"><text class="necessary">*</text>流变变化:</view>
				<input name="input" v-model="rheological_change"></input>
			</view>
			

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(addSubmit)">提 交 </button>
			</view>
		</form>
		<!-- 站点新增end -->
		
		<!-- 站点修改start -->
		<form action="" @submit="formSubmit" v-else>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					站点名称:
				</view>
				<input name="userName" v-model="siteMessage.siteName"></input>
			</view>
			<view class="form-item">
				<view class="title">地址:</view>
				<input name="input" v-model="siteMessage.address"></input>
			</view>
			<view class="form-item">
				<view class="title">经度:</view>
				<input name="input" v-model="siteMessage.longitude"></input>
			</view>
			<view class="form-item">
				<view class="title">纬度:</view>
				<input name="input" v-model="siteMessage.latitude"></input>
			</view>
			<view class="form-item">
				<view class="title"></view>
				<button class=" cu-btn " style="padding:10rpx 20rpx"  @click="getLocation2()">
					<image src="../../static/nav-icon.png" style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
					获取当前经纬度
				</button>
			</view>
			<view class="form-item">
				<view class="title">联系人:</view>
				<input name="input" v-model="siteMessage.userName"></input>
			</view>
			<view class="form-item">
				<view class="title">手机号码:</view>
				<input name="input" v-model="siteMessage.phone"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属线区域:</view>
				<select name="" id="" v-model="siteMessage.region">
					<option value="0">请选择</option>
					<option value="1">宝山</option>
					<option value="2">嘉定</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属线路:</view>
				<select name="" id=" " v-model="siteMessage.route_id">
					<option value="0">请选择</option>
					<option :value=item.id v-for="item in routeListData">{{ item.route_name}}</option>
				</select>

			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>装机容量:</view>
				<input name="input" v-model="siteMessage.installed_capacity"></input>
			</view>
			<view class="form-item" style="padding-bottom:200rpx">
				<view class="title"><text class="necessary">*</text>流变变化:</view>
				<input name="input" v-model="siteMessage.rheological_change"></input>
			</view>
			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(editSubmit)">提 交 </button>
			</view>
		</form>
		<!-- 站点修改end -->
	</view>
</template>

<script>
	//引入js sdk的封装
	import * as jwx from '../../util/jssdk.js'
	
	export default {
		data() {
			return {
				noClick:true,
				
				id: 0,
				latitude: "",
				siteName: "",
				userName: "",
				phone: "",
				address: "",
				longitude: "",
				siteMessage:{},
				
				region:0,
				router_id:0,
				routeListData:[],
				installed_capacity:'',
				rheological_change:''
			}
		},
		
		onLoad: function(option) {
			this.id=option.id
			if (option.id) {
				uni.setNavigationBarTitle({
					title: '站点修改'
				});
				this.getSiteList({"id":option.id})
			} else {
				uni.setNavigationBarTitle({
					title: '站点新增'
				});
			}
			
			this.getRoutrBox()
			 
		},

		methods: {
			
			//线路名称下拉数据请求
			async getRoutrBox(params = {}) {
				const res = await this.$myRequest({
					url: 'Archives/getRoutrBox',
					showLoading: true,
					data: params
				})
				this.routeListData = res.data.data;
				console.log(this.routeListData)
			},
			//新增
			getLocation(){
				// 将this赋值给that
				let that = this
				// 微信公众号获取位置
				jwx.configWeiXin(jweixin => {
					wx.getLocation({
					  type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					  success: function (res) {
						that.longitude=res.longitude
						that.latitude=res.latitude
					  }
					});
				});
			},
			//修改
			getLocation2(){
				// 将this赋值给that
				let that = this
				// 微信公众号获取位置
				jwx.configWeiXin(jweixin => {
					wx.getLocation({
					  type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					  success: function (res) {
						that.siteMessage.longitude=res.longitude
						that.siteMessage.latitude=res.latitude
					  }
					});
				});
			},
			
			

			//新增验证并提交
			addSubmit() {
				if (!this.siteName.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入站点名称...",
						icon: "none"
					});
					return
				}
				if (!this.address.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入地址...",
						icon: "none"
					});
					return
				}
				if (!this.longitude) {
					uni.showToast({
						title: "请输入经度...",
						icon: "none"
					});
					return
				}
				if (!this.latitude) {
					uni.showToast({
						title: "请输入纬度...",
						icon: "none"
					});
					return
				}
				if (!this.userName.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入联系人...",
						icon: "none"
					});
					return
				}
				if (!this.phone.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入手机号码...",
						icon: "none"
					});
					return
				}
				
				if (!/^1[3456789]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: "请输入正确的手机号码...",
						icon:"none"
					});
					return
				 }
				 
				 if (!this.router_id) {
				 	uni.showToast({
				 		title: "请选择所属线路...",
				 		icon: "none"
				 	});
				 	return
				 }
				 if (!this.region) {
				 	uni.showToast({
				 		title: "请选择所属区域...",
				 		icon: "none"
				 	});
				 	return
				 }
				 if (!this.installed_capacity.replace(/^\s*/g,'')) {
				 	uni.showToast({
				 		title: "请输入装机容量...",
				 		icon: "none"
				 	});
				 	return
				 }
				 if (!this.rheological_change.replace(/^\s*/g,'')) {
				 	uni.showToast({
				 		title: "请输入流变变化...",
				 		icon: "none"
				 	});
				 	return
				 }
				this.getAddSite({
					"siteName": this.siteName,
					"userName": this.userName,
					"phone": this.phone,
					"address": this.address,
					"longitude": this.longitude,
					"latitude": this.latitude,
					"route_id":this.router_id,
					"region":this.region,
					"installed_capacity":this.installed_capacity,
					"rheological_change":this.rheological_change
				})
			},
			
			//编辑验证并提交
			editSubmit() {
				if (!this.siteMessage.siteName.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请填写站点名称...",
						icon: "none"
					});
					return
				}
				if (!this.siteMessage.address.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入地址...",
						icon: "none"
					});
					return
				}
				if (!this.siteMessage.longitude) {
					uni.showToast({
						title: "请输入经度...",
						icon: "none"
					});
					return
				}
				if (!this.siteMessage.latitude) {
					uni.showToast({
						title: "请输入纬度...",
						icon: "none"
					});
					return
				}
				if (!this.siteMessage.userName.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入联系人...",
						icon: "none"
					});
					return
				}
				if (!this.siteMessage.phone.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入手机号码...",
						icon: "none"
					});
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.siteMessage.phone)){
					uni.showToast({
						title: "请输入正确的手机号码...",
						icon:"none"
					});
					return
				 }
				 if (!this.siteMessage.route_id) {
				 	uni.showToast({
				 		title: "请选择所属线路...",
				 		icon: "none"
				 	});
				 	return
				 }
				 if (!this.siteMessage.region) {
				 	uni.showToast({
				 		title: "请选择所属区域...",
				 		icon: "none"
				 	});
				 	return
				 }
				 if (!this.siteMessage.installed_capacity) {
				 	uni.showToast({
				 		title: "请输入装机容量...",
				 		icon: "none"
				 	});
				 	return
				 }
				 if (!this.siteMessage.rheological_change) {
				 	uni.showToast({
				 		title: "请输入流变变化...",
				 		icon: "none"
				 	});
				 	return
				 }
				this.setEditSite({
					"id":this.id,
					"siteName": this.siteMessage.siteName,
					"userName": this.siteMessage.userName,
					"phone": this.siteMessage.phone,
					"address": this.siteMessage.address,
					"longitude": this.siteMessage.longitude,
					"latitude": this.siteMessage.latitude,
					"route_id":this.siteMessage.route_id,
					"region":this.siteMessage.region,
					"installed_capacity":this.siteMessage.installed_capacity,
					"rheological_change":this.siteMessage.rheological_change
				})
			},
			
			// 新增请求
			async getAddSite(ming = {}) {
				const res = await this.$myRequest({
					url: 'SiteManagement/setAddSite',
					data: ming
				})
				if (!res.data.flag) {
					uni.showToast({
						title: "添加失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "添加成功",
					});
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/siteManage/siteManage',
					});
				}, 1000);

			},
			
			// 修改回显请求
			async getSiteList(ming = {}) {
				const res = await this.$myRequest({
					url: 'SiteManagement/getSiteList',
					showLoading: true,
					data: ming
				})
				this.siteMessage=res.data.data[0];
			},
			
			
			// 编辑请求
			async setEditSite(ming = {}) {
				const res = await this.$myRequest({
					url: 'SiteManagement/setEditSite',
					data: ming
				})
				if (!res.data.flag) {
					uni.showToast({
						title: "编辑失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "编辑成功",
					});
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/siteManage/siteManage',
					});
				}, 1000);
			},

		}
	}
</script>




<style lang="scss">
	.cu-form-group {
		border-top: 0;

	}

	input,
	select,
	option {
		line-height: 70rpx;
		padding: 0 20rpx;
		height: 70rpx;
		border: 1px solid #EDEDED;
		// width:500rpx!important;
		background-color: #fff;
		box-sizing: border-box;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		color: #999;


	}

	select:focus,
	select:active,
	select:hover {
		outline: none;
	}

	select {
		background: url(../../static/arrow.png) no-repeat scroll 98% center;
		background-size: 6%;
	}

	.form-item label text {
		position: relative;
		top: 2rpx
	}

	.form-item {
		padding: 0 40rpx;
		display: flex;
		align-items: top;
		margin-bottom: 20rpx;


		.title {
			width: 170rpx;
			position: relative;

			.necessary {
				color: red;
				display: inline-block;
				position: absolute;
				top: -2rpx;
				left: -20rpx;
				font-size: 40rpx;

			}
		}

		input,
		select {
			width: 500rpx;
			font-size: 28rpx;
		}


	}





	/* 站点多选下拉样式 start */

	.layui-btn {
		background-color: #5fb878;
	}

	a {
		text-decoration: none;
	}

	.label {
		padding: 2px 0px;
		background: #aaa;
		border-radius: 2px;
		color: #fff;
		display: block;
		line-height: 20px;
		height: 20px;
		margin: 2px 5px 2px 0;
		float: left;
	}

	.label span {
		padding: 0 5px;
		color: #fff;
	}

	.close {
		padding: 1px 5px !important;
	}

	.close:hover {
		/* background-color: #009E94;
	    border-radius: 2px;
	    color: tomato; */
	}

	.selectId input {
		width: 100% !important;
	}

	.selectId input {
		height: 25px;
		padding: 1px 5px;
		border-radius: 3px;
		width: calc(100% - 12px);
		outline-color: #5fb878;
		border: 1px solid #5fb878;
	}

	.selectId {
		position: relative;
	}

	.selectId dl {
		border: 1px solid #eee;
		border-radius: 3px;
		margin: 2px 0px;
		max-height: 300px;
		overflow-x: hidden;
		white-space: nowrap;
		position: absolute;
		width: 100%;
		top: 40px;
		background: #fff;
		z-index: 1000
	}

	.selectId dl dd {
		margin: 0;
		padding: 5px 10px;
	}

	.selectId dl dd:hover {
		background-color: #5FB878;
		color: white;
	}

	.AD {
		/* width: 210px;
	        margin-left: 40px; */
		overflow-y: auto;
		max-height: 200px;
		/* border: 2px solid #5fb878;
	        border-radius: 6px;
	        padding: 1px 2px; */
	}

	form .AD span {
		width: auto;
	}

	.siteSelect {
		width: 71%;
		display: inline-block;
	}


	/* 站点多选下拉样式end */
</style>