proCardList 卡片列表

重磅封装的卡片列表，集成 CRUD 基础功能，内部集成了 ElCard + DialogForm

属性

interface Props {
  crud: ICRUD
  pageSize?: number
  formConfig: BasicForm
  dialogConfig?: DialogProps
  height?: string
  cardHeight?: string
  showAdd?: boolean
  span?: number
  paginationConfig?: PaginationProps
}

参数	说明	类型	默认值	可选值
crud（必传）	增删改查	ICRUD	-
pageSize	分页大小	Number	12
formConfig（必传）	表单配置	BasicForm
dialogConfig	弹窗配置，参考 element-plus dialog 配置	Object
height	卡片列表高度	String
cardHeight	卡片项高度	String
showAdd	是否显示新增	Boolean	true
span	栅格占据的列数	Number	4
paginationConfig	分页配置	PaginationProps
queryConfig	查询配置	Query	{maxShow: 3,col: {xs: 24,sm: 12,md: 8,lg: 6},fold: true,fluid:true}

ICRUD

interface ICRUD {
  create: (data: { [key: string]: any }) => Promise<any> // 创建
  update: (data: { [key: string]: any }) => Promise<any> // 更新
  delete: ({ id }: { id: string }) => Promise<any> // 删除
  deleteBatch?: ({ ids }: { ids: string }) => Promise<any> // 批量删除
  getList: (data: { pageSize: number; pageNo: number; [key: string]: any }) // 获取列表
  getRecord?: ({ id }: { id: string }) => Promise<any> // 获取单个记录
}

type Form = {
  props?: Partial<FormProps> // 表单属性
  route?: any // 路由(默认是弹窗方式，如果要打开一个新页面，可以配置此项)
  span?: number // 栅格占位
  disabled?: boolean // 是否禁用
}

BasicForm

type BasicForm = Form & {
  formItems: BasicFormItem[]
}
type BasicFormItem = {
  label: string // 表单标签
  value: any // 表单值
  name: string // 接口需要的字段名
  type: string // 表单类型
  placeholder?: string
  children?: Array<BasicFormItem>
  options?: Array<any> // 下拉框选项
  search?: boolean // 是否出现在搜索框
  required?: boolean // 是否必填
  rules?: FormItemRule | FormItemRule[] // 表单验证规则
  span?: number // 栅格占位
  props?: object // 组件属性
  events?: object // 组件事件
  request?: Function // 异步请求数据
  slots?: Array<FormSlot> // 自定义插槽
  notFormItem?: boolean // 是否为表单项
  hidden?: boolean // 是否隐藏
  extra?: any // 额外信息
  formItemProps?: object // formItem属性
  formItemSlots?: Array<FormSlot> // formItem插槽
}

Query

interface Query {
  maxShow?: number // 最多显示查询条件数量
  col?: ColProps // 列配置
  fold: boolean // 是否开启展开收起功能
  searchText?: string // 查询按钮文字
  fluid?: boolean // 是否开启栅格布局
}

方法

方法名	说明	类型	参数
handleCreate	表单(from)新增	Function
handleUpdate	表单(from)编辑	Function	row
handleDelete	表格(table)删除	Function	id:string、number
refresh	表格(table)刷新	Function

事件

事件名	说明	类型	参数
click-create	点击新增按钮触发	Function
click-edit	点击新增编辑触发	Function	row

插槽

插槽名	说明
query	自定义查询内容
header	自定义头部内容
-	自定义默认内容