场景
SpringBoot+MyBatisPlus+DataTables
效果
退货列表展示
新建退货单效果
编辑退货单效果
查看详情效果
实现
获取退货页面实现
点击菜单栏跳转到controller的“获取退货页面”的方法。
@Description("获取退货页面")
@RequestMapping("/refund.html")
public String doGetListForRefund(){
return "refund/wmsRefundOrder.html";
}此方法会跳转到项目下的template下的refund下的wmsRefundOrder.html
wmsRefundOrder.html
页面使用的是template模板
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
th:replace="layout/layout(title='退货管理',cssPaths='/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/refund/wmsOrderRefund.js')"><!-- layout文件路径-->
<div th:fragment="content">
<div class="ibox float-e-margins">
<div class="ibox ">
<div class="ibox-title">
<h5>条件搜素</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<table class="table my-minus-1 mb-minus-1">
<tbody>
<tr>
<td>
<div class="row" >
<div class="col-sm-2">
<div class="form-group">
<label class="col-form-label" for="refundNumber">退货单号</label>
<input type="text" name="refundNumber" value="" placeholder="退货单号" class="form-control">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="col-form-label" for="businessCode">业务单号</label>
<input type="text" name="businessCode" value="" placeholder="业务单号" class="form-control">
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr class="text-center">
<td colspan="4">
<button class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button>
<button class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="ibox-content">
<div class="table-responsive">
<P>
<button class="btn btn-info " type="button"><i class="fa fa-save"></i> 新增</button>
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
<!--<button class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 删除</button>-->
<button class="btn btn-info " type="button"><i class="fa fa-save"></i> 生成出库单</button>
<button class="btn btn-info " type="button"><i class="fa fa-save"></i> 查看详情</button>
<button class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button>
</P>
<p>
</p>
<table class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th>序号</th>
<th>退货单号</th>
<th>退货单名称</th>
<th>业务发起方</th>
<th>退货单状态</th>
<th>退至位置</th>
<th>开始时间</th>
<th>完成时间</th>
<th>出库单号</th>
<th>退货原因</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</html>注：
需要引入jquery文件以及DataTables等文件。
js代码--wmsOrderRefund.js
上面的html中的table就是用来渲染DataTables的元素。
$(document).ready(function() {
//全局变量定义
var dataArr = [];
var data = {};
var apModelSubmitBt = $("#apModelSubmitBt").ladda();
// DataTable初始化
var t = $('#example').DataTable({
"language": {
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"searchPlaceholder": "搜索...",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
},
"aria": {
paginate: {
first: '首页',
previous: '上页',
next: '下页',
last: '末页'
},
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
},
"decimal": "-",
"thousands": "."
},
"processing": true,
"searching" : false,
"serverSide": true,
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": "_all",
}],
"dom": '<"top">rt<"bottom"flpi><"clear">',
columns: [
{ data: 'id' },
{ data: 'refundNumber' },
{ data: 'refundName' },
{ data: 'businessInitiator' },
{ data: 'statusName',
"orderable" : false},
{ data: 'destination'},
{ data: 'startTime' ,
render: function (data, type, full, meta) {
if (data != null && data != "") {
return moment(data).format("YYYY-MM-DD HH:mm:ss");
}
return "未开始";
}
},
{
data: 'finishTime',
render: function (data, type, full, meta) {
if (data != null && data != "") {
return moment(data).format("YYYY-MM-DD HH:mm:ss");
}
return "未完成";
}
},
{ data: 'businessCode' ,
render: function (data, type, full, meta) {
if (data != null && data != "") {
return data;
}
return "未生成";
}},
{ data: 'refundReason' },
{ data: 'remark' }
],
"ajax": function (data, callback, setting) {
//匹配搜索参数
$.each(data.columns,function (index,value) {
// console.log( $("#searchCondition").find('input[type="text"]'))
$("#searchCondition").find('input[type="text"]').each(function () {
if(value.data === $(this).attr('id')){
value.search.value = $(this).val();
}
});
});
$.ajax({
type: 'POST',
url: "/wmsRefundOrder/getRefundList",
cache: false, //禁用缓存
data: JSON.stringify(data), //传入组装的参数
contentType: "application/json",
dataType: "json",
success: function (result) {
callback(result);
}
})
}
});
$('#example tbody').on('click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
//$(this).removeClass('selected');
}
else {
t.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
t.on( 'draw.dt', function () {
var PageInfo = $('#example').DataTable().page.info();
t.column(0, { page: 'current' }).nodes().each( function (cell, i) {
cell.innerHTML = i + 1 + PageInfo.start;
} );
} );
//刷新按钮点击事件
$("#searchBtn,#refreshBt").click(function () {
t.ajax.reload( null, false ); // 刷新表格数据，分页信息不会重置
});
//重置按钮点击事件
$("#resetBtn").click(function () {
$("#searchCondition input").each(function () {
$(this).val("");
})
});
//添加按钮点击事件
$("#addBtn").click(function () {
window.location.href="/wmsRefundOrder/toAddRefundOrder?id=0"
});
//生成出货单按钮点击事件
$("#generateBtn").click(function () {
var data = t.rows(['.selected']).data()[0];
if(undefined===data){
swal({
type: 'warning',
title: '提示:',
text: '请首先选择一行数据！',
confirmButtonColor: "#1ab394",
})
}else{
generateOutOrder(data.id);
}
});
//编辑按钮点击事件
$("#editBtn").click(function () {
var data = t.rows(['.selected']).data()[0];
if(undefined===data){
swal({
type: 'warning',
title: '提示:',
text: '请首先选择一行数据！',
confirmButtonColor: "#1ab394",
})
}else{
$.post("/wmsRefundOrder/isGenerateOutOrder", {id: data.id}).done(function (res) {
if (res.status) {
window.location.href="/wmsRefundOrder/toAddRefundOrder?id="+data.id;
} else {
Swal.fire(
'异常提示!',
res.data,
'error'
)
}
}).fail(function (err) {
Swal.fire(
'异常提示',
'系统异常，请重试或联系管理员！',
'error'
)
});
}
});
//查看详情按钮点击事件
$("#detailsBtn").click(function () {
var data = t.rows(['.selected']).data()[0];
if(undefined===data){
swal({
type: 'warning',
title: '提示:',
text: '请首先选择一行数据！',
confirmButtonColor: "#1ab394",
})
}else{
window.location.href="/wmsRefundOrder/toRefundOrderDetails?id="+data.id;
}
});
//生成出库单按钮点击事件
$("#deleteBtn").click(function () {
var data = t.rows(['.selected']).data()[0];
if(undefined===data){
swal({
type: 'warning',
title: '提示:',
text: '请首选选择一行数据！',
confirmButtonColor: "#1ab394"
})
}else{
apDelete(data.id);
}
});
//删除退款单方法
function apDelete(id) {
Swal.fire({
title: '确定删除吗?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#23c6c8',
cancelButtonColor: '#d33',
cancelButtonText: '取消',
confirmButtonText: '确定'
}).then(function (result) {
if (result.value) {
$.post("/wmsRefundOrder/doDeleteRefundOrder", {id: id}).done(function (res) {
if (res.status) {
t.ajax.reload(null, false); // 刷新表格数据，分页信息不会重置
Swal.fire(
'删除成功!',
res.data,
'success'
)
} else {
Swal.fire(
'删除失败!',
res.data,
'error'
)
}
}).fail(function (err) {
Swal.fire(
'异常提示',
'执行删除操作失败',
'error'
)
});
}
})
}
//生成出库单方法
function generateOutOrder(id) {
Swal.fire({
title: '确定生成出库单吗?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#23c6c8',
cancelButtonColor: '#d33',
cancelButtonText: '取消',
confirmButtonText: '确定'
}).then(function (result) {
if (result.value) {
$.post("/wmsRefundOrder/doGenerateOutOrder", {id: id}).done(function (res) {
if (res.status) {
t.ajax.reload(null, false); // 刷新表格数据，分页信息不会重置
Swal.fire(
'生成出库单成功!',
res.data,
'success'
)
} else {
Swal.fire(
'错误提示!',
res.data,
'error'
)
}
}).fail(function (err) {
Swal.fire(
'异常提示',
'生成出库单操作失败',
'error'
)
});
}
})
}
} );注：
1.对datTables赋值的地方在columns部分。
2.对时间列进行格式化的代码：
{ data: 'startTime' ,
render: function (data, type, full, meta) {
if (data != null && data != "") {
return moment(data).format("YYYY-MM-DD HH:mm:ss");
}
return "未开始";
}
},3.通过ajax请求数据，通过请求 url: "/wmsRefundOrder/getRefundList",定位到后台controller。
后台Controller代码
@Description("获取退货单列表接口")
@ResponseBody
@RequestMapping(value = "/getRefundList")
public DataTablesResultJsonVO getRefundList(@RequestBody DataTablesJsonVO vo) {
DataTablesResultJsonVO dataTablesResultJsonVO = new DataTablesResultJsonVO();
try {
String keyHump= vo.getColumns().get(vo.getOrder().get(0).getColumn().intValue()).getData();
String keyLine = StringUtil.humpToLine(keyHump);
String sortStr = vo.getOrder().get(0).getDir();
long currentPage = vo.getStart()/vo.getLength()+1;
Page<WmsRefundOrder> refundOrderPage = new Page<WmsRefundOrder>(currentPage, 1000);
if("asc".equals(sortStr)){
refundOrderPage.setAsc("wro." + keyLine);
}else{
refundOrderPage.setDesc("wro." + keyLine);
}
IPage<WmsRefundOrderVO> page = refundOrderService.pageRefundOrder(refundOrderPage, vo);
dataTablesResultJsonVO.setData(page.getRecords());
dataTablesResultJsonVO.setDraw(vo.getDraw());
dataTablesResultJsonVO.setError("error");
dataTablesResultJsonVO.setRecordsFiltered(page.getTotal());
dataTablesResultJsonVO.setRecordsTotal(page.getSize());
Log.getInst(this).debug("getRefundList test:"+vo.getColumns().get(0).getSearch());
return dataTablesResultJsonVO;
} catch (Exception ex){
dataTablesResultJsonVO.setData(new ArrayList<WmsRefundOrder>());
dataTablesResultJsonVO.setDraw(vo.getDraw());
dataTablesResultJsonVO.setError("error");
dataTablesResultJsonVO.setRecordsFiltered(0L);
dataTablesResultJsonVO.setRecordsTotal(0L);
Log.getInst(this).debug("getRefundList test:"+vo.getColumns().get(0).getSearch());
return dataTablesResultJsonVO;
}
}注：
一些封装的实体类用来存取dataTables的一些参数，主要看用来查找数据的部分
Service层代码
IPage<WmsRefundOrderVO> pageRefundOrder(Page page, DataTablesJsonVO vo);ServiceImpl代码
public IPage<WmsRefundOrderVO> pageRefundOrder(Page page , DataTablesJsonVO vo) {
WmsRefundOrder refundOrder = new WmsRefundOrder();
List<DataTablesColumnsJsonVO> dataTablesColumnsJsonVOList= vo.getColumns();
for (DataTablesColumnsJsonVO d : dataTablesColumnsJsonVOList) {
if("refundNumber".equals(d.getData()))
refundOrder.setRefundNumber(d.getSearch().getValue());
if("businessCode".equals(d.getData()))
refundOrder.setBusinessCode(d.getSearch().getValue());
}
return baseMapper.pageRefundOrder(page,refundOrder);
}mapper层代码
IPage<WmsRefundOrderVO> pageRefundOrder( Page page,@Param("refundOrder") WmsRefundOrder refundOrder);xml代码
<!--获取退货订单分页数据-->
<select parameterType="com.ws.bus.sys.entity.WmsRefundOrder" resultMap="wmsRefundOrderVOMap">
SELECT wro.*,code.code_name status_name
FROM wms_refund_order wro
JOIN sys_code code on code.code_type= 'refund_order_status' and wro.status= code.code_value and code.is_delete = 0
WHERE wro.deleted_flag = 0
<if test="refundOrder != null and refundOrder.refundNumber != null and '' != refundOrder.refundNumber">
and wro.refund_number like CONCAT('%',#{refundOrder.refundNumber},'%')
</if>
<if test="refundOrder != null and refundOrder.businessCode != null and '' != refundOrder.businessCode">
and wro.business_code like CONCAT('%',#{refundOrder.businessCode},'%')
</if>
</select>新增与编辑功能实现
技术实现参照
SpringBoot+Jquery+DataTables实现select改变数据联动加载（前后端全流程）:
新增与编辑实现
页面新增与编辑按钮代码
<button class="btn btn-info " type="button"><i class="fa fa-save"></i> 新增</button>
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>点击事件
//添加按钮点击事件
$("#addBtn").click(function () {
window.location.href="/wmsRefundOrder/toAddRefundOrder?id=0"
});点击新增按钮页面跳转到href属性对应的地址，传递参数id，值为0，目的是为了在与编辑共用一个页面时能够区分。
//编辑按钮点击事件
$("#editBtn").click(function () {
var data = t.rows(['.selected']).data()[0];
if(undefined===data){
swal({
type: 'warning',
title: '提示:',
text: '请首先选择一行数据！',
confirmButtonColor: "#1ab394",
})
}else{
$.post("/wmsRefundOrder/isGenerateOutOrder", {id: data.id}).done(function (res) {
if (res.status) {
window.location.href="/wmsRefundOrder/toAddRefundOrder?id="+data.id;
} else {
Swal.fire(
'异常提示!',
res.data,
'error'
)
}
}).fail(function (err) {
Swal.fire(
'异常提示',
'系统异常，请重试或联系管理员！',
'error'
)
});
}
});点击编辑按钮后获取选中一行的记录的id，作为参数一起传递到后台Controller方法。
后台Controller获取新增和编辑界面
@Description("获取新增或者编辑界面")
@RequestMapping("/toAddRefundOrder")
public String toAddRefundOrder( int id, Model model){
if ( id != 0){
//如果是编辑操作，查询出当前退货单
WmsRefundOrder refundOrder = refundOrderService.getById(id);
model.addAttribute("refundOrder",refundOrder);
}
return "refund/addRefundOrder.html";
}接受到传递的id参数，如果id为空则是新增，如果不为0则是编辑。
如果是编辑则根据接受的id查询数据库中要编辑的实体，并通过model传递到新增和编辑页面。
新增和编辑页面代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
th:replace="layout/layout(title='领料单',cssPaths='/public/css/plugins/select2/select2.min.css,/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/refund/addOrderRefund.js')">
<!-- layout文件路径-->
<div th:fragment="content">
<div class="ibox float-e-margins">
<form role="form" action="">
<div class="ibox ">
<div class="ibox-title">
<a href="/wmsRefundOrder/refund.html"><i class=" mr_05em"></i> 返回上一页</a><br>
<h5>退货单信息</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content" >
<table class="table my-minus-1 mb-minus-1">
<tbody>
<tr>
<td>
<input type="hidden" name="id" th:value="${refundOrder == null?'':refundOrder.id}"/>
<input type="hidden" name="refundNumber" th:value="${refundOrder == null?'':refundOrder.refundNumber}"/>
<div class="row">
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货单名称</label>
<div class="col-sm-10">
<input type="text" class="form-control"
th:value="${refundOrder == null?'':refundOrder.refundName}"
name="refundName">
</div>
</div>
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货发起方</label>
<div class="col-sm-10">
<select class="form-control" name="businessInitiator" id= "businessInitiator" th:attr="disabled=${refundOrder != null?'disabled':'false'}" >
<option th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option>
<option th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '清洁车间仓库'}" value="清洁车间仓库"><span th:text="清洁车间仓库"></span></option>
<option th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '正极车间仓库'}" value="正极车间仓库"><span th:text="正极车间仓库"></span></option>
<option th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator == '负极车间仓库'}" value="负极车间仓库"><span th:text="负极车间仓库"></span></option>
<option value="" disabled th:selected="${refundOrder == null || refundOrder.businessInitiator == null}" hidden>选择退货发起方</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货目的地</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="destination"
th:value="${refundOrder == null?'':refundOrder.destination}" readonly>
</div>
</div>
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货原因</label>
<div class="col-sm-10">
<input class="form-control"
th:value="${refundOrder == null?'':refundOrder.refundReason}"
name="refundReason">
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-md-12">
<label class="col-sm-1 col-form-label">备注</label>
<div class="col-sm-11">
<textarea type="text" class="form-control" name="remark"
th:text="${refundOrder == null?'':refundOrder.remark}"> </textarea>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ibox-content">
<h5>请选择要退货的不良品（可多选）</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" class="checkall" /></th>
<th>货位编号</th>
<th>货位类型</th>
<th>物料类型</th>
<th>物料状态</th>
<th>所在货架</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<P>
<button class="btn btn-info " type="submit"><i class="fa fa-save"></i>保存 </button>
</P>
</form>
</div>
</div>
</html>注：
1.面上方通过thymeleaf模板控制页面数据的显示，如果有值则为编辑则显示相应的值，如果是新增则值我I空则显示为空，通过：
th:value="${refundOrder == null?'':refundOrder.id}"这种选择表达式实现。
2.退货发起方中通过是否给select添加select属性来区分添加与编辑，
如果是新增则值 refundOrder为空，则渲染为disabled="disabled",如果不为空则是编辑，但是不能再更改此select的
内容，会被渲染成disabled="false",则此select不可选。
通过：
<select class="form-control" name="businessInitiator" id= "businessInitiator" th:attr="disabled= ${refundOrder!= null?'disabled':'false'}" >实现。
3.通过设值select的默认选项，让其进行新增和编辑时必须触发select事件进而触发数据联动，但是这个默认选项的值不能作为选项，通过：
<option value= "" disabledth:selected= "${refundOrder= = null || refundOrder.businessInitiator == null}" hidden>选择退货发起方</option>实现。
新增和编辑的js代码
$(document).ready(function() {
//获取下拉框的值，判断是否为空，不为空则是编辑，那么就要初始化dataTables
var selected = $("#businessInitiator option:selected").val();
if(selected!=""){
var t = $('#example').DataTable({
"language": {
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"searchPlaceholder": "搜索...",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
},
"aria": {
paginate: {
first: '首页',
previous: '上页',
next: '下页',
last: '末页'
},
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
},
"decimal": "-",
"thousands": "."
},
"processing": true,
"searching" : false,
"pageLength": 100,
"serverSide": true,
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": "_all",
}],
"dom": '<"top">rt<"bottom"flpi><"clear">',
columns: [
{ data: 'id' ,
"orderable" : false},
{ data: 'goodsLocationNumber' },
{ data: 'locationTypeName' ,
"orderable" : false},
{ data: 'saveMaterialTypeName' ,
"orderable" : false},
{ data: 'materielStatusName',
"orderable" : false},
{ data: 'shelveName' ,
"orderable" : false},
{ data: 'remark',
"orderable" : false }
],columnDefs: [{
// 指定第1列，从0开始，0表示第一列，1表示第二列……
"targets": 0,
"bSortable": false,
"render": function(data, type, row, meta) {
if (row.isSelected == 1){
return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
}
return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
}
}],
"ajax": function (data, callback, setting) {
data.editActionId = $("#refundOrderId").val();
data.selected=selected;
$.ajax({
type: 'POST',
url: "/busGoodsLocation/getRejectsLocationsList",
cache: false, //禁用缓存
//async: true,
data: JSON.stringify(data), //传入组装的参数
contentType: "application/json",
dataType: "json",
success: function (result) {
callback(result);
}
})
}
});
}
//选择退货方后退货目的地绑定联动
$("#businessInitiator").bind("change", function () {
//获取选中的option的value值
var selected = $("#businessInitiator option:selected").val();
//获取退货目的地Input对象
var destination = $("#destination");
switch (selected){
case '原料立库':
destination.val("原料立库退货点")
break;
case '清洁车间仓库':
destination.val("清洁车间退货点")
break;
case '正极车间仓库':
destination.val("正极车间退货点")
break;
case '负极车间仓库':
destination.val("负极车间退货点")
break;
default:
destination.val("其它退货点")
}
//退货目的地联动完成
// DataTable初始化
$("#example").dataTable().fnDestroy();//还原初始化了datatable
var t = $('#example').DataTable({
"language": {
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"searchPlaceholder": "搜索...",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
},
"aria": {
paginate: {
first: '首页',
previous: '上页',
next: '下页',
last: '末页'
},
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
},
"decimal": "-",
"thousands": "."
},
"processing": true,
"searching" : false,
"pageLength": 100,
"serverSide": true,
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": "_all",
}],
"dom": '<"top">rt<"bottom"flpi><"clear">',
columns: [
{ data: 'id' ,
"orderable" : false},
{ data: 'goodsLocationNumber' },
{ data: 'locationTypeName' ,
"orderable" : false},
{ data: 'saveMaterialTypeName' ,
"orderable" : false},
{ data: 'materielStatusName',
"orderable" : false},
{ data: 'shelveName' ,
"orderable" : false},
{ data: 'remark',
"orderable" : false }
],columnDefs: [{
// 指定第1列，从0开始，0表示第一列，1表示第二列……
"targets": 0,
"bSortable": false,
"render": function(data, type, row, meta) {
if (row.isSelected == 1){
return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'
}
return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'
}
}],
"ajax": function (data, callback, setting) {
data.editActionId = $("#refundOrderId").val();
data.selected=selected;
$.ajax({
type: 'POST',
url: "/busGoodsLocation/getRejectsLocationsList",
cache: false, //禁用缓存
//async: true,
data: JSON.stringify(data), //传入组装的参数
contentType: "application/json",
dataType: "json",
success: function (result) {
callback(result);
}
})
}
});
});
$(".checkall").click(function () {
var check = $(this).prop("checked");
$(".checkchild").prop("checked", check);
});
if ($("#refundOrderId").val() != null && $("#refundOrderId").val() != "")
{
initAddOrEditFormValidate("editAction");
}else {
initAddOrEditFormValidate("addAction");
}
});
function childClick(thisCheck) {
var allCheck = true;
$(".checkchild").each(function () {
if ($(this).prop("checked") == false) {
allCheck = false;
}
});
if (allCheck == true) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
}
// 初始化权限验证
function initAddOrEditFormValidate(op) {
// 权限添加form提交操作
$("#refundOrderAdd").validate({
rules: {
refundName: {
required: true
},
businessInitiator: {
required: true
},
destination: {
required: true
}
},
messages: {
refundName: {
required: "请输入退货单名称"
},
businessInitiator: {
required: "请选择退货发起方"
}
},
submitHandler:function(form){
//判断时候有不良品选中
var someCheck = false;
$(".checkchild").each(function () {
if ($(this).prop("checked") == true) {
someCheck = true;
}
});
if (someCheck == false) {
swal({
type: 'fail',
title: '失败提示:',
text: '请务必选中一项不良品进行退货',
confirmButtonColor: "#1ab394"
});
return;
}
var formData = $("#refundOrderAdd").serialize();
var idStr = [];
$(".checkchild:checked").each(function () {
idStr.push($(this).val());
});
formData += "&idStr=" +idStr;
formData += "&op=" +op;
//formData += "&refundId=" + $("#refundOrderId").val();
console.log(formData);
$.post("/wmsRefundOrder/doSaveRefundOrder", formData).done(function (res) {
if(res.status){
swal({
type: 'success',
title: '成功提示:',
text: res.data,
confirmButtonColor: "#1ab394",
}).then(function () {
window.location.href="/wmsRefundOrder/refund.html"
})
}else{
swal({
type: 'fail',
title: '失败提示:',
text: res.data,
confirmButtonColor: "#1ab394",
})
}
}).fail(function (err) {
swal({
type: 'fail',
title: '失败提示:',
text: '退货单接口调用失败！',
confirmButtonColor: "#1ab394",
})
});
}
});
}注：
1.页面加载完成之后，获取下拉框的值，判断是否为空，不空则是编辑，所以要初始化dataTables
2.下拉框选择完成之后，要联动一个input框的值，还要刷新dadtaTables的值，因为在同一个页面不能多次初始化dataTables所以要使用 $("#example").dataTable().fnDestroy();//还原初始化了datatable。
dataTables请求数据的后台方法
@Description("根据条件获取不良品货位列表")
@RequestMapping(value = "/getRejectsLocationsList", method = RequestMethod.POST)
@ResponseBody
public DataTablesResultJsonVO getRejectsLocationsList(@RequestBody DataTablesJsonVOExt vo) {
DataTablesResultJsonVO dataTablesResultJsonVO = new DataTablesResultJsonVO();
try {
String keyHump = vo.getColumns().get(vo.getOrder().get(0).getColumn().intValue()).getData();
String keyLine = StringUtil.humpToLine(keyHump);
String sortStr = vo.getOrder().get(0).getDir();
long currentPage = vo.getStart() / vo.getLength() + 1;
Page<WmsRefundOrder> refundOrderPage = new Page<WmsRefundOrder>(currentPage, 100);
if ("asc".equals(sortStr)) {
refundOrderPage.setAsc("location." + keyLine);
} else {
refundOrderPage.setDesc("location." + keyLine);
}
IPage<BusGoodsLocationVO> page = null;
//接收车间仓库参数，进行参数赋值
String warehourse = vo.getSelected();
//仓库车间赋值
String wareNum="A";
switch (warehourse){
case "原料立库":
wareNum="A";
break;
case "清洁车间仓库":
wareNum="B";
break;
case "正极车间仓库":
wareNum="C";
break;
case "负极车间仓库":
wareNum="D";
break;
}
//当编辑操作id存在时，表明是编辑操作
if (vo.getEditActionId() != null && vo.getEditActionId() != 0) {
page = locationService.pageRejectsLocations(refundOrderPage, vo, 1,wareNum);
//查询出当前退货单下的所有明细
QueryWrapper<WmsRefundOrderDetails> refundOrderDetailsQueryWrapper = new QueryWrapper<>();
refundOrderDetailsQueryWrapper.eq("refund_id", vo.getEditActionId()).eq("deleted_flag", "0");
List<WmsRefundOrderDetails> refundOrderDetails = refundOrderDetailsService.list(refundOrderDetailsQueryWrapper);
for (BusGoodsLocationVO locationVO : page.getRecords()) {
for (WmsRefundOrderDetails details : refundOrderDetails) {
if (details.getGoodsLocationId().equals(locationVO.getId())) {
locationVO.setIsSelected(1);
break;
}
}
}
//删除非此退货单对应的货位
for (BusGoodsLocationVO locationVO : page.getRecords()) {
if (locationVO.getRefundOrderFlag() == 1 && locationVO.getIsSelected() == 0) {
page.getRecords().remove(locationVO);
}
}
} else {
page = locationService.pageRejectsLocations(refundOrderPage, vo, 0,wareNum);
}
dataTablesResultJsonVO.setData(page.getRecords());
dataTablesResultJsonVO.setDraw(vo.getDraw());
dataTablesResultJsonVO.setError("error");
dataTablesResultJsonVO.setRecordsFiltered(page.getTotal());
dataTablesResultJsonVO.setRecordsTotal(page.getSize());
Log.getInst(this).debug("getRefundList test:" + vo.getColumns().get(0).getSearch());
return dataTablesResultJsonVO;
} catch (Exception ex) {
dataTablesResultJsonVO.setData(new ArrayList<WmsRefundOrder>());
dataTablesResultJsonVO.setDraw(vo.getDraw());
dataTablesResultJsonVO.setError("error");
dataTablesResultJsonVO.setRecordsFiltered(0L);
dataTablesResultJsonVO.setRecordsTotal(0L);
Log.getInst(this).debug("getRefundList test:" + vo.getColumns().get(0).getSearch());
return dataTablesResultJsonVO;
}
}查看详情功能实现
html页面代码
<button class="btn btn-info " type="button"><i class="fa fa-save"></i> 查看详情</button>点击事件
//查看详情按钮点击事件
$("#detailsBtn").click(function () {
var data = t.rows(['.selected']).data()[0];
if(undefined===data){
swal({
type: 'warning',
title: '提示:',
text: '请首先选择一行数据！',
confirmButtonColor: "#1ab394",
})
}else{
window.location.href="/wmsRefundOrder/toRefundOrderDetails?id="+data.id;
}
});获取选中记录的id属性并传递到后台方法
后台查看详情对应的方法
@Description("获取退货单详情界面")
@RequestMapping("/toRefundOrderDetails")
public String toRefundOrderDetails(int id, Model model){
//根据前端传来的退货单Id，查出退货单详情
WmsRefundOrderVO refundOrder = refundOrderService.getRefundOrderById(id);
QueryWrapper<WmsRefundOrderDetails> detailsQueryWrapper = new QueryWrapper<>();
detailsQueryWrapper.eq("refund_id",refundOrder.getId()).eq("deleted_flag","0");
List<WmsRefundOrderDetails> orderDetails = refundOrderDetailsService.list(detailsQueryWrapper);
model.addAttribute("orderDetails", orderDetails);
model.addAttribute("refundOrder", refundOrder);
return "refund/refundOrderDetails.html";
}详情页面代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
th:replace="layout/layout(title='领料单',cssPaths='/public/css/plugins/select2/select2.min.css,/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/refund/orderRefunddetails.js')">
<!-- layout文件路径-->
<div th:fragment="content">
<div class="ibox float-e-margins">
<form role="form" action="">
<div class="ibox ">
<div class="ibox-title">
<a href="/wmsRefundOrder/refund.html"><i class=" mr_05em"></i> 返回上一页</a><br>
<h5>退货单信息</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content" >
<table class="table my-minus-1 mb-minus-1">
<tbody>
<tr>
<td>
<input type="hidden" name="id" th:value="${refundOrder == null?'':refundOrder.id}"/>
<input type="hidden" name="refundNumber" th:value="${refundOrder == null?'':refundOrder.refundNumber}"/>
<div class="row">
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货单号</label>
<div class="col-sm-10">
<input type="text" class="form-control" readonly
th:value="${refundOrder == null?'':refundOrder.refundNumber}"
name="refundNumber">
</div>
</div>
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货单名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" readonly
th:value="${refundOrder == null?'':refundOrder.refundName}"
name="refundName">
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货发起方</label>
<div class="col-sm-10">
<input type="text" class="form-control" readonly
th:value="${refundOrder == null?'':refundOrder.businessInitiator}"
name="businessInitiator">
</div>
</div>
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货目的地</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="destination" readonly
th:value="${refundOrder == null?'':refundOrder.destination}">
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退款单状态</label>
<div class="col-sm-10">
<input type="text" class="form-control" readonly
th:value="${refundOrder == null?'':refundOrder.statusName}"
name="statusName">
</div>
</div>
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">退货原因</label>
<div class="col-sm-10">
<input class="form-control" readonly
th:value="${refundOrder == null?'':refundOrder.refundReason}"
name="refundReason">
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">业务单类型</label>
<div class="col-sm-10">
<input class="form-control" readonly
th:value="${refundOrder.businessType == null?'无':refundOrder.businessType}"
name="businessType">
</div>
</div>
<div class="form-group row col-md-6">
<label class="col-sm-2 col-form-label">业务单号</label>
<div class="col-sm-10">
<input class="form-control" readonly
th:value="${refundOrder.businessCode == null?'无':refundOrder.businessCode}"
name="businessCode">
</div>
</div>
</div>
<div class="row">
<div class="form-group row col-md-12">
<label class="col-sm-1 col-form-label">备注</label>
<div class="col-sm-11">
<textarea type="text" class="form-control" name="remark" readonly
th:text="${refundOrder == null?'':refundOrder.remark}"> </textarea>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ibox-content">
<h4>退货单详情列表</h4>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th>详情ID</th>
<th>货位编号</th>
<th>货位名称</th>
<th>物料名称</th>
<th>物料类型</th>
<th>所在货架</th>
<th>物料批次</th>
<th>供应商批次</th>
<th>数量</th>
<th>单位</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr th:each="detail:${orderDetails}">
<td th:text="${detail.id}"></td>
<td th:text="${detail.goodsLocationNumber}"></td>
<td th:text="${detail.goodsLocationName}"></td>
<td th:text="${detail.materielName}"></td>
<td th:text="${detail.materielTypeName}"></td>
<td th:text="${detail.shelvesNumber}"></td>
<td th:text="${detail.batch}"></td>
<td th:text="${detail.supplierBatch}"></td>
<td th:text="${detail.num}"></td>
<td th:text="${detail.untiy}"></td>
<td th:text="${detail.remark}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</html>