Fix Bug #428: 门诊医生站-检查申请:未实现分类联动检查方法及套餐明细展示与勾选逻辑

根因分析:
1. handleCategoryExpand 加载了 cat.methods 但模板从未渲染,用户展开分类后看不到检查方法
2. 缺少 isMethodSelected/handleMethodSelect 函数,无法通过勾选检查方法来联动添加到已选择列表
3. 套餐明细展示缺少 CSS 样式(package-details-list/detail-row/detail-name/detail-info)

修复内容:
- 模板: 在分类折叠区域添加 cat.methods 的渲染(检查方法列表 + 勾选框 + 价格)
- 逻辑: 新增 isMethodSelected 和 handleMethodSelect 函数,支持直接勾选检查方法添加到已选择列表
- 样式: 添加套餐明细列表样式 + 检查方法区域样式

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
陈琳
2026-05-12 23:01:48 +08:00
committed by 华佗
parent 4b42c435d4
commit 5a637e40fe

View File

@@ -316,6 +316,7 @@
<span class="cat-title">{{ cat.categoryName }}</span> <span class="cat-title">{{ cat.categoryName }}</span>
<span v-if="categoryLoadingSet.has(cat.typeId)" class="loading-dot"></span> <span v-if="categoryLoadingSet.has(cat.typeId)" class="loading-dot"></span>
</template> </template>
<!-- 检查项目部位/项目列表 -->
<div <div
v-for="item in cat.items" v-for="item in cat.items"
:key="item.id" :key="item.id"
@@ -333,6 +334,27 @@
<div v-if="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint"> <div v-if="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint">
加载中... 加载中...
</div> </div>
<!-- Bug #428修复: 渲染分类联动加载的检查方法列表 -->
<div
v-if="cat.methods && cat.methods.length > 0"
class="method-section"
>
<div class="method-section-title">检查方法</div>
<div
v-for="method in cat.methods"
:key="method.id"
class="method-row"
>
<el-checkbox
:model-value="isMethodSelected(method, cat)"
@change="(val) => handleMethodSelect(val, method, cat)"
class="method-checkbox"
>
{{ method.name }}
</el-checkbox>
<span class="method-price-tag">¥{{ method.packagePrice || method.price || 0 }}</span>
</div>
</div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
@@ -1047,6 +1069,78 @@ function handleDelete(row) {
}); });
} }
// Bug #428修复: 判断某个检查方法是否已被选中(任意项目关联了该方法)
function isMethodSelected(method, cat) {
return selectedItems.value.some(item =>
item.selectedMethod?.id === method.id && item.checkType === cat.typeName
);
}
// Bug #428修复: 勾选检查方法
async function handleMethodSelect(checked, method, cat) {
if (checked) {
// 找到该方法所属的第一个检查项目
const targetItem = cat.items[0];
if (!targetItem) {
// 如果分类下没有项目,尝试从其他分类找同名项目或创建
console.warn('分类下没有检查项目,无法关联方法');
return;
}
// 如果该项目已存在,只更新 selectedMethod
const existingItem = selectedItems.value.find(s => s.id === targetItem.id);
if (existingItem) {
existingItem.selectedMethod = method;
updateMethodDisplay();
return;
}
// 如果该项目不存在,创建一个并关联方法
if (selectedItems.value.length > 0) {
const currentCategory = selectedItems.value[0].checkType;
const newCategory = cat.typeCode || '';
if (currentCategory !== newCategory) {
ElMessage.warning('一个检查单不能同时选择多个项目类型的检查项目');
return;
}
}
selectedItems.value.push({
id: targetItem.id, name: targetItem.name,
price: targetItem.price, quantity: 1,
serviceFee: targetItem.serviceFee || 0,
unit: targetItem.unit || '次',
applyPart: targetItem.name,
checkType: cat.typeName,
nationalCode: targetItem.nationalCode || '',
checked: true,
methods: [method],
selectedMethod: method,
expanded: false,
isPackage: !!targetItem.packageName,
packageId: targetItem.packageId || null
});
// 自动回填执行科室
if (selectedItems.value.length === 1 && cat?.performDeptName) {
form.performDeptCode = cat.performDeptName;
}
// 同时勾选左侧项目的 checkbox
targetItem.checked = true;
} else {
// 取消选择方法:将 selectedItems 中关联该方法的项的 selectedMethod 清空
const itemsWithMethod = selectedItems.value.filter(
item => item.selectedMethod?.id === method.id
);
for (const item of itemsWithMethod) {
item.selectedMethod = null;
}
}
updateMethodDisplay();
}
// ====== 勾选逻辑 ====== // ====== 勾选逻辑 ======
async function handleItemSelect(checked, item, cat) { async function handleItemSelect(checked, item, cat) {
if (checked) { if (checked) {
@@ -1367,6 +1461,53 @@ defineExpose({ getList });
margin-left: 6px; margin-left: 6px;
} }
/* Bug #428修复: 分类下检查方法区域样式 */
.method-section {
padding: 6px 8px;
background: #f0f7ff;
border-radius: 4px;
margin-top: 6px;
}
.method-section-title {
font-size: 12px;
font-weight: 600;
color: #409eff;
margin-bottom: 4px;
padding-bottom: 3px;
border-bottom: 1px dashed #d9ecff;
}
.method-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 4px;
border-radius: 3px;
}
.method-row:hover {
background: #e8f4ff;
}
.method-checkbox {
flex: 1;
overflow: hidden;
}
.method-checkbox :deep(.el-checkbox__label) {
font-size: 12px;
color: #303133;
}
.method-price-tag {
font-size: 11px;
color: #e6a23c;
font-weight: 500;
flex-shrink: 0;
margin-left: 6px;
}
/* 已选择 tags */ /* 已选择 tags */
.selected-panel { .selected-panel {
width: 140px; /* Bug #384修复: 加宽以适应展开内容 */ width: 140px; /* Bug #384修复: 加宽以适应展开内容 */
@@ -1438,6 +1579,41 @@ defineExpose({ getList });
transform: rotate(180deg); transform: rotate(180deg);
} }
/* Bug #428修复: 套餐明细列表样式 */
.package-details-list {
padding: 6px 10px;
background: #fffbe6;
border-top: 1px solid #ffe58f;
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
background: #fff;
}
.detail-row:hover {
background: #fff9e6;
}
.detail-name {
color: #303133;
font-weight: 500;
}
.detail-info {
color: #909399;
font-size: 10px;
white-space: nowrap;
}
/* Bug #384修复: 检查方法勾选框列表 */ /* Bug #384修复: 检查方法勾选框列表 */
.method-list { .method-list {
padding: 6px 10px; padding: 6px 10px;