布局

src/App.vue

@@ -24,6 +24,7 @@ import {CyMessageBox} from "@/components/cy/message-box";
 import {useProgressBarStore} from "@/pinia/progress-bar-store";
 import {useUserStore} from "@/pinia/user-store";
 import {useSystemStore} from "@/pinia/system-store";
+
 const progressBarStore = useProgressBarStore()
 const userStore = useUserStore()
 const systemStore = useSystemStore()
@@ -546,12 +547,16 @@ input[type=number]::-webkit-outer-spin-button {
   box-sizing: border-box;
 }
 
-.cy_display_flex_y {
+@mixin flex-y-max() {
   width: 100%;
   height: 100%;
   display: flex;
   box-sizing: border-box;
-  flex-flow: column nowrap;
+  flex-direction: column;
+}
+
+.cy_display_flex_y {
+  @include flex-y-max;
 }
 
 .cy_display_flex-align-items_center {
@@ -603,7 +608,6 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .cy_main_card {
-  overflow: auto;
   width: 100%;
   height: 100%;
   @include cy-card;
@@ -615,5 +619,17 @@ input[type=number]::-webkit-outer-spin-button {
   @include cy-card;
 }
 
+.el-tabs_completely_fill {
+  @include flex-y-max;
+
+  .el-tabs__content {
+    flex: 1;
+    height: 0;
+
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+}
 
 </style>

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr_control_rule/EmrControlRule.vue

@@ -1,75 +1,78 @@
 <template>
-  <page-layer>
-    <template #header>
-      <el-switch
-          active-value="intervalPatients"
-          inactive-value="admissTimes"
-          v-model="timeType"
-          active-text="质控时间"
-          inactive-text="入院时间"
-      />
-      <el-date-picker
-          :shortcuts="shortcuts"
-          style="width: 220px"
-          type="daterange"
-          v-model="intervalPatients"/>
-
-
-      <el-button type="primary"
-                 :loading="load"
-                 @click="queryQualityControlData">查询质控数据
-      </el-button>
-
-      <el-button @click="queryScale">
-        {{ proportion }} 比例
-      </el-button>
-    </template>
-
-    <template #main>
-      <el-progress :percentage="percentage"/>
-      <el-tabs v-model="tabsModel">
-        <el-tab-pane label="质控数量" name="质控数量">
-          <div ref="divRef"></div>
-          <xc-table :localData="numberToArray" :finalHeight="getWindowSize.h / 1.2">
-            <el-table-column prop="name" label="质控名称"/>
-            <el-table-column prop="total" label="总数"/>
-            <el-table-column label="操作">
-              <template #default="{row}">
-                <el-button text @click="detailClick(row)" plain type="primary">详情</el-button>
-              </template>
-            </el-table-column>
-          </xc-table>
-        </el-tab-pane>
-
-        <el-tab-pane label="详情" name="详情">
-          <rule-sift :data="ruleReturnData.patient"/>
-        </el-tab-pane>
-
-        <template v-for="(val, key) in siftData">
-          <el-tab-pane :label="key" :name="key">
-            <rule-sift :data="val"/>
+
+  <div class="cy_main_card">
+    <div class="cy_display_flex_y">
+      <div>
+        <el-switch
+            active-value="intervalPatients"
+            inactive-value="admissTimes"
+            v-model="timeType"
+            active-text="质控时间"
+            inactive-text="入院时间"
+        />
+        <el-date-picker
+            :shortcuts="shortcuts"
+            style="width: 220px"
+            type="daterange"
+            v-model="intervalPatients"/>
+
+
+        <el-button type="primary"
+                   :loading="load"
+                   @click="queryQualityControlData">查询质控数据
+        </el-button>
+
+        <el-button @click="queryScale">
+          {{ proportion }} 比例
+        </el-button>
+
+        <div>
+          <el-progress :percentage="percentage"/>
+        </div>
+      </div>
+
+      <div class="cy_flex_1-y">
+        <el-tabs v-model="tabsModel" class="el-tabs_completely_fill">
+          <el-tab-pane label="质控数量" name="质控数量">
+            <CyVxeTable :data="numberToArray">
+              <vxe-column field="name" title="质控名称"/>
+              <vxe-column field="total" title="总数"/>
+              <vxe-column title="操作">
+                <template #default="{row}">
+                  <el-button text @click="detailClick(row)" plain type="primary">详情</el-button>
+                </template>
+              </vxe-column>
+            </CyVxeTable>
+          </el-tab-pane>
+
+          <el-tab-pane label="详情" name="详情">
+            <RuleSift :data="ruleReturnData.patient"/>
           </el-tab-pane>
-        </template>
-      </el-tabs>
-    </template>
-  </page-layer>
+
+          <template v-for="(val, key) in siftData">
+            <el-tab-pane :label="key" :name="key">
+              <RuleSift :data="val"/>
+            </el-tab-pane>
+          </template>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
 
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
 import {getDateRangeFormatDate} from "@/utils/date";
-import PageLayer from "@/layout/PageLayer.vue";
 import {shortcuts} from "@/data/shortcuts";
 import RuleSift
   from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr_control_rule/RuleSift.vue";
 import {setCallback} from "@/utils/websocket";
 import {linkQualityControl, obtainTheProportionOfMedicalRecords} from "@/api/emr-control/emr-control";
 import {makePercentage} from "@/components/progress/progUtils";
-import {getWindowSize} from "@/utils/window-size";
 import {BizException, ExceptionEnum} from "@/utils/BizException";
-import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";
 import {openSocket, sid} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-func/emr-socket";
+import useVxeTable from "@/utils/cy-use/useVxeTable";
 
 const intervalPatients = ref([])
 const timeType = ref('intervalPatients')
@@ -84,6 +87,10 @@ const ruleReturnData = ref({
   patient: []
 })
 
+const {CyVxeTable} = useVxeTable({
+  localPaging: true
+});
+
 const siftData = ref({})
 
 const queryQualityControlData = async () => {

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr_control_rule/RuleSift.vue

@@ -1,8 +1,6 @@
 <template>
-  <xc-table :local-data="props.data"
-            :default-expand-all="props.defaultExpandAll"
-            :final-height="getWindowSize.h / 1.2">
-    <el-table-column type="expand">
+  <CyVxeTable :data="props.data">
+    <vxe-column type="expand">
       <template #default="{row}">
         <JsonViewer :value="row.mapMessage"
                     copyable
@@ -11,49 +9,47 @@
                     copyable
                     :expandDepth="3"/>
       </template>
-    </el-table-column>
-    <el-table-column prop="inpatientNo" label="住院号" width="120"/>
-    <el-table-column prop="admissTimes" label="次数" width="40"/>
-    <el-table-column prop="name" label="姓名" width="220"/>
-    <el-table-column prop="gradingScale" label="病历评级"/>
-    <el-table-column prop="age" label="年龄"/>
-    <el-table-column prop="clinicDiagStr" label="门（急）诊诊断"/>
-    <el-table-column prop="admissDiag" label="入院诊断"/>
-    <el-table-column prop="admissDate" label="入院时间" width="220"/>
-    <el-table-column prop="deptName" label="入院科室" width="220"/>
-    <el-table-column prop="zkListName" label="转科"/>
-    <el-table-column prop="typing" label="病历分型"/>
-    <el-table-column prop="deptDirectorName" label="主任医生"/>
-    <el-table-column prop="consultPhysicianName" label="主治医生"/>
-    <el-table-column prop="tubeBedDoctorName" label="管床医生" width="220"/>
-    <el-table-column prop="opinion" label="质控意见" show-overflow-tooltip/>
-    <el-table-column prop="approverName" label="审核人" show-overflow-tooltip/>
-    <el-table-column prop="reviewTime" label="审核时间" show-overflow-tooltip/>
-
-    <el-table-column label="病历" fixed="right">
+    </vxe-column>
+    <vxe-column field="inpatientNo" title="住院号" width="120"/>
+    <vxe-column field="admissTimes" title="次数" width="67"/>
+    <vxe-column field="name" title="姓名" width="70"/>
+    <vxe-column field="gradingScale" title="评级" width="62"/>
+    <vxe-column field="age" title="年龄" width="82"/>
+    <vxe-column field="clinicDiagStr" title="门（急）诊诊断" width="108"/>
+    <vxe-column field="admissDiag" title="入院诊断" width="169"/>
+    <vxe-column field="admissDate" title="入院时间" width="120"/>
+    <vxe-column field="deptName" title="入院科室" width="220"/>
+    <vxe-column field="zkListName" title="转科" width="99"/>
+    <vxe-column field="typing" title="病历分型" width="92"/>
+    <vxe-column field="deptDirectorName" title="主任医生" width="100"/>
+    <vxe-column field="consultPhysicianName" title="主治医生" width="100"/>
+    <vxe-column field="tubeBedDoctorName" title="管床医生" width="284"/>
+    <vxe-column field="opinion" title="质控意见" show-overflow-tooltip width="140"/>
+    <vxe-column field="approverName" title="审核人" show-overflow-tooltip width="177"/>
+    <vxe-column field="reviewTime" title="审核时间" show-overflow-tooltip width="120"/>
+    <vxe-column title="病历" fixed="right" width="80">
       <template #default="{row}">
         <el-button type="primary" @click="toEmrClick(row)">病历</el-button>
       </template>
-    </el-table-column>
-    <el-table-column prop="mapMessage" label="详情" show-overflow-tooltip>
+    </vxe-column>
+    <vxe-column field="mapMessage" title="详情" show-overflow-tooltip width="250">
       <template #header>
         <el-button @click="exportExcel">导出Excel</el-button>
       </template>
       <template #default="{row}">
         {{ mapToStr(row) }}
       </template>
-    </el-table-column>
-  </xc-table>
+    </vxe-column>
+  </CyVxeTable>
 </template>
 
 <script setup>
-import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";
-import {getWindowSize} from "@/utils/window-size";
 import {Export} from "@/utils/ExportExcel";
 import {
   emrStateEnum,
   getEmrUrl
 } from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";
+import useVxeTable from "@/utils/cy-use/useVxeTable";
 
 const props = defineProps({
   data: Array,
@@ -63,6 +59,10 @@ const props = defineProps({
   }
 })
 
+const {CyVxeTable} = useVxeTable({
+  localPaging: true
+});
+
 const exportExcel = () => {
   const title = {
     inpatientNo: '住院号',