<template>
|
<div class="assessment-detail">
|
<el-card class="basic-info-card">
|
<div slot="header" class="clearfix">
|
<span>案例基本信息</span>
|
<el-button
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="handleAttachmentPreview"
|
>
|
<i class="el-icon-folder-opened"></i> 查看附件
|
</el-button>
|
</div>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="案例编号">{{
|
assessmentData.caseNo
|
}}</el-descriptions-item>
|
<el-descriptions-item label="潜在捐献者姓名">{{
|
assessmentData.donorName
|
}}</el-descriptions-item>
|
<el-descriptions-item label="性别">
|
<dict-tag :options="genderOptions" :value="assessmentData.gender" />
|
</el-descriptions-item>
|
<el-descriptions-item label="年龄"
|
>{{ assessmentData.age }}岁</el-descriptions-item
|
>
|
<el-descriptions-item label="血型">
|
<dict-tag
|
:options="bloodTypeOptions"
|
:value="assessmentData.bloodType"
|
/>
|
</el-descriptions-item>
|
<el-descriptions-item label="证件号码">{{
|
assessmentData.idCardNo
|
}}</el-descriptions-item>
|
<el-descriptions-item label="疾病诊断">{{
|
assessmentData.diagnosis
|
}}</el-descriptions-item>
|
<el-descriptions-item label="所在医疗机构">{{
|
assessmentData.hospitalName
|
}}</el-descriptions-item>
|
<el-descriptions-item label="主治医生">{{
|
assessmentData.doctorName
|
}}</el-descriptions-item>
|
<el-descriptions-item label="申请评估时间">{{
|
assessmentData.applyTime
|
}}</el-descriptions-item>
|
<el-descriptions-item label="评估类型">
|
<dict-tag
|
:options="assessmentTypeOptions"
|
:value="assessmentData.assessmentType"
|
/>
|
</el-descriptions-item>
|
<el-descriptions-item label="评估状态">
|
<el-tag :type="statusFilter(assessmentData.assessmentStatus)">
|
{{ statusTextFilter(assessmentData.assessmentStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<el-card class="organ-assessment-card">
|
<div slot="header" class="clearfix">
|
<span>器官评估表</span>
|
<el-button
|
v-if="isCoordinator && allOrgansAssessed"
|
style="float: right; margin-left: 10px"
|
type="primary"
|
size="mini"
|
@click="handleCompleteAssessment"
|
>
|
确认完成评估
|
</el-button>
|
<span v-if="!isCoordinator" class="jstitle">
|
当前角色：{{ currentDepartment }}评估人员
|
</span>
|
</div>
|
|
<el-table
|
:data="organAssessmentList"
|
v-loading="assessmentLoading"
|
style="width: 100%"
|
:row-class-name="getRowClassName"
|
>
|
<el-table-column
|
label="器官类型"
|
align="center"
|
prop="organType"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<dict-tag
|
:options="organTypeOptions"
|
:value="scope.row.organType"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="评估科室"
|
align="center"
|
prop="department"
|
width="120"
|
/>
|
<el-table-column
|
label="评估人员"
|
align="center"
|
prop="assessor"
|
width="100"
|
/>
|
<el-table-column label="评估状态" align="center" width="100">
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.assessmentStatus === '1' ? 'success' : 'warning'"
|
size="small"
|
>
|
{{ scope.row.assessmentStatus === "1" ? "已评估" : "待评估" }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="功能状态" align="center" width="100">
|
<template slot-scope="scope">
|
<el-tag
|
:type="getFunctionStatusType(scope.row.functionStatus)"
|
size="small"
|
>
|
{{ getFunctionStatusText(scope.row.functionStatus) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="评估意见"
|
align="center"
|
prop="assessmentOpinion"
|
min-width="150"
|
show-overflow-tooltip
|
/>
|
<el-table-column label="评估时间" align="center" width="120">
|
<template slot-scope="scope">
|
<span>{{ scope.row.assessmentTime || "-" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
width="150"
|
class-name="small-padding fixed-width"
|
>
|
<template slot-scope="scope">
|
<el-button
|
v-if="canAssessOrgan(scope.row)"
|
size="mini"
|
type="text"
|
@click="handleOrganAssess(scope.row)"
|
>{{
|
scope.row.assessmentStatus === "1" ? "查看/修改" : "评估"
|
}}</el-button
|
>
|
<el-button v-else size="mini" type="text" disabled
|
>无权限</el-button
|
>
|
<el-button
|
v-if="isCoordinator"
|
size="mini"
|
type="text"
|
@click="handleViewOrganDetail(scope.row)"
|
>详情</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 器官评估详情 -->
|
<el-collapse
|
v-model="activeOrgans"
|
accordion
|
class="organ-detail-collapse"
|
>
|
<el-collapse-item
|
v-for="organ in organAssessmentList"
|
:key="organ.organType"
|
:name="organ.organType"
|
:title="getOrganTitle(organ)"
|
>
|
<organ-assessment-form
|
:organ-data="organ"
|
:readonly="!canAssessOrgan(organ)"
|
@save="handleSaveOrganAssessment"
|
/>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<!-- 附件预览弹窗 -->
|
<attachment-preview
|
:visible="attachmentVisible"
|
:attachment-list="attachmentList"
|
@close="attachmentVisible = false"
|
/>
|
</div>
|
</template>
|
|
<script>
|
// import { getAssessment, updateOrganAssessment, completeAssessment } from "@/api/case/assessment";
|
import {
|
getAssessment,
|
updateOrganAssessment,
|
completeAssessment
|
} from "./mockAssessmentApi";
|
|
import OrganAssessmentForm from "./components/OrganAssessmentForm.vue";
|
import AttachmentPreview from "./components/AttachmentPreview.vue";
|
|
export default {
|
name: "AssessmentDetail",
|
components: { OrganAssessmentForm, AttachmentPreview },
|
data() {
|
return {
|
// 评估ID
|
assessmentId: undefined,
|
// 评估数据
|
assessmentData: {},
|
// 器官评估列表
|
organAssessmentList: [],
|
// 附件列表
|
attachmentList: [],
|
// 加载状态
|
assessmentLoading: false,
|
// 当前用户信息
|
currentUser: {
|
id: "001",
|
name: "张医生",
|
department: "心脏外科",
|
role: "department" // coordinator: 协调员, department: 科室人员
|
},
|
// 展开的器官
|
activeOrgans: [],
|
// 附件预览可见性
|
attachmentVisible: false,
|
// 字典选项
|
genderOptions: [
|
{ value: "0", label: "男" },
|
{ value: "1", label: "女" }
|
],
|
bloodTypeOptions: [
|
{ value: "A", label: "A型" },
|
{ value: "B", label: "B型" },
|
{ value: "O", label: "O型" },
|
{ value: "AB", label: "AB型" }
|
],
|
assessmentTypeOptions: [
|
{ value: "1", label: "初次评估" },
|
{ value: "2", label: "最终评估" }
|
],
|
organTypeOptions: [
|
{ value: "heart", label: "心脏" },
|
{ value: "liver", label: "肝脏" },
|
{ value: "kidney", label: "肾脏" },
|
{ value: "lung", label: "肺脏" },
|
{ value: "pancreas", label: "胰腺" },
|
{ value: "intestine", label: "肠道" },
|
{ value: "cornea", label: "角膜" },
|
{ value: "skin", label: "皮肤" }
|
]
|
};
|
},
|
computed: {
|
// 是否是协调员
|
isCoordinator() {
|
return this.currentUser.role === "coordinator";
|
},
|
// 当前科室
|
currentDepartment() {
|
return this.currentUser.department;
|
},
|
// 所有器官是否都已评估
|
allOrgansAssessed() {
|
return this.organAssessmentList.every(
|
organ => organ.assessmentStatus === "1"
|
);
|
}
|
},
|
created() {
|
this.assessmentId = this.$route.query.id;
|
this.getAssessmentDetail();
|
},
|
methods: {
|
// 获取评估详情 - 使用Mock数据
|
getAssessmentDetail() {
|
this.assessmentLoading = true;
|
getAssessment(this.assessmentId)
|
.then(response => {
|
if (response.code === 200) {
|
this.assessmentData = response.data.caseInfo;
|
this.organAssessmentList = response.data.organAssessments || [];
|
this.attachmentList = response.data.attachments || [];
|
} else {
|
this.$message.error("获取评估详情失败");
|
}
|
this.assessmentLoading = false;
|
})
|
.catch(error => {
|
console.error("获取评估详情失败:", error);
|
this.assessmentLoading = false;
|
this.$message.error("获取评估详情失败");
|
});
|
},
|
// 状态过滤器
|
statusFilter(status) {
|
const statusMap = {
|
"0": "warning",
|
"1": "primary",
|
"2": "success",
|
"3": "danger"
|
};
|
return statusMap[status] || "info";
|
},
|
statusTextFilter(status) {
|
const statusMap = {
|
"0": "待评估",
|
"1": "评估中",
|
"2": "已完成",
|
"3": "已关闭"
|
};
|
return statusMap[status] || "未知";
|
},
|
// 获取功能状态类型
|
getFunctionStatusType(status) {
|
const typeMap = {
|
"1": "success", // 正常
|
"2": "warning", // 轻度异常
|
"3": "danger", // 重度异常
|
"4": "info" // 无法评估
|
};
|
return typeMap[status] || "info";
|
},
|
// 获取功能状态文本
|
getFunctionStatusText(status) {
|
const textMap = {
|
"1": "正常",
|
"2": "轻度异常",
|
"3": "重度异常",
|
"4": "无法评估"
|
};
|
return textMap[status] || "未知";
|
},
|
// 检查是否有权限评估该器官
|
canAssessOrgan(organ) {
|
if (this.isCoordinator) return true;
|
return organ.department === this.currentDepartment;
|
},
|
// 获取行类名
|
getRowClassName({ row }) {
|
return this.canAssessOrgan(row) ? "assessable-row" : "non-assessable-row";
|
},
|
// 获取器官标题
|
getOrganTitle(organ) {
|
const organName =
|
this.organTypeOptions.find(opt => opt.value === organ.organType)
|
?.label || organ.organType;
|
return `${organName}评估详情（${organ.department}）`;
|
},
|
// 器官评估
|
handleOrganAssess(organ) {
|
this.activeOrgans = [organ.organType];
|
},
|
// 查看器官详情
|
handleViewOrganDetail(organ) {
|
this.activeOrgans = [organ.organType];
|
},
|
// 保存器官评估 - 使用Mock API
|
handleSaveOrganAssessment(organData) {
|
updateOrganAssessment(organData)
|
.then(response => {
|
if (response.code === 200) {
|
this.$message.success("评估保存成功");
|
// 刷新数据
|
this.getAssessmentDetail();
|
}
|
})
|
.catch(error => {
|
console.error("保存评估失败:", error);
|
this.$message.error("保存失败");
|
});
|
},
|
// 查看附件预览
|
handleAttachmentPreview() {
|
this.attachmentVisible = true;
|
},
|
// 完成评估 - 使用Mock API
|
handleCompleteAssessment() {
|
this.$confirm("确认完成所有器官评估吗？完成后将无法修改", "确认操作", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
completeAssessment(this.assessmentId)
|
.then(response => {
|
if (response.code === 200) {
|
this.$message.success("评估完成确认成功");
|
this.getAssessmentDetail();
|
}
|
})
|
.catch(error => {
|
console.error("完成评估失败:", error);
|
this.$message.error("操作失败");
|
});
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.assessment-detail {
|
padding: 20px;
|
}
|
|
.basic-info-card {
|
margin-bottom: 20px;
|
}
|
|
.organ-assessment-card {
|
margin-bottom: 20px;
|
}
|
|
.organ-detail-collapse {
|
margin-top: 20px;
|
}
|
|
::v-deep .assessable-row {
|
background-color: #f0f9ff;
|
}
|
|
::v-deep .non-assessable-row {
|
background-color: #fafafa;
|
}
|
|
::v-deep .el-descriptions__label {
|
width: 120px;
|
background-color: #f5f7fa;
|
font-weight: bold;
|
}
|
|
.fixed-width .el-button {
|
margin: 0 2px;
|
}
|
.jstitle {
|
float: right;
|
font-size: 18px !important;
|
font-weight: 600;
|
color: #2645f7;
|
font-size: 12px;
|
}
|
</style>
|
