效果

 一、后端

1、实体类

//仓库实体类
    /** 产品仓库 */
    private Long warehouseId;

    /** 产品仓库编号 */
    private String warehouseNo;

    /** 产品仓库名称 */
    private String warehouseName;

    /** 库区 */
    private List<ProductStorageArea> children;

//******************************************************************

//库区实体类
    /** 产品库区 */
    private Long areaId;

    /** 产品库区编号 */
    private String areaNo;

    /** 产品库区名称 */
    private String areaName;

    /** 产品仓库ID */
    private Long productWarehouseId;

    /** 库位 */
    private List<ProductStorageLocation> children;

//******************************************************************

//库位实体类
    /** 产品库位ID */
    private Long locationId;

    /** 产品库位编号 */
    private String locationNo;

    /** 产品库位名称 */
    private String locationName;

    /** 产品库区ID */
    private Long productStorageAreaId;

2、controller层

/**
     * 查询产品仓库列表
     */
    @GetMapping("/TreeList")
    public AjaxResult TreeList(ProductWarehouse productWarehouse)
    {
        return AjaxResult.success(productWarehouseService.selectProductWarehouseListTree(productWarehouse));
    }

 3、mapper层

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.wms.mapper.ProductWarehouseMapper">
    
    <resultMap type="ProductWarehouse" id="ProductWarehouseResult">
        <result property="warehouseId"    column="warehouse_id"    />
        <result property="warehouseNo"    column="warehouse_no"    />
        <result property="warehouseName"    column="warehouse_name"    />
        <result property="region"    column="region"    />
        <result property="address"    column="address"    />
        <result property="enableFlag"    column="enable_flag"    />
        <result property="reserved1"    column="reserved1"    />
        <result property="reserved2"    column="reserved2"    />
        <result property="reserved3"    column="reserved3"    />
        <result property="reserved4"    column="reserved4"    />
        <result property="reserved5"    column="reserved5"    />
        <result property="reserved6"    column="reserved6"    />
        <result property="reserved7"    column="reserved7"    />
        <result property="reserved8"    column="reserved8"    />
        <result property="reserved9"    column="reserved9"    />
        <result property="reserved10"    column="reserved10"    />
        <result property="remark"    column="remark"    />
        <result property="createBy"    column="create_by"    />
        <result property="createTime"    column="create_time"    />
        <result property="updateBy"    column="update_by"    />
        <result property="updateTime"    column="update_time"    />
        <collection  property="children"   javaType="java.util.List"  resultMap="ProductStorageAreaResult" />
    </resultMap>

    <resultMap type="ProductStorageArea" id="ProductStorageAreaResult">
        <result property="areaId"    column="area_id"    />
        <result property="areaNo"    column="area_no"    />
        <result property="areaName"    column="area_name"    />
        <result property="productWarehouseId"    column="product_warehouse_id"    />
        <result property="enableFlag"    column="enable_flag"    />
        <result property="reserved1"    column="reserved1"    />
        <result property="reserved2"    column="reserved2"    />
        <result property="reserved3"    column="reserved3"    />
        <result property="reserved4"    column="reserved4"    />
        <result property="reserved5"    column="reserved5"    />
        <result property="reserved6"    column="reserved6"    />
        <result property="reserved7"    column="reserved7"    />
        <result property="reserved8"    column="reserved8"    />
        <result property="reserved9"    column="reserved9"    />
        <result property="reserved10"    column="reserved10"    />
        <result property="remark"    column="remark"    />
        <result property="createBy"    column="create_by"    />
        <result property="createTime"    column="create_time"    />
        <result property="updateBy"    column="update_by"    />
        <result property="updateTime"    column="update_time"    />
        <collection  property="children"   javaType="java.util.List"  resultMap="ProductStorageLocationResult" />
    </resultMap>

    <resultMap type="ProductStorageLocation" id="ProductStorageLocationResult">
        <result property="locationId"    column="location_id"    />
        <result property="locationNo"    column="location_no"    />
        <result property="locationName"    column="location_name"    />
        <result property="productStorageAreaId"    column="product_storage_area_id"    />
        <result property="enableFlag"    column="enable_flag"    />
        <result property="locationWeight"    column="location_weight"    />
        <result property="locationVolume"    column="location_volume"    />
        <result property="reserved3"    column="reserved3"    />
        <result property="reserved4"    column="reserved4"    />
        <result property="reserved5"    column="reserved5"    />
        <result property="reserved6"    column="reserved6"    />
        <result property="reserved7"    column="reserved7"    />
        <result property="reserved8"    column="reserved8"    />
        <result property="reserved9"    column="reserved9"    />
        <result property="reserved10"    column="reserved10"    />
        <result property="remark"    column="remark"    />
        <result property="createBy"    column="create_by"    />
        <result property="createTime"    column="create_time"    />
        <result property="updateBy"    column="update_by"    />
        <result property="updateTime"    column="update_time"    />
    </resultMap>



    <select id="selectProductWarehouseListTree" resultMap="ProductWarehouseResult">
        select
            a.warehouse_id,
            a.warehouse_no,
            a.warehouse_name,
            a.enable_flag,
            b.product_warehouse_id,
            b.area_id,
            b.area_no,
            b.area_name,
            b.enable_flag,
            c.product_storage_area_id,
            c.location_id,
            c.location_no,
            c.location_name,
            c.enable_flag
        from wms_product_warehouse a
        left join wms_product_storage_area b
        on a.warehouse_id=b.product_warehouse_id
        left join wms_product_storage_location c
        on b.area_id=c.product_storage_area_id
    </select>

二、前端

1、XXX.js

// 查询产品仓库列表
export function listWarehouseTree() {
  return request({
    url: '/wms/warehouse/TreeList',
    method: 'get'
  })
}

2、XX.vue

2.1、form表单

    <el-form-item label="仓库" prop="warehouseId">
              <el-cascader :options="warehouseOptions" v-model="warehouseInfo" :props="warehouseProps" @change="handleWarehouseChanged"/>
     </el-form-item>

 2.2、JavaScript

//刚才 1、XXX.js 的地址
import { listWarehouseTree } from "@/api/XXX/XXXXX";

 data() {
    return {
      //仓库
      warehouseInfo:[],
      warehouseOptions:[],
      warehouseProps:{
        multiple: false,
        value: 'pId',
        label: 'pName',
      },
      // 表单参数
      form: {},
    };
  },

created() {
    //仓库
    this.getListWarehouseTree();
  },

methods:{
//仓库三级
    getListWarehouseTree(){
      listWarehouseTree().then( response =>{        
        this.warehouseOptions = response.data;
        this.warehouseOptions.map(w =>{
          w.children.map(l =>{
            //三级
            let lstr =JSON.stringify(l.children).replace(/areaId/g,'lId').replace(/locationId/g, 'pId').replace(/locationName/g,'pName');                  
            l.children = JSON.parse(lstr);
            
          }); 
          //二级
          let wstr = JSON.stringify(w.children).replace(/warehouseId/g,'wId').replace(/areaId/g, 'pId').replace(/areaName/g,'pName');  
          w.children =  JSON.parse(wstr); 
        });
        //一级
        let ostr=JSON.stringify(this.warehouseOptions).replace(/warehouseId/g,'pId').replace(/warehouseName/g, 'pName');
        this.warehouseOptions = JSON.parse(ostr);
      });
    },
    //仓库默认
    handleWarehouseChanged(obj){      
      if(obj !=null){
        this.form.warehouseId = obj[0];
        this.form.areaId = obj[1];
        this.form.locationId = obj[2];
      }
    },
}

本篇文章是在ruoyi vue的框架下进行实现的