admin/apps/smart-pharmacy/src/views/patient-evaluation/satisfaction/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 {
  exportSatisfactionEvaluationsMethod,
  listSatisfactionEvaluationsMethod,
} from '#/api';
import {
  getLogisticsCompanyLabelMap,
  resolveLogisticsCompanyLabel,
} from '#/api/model/process-node-dict';

import {
  useSatisfactionSearchFormSchema,
  useSatisfactionTableColumns,
} from './data';
import Detail from './modules/detail.vue';

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

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useSatisfactionSearchFormSchema(),
    submitOnChange: false,
    wrapperClass: 'satisfaction-search-form',
  },
  gridOptions: {
    columns: useSatisfactionTableColumns(onActionClick),
    height: 'auto',
    keepSource: true,
    pagerConfig: {
      pageSize: 5,
      layouts: ['PrevPage', 'Jump', 'NextPage'],
    },
    proxyConfig: {
      ajax: {
        async query({ page }, formValues) {
          const [result, logisticsCompanyMap] = await Promise.all([
            listSatisfactionEvaluationsMethod(
              page.currentPage,
              page.pageSize,
              formValues,
            ),
            getLogisticsCompanyLabelMap(),
          ]);
          return {
            ...result,
            items: result.items.map((item) => ({
              ...item,
              logisticsCompany: resolveLogisticsCompanyLabel(
                item.logisticsCompany,
                logisticsCompanyMap,
              ),
            })),
          };
        },
      },
    },
    rowConfig: {
      keyField: 'id',
    },
    stripe: true,
  } as VxeTableGridOptions<PatientEvaluationModel.SatisfactionEvaluation>,
});

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

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

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