O2O项目-业务功能-账单明细
结算单明细
-
点击明细按钮时,首先需要获取statementId 跳转到StatementItemController
-
通过id查询账单的状态(消费中或已支付),两种状态分别对应的edit.html或detail.html
-
在edit.html页面中可以进行服务项的选择
-
需要很多前端的代码来进行功能实现
-
首先页面的展示需要用到三个插件,这些插件都是事先导好的包,
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> 权限控制 <head> <th:block th:include="common/include :: header('预约列表')" />头文件,否则无法渲染 <th:block th:include="common/include :: footer" /> 尾部文件,可以使网页镶嵌在系统中,以及一些下标信息 <th:block th:include="common/include :: layout-latest" />分区插件,分别是 east west north south center 用法:<div class="ui-layout-center > </div> <div class="ui-layout-east > </div> 再使用进行区域大小的设置 <script th:inline="javascript"> $('body').layout({ east__size: '30%', }); </script> -
可以将页面分为五个部分,但是这次只需要分为两个区域,分别是center和east两个区域,两个区域中又要细分 east:需要高级查询和服务项展示 center:需要statement信息的展示,需要将页面分为12等分,分组中展示各个字段信息, 还有需要展示中表StatementItem的信息
-
serviceItem的服务项添加到statementItem
-
首先获取两边的表格的数据,这时需要在定义一个UniqueId: "id "使用API
var data=$('#table').bootstrapTable('getRowByUniqueId',id) var newData= {itemId:data.id, itemName:data.name, itemPrice:data.originalPrice,itemQuantity:1};由两边的的字段有可能不一样这时又需要使用newData对象进行封装
-
添加时使用判断statementItem这边数据data是否存在如果存在这时需要使用另一个API
$('#table').bootstrapTable('updateCellByUniqueId', { id:id, field: 'itemQuantity',//确定需要改变的字段,其他的字段值不要能改变,整体只能改变这个值 value:statementData.itemQuantity+1 })如果不存在又使用一个尾部添加的APi
$statementItemRow.bootstrapTable('append', newData);
-
-
statementItem的自减按钮,
-
减到数量小于1就自删除
$statementItemRow.bootstrapTable('removeByUniqueId',id); -
statementData.itemQuantity > 1 自减一
$statementItemRow.bootstrapTable('removeByUniqueId',id); -
-
总结添加和删除需要注意的事项,
-
两边的字段不一样时需要定义个封装目标的对象
-
添加时怎么只加数量不加对象
-
减量时减到最后只能删除
-
整体代码
-
var $serviceItemRow = $('#serviceItemTable'); var $statementItemRow = $('#statementItemTable'); function addItems(id) { var data = $serviceItemRow.bootstrapTable('getRowByUniqueId', id); var statementData = $statementItemRow.bootstrapTable('getRowByUniqueId', id); var newData = {itemId: data.id, itemName: data.name, itemPrice: data.originalPrice, itemQuantity: 1}; if (statementData) { $statementItemRow.bootstrapTable('updateCellByUniqueId', { id: id, field: 'itemQuantity', value: statementData.itemQuantity + 1 }) } else { $statementItemRow.bootstrapTable('append', newData); } updateAmount(); }
-
function addSelf(id) { var statementData = $statementItemRow.bootstrapTable('getRowByUniqueId', id); $statementItemRow.bootstrapTable('updateCellByUniqueId', { id: id, field: 'itemQuantity', value: statementData.itemQuantity + 1 }) updateAmount(); } function deleteSelf(id) { var statementData = $statementItemRow.bootstrapTable('getRowByUniqueId', id); if (statementData.itemQuantity > 1) { $statementItemRow.bootstrapTable('updateCellByUniqueId', { id: id, field: 'itemQuantity', value: statementData.itemQuantity - 1 }) } else { $statementItemRow.bootstrapTable('removeByUniqueId', id); } updateAmount(); } -
-
statementItem添加或者减少时需要金额随之改变
-
总金额 实付金额 折扣金额
-
进行金额计算的同时将金额加入相应的框内,需要的值一个值变化事件,触发该事件的是添加或者减少,这时在这三个按钮中绑定一个金额改变onchange事件
-
这个函数中需要结合一个APi使用
-
//获取整个表格的数据,false是所有页数 ,显然这是我们使用的 //表格的数据,true是当前页的数据 var data= $statementItemRow.bootstrapTable('getData',false);
5. 还有需要当我们输入优惠金额的时候也会触发金额的计算函数,所以需要在优惠金额的输入框绑定事件,调用一样的函数,当需要加入一些限制. 优惠金额比总金额数大 优惠金额是负数 优惠金额为空值是给定一个零,防止计算时空值计算为空 6. ```javascript //实现代码 var $totalAmount = $("#totalAmount"); var $actuallyPaid = $("#actuallyPaid"); var $discountAmount =$("input[name='discountAmount']"); function updateAmount(){ var actuallyPaid=0; var totalAmount=0; var discountAmount=0; //获取整个表格的数据,false是所有页数 var data= $statementItemRow.bootstrapTable('getData',false); $.each(data,function (index,item) { if (item.itemId){ totalAmount += item.itemPrice*item.itemQuantity; } }); discountAmount = $discountAmount.val(); if (!discountAmount) { $discountAmount.val(0); return; } if (discountAmount>totalAmount){ $discountAmount.val(0); return; } if (discountAmount<0){ $discountAmount.val(0); return; } $totalAmount.html(totalAmount); $actuallyPaid.html(totalAmount-discountAmount); } -
-
-
账单的保存
前端代码
-
/** * 需要将一个是statementId 和折扣价封装进去,由于需要传入折扣价格,方便在后端的代码中计算总金额 * 问题1:而statementItem对象中并没有优惠金额的字段所以是无法封装进去 * 解决方法,后端生成一个类,接收传过去的一个是装statementItem的集合对象和字discountAmount * 还有一种就是将discountAmount封装到一个statementItem对像中,形成一个list集合一起传过去 *保证数据的不能混乱所以 */ -
将数据保存,前端bootstrap-table API获取表中的所有的数据提交到后端得到的是一个
-
function saveFun() { $.modal.confirm("确定要保存",function () { var discountAmount = $discountAmount.val(); var statementId = [[${statement.id}]]; var data= $statementItemRow.bootstrapTable('getData',false); data.push({"itemPrice":discountAmount,"statementId":statementId}) config={ url:"/business/statementItem/saveItems", type:'post', dataType:'json', contentType:"application/json", data:JSON.stringify(data), beforeSend:function () { $.modal.loading("正在处理...."); }, success:function (result) { $.operate.ajaxSuccess(result); } }; $.ajax(config); $("#saveBtn").addClass("disabled"); $("#payBtn").removeClass("disabled"); $.table.refresh("#statementItemTable"); });
}
后端代码 - 在controller接收前端传过来的List<StatementItem> list - 这个集合号中存着两种数据类型,一个是StatementItem 另一个是discountAmount 优惠金额和statementId但是载体也是一个StatementItem类,能封装进去discountAmount是因为statementItem中有Bigdecimal类型的字段,所以能封装进去 - 明确statementId的作用,一个保存明细账单和服务项的关系,(保存关系一定需要将之前关系先删除),另一个是修改statement账单明细的 总金额 优惠金额 服务项总数量 - 业务层需要实现将的是先通过list获取出来statementId 和优惠金额.最后一个push进去,可以直接利用list.remove(list.size()-1).返回最后一个statementItem,也就是我们需要的discountAmount 优惠金额和statementId - 通过statementId先将原先的关系在statementItem表进行删除, - 遍历list ()需要做两件事:1.需要将服务总数和总的金额累加起来,2.将遍历出来的StatementItem对象存入数据库中 - 将累加统计的 折扣金额 金额总数 服务量总数,以修改的形式通过statementId进行数据的添加 - ```java @RequiresPermissions("business:statementItem:saveItems") @RequestMapping("/saveItems") @ResponseBody public AjaxResult saveItems(@RequestBody List< StatementItem > list){ statementItemService.saveItems(list); return AjaxResult.success(); } *---------------------------* @Override public void saveItems(List< StatementItem > list) { StatementItem item = list.remove(list.size() - 1); Long statementId = item.getStatementId(); statementItemMapper.deleteItem(statementId); BigDecimal discountAmount = item.getItemPrice(); BigDecimal totalAmount = new BigDecimal("0.00"); BigDecimal totalQuantity= new BigDecimal("0"); //服务项数量 for (StatementItem statementItem : list) { totalQuantity=totalQuantity.add(statementItem.getItemQuantity()); totalAmount=totalAmount.add(statementItem.getItemQuantity().multiply(statementItem.getItemPrice())); statementItem.setStatementId(statementId); statementItemMapper.insert(statementItem); } statementMapper.updateAmcount(statementId,totalAmount,totalQuantity,discountAmount); } ``` -
-
账单的支付
需求:
- 通过账单id来修改支付账单后修改账单状态为已支付,记录支付管理人(payeeId),
- 跳转到支付后明细界面
前端:
-
点击支付按钮,传递过来statementId,
-
支付结束后执行跳转的用的statementId
-
具体实现:细节是translation(id)函数要在支付pay函数之前生成要,否则无法完成跳转
function translation(id) { window.location.href="/business/statementItem/editOrDetail?statementId="+id; //页面刷新 $.table.refresh("bootstrap-table"); } function payFun(){ $.modal.confirm("确定要支付么",function () { //获取作用域中的statementId var statementId = [[${statement.id}]]; config={ url:"/business/statementItem/pay?statementId="+statementId, type:'post', dataType:'json', contentType:"application/json", beforeSend:function () { $.modal.loading("正在处理...."); }, success:function (result) { $.operate.ajaxSuccess(result); //在此处执行跳转函数 translation(statementId); } }; $.ajax(config); }); }
后端:
-
接收传过来的pay 支付用的statementId,进行账单明细的状态修改,为支付状态,以及账单办理人
-
具体实现
@RequiresPermissions("business:statementItem:pay") @RequestMapping("/pay") @ResponseBody public AjaxResult pay(Long statementId){ statementItemService.pay(statementId); return AjaxResult.success(); } *-------------------------* @Override public void pay(Long statementId) { Statement statement = statementMapper.selectByPrimaryKey(statementId); if (!Statement.STATUS_CONSUME.equals(statement.getStatus())) { throw new BusinessException("非法操作"); } statementMapper.updateByPay(Statement.STATUS_PAID,ShiroUtils.getUser().getId() ,statementId); }整体前端代码
- 灵活添加服务项,自动计算结算金额,保存账单,简单支付账单,修改相应的状态
- serviceItem_list.html
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <meta charset="UTF-8"> <th:block th:include="common/include :: header('结算单明细')" /> </head> <body> <div class="ui-layout-center"> <div class="container-div"> <div class="row"> <div class="col-sm-12 search-collapse"> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">客户姓名：</label> <label class="col-sm-6 control-label">[[${statement.customerName}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">联系方式：</label> <label class="col-sm-6 control-label">[[${statement.customerPhone}]]</label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">车牌号码：</label> <label class="col-sm-6 control-label">[[${statement.licensePlate}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">汽车类型：</label> <label class="col-sm-6 control-label">[[${statement.carSeries}]]</label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">服务类型：</label> <label class="col-sm-6 control-label">[[${@dict.getLabel('si_service_catalog',statement.serviceType)}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">到店时间：</label> <label class="col-sm-6 control-label" th:text="${#dates.format(statement.actualArrivalTime, 'yyyy-MM-dd HH:mm:ss')}"></label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">总消费金额：</label> <label class="col-sm-6 control-label" onchange="updateAmount()" id="totalAmount">[[${statement.totalAmount}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">实付价格：</label> <label class="col-sm-6 control-label" id="actuallyPaid">[[${statement.totalAmount-statement.discountAmount}]]</label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">优惠价格：</label> <input class="col-sm-6" type="number" onchange="updateAmount()" name="discountAmount" th:field="${statement.discountAmount}"/> </div> </div> </div> </div> <div class="btn-group-sm" id="item-toolbar" role="group"> <a id="saveBtn" class="btn btn-success " onclick="saveFun()" shiro:hasPermission="business:statementItem:add"> <i class="fa fa-plus"></i> 保存 </a> <a id="payBtn" class="btn btn-info disabled" onclick="payFun()" shiro:hasPermission="business:statementItem:payStatement"> <i class="fa fa-cc-visa "></i> 确认支付 </a> </div> <div class="col-sm-12 select-table table-striped"> <table id="statementItemTable"></table> </div> </div> </div> </div> </div> <div class="ui-layout-east"> <div class="container-div"> <div class="row"> <div class="col-sm-12 search-collapse"> <form id="serviceItemFormId"> <div class="select-list"> <ul> <li> 服务项名称：<input type="text" name="name"/> </li> <li> 套餐否 <select name="carPackage" th:with="type=${@dict.getType('si_car_package')}"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.label}" th:value="${dict.value}"></option> </select> </li> <li> 服务分类 <select name="serviceCatalog" th:with="type=${@dict.getType('si_service_catalog')}"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.label}" th:value="${dict.value}"></option> </select> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a> </li> </ul> </div> </form> </div> <div class="col-sm-12 select-table table-striped"> <table id="serviceItemTable"></table> </div> </div> </div> </div> </body> <th:block th:include="common/include :: footer" /> <th:block th:include="common/include :: layout-latest" /> <script th:inline="javascript"> $('body').layout({ east__size: '30%', }); $(function() { var options = { id:"serviceItemTable", url: "/business/serviceItem/query?saleStatus="+1, uniqueId:"id", modalName: "服务项", columns: [ { field: 'id', title: '服务项id', visible: false }, { field: 'name', title: '服务项名称', sortable: true }, { field: 'originalPrice', title: '服务项原价', sortable: true }, { field: 'info', title: '备注信息', sortable: true, formatter: function(value, row, index) { return $.table.tooltip(value, 0, "open"); } }, { title: '操作', align: 'center', formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" ' + 'οnclick="addItems(\'' + row.id + '\')"><i class="fa fa-plus"></i></a> '); return actions.join(''); } }] }; $.table.init(options); }); var statementId = [[${statement.id}]]; $(function() { var options = { id:"statementItemTable", uniqueId:'itemId', toolbar:'item-toolbar', url: "/business/statementItem/query?statementId="+statementId, modalName: "结算单明细", columns: [ { field: 'id', title: '结算单id', visible: false }, { field: 'itemId', title: '服务项明细id', sortable: true }, { field: 'itemName', title: '服务项明细名称', sortable: true }, { field: 'itemPrice', title: '服务项价格', sortable: true }, { field: 'itemQuantity', title: '购买数量', sortable: true }, { title: '操作', align: 'center', formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" ' + 'οnclick="addSelf(\'' + row.itemId + '\')"><i class="fa fa-plus"></i></a> '); actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" ' + 'οnclick="deleteSelf(\'' + row.itemId + '\')"><i class="fa fa-minus"></i></a> '); return actions.join(''); } }] }; $.table.init(options); }); var $serviceItemRow = $('#serviceItemTable'); var $statementItemRow = $('#statementItemTable'); function addItems(id) { var data = $serviceItemRow.bootstrapTable('getRowByUniqueId', id); var statementData = $statementItemRow.bootstrapTable('getRowByUniqueId', id); var newData = {itemId: data.id, itemName: data.name, itemPrice: data.originalPrice, itemQuantity: 1}; if (statementData) { $statementItemRow.bootstrapTable('updateCellByUniqueId', { id: id, field: 'itemQuantity', value: statementData.itemQuantity + 1 }) } else { $statementItemRow.bootstrapTable('append', newData); } updateAmount(); $("#payBtn").addClass("disabled"); $("#saveBtn").removeClass("disabled"); } function addSelf(id) { var statementData = $statementItemRow.bootstrapTable('getRowByUniqueId', id); $statementItemRow.bootstrapTable('updateCellByUniqueId', { id: id, field: 'itemQuantity', value: statementData.itemQuantity + 1 }); $("#payBtn").addClass("disabled"); $("#saveBtn").removeClass("disabled"); updateAmount(); } function deleteSelf(id) { var statementData = $statementItemRow.bootstrapTable('getRowByUniqueId', id); if (statementData.itemQuantity > 1) { $statementItemRow.bootstrapTable('updateCellByUniqueId', { id: id, field: 'itemQuantity', value: statementData.itemQuantity - 1 }) } else { $statementItemRow.bootstrapTable('removeByUniqueId', id); } $("#payBtn").addClass("disabled"); $("#saveBtn").removeClass("disabled"); updateAmount(); } //true是单个页数 /*var discountAmount =0; function discountFun() { discountAmount=$("input[name='discountAmount']").val() updateAmount(); }*/ var $totalAmount = $("#totalAmount"); var $actuallyPaid = $("#actuallyPaid"); var $discountAmount =$("input[name='discountAmount']"); function updateAmount(){ var actuallyPaid=0; var totalAmount=0; var discountAmount; //获取整个表格的数据,false是所有页数 var data= $statementItemRow.bootstrapTable('getData',false); $.each(data,function (index,item) { if (item.itemId){ totalAmount += item.itemPrice*item.itemQuantity; } }); /*if (!data.length){ $totalAmount.html(0); $actuallyPaid.html(0); $discountAmount.val(0); return; }*/ discountAmount = $discountAmount.val(); if (!discountAmount) { $discountAmount.val(0); return; } if (discountAmount>totalAmount){ $discountAmount.val(0); $actuallyPaid.html(totalAmount); return; } if (discountAmount<0){ $discountAmount.val(0); return; } $totalAmount.html(totalAmount); $actuallyPaid.html(totalAmount-discountAmount); } /** * 需要将一个是statementId 和折扣价封装进去,由于需要传入折扣价格,方便在后端的代码中计算总金额 * 问题1:而statementItem对象中并没有优惠金额的字段所以是无法封装进去 * 解决方法,后端生成一个类,接收穿过的一个是装statementItem的集合对象和字段discountAmount * 还有一种就是将discountAmount封装到一个statementItem对像中,形成一个list集合一起传过去 * */ function saveFun() { $.modal.confirm("确定要保存",function () { var discountAmount = $discountAmount.val(); var statementId = [[${statement.id}]]; var data= $statementItemRow.bootstrapTable('getData',false); data.push({"itemPrice":discountAmount,"statementId":statementId}) config={ url:"/business/statementItem/saveItems", type:'post', dataType:'json', contentType:"application/json", data:JSON.stringify(data), beforeSend:function () { $.modal.loading("正在处理...."); }, success:function (result) { $.operate.ajaxSuccess(result); } }; $.ajax(config); $("#saveBtn").addClass("disabled"); $("#payBtn").removeClass("disabled"); $.table.refresh("#statementItemTable"); }); } function translation(id) { window.location.href="/business/statementItem/editOrDetail?statementId="+id; $.table.refresh("bootstrap-table"); } function payFun(){ $.modal.confirm("确定要支付么",function () { var statementId = [[${statement.id}]]; config={ url:"/business/statementItem/pay?statementId="+statementId, type:'post', dataType:'json', contentType:"application/json", beforeSend:function () { $.modal.loading("正在处理...."); }, success:function (result) { $.operate.ajaxSuccess(result); translation(statementId); } }; $.ajax(config); }); } </script> </html>detail.html,结算后的账单
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <meta charset="UTF-8"> <th:block th:include="common/include :: header('结算单支付详情')" /> </head> <body> <div class="ui-layout-center"> <div class="container-div"> <div class="row"> <div class="col-sm-12 search-collapse"> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">客户姓名：</label> <label class="col-sm-6 control-label">[[${statement.customerName}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">联系方式：</label> <label class="col-sm-6 control-label">[[${statement.customerPhone}]]</label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">车牌号码：</label> <label class="col-sm-6 control-label">[[${statement.licensePlate}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">汽车类型：</label> <label class="col-sm-6 control-label">[[${statement.carSeries}]]</label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">服务类型：</label> <label class="col-sm-6 control-label">[[${@dict.getLabel('si_service_catalog',statement.serviceType)}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">到店时间：</label> <label class="col-sm-6 control-label" th:text="${#dates.format(statement.actualArrivalTime, 'yyyy-MM-dd HH:mm:ss')}"></label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">总消费金额：</label> <label class="col-sm-6 control-label" onchange="updateAmount()" id="totalAmount">[[${statement.totalAmount}]]</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">实付价格：</label> <label class="col-sm-6 control-label" id="actuallyPaid">[[${statement.totalAmount-statement.discountAmount}]]</label> </div> </div> </div> <div class="col-sm-12" > <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-6 control-label">优惠价格：</label> <label class="col-sm-6 control-label" id="discountAmount">[[${statement.discountAmount}]]</label> </div> </div> </div> </div> <div class="btn-group-sm" id="item-toolbar" role="group"> <a id="saveBtn" class="btn btn-success " onclick="saveFun()" shiro:hasPermission="business:statementItem:add"> <i class="fa fa-plus"></i> 打印 </a> <a id="payBtn" class="btn btn-info" onclick="exportStatement()" shiro:hasPermission="business:statementItem:payStatement"> <i class="fa fa-cc-visa"></i> 导出 </a> </div> <div class="col-sm-12 select-table table-striped"> <table id="statementItemTable"></table> </div> </div> </div> </div> </body> <th:block th:include="common/include :: footer" /> <th:block th:include="common/include :: layout-latest" /> <script> var statementId = [[${statement.id}]]; function exportStatement(){ window.location.href="/business/statementItem/exportStatement?statementId="+statementId } $(function() { var options = { id:"statementItemTable", toolbar:'item-toolbar', url: "/business/statementItem/query?statementId="+statementId, modalName: "结算单明细", columns: [ { field: 'itemName', title: '服务项明细名称', sortable: true }, { field: 'itemPrice', title: '服务项价格', sortable: true }, { field: 'itemQuantity', title: '购买数量', sortable: true }, ] }; $.table.init(options); }); </script> </html>
-
结算单(预约表)
需求:
- 点击预约表中的结算单时产生两种情况
- 已支付:直接跳转到明细账单,可以直接打印或者导出
- 未支付:账单需要生成,添加需要服务项,保存后支付,下次点击时直接跳转到明细单重
- 预约表中状态由已到店改为结算单生成
前端:
-
在用户预约界面点击结算单,传给后端一个appointmentId
-
根据这个appointmentId,后端去数据库中statement表中查询是否已生成账单
-
没生成生成,生成了直接返回statementId->data
-
得到了statementId就能跳转到statementItem账单明细的结算界面
-
细节:回调函数中的data其实是个对象,data.data就是调用存在data’中的statementId数据
-
具体实现
function generateStatement(id){ $.modal.confirm("您要查看结算单么",function () { $.get("/business/appointment/generateStatement?id="+id,function (data) { //接收后端传送回来的statementId,下次访问时 $.modal.openTab( "结算单明细","business/statementItem/editOrDetail?statementId="+data.data) }) }) }
后端:
-
根据这个appointmentId,后端去数据库中statement表中查询是否已生成账单
-
没生成生成statement对象,生成了直接返回statementId
-
再次拿着statementId访问时则跳转到账单明细的结算界面
-
具体实现
//结算单 @RequiresPermissions("business:appointment:generateStatement") @RequestMapping("/generateStatement") @ResponseBody public AjaxResult generateStatement( Long id){ Long statementId= appointmentService.generateStatement(id); return AjaxResult.success(statementId); } ------------------------------------------- //列表 @RequiresPermissions("business:statementItem:view") @RequestMapping("/editOrDetail") public String editOrDetail(Model model ,Long statementId ){ Statement statement = statementService.get(statementId); ///所以结算页面中一直存在着一个结算单信息,方便其id的随时跳转调用 model.addAttribute("statement",statement); if (Statement.STATUS_CONSUME.equals(statement.getStatus())) { return prefix + "edit"; } else { return prefix + "detail"; } }
- 点击预约表中的结算单时产生两种情况
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
