概述

将核心组件抽离到 npm 包(@fs-admin/core) 中，全局配置的优先级低于组件配置。

全局配置

TIP

代码位置

src/main.ts

const app = createApp(App)
app.use(FsAdminCore, GlobalConfig)

interface GlobalConfig {
  upload: uploadConfig // 上传配置
  form?: {
    labelPosition: string // 表单label位置
    labelWidth: string // 表单label宽度
    size: string // 表单尺寸
  }
  formItemSpan?: number // 栅格占位
  queryConfig?: Query // 查询配置
  tableConfig?: TableConfig // 表格配置
  toolbarConfig?: VxeToolbarProps // 工具栏配置
  dialogConfig?: DialogConfig // 弹窗配置
  drawerConfig?: DrawerConfig // 抽屉配置
  paginationConfig?: PaginationProps // 分页配置(Element-plus pagination 配置)
}

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

 // 表格配置
interface TableConfig {
  showOperate?: boolean // 是否显示操作列
  operateBtn?: Partial<ButtonProps> // 操作列按钮配置
  showAdd?: boolean // 是否显示新增按钮
  addText?: string // 新增按钮文字
  showEdit?: boolean // 是否显示编辑按钮
  editText?: string // 编辑按钮文字
  showView?: boolean // 是否显示查看按钮
  viewText?: string // 查看按钮文字
  showBatchDelete?: boolean // 是否显示批量删除按钮
  batchDeleteText?: string // 批量删除按钮文字
  showDelete?: boolean // 是否显示删除按钮
  deleteText?: string // 删除按钮文字
  deleteMessage?: string // 删除提示语
  batchDeleteMessage?: string // 批量删除提示语
  operateWidth?: number // 操作列宽度
  addPermission?: string | string[] // 新增按钮权限
  deletePermission?: string | string[] // 删除按钮权限
  editPermission?: string | string[] // 编辑按钮权限
  empty?: { // 空数据配置
    description?: string
    image?: any // 图片引用 import emptyImage from '@/assets/images/empty.png'，传emptyImage
    imageSize?: number
  }
  columnConfig?: any // 列配置
}

// 弹窗配置
interface DialogConfig = Partial<DialogProps> & {
  confirmText?: string // 确认按钮文字
  cancelText?: string // 取消按钮文字
  btnExchange?: boolean // 按钮顺序是否交换
  btnIcon?: boolean // 按钮图标是否显示
}

// 抽屉配置
interface DrawerConfig = Partial<DrawerProps> & {
  confirmText?: string // 确认按钮文字
  cancelText?: string // 取消按钮文字
  btnExchange?: boolean // 按钮顺序是否交换
  btnIcon?: boolean // 按钮图标是否显示
}