EP框架之数据字典前后端联动机制
一、序
数据字典是web开发中非常常用的一项功能，用来定义某个数据的分类，EP自带数据字典功能，封装了对应的js方法和java接口，可以在前端、后代码中直接使用，下面就EP的数据字典做一个简要说明。
二、系统功能
EP框架启动后，自带数据字典功能，如下图所示：
正常情况下，在数据字典中配置业务所需的字典，建议先配置上级编码为０的编码说明，这样大家才知道这个数据字典到底是用来干嘛的，如上图所示studentStatus，编码说明为“学生状态”。然后再配置studentStatus具体的编码值。
三、前端组件绑定数据字典
前端会常用到数据字典的组件，大概有以下几类：表格（渲染某一列）、下拉框（单选、多选）、单选组、复选组，下面就前端组件与后端数据字典联动的代码说明一下。
前端代码引入必须的base.js
<script src="../../../eui/js/base.js"></script>
-
表格table
表格的渲染列，使用layui自带的templet进行渲染即可，配合封装好的方法。tableIns = table.render({ elem: '#listTable' , url: appendCtx("/demo/table/students") , even: true , cols: [[ {field: 'id', title: 'ID', align: 'center',width: 80}, {field: 'studentName', title: '姓名', align: 'center',width: 100}, {field: 'studentNo', title: '学号', align: 'center',width: 100}, {field: 'birthday', title: '生日', align: 'center',width: 140}, {field: 'status', title: '状态', align: 'center',width: 100,templet: function(d) { return translate("studentStatus",d.status); //translate方法为base.js中封装的数据字典转换方法 } }, {title: '操作', align: 'center',width: 200,fixed:"right",toolbar: '#operBar'} ]] , page: true , request: { pageName: 'pageNo' //页码的参数名称，默认：page , limitName: 'pageSize' //每页数据量的参数名，默认：limit } , parseData: function (res) { //res 即为原始返回的数据 return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.data.total, //解析数据长度 "data": res.data.list //解析数据列表 ,"attr":res.attr }; } }); -
下拉框-单选
下拉框渲染主要有2种模式，第1种是进查询页面上的查询条件，第2种是编辑弹窗中的下拉菜单。这2种都需要下拉框渲染完毕后，再form.render()。其中编辑弹窗会涉及到数据回填，需要先渲染下拉框，然后再执行form.val进行数据回填操作。
html代码：
<div class="layui-inline"> <label class="layui-form-label" >状态：</label> <div class="layui-input-inline" > <select id="status" name="status" lay-filter="status"></select> </div> </div>下面是js代码
dict2Select("studentStatus","status");//将数据字典中的sdudentStatus，映射到id=status的元素中 form.render();//渲染form表单 -
下拉框-多选
多选下拉框要用到其他组件，xm-select
html代码如下：
<div class="layui-inline">
<label class="layui-form-label">业态：</label>
<div class="layui-input-inline">
<select type="text" id="busState" name="busState" xm-select="busState" multiple lay-verify="required" class="layui-input"></select>
</div>
</div>
js代码如下：
dict2MSelect('busState', 'busState')
多选下拉框中，如果是在编辑弹窗中渲染，则可能涉及到数据回填，这时候需要多填一个参数selectedValues(用英文逗号隔开的字典值)
dict2MSelect('busState', 'busState',selectedValues)
-
单选组（多选组）
单选组要先拿到字典的map对象，再调用对应的js方法即可html代码
<div class="layui-inline"> <label class="layui-form-label">状态：</label> <div id="channels" class="layui-input-inline" ></div> </div>js代码
var map=dictionary("studentStatus"); //拿到map对象 arraysToRadios("channels",map,"studentStatus"); //如果是多选，则把arraysToRadios方法换成arraysToCheckbox即可 form.render();
四、DictionaryService数据字典接口的使用
后端代码有时候也会是用数据字典，例如excel导出的时候，目前主要有2种方式去查字典，第1种就是直接在sql里面关联数据字典表去查，这样会多关联表，浪费数据库的资源，不推荐直接关联字典表查询。第2种就是查出来过后，在服务器端进行翻译，EP框架提供了DictionaryService，注入后可以很方便的查询数据字典。下面以常用的excel导出为例：
@Autowired
private EpDictQueryService dictService ;
@GetMapping("/xls")
public void exportInvestConvertList(InvestConvertListDto cond,HttpServletResponse response)
{
try
{
String fileName = "资产转让订单" ;
String[] keys = new String[]{"loanId","loanNo","loanStatus","canDk","custName","coCustomer","overdueDays","projName","loanType","customer","loanMoney","blance","oriCoopCode","bcName"};
String[] columnNames = new String[]{"贷款编号","合同号","贷款状态","启用代扣","客户姓名","共借人","逾期天数","项目名称","贷款产品","客户经理","放款金额","在贷余额","原资方","担保公司"};
List<InvestConvertListVo> dataList = investConvertSevice.getInvestConvertList(cond);
Map<String, String> coopCode = dictService.getDictByParentCode("coopCode");
dataList.forEach(e -> {
e.setOriCoopCode(coopCode.getOrDefault(e.getOriCoopCode(), "未知"));
});
ExcelUtil.downloadExcel(response,dataList,fileName,columnNames,keys);
}
catch(Exception e)
{
e.printStackTrace();
}
}
以上就是EP框架封装的数据字典逻辑，经过大量实践，已经运行很稳定，各种场景都有遇到过，基本都没问题。