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 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;
|
||||||
|
|||||||
Reference in New Issue
Block a user