在当今快节奏的现代医疗体系中，医生排班作为保障医疗服务连续性和质量的关键环节，其重要性不言而喻。合理的排班不仅能够显著提升医院的整体运营效率，更能确保患者在第一时间获得精准、及时的治疗。本文将深入剖析一个基于 JavaScript 构建的医生排班系统，从底层的数据获取机制到前端页面的细腻渲染，全方位展现其设计思路与实现细节。
一、系统架构总览
该医生排班系统旨在打造一个功能完备、操作便捷的医疗资源调度平台。其核心功能涵盖：精准获取医生基本信息及动态排班数据，以直观、清晰的方式渲染排班表，赋予医护人员便捷的排班编辑权限并确保数据安全保存，同时精心雕琢用户界面，让操作流程流畅自然，降低使用门槛。
二、数据获取与预处理
（一）医生信息抓取
系统借助 AJAX 技术，以异步请求的方式从服务器端获取医生信息及排班详情。代码实现如下：
function getDaysInMonth() {
const doctors = [];
$.ajax({
type: "post",
url: url + ``,
headers: {
token: token,
id: uid
},
data: {},
success: function (results) {
const data = results.data;
for (let i = 0; i < results.data.length; i++) {
const fromData = {
id: results.data[i].id,
name: results.data[i].name,
office: results.data[i].depart_name
};
doctors.push(fromData);
}
render();
calendar(3);
},
});
}这段代码通过精心构建的 POST 请求，携带必要的身份验证信息（token 和 uid），向服务器发起数据获取请求。一旦请求成功，将服务器返回的医生数据逐一解析，提取关键信息（如医生 ID、姓名、所属科室）并存储于doctors数组中，为后续的页面渲染及业务逻辑处理筑牢数据根基。
（二）数据整理与加工
获取的数据并非直接可用，需进一步处理。系统巧妙运用 JavaScript 内置的Date对象，精准计算当前月份的天数，为排班表的生成提供关键依据：
function getDaysInMonths() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const days = new Date(year, month, 0).getDate();
return days;
}这段代码通过Date对象获取当前年份、月份，并利用其特性计算出当前月份的总天数。这种数据预处理方式简洁高效，确保了排班表生成过程中的准确性与稳定性。
三、页面呈现与交互设计
（一）医生信息可视化
系统依据获取的医生信息，动态生成排班表的表头部分，代码如下：
function render() {
let str = '';
const days = getDaysInMonths();
for (let i = page * pageSize; i < doctors.length && i < page * pageSize + pageSize; i++) {
str += `<div class="nav_status">
<div class="child_long">${doctors[i].name}</div>
<div class="child_long">${doctors[i].office}</div></div>`;
// 处理每一天的排班信息
for (let d = 1; d <= days; d++) {
if (data[d] == undefined) continue;
renderAgain(d);
}
}
$("#body_status").html(str);
} 在这段代码中，通过循环遍历doctors数组，将每位医生的姓名与所属科室信息以特定的 HTML 结构拼接成字符串str。同时，嵌套循环结合getDaysInMonths函数，对每一天的排班信息进行初步处理，为后续细化渲染做准备。最终，通过$("#body_status").html(str)将生成的 HTML 内容渲染到页面指定区域，实现医生信息的可视化呈现。
（二）排班表精细绘制
对于排班表的每一天，系统会详细渲染医生的排班详情：
function renderAgain(d) {
for (let j = 0; j < data[d].date.length; j++) {
scroll_str += `
<div class="scroll_item">
<div class="specific_time">${data[d].date[j]}</div>
<div class="am_pm" style="background-color: rgb(245, 247, 250)">
<div class="am_title">上午</div>
<div class="pm_title">下午</div>
</div>`;
let emptySlots = '';
for (let k = page * pageSize; k < data.length && k < page * pageSize + pageSize; k++) {
let am_source = data[k].shang[j].source? '号源:' + data[k].shang[j].source : '无';
let pm_source = data[k].xia[j].source? '号源:' + data[k].xia[j].source : '无';
emptySlots += `<div class="am_pm_child">
<div class="am_title">${am_source}</div>
<div class="pm_title">${pm_source}</div>
</div>`;
}
scroll_str += emptySlots;
scroll_str += `</div></div>`;
}
}这段代码针对每一天的排班数据，细致地构建 HTML 结构。首先，创建包含日期信息的scroll_item容器，并划分上午、下午两个时段区域。接着，通过内层循环遍历医生排班数据，根据是否存在号源，动态生成对应的 HTML 内容，清晰展示每位医生在不同时段的排班状态，使整个排班表直观易懂，方便医护人员及相关人员查阅。
四、排班管理与数据持久化
（一）灵活排班编辑
用户可通过点击 “设置” 按钮，轻松开启医生排班编辑模式。系统随即弹出编辑框，支持对上午和下午的排班进行灵活调整：
function redact(id) {
editId = id;
$('.examine').show();
let date_time = ``;
const getdate = getDatesInMonth(new Date().getFullYear(), new Date().getMonth() + 1);
for (let h = 0; h < getdate.length; h++) {
$(".work_time").html(getdate[h]);
}
$("#nowDay").trigger("click");
for (let i = 0; i < data.length; i++) {
if (data[i].id == id) {
department_id = data[i].depart_id;
sessionStorage.setItem('SourceId', data[i].id);
for (let j = 0; j < data[i].date.length; j++) {
const shangData = data[i].shang[j];
const date = new Date(data[i].date[j]);
const day = date.getDate();
const formattedDate = `${day}`;
$('#person').html(data[i].name);
const shang = data[i].shang[j];
const weekDay = getWeekDay(data[i].date[j]);
$('.week').html(weekDay);
const sourceText = shangData.source === undefined? '无号源' : '号源: ' + shangData.source;
const sourceClass = shangData.source === undefined? 'no-source' : 'has-source';
date_time += `
<div class="plan_box" data-day="${day}">
<span>${formattedDate}</span><br>
<span class="${sourceClass}">${sourceText}</span>
</div>`;
}
$('.date_box').html(date_time);
details_id = id;
}
}
}这段代码在用户触发编辑操作后，首先记录当前编辑医生的 ID。然后，获取当前月份的日期数组，将日期信息填充到页面相应位置。接着，遍历医生的排班数据，提取关键信息（如日期、号源情况），并根据号源状态添加对应的 CSS 类，以直观展示。最后，将构建好的 HTML 内容渲染到编辑框中，为用户提供清晰、便捷的编辑界面。
（二）安全数据保存
用户完成排班编辑后，点击 “保存” 按钮，系统会将修改后的数据安全提交至服务器：
function save() {
isValid = true;
if (switch_am_time == 1 && switch_pm_time == 1) {
showPopup('请至少选择一个时间段', '#f44336', '#ffebee', '#f44336');
return;
}
// 其他验证逻辑...
$.ajax({
type: "post",
url: url + `/pc/scheduling/add`,
headers: {
token: token,
id: uid
},
data: {
doctor_id: editId,
arr: JSON.stringify(total_data)
},
success: function (results) {
if (results.code == 1) {
$('.delete_back').hide();
showPopup('添加成功', '#4caf50', '#e8f5e9', '#4caf50');
getDaysInMonth();
// 将开关状态改为关闭
switch_am($('#switchs')[0]);
switch_pm($('#switch')[0]);
hide();
} else if (results.code == 2) {
showPopup(results.msg, '#f44336', '#ffebee', '#f44336');
}
},
});
}这段代码在保存操作时，首先进行必要的业务逻辑验证，如确保用户至少选择了一个时间段进行排班调整。然后，通过 AJAX POST 请求，将编辑医生的 ID 以及处理后的排班数据（以 JSON 字符串形式）发送至服务器指定接口。服务器响应后，根据返回的状态码进行不同处理：若保存成功（状态码为 1），则隐藏相关提示元素，弹出成功提示框，并重新获取医生排班数据以更新页面显示；若保存失败（状态码为 2），则弹出包含错误信息的提示框，方便用户及时知晓并处理问题，确保数据保存过程的安全性与可靠性。
五、结语
本文全方位阐述了一个基于 JavaScript 的医生排班系统的设计精髓与实现路径。通过巧妙的数据处理算法、精心雕琢的页面渲染效果以及便捷实用的交互功能，该系统能够高效、精准地展示医生排班信息，并为医护人员提供灵活、安全的排班编辑与保存服务。希望本文能为投身于医疗信息化领域的开发者们提供宝贵的参考与借鉴，助力打造更优质、智能的医疗服务系统，为现代医疗事业的蓬勃发展添砖加瓦。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
