feat(risk_history): 添加审批意见弹窗功能- 新增审批意见弹窗样式和相关元素- 实现打开和关闭弹窗的 JavaScript 函数- 修改提交审批意见的逻辑，优先使用弹窗中的内容- 将原审批意见文本框设置为禁用状态，通过弹窗进行编辑-优化审批意见提交按钮的布局和样式

public/bpic_eli/risk_history.html

@@ -39,6 +39,93 @@
         position: relative;
       }
 
+      #error-msg {
+        color: red;
+        margin-top: 5px;
+        font-size: 14px;
+      }
+
+      /* 审批意见弹窗样式 */
+      #examDialogTextarea {
+        //width: 100%;
+        height: 120px;
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        resize: vertical;
+        font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
+          'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+        font-size: 14px;
+        margin: 5px;
+      }
+
+      #examDialogErrorMessage {
+        margin: 0 5px 5px 10px;
+        text-align: left;
+      }
+
+      #examDialogOverlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+        display: none;
+      }
+
+      #examDialog {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 500px;
+        max-width: 90%;
+        background: #fff;
+        border-radius: 4px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        z-index: 1000;
+        display: none;
+      }
+
+      #examDialog .title {
+        padding: 15px;
+        border-bottom: 1px solid #e8e8e8;
+        position: relative;
+        font-size: 16px;
+        font-weight: 500;
+      }
+
+      #examDialog .dialog-close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        border: none;
+        background: transparent;
+        font-size: 18px;
+        cursor: pointer;
+        color: #999;
+      }
+
+      #examDialog .dialog-action {
+        padding: 15px;
+        text-align: right;
+        border-top: 1px solid #e8e8e8;
+      }
+
+      #examDialog .dialog-action button {
+        margin-left: 10px;
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: 1px solid #dcdfe6;
+        cursor: pointer;
+      }
+
       #error-msg {
         text-align: left;
         color: Red;
@@ -610,9 +697,10 @@
         background: #3498db;
         color: white;
         border: 1px solid #3498db;
-        padding: 10px 20px;
+        padding: 5px 10px;
         border-radius: 8px;
-        float: right;
+        //float: right;
+        margin-left: 50px;
         cursor: pointer;
       }
     </style>
@@ -675,11 +763,11 @@
           </div>
           <div class="flex">
             <span>审批意见</span>
-            <textarea id="exam-textarea"></textarea>
+            <textarea id="exam-textarea" disabled></textarea>
             <div id="examErrorMessage"></div>
           </div>
 
-          <button onClick="submitExam()">修改审批意见</button>
+          <button onClick="openExamDialog()">修改审批意见</button>
 
           <div style="clear:both"></div>
         </div>
@@ -729,6 +817,35 @@
         </button>
       </div>
     </div>
+
+    <!-- 审批意见弹窗 -->
+    <div
+      class="dialog-overlay"
+      id="examDialogOverlay"
+      onclick="closeExamDialog()"
+    ></div>
+    <div class="dialog" id="examDialog" style="display: none;">
+      <div class="title">
+        <span>修改审批意见</span>
+        <button class="dialog-close" onclick="closeExamDialog()" type="button">
+          ×
+        </button>
+      </div>
+      <textarea id="examDialogTextarea" placeholder="请输入审批意见"></textarea>
+      <div id="examDialogErrorMessage"></div>
+      <div class="dialog-action">
+        <button
+          style="background: #3498db; color: white; border: 1px solid #3498db;"
+          onclick="submitExam()"
+          type="button"
+        >
+          确定
+        </button>
+        <button onclick="closeExamDialog()" type="button">
+          取消
+        </button>
+      </div>
+    </div>
     <!-- 全局 Toast 提示 -->
     <div id="globalToast" class="toast" style="display:none;">
       <span id="toastMessage"></span>
@@ -1589,30 +1706,98 @@
       // 提交审批意见功能
       function submitExam() {
         var exam = document.getElementById('exam-textarea')
+        var examDialogTextarea = document.getElementById('examDialogTextarea')
         var examErrorMessage = document.getElementById('examErrorMessage')
+        var examDialogErrorMessage = document.getElementById(
+          'examDialogErrorMessage'
+        )
+
+        // 优先使用弹窗中的文本框
+        var examValue =
+          examDialogTextarea && examDialogTextarea.value
+            ? examDialogTextarea.value
+            : exam.value
+
         examErrorMessage.innerHTML = ''
-        if (!exam.value) {
-          examErrorMessage.innerHTML =
-            '<span style="color:red;margin-left: 70px" >请填写审批意见</span>'
+        examDialogErrorMessage.innerHTML = ''
+
+        if (!examValue) {
+          if (
+            examDialogTextarea &&
+            examDialogTextarea.style.display !== 'none'
+          ) {
+            // 在弹窗中显示错误
+            examDialogErrorMessage.innerHTML =
+              '<span style="color:red;margin-left: 10px" >请填写审批意见</span>'
+          } else {
+            // 在原位置显示错误
+            examErrorMessage.innerHTML =
+              '<span style="color:red;margin-left: 10px" >请填写审批意见</span>'
+          }
           return false
         }
+
         // TODO: 实现审批意见提交逻辑
         DOMHandler.setServiceUrl(
           Config.serviceUrl.riskCheckRecordEx,
           JSON.stringify({
             resultId: StateManager.resultId,
-            approveOpinion: exam.value
+            approveOpinion: examValue
           }),
           function(res) {
             if (res) {
               var result = JSON.parse(res)
               if (result.content.result === '0') {
+                // 更新原textarea的值
+                if (exam) {
+                  exam.value = examValue
+                }
                 alert('修改审批意见成功')
+                closeExamDialog() // 关闭弹窗
               }
             }
           }
         )
       }
+
+      // 打开审批意见弹窗
+      function openExamDialog() {
+        var exam = document.getElementById('exam-textarea')
+        var examDialog = document.getElementById('examDialog')
+        var examDialogOverlay = document.getElementById('examDialogOverlay')
+        var examDialogTextarea = document.getElementById('examDialogTextarea')
+
+        // 将原textarea的值设置到弹窗textarea中
+        if (exam && examDialogTextarea) {
+          examDialogTextarea.value = exam.value
+        }
+
+        // 显示弹窗
+        if (examDialog && examDialogOverlay) {
+          examDialog.style.display = 'block'
+          examDialogOverlay.style.display = 'block'
+        }
+      }
+
+      // 关闭审批意见弹窗
+      function closeExamDialog() {
+        var examDialog = document.getElementById('examDialog')
+        var examDialogOverlay = document.getElementById('examDialogOverlay')
+        var examDialogErrorMessage = document.getElementById(
+          'examDialogErrorMessage'
+        )
+
+        // 隐藏弹窗
+        if (examDialog && examDialogOverlay) {
+          examDialog.style.display = 'none'
+          examDialogOverlay.style.display = 'none'
+        }
+
+        // 清空错误信息
+        if (examDialogErrorMessage) {
+          examDialogErrorMessage.innerHTML = ''
+        }
+      }
     </script>
   </body>
 </html>