admin/apps/smart-pharmacy/src/views/patient-evaluation/efficacy/list.vue

<script lang="ts" setup>
import type {
  OnActionClickParams,
  VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { PatientEvaluationModel } from '#/api';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  exportEfficacyEvaluationsMethod,
  listEfficacyEvaluationsMethod,
} from '#/api';

import {
  useEfficacySearchFormSchema,
  useEfficacyTableColumns,
} from './data';
import Detail from './modules/detail.vue';

const [DetailModal, detailModalApi] = useVbenModal({
  connectedComponent: Detail,
  destroyOnClose: true,
});

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useEfficacySearchFormSchema(),
    submitOnChange: false,
    wrapperClass: 'efficacy-search-form',
  },
  gridOptions: {
    columns: useEfficacyTableColumns(onActionClick),
    height: 'auto',
    keepSource: true,
    pagerConfig: {
      pageSize: 5,
      layouts: ['PrevPage', 'Jump', 'NextPage'],
    },
    proxyConfig: {
      ajax: {
        query({ page }, formValues) {
          return listEfficacyEvaluationsMethod(
            page.currentPage,
            page.pageSize,
            formValues,
          );
        },
      },
    },
    rowConfig: {
      keyField: 'id',
    },
    stripe: true,
  } as VxeTableGridOptions<PatientEvaluationModel.EfficacyEvaluation>,
});

function onActionClick(
  e: OnActionClickParams<PatientEvaluationModel.EfficacyEvaluation>,
) {
  switch (e.code) {
    case 'view': {
      onViewHandle(e.row);
      break;
    }
  }
}

function onViewHandle(row: PatientEvaluationModel.EfficacyEvaluation) {
  detailModalApi.setData(row).open();
}

async function onExport() {
  const formValues = await gridApi.formApi.getValues();
  try {
    await exportEfficacyEvaluationsMethod(formValues);
    message.success('导出成功');
  } catch (error: any) {
    message.error(error.message || '导出失败');
  }
}
</script>
<template>
  <Page auto-content-height class="efficacy-page">
    <DetailModal />
    <Grid>
      <template #toolbar-tools>
        <Button type="link" @click="onExport">导出</Button>
      </template>
    </Grid>
  </Page>
</template>
<style scoped>
.efficacy-page :deep(.efficacy-search-form) {
  margin-bottom: 0;
}
</style>