整体布局优化-病历智审结果菜单点击后页面错乱问题修复

src/layout/index.vue

@@ -45,7 +45,7 @@ export default {
   },
   data() {
     return {
-      resizeObserver: null
+      observer: null
     }
   },
   methods: {
@@ -54,8 +54,26 @@ export default {
     },
   },
   mounted() {
+    // 目标元素
+    const targetElement = document.querySelector('.sidebar-container');
+
+    // 创建观察者
+    this.observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width } = entry.contentRect;
+        console.log('新宽度:', width);
+         document.getElementById('mainContainer').style.width = `${document.getElementsByClassName('app-wrapper')[0].offsetWidth - document.getElementsByClassName('sidebar-container')[0].offsetWidth}px`
+        // 执行你的逻辑
+      }
+    });
+
+    // 开始观察
+    this.observer.observe(targetElement);
     // document.getElementById('mainContainer').style.width = `calc(100% - (${document.getElementById('sidebarContainer')}px))`
-    document.getElementById('mainContainer').style.width = `${document.getElementsByClassName('app-wrapper')[0].offsetWidth - document.getElementsByClassName('sidebar-container')[0].offsetWidth}px`
+    // document.getElementById('mainContainer').style.width = `${document.getElementsByClassName('app-wrapper')[0].offsetWidth - document.getElementsByClassName('sidebar-container')[0].offsetWidth}px`
+  },
+  beforeDestroy() {
+    this.observer.disconnect()
   }
 };
 </script>

src/views/recordsRoom/qc/medicalRecord.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="container">
-    <div class="title-content">
+  <div class="app-container">
+    <!-- <div class="title-content">
       <el-image class="zsIcon" :src="require('../../.././assets/images/zsicon.png')" fit="contain"></el-image>
       <div class="title-contentIcon">病历智审结果</div>
-    </div>
+    </div> -->
     <!-- 查询表单 -->
-    <div class="inputS">
+    <div class="filter-list-form">
       <el-form ref="form" :model="form" label-width="80px">
         <!-- 院区和科室在同一行 -->
         <el-row class="custom-row">
-          <el-col :span="13">
+          <el-col :span="5">
             <el-form-item label="院区">
               <el-select v-model="form.region" placeholder="请选择院区">
                 <el-option v-for="campus in campusList" :key="campus.id" :label="campus.name"
@@ -17,7 +17,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="13">
+          <el-col :span="5">
             <el-form-item label="科室">
               <el-select v-model="form.department" placeholder="请选择科室">
                 <el-option v-for="item of deportments" :key="item.id" :label="item.name" :value="item.name" />
@@ -29,21 +29,21 @@
         <!-- 展开部分 -->
         <div v-if="isExpanded">
           <el-row>
-            <el-col :span="13">
+            <el-col :span="5">
               <el-form-item label="病区">
                 <el-select v-model="form.ward" placeholder="请选择病区">
                   <el-option v-for="item of deportments" :key="item.id" :label="item.name" :value="item.name" />
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="13">
+            <el-col :span="5">
               <el-form-item label="管床">
                 <el-select v-model="form.bedManager" placeholder="请选择管床">
                   <el-option v-for="pipe in pipeList" :key="pipe.id" :label="pipe.name" :value="pipe.name" />
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="13">
+            <el-col :span="5">
               <el-form-item label="床号">
                 <el-input v-model="form.CWH" placeholder="请输入床号" />
               </el-form-item>
@@ -53,7 +53,7 @@
       </el-form>
 
       <!-- 查询按钮和展开/收起按钮 -->
-      <el-row>
+      <el-row style="padding-bottom: 22px;">
         <el-col :span="18" style="text-align: right">
           <el-button type="primary" @click="onSubmit">查询</el-button>
           <el-button type="text" @click="toggleExpand">
@@ -65,10 +65,10 @@
     </div>
 
     <!-- 数据表格 -->
-    <el-table :data="queryTableData" tooltip-effect="dark" @change="handleSizeChange" style="width: 100%"
+    <el-table class="filter-list-action" :data="queryTableData" tooltip-effect="dark" @change="handleSizeChange" style="width: 100%"
       v-if="!showQueryTable">
       <el-table-column type="index" label="序号" width="50" v-loading="loading" />
-      <el-table-column prop="medicalRecordNumber" label="病案号" width="70">
+      <el-table-column prop="medicalRecordNumber" label="病案号">
         <template #default="{ row }">
           <el-button type="text" @click="openCaseQualityBox2(row)"
             style="height: 32px; border-bottom: 2px solid rgb(64, 158, 255)">
@@ -76,9 +76,9 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column prop="bedNumber" label="床号" width="70" />
-      <el-table-column prop="admissionCount" label="住院次数" width="80" />
-      <el-table-column prop="homePageIssue" label="问题数量" width="80">
+      <el-table-column prop="bedNumber" label="床号" />
+      <el-table-column prop="admissionCount" label="住院次数" />
+      <el-table-column prop="homePageIssue" label="问题数量">
         <template #default="{ row }">
           <div class="message-badge">
             <!-- 显示病历问题的值 -->
@@ -92,9 +92,9 @@
     </el-table>
 
     <!-- 查询表格 -->
-    <el-table :data="queryTableData" tooltip-effect="dark" @change="handleSizeChange" style="width: 100%" v-else>
+    <el-table class="filter-list-action" :data="queryTableData" tooltip-effect="dark" @change="handleSizeChange" style="width: 100%" v-else>
       <el-table-column type="index" label="序号" width="50" />
-      <el-table-column prop="medicalRecordNumber" label="病案号" width="70">
+      <el-table-column prop="medicalRecordNumber" label="病案号">
         <template #default="{ row }">
           <el-button type="text" @click="openCaseQualityBox2(row)"
             style="height: 32px; border-bottom: 2px solid rgb(64, 158, 255)">
@@ -102,9 +102,9 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column prop="bedNumber" label="床号" width="70" />
-      <el-table-column prop="admissionCount" label="住院次数" width="80" />
-      <el-table-column prop="homePageIssue" label="问题数量" width="80">
+      <el-table-column prop="bedNumber" label="床号"/>
+      <el-table-column prop="admissionCount" label="住院次数"/>
+      <el-table-column prop="homePageIssue" label="问题数量">
         <template #default="{ row }">
           <div class="message-badge">
             <!-- 显示病历问题的值 -->
@@ -114,7 +114,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="status" label="状态" width="50" />
+      <el-table-column prop="status" label="状态"/>
     </el-table>
 
     <el-dialog :visible.sync="caseShow" custom-class="my-dialog" :modal="false" :show-close="false" width="420">
@@ -170,8 +170,8 @@ export default {
   created() {
     this.initData();
     this.loadData({}); // 加载默认数据
-    window.addEventListener('resize', this.handleWindowResize);
-    this.handleWindowResize();
+    // window.addEventListener('resize', this.handleWindowResize);
+    // this.handleWindowResize();
     getCaseResultData().then(res => {
       if (res.code === 200) {
         this.tableData.forEach(row => {
@@ -181,49 +181,49 @@ export default {
     });
   },
   mounted() {
-    const observer = new MutationObserver(mutationsList => {
-      let sidebarFound = false;
-      let navbarFound = false;
-
-      for (const mutation of mutationsList) {
-        if (mutation.type === 'childList') {
-          const sidebar = document.querySelector('.sidebar-container');
-          const navbar = document.querySelector('.navbar');
-          const appMain = document.querySelector('.app-main');
-          const breadcrumbContainer = document.querySelector('.breadcrumb-container');
-
-          if (sidebar && !sidebarFound) {
-            sidebar.style.display = 'none';
-            sidebarFound = true;
-          }
-
-          if (navbar && !navbarFound) {
-            navbar.style.display = 'none';
-            navbarFound = true;
-          }
-
-          if (appMain) {
-            appMain.style.width = '100%';
-            appMain.style.paddingTop = '0px';
-            appMain.style.padding = '10px 10%';
-            appMain.style.background = '#fff';
-          }
-
-          if (breadcrumbContainer) {
-            breadcrumbContainer.style.display = 'none';
-          }
-
-          if (sidebarFound && navbarFound) {
-            observer.disconnect(); // 停止监听
-          }
-        }
-      }
-    });
-    observer.observe(document.documentElement, { childList: true, subtree: true });
+    // const observer = new MutationObserver(mutationsList => {
+    //   let sidebarFound = false;
+    //   let navbarFound = false;
+
+    //   for (const mutation of mutationsList) {
+    //     if (mutation.type === 'childList') {
+    //       const sidebar = document.querySelector('.sidebar-container');
+    //       const navbar = document.querySelector('.navbar');
+    //       const appMain = document.querySelector('.app-main');
+    //       const breadcrumbContainer = document.querySelector('.breadcrumb-container');
+
+    //       if (sidebar && !sidebarFound) {
+    //         sidebar.style.display = 'none';
+    //         sidebarFound = true;
+    //       }
+
+    //       if (navbar && !navbarFound) {
+    //         navbar.style.display = 'none';
+    //         navbarFound = true;
+    //       }
+
+    //       if (appMain) {
+    //         appMain.style.width = '100%';
+    //         appMain.style.paddingTop = '0px';
+    //         appMain.style.padding = '10px 10%';
+    //         appMain.style.background = '#fff';
+    //       }
+
+    //       if (breadcrumbContainer) {
+    //         breadcrumbContainer.style.display = 'none';
+    //       }
+
+    //       if (sidebarFound && navbarFound) {
+    //         observer.disconnect(); // 停止监听
+    //       }
+    //     }
+    //   }
+    // });
+    // observer.observe(document.documentElement, { childList: true, subtree: true });
     this.getCaseQualityResults();
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.handleWindowResize);
+    // window.removeEventListener('resize', this.handleWindowResize);
   },
   methods: {
     // 初始化数据
@@ -388,13 +388,13 @@ export default {
 
 <style scoped lang="scss">
 .container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 420px;
+  // position: fixed;
+ // left: 0;
+ // top: 0;
+ // display: flex;
+ // flex-direction: column;
+ // height: 100vh;
+ // width: 420px;
 }
 
 .title-content {
@@ -444,9 +444,9 @@ export default {
 }
 
 ::v-deep .el-row {
-  display: flex;
-  margin-top: 30px;
-  margin-left: -37px;
+  // display: flex;
+  // margin-top: 30px;
+  // margin-left: -37px;
 }
 
 ::v-deep .el-dialog__body {
@@ -478,7 +478,7 @@ export default {
 }
 
 .el-form-item {
-  margin-bottom: 0px;
+  // margin-bottom: 0px;
 }
 
 .el-form-item__label {