// 工时记录页面JavaScript let timeRecords = []; let projects = []; let currentEditingRecord = null; // 页面加载时初始化 document.addEventListener('DOMContentLoaded', function() { initializePage(); setupEventListeners(); }); // 初始化页面 async function initializePage() { await Promise.all([ loadProjects(), loadTimeRecords() ]); // 设置默认筛选日期为本周 const weekRange = getThisWeekRange(); document.getElementById('filter-start-date').value = weekRange.start; document.getElementById('filter-end-date').value = weekRange.end; // 设置默认记录日期为今天 document.getElementById('record_date').value = getTodayString(); } // 设置事件监听器 function setupEventListeners() { // 工时记录表单提交 const recordForm = document.getElementById('timerecord-form'); if (recordForm) { recordForm.addEventListener('submit', handleRecordSubmit); } // 时间输入变化时自动计算工时 const startTimeInput = document.getElementById('start_time'); const endTimeInput = document.getElementById('end_time'); if (startTimeInput) { startTimeInput.addEventListener('change', calculateHours); } if (endTimeInput) { endTimeInput.addEventListener('change', calculateHours); } } // 加载项目列表 async function loadProjects() { try { const response = await apiGet('/api/projects'); projects = response.data; populateProjectSelect(); } catch (error) { showError('加载项目失败: ' + error.message); console.error('加载项目失败:', error); } } // 填充项目选择框 function populateProjectSelect() { const selects = ['project_id', 'filter-project']; selects.forEach(selectId => { const select = document.getElementById(selectId); if (!select) return; // 清空现有选项(保留第一个默认选项) const firstOption = select.querySelector('option'); select.innerHTML = ''; if (firstOption) { select.appendChild(firstOption); } // 添加项目选项 projects.forEach(project => { const option = document.createElement('option'); option.value = project.id; option.textContent = project.project_name; select.appendChild(option); }); }); } // 加载工时记录 async function loadTimeRecords() { try { const params = new URLSearchParams(); const startDate = document.getElementById('filter-start-date').value; const endDate = document.getElementById('filter-end-date').value; const projectId = document.getElementById('filter-project').value; if (startDate) params.append('start_date', startDate); if (endDate) params.append('end_date', endDate); if (projectId) params.append('project_id', projectId); const url = `/api/timerecords${params.toString() ? '?' + params.toString() : ''}`; const response = await apiGet(url); timeRecords = response.data; renderTimeRecordsTable(); } catch (error) { showError('加载工时记录失败: ' + error.message); console.error('加载工时记录失败:', error); } } // 渲染工时记录表格 function renderTimeRecordsTable() { const tbody = document.getElementById('timerecords-tbody'); if (!tbody) return; if (timeRecords.length === 0) { tbody.innerHTML = '暂无工时记录'; return; } tbody.innerHTML = timeRecords.map(record => { const projectDisplay = record.project ? record.project.project_name : '-'; const rowClass = getRowClass(record); return ` ${formatDate(record.date)} ${record.day_of_week || getDayOfWeekChinese(record.date)} ${escapeHtml(record.event_description || '-')} ${escapeHtml(projectDisplay)} ${record.start_time || '-'} ${record.end_time || '-'} ${escapeHtml(record.activity_num || '-')} ${record.hours || '-'} `; }).join(''); } // 获取行的CSS类名(根据是否为休息日) function getRowClass(record) { if (record.is_holiday) { if (record.is_working_on_holiday) { return 'working-holiday-row'; // 休息日工作 } else { return 'holiday-row'; // 休息日休息 } } return ''; } // 重置筛选条件 function resetFilters() { document.getElementById('filter-start-date').value = ''; document.getElementById('filter-end-date').value = ''; document.getElementById('filter-project').value = ''; loadTimeRecords(); } // 显示创建记录模态框 function showCreateRecordModal() { currentEditingRecord = null; resetForm('timerecord-form'); document.getElementById('timerecord-modal-title').textContent = '新建工时记录'; // 设置默认日期为今天 document.getElementById('record_date').value = getTodayString(); // 设置默认时间 document.getElementById('start_time').value = '09:00'; document.getElementById('end_time').value = '17:00'; // 自动计算工时 updateHoursInput(); // 隐藏休息日信息和警告 document.getElementById('holiday-info').style.display = 'none'; document.getElementById('holiday-warning').style.display = 'none'; showModal('timerecord-modal'); // 检查今天是否为休息日 checkHoliday(); } // 检查休息日 async function checkHoliday() { const dateInput = document.getElementById('record_date'); const date = dateInput.value; if (!date) return; try { const response = await apiGet(`/api/timerecords/check_holiday/${date}`); const holidayInfo = response.data; updateHolidayInfo(holidayInfo); } catch (error) { console.error('检查休息日失败:', error); // 如果API调用失败,使用本地判断 const dayOfWeek = new Date(date).getDay(); const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; updateHolidayInfo({ is_holiday: isWeekend, holiday_type: isWeekend ? 'weekend' : null, holiday_name: null, day_of_week: getDayOfWeekChinese(date) }); } } // 更新休息日信息显示 function updateHolidayInfo(holidayInfo) { const holidayInfoDiv = document.getElementById('holiday-info'); const holidayBadge = document.getElementById('holiday-badge'); const holidayText = document.getElementById('holiday-text'); const holidayWarning = document.getElementById('holiday-warning'); if (holidayInfo.is_holiday) { // 显示休息日信息 holidayInfoDiv.style.display = 'flex'; holidayWarning.style.display = 'block'; // 设置徽章样式和文本 if (holidayInfo.holiday_type === 'weekend') { holidayBadge.className = 'badge weekend'; holidayBadge.textContent = '周末'; } else if (holidayInfo.holiday_type === 'national_holiday') { holidayBadge.className = 'badge national-holiday'; holidayBadge.textContent = '节假日'; } else { holidayBadge.className = 'badge weekend'; holidayBadge.textContent = '休息日'; } holidayText.textContent = holidayInfo.holiday_name || `${holidayInfo.day_of_week} 休息日`; } else { // 隐藏休息日信息 holidayInfoDiv.style.display = 'none'; holidayWarning.style.display = 'none'; } } // 更新工时输入框 function updateHoursInput() { const startTime = document.getElementById('start_time').value; const endTime = document.getElementById('end_time').value; const hoursField = document.getElementById('hours'); if (startTime && endTime) { const calculated = calculateHours(startTime, endTime); // 调用 common.js 中的全局函数 hoursField.value = calculated; } else { hoursField.value = ''; } } // 处理记录表单提交 async function handleRecordSubmit(e) { e.preventDefault(); const formData = getFormData('timerecord-form'); // 验证必填字段 if (!formData.date) { showError('请选择日期'); return; } try { let response; if (currentEditingRecord) { // 更新记录 response = await apiPut(`/api/timerecords/${currentEditingRecord.id}`, formData); } else { // 创建新记录 response = await apiPost('/api/timerecords', formData); } showSuccess(currentEditingRecord ? '工时记录更新成功' : '工时记录创建成功'); closeModal('timerecord-modal'); location.reload(); // 刷新页面以显示最新数据 } catch (error) { showError(error.message); } } // 编辑记录 function editRecord(recordId) { const record = timeRecords.find(r => r.id === recordId); if (!record) { showError('记录不存在'); return; } currentEditingRecord = record; document.getElementById('timerecord-modal-title').textContent = '编辑工时记录'; // 填充表单数据 fillForm('timerecord-form', { date: record.date, event_description: record.event_description || '', project_id: record.project_id || '', start_time: record.start_time || '', end_time: record.end_time || '', activity_num: record.activity_num || '', hours: record.hours || '' }); showModal('timerecord-modal'); // 检查是否为休息日 checkHoliday(); } // 删除记录 async function deleteRecord(recordId) { const record = timeRecords.find(r => r.id === recordId); if (!record) { showError('记录不存在'); return; } if (!confirm(`确定要删除这条工时记录吗?`)) { return; } try { await apiDelete(`/api/timerecords/${recordId}`); showSuccess('工时记录删除成功'); location.reload(); // 刷新页面以显示最新数据 } catch (error) { showError('删除工时记录失败: ' + error.message); } } // HTML转义函数 function escapeHtml(text) { if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }