完整示例

包含权限控制、字典、文件上传等功能的完整示例。

代码示例

<script setup lang="ts" name="UserManagement">
import { ref } from "vue";
import {
  useState,
  PageTemplate,
  Table,
  defineSearchConfig,
  defineFormConfig,
  defineColumnsConfig,
  defineApiConfig,
  definePermissions,
} from "vue-admin-kit";
import type { PageTemplateExposed } from "vue-admin-kit";
import { listUser, addUser, updateUser, deleteUser, getUser } from "@/api/user";

const pageTemplateRef = ref<PageTemplateExposed>();

// 搜索配置
const searchConfig = defineSearchConfig([
  { type: "input", prop: "userName", label: "用户名" },
  { type: "input", prop: "phone", label: "手机号" },
  {
    type: "select",
    prop: "status",
    label: "状态",
    dictType: "sys_normal_disable",
  },
  {
    type: "date",
    prop: "createTime",
    label: "创建时间",
    dateType: "daterange",
  },
]);

// 表单配置
const formConfig = defineFormConfig([
  { type: "input", prop: "userName", label: "用户名", required: true },
  { type: "input", prop: "nickName", label: "昵称", required: true },
  {
    type: "input",
    prop: "phone",
    label: "手机号",
    rules: [
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号",
        trigger: "blur",
      },
    ],
  },
  {
    type: "input",
    prop: "email",
    label: "邮箱",
    rules: [{ type: "email", message: "请输入正确的邮箱", trigger: "blur" }],
  },
  { type: "radio", prop: "sex", label: "性别", dictType: "sys_user_sex" },
  {
    type: "radio",
    prop: "status",
    label: "状态",
    dictType: "sys_normal_disable",
  },
  { type: "textarea", prop: "remark", label: "备注", span: 24 },
  {
    type: "upload",
    prop: "avatar",
    label: "头像",
    uploadConfigList: [
      {
        prop: "avatarFile",
        label: "上传头像",
        bizType: "avatar",
        limit: 1,
        accept: ".jpg,.jpeg,.png",
      },
    ],
  },
]);

// 列配置
const columnsConfig = defineColumnsConfig([
  { type: "checkbox", width: 50 },
  { type: "seq", title: "序号", width: 60 },
  { field: "userName", title: "用户名", minWidth: 100 },
  { field: "nickName", title: "昵称", minWidth: 100 },
  { field: "phone", title: "手机号", width: 120 },
  { field: "email", title: "邮箱", minWidth: 150 },
  {
    field: "sex",
    title: "性别",
    dictType: "sys_user_sex",
    width: 80,
  },
  {
    field: "status",
    title: "状态",
    dictType: "sys_normal_disable",
    displayType: "tag",
    width: 80,
  },
  { field: "createTime", title: "创建时间", width: 160 },
]);

// API 配置
const api = defineApiConfig({
  list: listUser,
  add: addUser,
  edit: updateUser,
  delete: deleteUser,
  detail: getUser,
});

// 权限配置
const permissions = definePermissions({
  add: ["system:user:add"],
  edit: ["system:user:edit"],
  delete: ["system:user:remove"],
  export: ["system:user:export"],
});

useState({
  api,
  searchConfig,
  formConfig,
  columnsConfig,
  tableOptions: {
    tableOperationConfig: [
      {
        title: "新增",
        icon: "Plus",
        type: "primary",
        hasPermi: permissions.add,
        onClick: () => pageTemplateRef.value?.handleAdd(),
      },
      {
        title: "导出",
        icon: "Download",
        hasPermi: permissions.export,
        onClick: () =>
          pageTemplateRef.value?.downloadFile(exportUser, "用户数据"),
      },
    ],
    operateColumns: [
      {
        title: "详情",
        type: "info",
        link: true,
        onClick: (row) => pageTemplateRef.value?.handleDetail(row),
      },
      {
        title: "编辑",
        type: "primary",
        link: true,
        hasPermi: permissions.edit,
        onClick: (row) => pageTemplateRef.value?.handleEdit(row),
      },
      {
        title: "删除",
        type: "danger",
        link: true,
        hasPermi: permissions.delete,
        onClick: (row) => pageTemplateRef.value?.handleDelete(row),
      },
    ],
  },
});
</script>

<template>
  <PageTemplate ref="pageTemplateRef">
    <template #table>
      <Table />
    </template>
  </PageTemplate>
</template>

功能说明

1. 搜索功能：支持文本、下拉、日期范围搜索
2. 表单验证：手机号、邮箱格式验证
3. 字典集成：性别、状态使用字典
4. 文件上传：头像上传
5. 权限控制：按钮级别权限
6. 导出功能：数据导出