zhxf-app/pages/setting/funReport/funcAdd/funcAdd.vue

<template>
	<view class="appWrapper padding-top" style="height:calc(100vh - 250rpx);overflow:scroll">

		<form action="" class="funcAdd">
			<view class="form-item selectBox">
				<view class="title"><text class="necessary">*</text>报备类型:</view>
				<select name="" id="" placeholder=""clearable  v-model="report_type">
					<option value="">请选择</option>
					<option value="1">单位</option>
					<option value="2">类型</option>
					<option value="3">设备</option>
				</select>
				<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
			</view>
			<view class="form-item selectBox" v-if="report_type==2||report_type==3">
				<view class="title"><text class="necessary">*</text>设备类型:</view>
				<select name="" id="" placeholder=""clearable  v-model="device_type">
					<option value="">请选择</option>
					<option value="1">火系统</option>
					<option value="2">水系统</option>
					<option value="3">烟感系统</option>
					<option value="4">消防栓</option>
					<option value="5">液位</option>
					<option value="6">RTU</option>
					<option value="7">电气火灾</option>
					<option value="16">视频监控</option>
					<option value="128">井盖</option>
					<option value="131">可燃气体</option>
					<option value="130">门禁监测</option>
					<option value="129">地磁监测</option>
					<option value="17">电梯监测</option>
				</select>
				<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
			</view>
			
			<view class="form-item" v-if="report_type">
				<view class="title">
					<text class="necessary">*</text>
					开始时间:
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="start_time" :start="this.id?'':now"/>
				</view>
			</view>
			<view class="form-item" v-if="report_type">
				<view class="title">
					<text class="necessary">*</text>
					结束时间:
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="end_time" :start="start_time" />
				</view>
			</view>
			
			

			
			<view class="form-item " v-if="report_type==3&&device_type==6">
				<view class="title"><text class="necessary">*</text>端口号:</view>
				<input name="input" v-model="device_port"></input>
			</view>
			
			<view class="form-item selectBox" v-if="report_type==3&&device_type==6">
				<view class="title"><text class="necessary">*</text>端口类型:</view>
				<select name="" id="" placeholder=""clearable  v-model="port_type">
					<option value="">请选择</option>
					<option value="1">数字量</option>
					<option value="2">模拟量</option>
				</select>
				<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
			</view>
			
			<view class="form-item selectBox" v-if="report_type==3&&device_type">
				<view class="title"><text class="necessary">*</text>报备设备:</view>
				<select name="" id="" placeholder=""clearable  v-model="device_code">
					<option value="">请选择</option>
					<option :value="item.owner_code" v-for="(item,index) in deviceListData" :key="index">{{item.owner_name}}
					</option>
				
				</select>
				<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
			</view>
			
			<view class="form-item " v-if="report_type">
				<view class="title"><text class="necessary"></text>备注:</view>
				<input name="input" v-model="remarks"></input>
			</view>
			
			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @tap="submit()">提 交 </button>
			</view>
		</form>


	</view>
</template>
<style scoped>
	/deep/ .funcAdd .uni-date-x--border, .uni-date-x{
		border-radius:0!important
	}
	.funcAdd .example-body{
		margin:0;
		width:calc(100% - 200rpx)
	}
</style>

<script>

	export default {

		data() {
			return {
				id:'',

				report_type:'',
				device_type:'',
				start_time:'',
				end_time:'',
				remarks:'',
				device_port:'',
				port_type:'',
				device_code:'',
				now:'',
				
				deviceListData:[],
				detailsData:''
			
			}
		},
		onLoad: function(option) {
			
			this.id=option.id;
			uni.setNavigationBarTitle({
				title: option.id?"编辑":"新增",
			});
			
			
			
			var nowTemp = new Date();
			this.now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
			
			if(option.id){
				this.getDetailsData({'id':option.id})
				
			}
			
			

		},
		watch: {
			start_time:function(){
				// alert(this.start_time)
			},
			device_type:function(newVal){
			
				if(newVal){

					this.deviceList({'company_code':uni.getStorageSync('selectedCode'),'device_type' :this.device_type });
					
					
				}
				
			}
			
		},
		methods: {
			
			// 回显信息请求
			async getDetailsData(params = {}) {
				const res = await this.$myRequest({
					url: 'AlarmReport/editData',
					data:params,
					showLoading: true
				})
				
				this.detailsData=res.data.data[0];
				console.log(this.detailsData)
				this.report_type=this.detailsData.report_type;
				this.device_type=this.detailsData.device_type;
				this.start_time=this.detailsData.start_time;
				this.end_time=this.detailsData.end_time;
				this.remarks=this.detailsData.remarks;
				this.port_type=this.detailsData.port_type;
				this.device_port=this.detailsData.device_port;
				this.device_code=this.detailsData.device_code;

			},

			async submit() {
				
				//提交验证
				
				if (!this.report_type) {
					uni.showToast({
						title: "请输入报备类型",
						icon: "none"
					});
					return
				}
				if(this.report_type==1){
					if (!this.start_time.replace(/^\s*/g,'')) {
						uni.showToast({
							title: "请选择开始时间",
							icon: "none"
						});
						return
					}
					if (!this.end_time.replace(/^\s*/g,'')) {
						uni.showToast({
							title: "请选择结束时间",
							icon: "none"
						});
						return
					}
				}
				if(this.report_type==2||this.report_type==3){
					if (!this.device_type) {
						uni.showToast({
							title: "请选择设备类型",
							icon: "none"
						});
						return
					}
					if (!this.start_time.replace(/^\s*/g,'')) {
						uni.showToast({
							title: "请输入开始时间",
							icon: "none"
						});
						return
					}
					if (!this.end_time.replace(/^\s*/g,'')) {
						uni.showToast({
							title: "请输入结束时间",
							icon: "none"
						});
						return
					}
				}
				
				if(this.report_type==3&&this.device_type){
					
					if (this.device_type==6) {
						if (!this.device_port.replace(/^\s*/g,'')) {
							uni.showToast({
								title: "请输入端口号",
								icon: "none"
							});
							return
						}
						if (!this.port_type) {
							uni.showToast({
								title: "请选择端口类型",
								icon: "none"
							});
							return
						}
						if (!this.device_code) {
							uni.showToast({
								title: "请选择报备设备",
								icon: "none"
							});
							return
						}
					}
					if (!this.device_code) {
						uni.showToast({
							title: "请选择报备设备",
							icon: "none"
						});
						return
					}
				}
				

				let queryParam = {};
				if(this.id){
					queryParam.id=this.id
				}
				queryParam.report_type = this.report_type;
				queryParam.company_code=uni.getStorageSync('selectedCode');
				queryParam.remarks = this.remarks;
				queryParam.start_time = this.start_time;
				queryParam.end_time = this.end_time;
				
				if(this.id){
					queryParam.id = this.id;
				}
				
				if (this.report_type==1) {
					this.addDevice(queryParam)
					return;
				}
				if (this.report_type==2) {
					queryParam.device_type = this.device_type;
					this.addDevice(queryParam)
					return;
				}
				if (this.report_type==3) {
					queryParam.device_type = this.device_type;
					if(this.device_type==6){
						queryParam.port_type = this.port_type;
						queryParam.device_port = this.device_port;
					}
					queryParam.device_code = this.device_code;
					this.addDevice(queryParam)
					return;
				}
				
				this.addDevice(queryParam)
			
			},
			
			async addDevice(params = {}) {
				const res = await this.$myRequest({
					url: this.id?'AlarmReport/edit':'AlarmReport/add',
					data: params
				})
				if (res.data.flag) {
					uni.showToast({
						title: "提交成功",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/accountManage/success/success',
						});
					}, 1000);
				}
			},
			
			

			radioChange(e) {
				console.log('type:' + e.detail.value);
				this.radioOne = e.detail.value;
			},

			//报备设备下拉请求数据
			async deviceList(params = {}) {
			
				const res = await this.$myRequest({
					url: 'AlarmReport/deviceList',
					data:params,
				})
				this.deviceListData = res.data.data;
				
				var arr=[]
				this.deviceListData.forEach(function(item){
					arr.push(item.owner_code)
				})
				if(arr.indexOf(this.device_code)==-1){
					this.device_code=''
				}
				
			},






		}
	}
</script>




<style lang="scss">
	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;
	}




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