<template> <div id="content"> <div v-if="formAll&&formAllBody&&formAllBody.length" style="text-align:left;padding:10px"> <el-select v-model="querySite" @change="selectChange"> <el-option v-for="item in querySiteList" :key="item" :label="item" :value="item" > <span style="float: left">{{ item }}</span> </el-option> </el-select> <el-button type="primary" @click="echoClick"> 回显 </el-button> <el-button type="primary" @click="temStorage"> 暂存 </el-button> <el-button type="primary" @click="temStorageEcho"> 暂存回显 </el-button> <el-button type="primary" @click="sunmitAll"> 提交 </el-button> </div> <div id="navMenuContent"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card"> <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="index">{{item}}</el-menu-item> </el-menu> </div> <div class="switchContent"> <div v-if="formAll&&formAllBody&&formAllBody.length"> <div v-for="(formItem,formItemIndex) in formAll" :key="formItemIndex"> <el-form v-show="formItem[`form${formItemIndex+1}Show`]" :model="formItem[`form${formItemIndex+1}`]" :rules="rules" ref="form" class="demo-ruleForm" label-position="right" label-width="130px" size="mini" > <!-- {{`form${index+1}`}} --> <el-row v-for="(i,index) in formAllBody[formItemIndex+1] " :key="index" class="rowClass"> <el-col :span="6" v-if="i.name" class="subTitle">{{i.name}}</el-col> <el-col :span="6" v-for="(item,index) in i.data " :key="index" style="position:relative"> <el-form-item v-if="parseInt(item.fieldType) === 1" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input"> <el-input v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark"><i slot="suffix">{{item.unit}}</i></el-input> </el-form-item> <el-form-item v-if="parseInt(item.fieldType) === 2" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input"> <el-select v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark"> <el-option v-for="item in creatListTest(item.selectOption)" :key="item.code" :label="item.value" :value="item.value" > <span style="float: left">{{ item.value }}</span> </el-option> </el-select> </el-form-item> <el-form-item v-if="parseInt(item.fieldType) === 3" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input form-switch"> <el-switch v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item v-if="parseInt(item.fieldType) === 5" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input"> <el-input v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark"><i slot="suffix">{{item.unit}}</i></el-input> </el-form-item> <div v-if="parseInt(item.fieldType) === 4" class="input-switch-div"> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <!-- <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${0}`]" :placeholder="item.validatorMark"></el-input> --> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${0}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1;"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${0}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${1}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${1}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${2}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${2}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${3}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${3}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${4}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1;"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${4}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${5}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${5}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${6}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${6}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1"> <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${7}`]" :placeholder="item.validatorMark"></el-input> </el-form-item> <el-form-item class="el-form-item-input input-switch" style="flex:1"> <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${7}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </el-form-item> </div> <el-form-item v-if="parseInt(item.fieldType) === 6" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input"> <el-select v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark" multiple collapse-tags> <el-option v-for="(item,index) in creatListTest(item.selectOption)" :key="item.code" :label="item.value" :value="index" > <span style="float: left">{{ item.value }}</span> </el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> </div> </div> </div> </div> </template> <script> export default { data() { return { querySite:'2020081800', rtuCode:'', querySiteList:[], siteNameList:['遥测站设置','中心站设置','传感器型号选择','气象传感通信设置','工业相机设置','水文传感通信','从机设置', '数据滤波','水位计','雨量计','流量计','蒸发皿','土壤沉降仪','4-20mA设置','其他设置'], formAll:[], // siteNameList:[], formAllBody:[], activeIndex: '0', rules:{}, }; }, mounted() { }, methods: { echoClick(){ this.formAll=[] this.activeIndex = '0' this.initPage(this.querySite) // this.handleSelect(0) // console.log(this.activeIndex) }, temStorageEcho(){ // this.activeIndex = '0' // console.log(JSON.parse(sessionStorage.getItem(name)),111) this.formAll = JSON.parse(sessionStorage.getItem(name)) }, temStorage(){ try{ sessionStorage.setItem(name, JSON.stringify(this.formAll)); this.$message({message: `保存成功`,type: "success"}); } catch(err) { this.$message({message: err,type: "warning"}); } // localStorage.getItem(name); // console.log(sessionStorage.getItem(name),111) }, sunmitAll(){ // 提交所有表单,循环校验所有表单,当有个表单校验失败就break,提示该表单校验失败,根据校验成功总数或者无失败确定完成,组装数据发送到后台 var successCount = 0 var successFlag = false for(var i = 0; i<15;i++){ this.$refs['form'][i].validate((valid) => { if (valid) { successCount++ } else { // this.$message({message: `${this.siteNameList[i]} 校验失败,请查看`,type: "warning"}); // alert(`${this.siteNameList[i]} 校验失败,请查看`); // this.$notify({ // title: '警告', // message: `${this.siteNameList[i]} 校验失败,请查看`, // type: 'warning' // }); successFlag = true // return false; } }); // if(successFlag){ // return false // } } if(successCount === this.siteNameList.length){ this.$message({message: '表单全部校验成功',type: "success"}); }else{ // this.$message({message: `第${i}个表单校验失败,请查看`,type: "warning"}); } // 组装数据需要的属性,暂时是死值,也可以循环出来 const parmas ={ data:{ rtuCode:this.rtuCode, rtuTelemeteringStationSetting:this.formAll[0].form1, rtuCentreSetting:this.formAll[1].form2, rtuSenseTypeSetting:this.formAll[2].form3, rtuMeteorologicalSensingCommunicationSetting:this.formAll[3].form4, rtuIndustrialCameraSetting:this.formAll[4].form5, rtuHydrologicSensingCommunication:this.formAll[5].form6, rtuSlaveSetting:this.formAll[6].form7, rtuDataFilter:this.formAll[7].form8, rtuWaterLevelSetting:this.formAll[8].form9, rtuRainSetting:this.formAll[9].form10, rtuFlowmeterSetting:this.formAll[10].form11, rtuEvaporatingDishSetting :this.formAll[11].form12, rtuSoilSettler:this.formAll[12].form13, rtu4To20Setting:this.formAll[13].form14, rtuOtherSetting:this.formAll[14].form15 } } // 之前初始化时将3处的两个数组生成了需要的字段,现在需要把每处16个字段组装成两数组,删除不需要的字段,转化方法暂时写在这里 function dealInputSwitch(str='rtushuiwen_shangqingarrInt',strBool='rtushuiwen_shangqingarrboolean'){ var form6Input=[]; var form6Switch=[]; var strTarget='rtuHydrologicSensingCommunication' for(let i =0;i<8;i++){ var hasInput = parmas.data[strTarget].hasOwnProperty(`${str}input${i}`) if(hasInput){ form6Input[i]=parmas.data[strTarget][`${str}input${i}`] }else{ form6Input[i]= null } parmas.data[strTarget][str]=form6Input delete parmas.data[strTarget][`${str}input${i}`] var hasSwitch = parmas.data[strTarget].hasOwnProperty(`${str}switch${i}`) if(hasSwitch){ form6Switch[i]=parmas.data[strTarget][`${str}switch${i}`] }else{ form6Switch[i]= false } parmas.data[strTarget][strBool]=form6Switch delete parmas.data[strTarget][`${str}switch${i}`] } } dealInputSwitch('rtushuiwen_shangqingarrInt','rtushuiwen_shangqingarrboolean'); dealInputSwitch('rtushuiwen_chenjiangarrInt','rtushuiwen_chenjiangarrboolean'); dealInputSwitch('rtushuiwen_zhaweiarrInt','rtushuiwen_zhaweiarrboolean'); let rtuAddUpTimes= parmas.data['rtuTelemeteringStationSetting']['rtuAddUpTimes'].sort((item1, item2) => item1 - item2) let rtucamera_jiabao= parmas.data['rtuIndustrialCameraSetting']['rtucamera_jiabao'].sort((item1, item2) => item1 - item2) let rtuAddUpTimesNew=[] let rtucamera_jiabaoNew=[] // console.log(rtuAddUpTimes,'rtuAddUpTimes') for(var i =0;i<24;i++){ rtuAddUpTimesNew.push(0) rtucamera_jiabaoNew.push(0) } rtuAddUpTimes.forEach((item,index)=>{rtuAddUpTimesNew[item]= 1}) rtucamera_jiabao.forEach((item,index)=>{rtucamera_jiabaoNew[item]= 1}) parmas.data['rtuTelemeteringStationSetting']['rtuAddUpTimes'] = rtuAddUpTimesNew parmas.data['rtuIndustrialCameraSetting']['rtucamera_jiabao'] = rtucamera_jiabaoNew this.$http.post(`${this.nozzle.rTUSettingServiceUpdate}`,parmas).then(res=>{ // console.log(res,'rTUSettingServiceUpdate') this.echoClick() }) // console.log(parmas,'form6Inputform6Input') // this.formAll=[] // this.initPage(this.querySiteList[1]) }, creatListTest(arr){ var arrList = arr.split(',') // console.log(arrList,'arrrrrrrr') let list = arrList.map((item,index)=>{ let obj={};obj['code']=index;obj['value']=item;return obj }) return list }, creatList(arr){ // 下拉框需要的option数据,ele需要value和lable,value是点击后的字段值,lable是展示值 let list = arr.map((item,index)=>{ let obj={};obj['code']=index+1;obj['value']=item;return obj }) return list }, handleSelect(key) { this.activeIndex = key // console.log(key) for(var i = 0;i<15;i++){ if(key != i){ this.formAll[i][`form${i+1}Show`]= false }else{ this.formAll[i][`form${i+1}Show`]= true } } }, selectChange(val){ // console.log(val,'val') this.echoClick(val) }, async initPage(site){ // 回显接口请求数据 将水文传感里面3处特殊的控件需要的值,用请求数据遍历生成表单需要的字段,因为这3处的动态表单使用的是死的字段,其他的对应的表单数据赋值给对应表单就能回显了、 let resFirst = await this.$http.post(`${this.nozzle.rTUSettingServiceQueryById}?code=${site}`) let resData = resFirst.data.data let formArr=['rtuTelemeteringStationSetting','rtuCentreSetting','rtuSenseTypeSetting','rtuMeteorologicalSensingCommunicationSetting','rtuIndustrialCameraSetting','rtuHydrologicSensingCommunication', 'rtuSlaveSetting','rtuDataFilter','rtuWaterLevelSetting','rtuRainSetting','rtuFlowmeterSetting','rtuEvaporatingDishSetting','rtuSoilSettler','rtu4To20Setting','rtuOtherSetting'] // console.log(this.formAll,'ressssss') // this.formAll={} this.rtuCode = resData.rtuCode for(let i = 1;i<=15;i++){ let obj ={}; // 水文传感里是第6个表单 if(i!==6 && i!==1&& i!==5){ obj[`form${i}`]=resData[formArr[i-1]] }else if(i===1){ var formObj = Object.assign(resData[formArr[i-1]]) var rtuAddUpTimesNew=[] if(!formObj.hasOwnProperty('rtuAddUpTimes')){ return } formObj.rtuAddUpTimes.forEach((res,index)=>{ if(res===1){ rtuAddUpTimesNew.push(index) } }) // form1Obj.hasOwnProperty('rtuAddUpTimes') formObj.rtuAddUpTimes=rtuAddUpTimesNew // console.log(form1Obj,'form1Obj') obj[`form${i}`]=formObj }else if(i===5){ let formObj = Object.assign(resData[formArr[i-1]]) let rtucamera_jiabaoNew=[] if(!formObj.hasOwnProperty('rtucamera_jiabao')){ return } formObj.rtucamera_jiabao.forEach((res,index)=>{ if(res===1){ rtucamera_jiabaoNew.push(index) } }) formObj.rtucamera_jiabao=rtucamera_jiabaoNew // console.log(form1Obj,'form1Obj') obj[`form${i}`]=formObj }else if(i===6){ var form6Obj = resData[formArr[i-1]] // 每一处需要input switch各8个共16个模拟字段,只处理第6个表单 function creatInputSwitch(str,strBool){ if(form6Obj.hasOwnProperty(str)&&form6Obj.hasOwnProperty(strBool)){ for(let i=0;i<8;i++){ form6Obj[`${str}input${i}`]= form6Obj[str][i] form6Obj[`${str}switch${i}`]= form6Obj[strBool][i] } delete form6Obj[str] delete form6Obj[strBool] } } creatInputSwitch('rtushuiwen_shangqingarrInt','rtushuiwen_shangqingarrboolean'); creatInputSwitch('rtushuiwen_chenjiangarrInt','rtushuiwen_chenjiangarrboolean'); creatInputSwitch('rtushuiwen_zhaweiarrInt','rtushuiwen_zhaweiarrboolean'); obj[`form${i}`]=form6Obj } if(i!==1){ obj[`form${i}Show`]=false }else{ obj[`form${i}Show`]=true } // 表单数据赋值完成,控制表单切换的formshow,也放在一起了 this.formAll.push(obj) // console.log(this.formAll,'this.formAll') } }, validatorAll(rule, value, callback,type,sug,alart){ let typeLocal = type; let sugLocal = sug; let alartLocal = alart; // 数字范围、数字长度、字符串长度、正则等 if(value&&parseInt(typeLocal) === 1){ // 数字范围 if(value !== undefined){ let sug1=parseInt(sugLocal.split(',')[0]) let sug2=parseInt(sugLocal.split(',')[1]) if(sug1<=value && value<=sug2){callback()}else{callback(new Error(alartLocal))} }else{ callback() } }else if(value&&parseInt(typeLocal) === 2 &&sugLocal){ // 正则 let regExp =sugLocal.slice(1,-1) let reg = new RegExp(regExp) if(reg.test(value)){ callback() }else{ callback(new Error(alartLocal)) } }else if(value&&parseInt(typeLocal) === 3){ if(sugLocal === undefined || sugLocal === ''){ // 下拉框 不显示错误信息 callback() }else{ // console.log(value,sugLocal.indexOf(','),'value') if(sugLocal.indexOf(',') !== -1){ // 带,的是范围,不带则是固定长度 let sug1=parseInt(sugLocal.split(',')[0]) let sug2=parseInt(sugLocal.split(',')[1]) if(value.length >=sug1 && value.length <=sug2){callback()}else{callback(new Error(alartLocal))} }else if(sugLocal.indexOf(',') === -1){ // console.log(sugLocal.indexOf(','),parseInt(sugLocal)) if(value.length === parseInt(sugLocal)){callback()}else{callback(new Error(alartLocal))} } } }else if(value&&parseInt(typeLocal) === 4){ if(sugLocal === undefined || sugLocal === ''){ callback() }else{ let sug1=parseInt(sugLocal.split(',')[0]) let sug2=parseInt(sugLocal.split(',')[1]) if(sug1<=value && value<=sug2){callback()}else{callback(new Error(alartLocal))} } }else if(value&&parseInt(typeLocal) === 5){ // console.log(value,'value') if(typeof value !== 'number'){ callback(new Error('请输入纯数字')) }else{ let sug1=parseInt(sugLocal.split(',')[0]) let sug2=parseInt(sugLocal.split(',')[1]) if(sug1<=value && value<=sug2){callback()}else{callback(new Error(alartLocal))} } }else{callback()} }, formControl(){ function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ temp.push(array[i]); } } return temp; } // 生成表单控件的接口 this.$http.post(this.nozzle.rtuPageQueryPage).then(res=>{ var dataRes = res.data.data // console.log(dataRes,'dataRes') for(var i in dataRes){ if(dataRes[i].length !==0){ dataRes[i].forEach((item,index,arr) =>{ this.rules[item.fieldIdentifier] = [{ validator: (rule, value, callback)=>{this.validatorAll(rule, value, callback,item.validatorType,item.validatorRules,item.validatorErrorText)}, trigger: 'change' }] }) let sub_titleList = dataRes[i].map(item=>{ return item.subTitle }) var newObj =[] // 根据小标题去重 uniq(sub_titleList).forEach(item=>{ var obj={name:item,data:[]} var data = dataRes[i].forEach(l=>{ if(l.subTitle === item && l.subTitle!=='' &&l.subTitle!==undefined){ obj.data.push(l) }else if(l.subTitle==='' || l.subTitle===undefined){ obj.data.push(l) } }) if(obj.name ===undefined){ return } // obj.data= data 将后台数据生成带有小标题的 newObj.push(obj) }) this.$set(this.formAllBody,i,newObj) } } }) }, async getSiteList(){ await this.$http.post(this.nozzle.rTUSettingServiceQueryList).then(res=>{ // console.log(res.data.data,'resss') this.querySiteList = res.data.data }) } }, created(){ this.getSiteList().then(res=>{ this.initPage(this.querySiteList[1]); }); this.formControl(); }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` this.$confirm("请检查是否需要暂存!", "提示", { confirmButtonText: "已暂存", cancelButtonText: "取消", type: "warning" }).then(res=>{ next() }).catch(() => {}); } }; </script> <style scoped> #content{ width: 100%; height: 100%; } #navMenuContent { /* height: calc(100% - 20px); width: calc(100% - 20px); float: left; border: 1px solid aqua; box-sizing: border-box; margin: 10px; position: relative; */ width: 100%; /* background-color: #fff; */ } .switchContent{ color: rgb(99, 96, 96); /* background-color: #fff; */ /* background-color: #fff; */ padding: 2%; } /deep/.el-form-item { /* color: red!important; */ } .el-menu-item.is-active{ background-color: #fff !important; } .el-menu-item:hover{ background-color: #fff !important; } /deep/.el-form-item__content .el-input .el-input__inner{ color: black !important; } /deep/.el-form-item__content i{ font-style:normal; padding-right: 5px; } .el-form-item, .el-form-item-input{ margin:11px 0 11px 0 } /deep/.rowClass .subTitle{ /* height:40px!important; */ line-height:51px; color:aqua; /* margin-top: 11px; */ } .demo-ruleForm .rowClass:nth-child(2n) { /* background-color: pink; */ } /deep/.el-col .input-switch .el-form-item-input{ /* display: flex; */ margin: initial!important; } /deep/.rowClass .el-col{ height: 51px!important; } /deep/.form-switch .el-form-item__label{ width: 180px!important; } /deep/.form-switch .el-form-item__content{ width: 150px!important; margin-left: 150px!important; } /deep/.input-switch .el-form-item__content{ margin-left: 0!important; } /deep/.rowClass .el-form-item__label{ /* line-height: initial; */ } .input-switch-div{ position:absolute;left:0;top:0;width:1000px;display:flex } /deep/.el-col .input-switch-div .el-form-item__content{ width: 66px; } </style>