useCrud

应用于 AvueCrud 组件的快速增删改查

基础用法

View Source

<script setup lang="ts">
import { useCrud } from '@yusui/composables'

function getList() {
  return Promise.resolve({
    data: {
      rows: [{ name: 'demo' }],
      count: 1,
    },
  })
}
function create() {
  return Promise.resolve()
}
function update() {
  return Promise.resolve()
}
function remove() {
  return Promise.resolve()
}

const { bindVal, crudRef, getDataList } = useCrud({
  crudOption: {
    getList,
    create,
    update,
    remove,
    dataPath: 'res.data.rows',
    totalPath: 'res.data.count',
  },
  tableOption: {
    addBtn: false,
    column: [{ label: '名称', prop: 'name' }],
  },
})
getDataList()
</script>

<template>
  <avue-crud v-bind="bindVal">
    <template #menu-left>
      <el-button type="primary" text icon="el-icon-plus" @click="crudRef?.rowAdd()">
        新增
      </el-button>
    </template>
  </avue-crud>
</template>

UseCrudOptions / CrudState

名称	类型	默认值	说明
crudOption	Object		增删改查配置,详细说明
pageOption	Object		分页配置,详细说明
sortOption	Object	{}	排序配置,可选{['descs'|'ascs']:[field]}
tableLoading	Boolean	false	数据加载状态
tableOption	Object	{}	表格配置项
tableData	Array	[]	数据列表
dataSelections	Array	[]	已选择数据列表
searchForm	Object	{}	搜索条件
queryForm	Object	{}	固定查询条件,不会被清空重置
formData	Object	{}	表单数据
formType	String		弹窗表单类型
defaults	Object	{}	修改配置
mockData	Array	[]	模拟数据
mockCache	String	""	将假数据存在缓存中使用的 key
getDataList	Function		获取数据列表方法,传入则覆盖内部实现
handleSave	Function		数据添加方法,传入则覆盖内部实现
handleUpdate	Function		数据更新方法,传入则覆盖内部实现
handleDel	Function		删除行方法,传入则覆盖内部实现
batchDel	Function		批量删除方法,传入则覆盖内部实现
searchChange	Function		搜索回调,传入则覆盖内部实现
searchReset	Function		搜索重置回调,传入则覆盖内部实现
selectionChange	Function		多选回调,传入则覆盖内部实现
pageSizeChange	Function		切换每页条数回调,传入则覆盖内部实现
pageCurrentChange	Function		切换当前页回调,传入则覆盖内部实现
sortChange	Function		切换排序回调,传入则覆盖内部实现
beforeOpen	Function		打开表单弹窗前,传入则覆盖内部实现
beforeClose	Function		关闭表单弹窗前,传入则覆盖内部实现

CrudOption

名称	类型	默认值	说明
rowKey	String	tableOption.rowKey??"id"	行键值(id/_id/uuid/...)
getList	Function	获取模拟数据	获取数据列表方法
create	Function	新增模拟数据	添加数据方法
update	Function	更新模拟数据	编辑数据方法
remove	Function	删除模拟数据	删除单条数据方法
dataPath	String	"res.data.records"	接口返回数据的属性路径
totalPath	String	"res.data.total"	接口返回总数的属性路径
currKey	String	"current"	当前页 key
sizeKey	String	"size"	每页条数 key
isPage	Boolean	true	是否携带分页参数
isSort	Boolean	true	是否携带排序参数
delConfirm	Boolean	true	删除前是否提示确认
clearSelection	Boolean	true	获取数据后是否清除选择
saveSuccessMsg	String	"保存成功"	新增成功提示
updateSuccessMsg	String	"保存成功"	编辑成功提示
delSuccessMsg	String	"删除成功"	删除成功提示

PageOption

名称	类型	默认值	说明
total	Number	0	总条数
currentPage	Number	1	当前页数
pageSize	Number	10	每页显示条数

Returns

名称	类型	使用	说明
crudRef	Ref<AvueCrudInstance>	crudRef.value.rowEdit(row)	crudRef.value 等同于 vm.$refs.crudRef
crudState	Reactive<CrudState>	crudState.tableData=[]	crudState
crudStateRefs	ToRefs<CrudState>	const {formData} = crudStateRefs	toRefs(crudState)
bindVal	Computed	<avue-crud v-bind="bindVal">	使用 v-bind 绑定的值
getDataList	Function	getDataList()	获取数据列表方法,可被 options 中同名函数覆盖
handleSave	Function	handleSave(row)	数据添加方法,可被 options 中同名函数覆盖
handleUpdate	Function	handleUpdate(row)	数据更新方法,可被 options 中同名函数覆盖
handleDel	Function	handleDel(row)	删除行方法,可被 options 中同名函数覆盖
batchDel	Function	handleDel(rows)	批量删除方法,可被 options 中同名函数覆盖
beforeGetList	Function	beforeGetList((params)=>{})	获取数据前
afterGetList	Function	afterGetList((res)=>{})	获取数据后
beforeSave	Function	beforeSave((row)=>{})	新增数据前，可对 row 内的数据进行修改
afterSave	Function	afterSave((res)=>{})	新增数据后
beforeUpdate	Function	beforeUpdate((row)=>{})	更新数据前，可对 row 内的数据进行修改
afterUpdate	Function	afterUpdate((res)=>{})	更新数据后
beforeSubmit	Function	beforeSubmit((row)=>{})	新增/更新数据前，可对 row 内的数据进行修改
afterSubmit	Function	afterSubmit((res)=>{})	新增/更新数据后
beforeDel	Function	beforeDel((row)=>{})	删除数据前
afterDel	Function	afterDel((res)=>{})	删除数据后
beforeBatchDel	Function	beforeBatchDel((selections)=>{})	批量删除前
afterBatchDel	Function	afterBatchDel((res)=>{})	批量删除后
beforeSearch	Function	beforeSearch((isReset)=>{})	搜索前(是否重置)
afterSearch	Function	afterSearch((isReset)=>{})	搜索后(是否重置)
beforeOpen	Function	beforeOpen((type)=>{})	打开表单弹窗前(弹窗表单类型)
afterOpen	Function	afterOpen((type)=>{})	打开表单弹窗后(弹窗表单类型)
beforeClose	Function	beforeClose((type)=>{})	关闭表单弹窗前(弹窗表单类型)
afterClose	Function	afterClose((type)=>{})	关闭表单弹窗后(弹窗表单类型)

Type Definitions

import type { AvueCrudDefaults, AvueCrudOption, AvueCrudProps, FormType, PageOption } from '@smallwei/avue'
import type { EmitterAsync } from '@yusui/utils'

export interface CrudOption<T, P> {
  /** 行键值(id/_id/uuid/...) */
  rowKey: string
  /** 获取数据列表方法 */
  getList: (() => Promise<any>) | ((params?: P) => Promise<any>) | ((params: P) => Promise<any>)
  /** 添加数据方法 */
  create: (form: T | any) => Promise<any>
  /** 编辑数据方法 */
  update: (form: T | any) => Promise<any>
  /** 删除单条数据方法 */
  remove: (id: any) => Promise<any>
  /** 接口返回数据的路径 */
  dataPath: string
  /** 接口返回总数的路径 */
  totalPath: string
  /** 当前页key */
  currKey: string
  /** 每页条数key */
  sizeKey: string
  /** 是否携带分页参数 */
  isPage: boolean
  /** 是否携带排序参数 */
  isSort: boolean
  /** 删除前是否提示确认 */
  delConfirm: boolean
  /** 获取数据后是否清除选择 */
  clearSelection: boolean
  /** 新增成功提示 */
  saveSuccessMsg: string
  /** 编辑成功提示 */
  updateSuccessMsg: string
  /** 删除成功提示 */
  delSuccessMsg: string
}

export interface SortOption {
  ascs?: string
  descs?: string
  order?: 'asc' | 'desc'
  prop?: string
}

export interface CrudState<T, P> {
  crudOption: CrudOption<T, P>
  pageOption: Required<PageOption>
  sortOption: SortOption
  tableLoading: boolean
  tableOption: AvueCrudOption<T>
  tableData: T[]
  dataSelections: T[]
  searchForm: P
  queryForm: any
  formData: T
  formType: FormType
  defaults: AvueCrudDefaults<T>
  mockData: T[]
  mockCache: string
}

export type Emitter<T, P> = EmitterAsync<{
  beforeGetList: P
  afterGetList: any
  beforeSave: T
  afterSave: any
  beforeUpdate: T
  afterUpdate: any
  beforeSubmit: T
  afterSubmit: any
  beforeDel: T
  afterDel: any
  beforeBatchDel: T[]
  afterBatchDel: any
  beforeSearch: P
  afterSearch: P
  beforeSearchReset: P
  afterSearchReset: P
  beforeOpen: FormType
  afterOpen: FormType
  beforeClose: FormType
  afterClose: FormType
}>

export interface UseCrudStateOptions<T, P> extends Partial<Omit<CrudState<T, P>, 'crudOption' | 'pageOption'>> {
  crudOption?: Partial<CrudOption<T, P>>
  pageOption?: PageOption
}

export interface UseCrudMethodsOptions<T, P> {
  getDataList?: () => any
  handleSave?: AvueCrudProps<T>['onRowSave']
  handleUpdate?: AvueCrudProps<T>['onRowUpdate']
  handleDel?: AvueCrudProps<T>['onRowDel']
  batchDel?: () => any
  filterRow?: (row: T) => T
  filterParams?: (params: P) => P
  searchChange?: (form: P, done: () => void) => any
  searchReset?: () => any
  selectionChange?: AvueCrudProps<T>['onSelectionChange']
  pageSizeChange?: AvueCrudProps<T>['onSizeChange']
  pageCurrentChange?: AvueCrudProps<T>['onCurrentChange']
  sortChange?: AvueCrudProps<T>['onSortChange']
  beforeOpen?: AvueCrudProps<T>['before-open']
  beforeClose?: AvueCrudProps<T>['before-close']
}

export type UseCrudOptions<T, P> = UseCrudStateOptions<T, P> & UseCrudMethodsOptions<T, P>