<template>
|
<div class="app-container">
|
<!-- 搜索筛选区域 -->
|
<el-card class="filter-card">
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
v-show="showSearch"
|
label-width="70px"
|
>
|
<el-form-item label="姓名" prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入姓名"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="证件号码" prop="idcardno">
|
<el-input
|
v-model="queryParams.idcardno"
|
placeholder="请输入证件号码"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="状态" prop="recordstate">
|
<el-select v-model="queryParams.recordstate" placeholder="请选择状态" clearable size="small">
|
<el-option label="全部" value="" />
|
<el-option label="待审核" value="0" />
|
<el-option label="已审核" value="1" />
|
<el-option label="已终止" value="99" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
|
>搜索</el-button
|
>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 统计卡片 -->
|
<el-row :gutter="20" class="stats-row">
|
<el-col :span="6">
|
<el-card class="stats-card total" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">📊</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.totalCount }}</div>
|
<div class="stat-label">总捐献者</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stats-card pending" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">⏳</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.pendingCount }}</div>
|
<div class="stat-label">待审核</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stats-card approved" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">✅</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.approvedCount }}</div>
|
<div class="stat-label">已审核</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="stats-card terminated" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon">❌</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.terminatedCount }}</div>
|
<div class="stat-label">已终止</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-table
|
v-loading="loading"
|
:data="donatebaseinfoList"
|
border
|
:default-sort="{ prop: 'donatetime', order: 'descending' }"
|
style="width: 100%; margin-top: 20px;"
|
>
|
<el-table-column label="上报时间" align="center" prop="donatetime" width="110" fixed="left">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.donatetime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="进度" align="center" prop="coreteamassessconclusion" width="100" fixed="left">
|
<template slot-scope="scope">
|
<el-tag :type="getStatusTag(scope.row.recordstate)">
|
{{ getStatusText(scope.row.recordstate) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="姓名" align="center" prop="name" width="100" />
|
|
<el-table-column label="性别" align="center" prop="sex" width="80">
|
<template slot-scope="scope">
|
<span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="年龄" align="center" prop="age" width="80" />
|
|
<el-table-column label="证件号码" align="center" prop="idcardno" width="180" />
|
|
<el-table-column label="协调员" align="center" prop="reportername" width="100" />
|
|
<el-table-column label="治疗医院" align="center" prop="treatmenthospitalname" width="150" show-overflow-tooltip />
|
|
<el-table-column label="转为案例时间" align="center" prop="donatetime" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.donatetime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<!-- 第一次医学评估 -->
|
<el-table-column label="第一次评估结论" align="center" prop="coreteamassessconclusion" width="120">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_BaseAssessConclusion"
|
:value="scope.row.coreteamassessconclusion"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="第一次评估时间" align="center" prop="coreteamassesstime" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.coreteamassesstime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<!-- 第二次医学评估 -->
|
<el-table-column label="第二次评估结论" align="center" prop="coreteamassessconclusion" width="120">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_BaseAssessConclusion"
|
:value="scope.row.coreteamassessconclusion"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="第二次评估时间" align="center" prop="coreteamassesstime" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.coreteamassesstime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="亲属确认时间" align="center" prop="signdate" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.signdate, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="伦理审查结论" align="center" prop="expertconclusion" width="120">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_EthicalReview"
|
:value="scope.row.expertconclusion"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="伦理审查时间" align="center" prop="conclusiontime" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.conclusiontime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="器官分配数量" align="center" prop="organcount" width="100" />
|
|
<el-table-column label="获取见证时间" align="center" prop="operationbegtime" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.operationbegtime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="完成登记时间" align="center" prop="completetime" width="110">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.completetime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="捐献进度" align="center" prop="workflow" width="120" fixed="right">
|
<template slot-scope="scope">
|
<div v-if="!scope.row.terminationCase">
|
<dict-tag
|
:options="dict.type.sys_donornode"
|
:value="scope.row.workflow"
|
/>
|
</div>
|
<div v-else>
|
<el-tag type="danger">任务终止</el-tag>
|
</div>
|
</template>
|
</el-table-column>
|
|
<!-- <el-table-column label="操作" align="center" width="120" fixed="right">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handleDetail(scope.row)"
|
>详情</el-button>
|
<el-button
|
v-if="scope.row.recordstate == 0"
|
size="mini"
|
type="text"
|
icon="el-icon-check"
|
@click="handleApprove(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-dialog
|
:title="`捐献者详情 - ${currentRecord.name}`"
|
:visible.sync="detailVisible"
|
width="1000px"
|
append-to-body
|
>
|
<donor-detail :donorData="currentRecord" @close="detailVisible = false" />
|
</el-dialog>
|
|
<!-- 审核弹框 -->
|
<el-dialog
|
title="捐献者审核"
|
:visible.sync="approveVisible"
|
width="500px"
|
append-to-body
|
>
|
<el-form ref="approveForm" :model="approveForm" label-width="100px">
|
<el-form-item label="审核结果">
|
<el-radio-group v-model="approveForm.approveResult">
|
<el-radio label="1">通过</el-radio>
|
<el-radio label="2">驳回</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="审核意见">
|
<el-input
|
type="textarea"
|
v-model="approveForm.approveOpinion"
|
placeholder="请输入审核意见"
|
:rows="4"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="approveVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitApprove">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// 导入模拟数据生成工具
|
import Mock from 'mockjs';
|
|
export default {
|
name: "Donatebaseinfo",
|
dicts: ["sys_donornode", "sys_EthicalReview", "sys_BaseAssessConclusion"],
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 捐献基础表格数据
|
donatebaseinfoList: [],
|
// 详情弹框显示
|
detailVisible: false,
|
// 审核弹框显示
|
approveVisible: false,
|
// 当前操作记录
|
currentRecord: {},
|
// 统计数据
|
stats: {
|
totalCount: 0,
|
pendingCount: 0,
|
approvedCount: 0,
|
terminatedCount: 0
|
},
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
idcardno: undefined,
|
recordstate: undefined
|
},
|
// 审核表单
|
approveForm: {
|
approveResult: "1",
|
approveOpinion: ""
|
}
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 生成模拟数据 */
|
generateMockData() {
|
const mockTemplate = {
|
'list|15-30': [{
|
'id|+1': 1001,
|
'name': '@cname',
|
'sex|1': [1, 2], // 1:男, 2:女
|
'age|18-65': 1,
|
'idcardno': /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/,
|
'reportername': '@cname',
|
'treatmenthospitalname': '@ctitle(3, 5)医院',
|
'donatetime': '@datetime("yyyy-MM-dd HH:mm:ss")',
|
'coreteamassessconclusion|1': ['1', '2', '3'], // 评估结论
|
'coreteamassesstime': '@datetime("yyyy-MM-dd HH:mm:ss")',
|
'signdate': '@datetime("yyyy-MM-dd HH:mm:ss")',
|
'expertconclusion|1': ['1', '2', '3'], // 伦理审查结论
|
'conclusiontime': '@datetime("yyyy-MM-dd HH:mm:ss")',
|
'organcount|0-5': 1,
|
'operationbegtime': '@datetime("yyyy-MM-dd HH:mm:ss")',
|
'completetime': '@datetime("yyyy-MM-dd HH:mm:ss")',
|
'workflow|1': ['1', '2', '3', '4', '5'], // 工作流状态
|
'recordstate|1': ['0', '1', '99'], // 0:待审核, 1:已审核, 99:已终止
|
'terminationCase|1': [true, false]
|
}]
|
};
|
|
return Mock.mock(mockTemplate).list;
|
},
|
|
/** 查询捐献基础列表 */
|
getList() {
|
this.loading = true;
|
|
// 模拟API调用延迟
|
setTimeout(() => {
|
// 生成模拟数据
|
const mockData = this.generateMockData();
|
|
// 应用筛选条件
|
let filteredData = mockData;
|
if (this.queryParams.name) {
|
filteredData = filteredData.filter(item =>
|
item.name.includes(this.queryParams.name)
|
);
|
}
|
if (this.queryParams.idcardno) {
|
filteredData = filteredData.filter(item =>
|
item.idcardno.includes(this.queryParams.idcardno)
|
);
|
}
|
if (this.queryParams.recordstate) {
|
filteredData = filteredData.filter(item =>
|
item.recordstate === this.queryParams.recordstate
|
);
|
}
|
|
// 分页处理
|
const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
|
const endIndex = startIndex + this.queryParams.pageSize;
|
this.donatebaseinfoList = filteredData.slice(startIndex, endIndex);
|
this.total = filteredData.length;
|
|
// 更新统计数据
|
this.updateStats(mockData);
|
this.loading = false;
|
}, 500);
|
},
|
|
/** 更新统计数据 */
|
updateStats(data) {
|
this.stats.totalCount = data.length;
|
this.stats.pendingCount = data.filter(item => item.recordstate === '0').length;
|
this.stats.approvedCount = data.filter(item => item.recordstate === '1').length;
|
this.stats.terminatedCount = data.filter(item => item.recordstate === '99').length;
|
},
|
|
/** 获取状态标签样式 */
|
getStatusTag(status) {
|
const statusMap = {
|
'0': 'warning', // 待审核
|
'1': 'success', // 已审核
|
'99': 'danger' // 已终止
|
};
|
return statusMap[status] || 'info';
|
},
|
|
/** 获取状态文本 */
|
getStatusText(status) {
|
const textMap = {
|
'0': '待审核',
|
'1': '已审核',
|
'99': '已终止'
|
};
|
return textMap[status] || '未知状态';
|
},
|
|
/** 时间格式化 */
|
parseTime(time, format) {
|
if (!time) return '-';
|
const date = new Date(time);
|
const year = date.getFullYear();
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
const day = date.getDate().toString().padStart(2, '0');
|
|
if (format === '{y}-{m}-{d}') {
|
return `${year}-${month}-${day}`;
|
}
|
return time;
|
},
|
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
idcardno: undefined,
|
recordstate: undefined
|
};
|
this.getList();
|
},
|
|
/** 查看详情 */
|
handleDetail(row) {
|
this.currentRecord = { ...row };
|
this.detailVisible = true;
|
},
|
|
/** 审核操作 */
|
handleApprove(row) {
|
this.currentRecord = { ...row };
|
this.approveForm = {
|
approveResult: "1",
|
approveOpinion: ""
|
};
|
this.approveVisible = true;
|
},
|
|
/** 提交审核 */
|
submitApprove() {
|
// 模拟审核提交
|
const index = this.donatebaseinfoList.findIndex(item => item.id === this.currentRecord.id);
|
if (index !== -1) {
|
this.donatebaseinfoList[index].recordstate = this.approveForm.approveResult;
|
this.$message.success('审核成功');
|
this.approveVisible = false;
|
this.getList(); // 重新加载更新统计
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.filter-card {
|
margin-bottom: 20px;
|
}
|
|
.stats-row {
|
margin-bottom: 20px;
|
}
|
|
.stats-card {
|
border-radius: 8px;
|
transition: all 0.3s ease;
|
}
|
|
.stats-card:hover {
|
transform: translateY(-2px);
|
}
|
|
.stats-card.total {
|
border-left: 4px solid #409EFF;
|
}
|
|
.stats-card.pending {
|
border-left: 4px solid #E6A23C;
|
}
|
|
.stats-card.approved {
|
border-left: 4px solid #67C23A;
|
}
|
|
.stats-card.terminated {
|
border-left: 4px solid #F56C6C;
|
}
|
|
.stat-content {
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
}
|
|
.stat-icon {
|
font-size: 32px;
|
margin-right: 15px;
|
}
|
|
.stat-info {
|
flex: 1;
|
}
|
|
.stat-count {
|
font-size: 24px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 5px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #909399;
|
}
|
|
/* 表格样式优化 */
|
::v-deep .el-table .cell {
|
padding: 8px 4px;
|
}
|
|
::v-deep .el-table th {
|
background-color: #f5f7fa;
|
font-weight: bold;
|
}
|
</style>
|
