element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现

简介: element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现

实现代码


在做这块儿的时候,原来想的是,直接在元素个数的改变事件里把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);
  }


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

目录
相关文章
|
2月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
311 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
194 0
|
4月前
|
JavaScript
基于Element UI或Element Plus实现具有倒计时的Message消息提示
本文介绍了如何在Element UI或Element Plus框架中实现具有倒计时功能的消息提示组件,支持多次点击生成多个独立倒计时的消息提示,并提供了详细的实现代码和使用示例。
397 1
|
3月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
162 2
|
4月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
134 0
|
4月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
462 0
Element UI & Element Plus之改变表格单元格颜色
|
4月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
135 0
|
4月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
363 0
|
4月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
239 0
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
112 0

热门文章

最新文章

相关实验场景

更多