456 lines
13 KiB
Vue
456 lines
13 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="20" style="margin-bottom: 20px">
|
||
<el-col :span="4" :xs="24">
|
||
<el-button
|
||
:type="selectType === 'total' ? 'primary' : 'default'"
|
||
@click="handleSelectType('total')"
|
||
>汇总</el-button
|
||
>
|
||
<el-button
|
||
:type="selectType === 'drug' ? 'primary' : 'default'"
|
||
@click="handleSelectType('drug')"
|
||
>发药</el-button
|
||
>
|
||
</el-col>
|
||
<!-- <el-col :span="18" :xs="24">
|
||
<el-form ref="queryParams" label-width="100px" :model="queryParams" :inline="true">
|
||
<el-form-item label="窗口" prop="windowDataText" label-width="120px">
|
||
<el-select
|
||
v-model="queryParams.windowDataText"
|
||
placeholder="请选择"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="item in windowData"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="摆药单" prop="medicationListText" label-width="120px">
|
||
<el-select
|
||
v-model="queryParams.medicationListText"
|
||
placeholder="请选择"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="item in medicationList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="范围" prop="time" label-width="100px">
|
||
<el-radio-group v-model="queryParams.timeRange">
|
||
<el-radio v-for="(item, index) in timeRangeList" :key="index" :value="item.value">
|
||
{{ item.label }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="时间" prop="time" label-width="100px">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="datetimerange"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col> -->
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="6" class="left-container">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form
|
||
:model="queryParamsPatient"
|
||
ref="queryRef"
|
||
v-show="showSearch"
|
||
label-width="120"
|
||
inline="true"
|
||
>
|
||
<el-form-item label="患者信息" prop="searchKey" label-width="120">
|
||
<el-input
|
||
v-model="queryParamsPatient.searchKey"
|
||
placeholder="请输入姓名/证件号"
|
||
clearable
|
||
style="width: 240px"
|
||
@keyup.enter="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="发药状态"
|
||
prop="statusEnum"
|
||
v-if="selectType !== 'drug'"
|
||
label-width="120"
|
||
>
|
||
<el-select
|
||
v-model="queryParamsPatient.statusEnum"
|
||
placeholder="请选择"
|
||
clearable
|
||
filterable
|
||
style="width: 240px"
|
||
@change="handleQuery"
|
||
>
|
||
<el-option
|
||
v-for="item in dispenseStatusOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="就诊日期" prop="startTime">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="YYYY-MM-DD"
|
||
style="width: 240px"
|
||
@keyup.enter="handleQuery"
|
||
@change="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" style="border-radius: 4px">
|
||
<el-col :span="24">
|
||
<el-table
|
||
:data="patientList"
|
||
border
|
||
highlight-current-row
|
||
style="height: cal(100%-200px); width: 100%"
|
||
@row-click="handleCurrentChange"
|
||
>
|
||
<!-- 汇总状态下显示的字段 -->
|
||
<template v-if="selectType === 'total'">
|
||
<el-table-column prop="applicantName" label="申请人" align="center" />
|
||
<el-table-column prop="sourceLocationName" label="发药药房" align="center" />
|
||
<el-table-column prop="statusEnum_enumText" label="状态" align="center" />
|
||
<el-table-column prop="applyTime" label="申请日期" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.applyTime ? parseTime(scope.row.applyTime, '{y}-{m}-{d}') : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
<!-- 明细状态下显示的字段 -->
|
||
<template v-else>
|
||
<el-table-column prop="patientName" label="姓名" align="center" />
|
||
<el-table-column prop="genderEnum_enumText" label="性别" align="center" />
|
||
<el-table-column prop="age" label="年龄" align="center" />
|
||
<el-table-column prop="startTime" label="就诊日期" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.startTime ? parseTime(scope.row.startTime, '{y}-{m}-{d}') : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
</el-col>
|
||
<el-col :span="24" style="padding: 10px 12px 12px 12px">
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
v-model:page="queryParams.pageNo"
|
||
v-model:limit="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="18" :xs="24">
|
||
<!-- 根据当前选中的tab显示不同的表格组件 -->
|
||
<MedicationTable v-if="selectType === 'total'" :tableData="tableData" :busNo="busNo" />
|
||
<DetailMedicationTable
|
||
v-else-if="selectType === 'drug'"
|
||
:tableData="detailTableData"
|
||
:encounterId="encounterId"
|
||
@call-medication-summary-detail="callMedicationSummaryDetail"
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import MedicationTable from './components/MedicationTable.vue';
|
||
import DetailMedicationTable from './components/DetailMedicationTable.vue';
|
||
import { getCurrentInstance } from 'vue';
|
||
import {
|
||
getFromSummaryList,
|
||
getEncounterList,
|
||
getMedicationSummaryDetail,
|
||
getFromDetailList,
|
||
} from './components/api';
|
||
|
||
// 响应式数据
|
||
const loading = ref(false);
|
||
const patientList = ref([]);
|
||
const total = ref(0);
|
||
const showSearch = ref(true);
|
||
const { proxy } = getCurrentInstance();
|
||
// 查询参数
|
||
const queryParams = reactive({
|
||
searchKey: '',
|
||
statusEnum: '',
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
windowDataText: '',
|
||
medicationListText: '',
|
||
timeRange: 1,
|
||
});
|
||
const queryParamsPatient = ref({
|
||
searchKey: '',
|
||
statusEnum: '1',
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
});
|
||
// 日期范围
|
||
const dateRange = ref([
|
||
new Date().toISOString().split('T')[0],
|
||
new Date().toISOString().split('T')[0],
|
||
]);
|
||
|
||
// 发药状态选项
|
||
const dispenseStatusOptions = ref([
|
||
{ label: '待发药', value: '1' },
|
||
{ label: '已发药', value: '2' },
|
||
{ label: '全部', value: '0' },
|
||
]);
|
||
|
||
// 加载患者列表数据
|
||
async function getList() {
|
||
if (dateRange.value == null) {
|
||
proxy.$message.warning('请选择日期');
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
try {
|
||
let response;
|
||
// 构建查询参数 - 只保留必要的分页和筛选条件
|
||
const params = {
|
||
searchKey: queryParamsPatient.value.searchKey,
|
||
statusEnum: queryParamsPatient.value.statusEnum,
|
||
pageNo: queryParamsPatient.value.pageNo,
|
||
pageSize: queryParamsPatient.value.pageSize,
|
||
startTime: dateRange.value[0],
|
||
endTime: dateRange.value[1],
|
||
};
|
||
// 根据当前标签页调用不同的接口
|
||
if (selectType.value === 'total') {
|
||
// 汇总标签页
|
||
response = await getFromSummaryList(params);
|
||
patientList.value = response.data;
|
||
total.value = response.data.length || 0;
|
||
} else {
|
||
// 明细标签页
|
||
response = await getEncounterList(params);
|
||
patientList.value = response.data.records;
|
||
total.value = response.data.total || 0;
|
||
}
|
||
} catch (error) {
|
||
patientList.value = [];
|
||
total.value = 0;
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 搜索处理
|
||
async function handleQuery() {
|
||
queryParamsPatient.value.pageNo = 1; // 重置为第一页
|
||
await getList();
|
||
}
|
||
const busNo = ref('');
|
||
const encounterId = ref('');
|
||
// 处理表格行点击
|
||
function handleCurrentChange(row) {
|
||
busNo.value = row.busNo;
|
||
encounterId.value = row.encounterId;
|
||
if (selectType.value === 'total') {
|
||
// 汇总标签页
|
||
callSummaryMedicationDetail(row.busNo);
|
||
} else {
|
||
// 明细标签页
|
||
callMedicationSummaryDetail(row.encounterId);
|
||
}
|
||
}
|
||
|
||
// 明细标签页
|
||
async function callMedicationSummaryDetail(encounterId) {
|
||
console.log('点击明细标签页', encounterId);
|
||
// 显示加载提示
|
||
loading.value = true;
|
||
try {
|
||
const params = {
|
||
encounterId,
|
||
};
|
||
|
||
const response = await getMedicationSummaryDetail(params);
|
||
// 处理药品汇总详情数据
|
||
handleMedicationSummaryDetail(response.data);
|
||
} catch (error) {
|
||
ElMessage.error('获取药品汇总详情失败：' + (error.message || '未知错误'));
|
||
// 发生错误时清空数据
|
||
handleMedicationSummaryDetail([]);
|
||
} finally {
|
||
// 无论成功失败都关闭加载状态
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 汇总标签页
|
||
async function callSummaryMedicationDetail(busNo) {
|
||
// 显示加载提示
|
||
loading.value = true;
|
||
try {
|
||
const params = {
|
||
busNo,
|
||
};
|
||
|
||
const response = await getFromDetailList(params);
|
||
|
||
// 处理汇总药品详情数据
|
||
handleMedicationSummaryDetail(response.data);
|
||
} catch (error) {
|
||
ElMessage.error('获取汇总药品详情失败：' + (error.message || '未知错误'));
|
||
// 发生错误时清空数据
|
||
handleMedicationSummaryDetail([]);
|
||
} finally {
|
||
// 无论成功失败都关闭加载状态
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 窗口数据
|
||
const windowData = reactive([
|
||
{
|
||
label: '窗口1',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '窗口2',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '窗口3',
|
||
value: 3,
|
||
},
|
||
]);
|
||
|
||
// 摆药单数据
|
||
const medicationList = reactive([
|
||
{
|
||
label: '药单1',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '药单2',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '药单3',
|
||
value: 3,
|
||
},
|
||
]);
|
||
|
||
// 时间范围选项
|
||
const timeRangeList = [
|
||
{
|
||
label: '全部',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '长期',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '临时',
|
||
value: 3,
|
||
},
|
||
];
|
||
|
||
// 表格类型
|
||
const selectType = ref('total');
|
||
|
||
// 表格数据，用于显示右侧药品列表（汇总tab）
|
||
const tableData = reactive([]);
|
||
|
||
// 明细表格数据，用于明细tab
|
||
const detailTableData = reactive([]);
|
||
|
||
// 切换表格类型
|
||
function handleSelectType(type) {
|
||
selectType.value = type;
|
||
reset();
|
||
getList();
|
||
}
|
||
function reset() {
|
||
busNo.value = '';
|
||
encounterId.value = '';
|
||
patientList.value = [];
|
||
total.value = 0;
|
||
// 保持响应式引用不变，逐字段还原默认
|
||
queryParamsPatient.value.searchKey = '';
|
||
queryParamsPatient.value.statusEnum = '1';
|
||
queryParamsPatient.value.pageNo = 1;
|
||
queryParamsPatient.value.pageSize = 10;
|
||
}
|
||
// 处理子组件传递的药品汇总详情数据
|
||
function handleMedicationSummaryDetail(data) {
|
||
// 检查数据是否为数组
|
||
const medicationData = Array.isArray(data)
|
||
? data
|
||
: typeof data === 'object' && data !== null && Array.isArray(data.records)
|
||
? data.records
|
||
: [];
|
||
|
||
// 根据当前tab将数据分配到不同的表格
|
||
if (selectType.value === 'total') {
|
||
// 汇总tab - 清空表格数据
|
||
tableData.splice(0, tableData.length);
|
||
if (medicationData.length > 0) {
|
||
medicationData.forEach((item, index) => {
|
||
tableData.push({
|
||
currentIndex: index + 1,
|
||
...item,
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
// 明细tab - 将数据渲染到DetailMedicationTable组件
|
||
detailTableData.splice(0, detailTableData.length);
|
||
medicationData.forEach((item) => {
|
||
detailTableData.push({
|
||
...item,
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
// 组件挂载时初始化数据
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
.left-container {
|
||
border-radius: 4px;
|
||
border: 1px solid #f5f5f5;
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
}
|
||
</style> |