样式修改

src/views/patients/medicalRecord/index.vue

@@ -1,117 +1,118 @@
 <template>
-  <div class="app-container">
-    <div class="left-menu">
-      <div class="back-button" @click="goBack">
-        <el-icon>
-          <ArrowLeft />
-        </el-icon>
-        返回患者列表
-      </div>
-      <el-menu :default-active="activeMenu" class="medical-menu" @select="handleSelect">
-        <el-menu-item index="medicalRecord">
-          <span>营养病例</span>
-        </el-menu-item>
-        <el-menu-item index="visitRecord">
-          <span>就诊记录</span>
-        </el-menu-item>
-        <el-menu-item index="checkLabel">
-          <span>检查指标</span>
-        </el-menu-item>
-        <el-menu-item index="nutritionScreeningAdd" v-show="false">
-          <span>营养筛查新增</span>
-        </el-menu-item>
-        <el-menu-item index="nutritionScreening">
-          <span>营养筛查</span>
-        </el-menu-item>
-        <el-menu-item index="nutritionEvaluationAdd" v-show="false">
-          <span>营养评估新增</span>
-        </el-menu-item>
-        <el-menu-item index="nutritionEvaluation">
-          <span>营养评估</span>
-        </el-menu-item>
-        <el-menu-item index="nutritionDiagnosis">
-          <span>营养诊断</span>
-        </el-menu-item>
-        <el-sub-menu index="nutritionIntervention">
-          <template #title>营养干预</template>
-          <el-menu-item index="nutritionSetting">营养设定</el-menu-item>
-          <el-menu-item index="enteralNutrition">肠内营养</el-menu-item>
-         <el-menu-item index="enteralNutritionHistory" v-show="false">肠内营养历史处方</el-menu-item>
-          <el-menu-item index="parenteralNutrition">肠外营养</el-menu-item>
-          <el-menu-item index="dietTherapy">膳食治疗</el-menu-item>
-        </el-sub-menu>
-        <el-menu-item index="nutritionMonitor">
-          <span>营养监测</span>
-        </el-menu-item>
-        <el-menu-item index="nutritionEducation">
-          <span>营养宣教</span>
-        </el-menu-item>
-      </el-menu>
-      <div class="search-bar">
-        <el-input v-model="searchValue" placeholder="姓名/床号/门诊号" size="small" class="search-input" @keyup.enter="handleSearch" />
-        <el-button size="small" type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-      </div>
-      <div class="patient-tabs">
-        <el-tabs v-model="patientTab" size="small" stretch @tab-change="handleTabChange">
-          <el-tab-pane :label="`待诊${waitingCount}`" name="wait" />
-          <el-tab-pane :label="`诊中${treatingCount}`" name="doing" />
-          <el-tab-pane :label="`已诊${treatedCount}`" name="done" />
-        </el-tabs>
-      </div>
-      <div class="patient-table">
-        <el-table
-          :data="patientList"
-          border
-          size="small"
-          height="80%"
-          :show-header="true"
-          class="table-patients"
-          :row-class-name="tableRowClassName"
-          @row-dblclick="handleRowClick"
-        >
-          <el-table-column prop="name" label="姓名" width="60" />
-          <el-table-column prop="gender" label="性别" width="50" />
-          <el-table-column prop="age" label="年龄" width="80" />
-        </el-table>
-      </div>
-      <div class="nav-btns">
-        <el-button size="small" @click="handlePrev">上一位</el-button>
-        <el-button size="small" type="primary" @click="handleNext">下一位</el-button>
-      </div>
-    </div>
-    <div class="main-content">
-      <el-row>
-        <div class="patient-left-info">
-          <el-row class="info-row">
-            <span class="name">{{ patientInfo.name }}</span>
-            <span class="age">{{ patientInfo.age }}</span>
-            <span class="gender-icon" :class="patientInfo.gender === '男' ? 'male' : 'female'">
-              {{ patientInfo.gender === '男' ? '♂' : '♀' }}
-            </span>
-          </el-row>
-          <el-row style="margin-top: 10px; margin-left: 10%">
-            <el-button size="small" @click="handleEdit">编辑</el-button>
-            <el-button size="small" type="primary" @click="handleDetail">详情</el-button>
-          </el-row>
+    <div class="app-container">
+        <div class="left-menu">
+            <div class="back-button" @click="goBack">
+                <el-icon>
+                    <ArrowLeft />
+                </el-icon>
+                返回患者列表
+            </div>
+            <el-menu :default-active="activeMenu" class="medical-menu" @select="handleSelect">
+                <el-menu-item index="medicalRecord">
+                    <span>营养病例</span>
+                </el-menu-item>
+                <el-menu-item index="visitRecord">
+                    <span>就诊记录</span>
+                </el-menu-item>
+                <el-menu-item index="checkLabel">
+                    <span>检查指标</span>
+                </el-menu-item>
+                <el-menu-item index="nutritionScreeningAdd" v-show="false">
+                    <span>营养筛查新增</span>
+                </el-menu-item>
+                <el-menu-item index="nutritionScreening">
+                    <span>营养筛查</span>
+                </el-menu-item>
+                <el-menu-item index="nutritionEvaluationAdd" v-show="false">
+                    <span>营养评估新增</span>
+                </el-menu-item>
+                <el-menu-item index="nutritionEvaluation">
+                    <span>营养评估</span>
+                </el-menu-item>
+                <el-menu-item index="nutritionDiagnosis">
+                    <span>营养诊断</span>
+                </el-menu-item>
+                <el-sub-menu index="nutritionIntervention">
+                    <template #title>营养干预</template>
+                    <el-menu-item index="nutritionSetting">营养设定</el-menu-item>
+                    <el-menu-item index="enteralNutrition">肠内营养</el-menu-item>
+                    <el-menu-item index="enteralNutritionHistory" v-show="false">肠内营养历史处方</el-menu-item>
+                    <el-menu-item index="parenteralNutrition">肠外营养</el-menu-item>
+                    <el-menu-item index="dietTherapy">膳食治疗</el-menu-item>
+                </el-sub-menu>
+                <el-menu-item index="nutritionMonitor">
+                    <span>营养监测</span>
+                </el-menu-item>
+                <el-menu-item index="nutritionEducation">
+                    <span>营养宣教</span>
+                </el-menu-item>
+            </el-menu>
+            <div class="search-bar">
+                <el-input v-model="searchValue" placeholder="姓名/床号/门诊号" size="small" class="search-input" @keyup.enter="handleSearch" />
+                <el-button size="small" type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+            </div>
+            <div class="patient-tabs">
+                <el-tabs v-model="patientTab" size="small" stretch @tab-change="handleTabChange">
+                    <el-tab-pane :label="`待诊${waitingCount}`" name="wait" />
+                    <el-tab-pane :label="`诊中${treatingCount}`" name="doing" />
+                    <el-tab-pane :label="`已诊${treatedCount}`" name="done" />
+                </el-tabs>
+            </div>
+            <div class="patient-table">
+                <el-table :data="patientList" border size="small" height="80%" :show-header="true" class="table-patients" :row-class-name="tableRowClassName" @row-dblclick="handleRowClick">
+                    <el-table-column prop="name" label="姓名" width="60" />
+                    <el-table-column prop="gender" label="性别" width="50" />
+                    <el-table-column prop="age" label="年龄" width="80" />
+                </el-table>
+            </div>
+            <div class="nav-btns">
+                <el-button size="small" @click="handlePrev">上一位</el-button>
+                <el-button size="small" type="primary" @click="handleNext">下一位</el-button>
+            </div>
         </div>
-        <div class="patient-right-info">
-                    <el-row>
-                        <span>门诊号：{{ patientInfo.outpatientNo }}</span>
-                        <span style="margin-left: 30px">科室：{{ patientInfo.deptName }}</span>
-                        <!-- <span style="margin-left: 30px" v-if="patientInfo.type == '1'">床号：{{ patientInfo.bedNo|| '--' }}</span> -->
-                        <span style="margin-left: 30px">营养诊断：{{useStore.diagnosisInfo?.diagnosisLabelStr|| '--' }}</span>
-                    </el-row>
-                    <el-row>
-                        <el-tooltip effect="light" :content=" stripHtml(useStore.diagnosisInfo?.consultantResult) || '--'" placement="top">
-                            <span class="truncate-text">
-                                会诊结果：{{ stripHtml(useStore.diagnosisInfo?.consultantResult) || '--' }}
+        <div class="main-content">
+            <el-row :gutter="20">
+                <el-col :span="4">
+                    <div class="patient-left-info">
+                        <el-row class="info-row">
+                            <span class="name">{{ patientInfo.name }}</span>
+                            <span class="age">{{ patientInfo.age }}</span>
+                            <span class="gender-icon" :class="patientInfo.gender === '男' ? 'male' : 'female'">
+                                {{ patientInfo.gender === '男' ? '♂' : '♀' }}
                             </span>
-                        </el-tooltip>
-                    </el-row>
-                </div>
-      </el-row>
-      <component :is="currentComponent" v-if="currentComponent" :patient-info="patientInfo" @change="handleSelect" />
-    </div>
+                        </el-row>
+                        <el-row style="margin-top: 10px; margin-left: 10%">
+                            <el-button size="small" @click="handleEdit">编辑</el-button>
+                            <el-button size="small" type="primary" @click="handleDetail">详情</el-button>
+                        </el-row>
+                    </div>
+                </el-col>
+
+                <el-col :span="20">
+                    <div class="patient-right-info">
+                        <el-row>
+                            <el-col :span="24">
+                                <span>门诊号：{{ patientInfo.outpatientNo }}</span>
+                                <span style="margin-left: 30px">科室：{{ patientInfo.deptName }}</span>
+                                <!-- <span style="margin-left: 30px" v-if="patientInfo.type == '1'">床号：{{ patientInfo.bedNo|| '--' }}</span> -->
+                                <span style="margin-left: 30px">营养诊断：{{useStore.diagnosisInfo?.diagnosisLabelStr|| '--' }}</span>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col>
+                                <el-tooltip effect="light" :content=" stripHtml(useStore.diagnosisInfo?.consultantResult) || '--'" placement="top">
+                                    <span class="truncate-text">
+                                        会诊结果：{{ stripHtml(useStore.diagnosisInfo?.consultantResult) || '--' }}
+                                    </span>
+                                </el-tooltip>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-col>
+
+            </el-row>
+            <component :is="currentComponent" v-if="currentComponent" :patient-info="patientInfo" @change="handleSelect" />
+        </div>
 
         <!-- 患者详情弹窗 -->
         <DetailDialog v-model:visible="showDetailDialog" :detail-data="detailData" :physical-activity-dict="physicalActivityDict" @close="handleDetailClose" />
@@ -133,40 +134,40 @@
     import { useNutritionDiagnosisStore } from '@/store/modules/diagnosis';
     const useStore = useNutritionDiagnosisStore();
 
-// 动态导入组件
-const MedicalRecord = defineAsyncComponent(() => import('./levelMenu.vue'));
-const NutritionScreening = defineAsyncComponent(() => import('@/views/patients/screening/index.vue'));
-const NutritionEvaluation = defineAsyncComponent(() => import('@/views/patients/evaluation/index.vue'));
-const NutriDiagnosis = defineAsyncComponent(() => import('@/views/patients/nutriDiagnosis/index.vue'));
-const CheckLabel = defineAsyncComponent(() => import('@/views/patients/checkLabel/index.vue'));
-const NutritionScreeningAdd = defineAsyncComponent(() => import('@/views/patients/screening/add.vue'));
-const NutritionEvaluationAdd = defineAsyncComponent(() => import('@/views/patients/evaluation/add.vue'));
-const NutritionEducation = defineAsyncComponent(() => import('@/views/patients/nutritionEducation/index.vue'));
-const NutritionSetting = defineAsyncComponent(() => import('@/views/patients/nutritionSetting/index.vue'));
-const DietTherapy = defineAsyncComponent(() => import('@/views/patients/dietTherapy/index.vue'));
-const ParenteralNutrition = defineAsyncComponent(() => import('@/views/patients/parenteralNutrition/index.vue'));
-const EnteralNutrition = defineAsyncComponent(() => import('@/views/patients/enteralNutrition/index.vue'));
-const EnteralNutritionHistory = defineAsyncComponent(() => import('@/views/patients/enteralNutrition/history.vue'));  
-
-const componentMap = {
-  medicalRecord: MedicalRecord,
-  checkLabel: CheckLabel,
-  nutritionDiagnosis: NutriDiagnosis,
-  nutritionScreening: NutritionScreening,
-  nutritionScreeningAdd: NutritionScreeningAdd,
-  nutritionEvaluation: NutritionEvaluation,
-  nutritionEvaluationAdd: NutritionEvaluationAdd,
-  nutritionEducation: NutritionEducation,
-  nutritionSetting: NutritionSetting,
-  dietTherapy: DietTherapy,
-  parenteralNutrition: ParenteralNutrition,
-  enteralNutrition: EnteralNutrition,
-  enteralNutritionHistory: EnteralNutritionHistory,
-};
-const currentComponent = ref(componentMap['medicalRecord']);
-const route = useRoute();
-const router = useRouter();
-const {proxy} = getCurrentInstance() as any;
+    // 动态导入组件
+    const MedicalRecord = defineAsyncComponent(() => import('./levelMenu.vue'));
+    const NutritionScreening = defineAsyncComponent(() => import('@/views/patients/screening/index.vue'));
+    const NutritionEvaluation = defineAsyncComponent(() => import('@/views/patients/evaluation/index.vue'));
+    const NutriDiagnosis = defineAsyncComponent(() => import('@/views/patients/nutriDiagnosis/index.vue'));
+    const CheckLabel = defineAsyncComponent(() => import('@/views/patients/checkLabel/index.vue'));
+    const NutritionScreeningAdd = defineAsyncComponent(() => import('@/views/patients/screening/add.vue'));
+    const NutritionEvaluationAdd = defineAsyncComponent(() => import('@/views/patients/evaluation/add.vue'));
+    const NutritionEducation = defineAsyncComponent(() => import('@/views/patients/nutritionEducation/index.vue'));
+    const NutritionSetting = defineAsyncComponent(() => import('@/views/patients/nutritionSetting/index.vue'));
+    const DietTherapy = defineAsyncComponent(() => import('@/views/patients/dietTherapy/index.vue'));
+    const ParenteralNutrition = defineAsyncComponent(() => import('@/views/patients/parenteralNutrition/index.vue'));
+    const EnteralNutrition = defineAsyncComponent(() => import('@/views/patients/enteralNutrition/index.vue'));
+    const EnteralNutritionHistory = defineAsyncComponent(() => import('@/views/patients/enteralNutrition/history.vue'));
+
+    const componentMap = {
+        medicalRecord: MedicalRecord,
+        checkLabel: CheckLabel,
+        nutritionDiagnosis: NutriDiagnosis,
+        nutritionScreening: NutritionScreening,
+        nutritionScreeningAdd: NutritionScreeningAdd,
+        nutritionEvaluation: NutritionEvaluation,
+        nutritionEvaluationAdd: NutritionEvaluationAdd,
+        nutritionEducation: NutritionEducation,
+        nutritionSetting: NutritionSetting,
+        dietTherapy: DietTherapy,
+        parenteralNutrition: ParenteralNutrition,
+        enteralNutrition: EnteralNutrition,
+        enteralNutritionHistory: EnteralNutritionHistory,
+    };
+    const currentComponent = ref(componentMap['medicalRecord']);
+    const route = useRoute();
+    const router = useRouter();
+    const { proxy } = getCurrentInstance() as any;
 
     const activeMenu = ref('medicalRecord');
 
@@ -196,19 +197,20 @@ const {proxy} = getCurrentInstance() as any;
     const showEditDialog = ref(false);
     const editData = ref({} as any);
 
-const handleSelect = (key: string, other?: string[]) => {
-  if (key == 'nutritionScreeningAdd' || key == 'nutritionEvaluationAdd') {
-    activeMenu.value = key.replace('Add', '');
-  } if(key=='enteralNutritionHistory'){            
-            activeMenu.value = key.replace('History',''); 
-  }else {
-    activeMenu.value = key;
-  }
-  currentComponent.value = componentMap[key] || null;
-  patientInfo.value['other'] = other;
-  patientInfo.value.type = route.query.type;
-  patientInfo.value.outpatientNo = route.query.outpatientNo;
-};
+    const handleSelect = (key: string, other ? : string[]) => {
+        if (key == 'nutritionScreeningAdd' || key == 'nutritionEvaluationAdd') {
+            activeMenu.value = key.replace('Add', '');
+        }
+        if (key == 'enteralNutritionHistory') {
+            activeMenu.value = key.replace('History', '');
+        } else {
+            activeMenu.value = key;
+        }
+        currentComponent.value = componentMap[key] || null;
+        patientInfo.value['other'] = other;
+        patientInfo.value.type = route.query.type;
+        patientInfo.value.outpatientNo = route.query.outpatientNo;
+    };
 
     const goBack = () => {
         router.back();
@@ -387,7 +389,7 @@ const handleSelect = (key: string, other?: string[]) => {
                 activity: item.activity,
                 bedNo: item.bedNo
             }));
-            
+
             waitingCount.value = patientList.value.length;
             // 如果有患者数据，根据路由参数或默认选中第一个
             if (patientList.value.length > 0) {
@@ -559,7 +561,6 @@ const handleSelect = (key: string, other?: string[]) => {
         padding: 10px;
         border-radius: 4px;
         margin-bottom: 20px;
-        width: 11%;
     }
 
     .patient-right-info {
@@ -568,8 +569,6 @@ const handleSelect = (key: string, other?: string[]) => {
         padding: 20px;
         border-radius: 4px;
         margin-bottom: 20px;
-        width: 87%;
-        margin-left: 30px;
     }
 
     .patient-right {