<!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>