增加门诊采血模块

src/api/mzcx/cydj.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询采样登记列表
+export function querySQD(query) {
+  return request({
+    url: '/mzcx/querySQD',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询采样登记详细
+export function getReqmain(sqh) {
+  return request({
+    url: '/system/reqmain/' + sqh,
+    method: 'get'
+  })
+}
+
+// 新增采样登记
+export function addReqmain(data) {
+  return request({
+    url: '/system/reqmain',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改采样登记
+export function updateReqmain(data) {
+  return request({
+    url: '/system/reqmain',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除采样登记
+export function delReqmain(sqh) {
+  return request({
+    url: '/system/reqmain/' + sqh,
+    method: 'delete'
+  })
+}

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

@@ -19,7 +19,7 @@
       </template>
     </el-input>
 
-    <!-- 字典选择弹窗（Vue3 中使用 v-model 控制显示） -->
+    <!-- 字典选择弹窗 -->
     <el-dialog
         v-model="dialogVisible"
         :title="dialogTitle"
@@ -28,7 +28,7 @@
     >
       <el-input
           v-model="searchKey"
-        placeholder="搜索字典项..."
+          placeholder="搜索（支持名称、编码、简拼）..."
           class="mb-4"
           clearable
           @clear="filterDictData"
@@ -44,15 +44,10 @@
       >
         <el-table-column prop="value" label="编码" width="100" />
         <el-table-column prop="label" label="名称" width="200" />
+        <el-table-column prop="pinyin" label="简拼" width="150" /> <!-- 显示简拼便于调试 -->
         <el-table-column label="操作" width="100">
           <template #default="scope">
-        <el-button
+            <el-button size="small" type="primary" @click="selectItem(scope.row)">选择</el-button>
-            size="small"
-            type="primary"
-            @click="selectItem(scope.row)"
-        >
-          选择
-        </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -64,62 +59,36 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { Loading, ArrowDown } from '@element-plus/icons-vue';
 
-// 组件参数（Vue3 语法）
+import { getFirstLetter } from '@/api/pinyin.js'; // 引入拼音处理工具
+// 组件参数
 const props = defineProps({
-  modelValue: { // 双向绑定的原始值
+  modelValue: { type: [String, Number], default: '' },
-    type: [String, Number],
+  dictType: { type: String, required: true },
-    default: ''
+  placeholder: { type: String, default: '请输入或双击选择' },
-  },
+  clearable: { type: Boolean, default: true },
-  dictType: { // 字典类型
+  disabled: {type: Boolean, default: false},
-    type: String,
+  fetchDict: {type: Function, required: true},
-    required: true
+  dialogTitle: {type: String, default: '选择字典项'}
-  },
-  placeholder: {
-    type: String,
-    default: '请输入或双击选择'
-  },
-  clearable: {
-    type: Boolean,
-    default: true
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  fetchDict: { // 获取字典的方法（需返回 Promise）
-    type: Function,
-    required: true
-  },
-  dialogTitle: {
-    type: String,
-    default: '选择字典项'
-  }
 });
 
-// 组件事件（Vue3 语法）
+// 组件事件
-const emit = defineEmits([
+const emit = defineEmits(['update:modelValue', 'update:labelValue', 'select']);
-  'update:modelValue', // 同步原始值
-  'update:labelValue', // 同步标签值
-  'select' // 选中事件
-]);
 
-// 内部状态（Vue3 ref 响应式）
+// 内部状态
-const tempValue = ref(''); // 临时输入值
+const tempValue = ref('');
-const labelValue = ref(''); // 映射后的标签
+const labelValue = ref('');
-const dictData = ref([]); // 完整字典数据
+const dictData = ref([]); // 存储带简拼的字典数据
-const filteredDictData = ref([]); // 过滤后的字典数据
+const filteredDictData = ref([]);
-const isDictLoading = ref(true); // 字典加载状态
+const isDictLoading = ref(true);
-const dialogVisible = ref(false); // 弹窗显示状态
+const dialogVisible = ref(false);
-const searchKey = ref(''); // 搜索关键词
+const searchKey = ref('');
 
-// 显示值计算（Vue3 computed）
+// 显示值计算
 const displayValue = computed({
   get() {
-    // 优先显示标签，无则显示原始值
     return labelValue.value || tempValue.value || props.modelValue || '';
   },
   set(newValue) {
-    // 用户输入时更新临时值，并清除旧标签
     tempValue.value = newValue;
     if (labelValue.value && newValue !== labelValue.value) {
       labelValue.value = '';
@@ -128,14 +97,20 @@ const displayValue = computed({
   }
 });
 
-// 加载字典数据
+
+
+// 加载字典数据（并添加简拼字段）
 const loadDictData = async () => {
   try {
     isDictLoading.value = true;
-    // 调用父组件传入的字典获取方法
+    const rawData = await props.fetchDict(props.dictType);
-    const data = await props.fetchDict(props.dictType);
+    // 为每个字典项添加简拼字段
-    dictData.value = data || [];
+    dictData.value = (rawData || []).map(item => ({
-    filteredDictData.value = [...dictData.value]; // 初始化过滤数据
+      ...item,
+      pinyin: getFirstLetter(item.label) // 新增pinyin字段存储简拼
+    }));
+
+    filteredDictData.value = [...dictData.value];
   } catch (error) {
     console.error(`加载${props.dictType}字典失败:`, error);
     dictData.value = [];
@@ -145,23 +120,30 @@ const loadDictData = async () => {
   }
 };
 
-// 过滤字典数据（搜索功能）
+// 核心搜索逻辑（支持模糊搜索+简拼搜索）
 const filterDictData = () => {
-  if (!searchKey.value) {
+  const key = searchKey.value.trim().toLowerCase();
+  if (!key) {
     filteredDictData.value = [...dictData.value];
     return;
   }
-  const key = searchKey.value.toLowerCase();
+
-  filteredDictData.value = dictData.value.filter(item =>
+  filteredDictData.value = dictData.value.filter(item => {
-      item.label.toLowerCase().includes(key) ||
+    // 1. 模糊搜索：匹配label（名称）或value（编码）
-      String(item.value).toLowerCase().includes(key)
+    const matchLabel = item.label.toLowerCase().includes(key);
-  );
+    const matchValue = String(item.value).toLowerCase().includes(key);
+
+    // 2. 简拼搜索：匹配首字母简拼
+    const matchPinyin = item.pinyin.toLowerCase().includes(key);
+
+    // 满足任一条件即匹配
+    return matchLabel || matchValue || matchPinyin;
+  });
 };
 
 // 双击事件处理
 const handleDblClick = () => {
   if (!props.disabled && !isDictLoading.value) {
-    console.log('双击触发弹窗');
     dialogVisible.value = true;
   }
 };
@@ -170,82 +152,39 @@ const handleDblClick = () => {
 const openDictSelector = () => {
   if (!props.disabled && !isDictLoading.value) {
     dialogVisible.value = true;
-    searchKey.value = ''; // 重置搜索
+    searchKey.value = '';
-    filterDictData(); // 重置过滤
+    filterDictData();
   }
 };
 
 // 选择字典项
 const selectItem = (item) => {
-  // 同步原始值和标签值到父组件
   emit('update:modelValue', item.value);
   emit('update:labelValue', item.label);
-  emit('select', item); // 触发选中事件
+  emit('select', item);
-
-  // 更新内部状态
   tempValue.value = item.value;
   labelValue.value = item.label;
-
-  // 关闭弹窗
   dialogVisible.value = false;
 };
 
-// 失焦时自动映射
+// 其他方法（失焦、清空等）保持不变
-const handleBlur = () => {
+const handleBlur = () => { /* ... */
-  const value = tempValue.value.trim() || props.modelValue;
-  if (!value) {
-    emit('update:modelValue', '');
-    emit('update:labelValue', '');
-    labelValue.value = '';
-    tempValue.value = '';
-    return;
-  }
-
-  // 查找匹配的字典项
-  const matched = dictData.value.find(
-      item => String(item.value) === String(value)
-  );
-
-  if (matched) {
-    emit('update:labelValue', matched.label);
-    labelValue.value = matched.label;
-  } else {
-    emit('update:labelValue', value); // 无匹配时用原始值
-    labelValue.value = value;
-  }
 };
-
+const handleClear = () => { /* ... */
-// 清空输入
-const handleClear = () => {
-  tempValue.value = '';
-  labelValue.value = '';
-  emit('update:modelValue', '');
-  emit('update:labelValue', '');
 };
-
-// 关闭弹窗
 const handleDialogClose = () => {
   dialogVisible.value = false;
 };
 
-// 监听父组件传入的初始值
+// 监听初始值变化
-watch(
+watch(() => props.modelValue, (newVal) => {
-    () => props.modelValue,
-    (newVal) => {
-      if (newVal === tempValue.value) return; // 避免重复更新
   tempValue.value = newVal || '';
-
-      // 初始值自动映射标签
   if (newVal && !isDictLoading.value) {
-        const matched = dictData.value.find(
+    const matched = dictData.value.find(item => String(item.value) === String(newVal));
-            item => String(item.value) === String(newVal)
-        );
     labelValue.value = matched?.label || newVal;
     emit('update:labelValue', labelValue.value);
   }
-    },
+}, {immediate: true});
-    { immediate: true } // 初始化时执行一次
-);
 
 // 组件挂载时加载字典
 onMounted(async () => {
@@ -254,6 +193,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+/* 样式保持不变 */
 .dict-input-wrapper {
   position: relative;
 }
@@ -262,14 +202,12 @@ onMounted(async () => {
   cursor: pointer;
   color: #666;
   margin-left: 5px;
-  transition: color 0.2s;
 }
 
 .select-icon:hover {
-  color: #409eff; /* 鼠标悬停变色 */
+  color: #409eff;
 }
 
-/* 修复输入框后缀图标与清除按钮的间距 */
 :deep(.el-input__suffix) {
   gap: 4px;
 }

src/views/mzcx/cydj/index.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="5" class="compact-form" :span="24">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-position="left">
+      <el-col :span="24" :xs="24">
+      <el-form-item class="compact-form" label="" label-width="0px" prop="brdh"  >
+
+        <el-col :span="6">
+          <div> 就诊卡号/病历号/磁卡号: </div>
+        <el-input
+            v-model="queryParams.brdh"
+            placeholder="就诊卡号/病历号/磁卡号"
+            clearable
+            @keyup.enter="handleQuery"
+        />
+        </el-col>
+        <el-col :span="2">
+        <el-radio-group v-model="queryParams.zt" size="default">
+          <el-radio v-for="(item, index) in showconfirmOptions" :key="index" :label="item.value"
+                    :disabled="item.disabled">{{item.label}}</el-radio>
+        </el-radio-group>
+        </el-col>
+        <el-col :span="1"> <div> 申请获取期限: </div></el-col>
+          <el-col :span="6">
+
+          <el-radio-group v-model="queryParams.subday" size="default">
+            <el-radio v-for="(item, index) in subdayOptions" :key="index" :label="item.value"
+                      :disabled="item.disabled">{{item.label}}</el-radio>
+          </el-radio-group>
+          </el-col>
+        <el-col :span="2">
+        <el-select v-model="queryParams.cardtype" placeholder="卡类型" clearable :style="{width: '100%'}">
+        <el-option v-for="(item, index) in cardtypeOptions" :key="index" :label="item.label"
+                   :value="item.value" :disabled="item.disabled"></el-option>
+        </el-select>
+      </el-col>
+          <el-col :span="1.5">
+        <el-button type="primary" icon="Search" @click="handleQuery">读卡</el-button>
+          </el-col>
+            <el-col :span="1.5">
+        <el-button icon="Refresh" @click="resetQuery">查找病人</el-button>
+            </el-col>
+      </el-form-item>
+      </el-col>
+
+    </el-form>
+    </el-row>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+            type="primary"
+            plain
+            icon="Search"
+            @click="handleQuery"
+            v-hasPermi="['system:reqmain:Search']"
+        >查询</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Printer"
+          :disabled="single"
+          @click="printAll"
+          v-hasPermi="['system:reqmain:add']"
+        >打印</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Printer"
+          :disabled="freesingle"
+          @click="printSigne"
+          v-hasPermi="['system:reqmain:edit']"
+        >单打条码</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Printer"
+          :disabled="freesingle"
+          @click="printBackpaper"
+          v-hasPermi="['system:reqmain:edit']"
+        >单打回单</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Delete"
+          @click="cancel"
+          v-hasPermi="['system:reqmain:export']"
+        >取消采样</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table class="compact-form" :data="reqmainList" @selection-change="handleSelectionChange" height="550px">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="项目名称" align="center" prop="sqxmmc" width="200" show-overflow-tooltip/>
+      <el-table-column label="项目代码" align="center" prop="sqxmdh" width="100" show-overflow-tooltip/>
+      <el-table-column label="项目类别" align="center" prop="cp_xmlb" />
+      <el-table-column label="样本类型" align="center" prop="yblx" />
+      <el-table-column label="条码号" align="center" prop="sqh" width="150" show-overflow-tooltip/>
+      <el-table-column label="申请时间" align="center" prop="sqsj" width="180" show-overflow-tooltip>
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.sqsj, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="病人姓名" align="center" prop="brxm" show-overflow-tooltip/>
+      <el-table-column label="申请医生" align="center" prop="sqys" :formatter="formatDict('SRD')" show-overflow-tooltip/>
+      <el-table-column label="序号" align="center" prop="xh" show-overflow-tooltip/>
+      <el-table-column label="数量" align="center" prop="sl" show-overflow-tooltip/>
+      <el-table-column label="单价" align="center" prop="dj" show-overflow-tooltip/>
+      <el-table-column label="状态" align="center" prop="zt" show-overflow-tooltip/>
+      <el-table-column label="计价" align="center" prop="jjzt" >
+      <template #default="scope">
+        <el-checkbox :model-value="scope.row.jjzt === '1'" disabled>
+        </el-checkbox>
+      </template>
+      </el-table-column>
+      <el-table-column label="病人代号" align="center" prop="brdh" show-overflow-tooltip/>
+      <el-table-column label="备注1" align="center" prop="detailBZ1" show-overflow-tooltip/>
+      <el-table-column label="备注2" align="center" prop="detailBZ2" show-overflow-tooltip/>
+      <el-table-column label="颜色" align="center" prop="cp_color" v-if="false" show-overflow-tooltip/>
+      <el-table-column label="确认标识" align="center" prop="cp_cflag" v-if="false" show-overflow-tooltip/>
+      <el-table-column label="科室" align="center" prop="ksdh" :formatter="formatDict('DP')" show-overflow-tooltip/>
+      <el-table-column label="病人类型" align="center" prop="brly" :formatter="formatDict('PT')" show-overflow-tooltip/>
+      <el-table-column label="性别" align="center" prop="brxb" :formatter="formatDict('SX')"   show-overflow-tooltip/>
+      <el-table-column label="生日" align="center" prop="brsr" width="180" show-overflow-tooltip>
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.brsr, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="床号" align="center" prop="ch" width="50"  show-overflow-tooltip/>
+      <el-table-column label="诊断" align="center" prop="zd" width="150"  show-overflow-tooltip/>
+      <el-table-column label="条码类别" align="center" prop="bgddh" v-if="false" show-overflow-tooltip/>
+      <el-table-column label="年龄" align="center" prop="nl" show-overflow-tooltip/>
+      <el-table-column label="年龄单位" align="center" prop="nldw" :formatter="formatDict('AU')"  show-overflow-tooltip/>
+      <el-table-column label="采样时间" align="center" prop="cysj" width="180"show-overflow-tooltip>
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.cysj, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { querySQD, getReqmain, delReqmain, addReqmain, updateReqmain } from "@/api/mzcx/cydj.js";
+const comDict = inject('comDict');
+// 字典数据存储
+const dictData = ref({});
+
+const { proxy } = getCurrentInstance();
+// 选中的行
+const selectedRows = ref([]);
+const reqmainList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const freesingle = ref(true);
+const cardtypeOptions = ref([{"label": "就诊卡","value": 1},{"label": "医保卡","value": 2},{"label": "电子医保卡","value": 3},{"label": "身份证", "value": 4}])
+const showconfirmOptions = ref([{"label": "未打印", "value": 1},{"label": "已打印", "value": 11}])
+const subdayOptions = ref([{"label": "1天","value": 1},{"label": "3天", "value": 3},{"label": "1周","value": 7},{"label": "2周","value": 14},{"label": "1月", "value": 30},{"label": "3月", "value": 90},{"label": "1年","value": 365},{"label": "2年","value": 730}])
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    brdh: null,
+    stime: null,
+    etime: null,
+    klx: null,
+    zt: 1,
+    subday: 3000,
+    cardtype:null
+  },
+  rules: {
+    brdh: [
+      { required: true, message: "病人代码不能为空", trigger: "blur" }
+    ],
+    subday: [],
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+// 字典格式化方法
+const formatDict =(dictType) => {
+  return (row, column, value) => {
+    // 从全局字典中获取映射值
+    return dictData.value[dictType].find(item => String(item.value) === String(value).trim())?.label||value ;
+  };
+};
+// 定义“空数据”的判断函数
+const isEmptyData = (data) => {
+  // 处理 null/undefined
+  if (data === null || data === undefined) return true;
+  // 处理空数组
+  if (Array.isArray(data) && data.length === 0) return true;
+  // 处理空对象（无任何属性）
+  if (typeof data === 'object' && Object.keys(data).length === 0) return true;
+  // 处理空字符串
+  if (typeof data === 'string' && data.trim() === '') return true;
+  return false;
+};
+/**
+ * 获取指定天数偏移后的日期时间字符串
+ * @param {number} days 偏移天数（正数表示未来，负数表示过去）
+ * @returns {string} 格式化的日期时间字符串 'yyyy-mm-dd HH:MM:SS'
+ */
+function getDateOffset(days) {
+  const now = new Date();
+  const offsetTimestamp = now.getTime() + days * 24 * 60 * 60 * 1000;
+  const targetDate = new Date(offsetTimestamp);
+
+  const year = targetDate.getFullYear();
+  const month = String(targetDate.getMonth() + 1).padStart(2, '0');
+  const day = String(targetDate.getDate()).padStart(2, '0');
+ // const hours = String(targetDate.getHours()).padStart(2, '0');
+ // const minutes = String(targetDate.getMinutes()).padStart(2, '0');
+  //const seconds = String(targetDate.getSeconds()).padStart(2, '0');
+ // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return `${year}-${month}-${day} 00:00:00`;
+}
+function getSubday() {
+  const days=0 - queryParams.value.subday;
+  queryParams.value.stime=getDateOffset(days);
+  queryParams.value.etime=getDateOffset(1);
+}
+/** 查询采样登记列表 */
+function getList() {
+
+  if(isEmptyData(queryParams.value.brdh)) proxy.$modal.alert("请刷卡或输入门诊号!");
+  else {
+    loading.value = true;
+    getSubday();
+    querySQD(queryParams.value).then(response => {
+      if (isEmptyData(response.data)) proxy.$modal.alert("没有检索的数据!");
+      reqmainList.value = response.data;
+      loading.value = false;
+      single.value=false;
+
+    });
+  }
+}
+
+// 取消按钮
+function cancel() {
+ // open.value = false;
+//  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    sqh: null,
+    xh: null,
+    sqxmdh: null,
+    sqxmmc: null,
+    sl: null,
+    dj: null,
+    detailZT: null,
+    detailJJZT: null,
+    ksdh: null,
+    sqys: null,
+    sqsj: null,
+    jsys: null,
+    jssj: null,
+    brly: null,
+    brdh: null,
+    brxm: null,
+    zt: null,
+    jjzt: null,
+    brxb: null,
+    brsr: null,
+    jzbz: null,
+    cp_xmlb: null,
+    cp_color: null,
+    cp_cflag: null,
+    detailBZ1: null,
+    ch: null,
+    detailBZ2: null,
+    bz1: null,
+    bz2: null,
+    bz3: null,
+    yblx: null,
+    zxys: null,
+    zxsj: null,
+    bgddh: null,
+    nl: null,
+    nldw: null,
+    zd: null,
+    cysj: null
+  };
+  freesingle.value=false;
+  single.value=false;
+  proxy.resetForm("reqmainRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  selectedRows.value = selection;
+  ids.value = selection.map(item => item.sqh);
+  console.log('ids:', ids.value);
+  console.log('selectedRows:', selectedRows.value);
+}
+
+
+
+/** 打印选择 */
+function printAll(row) {
+
+  if (selectedRows.length === 0) {
+    return;
+  }
+  apiprintAll(ids.value).then(response => {
+    proxy.$modal.msgSuccess("打印成功");
+    open.value = false;
+    freesingle.value=false;
+  }).catch(() => {
+  });
+}
+/** 单打条码*/
+function printSigne(row) {
+  if (selectedRows.length === 0) {
+    return;
+  }
+  apiprintAll(ids.value).then(response => {
+    proxy.$modal.msgSuccess("打印成功");
+    open.value = false;
+    freesingle.value=false;
+  }).catch(() => {
+  });
+}
+
+
+/** 打印回单 */
+function printBackpaper(row) {
+    if (selectedRows.length === 0) {
+      return;
+    }
+    apiprintAll(ids.value).then(response => {
+      proxy.$modal.msgSuccess("打印成功");
+      open.value = false;
+    }).catch(() => {
+    });
+  }
+
+
+
+// 组件挂载时加载字典
+onMounted(async () => {
+  // 加载病人来源字典
+  const dictRefs = await comDict('PT', 'DP', 'SRD','BT','SX','AU');
+// 从 ref 中获取实际数据
+  dictData.value = {
+    PT: toRaw(dictRefs.PT.value) || [],
+    DP: toRaw(dictRefs.DP.value) || [],
+    SRD: toRaw(dictRefs.SRD.value) || [],
+    BT: toRaw(dictRefs.BT.value) || [],
+    SX: toRaw(dictRefs.SX.value) || [],
+    AU: toRaw(dictRefs.AU.value) || []
+  };
+});
+</script>
+<style scoped lang="scss">
+.compact-form .el-form-item {
+  padding: 5px;
+  margin-bottom: 5px;
+}
+
+.compact-form .el-form-item__label {
+  padding-bottom: 0px;
+}
+.card-content {
+  max-height: 450px; /* 设置最大高度 */
+  overflow-y: auto;   /* 超出高度时显示垂直滚动条 */
+  padding: 5px;      /* 保持与卡片默认一致的内边距 */
+}
+.clickable:hover {
+  cursor: pointer; /* 鼠标悬停时显示手型 */
+  transition: all 0.3s; /* 平滑过渡效果 */
+  color: blue;
+
+}
+</style>