在若依框架中实现省市县街道四级联动级联选择框-526互联

省市区街道四级联动实现

项目背景：

公司有个项目使用该框架搭建，其中有个功能块需要按客户需求实现省市区街道四级联动选择。框架自带的省市区信息是三级联动，没有第四级数据。于是自己找了一个数据源，实现了该功能。本人小白程序员，记录一下实现过程。
使用RuoYi-Flowable-Plus框架，该框架是基于 RuoYi-Vue-Plus 进行二次开发扩展Flowable工作流功能，支持在线表单设计和丰富的工作流程设计能力。
项目文档地址：http://rfp-doc.konbai.work/

结果展示：

实现过程：

1.寻找数据源，在网上找了很多，大多数API都需要收费，最后在github找到一个免费的最新数据源。

数据源github地址：省市县区数据获取
他这里提供的是sqlite3。我数据库使用的是MySql。
使用Navicat将数据迁移到自己数据库中。

2.前端实现.使用element-ui

<!-- 行政城市 -->
          <el-descriptions-item label="行政城市">
            <el-cascader
              v-model="addressInfo[index].caiAdministrationCity"
              :props="cityProps"
              placeholder="选择城市"
              filterable>
            </el-cascader>
          </el-descriptions-item>

这里关于组件的使用可以参考element-ui官网文档。

import { listRegoinChildren } from '@/api/regoin/regoin'
export default{
  data(){
    return{
      cityProps: {
        lazy: true,
        lazyLoad (node, resolve) {
          const { level } = node;
          const queryParams = { parentId:undefined }
          queryParams.parentId = node.value
          listRegoinChildren(queryParams).then(response=>{
            const nodes = handleTree(response.data, "code", "parentId").map(item => {
              return {
                value: item.code,
                label: item.name,
                leaf: level >= 3
              };
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }).catch(error => {
            console.error("加载节点数据时出错:", error);
            resolve([]);  // 在错误情况下解析为空数组或显示错误信息
          });
        }
      }
    },
  }
}

import request from '@/utils/request'
// 根据编码查询子节点数据
export function listRegoinChildren(query) {
  return request({
    url: '/regoin/regoin/listChildren',
    method: 'get',
    params: query
  })
}

这里handleTree是若依框架自带的一个将数据处理成树结构数据的一个函数。我这里直接调用了。
因为数据到第四层级已经有四万左右了，前端函数处理直接页面崩溃了，于是使用懒加载方式加载数据。点击节点才会查询所属子节点数据。
listRegoinChildren这个函数中response.data返回的数据是这样的。

[
		{
			"code": 11,
			"name": "北京市",
			"parentId": 0
		},
		{
			"code": 12,
			"name": "天津市",
			"parentId": null
		},
		{
			"code": 13,
			"name": "河北省",
			"parentId": null
		…………
	]

经过handleTree处理后

[
	{
		"label":"北京市",//标签
		"leaf":"",//是否叶子节点，简单理解就是是否为最后一个层级节点。
		"value":11//编码值
	}
]

我们直接在后端将数据组装成对应的格式也是可以的。

后端实现

后端查询一下数据集就可以了。只查询子集返回，交给前端处理。

@Override
    public List<ManageAreaVo> queryChildrenList(ManageAreaBo bo) {
        LambdaQueryWrapper<ManageArea> lqw = new LambdaQueryWrapper<>();
        if(bo.getParentId()==null||bo.getParentId()==0){
            lqw.isNull(ManageArea::getParentId).or().eq(ManageArea::getParentId,0L);
        }else{
            lqw.eq(ManageArea::getParentId,bo.getParentId());
        }
        return baseMapper.selectVoList(lqw);
    }