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