449 lines
13 KiB
Vue
449 lines
13 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
|
|
<el-form-item label="统计时间：">
|
|
<el-date-picker
|
|
v-model="occurrenceTime"
|
|
type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 300px"
|
|
value-format="YYYY-MM-DD" />
|
|
</el-form-item>
|
|
<el-form-item label="统计类型：" prop="statisticsType">
|
|
<el-select
|
|
v-model="queryParams.statisticsType"
|
|
placeholder=""
|
|
clearable
|
|
style="width: 150px"
|
|
>
|
|
<el-option label="门诊收入分类" value="outpatientIncome" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="医院：" prop="hospital">
|
|
<el-select
|
|
v-model="queryParams.hospital"
|
|
placeholder=""
|
|
clearable
|
|
style="width: 150px">
|
|
<el-option label="长春市朝阳区中医院" value="sameHospital" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="科室：" prop="department">
|
|
<el-select
|
|
v-model="queryParams.department"
|
|
placeholder="请选择科室"
|
|
clearable
|
|
style="width: 150px"
|
|
@change="handleDepartmentChange"
|
|
>
|
|
<el-option label="全部" value="all" />
|
|
<el-option
|
|
v-for="dept in departmentOptions"
|
|
:key="dept.value"
|
|
:label="dept.label"
|
|
:value="dept.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="项目类型：" prop="itemType">
|
|
<el-select
|
|
v-model="queryParams.itemType"
|
|
placeholder="请选择项目类型"
|
|
clearable
|
|
style="width: 150px"
|
|
:disabled="!queryParams.department || queryParams.department === 'all'"
|
|
>
|
|
<el-option label="全部" value="all" />
|
|
<el-option
|
|
v-for="item in filteredItemTypeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" plain icon="Search" @click="handleQuery">查询</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="warning" plain icon="CircleClose" @click="handleClear">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="processedTableData" @selection-change="handleSelectionChange"
|
|
:span-method="spanMethod" height="calc(100vh - 300px)" border>
|
|
<el-table-column type="selection" width="50" align="center" />
|
|
<el-table-column label="科室" align="center" key="department" prop="department" width="120"
|
|
:show-overflow-tooltip="true" />
|
|
<el-table-column label="类别" align="center" key="category" prop="category" width="120" />
|
|
<el-table-column label="金额" align="center" key="amount" prop="amount" width="120">
|
|
<template #default="scope">
|
|
<span :class="{
|
|
'subtotal-text': scope.row.rowType === 'subtotal',
|
|
'drug-text': scope.row.rowType === 'drug',
|
|
'total-text': scope.row.rowType === 'total'
|
|
}">
|
|
{{ formatDisplayValue(scope.row.amount, scope.row.rowType) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="药品成本" align="center" prop="drugCost" width="120">
|
|
<template #default="scope">
|
|
<span :class="{
|
|
'subtotal-text': scope.row.rowType === 'subtotal',
|
|
'drug-text': scope.row.rowType === 'drug',
|
|
'total-text': scope.row.rowType === 'total'
|
|
}">
|
|
{{ formatDrugCostDisplay(scope.row.drugCost, scope.row.rowType) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="净收入" align="center" prop="netIncome" width="120">
|
|
<template #default="scope">
|
|
<span :class="{
|
|
'subtotal-text': scope.row.rowType === 'subtotal',
|
|
'drug-text': scope.row.rowType === 'drug',
|
|
'total-text': scope.row.rowType === 'total'
|
|
}">
|
|
{{ formatDisplayValue(scope.row.netIncome, scope.row.rowType) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="OutpatientDepartmentMetrics">
|
|
import {getOutpatientDepartmentMetrics} from './statisticalManagent';
|
|
import {computed, reactive, ref, toRefs} from 'vue';
|
|
|
|
const loading = ref(true);
|
|
const total = ref(0);
|
|
const data = reactive({
|
|
form: {},
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
searchKey: undefined,
|
|
statisticsType: undefined,
|
|
hospital: undefined,
|
|
department: undefined,
|
|
itemType: undefined
|
|
},
|
|
rules: {},
|
|
});
|
|
const { queryParams } = toRefs(data);
|
|
|
|
// 原始数据
|
|
const originalData = ref([
|
|
{ department: '内科门诊', category: '西药', amount: 115.64, drugCost: 100.56, netIncome: 15.084 },
|
|
{ department: '内科门诊', category: '医用耗材', amount: 6.00, drugCost: 0, netIncome: 6 },
|
|
{ department: '内科门诊', category: '护理', amount: 30.00, drugCost: 0, netIncome: 30 },
|
|
{ department: '妇科', category: '西药', amount: 148.70, drugCost: 112.44, netIncome: 36.255 },
|
|
{ department: '妇科', category: '治疗', amount: 18.00, drugCost: 0, netIncome: 18 },
|
|
]);
|
|
|
|
// 动态生成科室选项
|
|
const departmentOptions = computed(() => {
|
|
const departments = [...new Set(originalData.value.map(item => item.department))];
|
|
return departments.map(dept => ({
|
|
label: dept,
|
|
value: dept
|
|
}));
|
|
});
|
|
|
|
// 所有项目类型选项
|
|
const allItemTypeOptions = computed(() => {
|
|
const categories = [...new Set(originalData.value.map(item => item.category))];
|
|
return categories.map(category => ({
|
|
label: category,
|
|
value: category
|
|
}));
|
|
});
|
|
|
|
// 根据选择的科室过滤项目类型选项
|
|
const filteredItemTypeOptions = computed(() => {
|
|
if (!queryParams.value.department || queryParams.value.department === 'all') {
|
|
return allItemTypeOptions.value;
|
|
}
|
|
|
|
// 获取该科室下的所有项目类型
|
|
const deptCategories = [...new Set(
|
|
originalData.value
|
|
.filter(item => item.department === queryParams.value.department)
|
|
.map(item => item.category)
|
|
)];
|
|
|
|
return allItemTypeOptions.value.filter(item =>
|
|
deptCategories.includes(item.value)
|
|
);
|
|
});
|
|
|
|
// 科室变化时的处理
|
|
const handleDepartmentChange = (value) => {
|
|
// 如果选择了具体科室，重置项目类型为"全部"
|
|
if (value && value !== 'all') {
|
|
queryParams.value.itemType = 'all';
|
|
}
|
|
};
|
|
|
|
// 过滤后的数据（根据查询条件）
|
|
const filteredData = computed(() => {
|
|
let data = [...originalData.value];
|
|
|
|
// 科室筛选
|
|
if (queryParams.value.department && queryParams.value.department !== 'all') {
|
|
data = data.filter(item => item.department === queryParams.value.department);
|
|
}
|
|
|
|
// 项目类型筛选
|
|
if (queryParams.value.itemType && queryParams.value.itemType !== 'all') {
|
|
data = data.filter(item => item.category === queryParams.value.itemType);
|
|
}
|
|
|
|
return data;
|
|
});
|
|
|
|
const formatCurrency = (value) => {
|
|
return value ? value.toFixed(2) : '0.00';
|
|
}
|
|
|
|
const formatDisplayValue = (value, rowType) => {
|
|
if (rowType === 'drug' && typeof value === 'string') {
|
|
return value; // 药品占比行显示百分比字符串
|
|
}
|
|
return formatCurrency(value);
|
|
}
|
|
|
|
const formatDrugCostDisplay = (value, rowType) => {
|
|
if (rowType === 'drug') {
|
|
return '药品占比'; // 药品占比行显示文字"药品占比"
|
|
}
|
|
return formatCurrency(value);
|
|
}
|
|
|
|
// 动态获取所有科室（基于过滤后的数据）
|
|
const departments = computed(() => {
|
|
return [...new Set(filteredData.value.map(item => item.department))];
|
|
})
|
|
|
|
// 构建完整的表格数据（包含小计、药品金额和占比、总计）
|
|
const processedTableData = computed(() => {
|
|
const data = [];
|
|
|
|
// 处理每个科室
|
|
departments.value.forEach(dept => {
|
|
const deptData = filteredData.value.filter(item => item.department === dept);
|
|
|
|
// 添加详细数据
|
|
data.push(...deptData.map(item => ({
|
|
...item,
|
|
rowType: 'detail'
|
|
})));
|
|
|
|
// 计算小计
|
|
const subtotal = deptData.reduce((sum, item) => ({
|
|
amount: sum.amount + item.amount,
|
|
drugCost: sum.drugCost + item.drugCost,
|
|
netIncome: sum.netIncome + item.netIncome
|
|
}), { amount: 0, drugCost: 0, netIncome: 0 });
|
|
|
|
// 添加小计行
|
|
data.push({
|
|
department: dept,
|
|
category: '小计',
|
|
amount: Number(subtotal.amount.toFixed(2)),
|
|
drugCost: Number(subtotal.drugCost.toFixed(2)),
|
|
netIncome: Number(subtotal.netIncome.toFixed(2)),
|
|
rowType: 'subtotal'
|
|
});
|
|
|
|
// 计算药品金额和占比
|
|
const drugAmount = deptData
|
|
.filter(item => item.category.includes('药'))
|
|
.reduce((sum, item) => sum + item.amount, 0);
|
|
|
|
const totalAmount = subtotal.amount;
|
|
const drugRatio = totalAmount > 0 ? ((drugAmount / totalAmount) * 100).toFixed(2) + '%' : '0.00%';
|
|
|
|
// 添加药品金额和占比行
|
|
data.push({
|
|
department: dept,
|
|
category: '药品金额',
|
|
amount: Number(drugAmount.toFixed(2)), // 在金额列显示药品金额
|
|
drugCost: '药品占比', // 在药品成本列显示文字"药品占比"
|
|
netIncome: drugRatio, // 在净收入列显示占比值
|
|
rowType: 'drug'
|
|
});
|
|
});
|
|
|
|
// 计算合计
|
|
const totalData = filteredData.value.reduce((sum, item) => ({
|
|
amount: sum.amount + item.amount,
|
|
drugCost: sum.drugCost + item.drugCost,
|
|
netIncome: sum.netIncome + item.netIncome
|
|
}), { amount: 0, drugCost: 0, netIncome: 0 });
|
|
|
|
|
|
// 计算合计的药品金额和占比
|
|
const totalDrugAmount = filteredData.value.filter(item => item.category.includes('药')).reduce((sum, item) => sum + item.amount, 0);
|
|
const totalDrugRatio = totalData.amount > 0 ?
|
|
((totalDrugAmount / totalData.amount) * 100).toFixed(2) + '%' : '0.00%';
|
|
|
|
// 添加合计行
|
|
data.push({
|
|
department: '合计',
|
|
category: '合计',
|
|
amount: Number(totalData.amount.toFixed(2)),
|
|
drugCost: Number(totalData.drugCost.toFixed(2)),
|
|
netIncome: Number(totalData.netIncome.toFixed(2)),
|
|
rowType: 'total'
|
|
});
|
|
|
|
// 添加总计的药品占比行
|
|
data.push({
|
|
department: '药品金额',
|
|
category: '药品金额',
|
|
amount: Number(totalDrugAmount.toFixed(2)),
|
|
drugCost: '药品占比',
|
|
netIncome: totalDrugRatio,
|
|
rowType: 'drug'
|
|
});
|
|
|
|
return data;
|
|
});
|
|
|
|
// 预计算合并信息
|
|
const spanInfo = computed(() => {
|
|
const info = [];
|
|
let currentDept = null;
|
|
let startIndex = 0;
|
|
let rowCount = 0;
|
|
|
|
for (let i = 0; i < processedTableData.value.length; i++) {
|
|
const row = processedTableData.value[i];
|
|
|
|
if (row.department !== currentDept) {
|
|
if (currentDept !== null) {
|
|
info.push({ startIndex: startIndex, rowCount: rowCount });
|
|
}
|
|
currentDept = row.department;
|
|
startIndex = i;
|
|
rowCount = 1;
|
|
} else {
|
|
rowCount++;
|
|
}
|
|
|
|
// 最后一个元素
|
|
if (i === processedTableData.value.length - 1) {
|
|
info.push({ startIndex: startIndex, rowCount: rowCount });
|
|
}
|
|
}
|
|
|
|
return info;
|
|
});
|
|
|
|
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
// 合并科室列（第一列）
|
|
if (columnIndex === 1) {
|
|
for (const info of spanInfo.value) {
|
|
if (rowIndex >= info.startIndex && rowIndex < info.startIndex + info.rowCount) {
|
|
if (rowIndex === info.startIndex) {
|
|
// 该科室的第一行，合并所有行
|
|
return { rowspan: info.rowCount, colspan: 1 };
|
|
} else {
|
|
// 该科室的其他行隐藏
|
|
return { rowspan: 0, colspan: 0 };
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return { rowspan: 1, colspan: 1 };
|
|
}
|
|
|
|
/** 查询调拨管理项目列表 */
|
|
function getList() {
|
|
loading.value = true;
|
|
getOutpatientDepartmentMetrics(queryParams.value).then((res) => {
|
|
loading.value = false;
|
|
// 这里将接口返回的数据赋值给 originalData
|
|
if (res.data && res.data.records) {
|
|
originalData.value = res.data.records;
|
|
}
|
|
total.value = res.data.total;
|
|
});
|
|
}
|
|
|
|
/** 搜索按钮操作 */
|
|
function handleQuery() {
|
|
queryParams.value.pageNo = 1;
|
|
getList();
|
|
}
|
|
|
|
/** 重置按钮操作 */
|
|
function handleClear() {
|
|
// 重置查询参数
|
|
queryParams.value = {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
searchKey: undefined,
|
|
statisticsType: undefined,
|
|
hospital: undefined,
|
|
department: undefined,
|
|
itemType: undefined
|
|
};
|
|
getList();
|
|
}
|
|
|
|
/** 多选框选中数据 */
|
|
function handleSelectionChange(selection) {
|
|
// 处理选中数据
|
|
console.log('选中数据:', selection);
|
|
}
|
|
|
|
// 初始化加载
|
|
getList();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.subtotal-text {
|
|
font-weight: bold;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.drug-text {
|
|
font-weight: bold;
|
|
color: #67C23A;
|
|
}
|
|
|
|
.total-text {
|
|
font-weight: bold;
|
|
color: #F56C6C;
|
|
}
|
|
|
|
/* 行样式 */
|
|
:deep(.el-table .el-table__row) {
|
|
&[data-row-type="subtotal"] td {
|
|
background-color: #f0f9ff;
|
|
}
|
|
&[data-row-type="drug"] td {
|
|
background-color: #f0f9ff;
|
|
}
|
|
&[data-row-type="total"] td {
|
|
background-color: #f5f7fa;
|
|
}
|
|
}
|
|
|
|
/* 禁用状态样式 */
|
|
:deep(.el-select .el-input.is-disabled .el-input__inner) {
|
|
background-color: #f5f7fa;
|
|
border-color: #e4e7ed;
|
|
color: #c0c4cc;
|
|
cursor: not-allowed;
|
|
}
|
|
</style> |