RuoYi | 字典的前端调用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

• 记录时间：2022.5.18
• 内容：
  • 字典可以实现枚举联动，前端怎么写去调用呢？
  • 我参考company之前项目里的“联赛赛事管理”部分，整理如下。
  • 主要包含html js的更新。
• 备注：
  • 由于记录时并非边操作边记录，而是抽取往期代码加上自己的理解去记录的，所以具体实践时如果出现问题，欢迎留言告知。

1 html

①标签显示

• 使用场景：常用于edit。
• 关键代码：th:checked="${aaaaaa.status == '1' ? true : false}"
• 解释：aaaaaa是后台传过来的map键。比如在后台接口edit这个方法中，写成如下方式，则可以将mmap里的homeApp数据和ossList数据以对象的方式传给前端。

@GetMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id, ModelMap mmap)
{
    HomeApp homeApp = homeAppService.selectHomeAppById(id);
    List<SysOss> ossList = ossService.findByMsgId(id.toString(), FileConstant.HOMEAPPLOGOFILE);
    mmap.put("homeApp", homeApp);
    mmap.put("ossList", ossList);
    return prefix + "/edit";
}

• 解释：homeApp后面跟着的status，是homeApp这个对象拥有的一个实体类属性。

<form class="form-horizontal m" id="form-homeapp-edit" th:object="${homeApp}">
    <div class="form-group">
        <label class="col-sm-3 control-label">是否是首页显示：</label>
        <div class="col-sm-8">
            <label class="toggle-switch switch-solid">
                <input type="checkbox" id="status" th:checked="${homeApp.status == '1' ? true : false}">
                <span></span>
            </label>
        </div>
    </div>
</form>

②下拉列表

• 关键代码： th:with="type=${@dict.getType('bbbbbb')}"
• 解释：bbbbbb是创建字典时，设定的字典类型。

• 解释：dict.dictLabel和dict.dictValue是RuoYi框架自己有的，不需要更改；下方的type对应着上方的type，同名即可。

<li>
    <p>赛事项目：</p>
    <select name="eventItem" th:with="type=${@dict.getType('event_item')}">
        <option value="">所有</option>
        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
    </select>
</li>

2 js

• 用于场景：常用于list。后台显示列表时，数据库中存放的是诸如123等类别编号，但是后台页面需要显示各个编号对应的具体描述。
• 关键代码：[[${@dict.getType('xxxxxx')}]];定义好之后，需要再在列表title处引用。
• 解释：
  • xxxxxx代表在后台设置字典时的代号。
  • field是对应上文html中name的属性值，title是列表显示时的属性列标题，formatter是对数据的操作。
  • 复用时，可以将以下涉及event的地方更变为自己的内容，其余的按照模板即可。

<script th:inline="javascript">
   var eventItemDatas = [[${@dict.getType('event_item')}]];
    {
        field : 'eventItem', 
        title : '赛事项目',
        formatter: function(value, row, index) {
           return $.table.selectDictLabel(eventItemDatas, value);
        }
    }
</script>