若依项目开发实践

记录下使用若依项目，在实际开发过程中，可能需要用到的开发点。

   1、表格中字典转化：

1 2 3 4 5

var datas = [[${@dict.getType('sys_user_sex')}]];   formatter: function(value, row, index) {     return $.table.selectDictLabel(datas, value); }

　2、日期格式化

1 2 3 4 5 6 7

方式一： formatter: function(value, row, index) {     return value.substring(0,10);   } 方式二： @JsonFormat(pattern="yyyy-MM-dd") private Date birthday;

　3、隐藏表格某列

　　　　　　　　　{
                    field : 'id', 
                    visible : false
                }, 

 

或者

1	$('#bootstrap-table').bootstrapTable('hideColumn', 'id');

　4、表单中的选择框实现，以及值选中

1 2 3 4 5 6 7 8 9 10 11

<div class="form-group">     <label class="col-sm-3 control-label">性别：label>     <div class="col-sm-8">         <select id="gender" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">         <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${user.userSex eq dict.dictValue}">option>         select>     div> div>      还需加： <script th:src="@{/ajax/libs/select/select2.js}">script>

　　5、单日期选择，更多的参数配置可参看：https://blog.csdn.net/weixin_38023551/article/details/78215803

1 2 3 4 5 6 7 8 9 10 11 12 13

<input id="birthday" name="birthday" class="form-control" type="text">   $(function() {     //初始化日期选择器     layui.use('laydate', function() {         var laydate = layui.laydate;         laydate.render({           elem: '#birthday', //指定元素           trigger: 'click'         });     });   });

　　6、表单校验，使用的是jquery.validate，具体使用细节可参看：http://www.runoob.com/jquery/jquery-plugin-validate.html

 

       7、使用EasyPoi实现导出功能

            将easyPoi集成到springboot中可参考:https://www.jianshu.com/p/5d67fb720ece

            具体EasyPoi的使用可以参考：http://easypoi.mydoc.io/#text_186900

            导入功能可参考：https://www.cnblogs.com/conswin/p/10008822.html

 

            集成过程中针对该项目需要调整的地方：

             ①、需要去除ruoyi-common项目中pom.xml里poi-ooxml的引入，加入EasyPoi相应的依赖包，此时ExcelUtil.java会报错，将错误处注释掉即可，不影响原本方式的导出。

                    （此处将原本的poi依赖包去除的原因是，导入EasyPoi依赖包后，会与原来的Poi依赖包冲突）

             ②、在ry-ui.js中加入以EasyPoi方式导出的方法，以便前端调用，具体代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//使用EasyPoi方式下载 easyExportExcel: function(formId) {     var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;     $.modal.loading("正在导出数据，请稍后...");     var paramsArray =  $("#" + currentId).serializeArray();     var param = "";     $.each(paramsArray, function(i, field){         if(field.value != ''){             param = param + field.name + "=" + field.value + "&";         }     });     window.location.href = $.table._option.exportUrl + "?" + param ;     $.modal.closeLoading();   },

　　     ③、具体调用页面只需将原来的 οnclick="$.table.exportExcel()"改成 οnclick="$.table.easyExportExcel()"即可。

　　　  ④、需要注意的地方，原来传递开始日期及结束日期是放在params中的，以现在的方式传递开始时间及结束时间时不适合放入params中（尝试了很多办法，还是没有成功）。
                   解决办法可以在对应业务实体中加入startTime及endTime字段，生成get、set方法，
                   页面中将原本name=params[beginTime]改为name=startTime，name=params[endTime]改为name=endTime，
                   在对应mapper中将#{params.beginTime}改为#{startTime}，将#{params.endTime}改为#{endTime}即可。

　　8、其他注意点

            ①、如果是初始化树形列表的 $.treeTable.init(options);，需要隐藏相应字段，则不可以使用 visible : false，不然会导致不树形展示的问题

            ②、如果是初始化正常列表的 $.table.init(options);，在mapper的sql语句中不能使用order by 进行排序，不然会发生执行sql保存，可以在options 配置中加入需要排序的字段即可