wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(ui): 优化按钮样式和数据加载逻辑

Browse Source 
- 将多个按钮组件从 type="text" 改为 link 属性，提升界面美观性
- 修复 PatientList 组件中姓名显示的文本截断功能
- 在住院记录模板中添加对 patientInfo 变化的监听，自动更新表单数据
- 优化打印机列表获取逻辑，添加连接状态检查和警告信息
- 移除不必要的防抖和重复请求防护逻辑，简化代码实现
- 修复多处组件中对 patientInfo 属性访问的安全性问题
- 优化病历数据加载时机，移除防抖包装直接调用加载函数
- 改进数据设置逻辑，避免覆盖未传入字段的原有值
- 调整组件属性定义，使 patientInfo 参数变为可选并设置默认值
- 优化患者切换时的组件重置和数据加载流程
This commit is contained in:
chenqi
2026-01-27 17:32:03 +08:00
parent 0f0dc70c7e
commit 4f0cc1a0c4
21 changed files with 232 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
openhis-ui-vue3/src/views/inpatientDoctor/home/components/adviceBaseList.vue
View File

@@ -106,7 +106,7 @@ watch(
getList();
function getList() {
loading.value = true;
queryParams.value.organizationId = props.patientInfo.inHospitalOrgId;
queryParams.value.organizationId = props.patientInfo?.inHospitalOrgId || '';
getAdviceBaseInfo(queryParams.value)
.then((res) => {
console.log(res.data.records);

3
openhis-ui-vue3/src/views/inpatientDoctor/home/components/diagnosis/diagnosis.vue
View File

@@ -203,7 +203,8 @@ const form = ref({
const props = defineProps({
patientInfo: {
type: Object,
required: true,
required: false,
default: () => ({}),
},
});
const emits = defineEmits(['diagnosisSave']);

17
openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/applicationFormBottomBtn.vue
View File

@@ -10,25 +10,25 @@
<el-button
type="primary"
@click="showApplicationFormDialog('LaboratoryTests')"
:disabled="!patientInfo?.inHospitalOrgId"
:disabled="!props.patientInfo?.inHospitalOrgId"
>检验</el-button
>
<el-button
type="primary"
@click="showApplicationFormDialog('MedicalExaminations')"
:disabled="!patientInfo?.inHospitalOrgId"
:disabled="!props.patientInfo?.inHospitalOrgId"
>检查</el-button
>
<el-button
type="primary"
@click="showApplicationFormDialog('BloodTransfusion')"
:disabled="!patientInfo?.inHospitalOrgId"
:disabled="!props.patientInfo?.inHospitalOrgId"
>输血</el-button
>
<el-button
type="primary"
@click="showApplicationFormDialog('Surgery')"
:disabled="!patientInfo?.inHospitalOrgId"
:disabled="!props.patientInfo?.inHospitalOrgId"
>手术</el-button
>
</el-button-group>
@@ -58,14 +58,19 @@
<script setup>
import {computed, getCurrentInstance, nextTick, onBeforeMount, onMounted, reactive, ref,} from 'vue';
import BloodTransfusion from './bloodTransfusion.vue';
import {patientInfo} from '../../../store/patient.js';
import Surgery from './surgery.vue';
import LaboratoryTests from './laboratoryTests.vue';
import MedicalExaminations from './medicalExaminations.vue';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['refResh']);
const props = defineProps({});
const props = defineProps({
patientInfo: {
type: Object,
required: false,
default: () => ({}),
},
});
const state = reactive({});
const components = ref({
BloodTransfusion,

101
openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/index.vue
View File

@@ -297,16 +297,17 @@
</el-table>
</div>
<!-- // 底部按钮 -->
<application-form-bottom-btn @refResh="refresh" />
<application-form-bottom-btn :patientInfo="patientInfo" @refResh="refresh" />
<OrderGroupDrawer
ref="orderFroupRef"
:diagnosis="diagnosisInfo"
:organizationId="patientInfo?.orgId || ''"
@useOrderGroup="handleSaveGroup"
/>
<PrescriptionHistory
ref="prescriptionHistoryRef"
:diagnosis="diagnosisInfo"
:patientInfo="patientInfo"
:patientInfo="patientInfo || {}"
@userPrescriptionHistory="handleSaveHistory"
/>
<LeaveHospitalDialog
@@ -405,7 +406,8 @@ const buttonDisabled = computed(() => {
const props = defineProps({
patientInfo: {
type: Object,
required: true,
required: false,
default: () => ({}),
},
activeTab: {
type: String,
@@ -525,33 +527,19 @@ function getList() {
function refresh() {
getListInfo(false);
}
// 防止重复请求的标志
let listInfoRequestPromise = null;
// 获取列表信息
function getListInfo(addNewRow) {
// 如果已经有正在进行的请求，则返回该请求的Promise
if (listInfoRequestPromise) {
return listInfoRequestPromise;
}
loadingInstance = ElLoading.service({ fullscreen: true });
setTimeout(() => {
if (loadingInstance) {
loadingInstance.close();
}
loadingInstance.close();
}, 180);
isAdding.value = false;
expandOrder.value = [];
getPrescriptionList(patientInfo.value.encounterId).then((res) => {
console.log('getListInfo==========>', JSON.stringify(res.data));
// 并行请求两个API并将结果合并处理
listInfoRequestPromise = Promise.all([
getPrescriptionList(patientInfo.value.encounterId),
getContract({ encounterId: patientInfo.value.encounterId })
])
.then(([prescriptionRes, contractRes]) => {
// 处理处方列表
prescriptionList.value = prescriptionRes.data
loadingInstance.close();
prescriptionList.value = res.data
.map((item) => {
return {
...JSON.parse(item.contentJson),
@@ -563,35 +551,15 @@ function getListInfo(addNewRow) {
.sort((a, b) => {
return new Date(b.requestTime) - new Date(a.requestTime);
});
// 处理合同列表
contractList.value = contractRes.data;
// 更新账户ID
accountId.value = patientInfo.value.accountId;
// 更新标记
getGroupMarkers();
getGroupMarkers(); // 更新标记
if (props.activeTab == 'prescription' && addNewRow) {
handleAddPrescription();
}
console.log('getListInfo==========>', JSON.stringify(prescriptionRes.data));
})
.catch(error => {
console.error('获取列表信息失败:', error);
ElMessage.error('获取列表信息失败');
})
.finally(() => {
if (loadingInstance) {
loadingInstance.close();
}
// 请求完成后清除Promise引用
listInfoRequestPromise = null;
});
return listInfoRequestPromise;
getContract({ encounterId: patientInfo.value.encounterId }).then((res) => {
contractList.value = res.data;
});
accountId.value = patientInfo.value.accountId;
}
// 数据过滤
const filterPrescriptionList = computed(() => {
@@ -605,37 +573,18 @@ const filterPrescriptionList = computed(() => {
return pList;
});
// 防止诊断信息重复请求的标志
let diagnosisInfoRequestPromise = null;
function getDiagnosisInfo() {
// 如果已经有正在进行的请求，则返回该请求的Promise
if (diagnosisInfoRequestPromise) {
return diagnosisInfoRequestPromise;
}
diagnosisInfoRequestPromise = getEncounterDiagnosis(patientInfo.value.encounterId)
.then((res) => {
diagnosisList.value = res.data;
let diagnosisInfo = diagnosisList.value.filter((item) => {
return item.maindiseFlag == 1;
});
diagnosisInfo.value = diagnosisInfo[0];
conditionDefinitionId.value = diagnosisInfo[0].definitionId;
conditionId.value = diagnosisInfo[0].conditionId;
encounterDiagnosisId.value = diagnosisInfo[0].encounterDiagnosisId;
diagnosisName.value = diagnosisInfo[0].name;
})
.catch(error => {
console.error('获取诊断信息失败:', error);
ElMessage.error('获取诊断信息失败');
})
.finally(() => {
// 请求完成后清除Promise引用
diagnosisInfoRequestPromise = null;
getEncounterDiagnosis(patientInfo.value.encounterId).then((res) => {
diagnosisList.value = res.data;
let diagnosisInfo = diagnosisList.value.filter((item) => {
return item.maindiseFlag == 1;
});
return diagnosisInfoRequestPromise;
diagnosisInfo.value = diagnosisInfo[0];
conditionDefinitionId.value = diagnosisInfo[0].definitionId;
conditionId.value = diagnosisInfo[0].conditionId;
encounterDiagnosisId.value = diagnosisInfo[0].encounterDiagnosisId;
diagnosisName.value = diagnosisInfo[0].name;
});
}
function getRowDisabled(row) {

22
openhis-ui-vue3/src/views/inpatientDoctor/home/emr/components/history.vue
View File

@@ -65,40 +65,22 @@ const queryParams = ref({
isPage: 0,
});
const historyData = ref([]);
// 防止重复请求的标志
let queryListPromise = null;
const queryList = async () => {
// 如果已经有正在进行的请求，则返回该请求的Promise
if (queryListPromise) {
return queryListPromise;
}
try {
if (patientInfo.value.encounterId && unref(definitionId) && unref(definitionId) !== '') {
queryListPromise = getRecordByEncounterIdList({
const res = await getRecordByEncounterIdList({
...queryParams.value,
encounterId: patientInfo.value.encounterId,
patientId: patientInfo.value.patientId,
definitionId: unref(definitionId),
})
.then(res => {
historyData.value = res.data || [];
})
.finally(() => {
// 请求完成后清除Promise引用
queryListPromise = null;
});
return queryListPromise;
historyData.value = res.data || [];
} else {
historyData.value = [];
}
} catch (error) {
// 不显示错误消息，避免干扰用户体验
historyData.value = [];
// 请求完成后清除Promise引用
queryListPromise = null;
}
};

240
openhis-ui-vue3/src/views/inpatientDoctor/home/emr/index.vue
View File

@@ -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;

70
openhis-ui-vue3/src/views/inpatientDoctor/home/index.vue
View File

@@ -109,25 +109,16 @@ const getList = () => {
});
};
// 标记是否已经手动选择过患者，防止后续自动选择
const hasManuallySelectedPatient = ref(false);
// 添加一个变量来跟踪当前期望的患者ID
let expectedPatientId = null;
watch(
() => filteredCardData.value,
(newData) => {
// 如果有数据且当前没有选中患者，且是首次加载，默认选择第一条
// 只有在从未手动选择过患者的情况下才自动选择
// 并且确保当前没有正在处理的患者切换操作
if (
newData &&
newData.length > 0 &&
!cardId.value &&
isFirstLoad.value &&
!patientInfo.value?.encounterId &&
!hasManuallySelectedPatient.value
!patientInfo.value?.encounterId
) {
const firstPatient = newData[0];
if (firstPatient?.encounterId) {
@@ -139,81 +130,34 @@ watch(
debounceTimer = setTimeout(() => {
handleItemClick(firstPatient);
isFirstLoad.value = false;
hasManuallySelectedPatient.value = true; // 标记已手动选择过
}, 100);
}
} else if (expectedPatientId && cardId.value && cardId.value !== expectedPatientId) {
// 如果当前cardId与期望的不一致，且不是初始状态，这可能意味着发生了意外的重置
// 这种情况下，我们不希望自动选择第一个患者
console.debug(`期望的患者ID: ${expectedPatientId}, 当前cardId: ${cardId.value}`);
}
},
{ immediate: true }
);
// 更新handleItemClick函数，设置期望的患者ID
// 防抖函数，防止快速点击导致状态冲突
let debounceTimer = null;
const handleItemClick = (node) => {
// 设置期望的患者ID
expectedPatientId = node.encounterId;
// 清除之前的计时器
if (debounceTimer) {
clearTimeout(debounceTimer);
}
// 取消之前未完成的患者加载操作
if (currentPatientPromise) {
// 注意：这里无法真正取消Promise，但我们可以标记当前操作已过期
currentPatientPromise.cancelled = true;
}
// 设置新的计时器
debounceTimer = setTimeout(async () => {
// 检查是否已被取消
if (currentPatientPromise?.cancelled) {
return;
}
debounceTimer = setTimeout(() => {
cardId.value = node.encounterId;
// 同时更新本地和全局状态，确保模块内组件和跨模块组件都能正确响应
updatePatientInfo(node);
updateLocalPatientInfo(node);
// 标记已手动选择患者，防止自动选择第一条
hasManuallySelectedPatient.value = true;
// 创建一个新的Promise来追踪这次加载操作
currentPatientPromise = Promise.all([
// 并行调用医嘱相关的API，避免重复请求
adviceRef.value?.getListInfo().catch(error => {
console.error('获取医嘱信息失败:', error);
return null;
}),
adviceRef.value?.getDiagnosisInfo().catch(error => {
console.error('获取诊断信息失败:', error);
return null;
}),
// 获取诊断信息
diagnosisRef.value?.getList?.().catch(error => {
console.error('获取诊断信息失败:', error);
return null;
})
]);
try {
await currentPatientPromise;
// 检查在此期间是否选择了其他患者
if (currentPatientPromise?.cancelled) {
return;
}
} catch (error) {
console.error('加载患者信息时出错:', error);
}
diagnosisRef.value?.getList();
adviceRef.value?.getListInfo();
adviceRef.value?.getDiagnosisInfo();
}, 100); // 100ms 防抖延迟
};
// 防抖函数，防止快速点击导致状态冲突
const handleSearch = (keyword) => {
searchData.keyword = keyword;
getList();