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

feat(medicalOrderSet): 优化医嘱组套功能实现

Browse Source 
- 实现医嘱基础列表的分页功能，添加loading状态和缓存机制
- 添加防抖处理和组织机构ID参数支持，优化性能表现
- 实现医嘱组套的完整编辑功能，包括增删改查操作界面
- 添加医嘱组套预览、应用和管理功能模块
- 实现西医组套筛选功能，确保tcmFlag参数正确传递
- 优化医嘱组套数据结构，完善明细项信息处理逻辑
- 添加表单验证和错误处理，提升用户体验和系统稳定性
- 重构代码结构，采用响应式设计提高可维护性
This commit is contained in:
chenqi
2026-03-17 09:57:21 +08:00
parent 03939fb232
commit 8a7d2abb4a
30 changed files with 2066 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
openhis-ui-vue3/src/views/basicmanage/medicalOrderSet/components/adviceBaseList.vue
View File

@@ -1,12 +1,13 @@
<template>
<div @keyup="handleKeyDown" tabindex="0" ref="tableWrapper">
<div @keyup="handleKeyDown" tabindex="0" ref="tableWrapper" class="table-container">
<el-table
ref="adviceBaseRef"
height="400"
height="350"
:data="adviceBaseList"
highlight-current-row
@current-change="handleCurrentChange"
row-key="patientId"
v-loading="loading"
@cell-click="clickRow"
>
<el-table-column label="名称" align="center" prop="adviceName" />
@@ -21,13 +22,23 @@
<el-table-column label="注射药品" align="center" prop="injectFlag_enumText" />
<el-table-column label="皮试" align="center" prop="skinTestFlag_enumText" />
</el-table>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="queryParams.pageNum"
:page-size="20"
:total="total"
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
<script setup>
import {nextTick} from 'vue';
import {getAdviceBaseInfo} from './api';
import {throttle} from 'lodash-es';
import {debounce} from 'lodash-es';
const props = defineProps({
adviceQueryParams: {
@@ -41,33 +52,85 @@ const props = defineProps({
});
const emit = defineEmits(['selectAdviceBase']);
const total = ref(0);
const loading = ref(false);
const adviceBaseRef = ref();
const tableWrapper = ref();
const currentIndex = ref(0); // 当前选中行索引
const currentSelectRow = ref({});
const queryParams = ref({
pageSize: 100,
pageSize: 20,
pageNum: 1,
adviceTypes: '1,2,3',
organizationId: null,
});
const adviceBaseList = ref([]);
// 节流函数
const throttledGetList = throttle(
// 前端缓存 - 使用 sessionStorage 持久化缓存
const CACHE_PREFIX = 'advice_cache_';
const CACHE_EXPIRE = 5 * 60 * 1000; // 缓存5分钟
function getCacheKey(orgId, pageNum) {
return CACHE_PREFIX + orgId + '_' + pageNum;
}
function getFromCache(orgId, pageNum) {
try {
const key = getCacheKey(orgId, pageNum);
const cachedData = sessionStorage.getItem(key);
if (!cachedData) return null;
const cacheData = JSON.parse(cachedData);
if (Date.now() - cacheData.timestamp > CACHE_EXPIRE) {
sessionStorage.removeItem(key);
return null;
}
console.log('从前端缓存获取:', key);
return cacheData;
} catch (e) {
console.error('读取缓存失败:', e);
return null;
}
}
function setToCache(orgId, pageNum, data, total) {
try {
const key = getCacheKey(orgId, pageNum);
const cacheData = {
data: data,
total: total,
timestamp: Date.now()
};
sessionStorage.setItem(key, JSON.stringify(cacheData));
console.log('写入前端缓存:', key);
} catch (e) {
console.error('写入缓存失败:', e);
}
}
// 防抖函数 - 避免重复请求
const debouncedGetList = debounce(
() => {
// 只有当 organizationId 有效时才请求
if (!queryParams.value.organizationId) {
console.log('organizationId 无效，跳过请求');
return;
}
getList();
},
300,
{ leading: true, trailing: true }
{ leading: false, trailing: true }
);
// 监听adviceQueryParams变化
watch(
() => props.adviceQueryParams,
(newValue) => {
console.log('adviceQueryParams 变化:', newValue);
queryParams.value.searchKey = newValue.searchKey;
queryParams.value.adviceType = newValue.adviceType;
console.log(queryParams.value);
throttledGetList();
queryParams.value.organizationId = newValue.organizationId;
console.log('更新后的queryParams:', queryParams.value);
debouncedGetList();
},
{ deep: true }
);
@@ -77,26 +140,77 @@ watch(
() => props.adviceQueryParams?.searchKey,
(newVal) => {
queryParams.value.searchKey = newVal;
throttledGetList();
debouncedGetList();
}
);
getList();
// 监听organizationId变化
watch(
() => props.adviceQueryParams?.organizationId,
(newVal) => {
console.log('watch organizationId 变化:', newVal);
queryParams.value.organizationId = newVal;
// 当organizationId有效时重新获取数据
if (newVal) {
debouncedGetList();
}
}
);
// 不再页面加载时立即请求，等待用户点击时再请求
function getList() {
// 确保有 organizationId 才调用API
if (!queryParams.value.organizationId) {
console.log('organizationId 为空，跳过API调用');
return;
}
const orgId = queryParams.value.organizationId;
const pageNum = queryParams.value.pageNum;
// 尝试从本地缓存获取（只有第一页且无搜索关键字时使用缓存）
if (pageNum === 1 && !queryParams.value.searchKey) {
const cached = getFromCache(orgId, pageNum);
if (cached) {
adviceBaseList.value = cached.data;
total.value = cached.total;
return;
}
}
// 显示 loading
loading.value = true;
// queryParams.value.organizationId = '1922545444781481985';
getAdviceBaseInfo(queryParams.value).then((res) => {
adviceBaseList.value = res.data.records;
console.log(adviceBaseList.value)
total.value = res.data.total;
adviceBaseList.value = res.data.records || [];
console.log('获取到医嘱数据:', adviceBaseList.value)
total.value = res.data.total || 0;
// 缓存第一页数据
if (pageNum === 1 && !queryParams.value.searchKey) {
setToCache(orgId, pageNum, adviceBaseList.value, total.value);
}
nextTick(() => {
currentIndex.value = 0;
if (adviceBaseList.value.length > 0) {
if (adviceBaseList.value.length > 0 && adviceBaseRef.value) {
adviceBaseRef.value.setCurrentRow(adviceBaseList.value[0]);
}
});
})
.finally(() => {
loading.value = false;
});
}
// 当前页改变（分页）
function handlePageChange(page) {
queryParams.value.pageNum = page;
getList();
}
// 处理键盘事件
const handleKeyDown = (event) => {
const key = event.key;
@@ -155,7 +269,17 @@ defineExpose({
</script>
<style scoped>
.table-container {
display: flex;
flex-direction: column;
}
.pagination-wrapper {
display: flex;
justify-content: center;
padding: 10px 0;
background: #fff;
}
.popover-table-wrapper:focus {
outline: 2px solid #409eff; /* 聚焦时的高亮效果 */
outline: 2px solid #409eff;
}
</style>

75
openhis-ui-vue3/src/views/basicmanage/medicalOrderSet/index.vue
View File

@@ -401,10 +401,10 @@ const { method_code, rate_code, distribution_category_code } = proxy.useDict(
'rate_code',
'distribution_category_code'
);
// 查询参数
const personalQuery = reactive({ searchKey: '' });
const departmentQuery = reactive({ searchKey: '' });
const hospitalQuery = reactive({ searchKey: '' });
// 查询参数 - 西医组套 tcmFlag = 0
const personalQuery = reactive({ searchKey: '', tcmFlag: 0 });
const departmentQuery = reactive({ searchKey: '', tcmFlag: 0 });
const hospitalQuery = reactive({ searchKey: '', tcmFlag: 0 });
// 加载状态
const loading = reactive({
@@ -462,18 +462,15 @@ function getInit() {
});
}
// 获取所有数据
function fetchAllData(params = {}) {
getPersonalListData(params);
getDepartmentListData(params);
getHospitalListData(params);
// 获取所有数据（不传参，保留查询框已有的参数）
function fetchAllData() {
getPersonalListData();
getDepartmentListData();
getHospitalListData();
}
// 获取个人医嘱列表
function getPersonalListData(params = {}) {
// 合并查询参数
Object.assign(personalQuery, params);
function getPersonalListData() {
loading.personal = true;
getPersonalList(personalQuery)
.then((response) => {
@@ -488,10 +485,7 @@ function getPersonalListData(params = {}) {
}
// 获取科室医嘱列表
function getDepartmentListData(params = {}) {
// 合并查询参数
Object.assign(departmentQuery, params);
function getDepartmentListData() {
loading.department = true;
getDeptList(departmentQuery)
.then((response) => {
@@ -506,10 +500,7 @@ function getDepartmentListData(params = {}) {
}
// 获取全院医嘱列表
function getHospitalListData(params = {}) {
// 合并查询参数
Object.assign(hospitalQuery, params);
function getHospitalListData() {
loading.hospital = true;
getAllList(hospitalQuery)
.then((response) => {
@@ -627,10 +618,11 @@ function submitForm() {
if (valid) {
submitLoading.value = true;
// 模拟提交操作（这里应该调用相应的API）
setTimeout(() => {
console.log('提交表单数据：', formData);
let params = { ...formData };
// 提交数据
console.log('提交表单数据：', formData);
let params = { ...formData };
// 添加 tcmFlag：西医组套为 0
params.tcmFlag = 0;
// 过滤掉空列表项（没有adviceDefinitionId的项）
params.detailList = prescriptionList.value
.filter((item) => item.adviceDefinitionId) // 过滤掉空列表项
@@ -647,49 +639,70 @@ function submitForm() {
doseQuantity: item.doseQuantity,
};
});
console.log('保存参数：', params);
// 编辑模式
switch (currentTab.value) {
case 'personal':
savePersonal(params).then((res) => {
console.log('保存个人组套返回:', res);
if (res.code === 200) {
ElMessage.success(res.message);
ElMessage.success(res.msg || '保存成功');
// 重新获取数据以保持一致性
fetchAllData();
} else {
ElMessage.error(res.msg || '保存失败');
}
submitLoading.value = false;
dialogVisible.value = false;
// 清空处方列表
prescriptionList.value = [];
}).catch((err) => {
console.error('保存个人组套失败:', err);
ElMessage.error('保存失败: ' + (err.message || '未知错误'));
submitLoading.value = false;
});
break;
case 'department':
saveDepartment(params).then((res) => {
console.log('保存科室组套返回:', res);
if (res.code === 200) {
ElMessage.success(res.message);
ElMessage.success(res.msg || '保存成功');
// 重新获取数据以保持一致性
fetchAllData();
} else {
ElMessage.error(res.msg || '保存失败');
}
submitLoading.value = false;
dialogVisible.value = false;
// 清空处方列表
prescriptionList.value = [];
}).catch((err) => {
console.error('保存科室组套失败:', err);
ElMessage.error('保存失败: ' + (err.message || '未知错误'));
submitLoading.value = false;
});
break;
case 'hospital':
saveAll(params).then((res) => {
console.log('保存全院组套返回:', res);
if (res.code === 200) {
ElMessage.success(res.message);
ElMessage.success(res.msg || '保存成功');
// 重新获取数据以保持一致性
fetchAllData();
} else {
ElMessage.error(res.msg || '保存失败');
}
submitLoading.value = false;
dialogVisible.value = false;
// 清空处方列表
prescriptionList.value = [];
}).catch((err) => {
console.error('保存全院组套失败:', err);
ElMessage.error('保存失败: ' + (err.message || '未知错误'));
submitLoading.value = false;
});
break;
}
}, 500);
}
});
}
@@ -728,6 +741,10 @@ function handleFocus(row, index) {
row.showPopover = true;
// 将输入框的值传递给adviceBaseList组件作为查询条件
adviceQueryParams.searchKey = row.adviceName || '';
// 获取当前登录用户的科室ID
const userStore = useUserStore();
adviceQueryParams.organizationId = userStore.orgId;
console.log('handleFocus - organizationId:', userStore.orgId, 'userStore:', userStore);
}
// 处理输入事件