修改用户角色，添加管理员相关逻辑
Some checks failed
构建并部署 Spring Boot 应用 / build-and-deploy (push) Failing after 9m4s
Some checks failed
构建并部署 Spring Boot 应用 / build-and-deploy (push) Failing after 9m4s
This commit is contained in:
@@ -1,293 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>员工管理</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
|
||||
<style>
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.modal-form .form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2>员工管理</h2>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEmployeeModal">
|
||||
添加员工
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 员工列表表格 -->
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>姓名</th>
|
||||
<th>电话</th>
|
||||
<th>角色</th>
|
||||
<th>OpenID</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="employeeTableBody">
|
||||
<!-- 员工数据将通过JavaScript动态加载 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 添加员工模态框 -->
|
||||
<div class="modal fade" id="addEmployeeModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">添加员工</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addEmployeeForm" class="modal-form">
|
||||
<div class="form-group">
|
||||
<label for="addName" class="form-label">姓名</label>
|
||||
<input type="text" class="form-control" id="addName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addPhone" class="form-label">电话</label>
|
||||
<input type="text" class="form-control" id="addPhone" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addRole" class="form-label">角色</label>
|
||||
<select class="form-control" id="addRole" required>
|
||||
<option value="DELIVERY_PERSON">配送员</option>
|
||||
<option value="ADMIN">管理员</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" id="saveEmployeeBtn">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑员工模态框 -->
|
||||
<div class="modal fade" id="editEmployeeModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">编辑员工</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editEmployeeForm" class="modal-form">
|
||||
<input type="hidden" id="editId">
|
||||
<div class="form-group">
|
||||
<label for="editName" class="form-label">姓名</label>
|
||||
<input type="text" class="form-control" id="editName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editPhone" class="form-label">电话</label>
|
||||
<input type="text" class="form-control" id="editPhone" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editRole" class="form-label">角色</label>
|
||||
<select class="form-control" id="editRole" required>
|
||||
<option value="DELIVERY_PERSON">配送员</option>
|
||||
<option value="ADMIN">管理员</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" id="updateEmployeeBtn">更新</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// API基础URL
|
||||
const API_BASE_URL = '/api';
|
||||
|
||||
// 页面加载时获取员工列表
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadEmployees();
|
||||
});
|
||||
|
||||
// 获取所有员工
|
||||
function loadEmployees() {
|
||||
fetch(`${API_BASE_URL}/employees`)
|
||||
.then(response => response.json())
|
||||
.then(employees => {
|
||||
const tableBody = document.getElementById('employeeTableBody');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
employees.forEach(employee => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${employee.id || ''}</td>
|
||||
<td>${employee.name || ''}</td>
|
||||
<td>${employee.phone || ''}</td>
|
||||
<td>${getRoleDisplayName(employee.role) || ''}</td>
|
||||
<td>${employee.openid || ''}</td>
|
||||
<td class="action-buttons">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="editEmployee(${employee.id})">编辑</button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteEmployee(${employee.id})">删除</button>
|
||||
</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取员工列表失败:', error);
|
||||
alert('获取员工列表失败');
|
||||
});
|
||||
}
|
||||
|
||||
// 角色显示名称转换
|
||||
function getRoleDisplayName(role) {
|
||||
switch (role) {
|
||||
case 'DELIVERY_PERSON':
|
||||
return '配送员';
|
||||
case 'ADMIN':
|
||||
return '管理员';
|
||||
default:
|
||||
return role;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存新员工
|
||||
document.getElementById('saveEmployeeBtn').addEventListener('click', function() {
|
||||
const name = document.getElementById('addName').value;
|
||||
const phone = document.getElementById('addPhone').value;
|
||||
const role = document.getElementById('addRole').value;
|
||||
|
||||
if (!name || !phone || !role) {
|
||||
alert('请填写所有必填字段');
|
||||
return;
|
||||
}
|
||||
|
||||
const employee = {
|
||||
name: name,
|
||||
phone: phone,
|
||||
role: role
|
||||
};
|
||||
|
||||
fetch(`${API_BASE_URL}/employees`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(employee)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
alert('员工添加成功');
|
||||
// 关闭模态框
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('addEmployeeModal'));
|
||||
modal.hide();
|
||||
// 重置表单
|
||||
document.getElementById('addEmployeeForm').reset();
|
||||
// 重新加载员工列表
|
||||
loadEmployees();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加员工失败:', error);
|
||||
alert('添加员工失败');
|
||||
});
|
||||
});
|
||||
|
||||
// 编辑员工
|
||||
function editEmployee(id) {
|
||||
fetch(`${API_BASE_URL}/employees`)
|
||||
.then(response => response.json())
|
||||
.then(employees => {
|
||||
const employee = employees.find(emp => emp.id === id);
|
||||
if (employee) {
|
||||
document.getElementById('editId').value = employee.id;
|
||||
document.getElementById('editName').value = employee.name;
|
||||
document.getElementById('editPhone').value = employee.phone;
|
||||
document.getElementById('editRole').value = employee.role;
|
||||
|
||||
// 显示编辑模态框
|
||||
const modal = new bootstrap.Modal(document.getElementById('editEmployeeModal'));
|
||||
modal.show();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取员工信息失败:', error);
|
||||
alert('获取员工信息失败');
|
||||
});
|
||||
}
|
||||
|
||||
// 更新员工信息
|
||||
document.getElementById('updateEmployeeBtn').addEventListener('click', function() {
|
||||
const id = document.getElementById('editId').value;
|
||||
const name = document.getElementById('editName').value;
|
||||
const phone = document.getElementById('editPhone').value;
|
||||
const role = document.getElementById('editRole').value;
|
||||
|
||||
if (!id || !name || !phone || !role) {
|
||||
alert('员工信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
const employee = {
|
||||
id: parseInt(id),
|
||||
name: name,
|
||||
phone: phone,
|
||||
role: role
|
||||
};
|
||||
|
||||
fetch(`${API_BASE_URL}/employees/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(employee)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
alert('员工信息更新成功');
|
||||
// 关闭模态框
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('editEmployeeModal'));
|
||||
modal.hide();
|
||||
// 重新加载员工列表
|
||||
loadEmployees();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('更新员工信息失败:', error);
|
||||
alert('更新员工信息失败');
|
||||
});
|
||||
});
|
||||
|
||||
// 删除员工
|
||||
function deleteEmployee(id) {
|
||||
if (confirm('确定要删除这个员工吗？')) {
|
||||
fetch(`${API_BASE_URL}/employees/${id}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
alert('员工删除成功');
|
||||
// 重新加载员工列表
|
||||
loadEmployees();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除员工失败:', error);
|
||||
alert('删除员工失败');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,125 +0,0 @@
|
||||
/**
|
||||
* 员工管理API服务
|
||||
*/
|
||||
class EmployeeApiService {
|
||||
constructor(baseURL) {
|
||||
this.baseURL = baseURL;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有员工列表
|
||||
* @returns 员工信息数组
|
||||
*/
|
||||
async getEmployees() {
|
||||
try {
|
||||
const response = await fetch(`${this.baseURL}/employees`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${this.getToken()}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('获取员工列表失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加新员工
|
||||
* @param employeeInfo 员工信息
|
||||
* @returns 添加结果
|
||||
*/
|
||||
async addEmployee(employeeInfo) {
|
||||
try {
|
||||
const response = await fetch(`${this.baseURL}/employees`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${this.getToken()}`
|
||||
},
|
||||
body: JSON.stringify(employeeInfo)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('添加员工失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除员工
|
||||
* @param employeeId 员工ID
|
||||
* @returns 删除结果
|
||||
*/
|
||||
async deleteEmployee(employeeId) {
|
||||
try {
|
||||
const response = await fetch(`${this.baseURL}/employees/${employeeId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${this.getToken()}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.text();
|
||||
} catch (error) {
|
||||
console.error('删除员工失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新员工信息
|
||||
* @param employeeId 员工ID
|
||||
* @param employeeInfo 员工信息
|
||||
* @returns 更新结果
|
||||
*/
|
||||
async updateEmployee(employeeId, employeeInfo) {
|
||||
try {
|
||||
const response = await fetch(`${this.baseURL}/employees/${employeeId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${this.getToken()}`
|
||||
},
|
||||
body: JSON.stringify(employeeInfo)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('更新员工信息失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从localStorage获取token
|
||||
* @returns JWT token
|
||||
*/
|
||||
getToken() {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
}
|
||||
|
||||
// 导出员工API服务实例
|
||||
const employeeApiService = new EmployeeApiService('/api');
|
||||
Reference in New Issue
Block a user