省市区三级下拉框联动

前端显示

数据库表数据（sys_area）

 实体类（Area）

package com.jieye.sys.pojo;
import com.baomidou.mybatisplus.annotation.TableLogic;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableField;
import java.io.Serializable;
import java.util.Date;
import java.util.List;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;
import org.apache.ibatis.annotations.Delete;


/**
* <p>
* 区域表
* </p>
*
* @author jieye
* @since 2022-09-22
*/
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("sys_area")
@ApiModel(value="Area对象", description="区域表")
public class Area implements Serializable {

private static final long serialVersionUID = 1L;

@ApiModelProperty(value = "区域编码")
@TableId("area_id")
private String areaId;

@ApiModelProperty(value = "区域名称")
@TableField("area_name")
private String areaName;

@ApiModelProperty(value = "短拼音")
@TableField("short_name")
private String shortName;

@ApiModelProperty(value = "长拼音")
@TableField("long_name")
private String longName;

@ApiModelProperty(value = "父级id")
@TableField("parent_id")
private String parentId;

@ApiModelProperty(value = "序号")
private Integer sequence;

@ApiModelProperty(value = "层级:G-国家,P-省,C-市,D-区,X-县")
private String level;

@ApiModelProperty(value = "状态")
private String status;

@ApiModelProperty(value = "创建者")
@TableField("create_by")
private String createBy;

@ApiModelProperty(value = "创建时间")
@TableField("create_time")
private Date createTime;

@ApiModelProperty(value = "删除标志")
@TableField("del_flag")
@TableLogic
private String delFlag;

@ApiModelProperty(value = "更新者")
@TableField("update_by")
private String updateBy;

@ApiModelProperty(value = "更新时间")
@TableField("update_time")
private Date updateTime;

@TableField(exist = false)
private List<Area> children; // 区域列表
}

业务层（AreaService）

@Override
public List<Area> queryThreeLevelArea() {
    QueryWrapper queryWrapper = new QueryWrapper<>(); // 条件构造器
    queryWrapper.eq("del_flag", 0); // 查询del_flag = 0，即存在的区域。
    List<Area> list = this.list(queryWrapper); // 过去sys_area表中所有数据
    List<Area> oneLevel = list.stream().filter((area) -> {
        // 过滤出直辖市、省 (即：一级，如北京、上海、湖南省等)
        return "P".equals(area.getLevel()); // 过滤条件
    }).map((province) -> { // 遍历oneLevel一级，得到每一个直辖市或省，赋值给province
        province.setChildren(getChildrens(province, list));
        return province;
    }).collect(Collectors.toList());
    return oneLevel;
}

// 获取当前区域下的子区域 此时 province代表是直辖市或者省 list为所有区域列表
private List<Area> getChildrens(Area province, List<Area> list) { // city为长沙
    List<Area> towLevel = list.stream().filter((area) -> {
        // 例如长沙的area_id等于大集合中的区域parent_id父级ID，即得到湖南省的长沙市、郴州市等
        return province.getAreaId().equals(area.getParentId());
    }).map((city) -> { // 遍历如湖南省下的所有市，将遍历出来的市赋值给city
        city.setChildren(getChildrens(city, list));
        return city;
    }).collect(Collectors.toList());
    return towLevel;
}

业务层接口（IAreaService）

// 查询三级区域列表信息
List<Area> queryThreeLevelArea();

控制层（AreaController）

@ApiOperation("查询所有的三级区域列表")
@GetMapping("/getThreeLevelArea")
public R getThreeLevelArea() {
    return R.ok(areaService.queryThreeLevelArea());
}

js代码

//省市区区域下拉框
export function getThreeLevelArea(){
    return request({
        url:'/oa-sys/area/getThreeLevelArea',
        method:'get'
    })
}

前端组件

<el-col :span="5" :offset="1">
    <el-form-item label="注册区域" prop="dAreaId" style="height: 0px"/>
    <el-cascader :options="areaNameOptions"
        :props="{ value: 'areaId',label: 'areaName',children: 'children'}"
        clearable style="width:220px;">
    </el-cascader>
</el-col>

导入js

import {getPageBasCustomerList, getCustomerNameBy, getThreeLevelArea} from '@/api/bas'

data（）return{}内容

areaNameOptions: [],

方法集合mothods内容：

定义方法：

getThreeLevelArea() {
    getThreeLevelArea().then((res) => {
        // .replace(/\"children"\:\[]/g,"no:0");
        // this.areaNameOptions = res.data
        // 将 children: [] 替换成no:0，不然会出现多一个选择面板
        let jsondata = JSON.parse(JSON.stringify(res.data).replace(/\"children"\:\[]/g,"\"no\":0"));
        console.log(jsondata)
        this.areaNameOptions = jsondata
    })
}

添加用户点击事件

// 添加用户按扭的点击事件
add() {
    this.resetTemp() // 重置Temp表单对象
    this.getThreeLevelArea()
}