<template>
|
<div class="signed-patient-page">
|
<!-- 搜索筛选区域 -->
|
<el-card class="search-card" shadow="never">
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="患者姓名" prop="patientName">
|
<el-input
|
v-model="queryParams.patientName"
|
placeholder="请输入患者姓名"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="签约状态" prop="contractStatus">
|
<el-select v-model="queryParams.contractStatus" placeholder="请选择状态" clearable>
|
<el-option label="正常服务中" value="1" />
|
<el-option label="即将到期" value="2" />
|
<el-option label="已到期" value="3" />
|
<el-option label="已终止" value="4" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="服务套餐" prop="servicePackage">
|
<el-select v-model="queryParams.servicePackage" placeholder="请选择套餐" clearable>
|
<el-option
|
v-for="pkg in packageOptions"
|
:key="pkg.id"
|
:label="pkg.name"
|
:value="pkg.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
|
<!-- 统计信息卡片 -->
|
<el-row :gutter="20" class="stats-row">
|
<el-col :span="6">
|
<el-card class="stats-card" shadow="hover">
|
<div class="stats-content">
|
<div class="stats-number">{{ stats.total }}</div>
|
<div class="stats-label">总签约儿童</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stats-card" shadow="hover">
|
<div class="stats-content">
|
<div class="stats-number" style="color: #67C23A;">{{ stats.active }}</div>
|
<div class="stats-label">正常服务中</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stats-card" shadow="hover">
|
<div class="stats-content">
|
<div class="stats-number" style="color: #E6A23C;">{{ stats.expiring }}</div>
|
<div class="stats-label">即将到期</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stats-card" shadow="hover">
|
<div class="stats-content">
|
<div class="stats-number" style="color: #F56C6C;">{{ stats.expired }}</div>
|
<div class="stats-label">已到期/终止</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-card shadow="never">
|
<el-table
|
v-loading="loading"
|
:data="patientList"
|
@selection-change="handleSelectionChange"
|
style="width: 100%"
|
:default-sort="{prop: 'signDate', order: 'descending'}"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column label="儿童信息" min-width="180" fixed>
|
<template slot-scope="scope">
|
<div class="patient-info">
|
<div class="patient-name">{{ scope.row.patientName }}</div>
|
<div class="patient-detail">
|
{{ scope.row.gender }} | {{ scope.row.age }}岁 | {{ scope.row.phone }}
|
<div style="color: #909399; font-size: 12px; margin-top: 2px;">
|
{{ scope.row.applicableAge }}
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="身份证号" prop="idCard" width="180" />
|
<el-table-column label="签约医生" prop="doctorName" width="120" />
|
<el-table-column label="服务套餐" min-width="150">
|
<template slot-scope="scope">
|
<el-tag :type="getPackageType(scope.row.servicePackageId)">
|
{{ scope.row.servicePackage }}
|
</el-tag>
|
<div style="font-size: 12px; color: #666; margin-top: 4px;">
|
周期: {{ scope.row.contractPeriod }}年
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="包含服务" min-width="200">
|
<template slot-scope="scope">
|
<el-tooltip effect="dark" :content="scope.row.services.join('、')" placement="top">
|
<span>{{ scope.row.services.slice(0, 2).join('、') }}等{{ scope.row.services.length }}项</span>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="签约时间" prop="signDate" width="120" sortable />
|
<el-table-column label="到期时间" prop="expireDate" width="120" />
|
<el-table-column label="剩余天数" width="100">
|
<template slot-scope="scope">
|
<span :class="getRemainingDaysClass(scope.row.remainingDays)">
|
{{ scope.row.remainingDays }}天
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="签约状态" width="100" fixed="right">
|
<template slot-scope="scope">
|
<el-tag :type="getStatusType(scope.row.contractStatus)" effect="dark">
|
{{ getStatusText(scope.row.contractStatus) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" fixed="right">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="handleView(scope.row)">详情</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleRenew(scope.row)"
|
:disabled="scope.row.contractStatus === 1"
|
>续约</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleTerminate(scope.row)"
|
:disabled="scope.row.contractStatus === 4"
|
style="color: #F56C6C;"
|
>终止</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'SignedPatientList',
|
data() {
|
return {
|
loading: false,
|
ids: [],
|
stats: {
|
total: 0,
|
active: 0,
|
expiring: 0,
|
expired: 0
|
},
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
patientName: undefined,
|
contractStatus: undefined,
|
servicePackage: undefined
|
},
|
total: 0,
|
patientList: [],
|
// 儿童服务套餐配置 [1,3,5](@ref)
|
servicePackages: {
|
'1': {
|
name: '婴幼儿健康基础包',
|
description: '为0-3岁婴幼儿提供全面的健康监测与发育指导',
|
services: ['新生儿家庭访视', '定期体格检查与发育评估', '血常规检测', '听力筛查', '喂养与护理指导', '预防接种服务', '中医保健指导'],
|
price: 0,
|
color: 'primary',
|
applicableAge: '0-3岁'
|
},
|
'2': {
|
name: '学龄前儿童健康包',
|
description: '关注3-6岁儿童生长发育、常见病预防及习惯养成',
|
services: ['生长发育评估', '视力筛查与口腔保健', '血常规检查', '合理膳食与行为指导', '疾病预防与健康干预', '中医饮食调养指导'],
|
price: 0,
|
color: 'success',
|
applicableAge: '3-6岁'
|
},
|
'3': {
|
name: '学龄儿童综合健康包',
|
description: '为7-12岁儿童提供学习期健康保障与发展支持',
|
services: ['年度健康检查', '心理行为发育评估', '科学用眼与口腔保健', '合理膳食指导', '健康生活方式干预', '专家转诊绿色通道'],
|
price: 0,
|
color: 'warning',
|
applicableAge: '7-12岁'
|
},
|
'4': {
|
name: '青少年健康支持包',
|
description: '针对13-18岁青少年青春期特点的健康管理',
|
services: ['青春期健康教育', '年度健康评估', '心理健康支持', '健康风险行为干预', '个性化健康方案', '优先预约检查服务'],
|
price: 0,
|
color: 'danger',
|
applicableAge: '13-18岁'
|
},
|
'5': {
|
name: '儿童营养与生长发育增值包',
|
description: '针对肥胖、营养不良等问题的专项管理',
|
services: ['微量元素测定', '骨密度检测', '个性化膳食方案', '生长发育专项评估', '运动处方指导', '定期营养监测'],
|
price: 150,
|
color: 'info',
|
applicableAge: '3-18岁'
|
},
|
'6': {
|
name: '儿童中医特色保健包',
|
description: '运用中医药方法增强儿童体质',
|
services: ['中医体质辨识', '三伏贴服务', '小儿推拿', '耳穴治疗', '防感香囊', '食疗指导'],
|
price: 200,
|
color: 'primary',
|
applicableAge: '0-6岁'
|
}
|
},
|
packageOptions: []
|
}
|
},
|
created() {
|
this.initPackageOptions()
|
this.getList()
|
this.calculateStats()
|
},
|
methods: {
|
// 初始化套餐选项
|
initPackageOptions() {
|
this.packageOptions = Object.keys(this.servicePackages).map(key => ({
|
id: key,
|
name: this.servicePackages[key].name
|
}))
|
},
|
|
// 生成模拟数据
|
generateMockData() {
|
const mockData = []
|
|
// 使用儿童姓名列表
|
const patientNames = [
|
'李小宝', '张小明', '王雨欣', '刘浩然', '陈思琪', '杨宇航', '黄诗涵', '赵天宇',
|
'周小萌', '吴俊杰', '郑雅雯', '孙沐辰', '朱雨萱', '马浩宇', '胡可馨', '林俊熙',
|
'郭子轩', '何欣怡', '高天佑', '梁静怡', '罗浩然', '宋雨泽', '唐语嫣', '许博文',
|
'谢欣妍', '冯子默', '董雨桐', '萧天乐', '曹心怡', '袁嘉豪'
|
]
|
|
const doctors = ['王医生', '李医生', '张医生', '刘医生', '陈医生']
|
const cities = ['北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', '成都市']
|
const areas = ['朝阳区', '海淀区', '浦东新区', '黄浦区', '天河区', '福田区', '西湖区']
|
|
for (let i = 0; i < patientNames.length; i++) {
|
const packageId = (i % 6) + 1 + ''
|
const packageInfo = this.servicePackages[packageId]
|
|
// 根据套餐适用年龄生成合理的实际年龄
|
let age
|
switch(packageInfo.applicableAge) {
|
case '0-3岁':
|
age = Math.floor(Math.random() * 3) + 1
|
break
|
case '3-6岁':
|
age = Math.floor(Math.random() * 3) + 3
|
break
|
case '7-12岁':
|
age = Math.floor(Math.random() * 6) + 7
|
break
|
case '13-18岁':
|
age = Math.floor(Math.random() * 6) + 13
|
break
|
default:
|
age = Math.floor(Math.random() * 18) + 1
|
}
|
|
// 生成签约时间（过去1年内）
|
const signDate = this.generateRandomDate('2023-12-01', '2024-11-30')
|
const contractPeriod = [1, 2][i % 2] // 1年或2年合同
|
const expireDate = this.addYears(signDate, contractPeriod)
|
const remainingDays = this.calculateRemainingDays(expireDate)
|
const contractStatus = this.getContractStatus(expireDate, remainingDays)
|
|
// 生成电话号码（使用家长电话）
|
const phonePrefix = ['138', '139', '150', '151', '152', '186', '187', '188']
|
const phone = `${phonePrefix[i % phonePrefix.length]}${this.padNumber(1000 + i * 37, 4)}${this.padNumber(i % 100, 2)}`
|
|
// 生成儿童身份证号
|
const birthYear = new Date().getFullYear() - age
|
const idCard = `11010${birthYear}${this.padNumber(1 + (i % 12), 2)}${this.padNumber(1 + (i % 28), 2)}${this.padNumber(i % 1000, 3)}X`
|
|
mockData.push({
|
id: `C${2024000 + i}`,
|
patientName: patientNames[i],
|
gender: i % 2 === 0 ? '男' : '女',
|
age: age,
|
phone: phone,
|
idCard: idCard,
|
doctorName: doctors[i % doctors.length],
|
servicePackageId: packageId,
|
servicePackage: packageInfo.name,
|
services: packageInfo.services,
|
contractPeriod: contractPeriod,
|
signDate: signDate,
|
expireDate: expireDate,
|
remainingDays: remainingDays,
|
contractStatus: contractStatus,
|
applicableAge: packageInfo.applicableAge,
|
address: `${cities[i % cities.length]}${areas[i % areas.length]}${this.generateStreet(i)}`
|
})
|
}
|
|
return mockData
|
},
|
|
// 辅助方法保持不变
|
generateStreet(index) {
|
const streets = [
|
'中山路123号', '人民路456号', '解放路789号', '建设路101号', '和平路202号',
|
'新华路303号', '光明路404号', '幸福路505号', '团结路606号', '文明路707号'
|
]
|
return streets[index % streets.length]
|
},
|
|
generateRandomDate(start, end) {
|
const startDate = new Date(start).getTime()
|
const endDate = new Date(end).getTime()
|
const randomTime = startDate + Math.random() * (endDate - startDate)
|
return new Date(randomTime).toISOString().split('T')[0]
|
},
|
|
addYears(date, years) {
|
const result = new Date(date)
|
result.setFullYear(result.getFullYear() + years)
|
return result.toISOString().split('T')[0]
|
},
|
|
calculateRemainingDays(expireDate) {
|
const today = new Date()
|
const expire = new Date(expireDate)
|
const diffTime = expire - today
|
return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
},
|
|
getContractStatus(expireDate, remainingDays) {
|
if (remainingDays < 0) return 3 // 已到期
|
if (remainingDays <= 30) return 2 // 即将到期
|
return 1 // 正常服务中
|
},
|
|
padNumber(num, length) {
|
return num.toString().padStart(length, '0')
|
},
|
|
// 获取患者列表
|
async getList() {
|
this.loading = true
|
try {
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
const allData = this.generateMockData()
|
// 筛选逻辑
|
let filteredData = allData.filter(item => {
|
if (this.queryParams.patientName &&
|
!item.patientName.includes(this.queryParams.patientName)) {
|
return false
|
}
|
if (this.queryParams.contractStatus &&
|
item.contractStatus !== parseInt(this.queryParams.contractStatus)) {
|
return false
|
}
|
if (this.queryParams.servicePackage &&
|
item.servicePackageId !== this.queryParams.servicePackage) {
|
return false
|
}
|
return true
|
})
|
|
// 分页处理
|
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
const end = start + this.queryParams.pageSize
|
this.patientList = filteredData.slice(start, end)
|
this.total = filteredData.length
|
|
this.calculateStats()
|
} catch (error) {
|
console.error('获取数据失败:', error)
|
this.$message.error('数据加载失败')
|
} finally {
|
this.loading = false
|
}
|
},
|
|
// 计算统计信息
|
calculateStats() {
|
const allData = this.generateMockData()
|
this.stats.total = allData.length
|
this.stats.active = allData.filter(item => item.contractStatus === 1).length
|
this.stats.expiring = allData.filter(item => item.contractStatus === 2).length
|
this.stats.expired = allData.filter(item => item.contractStatus === 3).length
|
},
|
|
// 状态相关方法
|
getStatusText(status) {
|
const statusMap = { 1: '正常服务中', 2: '即将到期', 3: '已到期', 4: '已终止' }
|
return statusMap[status] || '未知'
|
},
|
|
getStatusType(status) {
|
const typeMap = { 1: 'success', 2: 'warning', 3: 'danger', 4: 'info' }
|
return typeMap[status] || 'info'
|
},
|
|
getPackageType(packageId) {
|
const typeMap = {
|
'1': 'primary', '2': 'success', '3': 'warning',
|
'4': 'danger', '5': 'info', '6': 'primary'
|
}
|
return typeMap[packageId] || 'info'
|
},
|
|
getRemainingDaysClass(days) {
|
if (days < 0) return 'expired'
|
if (days <= 30) return 'expiring'
|
return 'normal'
|
},
|
|
// 操作方法
|
handleQuery() {
|
this.queryParams.pageNum = 1
|
this.getList()
|
},
|
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
patientName: undefined,
|
contractStatus: undefined,
|
servicePackage: undefined
|
}
|
this.handleQuery()
|
},
|
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.id)
|
},
|
|
handleView(row) {
|
this.$message.info(`查看儿童 ${row.patientName} 的详情`)
|
// 实际开发中跳转到详情页
|
},
|
|
handleRenew(row) {
|
this.$confirm(`确定要为儿童 ${row.patientName} 办理续约吗？`, '提示', {
|
type: 'warning'
|
}).then(() => {
|
this.$message.success('续约操作成功')
|
})
|
},
|
|
handleTerminate(row) {
|
this.$confirm(`确定要终止与 ${row.patientName} 的签约关系吗？此操作不可撤销。`, '警告', {
|
type: 'error',
|
confirmButtonText: '确定终止',
|
cancelButtonText: '取消'
|
}).then(() => {
|
this.$message.success('签约关系已终止')
|
this.getList()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.signed-patient-page {
|
padding: 20px;
|
|
.search-card {
|
margin-bottom: 20px;
|
|
::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
}
|
|
.stats-row {
|
margin-bottom: 20px;
|
|
.stats-card {
|
.stats-content {
|
text-align: center;
|
padding: 10px;
|
|
.stats-number {
|
font-size: 28px;
|
font-weight: bold;
|
color: #409EFF;
|
margin-bottom: 8px;
|
}
|
|
.stats-label {
|
font-size: 14px;
|
color: #666;
|
}
|
}
|
}
|
}
|
|
.patient-info {
|
.patient-name {
|
font-weight: 600;
|
margin-bottom: 4px;
|
color: #2c3e50;
|
}
|
|
.patient-detail {
|
font-size: 12px;
|
color: #666;
|
line-height: 1.4;
|
}
|
}
|
|
.expired {
|
color: #F56C6C;
|
font-weight: bold;
|
}
|
|
.expiring {
|
color: #E6A23C;
|
font-weight: bold;
|
}
|
|
.normal {
|
color: #67C23A;
|
}
|
}
|
|
// 响应式设计
|
@media (max-width: 768px) {
|
.signed-patient-page {
|
padding: 10px;
|
|
.search-card {
|
::v-deep .el-col {
|
margin-bottom: 10px;
|
}
|
}
|
|
.stats-row {
|
.el-col {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
