Vben5-Table

整体代码

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

import { nextTick, onMounted } from 'vue';

import { DeleteTwoTone, EditTwoTone } from '@ant-design/icons-vue';
import { Button, Image } from 'ant-design-vue';
// import qrcodegen from 'ant-design-vue/es/qrcode/qrcodegen';

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

import dayjs from 'dayjs';

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

import { getAdminList } from './api';

interface RowType {
  id: string;
  nick_name: string;
  email: string;
  avatar: string;
  roles: { name: string }[];
  open_id: string;
  code: string;
  platform_id: string;
  phone: string;
  desc: string;
  created_at: string;
}
// const dTime = ;
const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '输入名称',
      },
      defaultValue: '',
      fieldName: 'nick_name',
      label: '管理员名称',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '输入手pnpm机号码',
      },
      defaultValue: '',
      fieldName: 'phone',
      label: '手机号码',
    },
    {
      component: 'VbenSelect',
      componentProps: {
        allowClear: true,
        filterOption: true,
        showSearch: true,
        options: [
          {
            label: '超管',
            value: '1',
          },
          {
            label: '管理员',
            value: '2',
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'role_id',
      label: '角色',
    },
    {
      component: 'RangePicker',
      componentProps: {
        format: 'YYYY-MM-DD', // 确保格式与你需要的一致
      },
      defaultValue: [dayjs().startOf('month'), dayjs()],
      fieldName: 'search_time',
      label: '时间范围',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: '',
  },
  columns: [
    { title: '', type: 'checkbox', width: 80 },
    { field: 'id', align: 'left', title: 'ID', width: 100 },
    { field: 'nick_name', align: 'left', title: '名称' },
    {
      field: 'avatar',
      align: 'left',
      title: '头像',
      slots: { default: 'avatar' },
      width: 100,
    },
    { field: 'roles.name', title: '角色' },
    { field: 'open_id', title: 'Open ID' },
    { field: 'code', title: '业务推广码' },
    { field: 'platform_id', title: '所属平台' },
    { field: 'phone', title: '手机号码' },
    { field: 'email', title: '邮箱' },
    { field: 'desc', title: '备注' },
    { field: 'created_at', title: '注册时间' },
    { type: 'html', title: '操作', slots: { default: 'action' } },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      // 请求后端接口方法
      query: async ({ page }, formValues) => {
        return await getAdminList({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    custom: true,
  },
};

const [Grid, extendedApi] = useVbenVxeGrid({ formOptions, gridOptions });
onMounted(async () => {
  await nextTick(); // 确保 DOM 已经更新
  if (extendedApi.formApi && extendedApi.formApi.form) {
    extendedApi.formApi.form.setValues({
      role_id: '1',
      // search_time: ['2023-07-01', '2023-07-31'],
    });
  } else {
    console.error('Form API is not available yet.');
  }
});
</script>

<template>
  <div class="vp-raw w-full">
    <Page title="管理员管理">
      <Grid>
        <template #toolbar-tools>
          <Button type="primary">新增管理员</Button>
        </template>
        <template #avatar="{ row }">
          <Image :src="row.avatar" height="30" width="30" />
        </template>
        <template #action>
          <Button>
            <template #icon>
              <EditTwoTone />
            </template>
          </Button>
          <Button>
            <template #icon>
              <DeleteTwoTone icon="fluent:delete-48-regular" />
            </template>
          </Button>
        </template>
      </Grid>
    </Page>
  </div>
</template>

值得注意的是可以写入默认的搜索值

const [Grid, extendedApi] = useVbenVxeGrid({ formOptions, gridOptions });
onMounted(async () => {
  await nextTick(); // 确保 DOM 已经更新
  if (extendedApi.formApi && extendedApi.formApi.form) {
    extendedApi.formApi.form.setValues({
      role_id: '1',
      // search_time: ['2023-07-01', '2023-07-31'],
    });
  } else {
    console.error('Form API is not available yet.');
  }
});