You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
6.3 KiB
Vue
262 lines
6.3 KiB
Vue
<script setup lang="ts">
|
|
import { queryMedicalRecInfo } from "@/api/medicalRecord";
|
|
import BasicInfo from "./compontents/basicInfo.vue";
|
|
import AskInquiry from "./compontents/askInquiry.vue";
|
|
import { ref } from "vue";
|
|
import { reactive, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const showFlag = ref(false);
|
|
let detailInfo = reactive({
|
|
patient: {
|
|
patientSelfDesc: ""
|
|
},
|
|
physicalList: [],
|
|
ancillaryList: [],
|
|
qaList: [],
|
|
diseaseName: "",
|
|
treatmentPlanList: [],
|
|
patientSelfDesc: "",
|
|
primarilyDiagnosisCriteria: "",
|
|
confirmDiagnosisCriteria: "",
|
|
differentialDiagnosisCriteria: "",
|
|
fullCheck: ""
|
|
});
|
|
const columns: TableColumnList = [
|
|
{
|
|
label: "问题类目",
|
|
prop: "dictNamePath"
|
|
},
|
|
|
|
{
|
|
label: "问题",
|
|
prop: "questionList",
|
|
formatter: ({ questionList }) => `${questionList[0]}`
|
|
},
|
|
{
|
|
label: "回复",
|
|
prop: "medicalRecAnswer"
|
|
}
|
|
];
|
|
const planColumns: TableColumnList = [
|
|
{
|
|
label: "处置计划",
|
|
prop: "disposalPlan"
|
|
},
|
|
{
|
|
label: "一级措施",
|
|
prop: "firstMeasures"
|
|
}
|
|
];
|
|
const route = useRoute();
|
|
const getDetail = async () => {
|
|
const res: any = await queryMedicalRecInfo({
|
|
id: route.query.id
|
|
});
|
|
detailInfo = res.data;
|
|
// detailInfo.patient.patientSelfDesc = detailInfo.patientSelfDesc;
|
|
showFlag.value = true;
|
|
};
|
|
onMounted(() => {
|
|
getDetail();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="showFlag" class="case_detail">
|
|
<div class="case_detail_card">
|
|
<div class="main-table-title">
|
|
<div class="title">
|
|
<div class="line" />
|
|
<span>基础信息</span>
|
|
</div>
|
|
</div>
|
|
<BasicInfo :dataInfo="detailInfo" :diseaseName="detailInfo.diseaseName" />
|
|
</div>
|
|
<div class="case_detail_card">
|
|
<div class="main-table-title">
|
|
<div class="title">
|
|
<div class="line" />
|
|
<span>临床诊断</span>
|
|
</div>
|
|
</div>
|
|
<AskInquiry
|
|
:bodyList="detailInfo?.physicalList"
|
|
:supportList="detailInfo?.ancillaryList"
|
|
/>
|
|
</div>
|
|
<div class="case_detail_card">
|
|
<div class="main-table-title">
|
|
<div class="title">
|
|
<div class="line" />
|
|
<span>诊断依据</span>
|
|
</div>
|
|
</div>
|
|
<div class="text_item">
|
|
<div class="left">初步诊断依据</div>
|
|
<div class="right">{{ detailInfo.primarilyDiagnosisCriteria }}</div>
|
|
</div>
|
|
<div class="text_item">
|
|
<div class="left">证实诊断依据</div>
|
|
<div class="right">{{ detailInfo.confirmDiagnosisCriteria }}</div>
|
|
</div>
|
|
<div class="text_item">
|
|
<div class="left">鉴别依据</div>
|
|
<div class="right">{{ detailInfo.differentialDiagnosisCriteria }}</div>
|
|
</div>
|
|
<div class="text_item">
|
|
<div class="left">全面检查</div>
|
|
<div class="right">{{ detailInfo.fullCheck }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="case_detail_card">
|
|
<div class="main-table-title">
|
|
<div class="title">
|
|
<div class="line" />
|
|
<span>应答策略</span>
|
|
</div>
|
|
</div>
|
|
<pure-table
|
|
style="width: 100%; height: 500px"
|
|
align-whole="center"
|
|
showOverflowTooltip
|
|
adaptive
|
|
:data="detailInfo.qaList"
|
|
:columns="columns"
|
|
:header-cell-style="{
|
|
background: 'var(--el-table-row-hover-bg-color)',
|
|
color: 'var(--el-text-color-primary)'
|
|
}"
|
|
/>
|
|
</div>
|
|
<div class="case_detail_card">
|
|
<div class="main-table-title">
|
|
<div class="title">
|
|
<div class="line" />
|
|
<span>处置计划</span>
|
|
</div>
|
|
</div>
|
|
<pure-table
|
|
style="width: 100%; height: 500px"
|
|
align-whole="center"
|
|
showOverflowTooltip
|
|
adaptive
|
|
:data="detailInfo.treatmentPlanList"
|
|
:columns="planColumns"
|
|
:header-cell-style="{
|
|
background: 'var(--el-table-row-hover-bg-color)',
|
|
color: 'var(--el-text-color-primary)'
|
|
}"
|
|
/>
|
|
</div>
|
|
<!-- <el-collapse v-if="showFlag" class="case_detail_main" v-model="activeName">
|
|
<el-collapse-item name="1">
|
|
<template #title>
|
|
<div class="title">
|
|
<span>病历信息</span>
|
|
</div>
|
|
</template>
|
|
|
|
</el-collapse-item>
|
|
<el-collapse-item name="2">
|
|
<template #title>
|
|
<div class="title">
|
|
<span>问诊检查</span>
|
|
</div>
|
|
</template>
|
|
<AskInquiry
|
|
:bodyList="detailInfo?.physicalList"
|
|
:supportList="detailInfo?.ancillaryList"
|
|
/>
|
|
</el-collapse-item>
|
|
<el-collapse-item name="3">
|
|
<template #title>
|
|
<div class="title">
|
|
<span>问诊问题</span>
|
|
</div>
|
|
</template>
|
|
<div class="question_list">
|
|
<div v-for="(item, index) in detailInfo.qaList" :key="index">
|
|
{{ item.questionList[0] }}
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
<el-collapse-item name="4">
|
|
<template #title>
|
|
<div class="title">
|
|
<span>处置计划</span>
|
|
</div>
|
|
</template>
|
|
<DisposalPlan :dataList="detailInfo.treatmentPlanList" />
|
|
</el-collapse-item>
|
|
</el-collapse> -->
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.case_detail {
|
|
:deep(.el-collapse-item__header) {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: rgb(0 127 245 / 9%);
|
|
}
|
|
|
|
:deep(.el-collapse-item) {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
// padding-left: 16px;
|
|
}
|
|
|
|
.case_detail_card {
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
background-color: #fff;
|
|
|
|
.main-table-title {
|
|
.title {
|
|
display: flex;
|
|
margin-bottom: 24px;
|
|
|
|
.line {
|
|
position: relative;
|
|
top: 5px;
|
|
width: 6px;
|
|
height: 20px;
|
|
margin-right: 12px;
|
|
background: #4287ff;
|
|
}
|
|
|
|
span {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text_item {
|
|
display: flex;
|
|
margin-bottom: 24px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #333;
|
|
|
|
.left {
|
|
width: 100px;
|
|
text-align: right;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
// line-height: 32px;
|
|
padding: 2px 12px;
|
|
margin-left: 16px;
|
|
// height: 32px;
|
|
background: #f8f8f8;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|