<template>
|
<div class="app-container">
|
<!-- 搜索筛选区域 -->
|
<el-card class="filter-card">
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
class="demo-form-inline"
|
>
|
<el-form-item label="案例编号" prop="caseNo">
|
<el-input
|
v-model="queryParams.caseNo"
|
placeholder="请输入案例编号"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="捐献者姓名" prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入捐献者姓名"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="案例状态" prop="reportStatus">
|
<el-select
|
v-model="queryParams.reportStatus"
|
placeholder="请选择状态"
|
clearable
|
style="width: 200px"
|
>
|
<el-option label="全部" value="" />
|
<el-option label="已阅读" value="2" />
|
<el-option label="已同意" value="3" />
|
<el-option label="已驳回" value="4" />
|
</el-select>
|
</el-form-item>
|
<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-form>
|
</el-card>
|
|
<!-- 操作按钮区域 -->
|
<el-row :gutter="10" class="mb8">
|
<!-- <el-col :span="1.5">
|
<el-button type="primary" plain icon="el-icon-plus" @click="handleAdd"
|
>新增案例</el-button
|
>
|
</el-col> -->
|
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="el-icon-delete"
|
:disabled="multiple"
|
@click="handleDelete"
|
>删除</el-button
|
>
|
</el-col>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-table
|
v-loading="loading"
|
:data="caseList"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column
|
label="上报时间"
|
align="center"
|
prop="reporttime"
|
width="160"
|
/>
|
|
<el-table-column
|
label="捐献者姓名"
|
align="center"
|
prop="name"
|
width="100"
|
/>
|
<el-table-column label="性别" align="center" prop="sex" width="80">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_user_sex"
|
:value="parseInt(scope.row.sex)"
|
/>
|
</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="GCS评分"
|
align="center"
|
prop="gscScore"
|
width="80"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="疾病诊断"
|
align="center"
|
prop="diagnosisname"
|
min-width="200"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="治疗医院"
|
align="center"
|
prop="treatmenthospitalname"
|
width="150"
|
/>
|
<el-table-column
|
label="状态"
|
align="center"
|
prop="reportStatus"
|
width="100"
|
>
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.reportStatus | statusFilter">
|
{{ scope.row.reportStatus | statusTextFilter }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
class-name="small-padding fixed-width"
|
width="200"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handleDetail(scope.row)"
|
>详情</el-button
|
>
|
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-check"
|
@click="handleApprove(scope.row)"
|
v-if="scope.row.reportStatus === '2'"
|
>审批</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="detailTitle"
|
:visible.sync="detailOpen"
|
width="900px"
|
append-to-body
|
:close-on-click-modal="false"
|
>
|
<case-detail :caseData="currentCase" @close="detailOpen = false" />
|
</el-dialog>
|
|
<!-- 审批弹框 -->
|
<el-dialog
|
title="案例审批"
|
:visible.sync="approveOpen"
|
width="80vw"
|
append-to-body
|
class="approve-dialog"
|
>
|
<el-container style="height: 800px;">
|
<!-- 左侧：案例详情 -->
|
<el-aside
|
width="50vw"
|
style="background: #f8f9fa; padding: 20px; overflow-y: auto;"
|
>
|
<div class="approve-detail-preview">
|
<h3 style="margin-bottom: 15px; color: #303133;">案例详情预览</h3>
|
<case-detail :caseData="currentCase" :showtitle="false" />
|
</div>
|
</el-aside>
|
|
<!-- 右侧：审批表单 -->
|
<el-main style="padding: 20px;">
|
<el-form
|
ref="approveForm"
|
:model="approveForm"
|
:rules="approveRules"
|
label-width="100px"
|
>
|
<el-form-item label="审批结果" prop="approveResult">
|
<el-radio-group v-model="approveForm.approveResult">
|
<el-radio label="3">同意</el-radio>
|
<el-radio label="4">驳回</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="审批意见" prop="approveOpinion">
|
<el-input
|
type="textarea"
|
v-model="approveForm.approveOpinion"
|
placeholder="请输入详细的审批意见，包括通过或驳回的理由"
|
:rows="6"
|
maxlength="500"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-form>
|
</el-main>
|
</el-container>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="approveOpen = false">取消</el-button>
|
<el-button type="primary" @click="submitApprove">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import CaseDetail from "./caseDetail";
|
import {
|
donateList,
|
donateInfo,
|
donateDel,
|
donateEdit
|
} from "@/api/businessApi/index";
|
|
export default {
|
name: "CaseList",
|
components: { CaseDetail },
|
dicts: ["sys_user_sex", "sys_BloodType"],
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 总条数
|
total: 0,
|
// 案例表格数据
|
caseList: [],
|
// 详情弹框是否显示
|
detailOpen: false,
|
// 审批弹框是否显示
|
approveOpen: false,
|
// 详情弹框标题
|
detailTitle: "",
|
// 当前操作的案例
|
currentCase: {},
|
// 性别选项
|
genderOptions: [
|
{ value: "0", label: "男" },
|
{ value: "1", label: "女" }
|
],
|
// 血型选项
|
bloodTypeOptions: [
|
{ value: "A", label: "A型" },
|
{ value: "B", label: "B型" },
|
{ value: "O", label: "O型" },
|
{ value: "AB", label: "AB型" }
|
],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
caseNo: undefined,
|
name: undefined,
|
reportStatus: undefined
|
},
|
// 审批表单
|
approveForm: {
|
id: null,
|
approveResult: "3",
|
approveOpinion: ""
|
},
|
// 审批表单验证
|
approveRules: {
|
approveResult: [
|
{ required: true, message: "请选择审批结果", trigger: "change" }
|
],
|
approveOpinion: [
|
{ required: true, message: "请输入审批意见", trigger: "blur" }
|
]
|
}
|
};
|
},
|
filters: {
|
statusFilter(reportStatus) {
|
const statusMap = {
|
"1": "info", // 已上报
|
"2": "warning", // 已阅读（待审批）
|
"3": "success", // 已同意
|
"4": "danger" // 已驳回
|
};
|
return statusMap[reportStatus] || "info";
|
},
|
statusTextFilter(reportStatus) {
|
const statusMap = {
|
"1": "已上报",
|
"2": "已阅读",
|
"3": "已同意",
|
"4": "已驳回"
|
};
|
return statusMap[reportStatus] || "未知状态";
|
}
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询案例列表 */
|
async getList() {
|
this.loading = true;
|
try {
|
const response = await donateList(this.queryParams);
|
this.caseList = response.rows || response.data || [];
|
this.total = response.total || this.caseList.length;
|
} catch (error) {
|
console.error("获取案例列表失败:", error);
|
this.$modal.msgError("获取案例列表失败");
|
// 模拟数据
|
this.caseList = this.getMockData();
|
this.total = this.caseList.length;
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
/** 模拟数据 */
|
getMockData() {
|
return [
|
{
|
id: 1,
|
caseNo: "DON20241219001",
|
name: "张三",
|
sex: "0",
|
age: 38,
|
bloodType: "A",
|
gscScore: "1",
|
diagnosisname:
|
"脑外伤导致脑死亡，经抢救无效宣布脑死亡。家属同意器官捐献。",
|
treatmenthospitalname: "青岛大学附属医院",
|
reportStatus: "2",
|
reporttime: "2024-12-19 09:30:00",
|
reportername: "李医生",
|
idcardno: "370203198510123456",
|
nation: "汉族",
|
phone: "13800138000",
|
registeraddress: "山东省青岛市市南区香港中路100号",
|
inpatientno: "ZY20241219001",
|
treatmentdeptname: "神经外科",
|
doctorname: "王主任",
|
infectious: "无",
|
illnessoverview:
|
"患者因交通事故导致严重脑外伤，经抢救无效宣布脑死亡。",
|
hospitalLevel: "三级甲等",
|
contactperson: "张护士",
|
contactphone: "13900139000",
|
hospitalAddress: "山东省青岛市市南区江苏路1号"
|
},
|
{
|
id: 2,
|
caseNo: "DON20241218001",
|
name: "李四",
|
sex: "0",
|
age: 45,
|
bloodType: "O",
|
gscScore: "3",
|
diagnosisname: "急性心肌梗死，心脏功能衰竭",
|
treatmenthospitalname: "青岛市立医院",
|
reportStatus: "3",
|
reporttime: "2024-12-18 14:20:00",
|
approvetime: "2024-12-18 16:30:00",
|
reportername: "刘医生",
|
approvername: "审核专员A",
|
approveopinion: "资料齐全，符合捐献条件，同意通过。"
|
}
|
];
|
},
|
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
|
/** 详情按钮操作 */
|
async handleDetail(row) {
|
try {
|
// 先获取案例详情
|
const response = await donateInfo(row.id);
|
this.currentCase = response.data || response || row;
|
|
// 如果状态是"已上报"(1)，则使用完整数据更新为"已阅读"(2)
|
if (this.currentCase.reportStatus === "1") {
|
try {
|
// 使用完整的案例数据作为更新基础，确保所有字段都被保留
|
const updateData = {
|
...this.currentCase, // 展开所有现有字段
|
reportStatus: "2", // 更新状态为已阅读
|
updateTime: new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19),
|
updateBy: "当前用户" // 添加更新人信息
|
};
|
|
await donateEdit(updateData);
|
|
// 更新本地数据和当前显示的数据
|
this.currentCase.reportStatus = "2";
|
this.currentCase.updateTime = updateData.updateTime;
|
row.reportStatus = "2"; // 更新列表中的状态
|
|
this.$modal.msgSuccess("状态已更新为已阅读");
|
} catch (updateError) {
|
console.error("状态更新失败:", updateError);
|
this.$modal.msgError("状态更新失败，但将继续显示详情");
|
// 更新失败时，继续使用原始状态显示详情
|
}
|
}
|
|
this.detailTitle = `案例详情 - ${this.currentCase.caseNo ||
|
row.caseNo}`;
|
this.detailOpen = true;
|
} catch (error) {
|
console.error("获取案例详情失败:", error);
|
// 如果获取详情失败，使用行数据作为后备
|
this.currentCase = row;
|
this.detailTitle = `案例详情 - ${row.caseNo}`;
|
this.detailOpen = true;
|
|
// 即使获取详情失败，也尝试更新状态（使用行数据）
|
if (row.reportStatus === "1") {
|
try {
|
const updateData = {
|
id: row.id,
|
reportStatus: "2",
|
updateTime: new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19),
|
updateBy: "当前用户"
|
// 注意：这里只能传递部分字段，因为详情获取失败了
|
};
|
|
await donateEdit(updateData);
|
row.reportStatus = "2";
|
this.currentCase.reportStatus = "2";
|
this.$modal.msgSuccess("状态已更新为已阅读");
|
} catch (updateError) {
|
console.error("状态更新失败:", updateError);
|
}
|
}
|
}
|
},
|
|
/** 审批按钮操作 */
|
async handleApprove(row) {
|
try {
|
// 先获取案例详情数据，确保有完整数据
|
const response = await donateInfo(row.id);
|
this.currentCase = response.data || response || row;
|
|
this.approveForm.id = row.id;
|
this.approveForm.approveResult = "3";
|
this.approveForm.approveOpinion = "";
|
|
this.$nextTick(() => {
|
if (this.$refs.approveForm) {
|
this.$refs.approveForm.clearValidate();
|
}
|
});
|
|
this.approveOpen = true;
|
} catch (error) {
|
console.error("获取案例详情失败:", error);
|
// 如果获取详情失败，使用行数据作为后备
|
this.currentCase = row;
|
this.approveForm.id = row.id;
|
this.approveForm.approveResult = "3";
|
this.approveForm.approveOpinion = "";
|
this.approveOpen = true;
|
this.$modal.msgError("获取详情失败，但已打开审批窗口");
|
}
|
},
|
|
/** 提交审批 */
|
async submitApprove() {
|
try {
|
const valid = await this.$refs.approveForm.validate();
|
if (valid) {
|
// 使用完整的案例数据作为基础，确保所有字段都被保留
|
const approveData = {
|
...this.currentCase, // 展开所有现有字段
|
reportStatus: this.approveForm.approveResult,
|
approveOpinion: this.approveForm.approveOpinion,
|
approvername: "当前用户", // 实际项目中应该获取当前登录用户
|
approvetime: new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19),
|
updateTime: new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19),
|
updateBy: "当前用户"
|
};
|
|
// 移除可能不需要的字段（根据实际API需求调整）
|
delete approveData.createTime; // 创建时间不应被更新
|
delete approveData.createBy; // 创建人不应变
|
|
await donateEdit(approveData);
|
this.$modal.msgSuccess("审批成功");
|
this.approveOpen = false;
|
this.getList(); // 重新加载列表
|
}
|
} catch (error) {
|
console.error("审批失败:", error);
|
if (error !== "cancel") {
|
this.$modal.msgError("审批失败");
|
}
|
}
|
},
|
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.$router.push("/case/add");
|
},
|
|
/** 删除按钮操作 */
|
async handleDelete(row) {
|
const ids = row.id || this.ids;
|
try {
|
await this.$modal.confirm(
|
'是否确认删除案例编号为"' + ids + '"的数据项？'
|
);
|
await donateDel(ids);
|
this.$modal.msgSuccess("删除成功");
|
this.getList();
|
} catch (error) {
|
if (error !== "cancel") {
|
console.error("删除失败:", error);
|
this.$modal.msgError("删除失败");
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.filter-card {
|
margin-bottom: 20px;
|
}
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
/* 详情页面样式优化 */
|
.case-detail-container {
|
max-height: 70vh;
|
overflow-y: auto;
|
padding: 0 10px;
|
}
|
|
.detail-section {
|
margin-bottom: 16px;
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
/* 审批弹框样式 */
|
.approve-dialog >>> .el-dialog__body {
|
padding: 0;
|
}
|
|
.approve-detail-preview {
|
height: 100%;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 1200px) {
|
.approve-dialog {
|
width: 95% !important;
|
}
|
|
.el-aside {
|
width: 50% !important;
|
}
|
}
|
</style>
|
