119 lines
4.0 KiB
Vue
119 lines
4.0 KiB
Vue
<template>
|
||
<div class="outpatient-charge-report">
|
||
<!-- 顶部筛选区 -->
|
||
<el-card class="filter-card" shadow="never">
|
||
<el-form :model="queryParams" inline label-width="80px">
|
||
<el-form-item label="收费日期">
|
||
<el-date-picker
|
||
v-model="queryParams.dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="YYYY-MM-DD"
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="收费员">
|
||
<el-select v-model="queryParams.cashierId" placeholder="请选择" clearable style="width: 160px">
|
||
<el-option label="全部" value="" />
|
||
<el-option v-for="item in cashierOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||
<el-button @click="handleReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<!-- 明细表格区 -->
|
||
<el-card class="table-card" shadow="never" style="margin-top: 16px;">
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
stripe
|
||
style="width: 100%"
|
||
v-loading="loading"
|
||
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
|
||
>
|
||
<!-- Bug #579 修复：统一配置 align 与 width/min-width，确保字段一一对应，防止长文本挤压导致排版错乱 -->
|
||
<el-table-column prop="chargeDate" label="收费日期" width="120" align="center" />
|
||
<el-table-column prop="patientName" label="患者姓名" width="120" align="center" />
|
||
<el-table-column prop="medicalRecordNo" label="病历号" width="140" align="center" />
|
||
<el-table-column prop="chargeItem" label="收费项目" min-width="200" align="left" show-overflow-tooltip />
|
||
<el-table-column prop="amount" label="金额(元)" width="120" align="right" />
|
||
<el-table-column prop="payMethod" label="支付方式" width="120" align="center" />
|
||
<el-table-column prop="cashierName" label="收费员" width="120" align="center" />
|
||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.status === '已收费' ? 'success' : 'info'" size="small">{{ row.status }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
v-model:current-page="queryParams.pageNum"
|
||
v-model:page-size="queryParams.pageSize"
|
||
:total="total"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
style="margin-top: 16px; justify-content: flex-end;"
|
||
/>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
|
||
const loading = ref(false)
|
||
const tableData = ref<any[]>([])
|
||
const total = ref(0)
|
||
const cashierOptions = ref<{ id: string; name: string }[]>([])
|
||
|
||
const queryParams = reactive({
|
||
dateRange: [] as string[],
|
||
cashierId: '',
|
||
pageNum: 1,
|
||
pageSize: 20
|
||
})
|
||
|
||
const handleQuery = () => {
|
||
loading.value = true
|
||
// 模拟后端请求，实际应替换为 API 调用
|
||
setTimeout(() => {
|
||
tableData.value = [
|
||
{ chargeDate: '2026-05-22', patientName: '张三', medicalRecordNo: 'MR20260522001', chargeItem: '门诊诊查费', amount: 15.00, payMethod: '医保', cashierName: '收费员A', status: '已收费' }
|
||
]
|
||
total.value = 1
|
||
loading.value = false
|
||
}, 300)
|
||
}
|
||
|
||
const handleReset = () => {
|
||
queryParams.dateRange = []
|
||
queryParams.cashierId = ''
|
||
queryParams.pageNum = 1
|
||
handleQuery()
|
||
}
|
||
|
||
onMounted(() => {
|
||
handleQuery()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.outpatient-charge-report {
|
||
padding: 16px;
|
||
background-color: #f0f2f5;
|
||
min-height: 100vh;
|
||
}
|
||
.filter-card {
|
||
margin-bottom: 16px;
|
||
}
|
||
.table-card {
|
||
background-color: #fff;
|
||
}
|
||
</style>
|