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>