前言
现在是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); }
以上就是整个功能的实现，基本上都有注释，代码不详细说明了。
