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);
  }


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

目录
相关文章
|
3月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
389 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
3月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
250 0
|
5月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
139 0
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
171 3
|
23天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
8月前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
2月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
151 8
|
3月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
107 1

热门文章

最新文章