基于 JavaScript 的体检管理系统代码解读

最新推荐文章于 2025-05-01 08:38:22 发布

派大鑫的工作室

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量617

点赞数 6

文章标签： javascript okhttp 开发语言

本文链接：https://blog.youkuaiyun.com/Cc040909/article/details/146403190

版权

在医疗信息化蓬勃发展的当下，高效的体检管理系统对于提升医疗服务质量、优化资源配置起着关键作用。本文将围绕一套基于 JavaScript 构建的体检管理系统代码展开深入探讨，从数据获取与渲染，到交互功能实现，全方位解析其设计思路与核心逻辑。

系统初始化与数据获取

系统启动时，通过apply()函数开启数据加载流程。该函数利用$.ajax发起 POST 请求，从服务器获取体检套餐相关数据：

function apply() {  
    $.ajax({  
        url: url + "",  
        type: "POST",  
        datatype: "json",  
        headers: {  
            token: token,  
            id: uid  
        },
        data: {},
        success: function (data) {  
            if (data.code === 1) {
                datas = data.data;  
                res = data.data;  
                render(data.data)
                applys(res);  
                sessionStorage.setItem('type_value', '1')
            } else if (data.code === 0) {
                showPopup(data.msg, '#f44336', '#ffebee', '#f44336');
            }
        },
        error: function (e) {  
            console.log(e);  
        }
    });
}

请求成功后，根据返回的data.code判断状态。若为 1，存储数据并调用render和applys函数进行数据渲染；若为 0，则弹出错误提示框，反馈服务器返回的错误信息。类似的数据获取逻辑在phy_item和phy_cls函数中也有体现，分别用于获取体检项目和体检类型数据，确保系统各模块数据的完整性。

数据渲染与页面呈现

套餐数据渲染

render函数负责将体检套餐数据渲染到页面的下拉选择框中

function render(data) {
    let parentStr = ``;
    parentStr += `<option value="">请选择所属套餐</option>`;
    for (let i in data) {
        class_id = data[i].id;
        parentStr += `<option value="${data[i].id}">${data[i].name}</option>`
    }
    $("#item_select").html(parentStr);
}

通过遍历数据数组，构建包含套餐 ID 和名称的<option>标签，最终更新#item_select元素的 HTML 内容，为用户提供套餐选择入口

列表数据渲染

applys函数承担着体检套餐列表的渲染重任：

function applys(data) {
    $("#idAll").prop("checked", false);
    let title_str = `体检套餐`;
    $('.orders').html(title_str);
    let str = ``;
    let page_str = `
           <div class="check_id"> <input type="checkbox" id="idAll" ></div>
            <div class="operate_date">套餐ID</div>
            <div class="caption">套餐名称</div>
            <div class="caption">套餐图片</div>
            <div class="caption">套餐价格</div>
            <div class="caption">状态</div>
            <div class="manipulate">操作</div>
        `;
    $('#page_box').html(page_str);
    if (data.length === 0) {
        str = `<div class="no_data">暂无此数据</div>`;
        $('#page').hide();
    } else {
        $('#page').show();
        for (let i = k * num; i < (k + 1) * num; i++) {
            if (data[i] == undefined) break;
            url_img = url + data[i].img; 
            str += `<div class="title" data-index="${data[i].id}">
                        <div class="check_id"><input type="checkbox" class="idAll" name="idAll" value="${data[i].id}" onchange="checkAll()"></div>
                        <div class="operate_date">${data[i].id}</div>
                        <div class="caption">${data[i].name}</div> 
                        <div class="caption"><img src="${url_img}"  class="img_box" onclick="preview('${url_img}')"></div>
                        <div class="caption">${data[i].price}</div>
                        <div class="caption"><input class="button_switch" id="button_switch" onclick="point(${data[i].id}, ${data[i].package_type}, this,${i})" type="checkbox" ${data[i].package_type == 1 ? 'checked' : ''}></div> 
                        <div class="manipulate">    
                            <div class="edit_box" onclick="redact(${data[i].id})"> 
                                <div>编辑</div>
                            </div>
                            <div class="delete" onclick="del(${data[i].id})"> 
                                <div>删除</div>
                            </div>
                        </div>
                    </div>`;
        }
    }
    $('#content').html(str);
    page_paging(data);
    $(".container").on(`change`, ".check_id input", function () {
        $(".count_num").html($(".title .check_id input:checked").length);
    });
    radio = $('.idAll');  
    $('#radio_menu').prop('checked', true); 
    $('#radio_type').prop('checked', false); 
    $('#menu_item').prop('checked', false); 
    $('.add_menu_box').show();
    $('.add_content_box').hide();
    $('.menu_item_box').hide();
    $("#idAll").prop("checked", false);
}

函数首先初始化全选框状态，设置页面标题。接着，构建列表表头结构并渲染到#page_box。若数据为空，显示 “暂无此数据” 提示；否则，遍历数据，为每个套餐生成包含 ID、名称、图片、价格、状态及操作按钮的列表项，同时绑定相关事件，如复选框的全选与反选逻辑、图片预览、套餐状态切换、编辑和删除操作等，确保用户与列表的交互流畅且功能完备。

交互功能实现

全选与反选功能

为实现全选和反选功能，系统定义了checkAll函数，并通过事件绑定监听全选框和单选框的状态变化:

function checkAll() {
    let allChecked = true; 
    if (sessionStorage.getItem('type_value') == '1') {
        for (let i = 0; i < $(".idAll").length; i++) {
            if (!$(".idAll").eq(i).prop("checked")) {
                allChecked = false; 
                break;
            }
        }
    } else if (sessionStorage.getItem('type_value') == '2') {
        for (let i = 0; i < $(".idAll_item").length; i++) {
            if (!$(".idAll_item").eq(i).prop("checked")) {
                allChecked = false; 
                break;
            }
        }
    } else if (sessionStorage.getItem('type_value') == '3') {
        for (let i = 0; i < $(".idAll_class").length; i++) {
            if (!$(".idAll_class").eq(i).prop("checked")) {
                allChecked = false; 
                break;
            }
        }
    }
    $("#idAll").prop("checked", allChecked); 
}
$(".container").on(`click`, "#idAll", function (e) {
    const isChecked = this.checked; 
    if (sessionStorage.getItem('type_value') == '1') {
        for (let i = 0; i < $(".idAll").length; i++) {
            $(".idAll")[i].checked = isChecked; 
        }
    } else if (sessionStorage.getItem('type_value') == '2') {
        for (let i = 0; i < $(".idAll_item").length; i++) {
            $(".idAll_item")[i].checked = isChecked; 
        }
    } else if (sessionStorage.getItem('type_value') == '3') {
        for (let i = 0; i < $(".idAll_class").length; i++) {
            $(".idAll_class")[i].checked = isChecked; 
        }
    }
});

checkAll函数根据当前页面类型（通过sessionStorage.getItem('type_value')判断），遍历相应的单选框集合，判断是否所有单选框都被选中，进而更新全选框状态。同时，通过监听全选框的点击事件，反向设置所有单选框的状态，实现全选与反选的双向联动。

新增、编辑与删除功能

新增功能：以新增体检套餐为例，add_department函数在用户点击 “保存” 按钮时触发：

function add_department() {
    let isValid = true;
    if (sessionStorage.getItem('type_value') == '1') {
        let editor = UE.getEditor('editor');
        let subtext = editor.getContentTxt(); 
        editor.addListener('contentChange', function () {
            if (editor.getContentTxt() == '') {
                $('.errorSubtext').show();
            } else {
                $('.errorSubtext').hide();
            }
        });
        if ($('.item_name').val() == '') {
            $('.item_name').css('border-color', 'red');
            $('.error_item').show();
            isValid = false;
        }
        if (url_img == null) {
            $('.error_img').show();
            isValid = false;
        }
        if ($('.item_price').val() == '') {
            $('.item_price').css('border-color', 'red');
            $('.error_price').show();
            isValid = false;
        }
        if ($('#type_select').val() == '') {
            $('#type_select').css('border-color', 'red');
            $('.error_select').show();
            isValid = false;
        }
        if (subtext == '') {
            $('.errorSubtext').show();
            isValid = false;
        }
        if (!isValid) {
            return false;
        }
        $.ajax({  
            url: url + "",  
            type: "POST",  
            datatype: "json",  
            headers: {  
                token: token,  
                id: uid  
            },
            data: {
                name: $('.item_name').val(),
                img: url_img,
                package_type: $('#type_select').val(),
                price: $('.item_price').val(),
                content: subtext,
                type: 1,
                id: sessionStorage.getItem('edit_id')? sessionStorage.getItem('edit_id') : ''
            },
            success: function (data) {  
                if (data.code == 1) {
                    showPopup('新增成功', '#4caf50', '#e8f5e9', '#4caf50');
                    apply(); 
                    $('.examine').hide(); 
                } else if (data.code == 2) {
                    showPopup(data.msg, '#f44336', '#ffebee', '#f44336');
                }
            },
            error: function (e) {  
                console.log(e);  
            }
        });
    } 
    // 其他类型的新增逻辑类似
}

函数首先进行数据合法性校验，包括套餐名称、图片、价格、套餐类型及富文本内容等。校验通过后，发起 AJAX 请求将数据提交至服务器。若新增成功，弹出成功提示并重新渲染页面数据；失败则显示错误信息。

编辑功能：redact函数用于实现编辑功能，根据当前页面类型，从相应的数据数组中查找对应 ID 的数据，并将其回显到编辑界面

function redact(id) {
    editId = id;
    $('.examine').show(); 
    if (sessionStorage.getItem('type_value') == '1') {
        sessionStorage.setItem('edit_id', editId);
        for (let i = 0; i < res.length; i++) {
            if (res[i].id == editId) {
                $('.item_name').val(res[i].name);
                url_img = res[i].img; 
                $('.photo_image').attr('src', url + url_img);
                $('.item_price').val(res[i].price);
                $('#type_select').val(res[i].package_type);
                $('.project_attention').val(res[i].attention);
                UE.getEditor('editor').setContent(res[i].content);
            }
        }
    } 
    // 其他类型的编辑逻辑类似
}

删除功能：支持单个删除和批量删除。del函数用于单个删除，将待删除的 ID 存储在delId数组中并显示删除确认弹窗；batch_del函数遍历所有单选框，将选中的 ID 添加到delId数组，同样显示确认弹窗。最终，sure_delete函数根据sessionStorage.getItem('type_value')判断页面类型，发起 AJAX 请求执行删除操作：

function sure_delete() {
    if (delId.length === 0) {
        showPopup('请选择至少一个进行删除', '#f44336', '#ffebee', '#f44336');
        return; 
    }
    if (sessionStorage.getItem('type_value') == '1') {
        $.ajax({
            url: url + "",
            type: "POST",
            datatype: "json",
            headers: {
                token: token,
                id: uid
            },
            data: {
                id: delId.join(','),  
            },
            success: function (response) {
                if (response.code == 1) {
                    showPopup('操作成功', '#4caf50', '#e8f5e9', '#4caf50');
                    apply(); 
                } else {
                    showPopup('操作失败', '#f44336', '#ffebee', '#f44336');
                }
                $('.delete_back').hide(); 
                delId = []; 
            },
            error: function (e) {
                showPopup('请求失败，请稍后重试', '#f44336', '#ffebee', '#f44336');
                $('.delete_back').hide(); 
                delId = []; 
            }
        });
    } 
    // 其他类型的删除逻辑类似
}

若删除成功，弹出成功提示并重新渲染页面；失败则提示错误信息，同时隐藏确认弹窗并清空delId数组。

总结与展望

通过对这套体检管理系统 JavaScript 代码的深入分析，我们看到了一个功能较为完善的医疗信息化解决方案。它涵盖了体检套餐、项目及类型的管理，具备数据获取、渲染、交互等核心功能，为医疗工作人员提供了便捷的操作平台。然而，随着医疗业务的不断拓展和用户需求的日益复杂，该系统仍有优化空间。例如，可以进一步完善数据校验逻辑，增强系统的稳定性和容错性；引入更高效的数据缓存机制，提升页面加载速度；优化用户界面设计，提高操作的便捷性和友好性。相信在持续的迭代优化下，该体检管理系统将为医疗行业的信息化发展贡献更大的价值，助力提升整体医疗服务水平。