95da4c2a57
根因：getList() 直接发送 queryParams.value 到后端，其中包含 undefined 值的 属性（如 adviceType 未选择时）。后端接收 adviceType=null 后回退到查询所有类型 (List.of(1,2,3))，导致药品出现在耗材的搜索结果中。 修复：显式构建 requestParams 对象，仅包含已定义的过滤参数（adviceType、 categoryCode、searchKey），避免 undefined 值被发送到后端。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
237 lines
7.5 KiB
Vue
Executable File
237 lines
7.5 KiB
Vue
Executable File
<template>
|
||
<div @keyup="handleKeyDown" tabindex="0" ref="tableWrapper">
|
||
<el-table
|
||
ref="adviceBaseRef"
|
||
height="400"
|
||
:data="adviceBaseList"
|
||
highlight-current-row
|
||
@current-change="handleCurrentChange"
|
||
row-key="patientId"
|
||
@cell-click="clickRow"
|
||
@row-click="clickRow"
|
||
>
|
||
<el-table-column label="名称" align="center" prop="adviceName" />
|
||
<el-table-column label="类型" align="center" prop="activityType_dictText" />
|
||
<el-table-column label="包装单位" align="center" prop="unitCode_dictText" />
|
||
<el-table-column label="最小单位" align="center" prop="minUnitCode_dictText" />
|
||
<el-table-column label="规格" align="center" prop="volume" />
|
||
<el-table-column label="用法" align="center" prop="methodCode_dictText" />
|
||
<el-table-column label="频次" align="center" prop="rateCode_dictText" />
|
||
<el-table-column label="单次剂量" align="center" prop="dose" />
|
||
<el-table-column label="剂量单位" align="center" prop="doseUnitCode_dictText" />
|
||
<el-table-column label="注射药品" align="center" prop="injectFlag_enumText" />
|
||
<el-table-column label="皮试" align="center" prop="skinTestFlag_enumText" />
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {nextTick} from 'vue';
|
||
import {getAdviceBaseInfo} from './api';
|
||
import {throttle} from 'lodash-es';
|
||
|
||
const props = defineProps({
|
||
adviceQueryParams: {
|
||
type: Object,
|
||
default: '',
|
||
},
|
||
patientInfo: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
popoverVisible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
const emit = defineEmits(['selectAdviceBase']);
|
||
const total = ref(0);
|
||
const adviceBaseRef = ref();
|
||
const tableWrapper = ref();
|
||
const currentIndex = ref(0); // 当前选中行索引
|
||
const currentSelectRow = ref({});
|
||
const queryParams = ref({
|
||
pageSize: 100,
|
||
pageNum: 1,
|
||
adviceType: undefined,
|
||
categoryCode: '',
|
||
});
|
||
const adviceBaseList = ref([]);
|
||
// 节流函数
|
||
const throttledGetList = throttle(
|
||
() => {
|
||
// 触发数据加载
|
||
getList();
|
||
},
|
||
300,
|
||
{ leading: true, trailing: true }
|
||
);
|
||
watch(
|
||
() => props.adviceQueryParams,
|
||
(newValue) => {
|
||
// 始终同步参数到 queryParams，避免弹窗打开时使用旧参数
|
||
queryParams.value.searchKey = newValue?.searchKey;
|
||
queryParams.value.adviceType = newValue?.adviceType;
|
||
queryParams.value.categoryCode = newValue?.categoryCode;
|
||
// 只有在弹窗打开时才触发 API 请求
|
||
if (!props.popoverVisible) {
|
||
return;
|
||
}
|
||
throttledGetList();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 监听弹窗打开状态，当弹窗打开时主动加载数据
|
||
watch(
|
||
() => props.popoverVisible,
|
||
(visible) => {
|
||
if (visible) {
|
||
// 弹窗打开时，确保 adviceQueryParams 同步到 queryParams
|
||
if (props.adviceQueryParams) {
|
||
queryParams.value.searchKey = props.adviceQueryParams.searchKey;
|
||
queryParams.value.adviceType = props.adviceQueryParams.adviceType;
|
||
queryParams.value.categoryCode = props.adviceQueryParams.categoryCode;
|
||
console.log('[adviceBaseList] 弹窗打开，参数:', JSON.stringify({
|
||
adviceType: queryParams.value.adviceType,
|
||
categoryCode: queryParams.value.categoryCode
|
||
}));
|
||
}
|
||
// 主动触发数据加载
|
||
getList();
|
||
} else {
|
||
// 弹窗关闭时，清空列表数据，避免显示错误的数据
|
||
adviceBaseList.value = [];
|
||
total.value = 0;
|
||
}
|
||
}
|
||
);
|
||
|
||
// 移除组件初始化时的 getList() 调用，避免在没有 adviceType 时查询所有类型的数据
|
||
// getList();
|
||
function getList() {
|
||
// 验证是否已选择患者
|
||
if (!props.patientInfo || Object.keys(props.patientInfo).length === 0) {
|
||
console.log('[adviceBaseList] getList() 跳过：未选择患者');
|
||
return; // 不执行API调用
|
||
}
|
||
|
||
// 只有在弹窗打开时才执行查询
|
||
if (!props.popoverVisible) {
|
||
console.log('[adviceBaseList] getList() 跳过：弹窗未打开');
|
||
return;
|
||
}
|
||
|
||
// 🔧 Bug #448 修复：显式构建请求参数，确保 adviceType 正确传递
|
||
// 不直接使用 queryParams.value，避免 undefined 值被发送到后端导致过滤失效
|
||
const requestParams = {
|
||
pageSize: queryParams.value.pageSize,
|
||
pageNum: queryParams.value.pageNum,
|
||
organizationId: props.patientInfo.orgId,
|
||
};
|
||
|
||
// 只在 adviceType 有值时添加（0 是无效值，undefined/null 会导致后端查询所有类型）
|
||
if (queryParams.value.adviceType != null && queryParams.value.adviceType !== 0) {
|
||
requestParams.adviceType = queryParams.value.adviceType;
|
||
}
|
||
|
||
// 只在 categoryCode 有值时添加
|
||
if (queryParams.value.categoryCode) {
|
||
requestParams.categoryCode = queryParams.value.categoryCode;
|
||
}
|
||
|
||
// 只在 searchKey 有值时添加
|
||
if (queryParams.value.searchKey) {
|
||
requestParams.searchKey = queryParams.value.searchKey;
|
||
}
|
||
|
||
console.log('[adviceBaseList] getList() 请求参数:', JSON.stringify(requestParams));
|
||
|
||
getAdviceBaseInfo(requestParams).then((res) => {
|
||
console.log('[adviceBaseList] getList() 响应数据:', {
|
||
total: res.data?.total,
|
||
recordsCount: res.data?.records?.length || 0,
|
||
firstRecord: res.data?.records?.[0]?.adviceName || '无数据',
|
||
adviceType: requestParams.adviceType
|
||
});
|
||
adviceBaseList.value = res.data.records || [];
|
||
total.value = res.data.total || 0;
|
||
nextTick(() => {
|
||
currentIndex.value = 0;
|
||
if (adviceBaseList.value.length > 0) {
|
||
adviceBaseRef.value?.setCurrentRow(adviceBaseList.value[0]);
|
||
}
|
||
});
|
||
}).catch((err) => {
|
||
console.error('[adviceBaseList] getList() 请求失败:', err);
|
||
adviceBaseList.value = [];
|
||
total.value = 0;
|
||
});
|
||
}
|
||
|
||
// 处理键盘事件
|
||
const handleKeyDown = (event) => {
|
||
const key = event.key;
|
||
const data = adviceBaseList.value;
|
||
|
||
switch (key) {
|
||
case 'ArrowUp': // 上箭头
|
||
event.preventDefault(); // 阻止默认滚动行为
|
||
if (currentIndex.value > 0) {
|
||
currentIndex.value--;
|
||
setCurrentRow(data[currentIndex.value]);
|
||
}
|
||
break;
|
||
case 'ArrowDown': // 下箭头`
|
||
event.preventDefault();
|
||
if (currentIndex.value < data.length - 1) {
|
||
currentIndex.value++;
|
||
setCurrentRow(data[currentIndex.value]);
|
||
}
|
||
break;
|
||
case 'Enter': // 回车键
|
||
// const currentRow = adviceBaseRef.value.getSelectionRows();
|
||
event.preventDefault();
|
||
if (currentSelectRow.value) {
|
||
// 这里可以触发自定义逻辑，如弹窗、跳转等
|
||
emit('selectAdviceBase', currentSelectRow.value);
|
||
}
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 设置选中行（带滚动）
|
||
const setCurrentRow = (row) => {
|
||
adviceBaseRef.value.setCurrentRow(row);
|
||
// 滚动到选中行
|
||
const tableBody = adviceBaseRef.value.$el.querySelector('.el-table__body-wrapper');
|
||
const currentRowEl = adviceBaseRef.value.$el.querySelector('.current-row');
|
||
if (tableBody && currentRowEl) {
|
||
currentRowEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
}
|
||
};
|
||
|
||
// 当前行变化时更新索引
|
||
const handleCurrentChange = (currentRow) => {
|
||
currentIndex.value = adviceBaseList.value.findIndex((item) => item === currentRow);
|
||
currentSelectRow.value = currentRow;
|
||
};
|
||
|
||
function clickRow(row, column, cell, event) {
|
||
// cell-click 事件会传递 row, column, cell, event 四个参数
|
||
// 确保传递的是完整的行数据
|
||
if (row) {
|
||
emit('selectAdviceBase', row);
|
||
}
|
||
}
|
||
|
||
defineExpose({
|
||
handleKeyDown,
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.popover-table-wrapper:focus {
|
||
outline: 2px solid #409eff; /* 聚焦时的高亮效果 */
|
||
}
|
||
</style> |