大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂

前言

现在是2022年5月3日13:35:15！文接上篇。[element ui实现多层级复杂表单的操作（添加与回显）之表单操作交互操作](element ui实现多层级复杂表单的操作（添加与回显）之表单操作交互操作_穆雄雄的博客-CSDN博客)

上篇文章主要写了纯页面端的交互，包括一些判断，本篇文章我们来看看具体的功能实现。

实现代码

在做这块儿的时候，原来想的是，直接在元素个数的改变事件里把form的值赋上。直到最后，我发现元素个数后面还有个表单，一直没有赋值上，才觉得错了。

因为元素个数的表单改变完了之后，才去选择的后面的表单，所以值就赋不上，于是就想了个办法，在点击保存按钮的时候，给form中赋值。

下面是保存按钮的点击事件：

//保存的按钮rowSavesBtn(){//采集数据类型this.form.deviceData = '';for(var i = 0;i< this.deviceDataCheck.length;i++){this.form.deviceData+= this.deviceDataCheck[i]+",";}this.form.deviceData =   this.form.deviceData.toString();//配置信息的集合this.form.dataSourseConfigList = [];//直接将采集数据类型的这一堆  扔到集合里面this.form.dataSourseConfigList=this.formList;//清空this.deviceDataList=[];//for(var i = 0;i<this.attribute.length;i++){var dList = {deviceData: this.deviceDataCheck[i],samplingFrequency:this.samplingFrequency[i],schemeOfDataSourceType:this.schemeOfDataSourceType[i],countOfCompound:this.countOfCompound[i],measurePeriodExist:this.measurePeriodExist[i],};this.deviceDataList.push(dList);}this.form.deviceDataList =  this.deviceDataList;//验证sdk包名是否争取getDeviceByPackage(this.form.deviceSdkPackage).then((res) => {var code = res.data.msg;if (code != "1") {//验证通过了this.$message({type: "error",message: "SDK包名已使用，请重新更换!",});return false;}//调用添加的方法addDeviceNew(this.form).then(res=>{this.$message({type: "success",message: "操作成功!",});//告诉父组件，我这边操作完了this.$emit( 'addDeviceResult' , true);},error => {this.$message({type: "error",message: "操作失败!",});//告诉父组件，我这边操作完了this.$emit( 'addDeviceResult' , false);});});},

代码不详说，基本上都有注释。提交到后端的数据格式是这样的。

{"deviceData": "雄雄,的小课堂,","dataSourseConfigList": [[{"dataSourceType": "232342","unitCode": "4354","dataType": "1","metricSpec": "3"}],[{"dataSourceType": "6543","unitCode": "54654","dataType": "3","metricSpec": "1"},{"dataSourceType": "4343","unitCode": "2643434338","dataType": "1","metricSpec": "43"}]],"deviceDataList": [{"deviceData": "2e","samplingFrequency": 100,"schemeOfDataSourceType": "re","countOfCompound": 1,"measurePeriodExist": "1"},{"deviceData": "dss","samplingFrequency": 200,"schemeOfDataSourceType": "ds","countOfCompound": 2,"measurePeriodExist": "1"}],"name": "雄雄的小课堂","englishName": "雄雄的小课堂","deviceManufacturer": "雄雄的小课堂","deviceSdkPackage": "com.lifeteam.farbeat.雄雄的小课堂","deviceCommonName": "雄雄的小课堂","certificateId": "zhnegshubianhao","deviceDesc": "描述描述穆雄雄的博客。雄雄的小课堂"
}

按照请求的json格式数据，创建对应的实体类，然后在后台控制器中操作。这里因为业务的不一样，所以控制器中的代码可能也不尽相同。

我的业务是在添加设备的时候，还需要添加配置信息到库里面，下面是控制器中的代码：

/*** 新添加的方法  2022年5月1日19:50:36* 1.添加* 2.遍历集合，将信息添加到配置文件里面去* @param device* @return*/@PostMapping("/addDeviceNew")@ApiOperationSupport(order = 6)@ApiOperation(value = "新增或修改", notes = "传入device")public R addDeviceNew(@Valid @RequestBody Device device){//将设备可采集的数据类型最后的逗号截取掉String deviceData = device.getDeviceData().substring(0,device.getDeviceData().length()-1);device.setDeviceData(deviceData);device.setUserId(AuthUtil.getUserId());device.setUsername(AuthUtil.getUserName());//审核状态是 ：待提交device.setExamineStatus(0);//获取device.setEnterpriseName(clientUserService.getByUserId(AuthUtil.getUserId()).getEnterpriseName());//添deviceService.save(device);//遍历List<List<DataSourceConfig>> dataSourseConfigList = device.getDataSourseConfigList();for (int i = 0;i<dataSourseConfigList.size();i++){List<DataSourceConfig> objList = dataSourseConfigList.get(i);String dataCollectionType= device.getDeviceDataList().get(i).getDeviceData();Integer samplingFrequency = device.getDeviceDataList().get(i).getSamplingFrequency();String schemeOfDataSourceType =  device.getDeviceDataList().get(i).getSchemeOfDataSourceType();//Integer measurePeriodExist = device.getDeviceDataList().get(i).getMeasurePeriodExist();Integer countOfCompound= device.getDeviceDataList().get(i).getCountOfCompound();//String dataSourceType = "";String unitCode = "";String dataType = "";//String metricSpec = "";for(int j = 0;j<objList.size();j++){dataSourceType += objList.get(j).getDataSourceType()+",";unitCode += objList.get(j).getUnitCode()+",";dataType+=objList.get(j).getDataType()+",";metricSpec+=objList.get(j).getMetricSpec()+",";}DataSourceConfig dataSourceConfig = new DataSourceConfig();dataSourceConfig.setDeviceId(device.getId());dataSourceConfig.setDeviceName(device.getDeviceCommonName());datasourceConfig.setDataCollectionType(dataCollectionType);dataSourceConfig.setSamplingFrequency(samplingFrequency);dataSourceConfig.setSchemeOfDataSourceType(schemeOfDataSourceType);dataSourceConfig.setCountOfCompound(countOfCompound);dataSourceConfig.setMeasurePeriodExist(measurePeriodExist);dataSourceConfig.setBasePackage(device.getDeviceSdkPackage());dataSourceConfig.setDataSourceId( Math.abs((System.currentTimeMillis())));dataSourceConfig.setDataSourceType(dataSourceType.substring(0,dataSourceType.length()-1));dataSourceConfig.setUnitCode(unitCode.substring(0,unitCode.length()-1));dataSourceConfig.setDataType(dataType.substring(0,dataType.length()-1));dataSourceConfig.setMetricSpec(metricSpec.substring(0,metricSpec.length()-1));dataSourceConfigService.save(dataSourceConfig);}return R.status(true);}

以上就是整个功能的实现，基本上都有注释，代码不详细说明了。