refactor(ui): 优化按钮样式和数据加载逻辑
- 将多个按钮组件从 type="text" 改为 link 属性，提升界面美观性 - 修复 PatientList 组件中姓名显示的文本截断功能 - 在住院记录模板中添加对 patientInfo 变化的监听，自动更新表单数据 - 优化打印机列表获取逻辑，添加连接状态检查和警告信息 - 移除不必要的防抖和重复请求防护逻辑，简化代码实现 - 修复多处组件中对 patientInfo 属性访问的安全性问题 - 优化病历数据加载时机，移除防抖包装直接调用加载函数 - 改进数据设置逻辑，避免覆盖未传入字段的原有值 - 调整组件属性定义，使 patientInfo 参数变为可选并设置默认值 - 优化患者切换时的组件重置和数据加载流程
This commit is contained in:
@@ -211,11 +211,11 @@ const handleNodeClick = (data, node) => {
|
||||
};
|
||||
|
||||
// 先清空当前组件，再设置新组件，确保组件完全重新渲染
|
||||
currentComponent.value = '';
|
||||
currentComponent.value = undefined;
|
||||
|
||||
// 使用 nextTick 确保 DOM 更新后再设置新组件
|
||||
nextTick(() => {
|
||||
currentComponent.value = currentSelectTemplate.value.vueRouter || '';
|
||||
currentComponent.value = currentSelectTemplate.value.vueRouter;
|
||||
});
|
||||
} else {
|
||||
currentSelectTemplate.value = {
|
||||
@@ -241,7 +241,7 @@ const handleNodeClick = (data, node) => {
|
||||
|
||||
const newEmr = () => {
|
||||
if (currentSelectTemplate.value) {
|
||||
currentComponent.value = currentSelectTemplate.value.vueRouter || '';
|
||||
currentComponent.value = currentSelectTemplate.value.vueRouter;
|
||||
return;
|
||||
}
|
||||
ElMessage.error('请选择模版！');
|
||||
@@ -305,10 +305,9 @@ const handleSubmitOk = async (data) => {
|
||||
// templateRef.value?.queryList();
|
||||
|
||||
// 等待历史记录列表更新后，重新加载最新病历并更新选中状态
|
||||
// 增加延迟时间以确保数据库更新完成
|
||||
setTimeout(() => {
|
||||
loadLatestMedicalRecord();
|
||||
}, 300);
|
||||
}, 100);
|
||||
ElMessage.success('保存成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('提交失败');
|
||||
@@ -504,7 +503,7 @@ const resetForm = async () => {
|
||||
// 先将组件设置为空，强制卸载
|
||||
const currentComponentName = currentComponent.value;
|
||||
if (currentComponentName) {
|
||||
currentComponent.value = '';
|
||||
currentComponent.value = undefined;
|
||||
|
||||
// 等待DOM更新
|
||||
await nextTick();
|
||||
@@ -554,94 +553,54 @@ const selectOutpatientMedicalRecordTemplate = async () => {
|
||||
selectDefaultTemplate();
|
||||
};
|
||||
|
||||
// 防止重复请求的标志
|
||||
let loadLatestMedicalRecordPromise = null;
|
||||
|
||||
// 加载最新的病历数据并回显
|
||||
const loadLatestMedicalRecord = async () => {
|
||||
// 如果已经有正在进行的请求，则返回该请求的Promise
|
||||
if (loadLatestMedicalRecordPromise) {
|
||||
return loadLatestMedicalRecordPromise;
|
||||
}
|
||||
|
||||
if (!patientInfo.value?.encounterId || !currentSelectTemplate.value.id) return;
|
||||
editForm.value.id = '';
|
||||
loading.value = true;
|
||||
try {
|
||||
// 获取患者的历史病历记录
|
||||
const res = await getRecordByEncounterIdList({
|
||||
isPage: 0,
|
||||
encounterId: patientInfo.value.encounterId,
|
||||
patientId: patientInfo.value.patientId,
|
||||
definitionId: currentSelectTemplate.value.id,
|
||||
});
|
||||
|
||||
// 创建一个新的Promise来处理请求
|
||||
loadLatestMedicalRecordPromise = new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
// 获取患者的历史病历记录
|
||||
const res = await getRecordByEncounterIdList({
|
||||
isPage: 0,
|
||||
encounterId: patientInfo.value.encounterId,
|
||||
patientId: patientInfo.value.patientId,
|
||||
definitionId: currentSelectTemplate.value.id,
|
||||
const historyRecords = res.data || [];
|
||||
if (historyRecords.length > 0) {
|
||||
// 按时间排序，获取最新的病历记录
|
||||
historyRecords.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime));
|
||||
const latestRecord = historyRecords[0];
|
||||
|
||||
// 保存最新病历ID，用于在History组件中高亮显示
|
||||
selectedHistoryRecordId.value = latestRecord.id;
|
||||
// 自动回显最新病历数据到模板
|
||||
editForm.value = latestRecord;
|
||||
nextTick(() => {
|
||||
if (emrComponentRef.value && latestRecord.contentJson) {
|
||||
try {
|
||||
const parsedData = JSON.parse(latestRecord.contentJson);
|
||||
emrComponentRef.value.setFormData(parsedData);
|
||||
} catch (parseError) {
|
||||
console.error('解析病历数据失败:', parseError);
|
||||
// 解析失败时仍然尝试设置空数据以清空之前的残留数据
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
} else {
|
||||
// 如果没有内容数据，也要清空组件中的数据
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
|
||||
// 通知History组件更新选中状态
|
||||
if (historyRef.value && typeof historyRef.value.updateSelectedRecord === 'function') {
|
||||
historyRef.value.updateSelectedRecord(latestRecord.id);
|
||||
}
|
||||
});
|
||||
|
||||
const historyRecords = res.data || [];
|
||||
if (historyRecords.length > 0) {
|
||||
// 按时间排序，获取最新的病历记录
|
||||
historyRecords.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime));
|
||||
const latestRecord = historyRecords[0];
|
||||
|
||||
// 保存最新病历ID，用于在History组件中高亮显示
|
||||
selectedHistoryRecordId.value = latestRecord.id;
|
||||
// 自动回显最新病历数据到模板
|
||||
editForm.value = latestRecord;
|
||||
nextTick(() => {
|
||||
if (emrComponentRef.value && latestRecord.contentJson) {
|
||||
try {
|
||||
const parsedData = JSON.parse(latestRecord.contentJson);
|
||||
emrComponentRef.value.setFormData(parsedData);
|
||||
} catch (parseError) {
|
||||
console.error('解析病历数据失败:', parseError);
|
||||
// 解析失败时仍然尝试设置空数据以清空之前的残留数据
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
} else {
|
||||
// 如果没有内容数据，也要清空组件中的数据
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
|
||||
// 通知History组件更新选中状态
|
||||
if (historyRef.value && typeof historyRef.value.updateSelectedRecord === 'function') {
|
||||
historyRef.value.updateSelectedRecord(latestRecord.id);
|
||||
}
|
||||
|
||||
resolve(); // 成功完成
|
||||
});
|
||||
} else {
|
||||
// 清空选中状态
|
||||
selectedHistoryRecordId.value = '';
|
||||
// 当没有历史记录时，也要清空当前表单数据，避免显示之前患者的数据
|
||||
editForm.value = {
|
||||
id: '',
|
||||
definitionId: '',
|
||||
definitionBusNo: '',
|
||||
contentJson: '',
|
||||
statusEnum: 1,
|
||||
organizationId: 0,
|
||||
encounterId: '',
|
||||
patientId: '',
|
||||
recordTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
createBy: '',
|
||||
source: '',
|
||||
};
|
||||
|
||||
nextTick(() => {
|
||||
if (emrComponentRef.value) {
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
resolve(); // 成功完成
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('加载最新病历数据失败=====>', error);
|
||||
// 出错时也清空选中状态
|
||||
} else {
|
||||
// 清空选中状态
|
||||
selectedHistoryRecordId.value = '';
|
||||
// 出错时也要清空表单数据，避免显示之前患者的数据
|
||||
// 当没有历史记录时，也要清空当前表单数据，避免显示之前患者的数据
|
||||
editForm.value = {
|
||||
id: '',
|
||||
definitionId: '',
|
||||
@@ -660,17 +619,37 @@ const loadLatestMedicalRecord = async () => {
|
||||
if (emrComponentRef.value) {
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
reject(error); // 错误完成
|
||||
});
|
||||
loading.value = false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
// 请求完成后清除Promise引用
|
||||
loadLatestMedicalRecordPromise = null;
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
ElMessage.error('加载最新病历数据失败=====>', error);
|
||||
// 出错时也清空选中状态
|
||||
selectedHistoryRecordId.value = '';
|
||||
// 出错时也要清空表单数据，避免显示之前患者的数据
|
||||
editForm.value = {
|
||||
id: '',
|
||||
definitionId: '',
|
||||
definitionBusNo: '',
|
||||
contentJson: '',
|
||||
statusEnum: 1,
|
||||
organizationId: 0,
|
||||
encounterId: '',
|
||||
patientId: '',
|
||||
recordTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
createBy: '',
|
||||
source: '',
|
||||
};
|
||||
|
||||
return loadLatestMedicalRecordPromise;
|
||||
nextTick(() => {
|
||||
if (emrComponentRef.value) {
|
||||
emrComponentRef.value.setFormData({});
|
||||
}
|
||||
});
|
||||
loading.value = false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 选择默认模板 - 获取住院病历分类下的第一个模板
|
||||
@@ -830,7 +809,7 @@ watch(
|
||||
}
|
||||
} else {
|
||||
// 如果没有患者信息，也要重置组件和表单数据
|
||||
currentComponent.value = '';
|
||||
currentComponent.value = undefined;
|
||||
editForm.value = {
|
||||
id: '',
|
||||
definitionId: '',
|
||||
@@ -856,41 +835,6 @@ watch(
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 合并两个监听器，避免重复触发
|
||||
let patientChangeProcessing = false; // 防止重复处理
|
||||
|
||||
watch(
|
||||
() => [patientInfo.value?.encounterId, currentSelectTemplate.value?.id],
|
||||
([newEncounterId, newTemplateId]) => {
|
||||
// 当患者就诊ID或模板ID变化时，加载最新病历数据
|
||||
if (newEncounterId && newTemplateId && !patientChangeProcessing) {
|
||||
patientChangeProcessing = true;
|
||||
|
||||
// 添加延迟以确保模板数据已更新
|
||||
nextTick(() => {
|
||||
loadLatestMedicalRecord().finally(() => {
|
||||
// 重置处理标志
|
||||
patientChangeProcessing = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听模板选择变化，当模板选择变化时加载最新病历数据
|
||||
watch(
|
||||
() => currentSelectTemplate.value.id,
|
||||
(newTemplateId) => {
|
||||
// 当模板选择变化时，加载该模板的最新病历数据
|
||||
if (newTemplateId) {
|
||||
// 只要有模板ID，就尝试加载数据，不管之前是否有患者信息
|
||||
// 因为可能是在切换患者后才选择模板
|
||||
loadLatestMedicalRecord();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
// 移除日志
|
||||
await queryTemplateTree();
|
||||
@@ -914,7 +858,43 @@ const onPrint = () => {
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ state });
|
||||
// 添加一个方法供父组件调用，处理患者切换
|
||||
const handlePatientChange = (patient) => {
|
||||
// 更新患者信息
|
||||
// 注意：这里我们不直接修改patientInfo.value，因为它是由父组件通过watch管理的
|
||||
// 我们只需要确保当前组件响应patientInfo的变化
|
||||
|
||||
// 重置当前组件，确保在切换患者时重新加载
|
||||
// 但我们需要确保在组件重新加载后能正确设置患者信息
|
||||
const selectedTemplateId = currentSelectTemplate.value?.id;
|
||||
|
||||
if (selectedTemplateId) {
|
||||
// 先清空当前组件
|
||||
currentComponent.value = undefined;
|
||||
|
||||
// 使用nextTick确保DOM更新后再重新加载组件和数据
|
||||
nextTick(() => {
|
||||
// 重新设置组件
|
||||
const template = templateData.value?.find(t => t.document && t.document.id === selectedTemplateId);
|
||||
if (template && template.document?.vueRouter) {
|
||||
currentComponent.value = template.document.vueRouter;
|
||||
|
||||
// 再次使用nextTick确保组件已加载后再加载数据
|
||||
nextTick(() => {
|
||||
loadLatestMedicalRecord();
|
||||
});
|
||||
} else {
|
||||
// 如果找不到对应模板，尝试选择默认模板
|
||||
selectDefaultTemplate();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 如果没有选中模板，尝试选择默认模板
|
||||
selectDefaultTemplate();
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ state, handlePatientChange });
|
||||
|
||||
const disNode = () => {
|
||||
leftShow.value = !leftShow.value;
|
||||
|
||||
Reference in New Issue
Block a user