右键菜单

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>

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>
 

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; // 添加索引签名以支持动态访问
-}

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>;
+}

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;

src/views/liswork/work/components/labpatlist.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="table-container">
+    <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"
@@ -54,14 +55,31 @@
           {{ 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>

src/views/liswork/work/components/labresult.vue

@@ -15,7 +15,7 @@
         <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 }">
@@ -48,8 +48,8 @@
           {{ 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)" />
+          <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 }">
@@ -58,6 +58,7 @@
           <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>

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 {