优化医生会诊单页面布局

src/views/his/scrmPrescribe/DoctorAdviceDialog.vue

@@ -2,7 +2,8 @@
   <el-dialog
     :title="dialogTitle"
     :visible.sync="dialogVisible"
-    width="800px"
+    width="1000px"
+    top="5vh"
     :close-on-click-modal="false"
     @close="handleClose"
   >
@@ -10,37 +11,27 @@
     <div v-if="customerInfo && Object.keys(customerInfo).length" class="customer-info-section">
       <div class="section-title">患者信息</div>
       <el-row :gutter="20">
-        <el-col :span="12">
-          <span class="info-label">患者姓名：</span>
+        <el-col :span="4">
+          <span class="info-label">姓名：</span>
           <span class="info-value">{{ customerInfo.customerName || '-' }}</span>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="4">
           <span class="info-label">性别：</span>
           <span class="info-value">{{ sexText }}</span>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
+        <el-col :span="4">
           <span class="info-label">年龄：</span>
           <span class="info-value">{{ customerInfo.age || '-' }}</span>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="6">
           <span class="info-label">电话：</span>
           <span class="info-value">{{ customerInfo.phone || '-' }}</span>
         </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
+        <el-col :span="6">
           <span class="info-label">会诊时间：</span>
           <span class="info-value">{{ customerInfo.createTime | formatDate }}</span>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <span class="info-label">患者病情主诉：</span>
-          <span class="info-value">{{ customerInfo.patientMainComplaint || '-' }}</span>
-        </el-col>
-      </el-row>
       <el-row :gutter="20">
         <el-col :span="24">
           <span class="info-label">现病史：</span>
@@ -59,13 +50,19 @@
           <span class="info-value">{{ customerInfo.currentMedication || '-' }}</span>
         </el-col>
       </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <span class="info-label">患者主诉：</span>
+          <span class="info-value">{{ customerInfo.patientMainComplaint || '-' }}</span>
+        </el-col>
+      </el-row>
       <el-divider />
     </div>
 
     <!-- 客户问答信息展示区 -->
     <div v-if="questionAnswers.length > 0" class="question-answer-section">
       <div class="section-title">患者病情问答</div>
-      <div class="qa-list">
+      <div class="qa-list" style="max-height: 120px; overflow-y: auto;">
         <div v-for="(item, idx) in questionAnswers" :key="idx" class="qa-item">
           <span class="qa-title">{{ item.title }}</span>
           <span class="qa-answer">{{ item.answerText || '未回答' }}</span>
@@ -76,25 +73,41 @@
 
     <!-- 医生建议及处置表单 -->
     <div class="section-title">医生建议及处置</div>
-    <el-form :model="formData" :rules="formRules" ref="adviceForm" label-width="150px">
-      <!-- 诊断 -->
-      <el-form-item label="诊断" prop="diagnose">
-        <el-input v-model="formData.diagnose" type="textarea" :rows="4" placeholder="请输入诊断信息" :disabled="readonly" />
-      </el-form-item>
-      <!-- 舌诊、面诊、手诊 -->
-      <el-form-item label="舌诊、面诊、手诊" prop="facialDiagnosis">
-        <el-input v-model="formData.facialDiagnosis" type="textarea" :rows="4" placeholder="请输入舌诊、面诊、手诊结果" :disabled="readonly" />
-      </el-form-item>
-      <!-- 饮食运动建议 -->
-      <el-form-item label="饮食运动建议" prop="foodAndExerciseGuidance">
-        <el-input v-model="formData.foodAndExerciseGuidance" type="textarea" :rows="4" placeholder="请输入饮食运动建议" :disabled="readonly" />
-      </el-form-item>
-      <!-- 治疗方面（动态表格） -->
+    <el-form :model="formData" :rules="formRules" ref="adviceForm" label-width="120px" size="small">
+      <!-- 诊断 + 舌诊（一行两列） -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="诊断" prop="diagnose">
+            <el-input v-model="formData.diagnose" type="textarea" :rows="4" placeholder="请输入诊断信息" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="舌诊,面诊,手诊" prop="facialDiagnosis">
+            <el-input v-model="formData.facialDiagnosis" type="textarea" :rows="4" placeholder="请输入舌诊、面诊、手诊结果" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 饮食运动建议 + 注意禁忌（一行两列） -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="饮食运动建议" prop="foodAndExerciseGuidance">
+            <el-input v-model="formData.foodAndExerciseGuidance" type="textarea" :rows="4" placeholder="请输入饮食运动建议" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="注意禁忌" prop="noteTaboos">
+            <el-input v-model="formData.noteTaboos" type="textarea" :rows="4" placeholder="请输入注意事项及禁忌" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 治疗方面（占满行，表格固定高度滚动） -->
       <el-form-item label="治疗方面" prop="healingList" required>
-        <div style="margin-bottom: 10px;" v-if="!readonly">
+        <div style="margin-bottom: 8px;" v-if="!readonly">
           <el-button type="primary" size="small" icon="el-icon-plus" @click="addHealingRow">新增一行</el-button>
         </div>
-        <el-table :data="formData.healingList" border stripe>
+        <el-table :data="formData.healingList" border stripe max-height="300">
           <el-table-column label="诊断内容" prop="diagnosisContent" min-width="200">
             <template slot-scope="scope">
               <el-input v-model="scope.row.diagnosisContent" placeholder="请输入诊断内容" size="small" :disabled="readonly" />
@@ -112,41 +125,38 @@
           </el-table-column>
         </el-table>
       </el-form-item>
-      <!-- 注意禁忌 -->
-      <el-form-item label="注意禁忌" prop="noteTaboos">
-        <el-input v-model="formData.noteTaboos" type="textarea" :rows="4" placeholder="请输入注意事项及禁忌" :disabled="readonly" />
-      </el-form-item>
 
+      <!-- 医生及药师信息（紧凑三列） -->
       <el-divider content-position="left">医生及药师信息</el-divider>
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="医生职称">
-            <el-input v-model="signInfo.doctorPosition" readonly disabled />
+          <el-form-item label="医生职称" label-width="80px">
+            <el-input v-model="signInfo.doctorPosition" readonly disabled size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="执业医师证号">
-            <el-input :value="displayLicenseNumber" readonly disabled />
+          <el-form-item label="执业医师证号" label-width="100px">
+            <el-input :value="displayLicenseNumber" readonly disabled size="small" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="药师签字">
-            <div v-if="signInfo.drugDoctorSignUrl" style="display: flex; align-items: center;">
-              <el-image :src="signInfo.drugDoctorSignUrl" style="width: 100px; height: 40px;" fit="contain" />
-              <span style="margin-left: 8px; color: #909399;">（药师：{{ signInfo.drugDoctorName || '' }}）</span>
+          <el-form-item label="执业医师签字" label-width="100px">
+            <div v-if="signInfo.doctorSignUrl" style="display: flex; align-items: center;">
+              <el-image :src="signInfo.doctorSignUrl" style="width: 80px; height: 30px;" fit="contain" />
+              <span style="margin-left: 6px; color: #606266; font-size: 12px;">（{{ signInfo.doctorName || '' }}）</span>
             </div>
-            <el-input v-else :value="signInfo.drugDoctorName || '暂无药师签名'" readonly disabled />
+            <el-input v-else :value="signInfo.doctorName || '暂无医生签名'" readonly disabled size="small" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="执业医师签字">
-            <div v-if="signInfo.doctorSignUrl" style="display: flex; align-items: center;">
-              <el-image :src="signInfo.doctorSignUrl" style="width: 100px; height: 40px;" fit="contain" />
-              <span style="margin-left: 8px; color: #909399;">（医生：{{ signInfo.doctorName || '' }}）</span>
+          <el-form-item label="药师签字" label-width="80px">
+            <div v-if="signInfo.drugDoctorSignUrl" style="display: flex; align-items: center;">
+              <el-image :src="signInfo.drugDoctorSignUrl" style="width: 80px; height: 30px;" fit="contain" />
+              <span style="margin-left: 6px; color: #606266; font-size: 12px;">（{{ signInfo.drugDoctorName || '' }}）</span>
             </div>
-            <el-input v-else :value="signInfo.doctorName || '暂无医生签名'" readonly disabled />
+            <el-input v-else :value="signInfo.drugDoctorName || '暂无药师签名'" readonly disabled size="small" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -181,8 +191,8 @@ export default {
     return {
       dialogVisible: false,
       submitLoading: false,
-      customerInfo: {},              // 存储客户基本信息
-      questionAnswers: [],           // 存储问答列表
+      customerInfo: {},
+      questionAnswers: [],
       formData: {
         diagnose: '',
         facialDiagnosis: '',
@@ -251,7 +261,7 @@ export default {
         }
         this.resetFormData();
         this.fetchSignInfo();
-        this.fetchCustomerInfoAndQuestions(); // 获取客户信息+问答
+        this.fetchCustomerInfoAndQuestions();
         this.fetchDoctorAdvice();
       }
     }
@@ -304,7 +314,6 @@ export default {
         this.$message.error('获取医生签名信息失败');
       });
     },
-    // 新方法：获取客户基本信息 + 问答列表
     fetchCustomerInfoAndQuestions() {
       if (!this.companyCustomerId) {
         this.customerInfo = {};
@@ -314,7 +323,6 @@ export default {
       getCustomerInfoAndQuestionAnswer(this.companyCustomerId).then(response => {
         const data = response.data;
         if (data) {
-          // 存储基本信息
           this.customerInfo = {
             customerName: data.customerName,
             sex: data.sex,
@@ -326,7 +334,6 @@ export default {
             allergyHistory: data.allergyHistory,
             currentMedication: data.currentMedication
           };
-          // 存储问答列表
           this.questionAnswers = data.customerQuestionAnswerVOList || [];
         } else {
           this.customerInfo = {};
@@ -338,7 +345,6 @@ export default {
         this.questionAnswers = [];
       });
     },
-    // 获取已保存的医生建议
     fetchDoctorAdvice() {
       getDoctorAdvice(this.prescribeId).then(response => {
         const data = response.data;
@@ -406,36 +412,36 @@ export default {
 }
 
 .customer-info-section {
-  margin-bottom: 20px;
+  margin-bottom: 14px;
   background-color: #f5f7fa;
-  padding: 12px 16px;
+  padding: 10px 16px;
   border-radius: 8px;
 }
 
 .question-answer-section {
-  margin-bottom: 20px;
+  margin-bottom: 14px;
   background-color: #f9f9f9;
-  padding: 12px 16px;
+  padding: 10px 16px;
   border-radius: 8px;
 }
 
 .section-title {
   font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 12px;
+  font-size: 15px;
+  margin-bottom: 10px;
   color: #303133;
 }
 
 .qa-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
 }
 
 .qa-item {
   display: flex;
   align-items: baseline;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .qa-title {
@@ -450,18 +456,42 @@ export default {
   font-weight: normal;
 }
 
-/* 新增的患者信息样式 */
 .info-label {
   display: inline-block;
-  width: 100px;
+  width: 70px;
   color: #606266;
   font-weight: 500;
+  font-size: 13px;
 }
 .info-value {
   color: #303133;
   word-break: break-all;
+  font-size: 13px;
 }
 .el-row {
-  margin-bottom: 6px;
+  margin-bottom: 4px;
+}
+
+/* ===== 全局输入框字体颜色加深（核心修改） ===== */
+
+/* 所有输入框字体深黑色（编辑 + 只读） */
+.el-input__inner,
+.el-textarea__inner {
+  color: #1a1a1a !important;
+}
+
+/* 只读/禁用状态：深黑字体 + 浅灰背景 */
+.el-input.is-disabled .el-input__inner,
+.el-textarea.is-disabled .el-textarea__inner {
+  color: #1a1a1a !important;
+  -webkit-text-fill-color: #1a1a1a !important;
+  background-color: #f5f7fa !important;
+  cursor: default;
+}
+
+/* 确保 placeholder 颜色正常（不干扰） */
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: #c0c4cc !important;
 }
 </style>