149 lines
4.8 KiB
JavaScript
149 lines
4.8 KiB
JavaScript
layui.use(['table', 'form', 'layer'], function(){
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
|
|
// 初始化表格
|
|
table.render({
|
|
elem: '#user-table',
|
|
url: '/api/users',
|
|
headers: {
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
|
},
|
|
toolbar: '#tableToolbar',
|
|
defaultToolbar: ['filter', 'exports', 'print'],
|
|
cols: [[
|
|
{type: 'checkbox'},
|
|
{field: 'username', title: '用户名', width: 150},
|
|
{field: 'email', title: '邮箱', width: 200},
|
|
{field: 'role', title: '角色', width: 100, templet: '#roleTpl'},
|
|
{field: 'lastLogin', title: '最后登录', width: 160},
|
|
{field: 'createdAt', title: '创建时间', width: 160},
|
|
{fixed: 'right', title: '操作', toolbar: '#tableRowBar', width: 150}
|
|
]],
|
|
page: true,
|
|
parseData: function(res) {
|
|
if (res.code === 401) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
return res;
|
|
}
|
|
});
|
|
|
|
// 表格工具栏事件
|
|
table.on('toolbar(user-table)', function(obj){
|
|
switch(obj.event){
|
|
case 'refresh':
|
|
table.reload('user-table');
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 行工具栏事件
|
|
table.on('tool(user-table)', function(obj){
|
|
var data = obj.data;
|
|
|
|
switch(obj.event){
|
|
case 'edit':
|
|
layer.open({
|
|
type: 1,
|
|
title: '编辑用户',
|
|
area: ['500px', '400px'],
|
|
content: $('#userFormTpl').html(),
|
|
success: function(){
|
|
// 填充表单数据
|
|
form.val('userForm', {
|
|
'id': data.id,
|
|
'username': data.username,
|
|
'email': data.email,
|
|
'role': data.role
|
|
});
|
|
// 编辑时密码可选
|
|
$('input[name=password]').removeAttr('required').removeAttr('lay-verify');
|
|
form.render();
|
|
}
|
|
});
|
|
break;
|
|
case 'del':
|
|
layer.confirm('确定删除该用户吗？', function(index){
|
|
fetch('/api/users/' + data.id, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.error) {
|
|
layer.msg(result.error);
|
|
return;
|
|
}
|
|
layer.msg('删除成功');
|
|
obj.del();
|
|
})
|
|
.catch(error => {
|
|
layer.msg('删除失败：' + error.message);
|
|
});
|
|
layer.close(index);
|
|
});
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 搜索表单提交
|
|
form.on('submit(search)', function(data){
|
|
table.reload('user-table', {
|
|
where: data.field
|
|
});
|
|
return false;
|
|
});
|
|
|
|
// 添加用户按钮点击事件
|
|
$('#add-user').on('click', function(){
|
|
layer.open({
|
|
type: 1,
|
|
title: '添加用户',
|
|
area: ['500px', '400px'],
|
|
content: $('#userFormTpl').html(),
|
|
success: function(){
|
|
form.render();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 用户表单提交
|
|
form.on('submit(userSubmit)', function(data){
|
|
var url = data.field.id ? '/api/users/' + data.field.id : '/api/users';
|
|
var method = data.field.id ? 'PUT' : 'POST';
|
|
|
|
// 如果是编辑且没有输入密码，则删除密码字段
|
|
if (data.field.id && !data.field.password) {
|
|
delete data.field.password;
|
|
}
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
credentials: 'include',
|
|
body: JSON.stringify(data.field)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.error) {
|
|
layer.msg(result.error);
|
|
return;
|
|
}
|
|
layer.closeAll('page');
|
|
layer.msg(data.field.id ? '更新成功' : '添加成功');
|
|
table.reload('user-table');
|
|
})
|
|
.catch(error => {
|
|
layer.msg((data.field.id ? '更新' : '添加') + '失败：' + error.message);
|
|
});
|
|
|
|
return false;
|
|
});
|
|
});
|