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.
virtual-patient-web/src/views/caseManagement/list/details/index.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>