优化一下 页面

src/components/zhu-yuan-yi-sheng/HuanZheXinXi.vue

@@ -1,79 +1,76 @@
 <template>
-  <el-container>
-    <el-main id="huanZheXinXiGaoDu">
-      <el-row>
-        <el-col :span="2" style="text-align: right">住院号：</el-col>
-        <el-col :span="4">
-          {{ huanZheXinXi.inpatientNo }}
-        </el-col>
-        <el-col :span="2" style="text-align: right">住院次数：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.admissTimes }}</el-col>
-        <el-col :span="2" style="text-align: right">床号：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.bedNo }}</el-col>
-        <el-col :span="2" style="text-align: right">身份证号：</el-col>
-        <el-col :span="4">{{ huanZheXinXi.socialNo }}</el-col>
-
-      </el-row>
-      <el-row>
-        <el-col :span="2" style="text-align: right">姓名：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.name }}</el-col>
-        <el-col :span="2" style="text-align: right">性别：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.sexName }}</el-col>
-        <el-col :span="2" style="text-align: right">联系电话：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.homeTel }}</el-col>
-        <el-col :span="2" style="text-align: right">入院日期：</el-col>
-        <el-col :span="4">
-          <span>{{ huanZheXinXi.admissDate }}</span> &nbsp;
-          <span>{{ huanZheXinXi.actIptDays }}天</span>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="2" style="text-align: right">管床医生：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.referPhysicianName }}</el-col>
-        <el-col :span="2" style="text-align: right">病区：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.admissWardName }}</el-col>
-        <el-col :span="2" style="text-align: right">入院医生：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.admissPhysicianName }}</el-col>
-        <el-col :span="2" :title="huanZheXinXi.admissDiagStr"
-                style="text-align: right">
-          入院诊断：
-        </el-col>
-        <el-col :span="4" :title="huanZheXinXi.admissDiagStr"
-                style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
-          {{ huanZheXinXi.admissDiagStr }}
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="2" style="text-align: right">小科室：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.smallDeptName }}</el-col>
-        <el-col :span="2" style="text-align: right">登记日期：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.ybRegisterDate }}</el-col>
-        <el-col :span="2" style="text-align: right">身份：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.medTypeName }}</el-col>
-        <el-col :span="2" style="text-align: right">出生日期：</el-col>
-        <el-col :span="4">
-          <span>{{ huanZheXinXi.birthDate }}</span> &nbsp;&nbsp;
-          <span>{{ huanZheXinXi.age }} 岁</span>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="2" style="text-align: right">总费用：</el-col>
-        <el-col :span="4">
-          <span>{{ huanZheXinXi.totalCharge }}</span> &nbsp;&nbsp;
-          <span style="color: red">{{ huanZheXinXi.balance }}</span>
-        </el-col>
-        <el-col :span="2" style="text-align: right">药品占比：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.yp }}</el-col>
-        <el-col :span="2" style="text-align: right">检验检查：</el-col>
-        <el-col :span="4"> {{ huanZheXinXi.jyjc }}</el-col>
-        <el-col :span="2" style="text-align: right">医保：</el-col>
-        <el-col :span="4">
-          <span>{{ huanZheXinXi.chargeYb }}</span> &nbsp;&nbsp;
-          <span>{{ huanZheXinXi.yb }}</span>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+  <div>
+    <el-row>
+      <el-col :span="2" style="text-align: right">住院号：</el-col>
+      <el-col :span="4">
+        {{ huanZheXinXi.inpatientNo }}
+      </el-col>
+      <el-col :span="2" style="text-align: right">住院次数：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.admissTimes }}</el-col>
+      <el-col :span="2" style="text-align: right">床号：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.bedNo }}</el-col>
+      <el-col :span="2" style="text-align: right">身份证号：</el-col>
+      <el-col :span="4">{{ huanZheXinXi.socialNo }}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="2" style="text-align: right">姓名：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.name }}</el-col>
+      <el-col :span="2" style="text-align: right">性别：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.sexName }}</el-col>
+      <el-col :span="2" style="text-align: right">联系电话：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.homeTel }}</el-col>
+      <el-col :span="2" style="text-align: right">入院日期：</el-col>
+      <el-col :span="4">
+        <span>{{ huanZheXinXi.admissDate }}</span> &nbsp;
+        <span>{{ huanZheXinXi.actIptDays }}天</span>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="2" style="text-align: right">管床医生：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.referPhysicianName }}</el-col>
+      <el-col :span="2" style="text-align: right">病区：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.admissWardName }}</el-col>
+      <el-col :span="2" style="text-align: right">入院医生：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.admissPhysicianName }}</el-col>
+      <el-col :span="2" :title="huanZheXinXi.admissDiagStr"
+              style="text-align: right">
+        入院诊断：
+      </el-col>
+      <el-col :span="4" :title="huanZheXinXi.admissDiagStr"
+              style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
+        {{ huanZheXinXi.admissDiagStr }}
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="2" style="text-align: right">小科室：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.smallDeptName }}</el-col>
+      <el-col :span="2" style="text-align: right">登记日期：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.ybRegisterDate }}</el-col>
+      <el-col :span="2" style="text-align: right">身份：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.medTypeName }}</el-col>
+      <el-col :span="2" style="text-align: right">出生日期：</el-col>
+      <el-col :span="4">
+        <span>{{ huanZheXinXi.birthDate }}</span> &nbsp;&nbsp;
+        <span>{{ huanZheXinXi.age }} 岁</span>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="2" style="text-align: right">总费用：</el-col>
+      <el-col :span="4">
+        <span>{{ huanZheXinXi.totalCharge }}</span> &nbsp;&nbsp;
+        <span style="color: red">{{ huanZheXinXi.balance }}</span>
+      </el-col>
+      <el-col :span="2" style="text-align: right">药品占比：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.yp }}</el-col>
+      <el-col :span="2" style="text-align: right">检验检查：</el-col>
+      <el-col :span="4"> {{ huanZheXinXi.jyjc }}</el-col>
+      <el-col :span="2" style="text-align: right">医保：</el-col>
+      <el-col :span="4">
+        <span>{{ huanZheXinXi.chargeYb }}</span> &nbsp;&nbsp;
+        <span>{{ huanZheXinXi.yb }}</span>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>

src/layout/HeaderV2/RouteNavigation.vue

@@ -91,14 +91,10 @@ let currentPath = $ref('')
 let currentIndex = -1
 
 const closeRouter = (index, path) => {
-  // delete menuList.value[index]
-  // delete menuKey[index]
   console.log(index)
   menuList.value.splice(index, 1)
   menuKey.splice(index, 1)
 
-  console.log(menuList.value)
-
   if (menuList.value.length === 0) {
     let data = {
       path: '/dashboard',

src/layout/PageLayer.vue

@@ -4,10 +4,10 @@
       <slot name="header"></slot>
     </el-header>
     <el-container>
-      <el-aside v-if="useSlots().aside" class="aside" :style="mainStyleSize">
+      <el-aside v-if="useSlots().aside" class="aside" :style="mainStyleSize" ref="asideRef">
         <slot name="aside"></slot>
       </el-aside>
-      <el-main :style="mainStyleSize" class="page_main">
+      <el-main :style="mainStyleSize" class="page_main" ref="mainRef">
         <slot name="main"></slot>
       </el-main>
     </el-container>
@@ -15,13 +15,17 @@
 </template>
 
 <script setup name='PageLayer' lang="ts">
-import {Ref, ref, useSlots} from "vue";
+import {onMounted, Ref, ref, useSlots} from "vue";
 import {getVisibleSize} from "../utils/window-size.js"
 import {$ref} from "vue/macros";
 
 const headerRef: Ref<HTMLElement> = ref(null)
 let mainStyleSize: object = $ref({})
 
+const asideRef: Ref<HTMLElement> = ref(null)
+const mainRef: Ref<HTMLElement> = ref(null)
+
+
 getVisibleSize((val) => {
   let height = (val.height - headerRef.value.$el.clientHeight) + 'px'
   mainStyleSize = {
@@ -38,8 +42,13 @@ getVisibleSize((val) => {
   border-radius: 4px;
   background-color: white;
   margin-bottom: 4px;
-  padding-left: 0;
+  padding: 6px;
+  height: max-content;
+  display: block;
+
+  box-shadow: var(--el-box-shadow-light);
 }
+
 .aside {
   border-radius: 4px;
   background-color: white;
@@ -48,6 +57,7 @@ getVisibleSize((val) => {
   width: max-content;
   max-width: 300px;
 }
+
 .page_main {
   overflow: auto;
   border-radius: 4px;

src/layout/index.vue

@@ -113,10 +113,10 @@ onMounted(() => {
 }
 
 .scrollbar {
-  padding: 5px 5px 20px 5px;
-  margin: 8px;
-  box-shadow: var(--el-box-shadow-light);
-  border-radius: 5px;
+  margin: 5px 5px 6px 5px;
+  //margin: 8px;
+  //box-shadow: var(--el-box-shadow-light);
+  //border-radius: 5px;
 
   &::-webkit-scrollbar {
     display: none;

src/views/hospitalization/zhu-yuan-yi-sheng/Home.vue

@@ -1,26 +1,54 @@
 <template>
-  <el-container>
-    <el-container>
-      <el-aside style="width:auto !important;">
-        <Overview v-show="xianShiLieBiao" :showSelection="false"/>
-      </el-aside>
-      <el-main class="main">
-        <huan-zhe-xin-xi v-show="basicPatientInformation"></huan-zhe-xin-xi>
-        <el-row v-show="xianShiLieBiao" class="tabs">
-          <template v-for="item in pathList">
-            <el-col :span="3" :style="currentPagePosition(item.path)" class="tab-item" @click="handleClick(item.path)">
-              <span> {{ item.title }}</span>
-            </el-col>
-          </template>
-        </el-row>
-        <router-view v-slot="{ Component }">
-          <keep-alive>
-            <component :is="Component"/>
-          </keep-alive>
-        </router-view>
-      </el-main>
-    </el-container>
-  </el-container>
+  <page-layer>
+
+    <template #header>
+      <huan-zhe-xin-xi v-show="basicPatientInformation"></huan-zhe-xin-xi>
+    </template>
+
+    <template #aside>
+      <Overview v-show="xianShiLieBiao" :showSelection="false"/>
+    </template>
+
+    <template #main>
+      <el-row v-show="xianShiLieBiao" class="tabs">
+        <template v-for="item in pathList">
+          <el-col :span="3" :style="currentPagePosition(item.path)" class="tab-item" @click="handleClick(item.path)">
+            <span> {{ item.title }}</span>
+          </el-col>
+        </template>
+      </el-row>
+      <router-view v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component"/>
+        </keep-alive>
+      </router-view>
+    </template>
+
+  </page-layer>
+
+
+  <!--  <el-container>-->
+  <!--    <el-container>-->
+  <!--      <el-aside style="width:auto !important;">-->
+  <!--        <Overview v-show="xianShiLieBiao" :showSelection="false"/>-->
+  <!--      </el-aside>-->
+  <!--      <el-main class="main">-->
+  <!--        <huan-zhe-xin-xi v-show="basicPatientInformation"></huan-zhe-xin-xi>-->
+  <!--        <el-row v-show="xianShiLieBiao" class="tabs">-->
+  <!--          <template v-for="item in pathList">-->
+  <!--            <el-col :span="3" :style="currentPagePosition(item.path)" class="tab-item" @click="handleClick(item.path)">-->
+  <!--              <span> {{ item.title }}</span>-->
+  <!--            </el-col>-->
+  <!--          </template>-->
+  <!--        </el-row>-->
+  <!--        <router-view v-slot="{ Component }">-->
+  <!--          <keep-alive>-->
+  <!--            <component :is="Component"/>-->
+  <!--          </keep-alive>-->
+  <!--        </router-view>-->
+  <!--      </el-main>-->
+  <!--    </el-container>-->
+  <!--  </el-container>-->
 </template>
 
 <script name="Home" setup>
@@ -29,6 +57,7 @@ import {computed, ref, watch} from "vue";
 import HuanZheXinXi from "@/components/zhu-yuan-yi-sheng/HuanZheXinXi.vue";
 import router from "@/router";
 import Overview from '@/components/medical-insurance/patient-overview/Index.vue'
+import PageLayer from "@/layout/PageLayer";
 
 const tableHeight = computed(() => {
   return store.state.app.windowSize.h