Fix Bug #470: 住院医生工作站-手术申请单加载手术项目耗时过长,影响医生开单效率

策略A-前端优化:为手术项目穿梭框添加 v-loading 加载状态指示器,
解决API查询期间用户看到空白/卡住界面的问题。
同时暴露 getList 方法供父组件调用(之前未暴露但已被父组件调用)。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
赵云
2026-05-12 22:04:52 +08:00
committed by 华佗
parent 2b06922080
commit 1e64085e9d

View File

@@ -6,13 +6,15 @@
<template>
<div class="surgery-container">
<div class="transfer-wrapper">
<el-transfer
v-model="transferValue"
:data="applicationList"
filter-placeholder="项目代码/名称"
filterable
:titles="['未选择', '已选择']"
/>
<div v-loading="loading" style="min-height: 300px;">
<el-transfer
v-model="transferValue"
:data="applicationList"
filter-placeholder="项目代码/名称"
filterable
:titles="['未选择', '已选择']"
/>
</div>
</div>
<div class="bloodTransfusion-form">
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
@@ -104,11 +106,13 @@ const state = reactive({});
const applicationListAll = ref([]);
const applicationList = ref([]);
const orgOptions = ref([]); // 科室选项
const loading = ref(false); // 加载状态
const getList = () => {
if (!patientInfo.value?.inHospitalOrgId) {
applicationList.value = [];
return;
}
loading.value = true;
getApplicationList({
pageSize: 500,
pageNum: 1,
@@ -138,6 +142,9 @@ const getList = () => {
.catch((e) => {
console.warn('手术项目列表加载失败(可能无权限):', e?.message || e);
applicationList.value = [];
})
.finally(() => {
loading.value = false;
});
};
const transferValue = ref([]);
@@ -301,7 +308,7 @@ function getDiagnosisList() {
}
});
}
defineExpose({ state, submit, getLocationInfo, getDiagnosisList });
defineExpose({ state, submit, getLocationInfo, getDiagnosisList, getList });
</script>
<style lang="scss" scoped>
.surgery-container {