22
11月
2021
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会员列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/statics/layuiAdmin/layui/css/layui.css" rel="stylesheet">
<link href="/statics/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
<link href="/statics/layuiAdmin/style/style.css" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body">
<div style="padding-bottom: 10px;">
<button class="layui-btn layui-btn-normal btn-top" data-type="add">添加会员</button>
<button class="layui-btn layui-btn-info btn-top" data-type="batchDel">批量删除</button>
<button class="layui-btn layui-btn-info btn-top" data-type="export">导出会员</button>
<div class="layui-form search_ctr">
<div class="layui-form-item">
<div class="layui-input-inline w150">
<select name="k2">
<option value="">会员标签</option>
</select>
</div>
<div class="layui-input-inline w150">
<select name="k3">
<option value="">会员等级</option>
<option value="1">钻石会员</option>
<option value="2">黄金会员</option>
<option value="3">白银会员</option>
</select>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="keys" placeholder="输入用户名/手机/昵称查询" class="layui-input">
</div>
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-search">查询</button>
</div>
</div>
</div>
</div>
<table id="LAY-table" lay-filter="LAY-table"></table>
<script type="text/html" id="work">
{{# if(d.is_work == 1){ }}
<span class="layui-badge-dot layui-bg-blue"></span>正常
{{# } else { }}
<span class="layui-badge-dot layui-bg-gray"></span>锁定
{{# } }}
</script>
<script type="text/html" id="fenxiao">
{{# if(d.is_fx == 1){ }}
是
{{# } else { }}
否
{{# } }}
</script>
<script type="text/html" id="tableBar">
<a class="link-text" lay-event="edit">编辑</a>
<div class="link-line"></div>
<a class="link-text" lay-event="del">删除</a>
</script>
</div>
</div>
</div>
</body>
</html>
<script src="/statics/sheetjs/xlsx.core.min.js"></script>
<script src="/statics/layuiAdmin/layui/layui.js"></script>
<script>
layui.config({
base: '/statics/layuiAdmin/' // 静态资源所在路径
}).use(['index', 'layer', 'table', 'form'], function(){
let $ = layui.$;
let layer = layui.layer;
let table = layui.table;
let form = layui.form;
//初始化列表
table.render({
elem: '#LAY-table'
,url: "/admin/User/getList.html"
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field: 'id', width: 80, title: 'ID', sort: true}
,{field: 'uid', width: 150, title: '用户名'}
,{field: 'nickname', minWidth:120, title: '昵称'}
,{field: 'balance', width: 110, title: '余额'}
,{field: 'commission', width: 110, title: '佣金'}
,{field: 'integral', width: 110, title: '积分'}
,{field: 'growth', width: 110, title: '成长值'}
,{field: 'level_id', width: 110, title: '等级'}
,{field: 'is_fx', width: 90, title: '分销商', templet: '#fenxiao', align:'center'}
,{field: 'is_work', width: 90, title: '状态', templet: '#work', align:'center', sort: true}
,{field: 'add_date', width: 180, title: '时间'}
,{title: '操作', width: 106, align:'center', fixed: 'right', toolbar: '#tableBar'}
]]
,page: true
,limit: 20
,height: 'full-100'
,text: {none: '暂无相关数据'}
});
//监听搜索
form.on('submit(LAY-search)', function(data){
let field = data.field;
//执行重载
table.reload('LAY-table', {
url: "/admin/User/getList.html"
,where: field
,page: {
curr: 1 //重新从第 1 页开始
}
});
});
//表格内操作按钮
table.on('tool(LAY-table)', function(obj){
let data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
$.ajax({
type:"post",
url:"/admin/User/delete.html",
data: {
m_id:data.id
},
dataType:"json",
beforeSend: function () {
layer.load(1);
},
success:function(res){
layer.closeAll();
if(res.code == 0){
if(res.msg == 'success') {
obj.del();
layer.msg('删除成功');
} else {
layer.msg(res.msg);
}
}
else {
layer.msg(res.msg);
}
}
});
});
} else if(obj.event === 'edit'){
layer.open({
type: 2
,title: '编辑会员'
,content: "/admin/User/edit.html?id=" + data.id
,maxmin: true
,area: ['750px', '90%']
,btn: ['确定', '取消']
,yes: function(index, layero){
let iframeWindow = window['layui-layer-iframe'+ index];
let submitID = 'LAY-submit';
let submit = layero.find('iframe').contents().find('#'+ submitID);
//监听提交
iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
let field = data.field; //获取提交的字段
let m_work = field.hasOwnProperty('m_work') ? field.m_work : 0;
let m_fx = field.hasOwnProperty('m_fx') ? field.m_fx : 0;
//标签
let m_label = [];
$.each(field, function(key, val) {
if(key.indexOf("label") != -1){
m_label.push(val);
}
});
m_label = m_label.toString();
//提交 Ajax 成功后，静态更新表格中的数据
$.ajax({
type:"post",
url:"/admin/User/save.html",
data: {
m_level: field.m_level,
m_label: m_label,
m_nickname: field.m_nickname,
m_tel: field.m_tel,
m_email: field.m_email,
m_work: m_work,
m_fx: m_fx,
m_uid: field.m_uid,
m_pwd: field.m_pwd,
m_id:field.m_id
},
dataType:"json",
beforeSend: function () {
layer.load(1);
},
success:function(res){
layer.close(layer.index);
if(res.code == 0){
layer.closeAll();
table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
}
else {
layer.msg(res.msg);
}
}
});
});
submit.trigger('click');
}
});
}
});
//头部操作按钮
$('.btn-top').on('click', function(){
let type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
let active = {
batchDel: function(){
let checkStatus = table.checkStatus('LAY-table');
let checkData = checkStatus.data //得到选中的数据
let ids = "0";
if(checkData.length === 0){
return layer.msg('请选择数据');
}
$.each(checkData,function(key,value){
ids = ids + "," + checkData[key]['id'];
});
layer.confirm('确定删除吗？', function(index) {
$.ajax({
type:"post",
url:"/admin/User/delete.html",
data: {
m_id:ids
},
dataType:"json",
beforeSend: function () {
layer.load(1);
},
success:function(res){
layer.closeAll();
if(res.code == 0){
let msg = res.msg == 'success' ? '删除成功' : res.msg;
layer.msg(msg, {
time: 2000
}, function(){
table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
});
}
else {
layer.msg(res.msg);
}
}
});
});
}
,add: function(){
layer.open({
type: 2
,title: '添加会员'
,content: "/admin/User/create.html"
,maxmin: true
,area: ['500px', '350px']
,btn: ['确定', '取消']
,yes: function(index, layero){
let iframeWindow = window['layui-layer-iframe'+ index];
let submitID = 'LAY-submit';
let submit = layero.find('iframe').contents().find('#'+ submitID);
//监听提交
iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
let field = data.field; //获取提交的字段
//提交 Ajax 成功后，静态更新表格中的数据
$.ajax({
type:"post",
url:"/admin/User/save.html",
data: {
m_uid:field.m_uid,
m_pwd:field.m_pwd,
m_level:field.m_level
},
dataType:"json",
beforeSend: function () {
layer.load(1);
},
success:function(res){
layer.close(layer.index);
if(res.code == 0){
layer.closeAll();
table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
}
else {
layer.msg(res.msg);
}
}
});
});
submit.trigger('click');
}
});
}
,export: function(){
let checkStatus = table.checkStatus('LAY-table')
let checkData = checkStatus.data //得到选中的数据
let str = "确定导出选中数据吗？";
let ids = "0";
$.each(checkData,function(key,value){
ids = ids + "," + checkData[key]['id'];
});
if(checkData.length === 0){
str = "未选择数据将导出当前所有，确定导出吗？";
}
layer.confirm(str, function(index) {
layer.closeAll();
// 要打印的数据格式 对象中的key将会作为表头渲染
let count = 0; //数据总数
let limit = 3000; //每次请求数量
//获取总数
$.ajax({
type:"post",
url:"/admin/User/exportData.html",
data: {
m_id:ids
},
dataType:"json",
beforeSend: function () {
layer.load(1);
},
success:function(res){
layer.closeAll();
if(res.code == 0) {
count = res.count;
if(count == 0) {
layer.msg('暂无数据可导出');
return;
}
let request_times = Math.ceil(count/limit); //计算分几次请求
let funcs = []; //Promise.all要用到的参数, 存放每次请求的Promise对象
let complete_count = 0; //成功请求次数
let export_percentage = 0; //设置当前进度百分比为0
for (let i = 1; i <= request_times; i++) {
// 循环请求次数，构造请求的Promise对象并插入funcs数组
let func = new Promise(function(resolve, reject){
//定义Promise并处理请求逻辑
let data = [];
$.ajax({
type:"post",
url:"/admin/User/exportData.html?page=" + i,
data: {
m_id:ids,
limit:limit
},
dataType:"json",
success:function(res){
layer.closeAll();
if(res.code == 0) {
data = res.data;
complete_count++; //成功请求次数+1
export_percentage = 100*complete_count/request_times; //设置当前进度百分比
layer.msg('导出中，已完成' + Math.ceil(export_percentage) + '%');
resolve(data);
} else {
layer.msg(res.msg);
reject();
}
}
});
});
funcs.push(func);
}
Promise.all(funcs).then(function(values) {
//使用Promise.all调用funcs里面的函数，并合并数据，最后给js-xlsx生成Excel
let print_data = [];
//将数据合并
for (let i = 0; i < values.length; i++) {
for (let j = 0; j < values[i].length; j++) {
print_data.push(values[i][j]);
}
}
// 创建一个新sheet
const new_sheet = XLSX.utils.json_to_sheet(print_data)
// 新建book
const new_book = XLSX.utils.book_new()
// 将 sheet 添加到 book 中
XLSX.utils.book_append_sheet(new_book, new_sheet, 'Sheet1')
// 导出excel文件
let time = new Date();
let month = time.getMonth()+1;
let timeStr = time.getFullYear() + '-' + month + '-'+time.getDate();
XLSX.writeFile(new_book, '会员列表('+timeStr+').xlsx')
});
} else {
layer.msg(res.msg);
}
}
});
});
}
};
});
</script>