health.admin/src/components/ReportAnalysisEdit.vue

<script setup lang="ts">
import type { PatientModel, ReportIndicatorModel, ReportModel } from '@/model';

import { patientMethod }                            from '@/request/api/patient.api';
import { indicatorByPatientIdMethod, reportMethod } from '@/request/api/report.api';
import PatientCardWidget                            from '@/widgets/PatientCardWidget.vue';
import ReportIndicatorWidget                        from '@/widgets/ReportIndicatorWidget.vue';
import { useWatcher }                               from 'alova/client';


const props = defineProps<{
  patient: Partial<PatientModel>;
  report: Partial<ReportModel>;
}>();
const emits = defineEmits<{
  destroy: [];
}>();
const patientId = computed(() => props.patient?.id);
const reportId = computed(() => props.report?.id);
const { data: patient, loading: patientLoading } = useWatcher(
  () => patientMethod(patientId.value!),
  [ () => props.patient?.id ],
  {
    initialData: { ...props.patient }, immediate: true,
    middleware: (_, next) => { if ( patientId.value ) next(); },
  },
);
const { data: report, loading: reportLoading } = useWatcher(
  () => reportMethod(reportId.value!),
  [ reportId ],
  {
    initialData: { ...props.report }, immediate: true,
    middleware: (_, next) => { if ( reportId.value ) next(); },
  },
);
const indicator = ref<ReportIndicatorModel[]>([]);
const { loading: indicatorLoading } = useWatcher(
  () => indicatorByPatientIdMethod(patientId.value!, false),
  [ () => props.patient?.id ],
  {
    initialData: [], immediate: true,
    middleware: (_, next) => { if ( patientId.value ) next(); },
  },
).onSuccess(({ data }) => {
  indicator.value = data.filter(item => !item.editor?.disabled).map(({ value, ...item }) => item);
});
</script>
<template>
  <div id="page-container-scroller" class="page-container flex flex-col">
    <PatientCardWidget :dataset="patient" :loading="patientLoading" />
    <div ref="container" class="card card__report-analysis">
      <div class="card__header sticky flex justify-between items-center">
        <div class="card__title">
          <span>症状信息</span>
          <a-spin v-if="reportLoading" size="small" style="margin-left: 4px;" />
        </div>
      </div>
      <div class="card__content">
        <a-descriptions :column="2">
          <a-descriptions-item v-if="report.tongueAnalysisResult">
            <a-space align="start">
              <a-image :width="200" :height="200" :src="report.upImg" :preview="true" />
              <a-image :width="200" :height="200" :src="report.downImg" :preview="true" />
              <a-card size="small" title="舌象分析结果">
                {{ report.tongueAnalysisResult }}
              </a-card>
            </a-space>
          </a-descriptions-item>
          <a-descriptions-item v-if="report.faceAnalysisResult">
            <a-space wrap>
              <a-space align="start">
                <a-image v-if="report.faceImg" :width="200" :height="200" :src="report.faceImg" :preview="true" />
                <a-card size="small" title="面象分析结果">
                  {{ report.faceAnalysisResult }}
                </a-card>
              </a-space>
            </a-space>
          </a-descriptions-item>
        </a-descriptions>
        <a-card class="card no-bordered background m-t-8px" size="small">
          <a-descriptions :column="1">
            <a-descriptions-item v-if="report.pickedSymptom || report.influenceDegree || report.duration"
                                 label="补充症状"
            >
              <span class="phrase" v-if="report.pickedSymptom">{{ report.pickedSymptom }}</span>
              <span class="phrase" v-if="report.influenceDegree">{{ report.influenceDegree }}</span>
              <span class="phrase" v-if="report.duration">{{ report.duration }}</span>
            </a-descriptions-item>
            <a-descriptions-item v-if="report.algorithmInferSymptom" label="联想症状">
              {{ report.algorithmInferSymptom }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
    </div>
    <ReportIndicatorWidget
      :dataset="indicator" :loading="indicatorLoading"
      :patientId editable
      @destroy="()=>$emit('destroy')"
    />
  </div>
</template>
<style scoped lang="scss">
@import "@/themes/report-card";
</style>