前后端分离三级联动

淡淡的烟草味﹌ 2024-03-16 22:49 58阅读 0赞

效果

![2f3de0f88cef4bdbad1ba794fa1ea20b.png][]

一、后端

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的框架下进行实现的

[2f3de0f88cef4bdbad1ba794fa1ea20b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/96d3d78191dd4aed8cd06412007476be.png