html页面
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="../../../build/css/base.css" media="all">
</head>
<body>
<div class="layui-tab layui-tab-card" lay-filter="rebateList"><ul class="layui-tab-title"><li class="layui-this" lay-id="1">已结算</li><li lay-id="2">待结算</li></ul><!--已结算--><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="layui-form layui-form-pane search-form"><div class="layui-form-item layui-row form-two-item" > <div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >用户名</label><div class="layui-input-block"><input type="text" name="search[userName]" id="userName" autocomplete="off" placeholder="输入用户名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >姓名</label><div class="layui-input-block"><input type="text" name="search[customerName]" id="customerName" autocomplete="off" placeholder="输入姓名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >手机</label><div class="layui-input-block"><input type="text" name="search[telephone]" id="telephone" autocomplete="off" placeholder="输入手机号" class="layui-input" ></div></div><div class="layui-col-xs12 layui-col-sm12 layui-col-md12"><div style = "text-align:center;" id="search"><button class="layui-btn" data-type="reload">搜索</button><button class="layui-btn" onclick="javascript:location.replace(location.href);">重置</button></div></div></div></div><div style="margin:0;padding:0; width:auto;height:1px;background-color:#EAEAEA;overflow:hidden;"></div><div style = "text-align:left;margin-top: 10px;margin-left: 15px;"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary" id="dispose" data-kercode="190304" style="display: none"><i class="layui-icon"></i>结算</button><button class="layui-btn layui-btn-primary" id="export" data-kercode="19030104" style="display: none"><i class="layui-icon"></i>导出</button></div></div><table id="distributorRebateTable" lay-filter="distributorRebateTable"></table></div><!--未结算--><div class="layui-tab-item"><div class="layui-form layui-form-pane search-form"><div class="layui-form-item layui-row form-two-item" ><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >用户名</label><div class="layui-input-block"><input type="text" name="search[userName]" id="_userName" autocomplete="off" placeholder="输入用户名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >姓名</label><div class="layui-input-block"><input type="text" name="search[customerName]" id="_customerName" autocomplete="off" placeholder="输入姓名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >手机</label><div class="layui-input-block"><input type="text" name="search[telephone]" id="_telephone" autocomplete="off" placeholder="输入手机号" class="layui-input" ></div></div><div class="layui-col-xs12 layui-col-sm12 layui-col-md12"><div style = "text-align:center;" id="searchNo"><button class="layui-btn" data-type="reload">搜索</button><button class="layui-btn" onclick="javascript:location.replace(location.href);">重置</button></div></div></div></div><div style="margin:0;padding:0; width:auto;height:1px;background-color:#EAEAEA;overflow:hidden;"></div><div style = "text-align:left;margin-top: 10px;margin-left: 15px;"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary" id="disposeNo" lay-event="disposeNo" data-kercode="190304" style="display: none"><i class="layui-icon"></i>结算</button><button class="layui-btn layui-btn-primary" id="exportNo" lay-event="exportNo" data-kercode="19030104" style="display: none"><i class="layui-icon"></i>导出</button></div></div><table id="distributorRebateNoTable" lay-filter="distributorRebateNoTable"></table></div></div>
</div>
<script type="text/html" id="distributorToolNo"><a class="info" data-kercode="19030103" lay-event="info" style="display: none"><i class="layui-icon icon-btn" title="详情"></i></a>
</script>
<script type="text/html" id="distributorTool"><a class="info" data-kercode="19030103" lay-event="info" style="display: none"><i class="layui-icon icon-btn" title="详情"></i></a>
</script>
<script type="text/html" id="distributorUserName"><a class="layui-table-link orderNumber" lay-event="distributorInfo" title="点击查看分销员基本信息">{{ d.userName }}</a>
</script>
<script src="../../../plugins/layui/layui.js"></script>
<script src="../../base.js"></script>
<script src="js/distributorRebateList.js"></script>
</body>
</html>
页签体现在该处
js代码
var valueTableActive;
layui.use(['table', 'laydate', 'layer', 'laytpl', 'common', 'element'], function () {var $ = layui.$;var table = layui.table;var laydate = layui.laydate;var laytpl = layui.laytpl;var form = layui.form;var common = layui.common;var element = layui.element;//初始化已结算的distributorRebateTables();var active = {reload: function () {var customerName = $('#customerName');//var customerCode = $('#customerCode');var telephone = $('#telephone');var userName = $('#userName');table.reload('searchReload', {where: {customerName: customerName.val(),//customerCode: customerCode.val(),userName: userName.val(),telephone: telephone.val(),}});}};$('#search .layui-btn').on('click', function () {var type = $(this).data('type');active[type] ? active[type].call(this) : '';});// 已结算function distributorRebateTables(){table.render({elem: '#distributorRebateTable',skin: 'row', // 行边框风格even: true, // 开启隔行背景cellMinWidth: 80,size: 'lg', // 小尺寸的表格url: url_order + 'api/distributorRebate/queryDistributorList?rebateStatus=Y',// 数据接口limit: 10,limits: [10, 20, 30, 50, 100, 200, 300, 500, 1000],//分页数据page: true, // 开启分页cols: [[ // 表头{type: 'checkbox',fixed: 'left', width:50},{type:'numbers' , title: '序号'},{field: 'supplierName', title: '发货经销商名称', width:200}// ,{field: 'distributorId', title: '分销员ID', width:300},{field: 'userName', title: '分销员用户名', width:150,toolbar: '#distributorUserName'},{field: 'customerName', title: '姓名', width:100}// ,{field: 'wechatAccount', title: '微信号', width:100},{field: 'telephone', title: '手机号', width:150},{field: 'disposedRebateTotal', title: '已结算总额', width:100}//,{field: 'noDisposedRebateTotal', title: '未结算总额', width:100},{field: 'bankAccount', title: '银行账号', width:100},{fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#distributorTool'}]],id: 'searchReload',done: function (res, curr, count) {powerButton('export', 'info');valueTableActive = {reload: function () {table.reload('searchReload');}};}});}// 未结算function distributorRebateNoTables(){table.render({elem: '#distributorRebateNoTable',skin: 'row', // 行边框风格even: true, // 开启隔行背景cellMinWidth: 80,size: 'lg', // 小尺寸的表格url: url_order + 'api/distributorRebate/queryDistributorList?rebateStatus=N',// 数据接口limit: 10,limits: [10, 20, 30, 50, 100, 200, 300, 500, 1000],//分页数据page: true, // 开启分页cols: [[ // 表头{type: 'checkbox',fixed: 'left', width:50},{type:'numbers' , title: '序号'},{field: 'supplierName', title: '发货经销商名称', width:200}// ,{field: 'distributorId', title: '分销员ID', width:300},{field: 'userName', title: '分销员用户名', width:150,toolbar: '#distributorUserName'},{field: 'customerName', title: '姓名', width:100}// ,{field: 'wechatAccount', title: '微信号', width:100},{field: 'telephone', title: '手机号', width:150},{field: 'noDisposedRebateTotal', title: '待结算总额', width:100},{field: 'bankAccount', title: '银行账号', width:100},{fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#distributorToolNo'}]],id: 'searchReloadNo',done: function (res, curr, count) {powerButton('disposeNo,exportNo', 'info');valueTableActive = {reload: function () {table.reload('searchReloadNo');}};}});}//初始页面定位到第一个页签element.tabChange('rebateList', '1');//监听Tab切换，以改变地址hash值element.on('tab(rebateList)', function(data){//console.log(data.index);if(data.index=="0"){//已结算返利distributorRebateTables();var $ = layui.$,active = {reload: function () {var customerName = $('#customerName');//var customerCode = $('#customerCode');var telephone = $('#telephone');var userName = $('#userName');table.reload('searchReload', {where: {customerName: customerName.val(),//customerCode: customerCode.val(),userName: userName.val(),telephone: telephone.val(),}});}};$('#search .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});}else if(data.index=="1"){//未结算返利distributorRebateNoTables();var $ = layui.$,active = {reload: function () {var customerName = $('#_customerName');//var customerCode = $('#customerCode');var telephone = $('#_telephone');var userName = $('#_userName');table.reload('searchReloadNo', {where: {customerName: customerName.val(),//customerCode: customerCode.val(),userName: userName.val(),telephone: telephone.val(),}});}};$('#searchNo .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});}});valueTableActive = {reload: function(){table.reload(distributorRebateTables());table.reload(distributorRebateNoTables());}};// 监听工具条——未结算table.on('tool(distributorRebateNoTable)', function (obj) {var data = obj.data;if (obj.event === 'info') {var index = layer.open({type: 2,title: ['<strong>待结算返利记录</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content: '../rebate/orderRebateNo.html?id=' + data.distributorId,end: function () {}});// 放大弹出层layer.full(index);}else if (obj.event === 'distributorInfo') {var index = layer.open({type: 2,title: ['<strong>分销员基本详情</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content:'../distributor/distributorInfo.html?id=' + data.id,end: function () {}});// 放大弹出层layer.full(index);}});// 监听工具条——已结算table.on('tool(distributorRebateTable)', function (obj) {var data = obj.data;if (obj.event === 'info') {var index = layer.open({type: 2,title: ['<strong>已结算返利记录</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content: '../rebate/orderRebate.html?id=' + data.distributorId,end: function () {}});// 放大弹出层layer.full(index);}else if (obj.event === 'distributorInfo') {var index = layer.open({type: 2,title: ['<strong>分销员基本详情</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content:'../distributor/distributorInfo.html?id=' + data.id,end: function () {}});// 放大弹出层layer.full(index);}});$('#export').on('click', function () {var checkStatus = table.checkStatus('searchReload');if (checkStatus.data.length === 0) {layer.msg('请最少选择一条数据');return;}var ids = [];for (var i = 0; i < checkStatus.data.length; i++) {ids.push(checkStatus.data[i].id);}common.ajaxDownloader({url: url_order + "api/distributorRebate/exportRebateInf?token=" + getToken()+"&rebateStatus=Y",data: {ids: ids.join(",")}});});$('#exportNo').on('click', function () {var checkStatus = table.checkStatus('searchReloadNo');if (checkStatus.data.length === 0) {layer.msg('请最少选择一条数据');return;}var ids = [];for (var i = 0; i < checkStatus.data.length; i++) {ids.push(checkStatus.data[i].id);}common.ajaxDownloader({url: url_order + "api/distributorRebate/exportRebateNoInf?token=" + getToken()+"&rebateStatus=N",data: {ids: ids.join(",")}});});$('#disposeNo').on('click', function () {var checkStatus = table.checkStatus('searchReloadNo');if (checkStatus.data.length === 0) {layer.msg("请至少选择一条数据", {icon: 5});return;}var ids = [];var changeTotals = [];var distributorIds = [];var rebateStatus = 'Y';//结算状态for (var i = 0; i < checkStatus.data.length; i++) {ids.push(checkStatus.data[i].id);changeTotals.push(checkStatus.data[i].noDisposedRebateTotal);distributorIds.push(checkStatus.data[i].distributorId);}var index = layer.confirm('确定要对此返利记录进行结算吗？', {btn: ['确定', '取消'],yes: function(index, layero){postDataByServiceURL(url_order, 'api/distributorRebate/editDistributorRebate', {ids: ids,rebateStatus:rebateStatus,changeTotals:changeTotals,distributorIds:distributorIds}, function (ads) {if(ads.code === 0){//刷新待结算页面element.tabChange('rebateList', '2');//active['reload'].call(this);layer.close(index);} else {layer.msg(ads.msg, {icon: 5});}});}});});
})
