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


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

目录
相关文章
|
4月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
425 12
|
4月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
993 0
|
5月前
|
定位技术 容器
48.[HarmonyOS NEXT RelativeContainer案例五] 精确表单布局:辅助线定位技术打造专业级UI
在HarmonyOS NEXT的UI开发中,表单是常见且重要的界面元素。创建对齐精确、布局合理的表单需要精细的定位控制。RelativeContainer提供的辅助线(Guideline)功能,为表单布局提供了强大的支持。本教程将详细讲解如何使用RelativeContainer的辅助线功能实现精确的表单布局,帮助你掌握这一专业级UI技术。
145 7
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
965 0
|
6月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
215 15
|
6月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
240 11
|
2月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
258 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
5月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
231 56
|
5月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
318 55
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
552 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章