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/inquiryCase/estimate/index.vue

439 lines
11 KiB
Vue

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import PatientCase from "./components/PatientCase.vue";
import { queryDiagnosisResult } from "@/api/inquiry";
import {
saveProcessEvaluation,
queryProcessEvaluation
} from "@/api/inquiryCase";
import tipIcon from "@/assets/inquiry/tip.png";
import router from "@/router";
import CheckIcon from "@/assets/svg/consultation/check.svg?component";
import { useRoute } from "vue-router";
defineOptions({
name: "estimate"
});
const route = useRoute();
const state = reactive({
dataInfo: undefined
});
const columns: TableColumnList = [
{
label: "处置计划",
prop: "disposalPlanName"
},
{
label: "一级措施",
prop: "firstMeasures"
},
{
label: "说明",
prop: "guide"
}
];
const intervalDayList = [
{
id: 0,
name: "每日一次"
},
{
id: 1,
name: "每日两次"
},
{
id: 2,
name: "每日三次"
},
{
id: 3,
name: "每日四次"
}
];
const drugRouteList = [
{
id: 0,
name: "口服"
},
{
id: 1,
name: "静脉注射"
},
{
id: 2,
name: "静脉输液"
},
{
id: 3,
name: "皮下注射"
},
{
id: 4,
name: "局部用药"
},
{
id: 5,
name: "气雾剂/粉雾剂吸入"
},
{
id: 6,
name: "雾化吸入"
},
{
id: 7,
name: "鞘内注射"
}
];
const rules = {
overview: [{ required: true, message: "请输入", trigger: "change" }]
};
const addFlag = ref(true);
const drugColumns: TableColumnList = [
{
label: "处置计划",
prop: "disposalPlanName"
},
{
label: "药物名称",
prop: "drugName"
},
{
label: "用药途径",
formatter: ({ drugRoute }) => `${drugRouteList[drugRoute]?.name || ""}`
},
{
label: "用药间隔",
prop: "select",
formatter: ({ intervalDay, intervalHour }) => {
return intervalDay !== null
? intervalDayList[intervalDay]?.name
: `${intervalHour}小时`;
}
},
{
label: "说明",
prop: "guide"
}
];
const addForm = reactive({
overview: ""
});
const getDetails = async () => {
const { data } = await queryDiagnosisResult({
processId: route.query.processId
});
state.dataInfo = data;
};
const save = async () => {
const res: any = await saveProcessEvaluation({
processId: route.query.processId,
overview: addForm.overview
});
if (res.code === 200) {
router.push("/inquiryCase/list");
addForm.overview = "";
}
};
const getProcessEvaluation = async () => {
const res: any = await queryProcessEvaluation({
processId: route.query.processId
});
if (res.data) {
addForm.overview = res.data.overview;
addFlag.value = false;
activeName.value = "1";
} else {
activeName.value = "2";
addFlag.value = true;
}
};
onMounted(() => {
getProcessEvaluation();
getDetails();
});
const activeName = ref("");
</script>
<template>
<div class="main-table estimate">
<el-tabs v-model="activeName">
<el-tab-pane label="患者病历" name="1">
<PatientCase />
</el-tab-pane>
<el-tab-pane label="评分概述" name="2">
<div class="score">
<div class="evaluate_desc evaluate_content">
<div class="evaluate_desc_title">
<img :src="tipIcon" alt="" />
<span
>该初步评估提供了有关您对病历进行诊治的信息评估类别旁将标记为本次诊断成功完成的任务
</span>
</div>
</div>
<div style="margin: 24px 0">
评估类别包含首次问诊问诊体格检查辅助检查确认诊断确诊处置计划三个阶段的诊断评估结果
</div>
<el-form :model="addForm" :rules="rules">
<el-form-item label="医生评估概述" prop="overview">
<el-input
:readonly="!addFlag"
size="large"
style="width: 500px"
:rows="4"
type="textarea"
v-model="addForm.overview"
/>
</el-form-item>
</el-form>
<div v-if="addFlag" class="btn" @click="save"></div>
</div>
</el-tab-pane>
<el-tab-pane label="预期诊断结果" name="3">
<div v-if="state.dataInfo?.expertDiagnosisResult" class="score">
<el-row class="evaluate_text">
{{
`正确诊断:${state.dataInfo?.expertDiagnosisResult.diagnosis} `
}}
</el-row>
<el-row style="margin-top: 16px">您的诊断结果</el-row>
<div class="userDiagnosisResult">
<div
class="mb-4 userDiagnosisResult_item"
v-for="(item, index) in state.dataInfo.expertDiagnosisResult
.userDiagnosisResult"
:key="index"
>
<div v-if="item.correct === 1" class="correct">
<CheckIcon />
<span style="margin-left: 8px; color: #0db274">{{
item.diseaseName
}}</span>
</div>
<div v-else class="error">
<span>{{ item.diseaseName }}</span>
</div>
</div>
</div>
<el-row style="margin-top: 16px">预期初诊诊断列表</el-row>
<div
class="userDiagnosisResult"
v-for="(item, index) in state.dataInfo.expertDiagnosisResult
.expertDiagnosisResult"
:key="index"
>
{{ item.diseaseName }}
</div>
</div>
</el-tab-pane>
<el-tab-pane label="初步诊断依据" name="4">
<div v-if="state.dataInfo" class="score">
<div class="userDiagnosisResult">
<div
v-for="(item, index) in state.dataInfo.basisPrimaryResultResVO
.nodeList"
:key="index"
class="mb-4 userDiagnosisResult_item"
>
<div v-if="item.correct === 1" class="correct">
<CheckIcon />
<span style="margin-left: 8px; color: #0db274">{{
item.recordName
}}</span>
</div>
<div v-else class="error">
<span>{{ item.recordName }}</span>
</div>
</div>
</div>
<div
class="desc mt-4"
v-html="state.dataInfo.basisPrimaryResultResVO.preliminaryDiagnosis"
/>
</div>
</el-tab-pane>
<el-tab-pane label="证实诊断依据" name="5">
<div v-if="state.dataInfo" class="score">
<div>证实或排除初步诊断的必须项目</div>
<div class="userDiagnosisResult">
<div
v-for="(item, index) in state.dataInfo.basisConfirmResultResVO
.nodeList"
:key="index"
class="mb-4 userDiagnosisResult_item"
>
<div v-if="item.correct === 1" class="correct">
<CheckIcon />
<span style="margin-left: 8px; color: #0db274">{{
item.recordName
}}</span>
</div>
<div v-else class="error">
<span>{{ item.recordName }}</span>
</div>
</div>
</div>
<div
class="desc mt-4"
v-html="state.dataInfo.basisConfirmResultResVO.confirmingDiagnosis"
/>
</div>
</el-tab-pane>
<el-tab-pane label="鉴别依据" name="6">
<div v-if="state.dataInfo" class="score">
<div>鉴别依据所必须的项目</div>
<div class="userDiagnosisResult">
<div
v-for="(item, index) in state.dataInfo.basisIdentificationResult
.nodeList"
:key="index"
class="mb-4 userDiagnosisResult_item"
>
<div v-if="item.correct === 1" class="correct">
<CheckIcon />
<span style="margin-left: 8px; color: #0db274">{{
item.recordName
}}</span>
</div>
<div v-else class="error">
<span>{{ item.recordName }}</span>
</div>
</div>
</div>
<div
class="desc mt-4"
v-html="
state.dataInfo.basisIdentificationResult.identificationDiagnosis
"
/>
</div>
</el-tab-pane>
<el-tab-pane label="处置方案" name="7">
<div v-if="state.dataInfo" class="score">
<div class="evaluate_content" style="background-color: #fff">
<div class="plan_list">
<pure-table
border
align-whole="center"
style="width: 100%"
showOverflowTooltip
class="mt-4"
:data="state.dataInfo.dealPlan.otherTreatmentPlan"
:columns="columns"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
/>
<pure-table
border
align-whole="center"
showOverflowTooltip
class="mt-4"
style="width: 100%"
:data="state.dataInfo.dealPlan.drugTreatmentPlan"
:columns="drugColumns"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
/>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<style lang="scss" scoped>
.estimate {
font-size: 14px;
.score {
padding: 12px 24px;
:deep(.el-form-item__label) {
font-size: 14px;
font-weight: 400;
color: #333;
}
.btn {
width: 80px;
height: 36px;
margin-left: 100px;
font-size: 16px;
font-weight: 400;
line-height: 36px;
color: #fff;
text-align: center;
cursor: pointer;
background: #4287ff;
border-radius: 6px;
}
}
:deep(.el-tabs) {
overflow: auto;
}
.userDiagnosisResult {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 16px;
margin-top: 8px;
background: #f5f5f5;
border: 1px solid rgb(66 135 255 / 30%);
border-radius: 6px;
.userDiagnosisResult_item {
width: 50%;
}
.correct {
display: flex;
font-size: 14px;
font-weight: 400;
color: #0db274;
}
.error {
padding-left: 25px;
font-size: 14px;
font-weight: 400;
color: #2b3f54;
}
.value {
font-size: 14px;
font-weight: 400;
}
}
.evaluate_desc {
.evaluate_desc_title {
display: flex;
align-items: center;
height: 32px;
img {
width: 20px;
height: 20px;
}
span {
margin-left: 8px;
font-size: 12px;
font-weight: 400;
color: #4287ff;
}
}
}
.evaluate_content {
padding: 16px;
margin-top: 8px;
line-height: 32px;
background: rgb(91 139 255 / 5%);
}
}
</style>