view file code template

[wu-clan]

When writing the view file, use the following uniform template.

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

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    collapsed: true,
    showCollapseButton: true,
    submitButtonOptions: {
      content: $t('page.form.query'),
    },
    schema: [
      {
        component: 'Input',
        componentProps: {
          placeholder: 'Please enter category',
        },
        fieldName: 'string',
        label: 'String',
      },
      {
        component: 'Select',
        componentProps: {
          allowClear: true,
          options: [
            {
              label: 'Color1',
              value: '1',
            },
            {
              label: 'Color2',
              value: '2',
            },
          ],
          placeholder: $t('page.form.select'),
        },
        fieldName: 'status',
        label: $t('page.form.status'),
      },
    ],
  },
  gridOptions: {
    rowConfig: {
      keyField: 'id',
    },
    checkboxConfig: {
      highlight: true,
    },
    exportConfig: {},
    printConfig: {},
    toolbarConfig: {
      export: true,
      print: true,
      refresh: { code: 'query' },
      custom: true,
      zoom: true,
    },
    columns: [
      { field: 'checkbox', type: 'checkbox', align: 'left', width: 50 },
      {
        field: 'seq',
        title: $t('page.table.id'),
        type: 'seq',
        width: 50,
      },
      { field: 'string', title: 'tring' }, // 更多表列配置
      { field: 'remark', title: $t('page.table.mark'), align: 'left' },
      {
        field: 'created_time',
        title: $t('page.table.created_time'),
        width: 168,
      },
      {
        field: 'operation',
        title: $t('page.table.operation'),
        align: 'center',
        fixed: 'right',
        width: 130,
      },
    ],
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getXxxApi({ // 分页 API
            page: page.currentPage,
            size: page.pageSize,
            ...formValues,
          });
        },
      },
    },
  } as VxeTableGridOptions<XxxResult>, // 表格数据接口（interface）
});

function onRefresh() {
  gridApi.query();
}
</script>

<template>
  <Page>
    <Grid />
  </Page>
</template>