右键菜单

2025-10-31 15:24:11 +08:00 · 2025-10-31 15:24:11 +08:00 · 5ffed3b4c7
commit 5ffed3b4c7
parent 8a13951dc8
10 changed files with 411 additions and 142 deletions
--- a/src/components/contextMenu/index.vue
+++ b/src/components/contextMenu/index.vue
@ -0,0 +1,185 @@
+<template>
+  <div class="context-menu-wrapper" @contextmenu.prevent="handleContextMenu($event)">
+    <!-- 插槽：包裹需要绑定右键菜单的内容 -->
+    <slot />
+
+    <!-- 右键菜单 -->
+    <div v-if="visible" class="hospital-menu" :style="{
+      top: `${top}px`,
+      left: `${left}px`,
+      display: visible ? 'block' : 'none',
+      width: `${menuWidth}px`
+    }" @click.stop @contextmenu.prevent>
+      <template v-for="(item, index) in items" :key="index">
+        <div v-if="item.type === 'divider'" class="menu-divider"></div>
+        <div v-if="item.type !== 'divider'" class="menu-item" :class="{
+          danger: item.danger,
+          disabled: item.disabled
+        }" @click="handleItemClick(item)">
+          <span class="menu-shortcut" v-if="item.shortcut">{{ item.shortcut }}</span>
+          <span class="menu-label">{{ item.label }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ContextMenuItem } from '@/types/index';
+import emitter from '@/utils/mitt';
+
+// 组件Props
+const props = withDefaults(defineProps<{
+  items: ContextMenuItem[];
+  autoClose?: boolean;
+  menuWidth?: number | string;
+}>(), {
+  autoClose: true,
+  menuWidth: 180,
+});
+
+// 组件Emits
+const emit = defineEmits<{
+  (e: 'select', item: ContextMenuItem): void;
+  (e: 'open'): void;
+  (e: 'close'): void;
+}>();
+
+// 菜单状态
+const visible = ref(false);
+const top = ref(0);
+const left = ref(0);
+
+const handleContextMenu = (e: MouseEvent) => {
+  // 打开当前菜单关闭其他菜单
+  emitter.emit('closeAllContextMenus');
+
+  top.value = Math.min(e.clientY, window.innerHeight - 200);
+  left.value = Math.min(e.clientX, window.innerWidth - 200);
+  visible.value = true;
+  emit('open');
+};
+
+// 处理菜单项点击
+const handleItemClick = (item: ContextMenuItem) => {
+  if (item.disabled) return;
+  emit('select', item);
+
+
+  if (props.autoClose !== false) {
+    hideMenu();
+  }
+};
+
+// 隐藏菜单
+const hideMenu = () => {
+  if (visible.value) {
+    visible.value = false;
+    emit('close');
+  }
+};
+
+// 点击外部区域关闭菜单
+const handleClickOutside = (e: MouseEvent) => {
+  hideMenu();
+};
+
+// 键盘事件处理 
+const handleKeyDown = (e: KeyboardEvent) => {
+  // console.log('e==>', e);
+  if (e.key === 'Escape') {
+    hideMenu();
+  }
+  if (e.key === 'e' && visible.value) {
+    console.log('e==>', e);
+  }
+
+};
+
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('keydown', handleKeyDown);
+
+  emitter.on('closeAllContextMenus', () => {
+    if (visible.value) {
+      hideMenu();
+    }
+  });
+});
+
+// 卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('keydown', handleKeyDown);
+  emitter.off('closeAllContextMenus');
+});
+</script>
+
+<style scoped>
+.context-menu-wrapper {
+  position: relative;
+  height: 100%;
+}
+
+.hospital-menu {
+  position: fixed;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: .25rem;
+  box-shadow: 0 .125rem .75rem rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  padding: .3125rem 0;
+  font-size: .8125rem;
+  font-family: SourceHanSansCN, SourceHanSansCN;
+}
+
+.menu-item {
+  padding: .3125rem .625rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.2s;
+  /* justify-content: space-between; */
+}
+
+.menu-item:hover:not(.disabled) {
+  background-color: #e6f7ff;
+  color: #165DFF;
+}
+
+.menu-item.disabled {
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.menu-item i {
+  margin-right: .5rem;
+  font-size: .875rem;
+  width: 1rem;
+  text-align: center;
+}
+
+
+
+.menu-divider {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: .25rem 0;
+}
+
+.menu-item.danger {
+  color: #f53f3f;
+}
+
+.menu-item.danger:hover:not(.disabled) {
+  background-color: #fff1f0;
+  color: #f53f3f;
+}
+
+.menu-shortcut {
+  color: #909399;
+  margin-right: .3125rem;
+}
+</style>
--- a/src/components/selectSearch/index.vue
+++ b/src/components/selectSearch/index.vue
@ -1,6 +1,6 @@
 <template>
-  <el-popover :visible="selectVisible" placement="bottom" :width="'16vw'" @after-enter="initClickOutside">
-    <el-form :model="queryParams" class="query-form" label-width="90px">
+  <el-popover :visible="selectVisible" placement="bottom" :width="'18vw'" @after-enter="initClickOutside">
+    <el-form :model="queryParams" class="query-form" label-width="5.625rem">
      <!-- 病人类型选择 -->
      <el-form-item label="病人类型：" prop="brly">
        <el-select v-model="queryParams.brly" placeholder="全部" clearable>
@ -26,7 +26,7 @@
      <el-row>
        <el-col :span="8">
          <!-- 自审状态选择 -->
-          <el-form-item label-width="10px" prop="autojgbz">
+          <el-form-item label-width="0.625" prop="autojgbz">
            <el-checkbox v-model="queryParams.autojgbz" true-value="1" false-value=""> 自审 </el-checkbox>
          </el-form-item>
        </el-col>
@ -56,7 +56,7 @@
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery" :size="props.size">确认查询</el-button>
-        <el-button @click="handleReset" style="margin-left: 8px" :size="props.size">重置</el-button>
+        <el-button @click="handleReset" style="margin-left: 0.5rem" :size="props.size">重置</el-button>
      </el-form-item>
    </el-form>

--- a/src/types/Object.d.ts
+++ b/src/types/Object.d.ts
@ -1,19 +0,0 @@
-export interface LabReportInstr {
-    index?: number; //序号
-    yq: string; //仪器
-    xh: number; //序号
-    bgdh: string; //报告单号
-    yljg: string; //医疗机构
-    type: string; //使用类型
-    condition: string; //使用条件
-    status?: string; //状态
-}
-
-export interface DictData {
-  XMGL?: Array<any>;
-  ITEMCLASS?: Array<any>;
-  YQDL?: Array<any>;
-  xmlbList?: Array<any>;
-  YQ?: Array<any>;
-  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
-}
--- a/src/types/Object.ts
+++ b/src/types/Object.ts
@ -0,0 +1,38 @@
+export interface LabReportInstr {
+  index?: number; //序号
+  yq: string; //仪器
+  xh: number; //序号
+  bgdh: string; //报告单号
+  yljg: string; //医疗机构
+  type: string; //使用类型
+  condition: string; //使用条件
+  status?: string; //状态
+}
+
+export interface DictData {
+  XMGL?: Array<any>;
+  ITEMCLASS?: Array<any>;
+  YQDL?: Array<any>;
+  xmlbList?: Array<any>;
+  YQ?: Array<any>;
+  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
+}
+
+
+// 定义菜单项的类型
+export interface ContextMenuItem {
+  // 菜单项类型：普通项或分隔线
+  type?: 'item' | 'divider';
+  // 菜单项显示文本
+  label?: string;
+  // 菜单项唯一标识，用于事件处理
+  action?: string;
+  // 是否为危险操作（如删除）
+  danger?: boolean;
+  // 是否禁用
+  disabled?: boolean;
+  // 快捷键提示文本
+  shortcut?: string;
+  // 菜单项的子级菜单项
+  props?: Record<string, any>;
+}
--- a/src/types/SelectTable.d.ts
+++ b/src/types/SelectTable.d.ts
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -3,4 +3,4 @@
 //对象文件
 export * from './Object';

-export * from './SelectTable';
+export * from './SelectTable';
--- a/src/views/liswork/work/components/labpat.vue
+++ b/src/views/liswork/work/components/labpat.vue
@ -5,7 +5,7 @@
        @keyup.enter="handleInputFocus" />
      <el-button type="primary" :size="aotuSize">打印条码</el-button>
    </div>
-    <el-form :model="labPat" label-width="70px" class="compact-form" label-position="right">
+    <el-form :model="labPat" label-width="5rem" class="compact-form" label-position="right">
      <div :class="['sh_box', getColor(lastJgbz)]" v-if="lastJgbz != null && lastJgbz != 0 && lastJgbz != 'C'">
        <div class="text">{{ getLableType(lastJgbz) }}</div>
      </div>
@ -398,7 +398,7 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .labpat_box {
-  height: calc(90vh - 73px);
+  height: calc(90vh - 4.375rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
--- a/src/views/liswork/work/components/labpatlist.vue
+++ b/src/views/liswork/work/components/labpatlist.vue
@ -1,67 +1,85 @@
 <template>
  <div class="table-container">
-    <CommonTable :table-data="labPatList" :loading="loading" :columns="tableColumns" :dict-data="dictData"
-      :row-config="{ isHover: true, keyField: 'ybh' }" @current-change="handleRowClick" size="small"
-      :row-style="rowStyle" :cell-style="cellStyle" class="mytable-style" ref="tableRef" :enable-column-drag="true"
-      @column-drag-end="handleColumnDragEnd">
-      <!-- 完成状态列 -->
-      <template #finish="{ row }">
-        <svg-icon v-if="row.finish == 1" icon-class="lvgou" />
-        <svg-icon v-else icon-class="hongcha" />
-      </template>
-      <template #jgbz="{ row }">
-        <el-checkbox :model-value="row.jgbz == '2'" readonly />
-      </template>
-      <template #alarmflag="{ row }">
-        <el-checkbox :model-value="row.alarmflag == '1'" readonly />
-      </template>
+    <ContextMenu :items="contextMenuItems" @select="handleMenuSelect" menu-width="200">
+      <CommonTable :table-data="labPatList" :loading="loading" :columns="tableColumns" :dict-data="dictData"
+        :row-config="{ isHover: true, keyField: 'ybh' }" @current-change="handleRowClick" size="small"
+        :row-style="rowStyle" :cell-style="cellStyle" class="mytable-style" ref="tableRef" :enable-column-drag="true"
+        @column-drag-end="handleColumnDragEnd">
+        <!-- 完成状态列 -->
+        <template #finish="{ row }">
+          <svg-icon v-if="row.finish == 1" icon-class="lvgou" />
+          <svg-icon v-else icon-class="hongcha" />
+        </template>
+        <template #jgbz="{ row }">
+          <el-checkbox :model-value="row.jgbz == '2'" readonly />
+        </template>
+        <template #alarmflag="{ row }">
+          <el-checkbox :model-value="row.alarmflag == '1'" readonly />
+        </template>

-      <template #brly="{ row }">
-        {{ formatDict(row.brly, 'PT') }}
-      </template>
-      <template #brxm="{ row }">
-        <span :style="{ color: row.jzbz == '1' ? '#f00' : '' }">{{ row.brxm }}</span>
-      </template>
-      <template #brxb="{ row }">
-        {{ formatDict(row.brxb, 'SX') }}
-      </template>
-      <template #nldw="{ row }">
-        {{ formatDict(row.nldw, 'AU') }}
-      </template>
-      <template #yblx="{ row }">
-        {{ formatDict(row.yblx, 'BT') }}
-      </template>
-      <template #ksdh="{ row }">
-        {{ formatDict(row.ksdh, 'DP') }}
-      </template>
-      <template #yhdh="{ row }">
-        {{ formatDict(row.yhdh, 'SRD') }}
-      </template>
+        <template #brly="{ row }">
+          {{ formatDict(row.brly, 'PT') }}
+        </template>
+        <template #brxm="{ row }">
+          <span :style="{ color: row.jzbz == '1' ? '#f00' : '' }">{{ row.brxm }}</span>
+        </template>
+        <template #brxb="{ row }">
+          {{ formatDict(row.brxb, 'SX') }}
+        </template>
+        <template #nldw="{ row }">
+          {{ formatDict(row.nldw, 'AU') }}
+        </template>
+        <template #yblx="{ row }">
+          {{ formatDict(row.yblx, 'BT') }}
+        </template>
+        <template #ksdh="{ row }">
+          {{ formatDict(row.ksdh, 'DP') }}
+        </template>
+        <template #yhdh="{ row }">
+          {{ formatDict(row.yhdh, 'SRD') }}
+        </template>

-      <template #autojgbz="{ row }">
-        <el-checkbox :model-value="row.autojgbz === '1'" readonly />
-      </template>
+        <template #autojgbz="{ row }">
+          <el-checkbox :model-value="row.autojgbz === '1'" readonly />
+        </template>

-      <template #dybz="{ row }">
-        <el-checkbox :model-value="row.dybz === '1'" readonly />
-      </template>
+        <template #dybz="{ row }">
+          <el-checkbox :model-value="row.dybz === '1'" readonly />
+        </template>

-      <template #fslx="{ row }">
-        <el-checkbox :model-value="row.dybz === '1'" readonly />
-      </template>
+        <template #fslx="{ row }">
+          <el-checkbox :model-value="row.dybz === '1'" readonly />
+        </template>

-      <template #yljg="{ row }">
-        {{ formatDict(row.yljg, 'HOS') }}
-      </template>
-    </CommonTable>
+        <template #yljg="{ row }">
+          {{ formatDict(row.yljg, 'HOS') }}
+        </template>
+      </CommonTable>
+    </ContextMenu>
+
+
+    <el-dialog v-model="show" title="标准结果作为某标本复查结果" width="300" :close-on-click-modal="false" :draggable="true"
+      @close="closeHandle">
+      <div>
+        仪器：
+        <yqSelectTable v-model:data="tableKey.yq" width="200px" />
+        <div>请输入复查的样本号：</div>
+        <el-input v-model="fcYbh" />
+      </div>
+      <div style="text-align: center; width: 100%;">
+        <el-button type="primary" @click="subHandle()"> 确认 </el-button>
+        <el-button @click="closeHandle">取消</el-button>
+      </div>
+    </el-dialog>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, nextTick, onMounted } from 'vue'
 import CommonTable from '@/components/vxeTable/index.vue'
-import { color } from 'echarts'
-
+import ContextMenu from "@/components/contextMenu/index.vue";
+import { ContextMenuItem } from '@/types/index'
+import yqSelectTable from '@/components/SelectTable/YQSelectTable/index.vue'
 const props = defineProps({
  labPatList: {
    type: Array,
@ -82,7 +100,22 @@ const props = defineProps({
 })

 const emits = defineEmits(['select'])
+const show = ref(false)

+const fcYbh = ref('')
+const subHandle = () => {
+}
+const closeHandle = () => {
+  show.value = false
+}
+
+const contextMenuItems = computed<ContextMenuItem[]>(() => [
+  { label: '标准结果作为某标本复查结果', action: 'view' }
+]);
+const handleMenuSelect = ((item: ContextMenuItem) => {
+  console.log('item==>', item);
+  show.value = true
+})
 // 表格列配置
 const tableColumns = ref([
  { field: 'finish', title: '完', width: 20, align: 'center', slotName: 'finish', resizable: true },
@ -180,19 +213,6 @@ defineExpose({

 <style lang="scss" scoped>
 .table-container {
-  height: calc(90vh - 141px);
-  display: flex;
-  flex-direction: column;
-}
-
-.mytable-style {
-  flex: 1;
-}
-
-
-
-.common-table {
-  flex: 1;
-  border-color: #e5e7eb;
+  height: 76vh;
 }
 </style>
--- a/src/views/liswork/work/components/labresult.vue
+++ b/src/views/liswork/work/components/labresult.vue
@ -15,49 +15,50 @@
        <el-button type="primary" plain icon="View" :size="aotuSize" @click="previewHandle">预览</el-button>
      </div>
    </div>
+    <ContextMenu :items="contextMenuItems" @select="handleMenuSelect">
+      <CustomTable ref="tableRef" :data="tableData" :columns="columns" :config="tableConfig" :enable-column-drag="true"
+        @row-click="handleRowClick" @column-drag-end="handleColumnDragEnd" class="custom-table-container">
+        <template #index="{ row, $index }">
+          <el-popover effect="dark" v-if="row.cp_modify == 1" @before-enter="beforeEnter(row)" width="300">
+            <template #reference>
+              <div style="width: 100%;">{{ $index + 1 }}</div>
+            </template>
+            <template #default>
+              <el-row>
+                <el-col>修改前结果：{{ lastResult.csjg }}</el-col>
+                <el-col>修改日期：{{ lastResult.xgrq }}</el-col>
+                <el-col>修改人：{{ formatYs(lastResult.xgr) }}</el-col>
+                <el-col>上次审核时间：{{ lastResult.shsj }}</el-col>
+                <el-col>上次审核人：{{ formatYs(lastResult.shys) }}</el-col>
+              </el-row>
+            </template>
+          </el-popover>
+          <span v-else>{{ $index + 1 }}</span>
+        </template>

-    <CustomTable ref="tableRef" :data="tableData" :columns="columns" :config="tableConfig" :enable-column-drag="true"
-      @row-click="handleRowClick" @column-drag-end="handleColumnDragEnd" class="custom-table-container">
-      <template #index="{ row, $index }">
-        <el-popover effect="dark" v-if="row.cp_modify == 1" @before-enter="beforeEnter(row)" width="300">
-          <template #reference>
-            <div style="width: 100%;">{{ $index + 1 }}</div>
-          </template>
-          <template #default>
-            <el-row>
-              <el-col>修改前结果：{{ lastResult.csjg }}</el-col>
-              <el-col>修改日期：{{ lastResult.xgrq }}</el-col>
-              <el-col>修改人：{{ formatYs(lastResult.xgr) }}</el-col>
-              <el-col>上次审核时间：{{ lastResult.shsj }}</el-col>
-              <el-col>上次审核人：{{ formatYs(lastResult.shys) }}</el-col>
-            </el-row>
-          </template>
-        </el-popover>
-        <span v-else>{{ $index + 1 }}</span>
-      </template>
-
-      <template #csjg="{ row }">
-        <el-input v-model="row.csjg" v-if="labPat.jgbz == 0 || labPat.jgbz == null" size="small"
-          class="full-width-input" @change="handleCsjgEnter(row)" @dblclick="handleInputFocus(row)" />
-        <span v-else>{{ row.csjg }}</span>
-      </template>
-      <template #cp_compa="{ column, $index }">
-        {{ lastjyrq }}
-      </template>
-      <template #refs="{ row }">
-        {{ row.refs }}{{ row.dw }}
-      </template>
-      <template #od="{ row }">
-        <el-input v-model="row.od" v-if="labPat.jgbz == 0 || labPat.jgbz == null" size="small" class="full-width-input"
-          @change="handleCsjgEnter(row)" />
-        <span v-else>{{ row.od }}</span>
-      </template>
-      <template #cutoff="{ row }">
-        <el-input v-model="row.cutoff" v-if="labPat.jgbz == 0 || labPat.jgbz == null" size="small"
-          class="full-width-input" @change="handleCsjgEnter(row)" />
-        <span v-else>{{ row.cutoff }}</span>
-      </template>
-    </CustomTable>
+        <template #csjg="{ row }">
+          <el-input v-model="row.csjg" v-if="labPat.jgbz == 0 || labPat.jgbz == null" size="small"
+            class="full-width-input" @change="handleCsjgEnter(row)" @dblclick="handleInputFocus(row)" />
+          <span v-else>{{ row.csjg }}</span>
+        </template>
+        <template #cp_compa="{ column, $index }">
+          {{ lastjyrq }}
+        </template>
+        <template #refs="{ row }">
+          {{ row.refs }}{{ row.dw }}
+        </template>
+        <template #od="{ row }">
+          <el-input v-model="row.od" v-if="labPat.jgbz == 0 || labPat.jgbz == null" size="small"
+            class="full-width-input" @change="handleCsjgEnter(row)" />
+          <span v-else>{{ row.od }}</span>
+        </template>
+        <template #cutoff="{ row }">
+          <el-input v-model="row.cutoff" v-if="labPat.jgbz == 0 || labPat.jgbz == null" size="small"
+            class="full-width-input" @change="handleCsjgEnter(row)" />
+          <span v-else>{{ row.cutoff }}</span>
+        </template>
+      </CustomTable>
+    </ContextMenu>
    <!-- <div class="flex-between mt10">
      <div>
         <el-button class="btn_green" @click=" ">初报</el-button>
@ -158,7 +159,7 @@
 </template>

 <script setup>
-import { ref, toRefs, watch, nextTick, onMounted } from "vue";
+import { ref, toRefs, watch, nextTick, onMounted, computed } from "vue";
 import {
  check1, check2, uncheck2, unconfirmlog, checkuser, reglimit, queryXmInfo, deleteresult, changeresult,
  newresult, queryXmVal, printListwork, getresultchangelog, setinputmdl, saveResult
@ -173,6 +174,7 @@ import dayjs from 'dayjs';
 import { listUser } from '@/api/system/user.js'
 import emitter from "@/utils/mitt";
 import { useCommonStore } from "@/store/modules/commonStore";
+import ContextMenu from "@/components/contextMenu/index.vue";

 // 组件属性定义
 const props = defineProps({
@ -245,8 +247,44 @@ watch(() => props.resultSysList, (newVal) => {
  });
 }, { deep: true });

+// 右键菜单配置
+const contextMenuItems = computed(() => [
+  { label: '打印预览', action: 'view', shortcut: 'V', },
+  { label: 'PDF报告预览', action: 'bgyl', shortcut: 'P', },
+  { label: '合并病人当前其他结果', action: 'merge', shortcut: 'B', },
+  { type: 'divider' },
+  { label: '锁定报告', action: 'Lock', shortcut: 'L', },
+  { label: '解除报告锁定', action: 'lift', shortcut: 'W', },
+  { type: 'divider' },
+  { label: '删除记录', action: 'delete', danger: true, shortcut: 'd', }
+]);

+// 处理菜单选择
+const handleMenuSelect = (item) => {
+  // 根据不同的操作执行相应逻辑
+  switch (item.action) {
+    case 'view':
+      alert(`打印预览`);
+      break;
+    case 'bgyl':
+      alert(`PDF报告预览`);
+      break;
+    case 'merge':
+      alert(`合并病人当前其他结果`);
+      break;
+    case 'Lock':
+      alert(`锁定报告`);
+      break;
+    case 'lift':
+      alert(`解除报告锁定`);
+      break;
+    case 'delete':
+      if (confirm(`确定要删除患者的记录吗？`)) {

+      }
+      break;
+  }
+};
 const columns = ref([
  { label: 'No', prop: 'index', width: 30, align: 'center', visible: true, slot: "index" },
  { label: "复", prop: "redo_flag", width: 30, align: 'center', visible: true, },
@ -306,7 +344,7 @@ const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
 const tableConfig = ref({
  border: true, // 边框
  height: '100%', // 高度
-  maxHeight: '77vh', // max高度
+  maxHeight: '78vh', // max高度
  highlightCurrentRow: true, // 高亮当前行
  cellStyle: cellStyle,
 })
@ -837,7 +875,7 @@ const formatYs = (v) => {

 <style scoped lang="scss">
 .result-container {
-  height: calc(90vh - 74px);
+  height: calc(90vh - 4.3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
@ -849,6 +887,6 @@ const formatYs = (v) => {
 }

 .custom-table-container {
-  flex: 1;
+  height: 100%;
 }
 </style>
--- a/src/views/liswork/work/index.vue
+++ b/src/views/liswork/work/index.vue
@ -14,7 +14,7 @@
              </el-col>
              <el-col :span="6">
                <el-form-item label="日期：" prop="jyrq">
-                  <el-date-picker v-model="queryParams.jyrq" type="date" label-width="20px" placeholder="检验日期"
+                  <el-date-picker v-model="queryParams.jyrq" type="date" label-width="1.25rem" placeholder="检验日期"
                    value-format="YYYY-MM-DD" :clearable="false" @change="fetchlabPatList"
                    style="width:100%"></el-date-picker>
                </el-form-item>
@ -62,9 +62,9 @@
      <el-col :span="11">
        <div>
          <tabView :tabList="tabList" v-model:activeTab="activeTab" />
-          <div class="box-shadow">
+          <div class="box-shadow right_box">
            <template v-if="activeTab == 1">
-              <div class="flex-between mb10">
+              <div class="flex-between">
                <div>
                  <el-button type="primary" :size="aotuSize" icon="RefreshRight" @click="fetchlabPatList">刷新</el-button>
                  <el-button type="danger" :size="aotuSize" @click="delSampleHd">删除</el-button>
@ -614,7 +614,6 @@ getSysList()
 onMounted(async () => {
  // 加载病人来源字典
  const dictRefs = await comDict('PT', 'AU', 'SX', 'DP', 'BT', 'SRD', 'HOS', 'ST');
-
  // 从 ref 中获取实际数据
  dictData.value = {
    PT: toRaw(dictRefs.PT.value) || [],
@ -637,8 +636,16 @@ onMounted(async () => {
 .box-shadow {
  box-shadow: 2px 2px 4px 0px rgba(206, 217, 234, 0.7);
  border-radius: .75rem;
-  padding: .625rem;
+  padding: .5rem;
  background-color: #fff;
+
+  .flex-between {
+    margin-bottom: .5rem;
+  }
+}
+
+.right_box {
+  height: calc(90vh - 3.4rem);
 }

 .compact-form {