virtual-patient-web/src/views/inquiryCase/estimate/index.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>