health.admin/src/components/PatientMedicalHistoryPreview.vue

<script setup lang="ts">
import type { MedicalHistoryVO } from '@/model/diagnosis-report.model';

const props = defineProps<Partial<MedicalHistoryVO>>();
</script>

<template>
  <div class="patient-medical-history-wrapper">
    <header class="text-center text-4.5 font-600">门诊病历</header>
    <main class="mt-4">
      <a-descriptions :column="10">
        <a-descriptions-item label="就诊日期" :span="3">{{props.date}}</a-descriptions-item>
        <a-descriptions-item label="姓名" :span="2">{{props.patient?.name}}</a-descriptions-item>
        <a-descriptions-item label="性别" :span="1">{{props.patient?.gender}}</a-descriptions-item>
        <a-descriptions-item label="年龄" :span="1">{{props.patient?.age}}</a-descriptions-item>
        <a-descriptions-item label="电话" :span="3">{{props.patient?.phone}}</a-descriptions-item>
        <a-descriptions-item label="就诊科室" :span="3">{{props.diagnosis?.department.name}}</a-descriptions-item>
        <a-descriptions-item label="身份证" :span="2">{{props.patient?.identityCard}}</a-descriptions-item>
        <a-descriptions-item label="地址" :span="5">{{props.patient?.address}}</a-descriptions-item>
      </a-descriptions>
      <div class="row" v-for="item in props.diagnosis?.descriptions" :key="item.label">
        <header>
          <label>{{item.label}}</label>
          <span>{{item.value}}</span>
        </header>
      </div>
      <div class="row">
        <header>
          <label>诊断</label>
        </header>
        <main>
          <div class="row">
            <a-space direction="vertical" :size="12">
              <span><label>中医诊断</label>{{props.diagnosis?.TCM}}</span>
              <span><label>西医诊断</label>{{props.diagnosis?.ICD}}</span>
            </a-space>
          </div>
        </main>
      </div>
      <div class="row">
        <header>
          <label>处置方式</label>
        </header>
        <main>
          <div class="row">
            <a-space direction="vertical" :size="12">
              <div v-for="prescription in props.prescriptions" :key="prescription.title">
                <span>{{prescription.title}}</span>
                <a-row style="padding-right: 36px;">
                  <a-col v-for="medicine in prescription.medicines" :key="medicine.id" class="flex items-center justify-evenly min-h-10" :span="6">
                    <span style="width: 50%;" class="text-center">{{medicine.name}}</span>
                    <span>{{medicine.dosage}}{{medicine.unit}}</span>
                    <span style="color: rgba(0, 0, 0, 0.45);">{{medicine.usage}}</span>
                  </a-col>
                </a-row>
                <a-space direction="vertical" :size="12">
                  <span>
                    <label>剂数</label>
                    {{prescription.count}}
                    <template v-if="prescription.decoction?.label">({{prescription.decoction?.label}})</template>
                    <span style="margin-right: 12px;">{{prescription.dosageType?.label}}</span>
                    <span style="margin-right: 12px;">{{prescription.method?.label}}</span>
                    <span style="margin-right: 12px;">{{prescription.dosage?.label}}</span>
                    <span style="margin-right: 12px;">{{prescription.frequency?.label}}</span>
                    <span style="margin-right: 12px;">{{prescription.frequencyTime?.label}}</span>
                  </span>
                  <span><label>嘱托</label>{{prescription.remark}}</span>
                </a-space>
              </div>
            </a-space>
          </div>
        </main>
      </div>

    </main>
  </div>
</template>

<style scoped lang="scss">
.ant-descriptions {
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(5, 5, 5, 0.2);

  :deep(.ant-descriptions-item-label),
  :deep(.ant-descriptions-item-content) {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
}

main {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.row {
  padding: 12px 0;

  span > label {
    color: rgba(0, 0, 0, 0.45);
  }

  label::after {
    margin-left: 2px;
    margin-right: 8px;
    content: ':';
  }

  > header::before {
    $size: 10px;
    content: '';
    display: inline-block;
    margin-right: 12px;
    width: $size;
    height: $size;
    border: 2px solid #1d6ff6;
    border-radius: 50%;
  }

  > main {
    margin-left: 18px * 2;
  }
}
</style>