迫于适应element-ui的cascader参数类型,写了个工具类(RuoYi框架前后台分离项目)

工具类大致作用是:将数据库中取出的数据,重新组装成适应cascader级联选择的:options参数格式,即JSONArray格式,代码如下:
首先,定义一个实体类,提供如cascader中相同的参数信息,

@Data
public class AllChannelVo {
    /**
     * label名称-》省名,城市名,线路名
     */
    public String label;
    /**
     * value信息,省code,城市id,线路id
     */
    public String value;
    /**
     * 子节点内容
     */
    public List<AllChannelVo> children;

然后就可以写工具类了,值得注意的是,工具类调用service方法,需要以下步骤:
1.添加@Component注解
2.挂载service类
3.声明一个静态的本工具类对象
4.init()方法,@PostConstruct注解
5.使用时需要用静态的工具类对象调用service对象
参考自这位老哥的文章

@Component
public class RetCascaderJsonUtil {
    //静态的本类
    private static RetCascaderJsonUtil rcj;
    @Autowired
    private IMetCityService cityService;
    @Autowired
    private IMetRouteService routeService;
    @Autowired
    private IMetSiteService siteService;
    @Autowired
    private ISysDictDataService dictDataService;
    //字典类型确定
    static final String DICT_TYPE = "met_province_type";
    @PostConstruct
    public void init(){
        rcj = this;
        rcj.cityService = this.cityService;
        rcj.dictDataService = this.dictDataService;
        rcj.routeService = this.routeService;
        rcj.siteService = this.siteService;
    }
    /**
     * 通过cascaderLevel判断返回二级或三级级联Json数据
     * @param cascaderLevel
     * @return
     */
    public JSONArray CascaderJson(int cascaderLevel){
        //查询字典中的 省份
        List<SysDictData> dictList = new ArrayList<>();
        dictList = rcj.dictDataService.selectDictDataByType(DICT_TYPE);
        //查询城市表中的 城市名
        List<MetCity> cityList = new ArrayList<>();
        cityList = rcj.cityService.list(new LambdaQueryWrapper<MetCity>()
        .eq(MetCity::getIsDeleted,0));
        //查询线路表中的 线路名
        List<MetRoute> routeList = new ArrayList<>();
        routeList = rcj.routeService.list(new LambdaQueryWrapper<MetRoute>()
        .eq(MetRoute::getIsDeleted,0)
        .eq(MetRoute::getIsEnable,0));
        //最上级list,针对省份
        List<AllChannelVo> topList = new ArrayList<>();
        for (SysDictData dictData: dictList
             ) {
            AllChannelVo channel1 = new AllChannelVo();
            channel1.setValue(dictData.getDictCode().toString());
            channel1.setLabel(dictData.getDictLabel());
            //第二级的list,针对城市
            List<AllChannelVo> sedList = new ArrayList<>();
            for (MetCity city: cityList
                 ) {
                if (city.getProvinceName().equals(dictData.getDictLabel())){
                    AllChannelVo channel2 = new AllChannelVo();
                    channel2.setValue(city.getCityId().toString());
                    channel2.setLabel(city.getCityName());
                    if(cascaderLevel == 3){
                        //第三级的list,针对线路
                        List<AllChannelVo> trdList = new ArrayList<>();
                        for (MetRoute route: routeList
                             ) {
                            if (route.getCityName().equals(city.getCityName())){
                                AllChannelVo channel3 = new AllChannelVo();
                                channel3.setLabel(route.getRouteName());
                                channel3.setValue(route.getRouteId().toString());
                                channel3.setChildren(null);
                                trdList.add(channel3);
                            }
                        }
                        channel2.setChildren(trdList);
                        sedList.add(channel2);
                    }else {
                        channel2.setChildren(null);
                        sedList.add(channel2);
                    }
                }
            }
            channel1.setChildren(sedList);
            topList.add(channel1);
        }
        JSONArray json = JSONArray.parseArray(JSON.toJSONString(topList));
        return json;
    }

ok,大功告成
追加一个前端实现的方式(相对来说更简洁,也可以减少服务器资源占用)

this.cityNameOptions.forEach(item1 => {
        let city = {
          value : item1.cityCode,
          label : item1.cityName,
          children : []
        }
        this.routeNameOptions.forEach(item2 => {
          let route = {
            value : item2.routeId,
            label : item2.routeName,
            children : []
          }
          this.siteNameOptions.forEach(item3 => {
            let site = {
              value : item3.siteCode,
              label : item3.siteName
            }
            if(item2.routeId === item3.routeId){
              route.children.push(site)
            }
          })
          if(item1.cityId === item2.cityId){
            city.children.push(route)
          }
        })
        this.objs.push(city)
      })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你的 ruoyi 项目后台分离的,你可以按照以下步骤来添加端页面: 1. 在 ruoyi-admin 模块下的 resources/static 目录下创建一个新的文件夹,用于存放你的端页面和相关资源文件。 2. 在创建好的文件夹中编你的端页面代码,该页面可以是一个 HTML 文件或者是 Vue/React 等框架的代码。 3. 如果你使用了 Vue/React 等框架,可以通过修改 webpack.config.js 等配置文件,将编译后的端代码打包到 resources/static 目录下。 4. 在 ruoyi-admin 模块下的 controller 包中创建一个新的 Controller 类,用于处理端页面的请求。 5. 在 Controller 类中添加一个方法,该方法用于返回端页面的视图。可以使用 @GetMapping 注解来映射该方法的请求路径。 6. 在方法中使用 ModelAndView 对象来指定端页面的视图名称和模型数据。 7. 在 ruoyi-admin 模块下的 resources/templates 目录下创建一个与端页面名称相同的 Thymeleaf 模板文件,该文件用于渲染端页面。 8. 在 Thymeleaf 模板文件中使用 Thymeleaf 模板语法来引入端页面的资源文件,例如 CSS 文件、JavaScript 文件等。 完成以上步骤后,你就可以在 ruoyi 中添加自己的端页面了。需要注意的是,在后台分离的情况下,端页面和后端代码是在同一个项目中,因此在开发时需要注意代码的组织和管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值