若依項目開發實踐

   記錄下使用若依項目，在實際開發過程中，可能需要用到的開發點。

   1、表格中字典轉化：

var datas = [[${@dict.getType('sys_user_sex')}]];

formatter: function(value, row, index) {
	return $.table.selectDictLabel(datas, value);
}

　2、日期格式化

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

　3、隱藏表格某列

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

 

或者

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

　4、表單中的選擇框實現，以及值選中

<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

<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方式導出的方法，以便前端調用，具體代碼如下：

//使用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();

},

　　     ③、具體調用頁面只需將原來的 onclick="$.table.exportExcel()"改成 onclick="$.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 配置中加入需要排序的字段即可