117 lines
3.7 KiB
Vue
117 lines
3.7 KiB
Vue
<template>
|
|
<div class="outpatient-daily-settlement">
|
|
<el-card class="summary-section" data-cy="settlement-summary">
|
|
<template #header>
|
|
<span class="card-title">门诊日结汇总</span>
|
|
</template>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6" v-for="item in summaryData" :key="item.label">
|
|
<el-card shadow="hover" class="summary-card" data-cy="summary-card">
|
|
<div class="summary-label">{{ item.label }}</div>
|
|
<div class="summary-value">{{ item.value }}</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
<el-card class="detail-section" style="margin-top: 20px;">
|
|
<template #header>
|
|
<div class="table-header">
|
|
<span class="card-title">收费明细</span>
|
|
<el-button type="primary" @click="handleRefresh">刷新</el-button>
|
|
</div>
|
|
</template>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
stripe
|
|
style="width: 100%"
|
|
data-cy="settlement-table"
|
|
>
|
|
<el-table-column prop="date" label="结算日期" width="120" align="center" />
|
|
<el-table-column prop="patientName" label="患者姓名" width="120" align="center" />
|
|
<el-table-column prop="chargeType" label="收费类型" width="120" align="center" />
|
|
<el-table-column prop="amount" label="金额(元)" width="120" align="right" />
|
|
<el-table-column prop="status" label="状态" width="100" align="center" />
|
|
<el-table-column prop="operator" label="操作员" width="120" align="center" />
|
|
<el-table-column label="操作" align="center">
|
|
<template #default="scope">
|
|
<el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<div class="action-section" data-cy="settlement-actions" style="margin-top: 20px; text-align: right;">
|
|
<el-button @click="handleExport">导出报表</el-button>
|
|
<el-button type="primary" @click="handleConfirmSettlement">确认日结</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const summaryData = ref([
|
|
{ label: '今日挂号费', value: '¥ 1,250.00' },
|
|
{ label: '今日诊疗费', value: '¥ 8,430.50' },
|
|
{ label: '今日药品费', value: '¥ 15,600.00' },
|
|
{ label: '今日总收费', value: '¥ 25,280.50' }
|
|
])
|
|
|
|
const tableData = ref([
|
|
{ date: '2026-05-26', patientName: '张三', chargeType: '门诊', amount: 150.00, status: '已结算', operator: '收费员A' },
|
|
{ date: '2026-05-26', patientName: '李四', chargeType: '门诊', amount: 320.50, status: '已结算', operator: '收费员A' },
|
|
{ date: '2026-05-26', patientName: '王五', chargeType: '急诊', amount: 89.00, status: '已结算', operator: '收费员B' }
|
|
])
|
|
|
|
const handleRefresh = () => {
|
|
ElMessage.success('数据已刷新')
|
|
}
|
|
const handleView = (row: any) => {
|
|
ElMessage.info(`查看明细: ${row.patientName}`)
|
|
}
|
|
const handleExport = () => {
|
|
ElMessage.success('报表导出中...')
|
|
}
|
|
const handleConfirmSettlement = () => {
|
|
ElMessage.success('日结确认成功')
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 初始化加载逻辑
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.outpatient-daily-settlement {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
.card-title {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
.summary-card {
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
.summary-label {
|
|
color: #606266;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.summary-value {
|
|
color: #303133;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.table-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|