uniapp/pages/deviceAdd/deviceAdd.vue

<template>
	<view class="appWrapper">

		<!-- 站点新增start -->
		<form action="" @submit="formSubmit" v-if="!deviceCode">
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					设备编号:
				</view>
				<input name="deviceCode" v-model="formMess.deviceCode"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>设备名称:</view>
				<input name="input" v-model="formMess.deviceName"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>安装位置:</view>
				<input name="input" v-model="formMess.deviceInstallationPosition"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属楼层:</view>
				<!-- <select name="" id="" v-model="formMess.floor" filterable clearable>
					<option value="1" >楼层1</option>
					<option value="2" >楼层2</option>
				</select> -->
				<select name="" id="" v-model="formMess.floor" filterable clearable>
					<option value="" >请选择</option>
					<option value="-10">楼层B10</option>
					<option value="-9">楼层B9</option>
					<option value="-8">楼层B8</option>
					<option value="-7">楼层B7</option>
					<option value="-6">楼层B6</option>
					<option value="-5">楼层B5</option>
					<option value="-4">楼层B4</option>
					<option value="-3">楼层B3</option>
					<option value="-2">楼层B2</option>
					<option value="-1">楼层B1</option>
					<option :value=item   v-for="item in 60">楼层{{item}}</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>设备类型:</view>
				<select name="" id="" v-model="formMess.deviceType" filterable clearable>
					<option value="">请选择</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="formMess.siteId" filterable clearable>
					<option value="">请选择</option>
					<option :value=item.id v-for="item in siteList">{{ item.siteName}}</option>
				</select>
			</view>



			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="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="deviceCode" v-model="deviceMessage.deviceCode" disabled="disabled"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>设备名称:</view>
				<input name="input" v-model="deviceMessage.deviceName" disabled="disabled"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>安装位置:</view>
				<input name="input" v-model="deviceMessage.deviceInstallationPosition"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属楼层:</view>
				<select name="" id="" v-model="deviceMessage.floor" filterable clearable>
					<!-- <option value="" >请选择</option> -->
					<option value="-10">楼层B10</option>
					<option value="-9">楼层B9</option>
					<option value="-8">楼层B8</option>
					<option value="-7">楼层B7</option>
					<option value="-6">楼层B6</option>
					<option value="-5">楼层B5</option>
					<option value="-4">楼层B4</option>
					<option value="-3">楼层B3</option>
					<option value="-2">楼层B2</option>
					<option value="-1">楼层B1</option>
					<option :value=index+1 v-for="(item,index) in 60">楼层{{item}}</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>设备类型:</view>
				<select name="" id="" v-model="deviceMessage.deviceType" filterable clearable>
					<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="deviceMessage.siteId" filterable clearable>
					<option :value=item.id v-for="item in siteList">{{ item.siteName}}</option>
				</select>
			</view>



			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="editSubmit">提 交 </button>
			</view>
		</form>
		<!-- 站点修改end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteList: [],
				id: 0,
				deviceCode:'',
				formMess: {
					"deviceCode": "",
					"siteId": "",
					"deviceType": "",
					"deviceName": "",
					"deviceInstallationPosition": "",
					"floor": "",
				},
				deviceMessage: {}
			}
		},

		onLoad: function(option) {
			this.id = option.id
			this.deviceCode=option.deviceCode
			this.getSiteList()
			if (option.deviceCode) {
				uni.setNavigationBarTitle({
					title: '设备修改'
				});
				this.getDeviceList({
					"siteId": option.id,
					"deviceCode": option.deviceCode
				})
			} else {
				uni.setNavigationBarTitle({
					title: '设备新增'
				});

			}


		},

		methods: {

			//新增验证并提交
			addSubmit() {
				if (!this.formMess.deviceCode) {
					uni.showToast({
						title: "请填写设备编号",
						icon: "none"
					});
					return
				}
				if (!this.formMess.deviceName) {
					uni.showToast({
						title: "请填写设备名称",
						icon: "none"
					});
					return
				}
				if (!this.formMess.deviceInstallationPosition) {
					uni.showToast({
						title: "请填写安装位置",
						icon: "none"
					});
					return
				}
				if (!this.formMess.floor) {
					uni.showToast({
						title: "请选择所属楼层",
						icon: "none"
					});
					return
				}
				if (!this.formMess.deviceType) {
					uni.showToast({
						title: "请选择设备类型",
						icon: "none"
					});
					return
				}
				if (!this.formMess.siteId) {
					uni.showToast({
						title: "请选择站点",
						icon: "none"
					});
					return
				}

				this.setAddDevice({
					"deviceCode": this.formMess.deviceCode,
					"siteId": this.formMess.siteId,
					"deviceType": this.formMess.deviceType,
					"deviceName": this.formMess.deviceName,
					"deviceInstallationPosition": this.formMess.deviceInstallationPosition,
					"floor": this.formMess.floor
				})
			},

			//编辑验证并提交
			editSubmit() {
				if (!this.deviceMessage.deviceCode) {
					uni.showToast({
						title: "请填写设备编号",
						icon: "none"
					});
					return
				}
				if (!this.deviceMessage.deviceName) {
					uni.showToast({
						title: "请填写设备名称",
						icon: "none"
					});
					return
				}
				if (!this.deviceMessage.deviceInstallationPosition) {
					uni.showToast({
						title: "请填写安装位置",
						icon: "none"
					});
					return
				}
				if (!this.deviceMessage.floor) {
					uni.showToast({
						title: "请选择所属楼层",
						icon: "none"
					});
					return
				}
				if (!this.deviceMessage.deviceType) {
					uni.showToast({
						title: "请选择设备类型",
						icon: "none"
					});
					return
				}
				if (!this.deviceMessage.siteId) {
					uni.showToast({
						title: "请选择站点",
						icon: "none"
					});
					return
				}
				this.setEditDevice({
					"deviceCode": this.deviceMessage.deviceCode,
					"siteId": this.deviceMessage.siteId,
					"deviceType": this.deviceMessage.deviceType,
					"deviceName": this.deviceMessage.deviceName,
					"deviceInstallationPosition": this.deviceMessage.deviceInstallationPosition,
					"floor": this.deviceMessage.floor
				})
			},

			// 新增请求
			async setAddDevice(ming = {}) {
				const res = await this.$myRequest({
					url: 'DeviceManagement/setAddDevice',
					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',
					data: ming
				})
				// this.deviceMessage=res.data.data[0];
				this.siteList = res.data.data
				// console.log(res.data.data)
			},


			// 修改回显请求
			async getDeviceList(ming = {}) {
				const res = await this.$myRequest({
					url: 'DeviceManagement/getDeviceList',
					data: ming
				})
				console.log('res.data.data')
				console.log(res.data.data[0])
				this.deviceMessage = res.data.data[0];
				console.log(this.deviceMessage)
			},


			// 编辑请求
			async setEditDevice(ming = {}) {
				const res = await this.$myRequest({
					url: 'DeviceManagement/setEditDevice',
					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>