医生管理页面开发：问题与挑战的深度剖析

最新推荐文章于 2025-05-01 23:24:04 发布

派大鑫的工作室

最新推荐文章于 2025-05-01 23:24:04 发布

阅读量1k

点赞数 24

文章标签：前端 javascript html

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

版权

在开发医生管理系统的过程中，我遇到了几个棘手的问题，这些问题主要集中在医生标签的渲染、标签选择的逻辑判断以及基于科室的搜索功能实现上。通过对这些问题的深入分析和总结，希望能为自己以及其他开发者提供有价值的参考，以更好地优化和完善系统功能。

医生标签渲染问题

问题描述

在医生管理页面中，需要根据从后端获取的医生标签数据，将对应的标签渲染到每个医生的信息展示区域。然而，在实际实现过程中，标签无法正确地通过数据对比渲染到页面上。

在applys函数中，涉及到标签渲染的代码如下：

function applys(data) {
    // 省略其他代码...
    for (let i = k * num; i < (k + 1) * num; i++) {
        if (data[i] == undefined) break;
        // 省略其他数据处理代码...
        let labelArr = data[i].tar_id.split(",");
        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="id">${data[i].id}</div>
                    <div class="operate_date">${data[i].name}</div>
                    <div class="caption" style="cursor: pointer"><img src="${urlImg}" onclick="preview('${urlImg}')" alt=""></div>
                    <div class="caption">${data[i].duties}</div>
                    <div class="caption">${data[i].depart_name}</div>`
        str += `  <div class="caption label">`
        if (labelArr.length > 0) {
            for (let n in labelArr) {
                for (let j in labelData) {
                    if (labelData[j].id == labelArr[n]) {
                        str += `<div class="label_value" style="color:${labelData[j].color}; background-color:${labelData[j].back};">${labelData[j].name}</div>`;
                    }
                }
            }
        }
        str += ` </div> <div class="caption" title="${data[i].good}">${data[i].good}</div>
                    <div class="caption_time" title="">${data[i].create_time}</div>
                    <div class="manipulate">
                        <div class="edit_box" onclick="redact(${i},${data[i].id},2)"> 
                            <div>编辑</div>
                        </div>
                         <div class="delete" onclick="del(${data[i].id})"> 
                            <div>删除</div>
                        </div>
                    </div>
                </div>`;
    }
    // 省略其他代码...
}

问题分析

从上述代码可以看出，尝试通过双重循环遍历labelArr（医生拥有的标签 ID 数组）和labelData（所有标签数据数组），对比标签 ID 来渲染标签。然而，可能存在以下问题导致渲染失败：

数据格式问题：labelArr中的元素可能并非纯数字的标签 ID，例如可能包含空格或其他特殊字符，导致与labelData中的 ID 对比失败。
异步数据加载问题：labelData是通过labelApi函数异步获取的，如果在applys函数执行时，labelData尚未完全加载完成，那么对比操作将无法找到匹配的标签，从而导致渲染失败。

解决思路

数据预处理：在applys函数中，对labelArr中的每个元素进行预处理，去除可能存在的空格或特殊字符，确保其为纯数字的标签 ID，以便与labelData中的 ID 准确对比。例如，可以在遍历labelArr之前添加如下代码：

labelArr = labelArr.map(id => id.trim());

确保数据加载完成：在labelApi函数的success回调中，确保labelData加载完成后再执行apply函数，而不是通过setTimeout延迟执行。可以将apply函数的调用直接放在labelApi的success回调的末尾，以确保数据的一致性和完整性。

标签选择逻辑问题

问题描述

在选择医生标签时，使用了一个插件来实现标签选择功能。在判断选择标签的数量时出现了问题，无法准确限制用户只能选择三个标签。

在toggleTally函数中，涉及到标签数量判断的代码如下：

function toggleTally(element) {
    const id = $(element).attr("data-id");
    $(element).addClass("option_backColor");
    const index = tallyArr.indexOf(id);
    if (index === -1) {
        if (tallyArr.length >= 3) {
            showPopup('只能有三个标签', '#f44336', '#ffebee', '#f44336');
            return;
        }
        tallyArr.push(id);
    } else {
        tallyArr.splice(index, 1);
    }
    TallyRender(tallyArr);
}

问题分析

这段代码看似逻辑清晰，在每次添加新标签时，检查tallyArr数组的长度是否大于等于 3。然而，可能存在以下问题：

插件事件冲突：由于使用了插件来实现标签选择功能，插件内部可能存在其他事件或操作影响了toggleTally函数的执行，导致标签数量判断不准确。例如，插件可能在某些情况下重新初始化或修改了toggleTally函数所依赖的元素状态。
数据同步问题：tallyArr数组的更新可能没有及时同步到标签选择的显示上，导致用户看到的选择状态与实际tallyArr数组中的数据不一致，从而影响了数量判断的准确性。

解决思路

插件兼容性检查：仔细检查所使用的标签选择插件的文档和源代码，确保其与toggleTally函数的操作没有冲突。可以尝试在插件的初始化选项中，禁用或调整可能影响标签数量判断的功能。例如，如果插件有默认的全选或批量选择功能，可以将其禁用，以避免干扰标签数量的限制。
数据同步优化：在TallyRender函数中，不仅要渲染标签，还要确保tallyArr数组中的数据与页面上显示的标签状态完全同步。可以在渲染标签之前，先清空页面上的标签显示区域，然后根据tallyArr数组重新生成标签。例如：

function TallyRender(arr) {
    $("#MultiSelect").html('');
    const html = arr.length? [...new Set(arr)] 
      .map(id => {
            const label = labelData.find(item => item.id == id);
            return label? `
                <div class="tally" style="background-color:${label.back};" data-id="${label.id}">
                    <p style="color:${label.color};">${label.name}</p>
                    <img src="./img/delete.png" class="tally_del" 
                         onclick="removeLabel(${id})"/>
                </div>
            ` : '';
        }).join('') : '<p class="option_prompt">请选择标签</p>';
    $("#MultiSelect").html(html);
}

科室搜索功能问题

问题描述

在医生管理页面中，提供了根据科室搜索医生数据的功能。但在实际使用时，输入科室信息后无法搜索到对应的医生数据。

function handleSearch() {
    let doctorKeyword = $('#title').val();
    let select_department = $('.parent_input').attr('data-id');
    let filteredData = datas.filter(item => {
        let doctorMatch =!doctorKeyword || item.name.toLowerCase().includes(doctorKeyword);
        let select_Match =!select_department || item.depart_id == select_department;
        return doctorMatch && select_Match;
    });
    k = 0;
    setTimeout(function () {
        if (flag) {
            applys(filteredData);
        }
    }, 50);
}

问题分析

从代码来看，尝试通过select_department（获取到的用户选择的科室 ID）与医生数据中的depart_id进行对比来筛选数据。然而，可能存在以下问题：

科室 ID 获取问题：$('.parent_input').attr('data-id')可能无法正确获取到用户选择的科室 ID。例如，parent_input元素的data-id属性可能没有正确绑定，或者在某些操作后该属性值被意外修改。
数据匹配问题：医生数据中的depart_id与用户选择的科室 ID 的数据类型可能不一致。例如，depart_id可能是字符串类型，而select_department获取到的是数字类型，导致对比失败。

解决思路

科室 ID 获取验证：在handleSearch函数中，添加日志输出，检查select_department获取到的值是否正确。例如：

console.log('Selected department ID:', select_department);

同时，检查parent_input元素的data-id属性绑定是否正确，确保在页面加载和相关操作过程中该属性值不会丢失或被错误修改。
2. 数据类型统一：在进行数据筛选时，确保select_department和item.depart_id的数据类型一致。可以将item.depart_id转换为与select_department相同的数据类型，例如：

let select_Match =!select_department || String(item.depart_id) == select_department;

通过对这些问题的详细总结和分析，我对医生管理系统的开发有了更深入的理解。在后续的开发中，需要更加注重数据的准确性、逻辑的严谨性以及与插件的兼容性，以确保系统的稳定性和用户体验的良好性。