30
所花时间：
博客量：2
代码量：几百
所学知识：计算机网络，网络层ARP协议
员工评估信息管理
添加员工评估信息
员工评估信息列表
| ID | 员工姓名 | 季度 | 年份 | 评估分数 | 操作 |
|---|
<!-- 模态框用于编辑信息 -->
<div id="editModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto hidden">
<div class="flex min-h-full items-center justify-center p-4 text-center">
<div class="bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
<div>
<h2 class="text-lg font-bold mb-2">编辑员工评估信息</h2>
<form id="editForm">
<input type="hidden" id="editId">
<div class="mb-2">
<label for="editEmployeeName" class="block text-sm font-medium text-gray-700">员工姓名</label>
<input type="text" id="editEmployeeName" class="mt-1 block w-full border border-gray-300 rounded-md py-2 px-3 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="mb-2">
<label for="editQuarter" class="block text-sm font-medium text-gray-700">季度</label>
<input type="number" id="editQuarter" class="mt-1 block w-full border border-gray-300 rounded-md py-2 px-3 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="mb-2">
<label for="editYear" class="block text-sm font-medium text-gray-700">年份</label>
<input type="number" id="editYear" class="mt-1 block w-full border border-gray-300 rounded-md py-2 px-3 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="mb-2">
<label for="editEvaluationScore" class="block text-sm font-medium text-gray-700">评估分数</label>
<input type="number" step="0.01" id="editEvaluationScore" class="mt-1 block w-full border border-gray-300 rounded-md py-2 px-3 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="mb-2">
<label for="editUpdateUser" class="block text-sm font-medium text-gray-700">更新人</label>
<input type="text" id="editUpdateUser" class="mt-1 block w-full border border-gray-300 rounded-md py-2 px-3 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="flex justify-end">
<button type="button" id="cancelEdit" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2">取消</button>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
const baseUrl = 'http://localhost:8080';
// 获取员工评估信息列表
function getEvaluations() {
fetch(`${baseUrl}/evaluations`)
.then(response => response.json())
.then(data => {
const evaluationList = document.getElementById('evaluationList');
evaluationList.innerHTML = '';
data.forEach(evaluation => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">${evaluation.id}</td>
<td class="px-6 py-4 whitespace-nowrap">${evaluation.employeeName}</td>
<td class="px-6 py-4 whitespace-nowrap">${evaluation.quarter}</td>
<td class="px-6 py-4 whitespace-nowrap">${evaluation.year}</td>
<td class="px-6 py-4 whitespace-nowrap">${evaluation.evaluationScore}</td>
<td class="px-6 py-4 whitespace-nowrap">
<button onclick="editEvaluation(${evaluation.id})" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-1 px-2 rounded mr-2">编辑</button>
<button onclick="deleteEvaluation(${evaluation.id})" class="bg-red-500 hover:bg-red-600 text-white font-bold py-1 px-2 rounded">删除</button>
</td>
`;
evaluationList.appendChild(row);
});
})
.catch(error => console.error('Error fetching evaluations:', error));
}
// 添加员工评估信息
const addForm = document.getElementById('addForm');
addForm.addEventListener('submit', function (e) {
e.preventDefault();
const employeeName = document.getElementById('employeeName').value;
const quarter = parseInt(document.getElementById('quarter').value);
const year = parseInt(document.getElementById('year').value);
const evaluationScore = parseFloat(document.getElementById('evaluationScore').value);
const updateUser = document.getElementById('updateUser').value;
const evaluation = {
employeeName,
quarter,
year,
evaluationScore
};
fetch(`${baseUrl}/evaluations?updateUser=${updateUser}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(evaluation)
})
.then(response => response.json())
.then(() => {
getEvaluations();
addForm.reset();
})
.catch(error => console.error('Error adding evaluation:', error));
});
// 编辑员工评估信息
function editEvaluation(id) {
fetch(`${baseUrl}/evaluations/${id}`)
.then(response => response.json())
.then(evaluation => {
const editId = document.getElementById('editId');
const editEmployeeName = document.getElementById('editEmployeeName');
const editQuarter = document.getElementById('editQuarter');
const editYear = document.getElementById('editYear');
const editEvaluationScore = document.getElementById('editEvaluationScore');
const editUpdateUser = document.getElementById('editUpdateUser');
editId.value = evaluation.id;
editEmployeeName.value = evaluation.employeeName;
editQuarter.value = evaluation.quarter;
editYear.value = evaluation.year;
editEvaluationScore.value = evaluation.evaluationScore;
const editModal = document.getElementById('editModal');
editModal.classList.remove('hidden');
})
.catch(error => console.error('Error fetching evaluation for edit:', error));
}
const editForm = document.getElementById('editForm');
editForm.addEventListener('submit', function (e) {
e.preventDefault();
const id = parseInt(document.getElementById('editId').value);
const employeeName = document.getElementById('editEmployeeName').value;
const quarter = parseInt(document.getElementById('editQuarter').value);
const year = parseInt(document.getElementById('editYear').value);
const evaluationScore = parseFloat(document.getElementById('editEvaluationScore').value);
const updateUser = document.getElementById('editUpdateUser').value;
const evaluation = {
id,
employeeName,
quarter,
year,
evaluationScore
};
fetch(`${baseUrl}/evaluations/${id}?updateUser=${updateUser}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(evaluation)
})
.then(response => response.json())
.then(() => {
getEvaluations();
const editModal = document.getElementById('editModal');
editModal.classList.add('hidden');
})
.catch(error => console.error('Error updating evaluation:', error));
});
const cancelEdit = document.getElementById('cancelEdit');
cancelEdit.addEventListener('click', function () {
const editModal = document.getElementById('editModal');
editModal.classList.add('hidden');
});
// 删除员工评估信息
function deleteEvaluation(id) {
if (confirm('确定要删除这条评估信息吗？')) {
fetch(`${baseUrl}/evaluations/${id}`, {
method: 'DELETE'
})
.then(() => getEvaluations())
.catch(error => console.error('Error deleting evaluation:', error));
}
}
// 页面加载时获取员工评估信息列表
window.onload = getEvaluations;
</script>
浙公网安备 33010602011771号