element ui实现多层级复杂表单的操作（添加与回显）之添加功能实现_vue 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.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);
        });
      });

    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

代码不详说，基本上都有注释。提交到后端的数据格式是这样的。

{
    "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": "描述描述穆雄雄的博客。雄雄的小课堂"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

按照请求的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);
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

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