health.admin/src/widgets/PatientFollowUpRecordsWidget.vue

<script setup lang="ts">
import { usePagination } from 'alova/client';
import { getPatientFollowUpEvaluationRecordsMethod } from '@/request/api/report.api';
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table';
import type { DiagnosisReportVO } from '@/model/diagnosis-report.model';
import { VxeUI } from 'vxe-pc-ui';
import type { FollowUpEvaluationReportVO } from '@/model/follow-up-report.model';
import type { EvaluationModel } from '@/model';

const props = defineProps<{ patient: { id: string } }>();

const grid = ref<VxeGridInstance>();
const { data, loading, page, isLastPage, refresh } = usePagination((page, size) => getPatientFollowUpEvaluationRecordsMethod(page, size, { patientId: props.patient.id }), {
  initialData: { total: 0, data: [] },
  initialPage: 0,
  initialPageSize: 100,
  append: true,
  watchingStates: [() => props.patient.id],
}).onSuccess(({ data: { data } }) => {});
const gridOptions = reactive<VxeGridProps<DiagnosisReportVO>>({
  // @ts-ignore
  loading,
  height: 'auto',
  headerAlign: 'center',
  align: 'center',
  columnConfig: {
    resizable: true,
  },
  columns: [
    { field: 'followUp.status.label', title: '随访状态' },
    { field: 'plan.name', title: '随访计划' },
    { field: 'diagnosis.date', title: '就诊时间', width: '150px' },
    { field: 'diagnosis.doctor.name', title: '就诊医生' },
    { field: 'patient.phone', title: '手机号码' },
    { field: 'tags', title: '标签' },
    { field: 'evaluation.status.label', title: '评估状态' },
    { field: 'evaluation.result.label', title: '评估结果' },
    { field: 'evaluation.operator.name', title: '评估人' },
    { title: '操作', align: 'center', width: 120, showOverflow: false, slots: { default: 'cell-operation' } },
  ],
  // @ts-ignore
  data,
  scrollY: {
    gt: 0,
  },
});
const gridEvents: VxeGridListeners = {
  scrollBoundary({ direction, isBottom }) {
    if (isBottom && direction === 'bottom' && !isLastPage.value) page.value++;
  },
};

function openPatientDiagnosisRecordPreview(row: FollowUpEvaluationReportVO, index: number) {
  const component = defineAsyncComponent(() => import('@/components/Evaluation.vue'));
  const id = `assess-modal`;
  const onDestroy = () => { VxeUI.modal.close(id); };
  onDestroy();
  VxeUI.modal.open({
    id, title: `随访评估详情`,
    escClosable: true,
    destroyOnClose: true,
    resize: true,
    width: window.innerWidth * 0.6,
    height: window.innerHeight * 0.8,
    minWidth: Math.min(window.innerWidth * 0.98, 1200),
    slots: {
      default() {
        return h(component, {
          data: row.__origin__! as any,
          onSubmit() {
            refresh(page.value);
            onDestroy();
          },
        });
      },
    },
  });
}
</script>

<template>
  <vxe-grid ref="grid" v-bind="gridOptions" v-on="gridEvents">
    <template #cell-operation="{ row, rowIndex }">
      <vxe-button @click="openPatientDiagnosisRecordPreview(row, rowIndex)">{{ row.evaluation.status.value === '1' ? '查看' : '评估' }}</vxe-button>
    </template>
  </vxe-grid>
</template>

<style scoped lang="scss"></style>