health.admin/src/widgets/PatientCareRecordsWidget.vue

<script setup lang="ts">
import { usePagination } from 'alova/client';
import { getConditioningRecordMethod } from '@/request/api/care.api';
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table';
import { VxeUI } from 'vxe-pc-ui';
import type { FollowUpEvaluationReportVO } from '@/model/follow-up-report.model';
import type { ConditioningRecordListModel } from '@/model/care.model';
import ServicePackageDetail from '@/service/ServicePackageDetail.vue';
import CareProcess from '@/service/CareProgress.vue';
const props = defineProps<{ patient: { id: string } }>();

const grid = ref<VxeGridInstance>();
const { data, loading, page, isLastPage, refresh } = usePagination((page, size) => getConditioningRecordMethod(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<ConditioningRecordListModel>>({
  // @ts-ignore
  loading,
  height: 'auto',
  headerAlign: 'center',
  align: 'center',
  rowConfig: {
    isHover: true,
    isCurrent: true,
  },
  columnConfig: {
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 70, fixed: 'left' },
    { field: 'patientName', title: '姓名' },
    { field: 'conditioningWrapName', title: '服务包名称' },
    { field: 'diagnosis', title: '疾病名称' },
    { field: 'symptom', title: '证型' },
    { field: 'constitutionGroupName', title: '体质' },
    { field: 'createBy', title: '开具医生' },
    { field: 'estimatedStartDate', title: '开始调养日期' },
    { field: 'progress', title: '调理状态', slots: { default: 'patients' } },
    {
      field: 'action',
      title: '操作',
      align: 'center',
      width: 120,
      cellRender: {
        name: 'VxeButtonGroup',
        props: {
          mode: 'text',
        },
        options: [
          { content: '详情', status: 'primary', name: 'serviceDetail' },
          { content: '调养过程', status: 'primary', name: 'conditioningProcess' },
        ],
        events: {
          click({ row, rowIndex }: { row: ConditioningRecordListModel; rowIndex: number }, { name }: { name: string }) {
            let method;
            if (name === 'serviceDetail') {
              method = serviceDetail;
            } else if (name === 'conditioningProcess') {
              method = conditioningProcess;
            }
            method?.(row, rowIndex);
          },
        },
      },
    },
  ],
  // @ts-ignore
  data,
  scrollY: {
    gt: 0,
  },
});
// 调养过程
function conditioningProcess(model?: ConditioningRecordListModel) {
  VxeUI.modal.open({
    title: model?.id ? `调养过程` : `新增调养过程`,
    height: window.innerHeight,
    width: window.innerWidth,
    fullscreen: true,
    escClosable: true,
    destroyOnClose: true,
    id: `conditioning-process-modal`,
    remember: true,
    storage: true,
    slots: {
      default() {
        return h(CareProcess, <any>{
          data: model,
          onSubmit(data: ConditioningRecordListModel) {
            refresh(page.value);
            VxeUI.modal.close(`conditioning-process-modal`);
          },
        });
      },
    },
  });
}
// 调养记录详情
function serviceDetail(model?: ConditioningRecordListModel, index?: number) {
  const types = 'record';
  VxeUI.modal.open({
    id: 'servicePackageDetail-modal',
    title: '服务包详情',
    height: window.innerHeight,
    width: window.innerWidth,
    fullscreen: true,
    escClosable: true,
    destroyOnClose: true,
    slots: {
      default() {
        return h(ServicePackageDetail, <any>{
          data: {
            ...model,
            types,
          },
          onVoidSubmit(data: ConditioningRecordListModel) {
            console.log(data, '作废之后刷新页面');
            refresh(page.value);
          },
        });
      },
    },
  });
}

const gridEvents: VxeGridListeners = {
  scrollBoundary({ direction, isBottom }) {
    if (isBottom && direction === 'bottom' && !isLastPage.value) page.value++;
  },
};
</script>

<template>
  <vxe-grid ref="grid" v-bind="gridOptions" v-on="gridEvents">
    <template #patients="{ row }">
      <div>
        {{
          row.progress === '0'
            ? '待付款'
            : row.progress === '1'
              ? '已作废'
              : row.progress === '2'
                ? '用户取消'
                : row.progress === '3'
                  ? '未开始'
                  : row.progress === '4'
                    ? '调理中'
                    : row.progress === '5'
                      ? '已完结'
                      : ''
        }}
      </div>
    </template>
  </vxe-grid>
</template>

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