<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 label="上报时间" prop="reportTimeRange">
|
<el-date-picker
|
v-model="queryParams.reportTimeRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
size="small"
|
style="width: 240px;"
|
/>
|
</el-form-item>
|
|
<el-form-item label="首诊医院" prop="treatmenthospitalname">
|
<el-input
|
v-model="queryParams.treatmenthospitalname"
|
placeholder="请输入首诊医院"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
|
<el-form-item label="住院号" prop="hospitalNo">
|
<el-input
|
v-model="queryParams.hospitalNo"
|
placeholder="请输入住院号"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</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>
|
</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: 'reporttime', order: 'descending' }"
|
style="width: 100%; margin-top: 20px;"
|
>
|
<el-table-column
|
label="上报时间"
|
align="center"
|
prop="reporttime"
|
width="110"
|
fixed="left"
|
>
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.reporttime, "{y}-{m}-{d}") }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="捐献状态"
|
align="center"
|
prop="recordstate"
|
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="bloodtype" width="80">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_BloodType"
|
:value="scope.row.bloodtype"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="传染病"
|
align="center"
|
prop="infectious"
|
width="180"
|
/>
|
|
<el-table-column
|
label="首诊医院"
|
align="center"
|
prop="treatmenthospitalname"
|
width="150"
|
/>
|
|
<el-table-column
|
label="协调员"
|
align="center"
|
prop="coordinatorName"
|
width="100"
|
/>
|
|
<el-table-column
|
label="住院号"
|
align="center"
|
prop="hospitalNo"
|
width="120"
|
/>
|
|
<!-- 第一次医学评估 -->
|
<el-table-column
|
label="评估状态"
|
align="center"
|
prop="assessState"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_BaseAssessConclusion"
|
:value="scope.row.assessState"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="评估时间"
|
align="center"
|
prop="assessTime"
|
width="110"
|
>
|
<!-- <template slot-scope="scope">
|
<span>{{ parseTime(scope.row.assessTime, "{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="expertTime"
|
width="110"
|
>
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.expertTime, "{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="recordstate"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<div v-if="scope.row.terminationCase == 0">
|
<dict-tag
|
:options="dict.type.sys_donornode"
|
:value="scope.row.recordstate"
|
/>
|
</div>
|
<div v-else>
|
<el-tag type="danger">任务终止</el-tag>
|
</div>
|
</template>
|
</el-table-column>
|
|
<!-- 操作列：只保留终止和查看详情 -->
|
<el-table-column label="操作" align="center" width="200" fixed="right">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="handleDetail(scope.row)"
|
>查看详情</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
style="color: #f56c6c;"
|
@click="handleTerminate(scope.row)"
|
v-if="
|
scope.row.terminationCase === 0 && scope.row.recordstate !== '99'
|
"
|
>终止</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
style="color: #67c23a;"
|
@click="handleRestore(scope.row)"
|
v-if="scope.row.terminationCase === 1"
|
>恢复</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>
|
|
<!-- 终止/恢复弹框组件 -->
|
<terminate-restore-modal
|
:current-record="currentRecord"
|
:visible="modalVisible"
|
:titles="modalTitles"
|
@update:visible="handleModalVisibleChange"
|
@operation-success="handleOperationSuccess"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import { courselist, terminateDonor } from "@/api/businessApi";
|
import TerminateRestoreModal from "@/components/TerminateRestoreModal";
|
|
export default {
|
name: "Donatebaseinfo",
|
components: {
|
TerminateRestoreModal
|
},
|
dicts: ["sys_donornode",'sys_BloodType', "sys_EthicalReview", "sys_BaseAssessConclusion"],
|
data() {
|
return {
|
loading: false,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 捐献基础表格数据
|
donatebaseinfoList: [],
|
// 详情弹框显示
|
detailVisible: false,
|
// 当前操作记录
|
currentRecord: {},
|
// 统计数据
|
stats: {
|
totalCount: 0,
|
pendingCount: 0,
|
approvedCount: 0,
|
terminatedCount: 0
|
},
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
idcardno: undefined,
|
recordstate: undefined,
|
// 新增的搜索字段
|
reportTimeRange: [],
|
treatmenthospitalname: undefined,
|
hospitalNo: undefined
|
},
|
// 弹框显示状态
|
modalVisible: {
|
terminate: false,
|
restore: false
|
},
|
// 弹框标题
|
modalTitles: {
|
terminate: "终止捐献进程",
|
restore: "恢复捐献进程"
|
}
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询捐献基础列表 */
|
/** 查询捐献基础列表 */
|
async getList() {
|
this.loading = true;
|
try {
|
const response = await courselist(this.queryParams);
|
|
let realData = [];
|
realData = response.data.donatebaseinfoProgressDTOS;
|
this.total = response.total;
|
this.stats.pendingCount = response.data.terminationCase[0];
|
this.stats.approvedCount = response.data.terminationCase[1];
|
this.stats.terminatedCount = response.data.terminationCase[2];
|
this.stats.totalCount =
|
response.total - response.data.terminationCase[2];
|
|
this.allTableData = realData;
|
let filteredData = this.applyFrontendFilter(realData);
|
|
if (!response.total && !response.data) {
|
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;
|
} else {
|
this.donatebaseinfoList = filteredData;
|
}
|
} catch (error) {
|
console.error("获取数据失败:", error);
|
this.$message.error("数据加载失败");
|
this.donatebaseinfoList = [];
|
this.total = 0;
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
/** 应用前端筛选 */
|
applyFrontendFilter(data) {
|
let filteredData = data;
|
|
if (this.queryParams.name) {
|
filteredData = filteredData.filter(
|
item => item.name && item.name.includes(this.queryParams.name)
|
);
|
}
|
|
if (this.queryParams.idcardno) {
|
filteredData = filteredData.filter(
|
item =>
|
item.idcardno && item.idcardno.includes(this.queryParams.idcardno)
|
);
|
}
|
|
if (this.queryParams.recordstate) {
|
filteredData = filteredData.filter(
|
item => item.recordstate === this.queryParams.recordstate
|
);
|
}
|
|
if (this.queryParams.treatmenthospitalname) {
|
filteredData = filteredData.filter(
|
item =>
|
item.treatmenthospitalname &&
|
item.treatmenthospitalname.includes(
|
this.queryParams.treatmenthospitalname
|
)
|
);
|
}
|
|
if (this.queryParams.hospitalNo) {
|
filteredData = filteredData.filter(
|
item =>
|
item.hospitalNo &&
|
item.hospitalNo.includes(this.queryParams.hospitalNo)
|
);
|
}
|
|
if (
|
this.queryParams.reportTimeRange &&
|
this.queryParams.reportTimeRange.length === 2
|
) {
|
const [startTime, endTime] = this.queryParams.reportTimeRange;
|
filteredData = filteredData.filter(item => {
|
if (!item.reporttime) return false;
|
const reportDate = this.parseTime(item.reporttime, "{y}-{m}-{d}");
|
return reportDate >= startTime && reportDate <= endTime;
|
});
|
}
|
|
return filteredData;
|
},
|
|
/** 获取状态标签样式 */
|
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);
|
if (isNaN(date.getTime())) return 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.$refs.queryForm.resetFields();
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
|
/** 查看详情 */
|
handleDetail(row) {
|
this.currentRecord = { ...row };
|
this.detailVisible = true;
|
},
|
|
/** 终止操作 */
|
handleTerminate(row) {
|
this.currentRecord = { ...row };
|
this.modalVisible = { ...this.modalVisible, terminate: true };
|
},
|
|
/** 恢复操作 */
|
handleRestore(row) {
|
this.currentRecord = { ...row };
|
this.modalVisible = { ...this.modalVisible, restore: true };
|
},
|
|
/** 处理弹框显示状态变化 */
|
handleModalVisibleChange(newVisible) {
|
this.modalVisible = { ...newVisible };
|
},
|
|
/** 处理操作成功 */
|
handleOperationSuccess({ type, record }) {
|
console.log(`${type}操作成功:`, record);
|
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;
|
}
|
|
/* 操作按钮样式 */
|
::v-deep .el-button--text {
|
padding: 4px 8px;
|
}
|
</style>
|
