update 页面复选框 数据回显 样式调整

health-admin/src/main/resources/templates/dtp/archives/archivesEdit.html

@@ -217,8 +217,7 @@
                                             <div class="customize-form-group edit">
                                                 <label class="is-required">保险：</label>
                                                 <div class="input-groups" th:with="type=${@dict.getType('sys_select_dtp_ysfw_bxlx')}" id="targetInsuranceDiv">
-                                                    <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}"   name="insurance2" id="insurance2">
-                                                    <input type="hidden" id="insuranceValue2" name="insuranceValue" value="">
+                                                    <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}"   name="insurance2">
                                                 </div>
                                                 <div class="error-message" id="insurance-error">请选择至少一项保险</div>
                                                 <span class="status"></span>
@@ -288,17 +287,15 @@
                                             <div class="customize-form-group edit">
                                                 <label>饮食偏好：</label>
                                                 <div class="input-groups" th:with="type=${@dict.getType('sys_select_dtp_ysfw_ysph')}" id="dietaryPreferenceDiv">
-                                                    <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}"  th:checked="${dict.dictLabel}==${dietaryPreference}"  name="dietaryPreference" id="dietaryPreference">
+                                                    <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}" name="dietaryPreference">
                                                 </div>
-                                                <input type="hidden" id="dietaryPreference2" name="dietaryPreferenceValue" value="">
                                                 <span class="status"></span>
                                             </div>
                                             <div class="customize-form-group edit">
                                                 <label >睡眠状况：</label>
                                                 <div class="input-groups" th:with="type=${@dict.getType('sys_select_dtp_ysfw_smzk')}" id="sleepConditionDiv">
-                                                    <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}" th:checked="${dict.dictLabel}==${sleepCondition}"  name="sleepCondition" id="sleepCondition">
+                                                    <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}" name="sleepCondition">
                                                 </div>
-                                                <input type="hidden" id="sleepCondition2" name="sleepConditionValue" value="">
                                                 <span class="status"></span>
                                             </div>
                                         </div>
@@ -492,21 +489,14 @@
                                          <strong>治疗手段</strong>
                                          <div class="customize-search-form">
                                              <div class="customize-form-group edit">
-                                                 <span style="width: 150px;position: absolute; top: 25px; left: 0;  ">多个治疗方案原因描述：</span>
-                                                 <span class="status"></span>
-                                                 <span class="status"></span>
-                                                 <span class="status"></span>
-                                                 <div class="input-groups" style="width: auto;height: 130px">
-                                                     <textarea id="multipleTreatmentReasonsDescription" style="width: auto;height: 150px ;"
+                                                 <div style="display: flex;">
+                                                     <label>多个治疗方案原因描述:</label>
+                                                     <textarea id="multipleTreatmentReasonsDescription" style="width: auto;height: 140px ;border: 2px solid ;"
                                                                name="multipleTreatmentReasonsDescription" placeholder="治疗方案原因描述"
                                                                rows="5" cols="185" th:text="${multipleTreatmentReasonsDescription}"></textarea>
                                                  </div>
                                              </div>
                                          </div>
-                                         <div class="customize-search-form">
-                                             <div class="customize-form-group edit">
-                                             </div>
-                                         </div>
                                      </div>
                                  </div>
                                  <div id="tab-26" class="tab-pane fade in active">
@@ -514,23 +504,24 @@
                                          <strong>用药情况 </strong>
                                          <div class="customize-search-form">
                                              <div class="customize-form-group edit">
-                                                 <span style="width: 100px;position: absolute; top: 25px; left: 0;  ">用药情况：</span>
-                                                 <span class="status"></span>
-                                                 <span class="status"></span>
-                                                 <table id="yyqkTable" style="width: 480px;">
-                                                     <thead>
-                                                     <tr>
-                                                         <th>序号</th>
-                                                         <th>用药情况</th>
-                                                         <th>用药类型</th>
-                                                         <th>操作</th>
-                                                         <th><button type="button"  data-toggle="modal" data-target="#myModal2" class="btn-primary">新增</button></th>
-                                                     </tr>
-                                                     </thead>
-                                                     <tbody id="yyqkTableBody">
-                                                     <!-- 表格行将在这里动态添加 -->
-                                                     </tbody>
-                                                 </table>
+                                                 <div style="display: flex;">
+                                                     <label>用药情况:</label>
+                                                     <table id="yyqkTable" style="width: 480px;">
+                                                         <thead>
+                                                         <tr>
+                                                             <th>序号</th>
+                                                             <th>用药情况</th>
+                                                             <th>用药类型</th>
+                                                             <th>操作</th>
+                                                             <th><button type="button"  data-toggle="modal" data-target="#myModal2" class="btn-primary">新增</button></th>
+                                                         </tr>
+                                                         </thead>
+                                                         <tbody id="yyqkTableBody">
+                                                         <!-- 表格行将在这里动态添加 -->
+                                                         </tbody>
+                                                     </table>
+                                                 </div>
+
                                                  <div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
                                                      <div class="modal-dialog">
                                                          <form class="form-horizontal" id="form-yyqk-add">
@@ -573,24 +564,25 @@
                                          <strong>其他信息</strong>
                                          <div class="customize-search-form">
                                              <div class="customize-form-group edit">
-                                                 <span style="width: 100px;position: absolute; top: 25px; left: 0;  ">联系人：</span>
-                                                 <span class="status"></span>
-                                                 <span class="status"></span>
-                                                 <table id="relationTable"  style="width: 580px;">
-                                                     <thead>
-                                                     <tr>
-                                                         <th>序号</th>
-                                                         <th>联系人电话</th>
-                                                         <th>联系人姓名</th>
-                                                         <th>联系人关系</th>
-                                                         <th>操作</th>
-                                                         <th><button type="button"  data-toggle="modal" data-target="#myModal3" class="btn-primary">新增</button></th>
-                                                     </tr>
-                                                     </thead>
-                                                     <tbody id="relationTableBody">
-                                                     <!-- 表格行将在这里动态添加 -->
-                                                     </tbody>
-                                                 </table>
+                                                 <div style="display: flex;">
+                                                     <label>联系人：</label>
+                                                     <table id="relationTable"  style="width: 580px;">
+                                                         <thead>
+                                                         <tr>
+                                                             <th>序号</th>
+                                                             <th>联系人电话</th>
+                                                             <th>联系人姓名</th>
+                                                             <th>联系人关系</th>
+                                                             <th>操作</th>
+                                                             <th><button type="button"  data-toggle="modal" data-target="#myModal3" class="btn-primary">新增</button></th>
+                                                         </tr>
+                                                         </thead>
+                                                         <tbody id="relationTableBody">
+                                                         <!-- 表格行将在这里动态添加 -->
+                                                         </tbody>
+                                                     </table>
+                                                 </div>
+
                                                  <div class="modal inmodal" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
                                                      <div class="modal-dialog">
                                                          <form class="form-horizontal" id="form-relation-add">
@@ -642,9 +634,8 @@
                                              <div class="customize-form-group edit">
                                                  <label>陪护人：</label>
                                                  <div class="input-groups" th:with="type=${@dict.getType('sys_select_dtp_ysfw_phr')}" id="caregiverDiv">
-                                                     <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}" name="caregiver" id="caregiver">
+                                                     <input type="checkbox" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}" name="caregiver">
                                                  </div>
-                                                 <input type="hidden" id="caregiver2" name="caregiverValue" value="">
                                              </div>
                                          </div>
                                      </div>
@@ -873,113 +864,39 @@
                 formData.delete(input.name);
             });
 
-            // 获取指定的 div
-            var targetInsuranceDiv = document.getElementById('targetInsuranceDiv');//基础表单 保险
-            var sleepConditionDiv = document.getElementById('sleepConditionDiv');//基础表单 睡眠状况
-            var dietaryPreferenceDiv = document.getElementById('dietaryPreferenceDiv');//基础表单 饮食偏好
-            var caregiverDiv = document.getElementById('caregiverDiv');//基础表单 陪护人
-
-            // 获取所有 class 为 icheckbox-blue 并且包含 checked 类的 div
-            var InsuranceDivs = targetInsuranceDiv.querySelectorAll('.icheckbox-blue.checked');
-            var sleepConditionDivs = sleepConditionDiv.querySelectorAll('.icheckbox-blue.checked');
-            var dietaryPreferenceDivs = dietaryPreferenceDiv.querySelectorAll('.icheckbox-blue.checked');
-            var caregiverDivs = caregiverDiv.querySelectorAll('.icheckbox-blue.checked');
-            var checkedValues = [];
-            var sleepConditionCheckedValues = [];
-            var dietaryPreferenceCheckedValues = [];
-            var caregiverCheckedValues = [];
-            if (sleepConditionDivs.length > 0) {
-                // 遍历所有符合条件的 div
-                sleepConditionDivs.forEach(function(div) {
-                    // 获取 div 内部的复选框
-                    var checkbox = div.querySelector('input[type="checkbox"]');
-                    if (checkbox) {
-                        // 如果复选框被选中，将其值添加到数组中
-                        sleepConditionCheckedValues.push(checkbox.value);
-                    }
-                });
-            }
-            if (dietaryPreferenceDivs.length > 0) {
-                // 遍历所有符合条件的 div
-                dietaryPreferenceDivs.forEach(function(div) {
-                    // 获取 div 内部的复选框
-                    var checkbox = div.querySelector('input[type="checkbox"]');
-                    if (checkbox) {
-                        // 如果复选框被选中，将其值添加到数组中
-                        dietaryPreferenceCheckedValues.push(checkbox.value);
-                    }
-                });
-            }
-            if (caregiverDivs.length > 0) {
-                // 遍历所有符合条件的 div
-                caregiverDivs.forEach(function(div) {
-                    // 获取 div 内部的复选框
-                    var checkbox = div.querySelector('input[type="checkbox"]');
-                    if (checkbox) {
-                        // 如果复选框被选中，将其值添加到数组中
-                        caregiverCheckedValues.push(checkbox.value);
-                    }
-                });
-            }
-            // 遍历所有符合条件的 div
-            InsuranceDivs.forEach(function(div) {
-                // 获取 div 内部的复选框
-                var checkbox = div.querySelector('input[type="checkbox"]');
-                if (checkbox) {
-                    // 如果复选框被选中，将其值添加到数组中
-                    checkedValues.push(checkbox.value);
-                }
+            var selectedInsurances = []; // 保险
+            var selectedSleepCondition = []; //睡眠状况
+            var selectedDietaryPreference = []; // 饮食偏好
+            var selectedCaregiver = []; // 陪护人
+            $('input[name="insurance2"]:checked').each(function() {
+                selectedInsurances.push($(this).val());
+            });
+            $('input[name="sleepCondition"]:checked').each(function() {
+                selectedSleepCondition.push($(this).val());
+            });
+            $('input[name="dietaryPreference"]:checked').each(function() {
+                selectedDietaryPreference.push($(this).val());
+            });
+            $('input[name="caregiver"]:checked').each(function() {
+                selectedCaregiver.push($(this).val());
             });
-            if (InsuranceDivs.length === 0) {
+
+            if (selectedInsurances.length === 0) {
                 $('#insurance-error').show();
                 return false;
             } else {
                 $('#insurance-error').hide();
             }
-            if (checkedValues) {
-                // 将选中的值合并成一个字符串
-                var combinedValue = checkedValues.join(',');
-                // 设置隐藏字段的值
-                $('#insuranceValue2').val(combinedValue);
-            } else {
-                // 如果没有选中任何值，设置为空字符串
-                $('#insuranceValue2').val('');
-            }
-            if (sleepConditionCheckedValues) {
-                // 将选中的值合并成一个字符串
-                var sleepCondition = sleepConditionCheckedValues.join(',');
-                // 设置隐藏字段的值
-                $('#sleepCondition2').val(sleepCondition);
-            } else {
-                // 如果没有选中任何值，设置为空字符串
-                $('#sleepCondition2').val('');
-            }
-            if (dietaryPreferenceCheckedValues) {
-                // 将选中的值合并成一个字符串
-                var dietaryPreference = dietaryPreferenceCheckedValues.join(',');
-                // 设置隐藏字段的值
-                $('#dietaryPreference2').val(dietaryPreference);
-            } else {
-                // 如果没有选中任何值，设置为空字符串
-                $('#dietaryPreference2').val('');
-            }
-            if (caregiverCheckedValues) {
-                // 将选中的值合并成一个字符串
-                var caregiver = caregiverCheckedValues.join(',');
-                // 设置隐藏字段的值
-                $('#caregiver2').val(caregiver);
-            } else {
-                // 如果没有选中任何值，设置为空字符串
-                $('#caregiver2').val('');
-            }
             if ($.validate.form("form-server-edit")) {
                 var data = $("#form-server-edit").serializeArray();
                 // 获取 textarea 的值
                 var textareaValue = document.getElementById('multipleTreatmentReasonsDescription').value;
                 data.push({name:"multipleTreatmentReasonsDescription",value:textareaValue})
-                // 获取 caregiver2 的值
-                var caregiver2 = document.getElementById('caregiver2').value;
-                data.push({name:"caregiverValue",value:caregiver2})
+
+                data.push({name:"insuranceValue",value:selectedInsurances.join(',')})
+                data.push({name:"dietaryPreferenceValue",value:selectedDietaryPreference.join(',')})
+                data.push({name:"sleepConditionValue",value:selectedSleepCondition.join(',')})
+                data.push({name:"caregiverValue",value:selectedCaregiver.join(',')})
 
                 // 遍历 data 数组，查找 realNameStatus flipStatus 字段
                 var realNameStatus = null;
@@ -1099,8 +1016,8 @@
                 var insurances = insuranceList.split(',');
                 $.each(insurances, function(index, value) {
                     var checkbox = $('input[name="insurance2"][value="'+value.trim()+'"]');
-                    checkbox.append('div class="icheckbox-blue"');
-                  checkbox.closest('.icheckbox-blue').addClass('checked');
+                    // 选中复选框
+                    checkbox.prop('checked', true);
                 });
             }
             /*<![CDATA[*/
@@ -1114,8 +1031,7 @@
                 var caregiver = caregiverList.split(',');
                 $.each(caregiver, function(index, value) {
                     var checkbox = $('input[name="caregiver"][value="'+value.trim()+'"]');
-                    checkbox.append('div class="icheckbox-blue"');
-                    checkbox.closest('.icheckbox-blue').addClass('checked');
+                    checkbox.prop('checked', true);
                 });
             }
             /*<![CDATA[*/
@@ -1128,9 +1044,9 @@
             function checkSleepCondition(sleepConditionList) {
                 var sleepCondition = sleepConditionList.split(',');
                 $.each(sleepCondition, function(index, value) {
+                    var trimmedValue = value.trim();
                     var checkbox = $('input[name="sleepCondition"][value="'+value.trim()+'"]');
-                    checkbox.append('div class="icheckbox-blue"');
-                    checkbox.closest('.icheckbox-blue').addClass('checked');
+                    checkbox.prop('checked', true);
                 });
             }
             /*<![CDATA[*/
@@ -1143,9 +1059,9 @@
             function checkDietaryPreference(dietaryPreferenceList) {
                 var dietaryPreference = dietaryPreferenceList.split(',');
                 $.each(dietaryPreference, function(index, value) {
+                    var trimmedValue = value.trim();
                     var checkbox = $('input[name="dietaryPreference"][value="'+value.trim()+'"]');
-                    checkbox.append('div class="icheckbox-blue"');
-                    checkbox.closest('.icheckbox-blue').addClass('checked');
+                    checkbox.prop('checked', true);
                 });
             }
             /*<![CDATA[*/
@@ -1201,7 +1117,7 @@
                  '<td>' + item.contactPhone + '</td>' +
                  '<td>' + item.contactName + '</td>' +
                  '<td>' + item.contactRelationship + '</td>' +
-                 '<td><button onclick="deleteRow(this)">删除</button></td>' +
+                 '<td><button class="btn-danger" onclick="deleteRow(this)">删除</button></td>' +
                  '</tr>';
              $('#relationTableBody').append(row);
          });
@@ -1214,7 +1130,7 @@
                  '<td>' + (index + 1) + '</td>' +
                  '<td>' + item.medicationDescription + '</td>' +
                  '<td>' + item.medicationType + '</td>' +
-                 '<td><button onclick="deleteRow(this)">删除</button></td>' +
+                 '<td><button class="btn-danger" onclick="deleteRow(this)">删除</button></td>' +
                  '</tr>';
              $('#yyqkTableBody').append(row);
          });
@@ -1227,7 +1143,7 @@
                  '<td>' + (index + 1) + '</td>' +
                  '<td>' + item.disease + '</td>' +
                  '<td>' + item.member + '</td>' +
-                 '<td><button onclick="deleteRow(this)">删除</button></td>' +
+                 '<td><button class="btn-danger" onclick="deleteRow(this)">删除</button></td>' +
                  '</tr>';
              $('#familyHistoryTableBody').append(row);
          });