uniapp2/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" maxlength="15"/>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>地址:</view>
				<input name="input" v-model="address"/>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>经度:</view>
				<input name="input" v-model="longitude"/>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>纬度:</view>
				<input name="input" v-model="latitude"/>
			</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"/>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>手机号码:</view>
				<input name="input" v-model="phone"/>
			</view>

			<view class="form-item">
				<view class="title"><text class="necessary">*</text>联系人2:</view>
				<input name="input" v-model="spare_user_name"/>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>手机号码2:</view>
				<input name="input" v-model="spare_phone"/>
			</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,index) in routeListData" :key="index">{{ 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"/>
			</view>
			<view class="form-item" style="padding-bottom:200rpx">
				<view class="title"><text class="necessary">*</text>流变变化:</view>
				<input name="input" v-model="rheological_change"/>
			</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"/>
			</view>
			<view class="form-item">
				<view class="title">地址:</view>
				<input name="input" v-model="siteMessage.address"/>
			</view>
			<view class="form-item">
				<view class="title">经度:</view>
				<input name="input" v-model="siteMessage.longitude"/>
			</view>
			<view class="form-item">
				<view class="title">纬度:</view>
				<input name="input" v-model="siteMessage.latitude"/>
			</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"/>
			</view>
			<view class="form-item">
				<view class="title">手机号码:</view>
				<input name="input" v-model="siteMessage.phone"/>
			</view>
			<view class="form-item">
				<view class="title">联系人2:</view>
				<input name="input" v-model="siteMessage.spare_user_name"/>
			</view>
			<view class="form-item">
				<view class="title">手机号码2:</view>
				<input name="input" v-model="siteMessage.spare_phone"/>
			</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,index) in routeListData" :key="index">{{ 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"/>
			</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"/>
			</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: "",
				spare_user_name: "",
				spare_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.spare_user_name.replace(/^\s*/g, "")) {
					uni.showToast({
						title: "请输入联系人2...",
						icon: "none",
					});
					return;
				}
				if (!this.spare_phone.replace(/^\s*/g, "")) {
					uni.showToast({
						title: "请输入手机号码2...",
						icon: "none",
					});
					return;
				}

				if (!/^1[3456789]\d{9}$/.test(this.spare_phone)) {
					uni.showToast({
						title: "请输入正确的手机号码2...",
						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,

					spare_user_name: this.spare_user_name,
					spare_phone: this.spare_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.spare_user_name) {
					uni.showToast({
						title: "请输入联系人2...",
						icon: "none",
					});
					return;
				}
				if (!this.siteMessage.spare_phone) {
					uni.showToast({
						title: "请输入手机号码2...",
						icon: "none",
					});
					return;
				}

				if (!/^1[3456789]\d{9}$/.test(this.siteMessage.spare_phone)) {
					uni.showToast({
						title: "请输入正确的手机号码2...",
						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,

					spare_user_name: this.siteMessage.spare_user_name,
					spare_phone: this.siteMessage.spare_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.redirectTo({
						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];
				if (!this.siteMessage.spare_user_name) {
					this.siteMessage.spare_user_name = "暂无显示";
				}
				if (!this.siteMessage.spare_phone) {
					this.siteMessage.spare_phone = "暂无显示";
				}
			},

			// 编辑请求
			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.redirectTo({
						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>