126 lines
4.7 KiB
HTML
126 lines
4.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>编辑用户</title>
|
||
|
|
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="layui-fluid">
|
||
|
|
<div class="layui-card">
|
||
|
|
<div class="layui-card-body">
|
||
|
|
<form class="layui-form" lay-filter="userForm">
|
||
|
|
<input type="hidden" name="id">
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">用户名</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="username" required lay-verify="required"
|
||
|
|
placeholder="请输入用户名" autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">邮箱</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="email" required lay-verify="required|email"
|
||
|
|
placeholder="请输入邮箱" autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">角色</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<select name="role" required lay-verify="required">
|
||
|
|
<option value="user">普通用户</option>
|
||
|
|
<option value="admin">管理员</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<button class="layui-btn" lay-submit lay-filter="userSubmit">保存</button>
|
||
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/static/layui/layui.js"></script>
|
||
|
|
<script>
|
||
|
|
layui.use(['form', 'layer'], function(){
|
||
|
|
var form = layui.form;
|
||
|
|
var layer = layui.layer;
|
||
|
|
var $ = layui.$;
|
||
|
|
|
||
|
|
// 获取用户ID
|
||
|
|
var userId = location.search.match(/id=(\d+)/);
|
||
|
|
if (userId) {
|
||
|
|
userId = userId[1];
|
||
|
|
// 加载用户数据
|
||
|
|
fetch('/api/users/' + userId, {
|
||
|
|
headers: {
|
||
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.error) {
|
||
|
|
layer.msg(data.error);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// 填充表单
|
||
|
|
form.val('userForm', {
|
||
|
|
'id': data.id,
|
||
|
|
'username': data.username,
|
||
|
|
'email': data.email,
|
||
|
|
'role': data.role
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
layer.msg('加载用户数据失败：' + error.message);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 表单提交
|
||
|
|
form.on('submit(userSubmit)', function(data){
|
||
|
|
var field = data.field;
|
||
|
|
var url = userId ? '/api/users/' + userId : '/api/users';
|
||
|
|
var method = userId ? 'PUT' : 'POST';
|
||
|
|
|
||
|
|
fetch(url, {
|
||
|
|
method: method,
|
||
|
|
headers: {
|
||
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify(field)
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(result => {
|
||
|
|
if (result.error) {
|
||
|
|
layer.msg(result.error);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
layer.msg('保存成功');
|
||
|
|
// 如果是在弹窗中，则关闭弹窗并刷新父页面的表格
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
if (index) {
|
||
|
|
parent.layui.table.reload('user-table');
|
||
|
|
parent.layer.close(index);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
layer.msg('保存失败：' + error.message);
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|