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

<!-- 新增/编辑物联设备 -->
<template>
	<view id="iotDevice-add-page">
		<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>
					<view>
						<switch :checked="addForm.state" @change="switchChange" color="#0183FA" style="transform:scale(0.8)" />
					</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.deviceName" 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>
					<input class="addForm-input" :disabled="!!addForm.id" v-model="addForm.deviceNo" 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="optionsChange" :value="optionsIndex" :range="optionsNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!optionsName?'addForm-input-placeholder':''">
							{{optionsName?optionsName:'选择设备类型'}}
						</view>
					</picker>
				</view>
				<!-- 设备属性 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">设备属性：</view>
					<picker @change="optionsStatsChange" :value="optionsStatsIndex" :range="optionsStatsNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!optionsStatsName?'addForm-input-placeholder':''">
							{{optionsStatsName?optionsStatsName:'选择设备属性'}}
						</view>
					</picker>
				</view>
				<!-- 自适配循环设备属性列表 -->
				<view class="for-addForm-max-input-box" v-if="modelList[0]">
					<view class="for-addForm-input-box" v-for="(item,index) in modelList" :key="index">
						<view class="addForm-input-icon">{{item.required?'*':''}}</view>
						<view class="addForm-input-title">{{item.label}}：</view>
						<!-- 文本框/文本域 -->
						<input v-if="item.type == 'text' || item.type == 'textarea'" class="addForm-input"
							v-model="reservedField[item.field]" style="width:340rpx;" type="text" :maxlength="50"
							:placeholder="'输入'+item.label" placeholder-style="color:#999;">
						<!-- 密码框 -->
						<input v-if="item.type == 'password'" password class="addForm-input" 
							v-model="reservedField[item.field]" style="width:340rpx;" type="text" :maxlength="50" :placeholder="'输入'+item.label"
							placeholder-style="color:#999;">
						<!-- 计数器 -->
						<input v-if="item.type == 'number'" class="addForm-input" 
							v-model="reservedField[item.field]" style="width:340rpx;" type="number" :min="1" :max="9999" :maxlength="4" :placeholder="'输入'+item.label"
							placeholder-style="color:#999;">
						<!-- 下拉单选/单选 -->
						<picker v-if="item.type == 'select' || item.type == 'radio'" @change="(event)=>forSelectChange(item,event)"
							:value="iotParamValueModels[item.field+'Index']" :range="iotParamValueModels[item.field+'NameList']">
							<view class="addForm-input" style="width:340rpx;"
							:class="!iotParamValueModels[item.field+'Name']?'addForm-input-placeholder':''">
								{{iotParamValueModels[item.field+'Name']?iotParamValueModels[item.field+'Name']:'请选择'+item.label}}
							</view>
						</picker>
						<!-- 下拉多选/复选 -->
						<checkbox-group v-if="item.type == 'selectMultiple' || item.type == 'checkbox'" class="check-max-box"
							@change="(event)=>forSelectChange(item,event,index)" style="flex-wrap: wrap">
							<checkbox class="check-min-box" :value="minItem.dictValue" :checked="minItem.type"
								v-for="(minItem,minIndex) in iotParamValueModels[item.field+'List']" :key="minIndex">
								{{minItem.dictKey}}
							</checkbox>
						</checkbox-group>
					</view>
				</view>
				<!-- 校区 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">校区：</view>
					<picker @change="schoolChange" :value="schoolIndex" :range="schoolNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!schoolName?'addForm-input-placeholder':''">
							{{schoolName?schoolName:'选择校区'}}
						</view>
					</picker>
				</view>
				<!-- 楼栋 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">楼栋：</view>
					<picker @change="buildChange" :value="buildIndex" :range="buildNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!buildName?'addForm-input-placeholder':''">
							{{buildName?buildName:'选择楼栋'}}
						</view>
					</picker>
				</view>
				<!-- 楼层 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon">*</view>
					<view class="addForm-input-title">楼层：</view>
					<picker @change="floorChange" :value="floorIndex" :range="floorNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!floorName?'addForm-input-placeholder':''">
							{{floorName?floorName:'选择楼层'}}
						</view>
					</picker>
				</view>
				<!-- 实验室 -->
				<view class="addForm-input-box">
					<view class="addForm-input-icon"></view>
					<view class="addForm-input-title">实验室：</view>
					<picker @change="subChange" :value="subIndex" :range="subNameList">
						<view class="addForm-input" style="width:340rpx;"
						:class="!subName?'addForm-input-placeholder':''">
							{{subName?subName:'选择实验室'}}
						</view>
					</picker>
				</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="50"
						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 {
		iotTypeGetAllTypes,
		systemBuildingGetTreeList,
		laboratorySubRelInfoGetListByFloor,
		iotAttributeGetByTypeId,
		iotTypeGetParamByTypeId,
		iotDeviceAdd,
		iotDeviceUpdate,
		iotDeviceDetail
	} from '@/api/index.js'
	export default {
		data() {
			return {
				addForm: {
					state: true,
					deviceName: '',
					deviceNo: '',
					typeId: '',
					typeKey: '',
					typeName: '',
					attributeId: '',
					code: '',
					networkId: '',
					schoolId: '',
					schoolName: '',
					buildId: '',
					buildName: '',
					floorId: '',
					floorName: '',
					subjectId: '',
					subjectName: '',
					remark:'',
				},
				//设备类型下拉列表
				options: [],
				optionsNameList: [],
				optionsIndex: 0,
				optionsName: '',
				//设备属性下拉列表
				optionsStats: [],
				optionsStatsNameList: [],
				optionsStatsIndex: 0,
				optionsStatsName: '',
				//校区/楼栋/楼层树
				treeOptions: [],
				//校区
				schoolList: [],
				schoolNameList: [],
				schoolIndex: 0,
				schoolName: '',
				//楼栋
				buildList: [],
				buildNameList: [],
				buildIndex: 0,
				buildName: '',
				//楼层
				floorList: [],
				floorNameList: [],
				floorIndex: 0,
				floorName: '',
				//实验室
				subList: [],
				subNameList: [],
				subIndex: 0,
				subName: '',
				//模组数据
				modelList: [],
				reservedField: {},
				iotParamValueModels: {},
			}
		},
		onLoad(option) {
			this.iotTypeGetAllTypes();
			this.systemBuildingGetTreeList();
			if(option.id){
				this.iotDeviceDetail(option.id);
			}
		},
		onShow() {
		},
		methods: {
			//详情接口
			async iotDeviceDetail(id){
				const { data } = await iotDeviceDetail({id:id});
				if (data.code == 200) {
					this.$set(this,'addForm',{
							id: data.data.id,
							state: data.data.state,
							deviceName: data.data.deviceName,
							deviceNo: data.data.deviceNo,
							typeId: data.data.typeId,
							typeKey: data.data.typeKey,
							typeName: data.data.typeName,
							attributeId: data.data.attributeId,
							code: data.data.code,
							networkId: data.data.networkId,
							schoolId: data.data.schoolId,
							schoolName: data.data.schoolName,
							buildId: data.data.buildId,
							buildName: data.data.buildName,
							floorId: data.data.floorId,
							floorName: data.data.floorName,
							subjectId: data.data.subjectId,
							subjectName: data.data.subjectName,
							remark: data.data.remark,
					});
					this.$set(this, 'optionsName', data.data.typeName);
					//等待配置与字段获取到后跳转
					Promise.all([
						this.iotAttributeGetByTypeId(data.data.typeId),
						this.iotTypeGetParamByTypeId(data.data.typeId)
					]).then((result)=>{
						this.optionsStats.forEach((item) => {
							if(data.data.attributeId == item.id){
								this.$set(this,'optionsStatsName',item.name);
							}
						})
						this.getAddress(data.data);
						if(data.data.reservedField){
							this.getIotParamModels(data.data.reservedField);
						}
					}).catch((error) => {})
				}
			},
			//数据提交
			submitForm() {
				let self = this;
				if (!this.addForm.deviceName) {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请输入名称',
						duration: 1000
					});
					return
				}else if(!this.addForm.deviceNo){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请输入编号',
						duration: 1000
					});
					return
				}else if(!this.addForm.typeId){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请选择设备类型',
						duration: 1000
					});
					return
				}else if(!this.addForm.attributeId){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请选择设备属性',
						duration: 1000
					});
					return
				}else if(!this.addForm.schoolId){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请选择校区',
						duration: 1000
					});
					return
				}else if(!this.addForm.buildId){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请选择楼栋',
						duration: 1000
					});
					return
				}else if(!this.addForm.floorId){
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: '请选择楼层',
						duration: 1000
					});
					return
				}
				this.modelList.forEach((item) => {
					if(item.required){
						if(!this.reservedField[item.field]){
							uni.showToast({
								mask: true,
								icon: "none",
								position: "center",
								title: '请检查'+item.label,
								duration: 1000
							});
							return
						}
					}
				})
				let obj = {
					state:this.addForm.state,
					deviceName:this.addForm.deviceName,
					deviceNo:this.addForm.deviceNo,
					typeId:this.addForm.typeId,
					typeKey:this.addForm.typeKey,
					typeName:this.addForm.typeName,
					attributeId:this.addForm.attributeId,
					code:this.addForm.code,
					networkId:this.addForm.networkId,
					schoolId:this.addForm.schoolId,
					schoolName:this.addForm.schoolName,
					buildId:this.addForm.buildId,
					buildName:this.addForm.buildName,
					floorId:this.addForm.floorId,
					floorName:this.addForm.floorName,
					subjectId:this.addForm.subjectId,
					subjectName:this.addForm.subjectName,
					remark:this.addForm.remark,
					reservedField:JSON.stringify(this.reservedField),
				}
				uni.showModal({
					title:'警告',
					content:'是否确认提交?',
					showCancel: true,
					cancelColor:'#999999,',
					confirmColor: '#0183FA',
					success: (res) => {
						if(res.confirm){
							if(self.addForm.id){
								obj.id = self.addForm.id;
								self.iotDeviceUpdate(obj);
							}else{
								self.iotDeviceAdd(obj);
							}
						}
					},
					fail: (res) => {}
				})
			},
			async iotDeviceAdd(obj){
				const { data } = await iotDeviceAdd(obj);
				if (data.code == 200) {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: data.message,
						duration: 2000
					});
					setTimeout(function(){
							uni.navigateBack();
					},1800);
				}
			},
			async iotDeviceUpdate(obj){
				const { data } = await iotDeviceUpdate(obj);
				if (data.code == 200) {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: data.message,
						duration: 2000
					});
					setTimeout(function(){
							uni.navigateBack();
					},1800);
				}
			},
			//设备类型选中
			optionsChange(event) {
				this.$set(this, 'optionsIndex', event.target.value);
				this.$set(this, 'optionsName', this.options[event.target.value].typeName);
				this.$set(this.addForm, 'typeId', this.options[event.target.value].typeId);
				this.$set(this.addForm, 'typeKey', this.options[event.target.value].typeKey);
				this.$set(this.addForm, 'typeName', this.options[event.target.value].typeName);
				this.$set(this.addForm, 'attributeId', '');
				this.$set(this.addForm, 'code', '');
				this.$set(this.addForm, 'networkId', '');
				this.$set(this, 'optionsStatsIndex', 0);
				this.$set(this, 'optionsStatsName', '');
				this.iotAttributeGetByTypeId(this.options[event.target.value].typeId);
				this.iotTypeGetParamByTypeId(this.options[event.target.value].typeId);
			},
			//设备属性选中
			optionsStatsChange(event) {
				if (this.optionsStats[0]) {
					this.$set(this, 'optionsStatsIndex', event.target.value);
					this.$set(this, 'optionsStatsName', this.optionsStats[event.target.value].name);
					this.$set(this.addForm, 'attributeId', this.optionsStats[event.target.value].id);
					this.$set(this.addForm, 'code', this.optionsStats[event.target.value].code);
					this.$set(this.addForm, 'networkId', this.optionsStats[event.target.value].networkId);
				}
			},
			//状态开关
			switchChange(event) {
				this.$set(this.addForm, 'state', event.target.value);
			},
			//获取物联分类下拉列表
			async iotTypeGetAllTypes() {
				const {
					data
				} = await iotTypeGetAllTypes();
				if (data.code == 200) {
					this.$set(this, 'options', data.data);
					let list = [];
					data.data.forEach((item) => {
						list.push(item.typeName);
					})
					this.$set(this, 'optionsNameList', list);
				}
			},
			//通过设备类型查询设备属性
			async iotAttributeGetByTypeId(val) {
				const {
					data
				} = await iotAttributeGetByTypeId({
					typeId: val
				});
				if (data.code == 200) {
					this.$set(this, 'optionsStats', data.data);
					let list = [];
					data.data.forEach((item) => {
						list.push(item.name);
					})
					this.$set(this, 'optionsStatsNameList', list);
				}
			},
			//设备类型配置查询
			async iotTypeGetParamByTypeId(val) {
				const {
					data
				} = await iotTypeGetParamByTypeId({
					typeId: val
				});
				if (data.code == 200) {
					let reservedField = {};
					let iotParamValueModels = {};
					data.data.forEach((item) => {
						reservedField[item.field] = '';
						if (item.type == 'select' || item.type == 'selectMultiple' || item.type == 'radio' || item.type == 'checkbox') {
							let list = [];
							if (item.iotParamValueModels) {
								item.iotParamValueModels.forEach((minItem) => {
									list.push(minItem.dictKey)
									minItem.type = false;
								})
							}
							iotParamValueModels[item.field + 'List'] = item.iotParamValueModels ? item.iotParamValueModels : [];
							iotParamValueModels[item.field + 'NameList'] = list;
							iotParamValueModels[item.field + 'Index'] = 0;
							iotParamValueModels[item.field + 'Name'] = '';
						}
					})
					
					this.$set(this, 'modelList', data.data);
					this.$set(this, 'reservedField', reservedField);
					this.$set(this, 'iotParamValueModels', iotParamValueModels);
				}
			},
			/***************** 自适配循环设备列表操作 *****************/
			forSelectChange(item, event, index) {
				if (item.type == 'select' || item.type == 'radio') {
					this.$set(this.iotParamValueModels, [item.field + 'Index'], event.target.value);
					this.$set(this.iotParamValueModels, [item.field + 'Name'], this.iotParamValueModels[item.field + 'List'][event
						.target.value
					].dictKey);
					this.$set(this.reservedField, [item.field], this.iotParamValueModels[item.field + 'List'][event.target.value]
						.dictValue);
				} else if (item.type == 'selectMultiple' || item.type == 'checkbox') {
					this.modelList[index].iotParamValueModels.forEach((maxItem) => {
						let num = 0;
						event.target.value.forEach((bigItem) => {
							if(bigItem == maxItem.dictValue){
								num++
							}
						})
						if(num == 0){
							maxItem.type = false;
						}else{
							maxItem.type = true;
						}
					})
					this.$set(this.reservedField, [item.field], event.target.value);
				}
			},
			/***************** 地址查询相关 *****************/
			//楼栋tree列表
			async systemBuildingGetTreeList() {
				const {
					data
				} = await systemBuildingGetTreeList();
				if (data.code == 200) {
					this.$set(this, 'treeOptions', data.data);
					let list = [];
					let nameList = [];
					data.data.forEach((item) => {
						list.push({
							id: item.id,
							name: item.name
						})
						nameList.push(item.name);
					})
					this.$set(this, 'schoolList', list);
					this.$set(this, 'schoolNameList', nameList);
				}
			},
			//校区选中
			schoolChange(event) {
				if (this.schoolList[0]) {
					this.$set(this, 'schoolIndex', event.target.value);
					this.$set(this, 'schoolName', this.schoolList[event.target.value].name);
					this.$set(this.addForm, 'schoolId', this.schoolList[event.target.value].id);
					this.$set(this.addForm, 'schoolName', this.schoolList[event.target.value].name);
					this.$set(this.addForm, 'buildId', '');
					this.$set(this.addForm, 'buildName', '');
					this.$set(this.addForm, 'floorId', '');
					this.$set(this.addForm, 'floorName', '');
					this.$set(this.addForm, 'subjectId', '');
					this.$set(this.addForm, 'subjectName', '');
					let list = [];
					let nameList = [];
					this.treeOptions.forEach((item) => {
						if (this.schoolList[event.target.value].id == item.id && item.buildFloorVoList[0]) {
							item.buildFloorVoList.forEach((minItem) => {
								list.push({
									id: minItem.id,
									name: minItem.name
								})
								nameList.push(minItem.name);
							})
						}
					})
					this.$set(this, 'buildList', list);
					this.$set(this, 'buildNameList', nameList);
					this.$set(this, 'buildIndex', 0);
					this.$set(this, 'buildName', '');
					this.$set(this, 'floorList', []);
					this.$set(this, 'floorNameList', []);
					this.$set(this, 'floorIndex', 0);
					this.$set(this, 'floorName', '');
					this.$set(this, 'subList', []);
					this.$set(this, 'subNameList', []);
					this.$set(this, 'subIndex', 0);
					this.$set(this, 'subName', '');
				}
			},
			//楼栋选中
			buildChange(event) {
				if (this.buildList[0]) {
					this.$set(this, 'buildIndex', event.target.value);
					this.$set(this, 'buildName', this.buildList[event.target.value].name);
					this.$set(this.addForm, 'buildId', this.buildList[event.target.value].id);
					this.$set(this.addForm, 'buildName', this.buildList[event.target.value].name);
					this.$set(this.addForm, 'floorId', '');
					this.$set(this.addForm, 'floorName', '');
					this.$set(this.addForm, 'subjectId', '');
					this.$set(this.addForm, 'subjectName', '');
					let list = [];
					let nameList = [];
					this.treeOptions.forEach((item) => {
						if (this.addForm.schoolId == item.id && item.buildFloorVoList[0]) {
							item.buildFloorVoList.forEach((maxItem) => {
								if (this.buildList[event.target.value].id == maxItem.id && maxItem.buildFloorVoList[0]) {
									maxItem.buildFloorVoList.forEach((minItem) => {
										list.push({
											id: minItem.id,
											name: minItem.name
										})
										nameList.push(minItem.name);
									})
								}
							})
						}
					})
					this.$set(this, 'floorList', list);
					this.$set(this, 'floorNameList', nameList);
					this.$set(this, 'floorIndex', 0);
					this.$set(this, 'floorName', '');
					this.$set(this, 'subList', []);
					this.$set(this, 'subNameList', []);
					this.$set(this, 'subIndex', 0);
					this.$set(this, 'subName', '');
				}
			},
			//楼层选中
			floorChange(event) {
				if (this.floorList[0]) {
					this.$set(this, 'floorIndex', event.target.value);
					this.$set(this, 'floorName', this.floorList[event.target.value].name);
					this.$set(this.addForm, 'floorId', this.floorList[event.target.value].id);
					this.$set(this.addForm, 'floorName', this.floorList[event.target.value].name);
					this.$set(this.addForm, 'subjectId', '');
					this.$set(this.addForm, 'subjectName', '');
					this.laboratorySubRelInfoGetListByFloor(this.floorList[event.target.value].id);
				}
			},
			//实验室选中
			subChange(event) {
				if (this.subList[0]) {
					this.$set(this, 'subIndex', event.target.value);
					this.$set(this, 'subName', this.subList[event.target.value].subName);
					this.$set(this.addForm, 'subjectId', this.subList[event.target.value].subId);
					this.$set(this.addForm, 'subjectName', this.subList[event.target.value].subName);
				}
			},
			//查询实验室
			async laboratorySubRelInfoGetListByFloor(floorId) {
				const {
					data
				} = await laboratorySubRelInfoGetListByFloor({
					floorId: floorId
				});
				if (data.code == 200) {
					this.$set(this, 'subList', data.data);
					let list = [];
					data.data.forEach((item) => {
						list.push(item.subName);
					})
					this.$set(this, 'subNameList', list);
					this.$set(this, 'subIndex', 0);
					this.$set(this, 'subName', '');
				}
			},
			//编辑匹配位置数据
			async getAddress(item){
				if(item.schoolId){
					this.$set(this, 'schoolName', item.schoolName);
					let buildList = [];
					let buildNameList = [];
					let floorList = [];
					let floorNameList = [];
					this.treeOptions.forEach((maxItem) => {
						if (item.schoolId == maxItem.id && maxItem.buildFloorVoList[0]) {
							maxItem.buildFloorVoList.forEach((bigItem) => {
								buildList.push({
									id: bigItem.id,
									name: bigItem.name
								})
								buildNameList.push(bigItem.name);
								if(item.buildId){
									this.$set(this, 'buildName', item.buildName);
									if(item.buildId == bigItem.id && bigItem.buildFloorVoList[0]){
										bigItem.buildFloorVoList.forEach((minItem) => {
											floorList.push({
												id: minItem.id,
												name: minItem.name
											})
											floorNameList.push(minItem.name);
										})
										if(item.floorId){
											this.$set(this, 'floorName', item.floorName);
										}
									}
								}
							})
						}
					})
					this.$set(this, 'buildList', buildList);
					this.$set(this, 'buildNameList', buildNameList);
					this.$set(this, 'floorList', floorList);
					this.$set(this, 'floorNameList', floorNameList);
					if(item.schoolId && item.buildId && item.floorId){
							const {
								data
							} = await laboratorySubRelInfoGetListByFloor({
								floorId: item.floorId
							});
							if (data.code == 200) {
								this.$set(this, 'subList', data.data);
								let list = [];
								data.data.forEach((subItem) => {
									list.push(subItem.subName);
								})
								this.$set(this, 'subNameList', list);
								this.$set(this, 'subIndex', 0);
								if(item.subjectId){
									this.$set(this, 'subName', item.subjectName);
								}
							}
					}
				}
			},
			//适配循环数据
			getIotParamModels(text){
				let list = JSON.parse(text)
				this.$set(this,'reservedField',list);
				this.modelList.forEach((maxItem) => {
					if(maxItem.type == 'select' || maxItem.type == 'radio'){
						this.iotParamValueModels[maxItem.field + 'List'].forEach((bigItem) => {
							if(bigItem.dictValue == this.reservedField[maxItem.field]){
								this.$set(this.iotParamValueModels, [maxItem.field + 'Name'], bigItem.dictKey);
							}
						})
					}else if(maxItem.type == 'selectMultiple' || maxItem.type == 'checkbox'){
						maxItem.iotParamValueModels.forEach((bigItem) => {
							let num = 0;
							list[maxItem.field].forEach((minItem) => {
								if(bigItem.dictValue == minItem){
									num++
								}
							})
							if(num == 0){
								bigItem.type = false;
							}else{
								bigItem.type = true;
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#iotDevice-add-page {
		display: flex;
		flex: 1;
		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;

				.for-addForm-max-input-box {
					border-top: 1px solid #dedede;
					border-bottom: 1px solid #dedede;
					margin-top: 30rpx;
					padding-bottom: 30rpx;

					.for-addForm-input-box {
						display: flex;
						margin: 10rpx 0 0 10rpx;
						padding: 20rpx 0 0 0;
						font-size: 28rpx;

						.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-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;
						}

						.check-max-box {
							width: 400rpx;

							.check-min-box {
								margin: 10rpx 10rpx 0 0;
								font-size: 26rpx;
								line-height: 30rpx;
							}
						}
					}
				}

				.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-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>