关于 vue+elementUI 的联级选择器 cascader

本案例为四级联查:  前端(vue+elementUI)     后端:(springboot+mybatis+mysql)

1,前端:

复制代码
<el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
    <el-form-item label="服务器ip/类型/版本/接口名称" prop="conditions">
      <el-cascader
         v-model="componentConditionOptions.componentConditions"
                 :options="conditionOptions"
                 style="width: 100%"
                 clearable></el-cascader>
        </el-form-item>
</el-dialog>


<script>
import {getCascader} from "@/views/demo/js/paramter";

export default {
  name: "Paramter",
  data() {
    return {      //只显示了与联查相关的代码了
      //服务器IP、组件类型、组件版本、接口名称查询条件
       conditionOptions:[],
          };
  },

  created() {     //页面加载时 加载的初始数据
        //联查
        this.getCascaderConditions();
     },

 methods: {

  getCascaderConditions(){
     getCascader().then(response => {
                   this.conditionOptions = response.data.icondition;
       });
  },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
           var conditionStr = this.componentConditionOptions.componentConditions;
            //由于后端接受的数据为String  必须将json转为String   ( 同样在修改回显数据时,通过后台将字段拼接好json型字符串,前台接受字符转再将字符串转为Json格式)
           this.form.conditions= JSON.stringify(conditionStr);
            updateParamter(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
           var conditionStr = this.componentConditionOptions.componentConditions;
           //这里也是将Json转为字符串传到后端
           this.form.conditions= JSON.stringify(conditionStr);
            addParamter(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
               //多级联查下拉框数据清空(注意:由于vue对象不清空数据会导致 下次点开编辑页面 数据自动填充)
              this.componentConditionOptions.componentConditions = null;
              
              this.getList();
            });
          }
        }
      });
    },

  }
}
       

</script>
复制代码

后端:

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
//在VO目录下里创建封装类
//创建IConditionVO 类
 
 
        import lombok.Data;
        import java.util.List;
      @Data
      public class IConditionVO {
         private  List<IServerIpVO> icondition;
      }
 
//创建IServerIpVO 类
 
     import lombok.Data;
     import java.util.List;
    @Data
     public class IServerIpVO {
        private String label;
       private String value;
       private List<ITypeVO> children;
     }
 
//创建ITypeVO 类
 
import lombok.Data;
import java.util.List;
 
@Data
public class ITypeVO {
    private String label;
    private String value;
    private List<IRevisionVO> children;
}
 
//创建IRevisionVO 类
 
import lombok.Data;
import java.util.List;
@Data
public class IRevisionVO {
    private String label;
    private String value;
    private List<IInterfacesVO> children;
}
 
//创建IInterfacesVO 类
import lombok.Data;
@Data
public class IInterfacesVO {
    private String label;
    private String value;
}
 
 
//获取的主表(关联查出的)
 
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.*;
import com.xxx.BaseEntity;
import springfox.documentation.spring.web.json.Json;
 
 
/**
 * 组件接口信息对象
 *
 * @author david
 * @date 2021-08-20
 */
@Builder
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class ComponentInterfaceInfo extends BaseEntity
{
    private static final long serialVersionUID = 1L;
 
    /** 组件接口主键 */
    private String id;
 
    /** 组件类型编号 */
    private String componentInterfaceTypeId;
 
    /** 服务器IP */
    private String serverIp;
 
    /** 组件接口编号 */
    private String componentInterfaceId;
 
    /** 组件类型名称 */
    @TableField(exist = false)
    private String componentInterfaceTypeName;
 
    /** 组件接口版本号 */
    private String componentRevisionNo;
 
    /** 组件接口名 */
    private String componentInterfaceName;
 
    /** 接口组件说明 */
    private String componentInterfaceIntruduce;
 
    /** 组件接口地址 */
    private String componentInterfaceAddress;
 
    /** 组件接口返回格式 */
    private String componentInterfaceReturnFormat;
 
    /** 组件接口请求方式 */
    private String componentInterfaceRequestMethod;
 
    /** 组件接口请求方式 */
    @TableField(exist = false)
    private String componentInterfaceRequestMethodName;
 
    /** 组件版本上架状态 */
    private String componentRevisionStatus;
 
    @TableField(exist = false)
    private String conditions;
}
 
 
//控制层
    @RequestMapping("/cascaderData")
    public R cascaderData()
    {
        return R.success(paramterService.getCascader());
    }
 
 
//接口实现类(跳过业务接口)
 @Override
    public IConditionVO cascader() {
 
        /**
         * 注意:1、每一步的List遍历都是将List转为map   先实例map对象再 进行List集合遍历
         *      2、每一步的map集合遍历都是对VO进行封装   封装完以后 还要获取下一层数据的list集合
         */
 
        //封装serverIp
        List<IServerIpVO> iServerIpVOList  = null;
        //封装type
        List<ITypeVO> typeVOList = null;
        //封装revision
        List<IRevisionVO> revisionVOList = null;
        //封装接口
        List<IInterfacesVO> interfaceVOList = null;
 
        IConditionVO icVO = new IConditionVO();
        IServerIpVO iServerIpVO = null;
        ITypeVO iTypeVO = null;
        IRevisionVO iRevisionVO = null;
        IInterfacesVO iInterfacesVO = null;
 
//获取所有数据,包括关联查询出来的各字段名称--作label显示 List<ComponentInterfaceInfo> componentInterfaceInfoList =  xxxMapper.getAllList();
 
        Map<String,List<ComponentInterfaceInfo>> ipMap = new HashMap<>();
        for(ComponentInterfaceInfo componentInterfaceInfo:componentInterfaceInfoList){
            if(!ipMap.containsKey(componentInterfaceInfo.getServerIp())){
                List<ComponentInterfaceInfo> interfaceList = new ArrayList<>();
                interfaceList.add(componentInterfaceInfo);
                ipMap.put(componentInterfaceInfo.getServerIp(),interfaceList);
            }else{
                ipMap.get(componentInterfaceInfo.getServerIp()).add(componentInterfaceInfo);
            }
        }
 
        iServerIpVOList = new ArrayList<>();
        for(Map.Entry<String,List<ComponentInterfaceInfo>> entry:ipMap.entrySet()){
 
            iServerIpVO = new IServerIpVO();
            iServerIpVO.setLabel(entry.getKey());
            iServerIpVO.setValue(entry.getKey());
            iServerIpVOList.add(iServerIpVO);
            List<ComponentInterfaceInfo> componentTypeList = entry.getValue();
            Map<String,List<ComponentInterfaceInfo>> typeMap = new HashMap<>();
 
            for(ComponentInterfaceInfo componentTypeInfo:componentTypeList){
                if(!typeMap.containsKey(componentTypeInfo.getComponentInterfaceTypeId())){
                    List<ComponentInterfaceInfo> typeList = new ArrayList<>();
                    typeList.add(componentTypeInfo);
                    typeMap.put(componentTypeInfo.getComponentInterfaceTypeId(),typeList);
                }else{
                    typeMap.get(componentTypeInfo.getComponentInterfaceTypeId()).add(componentTypeInfo);
                }
            }
 
            typeVOList = new ArrayList<>();
            for(Map.Entry<String,List<ComponentInterfaceInfo>> typeEntry:typeMap.entrySet()){
 
                iTypeVO = new ITypeVO();
                iTypeVO.setValue(typeEntry.getKey());
                iTypeVO.setLabel(typeEntry.getValue().get(0).getComponentInterfaceTypeName());
                typeVOList.add(iTypeVO);
 
                List<ComponentInterfaceInfo> componentRevisionList = typeEntry.getValue();
 
                Map<String,List<ComponentInterfaceInfo>> revisionMap = new HashMap<>();
                for(ComponentInterfaceInfo revisionInfo:componentRevisionList) {
                    if (!revisionMap.containsKey(revisionInfo.getComponentRevisionNo())) {
                        List<ComponentInterfaceInfo> revisionList = new ArrayList<>();
                        revisionList.add(revisionInfo);
                        revisionMap.put(revisionInfo.getComponentRevisionNo(), revisionList);
                    } else {
                        revisionMap.get(revisionInfo.getComponentRevisionNo()).add(revisionInfo);
                    }
                }
 
                revisionVOList = new ArrayList<>();
                for(Map.Entry<String,List<ComponentInterfaceInfo>> revision:revisionMap.entrySet()){
 
                    iRevisionVO =new IRevisionVO();
                    iRevisionVO.setValue(revision.getKey());
                    iRevisionVO.setLabel(revision.getValue().get(0).getComponentRevisionNo());
                    revisionVOList.add(iRevisionVO);
 
                    List<ComponentInterfaceInfo> interfaceList =  revision.getValue();
 
                    Map<String,List<ComponentInterfaceInfo>> interfaceMap = new HashMap<>();
                    for(ComponentInterfaceInfo componentInterfaceInfo:interfaceList){
                        if(!interfaceMap.containsKey(componentInterfaceInfo.getId())){
                            List<ComponentInterfaceInfo> interfaceOneList = new ArrayList<>();
                            interfaceOneList.add(componentInterfaceInfo);
                            interfaceMap.put(componentInterfaceInfo.getId(),interfaceOneList);
                        }else{
                            interfaceMap.get(componentInterfaceInfo.getId()).add(componentInterfaceInfo);
                        }
                    }
 
                    interfaceVOList = new ArrayList<>();
                    for(Map.Entry<String,List<ComponentInterfaceInfo>> componentEntry:interfaceMap.entrySet()){
 
                        iInterfacesVO = new IInterfacesVO();
                        iInterfacesVO.setLabel(componentEntry.getValue().get(0).getComponentInterfaceName());
                        iInterfacesVO.setValue(componentEntry.getKey());
                        interfaceVOList.add(iInterfacesVO);
 
                    }
                    iRevisionVO.setChildren(interfaceVOList);
 
                }
                iTypeVO.setChildren(revisionVOList);
 
            }
            iServerIpVO.setChildren(typeVOList);
 
        }
        icVO.setIcondition(iServerIpVOList);
 
        return icVO;
    }

  

 

posted @   唯恐不及  阅读(809)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示