VomeAdmin

主题

vm-crud 总览 ​

vm-crud 是 Admin 标准列表页的根容器，由 vome-core 提供。它负责：

  • 绑定 EPS service（如 service.base.user）
  • 管理列表数据、分页、选中行、回收站模式
  • 协调 search / table / toolbar / upsert / pagination 子组件
  • 权限合并（service._permission + useCrud 配置）

标准页面结构 ​

vue
<template>
  <vm-crud ref="Crud">
    <vm-row>
      <vm-search />
    </vm-row>
    <vm-row>
      <vm-refresh-btn />
      <vm-toolbar />
    </vm-row>
    <vm-row>
      <vm-table ref="Table" />
    </vm-row>
    <vm-row>
      <vm-flex />
      <vm-pagination />
    </vm-row>
    <vm-upsert ref="Upsert" />
  </vm-crud>
</template>

<script setup lang="ts">
const { service } = useVome()

useTable({
  columns: [
    { type: 'selection' },
    { prop: 'name', label: '姓名', sortable: true },
    { type: 'op', buttons: ['edit', 'delete'] },
  ],
})

useSearch({
  items: [
    { prop: 'name', label: '姓名' },
    { prop: 'status', label: '状态', type: 'select', dict: 'base_status' },
  ],
})

useUpsert({
  items: [
    { prop: 'name', label: '姓名', required: true },
    { prop: 'phone', label: '手机号' },
  ],
})

const Crud = useCrud(
  { service: service.base.user },
  (app) => {
    app.refresh()
  },
)
</script>

交互示意 ​

下方为本页演示，直接使用 vome-core 的 vm-crud 全家桶与 Admin 蓝系样式；支持新增弹窗、删除确认、回收站、Excel 导出，数据为本地 mock：

子组件一览 ​

完整列表与 API 见 CRUD 组件索引。框架业务组件（侧栏、部门树等）见 框架组件库。

组件文档职责
vm-searchvm-search筛选表单
vm-tablevm-table数据表格
vm-toolbarvm-toolbar新增、批量删除、导出、导入、回收站
vm-export-btnvm-export-btnExcel 导出（可独立使用）
vm-import-btnvm-import-btnExcel 导入 + 实体模板下载
vm-upsertvm-upsert新增/编辑弹窗
vm-paginationvm-pagination分页
vm-refresh-btnvm-refresh-btn刷新列表
vm-row / vm-flexvm-row-flex行布局与弹性占位

service 绑定 ​

通过 EPS 链式 client 传入 service 对象（类型安全、与业务页一致）：

ts
const { service } = useVome()

const Crud = useCrud(
  { service: service.base.user },
  (app) => {
    app.refresh()
  },
)

全局默认配置 ​

main.ts 中 setCrudConfig 设置表单 label 置顶、搜索自动项、表格右键菜单等全局默认，单页可通过 useTable / useUpsert 覆盖。

复杂页面 ​

当标准布局不够用时（如用户管理的部门树、字典的类型侧栏），在 vm-crud 外包一层布局，或向 vm-toolbar / vm-table 插入 slot。参考 用户管理、字典管理。