ruoyi树形字典，级联字典调用，二开

前言

* 由于ruoyi自带的字典功能只能实现下拉字典，而在实际开发中会出现需要级联级联选项的情况，如下图，打码见谅，都是公司的数据。

• 版本：ruoyi-vue 前后端分离版(vue2)，v3.8.7

• 而这样选项虽然相对固定的，但单独设计和写一个表单来管理会导致表很多，因为不确定以后还会不会再增加另一个级联数据，所以还是需要字典来管理，在网上找了一遍都没找到参考，就自己写吧。

• 本次实现重点在前端，后端部分仅需修改数据库和控制层，实体类和mapper.xml

java后端

数据库

• 数据库sys_dict_data表中添加一个parent_id，用于记录父节点的dict_code,默认值为0，即代表没有父节点，也就是原本ruoyi下拉的效果。记得修改对应实体类和mapper.xml,这里不再赘述。

添加接口获取数据

• SysDictDataController 控制层添加该接口，该接口其实就是将原本用于分页的接口去掉startPage();得来，因为树形表单不需要分页。

•  /**
    * 获取字典列表（不分页）
    */
   @PreAuthorize("@ss.hasPermi('system:dict:list')")
   @GetMapping("/dataList")
   public AjaxResult dataList(SysDictData dictData) {
       List<SysDictData> list = dictDataService.selectDictDataList(dictData);
       return success(list);
   }

• 

修改add接口

• 增加一个判断逻辑，就是当节点选中自身作为父节点时报错。

  /**
    * 修改保存字典类型
    */
   @PreAuthorize("@ss.hasPermi('system:dict:edit')")
   @Log(title = "字典数据", businessType = BusinessType.UPDATE)
   @PutMapping
   public AjaxResult edit(@Validated @RequestBody SysDictData dict) {
       if (dict.getDictCode().equals(dict.getParentId())) {
           return error("修改字典'" + dict.getDictLabel() + "'失败，上级字典不能选择自己");
       }
       dict.setUpdateBy(getUsername());
       return toAjax(dictDataService.updateDictData(dict));
   }

  至此，后端修改完成。

前端

字典数据详情页

• 将原来的普通表单效果改为树形表单，我参考的menu和dept两个树形树形表单的效果来实现的，创建了一个新的vue起名dataTree.vue，将原本data.vue中的代码复制过来在此基础做的改动，将原vue文件作为保留（个人习惯，记得修改路由），如果不需要保留也可直接在原文件上修改。

dataTree.vue代码

• 如下，能看懂就看吧，看不懂直接全粘贴就行

• <template>
     <div class="app-container">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="字典名称" prop="dictType">
           <el-select v-model="queryParams.dictType">
             <el-option
               v-for="item in typeOptions"
               :key="item.dictId"
               :label="item.dictName"
               :value="item.dictType"
             />
           </el-select>
         </el-form-item>
         <el-form-item label="字典标签" prop="dictLabel">
           <el-input
             v-model="queryParams.dictLabel"
             placeholder="请输入字典标签"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
             <el-option
               v-for="dict in dict.type.sys_normal_disable"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
             />
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
   ​
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
             type="primary"
             plain
             icon="el-icon-plus"
             size="mini"
             @click="handleAdd"
             v-hasPermi="['system:dict:add']"
           >新增
           </el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button
             type="info"
             plain
             icon="el-icon-sort"
             size="mini"
             @click="toggleExpandAll"
           >展开/折叠
           </el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button
             type="warning"
             plain
             icon="el-icon-download"
             size="mini"
             @click="handleExport"
             v-hasPermi="['system:dict:export']"
           >导出
           </el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button
             type="warning"
             plain
             icon="el-icon-close"
             size="mini"
             @click="handleClose"
           >