做平台好还是自己建网站,即刻搜索,天津专门做企业网站公司,网站整体架构大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂 前言
现在是2022年5月3日13:35:15#xff01;文接上篇。[element ui实现多层级复杂表单的操作#xff08;添加与回显#xff09;之表单操作交互操作](element ui实现多层级复杂表单的操… 大家好我是雄雄欢迎关注微信公众号雄雄的小课堂 前言
现在是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.dataSourseConfigListthis.formList;//清空this.deviceDataList[];//for(var i 0;ithis.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);//遍历ListListDataSourceConfig dataSourseConfigList device.getDataSourseConfigList();for (int i 0;idataSourseConfigList.size();i){ListDataSourceConfig 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;jobjList.size();j){dataSourceType objList.get(j).getDataSourceType(),;unitCode objList.get(j).getUnitCode(),;dataTypeobjList.get(j).getDataType(),;metricSpecobjList.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);}以上就是整个功能的实现基本上都有注释代码不详细说明了。
