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:
@@ -316,6 +316,7 @@
|
||||
<span class="cat-title">{{ cat.categoryName }}</span>
|
||||
<span v-if="categoryLoadingSet.has(cat.typeId)" class="loading-dot"></span>
|
||||
</template>
|
||||
<!-- 检查项目(部位/项目列表) -->
|
||||
<div
|
||||
v-for="item in cat.items"
|
||||
:key="item.id"
|
||||
@@ -333,6 +334,27 @@
|
||||
<div v-if="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint">
|
||||
加载中...
|
||||
</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>
|
||||
</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) {
|
||||
if (checked) {
|
||||
@@ -1367,6 +1461,53 @@ defineExpose({ getList });
|
||||
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 */
|
||||
.selected-panel {
|
||||
width: 140px; /* Bug #384修复: 加宽以适应展开内容 */
|
||||
@@ -1438,6 +1579,41 @@ defineExpose({ getList });
|
||||
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修复: 检查方法勾选框列表 */
|
||||
.method-list {
|
||||
padding: 6px 10px;
|
||||
|
||||
Reference in New Issue
Block a user