(function($){ $.fn.tooth = function(options){ let toothId = this.initToothHtml(options); this.initPopup(toothId,options ? options.success : function(){}); } $.fn.initToothHtml = function(options){ let toothId = this.attr("id"); let settings = $.extend({ 'width': 192, 'height': 40, success: function(){} }, options); let tdWidth = Math.round(parseInt(settings.width-1)/2-1)-2; let tdHeight = Math.round(parseInt(settings.height)/2-1); let html =''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; this.html(html); return toothId; } /** * 电子病历选择牙位使用 */ $.fn.initPopupByEmr = function(toothId,ele,callback,cancelCallback){ //点击时弹出牙位选择 if ($("#tooth_popup_div").length > 0) { // 存在删除 $("#tooth_popup_div").remove(); } $("#"+toothId).append(getPopupHtml()); initPopupEvent(toothId,callback,cancelCallback); // 初始化 // 右上 setValueStyle($(ele).find(".right_up").html(),'rght_up'); // 左上 setValueStyle($(ele).find(".left_up").html(),'left_up'); // 右下 setValueStyle($(ele).find(".right_down").html(),'rght_down'); // 左下 setValueStyle($(ele).find(".left_down").html(),'left_down'); } initPopupEvent = function(toothId,callback,cancelCallback){ //关闭弹出窗口 $("#tooth_popup_div .close_label").on("click",function(){ $("#tooth_popup_div").remove(); }); //鼠标悬浮事件 $(".wisdom-select span>label, .num-select span>label").hover(function(){ $(this).toggleClass("num-select-hover"); let classNm = "tooth_"+$(this).attr("position")+$(this).attr("value"); $("."+classNm).toggleClass("drop-shadow"); },function(){ $(this).toggleClass("num-select-hover"); let classNm = "tooth_"+$(this).attr("position")+$(this).attr("value"); $("."+classNm).toggleClass("drop-shadow"); }); //选择效果 $(".wisdom-select span>label, .num-select span>label").on("click",function(e){ if(e){ let target = e.currentTarget; //选择数字字母,有样式删除,无样式添加 $(target).toggleClass("num-select-confirm"); setToothClass($(target)); } }); //添加按钮事件 setPopupButton(); //确定 $("#btnSure").on("click",function(){ let allSelects = $(".num-select-confirm"); if(!allSelects || allSelects.length == 0){ return false; } // console.log(allSelects) let toothResult = {}; // toothResult = []; allSelects.each(function(index,ele){ let jele = $(ele) // console.log(ele,jele.attr("position")); let position = jele.attr("position"); let type = jele.attr("type"); let value = jele.attr("value"); let obj = { position: position, type: type, value: value } // toothResult.push(obj); if(type == "letter"){ //乳牙 toothResult[position+"-"+type+"-"+value] = obj; } else { //恒牙 toothResult[position+"-pmnt-"+value] = obj; } }); //设置显示 // id="tooth_value_'+toothId+'" //98765E4D3C2B1A let result = setResultHtml(toothResult,toothId) // console.log(toothResult); callback(result); $("#tooth_popup_div").remove(); }); //取消 $("#btnCancel").on("click",function(){ $("#tooth_popup_div").remove(); if(cancelCallback){ cancelCallback(); } }); //初始化 initPopupValue(toothId); } $.fn.initPopup = function(toothId,callback){ //点击时弹出牙位选择 $("#tooth_value_"+toothId).on("click",function(){ if ($("#tooth_popup_div").length > 0) { // 存在删除 $("#tooth_popup_div").remove(); } $("#tooth_all_"+toothId).append(getPopupHtml()); initPopupEvent(toothId,callback); }); } // 初始化 function initPopupValue(toothId){ // 右上 setValueStyle($("#tooth_all_"+toothId+" .right_up").html(),'rght_up'); // 左上 setValueStyle($("#tooth_all_"+toothId+" .left_up").html(),'left_up'); // 右下 setValueStyle($("#tooth_all_"+toothId+" .right_down").html(),'rght_down'); // 左下 setValueStyle($("#tooth_all_"+toothId+" .left_down").html(),'left_down'); } function setValueStyle(html,positionVal){ if(html){ let list = html.split(""); list.forEach(value => { let type = "pmnt"; if("ABCDE".indexOf(value) >= 0){ type = "letter"; } let position = positionVal; if(value == "9"){ position = 'wisdom_'+positionVal; type = "wisdom"; } let target = $("label[position='"+position+"'][type='"+type+"'][value='"+value+"']"); if(target && target.length != 0){ target.addClass("num-select-confirm"); setToothClass(target); } }); } } function setResultHtml(toothResult,toothId){ let result = {}; // 右上 let rghtUpHtml = fmtVal(toothResult["wisdom_rght_up-pmnt-9"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-8"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-7"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-6"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-5"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-E"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-4"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-D"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-3"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-C"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-2"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-B"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-1"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-A"]); $("#tooth_all_"+toothId+" .right_up").html(rghtUpHtml); result["rght_up"] = rghtUpHtml; //左上 let leftUpHtml = fmtVal(toothResult["left_up-pmnt-1"]); leftUpHtml += fmtVal(toothResult["left_up-letter-A"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-2"]); leftUpHtml += fmtVal(toothResult["left_up-letter-B"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-3"]); leftUpHtml += fmtVal(toothResult["left_up-letter-C"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-4"]); leftUpHtml += fmtVal(toothResult["left_up-letter-D"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-5"]); leftUpHtml += fmtVal(toothResult["left_up-letter-E"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-6"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-7"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-8"]); leftUpHtml += fmtVal(toothResult["wisdom_left_up-pmnt-9"]); $("#tooth_all_"+toothId+" .left_up").html(leftUpHtml); result["left_up"] = leftUpHtml; // 右下 let rghtDownHtml = fmtVal(toothResult["wisdom_rght_down-pmnt-9"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-8"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-7"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-6"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-5"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-E"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-4"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-D"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-3"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-C"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-2"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-B"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-1"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-A"]); $("#tooth_all_"+toothId+" .right_down").html(rghtDownHtml); result["rght_down"] = rghtDownHtml; //左下 let leftDownHtml = fmtVal(toothResult["left_down-pmnt-1"]); leftDownHtml += fmtVal(toothResult["left_down-letter-A"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-2"]); leftDownHtml += fmtVal(toothResult["left_down-letter-B"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-3"]); leftDownHtml += fmtVal(toothResult["left_down-letter-C"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-4"]); leftDownHtml += fmtVal(toothResult["left_down-letter-D"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-5"]); leftDownHtml += fmtVal(toothResult["left_down-letter-E"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-6"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-7"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-8"]); leftDownHtml += fmtVal(toothResult["wisdom_left_down-pmnt-9"]); $("#tooth_all_"+toothId+" .left_down").html(leftDownHtml); result["left_down"] = leftDownHtml; return result; } function fmtVal(value){ if(value){ return value.value; } return ""; } // 选中数字 或者字母时,设置牙齿的样式 function setToothClass(ele){ let key = ele.attr("value"); let isSelect1 = ele.hasClass("num-select-confirm"); let isSelect2 = null; if(ele.attr("type") == "letter"){ switch (key) { case "A": key = "1"; break; case "B": key = "2"; break; case "C": key = "3"; break; case "D": key = "4"; break; case "E": key = "5"; break; default: break; } isSelect2 = $("label[position='"+ele.attr("position")+"'][type='pmnt'][value='"+key+"']").hasClass("num-select-confirm"); } else { switch (key) { case "1": key = "A"; break; case "2": key = "B"; break; case "3": key = "C"; break; case "4": key = "D"; break; case "5": key = "E"; break; default: break; } isSelect2 = $("label[position='"+ele.attr("position")+"'][type='letter'][value='"+key+"']").hasClass("num-select-confirm"); } // console.log("isSelect1="+isSelect1,"isSelect2="+isSelect2) //数字或者字母有一天选择,则牙齿选中 let classNm = "tooth_"+ele.attr("position")+key; // console.log("classNm=",classNm) if(isSelect1 || isSelect2){ //选择牙齿 $("."+classNm).addClass("drop-shadow-confirm"); } else { $("."+classNm).removeClass("drop-shadow-confirm"); } } function getPopupHtml(){ let html = '