<template>
|
<el-card class="basic-info-card" v-loading="loading">
|
<div slot="header" class="clearfix">
|
<span>案例基本信息</span>
|
<el-button
|
v-if="showAttachment && hasAttachments"
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="handleAttachmentPreview"
|
>
|
<i class="el-icon-folder-opened"></i> 查看附件
|
</el-button>
|
</div>
|
|
<el-descriptions v-if="basicData" :column="column" border>
|
<!-- 1. 案例编号 -->
|
<el-descriptions-item label="案例编号">
|
{{ basicData.caseNo || "--" }}
|
</el-descriptions-item>
|
|
<!-- 2. 潜在捐献者姓名 -->
|
<el-descriptions-item label="捐献者姓名">
|
{{ basicData.name || basicData.donorName || "--" }}
|
</el-descriptions-item>
|
|
<!-- 3. 性别/年龄 -->
|
<el-descriptions-item label="性别/年龄">
|
<span v-if="basicData.sex">
|
<dict-tag
|
v-if="useDict"
|
:options="sexOptions"
|
:value="basicData.sex"
|
/>
|
<template v-else>{{ basicData.sex == "1" ? "男" : "女" }}</template>
|
</span>
|
<span v-if="basicData.age">
|
/ {{ basicData.age }}{{ basicData.ageunit || "岁" }}</span
|
>
|
<span v-if="!basicData.sex && !basicData.age">--</span>
|
</el-descriptions-item>
|
|
<!-- 4. 证件号码 -->
|
<el-descriptions-item label="证件号码">
|
{{ basicData.idcardno || basicData.idCardNo || "--" }}
|
</el-descriptions-item>
|
|
<!-- 5. 血型 -->
|
<el-descriptions-item label="血型">
|
<template v-if="basicData.bloodType || basicData.bloodtype">
|
{{ basicData.bloodType || basicData.bloodtype }}
|
</template>
|
<template v-else>--</template>
|
</el-descriptions-item>
|
|
<!-- 6. 疾病诊断 -->
|
<el-descriptions-item label="疾病诊断">
|
{{ basicData.diagnosisname || basicData.diagnosis || "--" }}
|
</el-descriptions-item>
|
|
<!-- 7. 所在医疗机构 -->
|
<el-descriptions-item label="所在医疗机构">
|
{{ basicData.treatmenthospitalname || basicData.hospitalName || "--" }}
|
</el-descriptions-item>
|
|
<!-- 8. 协调员 -->
|
<el-descriptions-item label="协调员">
|
{{ basicData.coordinatorName || basicData.contactPerson || "--" }}
|
</el-descriptions-item>
|
|
<!-- 9. 上报时间 -->
|
<el-descriptions-item label="上报时间">
|
{{ formatDateTime(basicData.reportTime) || "--" }}
|
</el-descriptions-item>
|
|
<!-- 10. 案例状态 -->
|
<el-descriptions-item label="案例进度">
|
<!-- <el-tag :type="getReportStatusType(basicData.workflow)" size="small">
|
{{ getReportStatusText(basicData.workflow) }}
|
</el-tag> -->
|
<div>
|
<dict-tag
|
:options="dict.type.sys_donornode"
|
:value="basicData.workflow"
|
/>
|
</div>
|
</el-descriptions-item>
|
|
<!-- 11. 转运状态（根据需求可选） -->
|
<el-descriptions-item v-if="showTransport" label="转运状态">
|
<el-tag
|
:type="getTransportStatusType(basicData.isTransport)"
|
size="small"
|
>
|
{{ getTransportStatusText(basicData.isTransport) }}
|
</el-tag>
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- 空状态 -->
|
<div v-else class="empty-state">
|
<el-empty description="暂无案例信息" :image-size="100"></el-empty>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import { getDonatebaseinfo } from "@/api/project/donatebaseinfo";
|
|
export default {
|
name: "CaseBasicInfoSimple",
|
props: {
|
// 案例ID
|
caseId: {
|
type: [String, Number],
|
required: true
|
},
|
// 列数
|
column: {
|
type: Number,
|
default: 2
|
},
|
// 是否显示附件按钮
|
showAttachment: {
|
type: Boolean,
|
default: false
|
},
|
// 是否使用字典
|
useDict: {
|
type: Boolean,
|
default: false
|
},
|
// 是否显示转运状态
|
showTransport: {
|
type: Boolean,
|
default: false
|
},
|
// 是否自动加载
|
autoLoad: {
|
type: Boolean,
|
default: true
|
},
|
// 外部传入的数据（不调用接口）
|
externalData: {
|
type: Object,
|
default: null
|
},
|
// 自定义字段列表
|
fields: {
|
type: Array,
|
default: () => [
|
"caseNo", // 案例编号
|
"name", // 姓名
|
"sexAge", // 性别/年龄
|
"idcardno", // 证件号码
|
"bloodType", // 血型
|
"diagnosis", // 疾病诊断
|
"hospital", // 医疗机构
|
"coordinator", // 协调员
|
"reportTime", // 上报时间
|
"status" // 案例状态
|
]
|
}
|
},
|
dicts: [
|
"sys_user_sex",
|
"sys_BloodType",
|
"sys_DonationCategory",
|
"sys_donornode"
|
],
|
data() {
|
return {
|
loading: false,
|
basicData: null,
|
// 字典选项
|
sexOptions: [],
|
bloodTypeOptions: []
|
};
|
},
|
computed: {
|
hasAttachments() {
|
return (
|
this.basicData &&
|
(this.basicData.assessannex || this.basicData.attachments)
|
);
|
}
|
},
|
watch: {
|
caseId: {
|
handler(newVal) {
|
if (newVal && this.autoLoad && !this.externalData) {
|
this.loadBasicInfo();
|
}
|
},
|
immediate: true
|
},
|
externalData: {
|
handler(newVal) {
|
if (newVal) {
|
this.basicData = this.mapExternalData(newVal);
|
}
|
},
|
immediate: true
|
}
|
},
|
created() {
|
if (this.useDict) {
|
this.loadDicts();
|
}
|
|
if (this.caseId && this.autoLoad && !this.externalData) {
|
this.loadBasicInfo();
|
} else if (this.externalData) {
|
this.basicData = this.mapExternalData(this.externalData);
|
}
|
},
|
methods: {
|
// 加载字典
|
async loadDicts() {
|
try {
|
// 加载性别字典
|
this.sexOptions = [
|
{ dictLabel: "男", dictValue: "1" },
|
{ dictLabel: "女", dictValue: "2" }
|
];
|
|
// 加载血型字典
|
this.bloodTypeOptions = [
|
{ dictLabel: "A型", dictValue: "A" },
|
{ dictLabel: "B型", dictValue: "B" },
|
{ dictLabel: "O型", dictValue: "O" },
|
{ dictLabel: "AB型", dictValue: "AB" }
|
];
|
} catch (error) {
|
console.warn("加载字典失败:", error);
|
}
|
},
|
|
// 加载基本信息
|
async loadBasicInfo() {
|
if (!this.caseId) return;
|
|
this.loading = true;
|
try {
|
const response = await getDonatebaseinfo(this.caseId);
|
|
if (response.code === 200) {
|
this.basicData = this.mapApiData(response.data);
|
console.log(this.basicData );
|
|
this.loading = false;
|
} else {
|
this.$message.error(
|
"获取案例信息失败：" + (response.msg || "未知错误")
|
);
|
}
|
} catch (error) {
|
console.error("加载案例基本信息失败:", error);
|
this.$message.error("加载失败，请重试");
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
// 映射API数据
|
mapApiData(apiData) {
|
if (!apiData) return null;
|
|
return {
|
// 核心字段
|
caseNo: apiData.caseNo,
|
name: apiData.name || apiData.donorName,
|
donorName: apiData.donorName,
|
sex: apiData.sex,
|
age: apiData.age,
|
ageunit: apiData.ageunit,
|
workflow: apiData.workflow,
|
bloodType: apiData.bloodType || apiData.bloodtype,
|
idcardno: apiData.idcardno || apiData.idCardNo,
|
diagnosisname: apiData.diagnosisname || apiData.diagnosis,
|
treatmenthospitalname:
|
apiData.treatmenthospitalname || apiData.hospitalName,
|
coordinatorName: apiData.coordinatorName || apiData.contactPerson,
|
reportTime: apiData.reporttime,
|
reportStatus: apiData.reportStatus,
|
isTransport: apiData.isTransport,
|
|
// 附件字段
|
assessannex: apiData.assessannex,
|
attachments: apiData.attachments
|
};
|
},
|
|
// 映射外部数据
|
mapExternalData(externalData) {
|
return this.mapApiData(externalData);
|
},
|
|
// 格式化日期时间
|
formatDateTime(dateTimeStr) {
|
if (!dateTimeStr) return "";
|
try {
|
const date = new Date(dateTimeStr);
|
return date
|
.toLocaleString("zh-CN", {
|
year: "numeric",
|
month: "2-digit",
|
day: "2-digit",
|
hour: "2-digit",
|
minute: "2-digit",
|
second: "2-digit"
|
})
|
.replace(/\//g, "-");
|
} catch (e) {
|
return dateTimeStr;
|
}
|
},
|
|
// 上报状态相关
|
getReportStatusType(status) {
|
const statusMap = {
|
"1": "warning", // 已上报
|
"2": "primary", // 已阅读
|
"3": "success", // 已同意
|
"4": "danger" // 已驳回
|
};
|
return statusMap[status] || "info";
|
},
|
|
getReportStatusText(status) {
|
const statusMap = {
|
"0": "潜在捐献",
|
"2": "已阅读",
|
"3": "已同意",
|
"4": "已驳回"
|
};
|
return statusMap[status] || "未知";
|
},
|
|
// 转运状态相关
|
getTransportStatusType(status) {
|
const statusMap = {
|
"1": "warning", // 无需转运
|
"2": "primary", // 需转运
|
"3": "success", // 转运中
|
"4": "danger" // 转运完成
|
};
|
return statusMap[status] || "info";
|
},
|
|
getTransportStatusText(status) {
|
const statusMap = {
|
"1": "无需转运",
|
"2": "需转运",
|
"3": "转运中",
|
"4": "转运完成"
|
};
|
return statusMap[status] || "未知";
|
},
|
|
// 查看附件
|
handleAttachmentPreview() {
|
this.$emit("attachment-preview", this.basicData);
|
},
|
|
// 刷新数据
|
async refresh() {
|
await this.loadBasicInfo();
|
},
|
|
// 获取数据
|
getData() {
|
return this.basicData;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.basic-info-card {
|
margin-bottom: 20px;
|
}
|
|
.clearfix::after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
|
.empty-state {
|
padding: 40px 0;
|
text-align: center;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.basic-info-card {
|
margin: 10px;
|
}
|
}
|
</style>
|
