476 住院医生工作-检查申请单界面缺失核心临床字段（紧急程度、过敏史、检查目的等）

openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/medicalExaminations.vue

@@ -5,36 +5,25 @@
 -->
 <template>
   <div class="medicalExaminations-container">
-    <!-- 顶部标题栏 -->
-    <div class="form-header">
-      <div class="header-left">
-        <el-icon class="header-icon"><Files /></el-icon>
-        <span class="header-title">检查申请单</span>
-      </div>
-      <div class="header-right">
-        <span class="urgency-label">紧急程度</span>
-        <el-radio-group v-model="form.urgencyLevel" @change="handleUrgencyChange" class="urgency-radio-group">
+    <!-- 主体内容 -->
+    <div class="form-body">
+      <!-- 右上角：紧急程度 -->
+      <div class="urgency-bar">
+        <span class="urgency-bar-label">紧急程度：</span>
+        <el-radio-group v-model="form.urgencyLevel" @change="handleUrgencyChange" size="small">
           <el-radio-button label="routine">普通</el-radio-button>
           <el-radio-button label="emergency">急诊</el-radio-button>
         </el-radio-group>
         <transition name="el-fade-in-linear">
-          <span v-if="form.urgencyLevel === 'emergency'" class="emergency-tip">
+          <span v-if="form.urgencyLevel === 'emergency'" class="emergency-tip-inline">
             <el-icon><WarningFilled /></el-icon>
-            急诊单将进入绿色通道
+            绿色通道
           </span>
         </transition>
       </div>
-    </div>
-
-    <!-- 主体内容区 -->
-    <div class="form-body">
       <!-- 选择检查项目 -->
       <div class="section-card">
-        <div class="section-header">
-          <el-icon><Document /></el-icon>
-          <span>选择检查项目</span>
-        </div>
-        <div v-loading="loading" class="transfer-wrapper">
+        <div class="transfer-wrapper">
           <el-transfer
             v-model="transferValue"
             :data="applicationList"
@@ -45,165 +34,150 @@
         </div>
       </div>
 
-      <!-- 申请信息 -->
-      <div class="section-card">
-        <div class="section-header">
-          <el-icon><EditPen /></el-icon>
-          <span>申请信息</span>
-        </div>
+      <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="info-form">
+        <!-- 第一行：发往科室 + 紧急程度 + 期望检查时间 -->
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item label="发往科室" prop="targetDepartment">
+              <el-tree-select
+                clearable
+                style="width: 100%"
+                v-model="form.targetDepartment"
+                filterable
+                :data="orgOptions"
+                :props="{ value: 'id', label: 'name', children: 'children' }"
+                value-key="id"
+                check-strictly
+                placeholder="请选择执行科室"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="期望检查时间">
+              <el-date-picker
+                v-model="form.expectedExaminationTime"
+                type="datetime"
+                placeholder="默认当前时间"
+                style="width: 100%"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD HH:mm"
+                :disabled-date="disabledFutureDate"
+                :default-value="new Date()"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-          <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="info-form">
-            <!-- 第一行：发往科室 + 期望检查时间 -->
-            <el-row :gutter="16">
-              <el-col :span="12">
-                <el-form-item label="发往科室" prop="targetDepartment">
-                  <el-tree-select
-                    clearable
-                    style="width: 100%"
-                    v-model="form.targetDepartment"
-                    filterable
-                    :data="orgOptions"
-                    :props="{ value: 'id', label: 'name', children: 'children' }"
-                    value-key="id"
-                    check-strictly
-                    placeholder="请选择执行科室"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="期望检查时间">
-                  <el-date-picker
-                    v-model="form.expectedExaminationTime"
-                    type="datetime"
-                    placeholder="默认当前时间"
-                    style="width: 100%"
-                    value-format="YYYY-MM-DD HH:mm:ss"
-                    format="YYYY-MM-DD HH:mm"
-                    :disabled-date="disabledFutureDate"
-                    :default-value="new Date()"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
+        <!-- 第二行：症状 + 体征 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="症状">
+              <el-input v-model="form.symptom" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者症状" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="体征">
+              <el-input v-model="form.sign" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者体征" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-            <!-- 第二行：症状 + 体征 -->
-            <el-row :gutter="16">
-              <el-col :span="12">
-                <el-form-item label="症状">
-                  <el-input v-model="form.symptom" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者症状" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="体征">
-                  <el-input v-model="form.sign" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者体征" />
-                </el-form-item>
-              </el-col>
-            </el-row>
+        <!-- 第三行：临床诊断 + 其他诊断 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="临床诊断">
+              <el-input disabled v-model="form.clinicalDiagnosis" placeholder="自动带入主诊断" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="其他诊断">
+              <el-input disabled v-model="form.otherDiagnosis" placeholder="自动带入其他诊断" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-            <!-- 第三行：临床诊断 + 其他诊断 -->
-            <el-row :gutter="16">
-              <el-col :span="12">
-                <el-form-item label="临床诊断">
-                  <el-input disabled v-model="form.clinicalDiagnosis" placeholder="自动带入主诊断" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="其他诊断">
-                  <el-input disabled v-model="form.otherDiagnosis" placeholder="自动带入其他诊断" />
-                </el-form-item>
-              </el-col>
-            </el-row>
+        <!-- 第四行：相关结果 + 注意事项 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="相关结果">
+              <el-input v-model="form.relatedResult" autocomplete="off" type="textarea" :rows="2" placeholder="请输入相关检验结果" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="注意事项">
+              <el-input v-model="form.attention" autocomplete="off" type="textarea" :rows="2" placeholder="请输入检查注意事项" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-            <!-- 第四行：相关结果 + 注意事项 -->
-            <el-row :gutter="16">
-              <el-col :span="12">
-                <el-form-item label="相关结果">
-                  <el-input v-model="form.relatedResult" autocomplete="off" type="textarea" :rows="2" placeholder="请输入相关检验结果" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="注意事项">
-                  <el-input v-model="form.attention" autocomplete="off" type="textarea" :rows="2" placeholder="请输入检查注意事项" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-
-        <!-- 过敏史卡片 -->
-        <div class="section-card allergy-card">
-          <div class="section-header">
-            <el-icon><Warning /></el-icon>
-            <span>过敏史</span>
-            <span v-if="form.allergyHistory" class="header-count">{{ form.allergyHistory.length }}字</span>
-          </div>
-          <div class="allergy-content">
-            <div class="allergy-input-row">
+        <!-- 第五行：检查目的 + 病史摘要 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="检查目的" prop="examinationPurpose">
               <el-input
-                v-model="form.allergyHistory"
+                v-model="form.examinationPurpose"
                 autocomplete="off"
                 type="textarea"
                 :rows="2"
-                :class="{ 'allergy-danger': isSevereAllergy }"
-                placeholder="如：造影剂过敏史等（系统将自动从患者档案带入）"
+                maxlength="200"
+                show-word-limit
+                placeholder="请输入检查目的，如：明确诊断、术后复查、疗效评估等"
               />
-              <span v-if="isSevereAllergy" class="allergy-severe-tag">
-                <el-icon><WarningFilled /></el-icon>
-                严重过敏
-              </span>
-            </div>
-            <div class="allergy-confirm">
-              <el-checkbox v-model="form.allergyConfirmed" size="small">
-                已通过口头询问确认无过敏史
-              </el-checkbox>
-            </div>
-          </div>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="病史摘要" prop="medicalHistorySummary">
+              <div class="history-field-wrapper">
+                <el-input
+                  v-model="form.medicalHistorySummary"
+                  autocomplete="off"
+                  type="textarea"
+                  :rows="2"
+                  placeholder="请简要描述患者病史摘要"
+                />
+                <el-button
+                  type="primary"
+                  plain
+                  size="small"
+                  class="history-sync-btn"
+                  @click="handleSyncHistory"
+                  :loading="syncingHistory"
+                >
+                  <el-icon><Refresh /></el-icon>
+                  同步
+                </el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <!-- 检查目的卡片 -->
-        <div class="section-card purpose-card">
-          <div class="section-header">
-            <el-icon><Aim /></el-icon>
-            <span>检查目的</span>
-            <span class="required-mark">必填</span>
-          </div>
-          <el-input
-            v-model="form.examinationPurpose"
-            autocomplete="off"
-            type="textarea"
-            :rows="2"
-            maxlength="200"
-            show-word-limit
-            placeholder="请输入检查目的，如：明确诊断、术后复查、疗效评估等"
-          />
-        </div>
-
-        <!-- 病史摘要卡片 -->
-        <div class="section-card history-card">
-          <div class="section-header">
-            <el-icon><DocumentCopy /></el-icon>
-            <span>病史摘要</span>
-            <span class="required-mark">必填</span>
-            <el-button
-              type="primary"
-              plain
-              size="small"
-              class="sync-btn"
-              @click="handleSyncHistory"
-              :loading="syncingHistory"
-            >
-              <el-icon><Refresh /></el-icon>
-              同步现病史/体征
-            </el-button>
-          </div>
-          <el-input
-            v-model="form.medicalHistorySummary"
-            autocomplete="off"
-            type="textarea"
-            :rows="3"
-            placeholder="请简要描述患者病史摘要"
-          />
-        </div>
-      </div>
+        <!-- 第六行：过敏史 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <el-form-item label="过敏史">
+              <div class="allergy-wrapper">
+                <el-input
+                  v-model="form.allergyHistory"
+                  autocomplete="off"
+                  type="textarea"
+                  :rows="1"
+                  :class="{ 'allergy-danger': isSevereAllergy }"
+                  placeholder="如：造影剂过敏史等（系统将自动从患者档案带入）"
+                />
+                <div class="allergy-actions">
+                  <span v-if="isSevereAllergy" class="allergy-severe-tag-inline">
+                    <el-icon><WarningFilled /></el-icon>
+                    严重过敏
+                  </span>
+                  <el-checkbox v-model="form.allergyConfirmed" size="small">
+                    已通过口头询问确认无过敏史
+                  </el-checkbox>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
     </div>
 
     <!-- 急诊确认弹窗 -->
@@ -228,6 +202,7 @@
 
 <script setup name="MedicalExaminations">
 import {getCurrentInstance, onMounted, reactive, ref, watch, computed, nextTick} from 'vue';
+import dayjs from 'dayjs';
 import {patientInfo} from '../../../store/patient.js';
 import {getDepartmentList} from '@/api/public.js';
 import {getEncounterDiagnosis} from '../../api.js';
@@ -355,7 +330,7 @@ const form = reactive({
   allergyHistory: '',
   examinationPurpose: '',
   medicalHistorySummary: '',
-  expectedExaminationTime: '',
+  expectedExaminationTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
   symptom: '',
   sign: '',
   clinicalDiagnosis: '',
@@ -622,7 +597,7 @@ const resetForm = () => {
   form.allergyHistory = '';
   form.examinationPurpose = '';
   form.medicalHistorySummary = '';
-  form.expectedExaminationTime = '';
+  form.expectedExaminationTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
   form.symptom = '';
   form.sign = '';
   form.clinicalDiagnosis = '';
@@ -705,81 +680,13 @@ $bg-color: #f5f7fa;
   background: $bg-color;
   font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 
-  // 顶部标题栏
-  .form-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 14px 20px;
-    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
-    border-bottom: 1px solid $border-color;
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-
-      .header-icon {
-        font-size: 24px;
-        color: $primary-color;
-      }
-
-      .header-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: $text-primary;
-        letter-spacing: 1px;
-      }
-    }
-
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-
-      .urgency-label {
-        font-size: 13px;
-        color: $text-secondary;
-        font-weight: 500;
-      }
-
-      .urgency-radio-group {
-        :deep(.el-radio-button__inner) {
-          border-radius: 4px;
-          margin: 0;
-        }
-
-        :deep(.el-radio-button:first-child .el-radio-button__inner) {
-          border-radius: 4px;
-        }
-
-        :deep(.el-radio-button:last-child .el-radio-button__inner) {
-          border-radius: 4px;
-        }
-      }
-
-      .emergency-tip {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        color: $danger-color;
-        font-size: 13px;
-        font-weight: 500;
-        background: #fef0f0;
-        padding: 4px 10px;
-        border-radius: 4px;
-        border: 1px solid #fde2e2;
-      }
-    }
-  }
-
-  // 主体内容区
+  // 主体内容区 - 紧凑布局
   .form-body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    padding: 16px;
+    gap: 8px;
+    padding: 8px 12px;
     overflow-y: auto;
 
     &::-webkit-scrollbar {
@@ -796,47 +703,30 @@ $bg-color: #f5f7fa;
     }
   }
 
-  // 卡片通用样式
+  // 紧急程度栏 - 右上角
+  .urgency-bar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 4px 0;
+    margin-bottom: 4px;
+  }
+
+  .urgency-bar-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: $text-regular;
+    white-space: nowrap;
+  }
+
+  // 卡片通用样式 - 紧凑
   .section-card {
     background: #fff;
-    border-radius: 8px;
-    padding: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    border: 1px solid rgba(0, 0, 0, 0.04);
-
-    .section-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding-bottom: 12px;
-      margin-bottom: 12px;
-      border-bottom: 1px dashed $border-color;
-      font-size: 14px;
-      font-weight: 600;
-      color: $text-primary;
-
-      > i {
-        font-size: 16px;
-        color: $primary-color;
-      }
-
-      .header-count {
-        margin-left: auto;
-        font-size: 12px;
-        font-weight: 400;
-        color: $text-secondary;
-      }
-
-      .required-mark {
-        font-size: 12px;
-        font-weight: 500;
-        color: #fff;
-        background: $danger-color;
-        padding: 2px 8px;
-        border-radius: 10px;
-        margin-left: 4px;
-      }
-    }
+    border-radius: 6px;
+    padding: 8px;
+    border: 1px solid #e4e7ed;
+    margin-bottom: 4px;
   }
 
   .transfer-wrapper {
@@ -850,10 +740,23 @@ $bg-color: #f5f7fa;
     display: flex !important;
     flex-direction: row !important;
   }
-  // 信息表单
+
+  // 穿梭框按钮垂直居中
+  :deep(.el-transfer__buttons) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 4px;
+  }
+
+  :deep(.el-transfer__button) {
+    margin: 4px 0;
+  }
+  // 信息表单 - 紧凑
   .info-form {
     :deep(.el-form-item) {
-      margin-bottom: 14px;
+      margin-bottom: 6px;
 
       .el-form-item__label {
         font-size: 13px;
@@ -883,53 +786,10 @@ $bg-color: #f5f7fa;
     }
   }
 
-  // 过敏史卡片
-  .allergy-card {
-    .allergy-content {
-      .allergy-input-row {
-        position: relative;
-
-        :deep(.el-textarea) {
-          .el-textarea__inner.allergy-danger {
-            border-color: $danger-color !important;
-            background-color: #fef0f0;
-          }
-        }
-      }
-
-      .allergy-severe-tag {
-        position: absolute;
-        right: 12px;
-        top: 8px;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        color: $danger-color;
-        font-size: 13px;
-        font-weight: 600;
-        background: #fef0f0;
-        padding: 3px 10px;
-        border-radius: 12px;
-        border: 1px solid #fde2e2;
-      }
-
-      .allergy-confirm {
-        margin-top: 10px;
-        padding-left: 4px;
-      }
-    }
-  }
-
-  // 病史摘要卡片
-  .history-card {
-    .section-header {
-      .sync-btn {
-        margin-left: auto;
-        font-size: 12px;
-        padding: 6px 12px;
-        border-radius: 16px;
-      }
-    }
+  // 过敏史危险输入样式
+  :deep(.el-textarea__inner.allergy-danger) {
+    border-color: $danger-color !important;
+    background-color: #fef0f0;
   }
 
   // 急诊确认弹窗
@@ -968,4 +828,64 @@ $bg-color: #f5f7fa;
 .fade-in-linear-leave-to {
   opacity: 0;
 }
+
+/* 紧急程度行内布局 */
+.urgency-inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.emergency-tip-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: $danger-color;
+  font-size: 11px;
+  font-weight: 500;
+  background: #fef0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+/* 过敏史包装 */
+.allergy-wrapper {
+  width: 100%;
+}
+
+.allergy-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.allergy-severe-tag-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: $danger-color;
+  font-size: 11px;
+  font-weight: 600;
+  background: #fef0f0;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+
+/* 病史摘要同步按钮 */
+.history-field-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.history-sync-btn {
+  position: absolute;
+  right: 4px;
+  top: -28px;
+  font-size: 11px;
+  padding: 2px 8px;
+  height: 24px;
+}
 </style>