如何动态加载下拉搜索,合理利用字典库

在优化老项目的时候发现前端的下拉搜索值都是写死的,虽然有字典库,但是没有和字典库进行一个联动。
写死的例子:
1、页面展示
在这里插入图片描述
2、前端代码

<label class="layui-form-label layui-text">验证状态</label>
                    <div class="layui-input-inline">
                        <select name="validateStatus" id="validateStatus">
                            <option value="" selected>请选择</option>
                            <option value="0">待验证</option>
                            <option value="1">验证通过</option>
                            <option value="2">验证不通过</option>
                            <option value="3">无需验证</option>
                        </select>
                    </div>

3、展示的时候状态转换(这边的状态转换是通过前端实现)
展示:
在这里插入图片描述
转换前端代码

<script type="text/html" id="validateOperBar">
                {{# if(d.VALIDATE_STATUS == "0") {}}
                待验证
                {{# }else if(d.VALIDATE_STATUS == "1"){ }}
                验证通过
                {{# }else if(d.VALIDATE_STATUS == "2"){ }}
                验证不通过
                {{# }else if(d.VALIDATE_STATUS == "3"){ }}
                无需验证
                {{# }else{ }}
                {{#}}}
            </script>

写死的弊端:当字典值有变动,比如增加减少或者被更改,前端相应的下拉搜索也要做修改、如果后端代码也是直接通过SQL判断转换的字典值,那也要修改。一个变动就多个地方要修改,太麻烦

那我现在只想通过字典库的操作就实现下拉、页面展示的字典更改要怎么操作呢。
一:下拉框通过接口获取字典值,通过动态赋值(动态赋值的方法有很多,我这边只是简单介绍一下,不懂的自己baidu)
html页面:

<label class="layui-form-label layui-text">验证状态</label>
                    <div class="layui-input-inline">
                        <select name="validateStatus" id="validateStatus">
                            <option value="" selected>请选择</option>
                            <option v-for="validateStatus in validateStatusList" :value="validateStatus.code">{{validateStatus.value}}</option>
                        </select>
                    </div>

js动态获取

var initCmParam = function (data, list) {
        jsapi.httpPost(serviceBase + "/service/publish/getDictByCatalCode", function (result) {
            var param = result.data
            if (param) {
                if (list == "validateStatus") {
                    vm.$data.validateStatusList = param;
                } 
                nextTick();
            }
        }, {catalCode: data})
    }

二:页面展示通过后台封装的字典转换方法去进行状态的转换

// 字典状态转换
        dictHelper.transformToDictValue(list,"validateStatusName:validateStatus");

这是我自己封装好的一个方法,大概来讲就是在获取到分页数据后,再对分页数据进行一个处理

public Page seatListPage(Map<String, Object> queryParam) throws Exception {
        // 查出的分页数据
        Page page = repairBillDao.seatListPage(queryParam, split);
        List<Map<String, Object>> list = page.getData();
        if (CollectionUtils.isEmpty(list)) {
            return page;
        }
        // 对分页数据的状态进行转换
        dictHelper.transformToDictValue(list,"validateStatusName:validateStatus");

数据处理最后都是通过循环遍历匹配字典,把查询出来的相应字典值再塞进去

for (Object s : ls) {
            Map map = ObjectUtils.objectToMap(s);
            if (map.get("code").equals(key)) {
                ((Map) o).put(field, map.get("value"));
            }
        }

通过以上方法就能通过直接操作字典就能更改相应字典了,例
我在字典待验证后面加了个1
在这里插入图片描述
相应的前端展示就都被更改,不用再通过改代码的方式去实现
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值