<template>
|
<div class="contract-review-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="reviewStatus">
|
<el-select v-model="queryParams.reviewStatus" placeholder="请选择状态" clearable>
|
<el-option label="待审核" value="0" />
|
<el-option label="审核通过" value="1" />
|
<el-option label="审核驳回" value="2" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="申请时间" prop="applyDate">
|
<el-date-picker
|
v-model="queryParams.applyDate"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
/>
|
</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="8">
|
<el-card shadow="hover">
|
<div class="stat-item">
|
<div class="stat-number">{{ stats.pending }}</div>
|
<div class="stat-label">待审核申请</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card shadow="hover">
|
<div class="stat-item">
|
<div class="stat-number" style="color: #67C23A;">{{ stats.approved }}</div>
|
<div class="stat-label">已通过审核</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card shadow="hover">
|
<div class="stat-item">
|
<div class="stat-number" style="color: #F56C6C;">{{ stats.rejected }}</div>
|
<div class="stat-label">已驳回申请</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 审核列表 -->
|
<el-card shadow="never">
|
<el-table
|
v-loading="loading"
|
:data="reviewList"
|
style="width: 100%"
|
:default-sort="{prop: 'applyTime', order: 'descending'}"
|
>
|
<el-table-column label="儿童信息" min-width="200" 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="申请套餐" 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="applyTime" width="160" sortable />
|
<el-table-column label="期望医生" prop="expectDoctor" width="120" />
|
<el-table-column label="监护人要求" min-width="200">
|
<template slot-scope="scope">
|
<span v-if="scope.row.specialRequirements" :title="scope.row.specialRequirements">
|
{{ scope.row.specialRequirements.substring(0, 30) }}...
|
</span>
|
<span v-else style="color: #999;">无特殊要求</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="审核状态" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="getReviewStatusType(scope.row.reviewStatus)" effect="dark">
|
{{ getReviewStatusText(scope.row.reviewStatus) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="审核信息" min-width="180">
|
<template slot-scope="scope">
|
<div v-if="scope.row.reviewStatus !== 0">
|
<div style="font-size: 12px;">审核人: {{ scope.row.reviewer }}</div>
|
<div style="font-size: 12px;">时间: {{ scope.row.reviewTime }}</div>
|
<div v-if="scope.row.reviewStatus === 2" style="color: #f56c6c; font-size: 12px;">
|
原因: {{ scope.row.rejectReason }}
|
</div>
|
</div>
|
<span v-else style="color: #999;">待审核</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180" fixed="right">
|
<template slot-scope="scope">
|
<el-button
|
v-if="scope.row.reviewStatus === 0"
|
size="mini"
|
type="primary"
|
@click="handleReview(scope.row, 1)"
|
>通过</el-button>
|
<el-button
|
v-if="scope.row.reviewStatus === 0"
|
size="mini"
|
type="danger"
|
@click="handleReview(scope.row, 2)"
|
>驳回</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleView(scope.row)"
|
>详情</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>
|
|
<!-- 审核对话框 -->
|
<el-dialog
|
:title="reviewForm.reviewStatus === 1 ? '审核通过确认' : '审核驳回确认'"
|
:visible.sync="reviewDialogVisible"
|
width="500px"
|
>
|
<el-form :model="reviewForm" ref="reviewFormRef" label-width="100px">
|
<el-form-item
|
v-if="reviewForm.reviewStatus === 2"
|
label="驳回原因"
|
prop="rejectReason"
|
:rules="[{ required: true, message: '请输入驳回原因', trigger: 'blur' }]"
|
>
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="reviewForm.rejectReason"
|
placeholder="请输入驳回的具体原因，便于监护人了解情况"
|
maxlength="200"
|
show-word-limit
|
/>
|
</el-form-item>
|
<el-form-item label="分配医生" prop="assignDoctor">
|
<el-select v-model="reviewForm.assignDoctor" placeholder="请选择负责医生" clearable>
|
<el-option
|
v-for="doctor in availableDoctors"
|
:key="doctor.id"
|
:label="doctor.name"
|
:value="doctor.id"
|
>
|
<span>{{ doctor.name }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">
|
{{ doctor.department }}
|
</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注信息">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="reviewForm.remark"
|
placeholder="可填写额外的备注信息（可选）"
|
maxlength="100"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="reviewDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitReview">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ContractReview',
|
data() {
|
return {
|
loading: false,
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
patientName: undefined,
|
reviewStatus: undefined,
|
applyDate: undefined
|
},
|
total: 0,
|
reviewList: [],
|
reviewDialogVisible: false,
|
reviewForm: {
|
id: undefined,
|
reviewStatus: 1,
|
rejectReason: undefined,
|
assignDoctor: undefined,
|
remark: undefined
|
},
|
currentRow: null,
|
stats: {
|
pending: 0,
|
approved: 0,
|
rejected: 0
|
},
|
availableDoctors: [
|
{ id: '1', name: '王医生', department: '儿科' },
|
{ id: '2', name: '李医生', department: '儿童保健科' },
|
{ id: '3', name: '张医生', department: '儿科' },
|
{ id: '4', name: '刘医生', department: '儿童营养科' },
|
{ id: '5', name: '陈医生', department: '全科' }
|
],
|
// 儿童服务套餐配置
|
servicePackages: {
|
'1': {
|
name: '婴幼儿健康基础包',
|
color: 'primary',
|
applicableAge: '0-3岁'
|
},
|
'2': {
|
name: '学龄前儿童健康包',
|
color: 'success',
|
applicableAge: '3-6岁'
|
},
|
'3': {
|
name: '学龄儿童综合健康包',
|
color: 'warning',
|
applicableAge: '7-12岁'
|
},
|
'4': {
|
name: '青少年健康支持包',
|
color: 'danger',
|
applicableAge: '13-18岁'
|
},
|
'5': {
|
name: '儿童营养与生长发育增值包',
|
color: 'info',
|
applicableAge: '3-18岁'
|
},
|
'6': {
|
name: '儿童中医特色保健包',
|
color: 'primary',
|
applicableAge: '0-6岁'
|
}
|
},
|
rules: {
|
rejectReason: [
|
{ required: true, message: '驳回原因不能为空', trigger: 'blur' }
|
],
|
assignDoctor: [
|
{ required: true, message: '请选择分配医生', trigger: 'change' }
|
]
|
}
|
}
|
},
|
created() {
|
this.getList()
|
this.calculateStats()
|
},
|
methods: {
|
// 生成模拟数据
|
generateMockData() {
|
const mockData = []
|
|
// 使用儿童姓名列表
|
const patientNames = [
|
'李小宝', '张小明', '王雨欣', '刘浩然', '陈思琪', '杨宇航', '黄诗涵', '赵天宇',
|
'周小萌', '吴俊杰', '郑雅雯', '孙沐辰', '朱雨萱', '马浩宇', '胡可馨', '林俊熙',
|
'郭子轩', '何欣怡', '高天佑', '梁静怡', '罗浩然', '宋雨泽', '唐语嫣', '许博文',
|
'谢欣妍', '冯子默', '董雨桐', '萧天乐', '曹心怡', '袁嘉豪'
|
]
|
|
const specialReqs = [
|
'希望医生能定期上门检查',
|
'需要周末时间段的服务',
|
'对药物有过敏史，需特别注意',
|
'行动不便，需要上门服务',
|
'无特殊要求',
|
'需要英语服务支持',
|
'有哮喘病史，需重点关注',
|
'需要定期生长发育监测',
|
'希望有固定的儿科医生',
|
'需要疫苗接种提醒服务'
|
]
|
|
const rejectReasons = [
|
'监护人资料不完整，请补充身份证明',
|
'儿童年龄不符合套餐要求',
|
'选择的医生专长与儿童需求不匹配',
|
'服务套餐与儿童健康状况不匹配',
|
'请补充完整的儿童健康档案',
|
'疫苗接种记录不完整'
|
]
|
|
for (let i = 0; i < patientNames.length; i++) {
|
const packageId = (i % 6) + 1 + ''
|
const packageInfo = this.servicePackages[packageId]
|
const reviewStatus = i % 3 // 0:待审核, 1:通过, 2:驳回
|
const applyDate = this.generateRandomDate('2024-10-01', '2024-12-08')
|
|
// 根据套餐适用年龄生成合理的实际年龄
|
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
|
}
|
|
// 生成监护人电话号码
|
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)}`
|
|
mockData.push({
|
id: `A${2024000 + i}`,
|
patientName: patientNames[i],
|
gender: i % 2 === 0 ? '男' : '女',
|
age: age,
|
phone: phone,
|
servicePackageId: packageId,
|
servicePackage: packageInfo.name,
|
services: this.getServicesByPackage(packageId),
|
contractPeriod: [1, 2][i % 2],
|
applicableAge: packageInfo.applicableAge,
|
applyTime: `${applyDate} ${this.padNumber(8 + (i % 10), 2)}:${this.padNumber(i % 60, 2)}:${this.padNumber(i % 60, 2)}`,
|
expectDoctor: ['王医生', '李医生', '张医生', '刘医生', '陈医生'][i % 5],
|
specialRequirements: specialReqs[i % specialReqs.length],
|
reviewStatus: reviewStatus,
|
reviewer: reviewStatus !== 0 ? ['管理员', '系统管理员', '审核专员'][i % 3] : '',
|
reviewTime: reviewStatus !== 0 ?
|
`${this.addDays(applyDate, 1 + (i % 3))} 14:${this.padNumber(i % 60, 2)}:00` : '',
|
rejectReason: reviewStatus === 2 ? rejectReasons[i % rejectReasons.length] : ''
|
})
|
}
|
|
return mockData
|
},
|
|
// 根据套餐获取服务列表
|
getServicesByPackage(packageId) {
|
const servicesMap = {
|
'1': ['新生儿家庭访视', '定期体格检查与发育评估', '血常规检测', '听力筛查', '喂养与护理指导', '预防接种服务', '中医保健指导'],
|
'2': ['生长发育评估', '视力筛查与口腔保健', '血常规检查', '合理膳食与行为指导', '疾病预防与健康干预', '中医饮食调养指导'],
|
'3': ['年度健康检查', '心理行为发育评估', '科学用眼与口腔保健', '合理膳食指导', '健康生活方式干预', '专家转诊绿色通道'],
|
'4': ['青春期健康教育', '年度健康评估', '心理健康支持', '健康风险行为干预', '个性化健康方案', '优先预约检查服务'],
|
'5': ['微量元素测定', '骨密度检测', '个性化膳食方案', '生长发育专项评估', '运动处方指导', '定期营养监测'],
|
'6': ['中医体质辨识', '三伏贴服务', '小儿推拿', '耳穴治疗', '防感香囊', '食疗指导']
|
}
|
return servicesMap[packageId] || []
|
},
|
|
// 辅助方法：生成随机日期
|
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]
|
},
|
|
// 辅助方法：添加天数
|
addDays(date, days) {
|
const result = new Date(date)
|
result.setDate(result.getDate() + days)
|
return result.toISOString().split('T')[0]
|
},
|
|
// 辅助方法：数字补零
|
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.reviewStatus !== undefined &&
|
item.reviewStatus !== parseInt(this.queryParams.reviewStatus)) {
|
return false
|
}
|
if (this.queryParams.applyDate && this.queryParams.applyDate.length === 2) {
|
const applyDate = item.applyTime.split(' ')[0]
|
if (applyDate < this.queryParams.applyDate[0] ||
|
applyDate > this.queryParams.applyDate[1]) {
|
return false
|
}
|
}
|
return true
|
})
|
|
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
const end = start + this.queryParams.pageSize
|
this.reviewList = 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.pending = allData.filter(item => item.reviewStatus === 0).length
|
this.stats.approved = allData.filter(item => item.reviewStatus === 1).length
|
this.stats.rejected = allData.filter(item => item.reviewStatus === 2).length
|
},
|
|
// 获取审核状态文本
|
getReviewStatusText(status) {
|
const statusMap = { 0: '待审核', 1: '审核通过', 2: '审核驳回' }
|
return statusMap[status] || '未知'
|
},
|
|
// 获取审核状态类型
|
getReviewStatusType(status) {
|
const typeMap = { 0: 'warning', 1: 'success', 2: 'danger' }
|
return typeMap[status] || 'info'
|
},
|
|
// 获取套餐类型
|
getPackageType(packageId) {
|
const typeMap = {
|
'1': 'primary', '2': 'success', '3': 'warning',
|
'4': 'danger', '5': 'info', '6': 'primary'
|
}
|
return typeMap[packageId] || 'info'
|
},
|
|
// 搜索操作
|
handleQuery() {
|
this.queryParams.pageNum = 1
|
this.getList()
|
},
|
|
// 重置搜索
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
patientName: undefined,
|
reviewStatus: undefined,
|
applyDate: undefined
|
}
|
this.handleQuery()
|
},
|
|
// 处理审核操作
|
handleReview(row, status) {
|
this.currentRow = row
|
this.reviewForm = {
|
id: row.id,
|
reviewStatus: status,
|
rejectReason: undefined,
|
assignDoctor: undefined,
|
remark: undefined
|
}
|
this.reviewDialogVisible = true
|
|
this.$nextTick(() => {
|
if (this.$refs.reviewFormRef) {
|
this.$refs.reviewFormRef.clearValidate()
|
}
|
})
|
},
|
|
// 提交审核
|
async submitReview() {
|
try {
|
if (this.reviewForm.reviewStatus === 2) {
|
if (!this.reviewForm.rejectReason) {
|
this.$message.error('请填写驳回原因')
|
return
|
}
|
}
|
|
if (!this.reviewForm.assignDoctor) {
|
this.$message.error('请选择分配医生')
|
return
|
}
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
const currentIndex = this.reviewList.findIndex(item => item.id === this.currentRow.id)
|
if (currentIndex !== -1) {
|
this.reviewList[currentIndex].reviewStatus = this.reviewForm.reviewStatus
|
this.reviewList[currentIndex].reviewer = '当前用户'
|
this.reviewList[currentIndex].reviewTime = new Date().toLocaleString()
|
this.reviewList[currentIndex].rejectReason = this.reviewForm.rejectReason
|
|
if (this.reviewForm.reviewStatus === 1) {
|
const doctor = this.availableDoctors.find(d => d.id === this.reviewForm.assignDoctor)
|
this.reviewList[currentIndex].expectDoctor = doctor ? doctor.name : this.reviewList[currentIndex].expectDoctor
|
}
|
}
|
|
this.$message.success(this.reviewForm.reviewStatus === 1 ? '审核通过成功' : '审核驳回成功')
|
this.reviewDialogVisible = false
|
this.calculateStats()
|
} catch (error) {
|
console.error('审核操作失败:', error)
|
this.$message.error('审核操作失败')
|
}
|
},
|
|
// 查看详情
|
handleView(row) {
|
this.$message.info(`查看儿童 ${row.patientName} 的申请详情`)
|
}
|
},
|
watch: {
|
'reviewForm.reviewStatus': function(newVal) {
|
this.$nextTick(() => {
|
if (this.$refs.reviewFormRef) {
|
this.$refs.reviewFormRef.clearValidate()
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.contract-review-page {
|
padding: 20px;
|
background: #f5f7fa;
|
min-height: calc(100vh - 60px);
|
|
.search-card {
|
margin-bottom: 20px;
|
|
::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
}
|
|
.stats-row {
|
margin-bottom: 20px;
|
|
.stat-item {
|
text-align: center;
|
padding: 20px;
|
|
.stat-number {
|
font-size: 32px;
|
font-weight: bold;
|
margin-bottom: 8px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #666;
|
}
|
}
|
}
|
|
.patient-info {
|
.patient-name {
|
font-weight: 600;
|
margin-bottom: 4px;
|
color: #303133;
|
}
|
|
.patient-detail {
|
font-size: 12px;
|
color: #909399;
|
line-height: 1.4;
|
}
|
}
|
|
// 表格样式优化
|
::v-deep .el-table {
|
.el-table__header-wrapper {
|
th {
|
background-color: #f5f7fa;
|
color: #606266;
|
font-weight: 600;
|
}
|
}
|
|
.el-table__body {
|
tr {
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: translateY(-1px);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
&.pending-row {
|
background: #fdf6ec !important;
|
|
&:hover {
|
background: #faf2e6 !important;
|
}
|
}
|
}
|
}
|
}
|
|
// 响应式设计
|
@media (max-width: 768px) {
|
padding: 10px;
|
|
.stats-row {
|
.el-col {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
