209 检验项目设置-》套餐设置：填写套餐基本信息/明细未实现检验套餐的保存功能
290 检验项目设置-》套餐设置：项目名称不能快速定位到所有的项目 291 维护系统 - 》检验项目设置 - 》套餐设置（套餐明细表单）项目名称检索不够人性化
This commit is contained in:
@@ -602,117 +602,31 @@
|
|||||||
<el-table-column label="项目名称/规格" min-width="200">
|
<el-table-column label="项目名称/规格" min-width="200">
|
||||||
<template #default="{ row, $index }">
|
<template #default="{ row, $index }">
|
||||||
<template v-if="editingRowId === $index">
|
<template v-if="editingRowId === $index">
|
||||||
<div class="project-selector-cell">
|
<el-autocomplete
|
||||||
<el-input
|
v-model="row.name"
|
||||||
v-model="row.name"
|
:fetch-suggestions="(query, cb) => handleProjectInlineSearch(query, cb, row)"
|
||||||
placeholder="点击选择项目"
|
placeholder="输入名称或首字母搜索"
|
||||||
size="small"
|
size="small"
|
||||||
readonly
|
clearable
|
||||||
@click="openProjectSelector(row)"
|
highlight-first-item
|
||||||
style="width: 100%; cursor: pointer;"
|
:debounce="300"
|
||||||
>
|
style="width: 100%;"
|
||||||
<template #suffix>
|
popper-class="project-inline-dropdown"
|
||||||
<el-icon><Search /></el-icon>
|
@select="(item) => handleProjectInlineSelect(item, row)"
|
||||||
</template>
|
@clear="() => { row.name = ''; row.unitPrice = 0; row.unit = ''; row.amount = 0; row.totalAmount = row.serviceFee || 0; }"
|
||||||
</el-input>
|
>
|
||||||
|
<template #default="{ item }">
|
||||||
<!-- 自定义 Popover 弹窗 -->
|
<div class="project-inline-item">
|
||||||
<el-popover
|
<span class="item-name">{{ item.name }}</span>
|
||||||
placement="bottom-start"
|
<span class="item-code" v-if="item.code">{{ item.code }}</span>
|
||||||
width="700"
|
<span class="item-price">¥{{ item.retailPrice || 0 }}</span>
|
||||||
trigger="manual"
|
<span class="item-unit">{{ item.permittedUnitCode_dictText || item.unit || '' }}</span>
|
||||||
v-model:visible="showProjectPopover"
|
|
||||||
popper-class="diagnosis-project-popover"
|
|
||||||
>
|
|
||||||
<div class="popover-container" v-loading="tableLoading">
|
|
||||||
<!-- 左侧：分类导航 -->
|
|
||||||
<div class="category-sidebar">
|
|
||||||
<div
|
|
||||||
v-for="cat in categoryList"
|
|
||||||
:key="cat.value"
|
|
||||||
class="category-item"
|
|
||||||
:class="{ active: currentCategoryCode === cat.value }"
|
|
||||||
@click="fetchProjectsByCategory(cat.value, true)"
|
|
||||||
>
|
|
||||||
{{ cat.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧：数据列表 -->
|
|
||||||
<div class="project-list-area">
|
|
||||||
<el-input
|
|
||||||
v-model="popoverSearchKey"
|
|
||||||
placeholder="搜索项目名称..."
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
@input="handlePopoverSearch"
|
|
||||||
style="margin-bottom: 8px;"
|
|
||||||
>
|
|
||||||
<template #prefix><el-icon><Search /></el-icon></template>
|
|
||||||
</el-input>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
:data="projectTableData"
|
|
||||||
:key="tableKey"
|
|
||||||
height="300"
|
|
||||||
highlight-current-row
|
|
||||||
@row-click="handleSelectProject"
|
|
||||||
style="width: 100%"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<el-table-column prop="name" label="项目名称" show-overflow-tooltip min-width="150" />
|
|
||||||
<el-table-column prop="retailPrice" label="单价" width="80" align="right">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<span v-if="row.retailPrice">¥{{ row.retailPrice }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="permittedUnitCode_dictText" label="单位" width="60" />
|
|
||||||
<el-table-column prop="categoryName" label="类别" width="80" />
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div v-if="projectTableData.length === 0 && !tableLoading" class="empty-tip">
|
|
||||||
暂无相关项目
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页条（在列表下方） -->
|
|
||||||
<div @mousedown.stop @click.stop style="margin-top: 8px; display: flex; align-items: center; gap: 6px; justify-content: flex-end;">
|
|
||||||
<!-- 每页条数：独立 el-select，placement=top 向上弹出，teleported=false 保持在 popover DOM 内 -->
|
|
||||||
<el-select
|
|
||||||
v-if="projectTableData.length > 0 || popoverTotal > 0"
|
|
||||||
v-model="popoverPageSize"
|
|
||||||
size="small"
|
|
||||||
style="width: 110px; flex-shrink: 0;"
|
|
||||||
placement="top"
|
|
||||||
:teleported="false"
|
|
||||||
@change="handlePopoverSizeChange"
|
|
||||||
>
|
|
||||||
<el-option :value="10" label="10条/页" />
|
|
||||||
<el-option :value="20" label="20条/页" />
|
|
||||||
<el-option :value="50" label="50条/页" />
|
|
||||||
</el-select>
|
|
||||||
<el-pagination
|
|
||||||
v-if="projectTableData.length > 0 || popoverTotal > 0"
|
|
||||||
v-model:current-page="popoverPageNo"
|
|
||||||
:page-size="popoverPageSize"
|
|
||||||
:total="popoverTotal || projectTableData.length"
|
|
||||||
layout="prev, pager, next, jumper"
|
|
||||||
small
|
|
||||||
background
|
|
||||||
:teleported="false"
|
|
||||||
style="justify-content: flex-end;"
|
|
||||||
@current-change="handlePopoverPageChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<template #reference>
|
<template #suffix>
|
||||||
<div style="display: none;"></div>
|
<el-icon><Search /></el-icon>
|
||||||
</template>
|
</template>
|
||||||
</el-popover>
|
</el-autocomplete>
|
||||||
|
|
||||||
<!-- 关闭由 document mousedown 监听处理 -->
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
{{ row.name || '-' }}
|
{{ row.name || '-' }}
|
||||||
@@ -865,6 +779,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-main>
|
</el-main>
|
||||||
@@ -1752,18 +1668,16 @@ const calculateAmounts = () => {
|
|||||||
// 重新分配所有项目的服务费
|
// 重新分配所有项目的服务费
|
||||||
redistributeServiceFee();
|
redistributeServiceFee();
|
||||||
|
|
||||||
// 计算套餐总金额（基于项目的折扣后金额）
|
|
||||||
const totalAmount = packageItems.value.reduce((sum, item) => sum + (item.amount || 0), 0);
|
|
||||||
|
|
||||||
// 更新套餐金额
|
|
||||||
packageAmount.value = parseFloat(totalAmount.toFixed(2));
|
|
||||||
|
|
||||||
// 计算套餐总服务费
|
// 计算套餐总服务费
|
||||||
if (generateServiceFee.value) {
|
if (generateServiceFee.value) {
|
||||||
serviceFee.value = parseFloat(packageItems.value.reduce((sum, item) => sum + (item.serviceFee || 0), 0).toFixed(2));
|
serviceFee.value = parseFloat(packageItems.value.reduce((sum, item) => sum + (item.serviceFee || 0), 0).toFixed(2));
|
||||||
} else {
|
} else {
|
||||||
serviceFee.value = 0;
|
serviceFee.value = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 计算套餐总金额（折扣后金额 + 服务费）
|
||||||
|
const totalAmount = packageItems.value.reduce((sum, item) => sum + (item.amount || 0), 0);
|
||||||
|
packageAmount.value = parseFloat((totalAmount + serviceFee.value).toFixed(2));
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemNameRefs = ref([]);
|
const itemNameRefs = ref([]);
|
||||||
@@ -2275,7 +2189,7 @@ const handleSave = () => {
|
|||||||
packageLevel: packageLevel.value,
|
packageLevel: packageLevel.value,
|
||||||
packageName: packageName.value.trim(),
|
packageName: packageName.value.trim(),
|
||||||
department: department.value,
|
department: department.value,
|
||||||
discount: discount.value || 0,
|
discount: parseFloat(String(discount.value).replace('%', '').trim()) || 0,
|
||||||
isDisabled: isDisabled.value,
|
isDisabled: isDisabled.value,
|
||||||
showPackageName: showPackageName.value,
|
showPackageName: showPackageName.value,
|
||||||
generateServiceFee: generateServiceFee.value,
|
generateServiceFee: generateServiceFee.value,
|
||||||
@@ -2285,7 +2199,7 @@ const handleSave = () => {
|
|||||||
lisGroup: selectedLisGroup.value, // 从下拉框获取
|
lisGroup: selectedLisGroup.value, // 从下拉框获取
|
||||||
bloodVolume: bloodVolume.value,
|
bloodVolume: bloodVolume.value,
|
||||||
remarks: remarks.value,
|
remarks: remarks.value,
|
||||||
orgName: userStore.orgName || '测试机构', // 卫生机构
|
orgName: (tenantOptions.value.find(t => t.value === selectedTenantId.value)?.label) || userStore.orgName || '', // 卫生机构
|
||||||
createBy: userStore.nickName, // 制单人
|
createBy: userStore.nickName, // 制单人
|
||||||
createTime: new Date().toISOString(),
|
createTime: new Date().toISOString(),
|
||||||
updateTime: new Date().toISOString()
|
updateTime: new Date().toISOString()
|
||||||
@@ -2382,273 +2296,46 @@ const fetchTenantList = async () => {
|
|||||||
loadingTenant.value = false;
|
loadingTenant.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const showProjectPopover = ref(false);
|
|
||||||
const categoryList = ref([]);
|
|
||||||
const currentCategoryCode = ref('');
|
|
||||||
const projectTableData = ref([]);
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const popoverSearchKey = ref('');
|
|
||||||
const currentEditingRow = ref(null);
|
const currentEditingRow = ref(null);
|
||||||
const isSelectingProject = ref(false);
|
|
||||||
const tableKey = ref(0);
|
|
||||||
// 弹窗内项目列表分页
|
|
||||||
const popoverPageNo = ref(1);
|
|
||||||
const popoverPageSize = ref(10);
|
|
||||||
const popoverTotal = ref(0);
|
|
||||||
/**
|
/**
|
||||||
* 点击输入框时：记录当前行并打开弹窗
|
* el-autocomplete 行内搜索回调
|
||||||
|
* query: 用户输入的关键词；cb: 回调函数，将结果数组传入即可
|
||||||
*/
|
*/
|
||||||
const openProjectSelector = (row) => {
|
const handleProjectInlineSearch = async (query, cb, row) => {
|
||||||
if (isSelectingProject.value) return;
|
|
||||||
|
|
||||||
currentEditingRow.value = row;
|
currentEditingRow.value = row;
|
||||||
showProjectPopover.value = true;
|
try {
|
||||||
|
const params = { pageNo: 1, pageSize: 20, statusEnum: 2, searchKey: query || undefined };
|
||||||
if (categoryList.value.length === 0) {
|
const response = await getDiagnosisTreatmentList(params);
|
||||||
initDiagnosisCategories();
|
if (response.code === 200) {
|
||||||
} else {
|
let list = [];
|
||||||
fetchProjectsByCategory(currentCategoryCode.value, true);
|
if (response.data && response.data.records) {
|
||||||
|
list = response.data.records;
|
||||||
|
} else if (Array.isArray(response.data)) {
|
||||||
|
list = response.data;
|
||||||
|
}
|
||||||
|
// el-autocomplete 要求每项必须有 value 字段（显示在输入框中）
|
||||||
|
cb(list.map(item => ({ ...item, value: item.name })));
|
||||||
|
} else {
|
||||||
|
cb([]);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
cb([]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 监听 popover 开关，动态注册/注销 document 级监听
|
/**
|
||||||
watch(showProjectPopover, (val) => {
|
* el-autocomplete 选中某条记录后回填数据
|
||||||
if (val) {
|
*/
|
||||||
// nextTick 后注册，避免打开时的点击事件立即触发关闭
|
const handleProjectInlineSelect = (selectedItem, row) => {
|
||||||
nextTick(() => {
|
|
||||||
document.addEventListener('mousedown', _captureMousedown, true);
|
|
||||||
document.addEventListener('mousedown', onDocumentMousedown);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
document.removeEventListener('mousedown', _captureMousedown, true);
|
|
||||||
document.removeEventListener('mousedown', onDocumentMousedown);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleSelectProject = (selectedItem) => {
|
|
||||||
if (!currentEditingRow.value) {
|
|
||||||
ElMessage.warning('未检测到编辑行，请重新点击输入框');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const row = currentEditingRow.value;
|
|
||||||
|
|
||||||
// --- 数据回填逻辑 ---
|
|
||||||
row.name = selectedItem.name;
|
row.name = selectedItem.name;
|
||||||
row.spec = selectedItem.spec || '';
|
row.spec = selectedItem.spec || '';
|
||||||
row.unitPrice = parseFloat(selectedItem.retailPrice || 0);
|
row.unitPrice = parseFloat(selectedItem.retailPrice || 0);
|
||||||
row.unit = selectedItem.permittedUnitCode_dictText || selectedItem.unit || '次';
|
row.unit = selectedItem.permittedUnitCode_dictText || selectedItem.unit || '次';
|
||||||
if (!row.quantity) row.quantity = 1;
|
if (!row.quantity) row.quantity = 1;
|
||||||
row.amount = row.unitPrice * row.quantity;
|
row.amount = parseFloat((row.unitPrice * row.quantity).toFixed(2));
|
||||||
row.totalAmount = row.amount + (row.serviceFee || 0);
|
row.totalAmount = parseFloat((row.amount + (row.serviceFee || 0)).toFixed(2));
|
||||||
|
calculateAmounts();
|
||||||
// 1. 开启“防抖”锁，阻止 openProjectSelector 执行
|
|
||||||
isSelectingProject.value = true;
|
|
||||||
|
|
||||||
// 2. 关闭弹窗
|
|
||||||
showProjectPopover.value = false;
|
|
||||||
|
|
||||||
// 3. 延迟一小段时间后解锁并清空当前行
|
|
||||||
// 100ms 足够让浏览器的 click/focus 事件处理完毕
|
|
||||||
setTimeout(() => {
|
|
||||||
currentEditingRow.value = null;
|
|
||||||
isSelectingProject.value = false;
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
|
|
||||||
ElMessage.success(`已选择：${row.name}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const initDiagnosisCategories = async () => {
|
|
||||||
if (categoryList.value.length > 0) return;
|
|
||||||
try {
|
|
||||||
const res = await getDiseaseTreatmentInit();
|
|
||||||
if (res.code === 200 && res.data?.diagnosisCategoryOptions) {
|
|
||||||
categoryList.value = res.data.diagnosisCategoryOptions.map(item => ({
|
|
||||||
value: item.value,
|
|
||||||
label: item.info
|
|
||||||
}));
|
|
||||||
if (categoryList.value.length > 0) {
|
|
||||||
currentCategoryCode.value = categoryList.value[0].value;
|
|
||||||
fetchProjectsByCategory(currentCategoryCode.value, true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
ElMessage.error('加载分类失败，请稍后重试');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据分类代码加载项目列表（支持分页）
|
|
||||||
*/
|
|
||||||
// 分页数据缓存：key = `${categoryCode}_${pageNo}_${pageSize}_${searchKey}`
|
|
||||||
const _pageCache = new Map();
|
|
||||||
|
|
||||||
const _cacheKey = (code, pageNo, pageSize, searchKey) =>
|
|
||||||
`${code}_${pageNo}_${pageSize}_${searchKey || ''}`;
|
|
||||||
|
|
||||||
/** 静默预加载单页，结果存入缓存 */
|
|
||||||
const _prefetchPage = (code, pageNo, pageSize, searchKey) => {
|
|
||||||
const key = _cacheKey(code, pageNo, pageSize, searchKey);
|
|
||||||
if (_pageCache.has(key)) return;
|
|
||||||
const params = { pageNo, pageSize, statusEnum: 2, categoryCode: code, searchKey: searchKey || undefined };
|
|
||||||
getDiagnosisTreatmentList(params).then(response => {
|
|
||||||
if (response.code === 200) _pageCache.set(key, response.data);
|
|
||||||
}).catch(() => {});
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 静默并行预加载多页：当前页前后各2页 + 后4页，覆盖常用跳转范围 */
|
|
||||||
const _prefetchPages = (code, currentPage, pageSize, searchKey, totalPages) => {
|
|
||||||
const pagesToFetch = new Set();
|
|
||||||
for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages || 999, currentPage + 4); i++) {
|
|
||||||
pagesToFetch.add(i);
|
|
||||||
}
|
|
||||||
pagesToFetch.forEach(pageNo => _prefetchPage(code, pageNo, pageSize, searchKey));
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 第1页加载完成后，并行预取所有页（上限20页），覆盖任意跳转 */
|
|
||||||
const _prefetchAllPages = (code, pageSize, searchKey, total) => {
|
|
||||||
const totalPages = Math.min(Math.ceil(total / pageSize), 80);
|
|
||||||
for (let i = 2; i <= totalPages; i++) {
|
|
||||||
_prefetchPage(code, i, pageSize, searchKey);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchProjectsByCategory = async (code, resetPage = false) => {
|
|
||||||
currentCategoryCode.value = code;
|
|
||||||
if (resetPage) {
|
|
||||||
popoverPageNo.value = 1;
|
|
||||||
// 切换分类/搜索时清空缓存
|
|
||||||
_pageCache.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageNo = popoverPageNo.value;
|
|
||||||
const pageSize = popoverPageSize.value;
|
|
||||||
const searchKey = popoverSearchKey.value || '';
|
|
||||||
const key = _cacheKey(code, pageNo, pageSize, searchKey);
|
|
||||||
|
|
||||||
if (_pageCache.has(key)) {
|
|
||||||
// 命中缓存，直接渲染，无需 loading
|
|
||||||
const cached = _pageCache.get(key);
|
|
||||||
if (cached && cached.records) {
|
|
||||||
projectTableData.value = cached.records;
|
|
||||||
popoverTotal.value = cached.total != null ? cached.total : cached.records.length;
|
|
||||||
} else if (Array.isArray(cached)) {
|
|
||||||
projectTableData.value = cached;
|
|
||||||
popoverTotal.value = cached.length;
|
|
||||||
}
|
|
||||||
// 预加载周边页
|
|
||||||
_prefetchPages(code, pageNo, pageSize, searchKey, Math.ceil(popoverTotal.value / pageSize));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
tableLoading.value = true;
|
|
||||||
try {
|
|
||||||
const params = {
|
|
||||||
pageNo,
|
|
||||||
pageSize,
|
|
||||||
statusEnum: 2,
|
|
||||||
categoryCode: code,
|
|
||||||
searchKey: searchKey || undefined
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await getDiagnosisTreatmentList(params);
|
|
||||||
|
|
||||||
if (response.code === 200) {
|
|
||||||
let list = [];
|
|
||||||
if (response.data && response.data.records) {
|
|
||||||
list = response.data.records;
|
|
||||||
popoverTotal.value = (response.data.total != null ? response.data.total : list.length);
|
|
||||||
} else if (Array.isArray(response.data)) {
|
|
||||||
list = response.data;
|
|
||||||
popoverTotal.value = list.length;
|
|
||||||
}
|
|
||||||
projectTableData.value = list;
|
|
||||||
// 写入缓存
|
|
||||||
_pageCache.set(key, response.data);
|
|
||||||
// 预加载周边页
|
|
||||||
const totalPages = Math.ceil(popoverTotal.value / pageSize);
|
|
||||||
_prefetchPages(code, pageNo, pageSize, searchKey, totalPages);
|
|
||||||
} else {
|
|
||||||
projectTableData.value = [];
|
|
||||||
popoverTotal.value = 0;
|
|
||||||
ElMessage.warning(response.msg || '暂无数据');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
ElMessage.error('查询失败');
|
|
||||||
projectTableData.value = [];
|
|
||||||
popoverTotal.value = 0;
|
|
||||||
} finally {
|
|
||||||
tableLoading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 弹窗内搜索触发（重置页码）
|
|
||||||
*/
|
|
||||||
const handlePopoverSearch = () => {
|
|
||||||
if (currentCategoryCode.value) {
|
|
||||||
fetchProjectsByCategory(currentCategoryCode.value, true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 捕获阶段记录真实点击目标（在 DOM 变化前）
|
|
||||||
let _capturedTarget = null;
|
|
||||||
const _captureMousedown = (e) => { _capturedTarget = e.target; };
|
|
||||||
|
|
||||||
// 分页操作时暂时屏蔽 document mousedown 关闭逻辑
|
|
||||||
let _ignoreMaskOnce = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 弹窗内分页页码变化
|
|
||||||
*/
|
|
||||||
const handlePopoverPageChange = (page) => {
|
|
||||||
_ignoreMaskOnce = true;
|
|
||||||
popoverPageNo.value = page;
|
|
||||||
fetchProjectsByCategory(currentCategoryCode.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 弹窗内每页条数变化
|
|
||||||
*/
|
|
||||||
const handlePopoverSizeChange = (size) => {
|
|
||||||
_ignoreMaskOnce = true;
|
|
||||||
popoverPageSize.value = size;
|
|
||||||
popoverPageNo.value = 1;
|
|
||||||
fetchProjectsByCategory(currentCategoryCode.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* document 级 mousedown 监听：点击 popover 面板及所有浮层之外时关闭
|
|
||||||
* 使用捕获阶段记录的真实目标，避免 DOM 销毁后 contains 检测失效
|
|
||||||
*/
|
|
||||||
const onDocumentMousedown = (e) => {
|
|
||||||
if (!showProjectPopover.value) return;
|
|
||||||
|
|
||||||
// 分页操作触发时，忽略本次关闭
|
|
||||||
if (_ignoreMaskOnce) {
|
|
||||||
_ignoreMaskOnce = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用捕获阶段记录的目标（DOM 变化前的真实元素）
|
|
||||||
const target = _capturedTarget || e.target;
|
|
||||||
|
|
||||||
// 判断点击目标是否在 popover 面板内
|
|
||||||
const popoverEl = document.querySelector('.diagnosis-project-popover');
|
|
||||||
if (popoverEl && popoverEl.contains(target)) return;
|
|
||||||
|
|
||||||
// 判断点击目标是否在任意浮层内（el-select-dropdown / el-popper 等）
|
|
||||||
const floatEls = document.querySelectorAll('.el-select-dropdown, .el-popper, .el-picker-panel');
|
|
||||||
for (const el of floatEls) {
|
|
||||||
if (el.contains(target)) return;
|
|
||||||
}
|
|
||||||
// 用坐标兜底：浮层可能已销毁，检查元素是否曾属于浮层类名
|
|
||||||
if (target && target.closest && target.closest('.el-select-dropdown, .el-popper, .el-picker-panel')) return;
|
|
||||||
|
|
||||||
showProjectPopover.value = false;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -3022,10 +2709,7 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {});
|
||||||
document.removeEventListener('mousedown', _captureMousedown, true);
|
|
||||||
document.removeEventListener('mousedown', onDocumentMousedown);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@@ -3294,83 +2978,38 @@ onUnmounted(() => {
|
|||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 诊疗项目选择器单元格 */
|
/* 行内搜索下拉项样式（挂载到 body 的 popper） */
|
||||||
.project-selector-cell {
|
.project-inline-dropdown .el-autocomplete-suggestion__list li {
|
||||||
position: relative;
|
padding: 0;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
.project-inline-item {
|
||||||
/* 全屏遮罩，确保点击弹窗外任意位置关闭 */
|
|
||||||
.popover-mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 999; /* 低于 popover 的 z-index */
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Popover 内部容器布局 */
|
|
||||||
.popover-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
border: 1px solid #e4e7ed;
|
align-items: center;
|
||||||
border-radius: 4px;
|
gap: 8px;
|
||||||
overflow: hidden;
|
padding: 6px 12px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
font-size: 13px;
|
||||||
background: #fff;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.project-inline-item .item-name {
|
||||||
/* 左侧分类栏 */
|
flex: 1;
|
||||||
.category-sidebar {
|
min-width: 0;
|
||||||
width: 120px;
|
overflow: hidden;
|
||||||
background-color: #f5f7fa;
|
text-overflow: ellipsis;
|
||||||
border-right: 1px solid #e4e7ed;
|
white-space: nowrap;
|
||||||
max-height: 400px;
|
}
|
||||||
overflow-y: auto;
|
.project-inline-item .item-code {
|
||||||
|
color: #409EFF;
|
||||||
|
font-size: 12px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
.project-inline-item .item-price {
|
||||||
.category-item {
|
color: #f56c6c;
|
||||||
padding: 12px 15px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #606266;
|
|
||||||
transition: all 0.2s;
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-item:hover {
|
|
||||||
background-color: #ecf5ff;
|
|
||||||
color: #409EFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-item.active {
|
|
||||||
background-color: #ecf5ff;
|
|
||||||
color: #409EFF;
|
|
||||||
border-left-color: #409EFF;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
.project-inline-item .item-unit {
|
||||||
/* 右侧列表区域 */
|
|
||||||
.project-list-area {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-tip {
|
|
||||||
text-align: center;
|
|
||||||
color: #909399;
|
color: #909399;
|
||||||
margin-top: 20px;
|
font-size: 12px;
|
||||||
font-size: 13px;
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
|
|
||||||
/* 全局样式：调整 popover 的 padding 和 z-index */
|
|
||||||
.diagnosis-project-popover {
|
|
||||||
padding: 0 !important;
|
|
||||||
z-index: 2000 !important;
|
|
||||||
}</style>
|
}</style>
|
||||||
Reference in New Issue
Block a user