fs-admin

Appearance

proTable 数据表格 ​

重磅封装的数据表格，集成 CRUD 基础功能，内部集成了 vxetable + DialogForm + ProSearch 组件

基础用法 ​

vue
<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'
import {
  createUser,
  updateUser,
  getUserList,
  delUser,
  getDetail,
} from '@/api/user'

const CRUD: ICRUD = {
  create(data) {
    // data： 表单数据
    return createUser(data)
  },
  update(data) {
    // data： 表单数据
    return updateUser(data)
  },
  getList(data) {
    // data： 查询数据和分页数据
    return getUserList(data)
  },
  delete(data) {
    // data： {id：id}
    return delUser(id: data.id)
  },
  // 非必传
  deleteBatch(data) {
     // data： {ids：逗号隔开的id字符串}
    return delUser({ ids: data.ids })
  },
  // 非必传
  getRecord(data) {
     // data： {id：id}
    return getDetail({ id: data.id })
  },
}

const formConfig = reactive<BasicForm>({
  formItems: [
    {
      label: '用户名',
      value: '',
      name: 'name',
      type: 'input', // type支持element-plus组件(不需要带el-)、Core核心组件及自定义组件
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      search: true,
    },
  ],
})
</script>

<template>
  <pro-table :crud="CRUD" :formConfig="formConfig">
    <vxe-column field="name" title="用户名"></vxe-column>
    <vxe-column field="phone" title="手机号"></vxe-column>
  </pro-table>
</template>

自定义工具栏 ​

完全自定义 ​

init
vue
<template>
  <pro-table>
    ...
    <template #header>
      <el-button type="primary">自定义工具栏</el-button>
    </template>
  </pro-table>
</template>

新增删除按钮之后自定义 ​

init
vue
<template>
  <pro-table>
    ...
    <template #toolbar>
      <el-button type="primary">自定义工具栏</el-button>
    </template>
  </pro-table>
</template>

不展示工具栏 ​

vue
<template>
  <pro-table :showToolbar="false"> ... </pro-table>
</template>

自定义操作列 ​

不显示编辑按钮 ​

init
vue
<template>
  <pro-table :tableConfig="{ showEdit: false }"> ... </pro-table>
</template>

不显示删除按钮 ​

init
vue
<template>
  <pro-table :tableConfig="{ showDelete: false }"> ... </pro-table>
</template>

显示查看按钮 ​

init
vue
<template>
  <pro-table :tableConfig="{ showView: true, operateWidth: '200px' }">
    ...
  </pro-table>
</template>

编辑按钮之前或删除按钮之后自定义操作 ​

init
vue
<template>
  <pro-table :tableConfig="{ operateWidth: '300px' }">
    ...
    <template #operateBefore>
      <el-button type="success" size="small">自定义1</el-button>
    </template>
    <template #operateAfter>
      <el-button type="success" size="small">自定义2</el-button>
    </template>
  </pro-table>
</template>

完全自定义 ​

init
vue
<template>
  <pro-table :tableConfig="{ showOperate: false }">
    ...
    <vxe-column fixed="right" title="操作">
      <el-button type="primary" size="small">自定义</el-button>
    </vxe-column>
  </pro-table>
</template>

手动刷新列表 ​

vue
<script setup lang="ts">
const tableRef = ref(null)
tableRef.value?.refresh()
</script>

<template>
  <pro-table ref="tableRef"> ... </pro-table>
</template>

表单模式 ​

以侧边栏方式打开表单 ​

init
vue
<template>
  <pro-table formMode="drawer"> ... </pro-table>
</template>

按钮权限 ​

TIP

需要将用户的权限列表存到 localStorage permissionList 字段中，在src/store/user.ts中配置permissionList即可

vue
<template>
  <pro-table
    :tableConfig="{
      addPermission: 'add',
      deletePermission: 'delete',
      editPermission: 'edit',
    }"
  >
    ...
  </pro-table>
</template>

格式化内容 ​

vxetable 文档

属性 ​

TIP

vxetable 的属性可以直接传，其他属性配置如下：

参数说明类型默认值可选值
crud（必传）增删改查ICRUD-
selection显示多选Booleantrue
formConfig（必传）表单配置BasicForm
dialogConfig弹窗配置Dialog
tableConfig表格配置CustomTable
toolbarConfig工具栏配置VxeToolbarProps
queryConfig查询配置Query{maxShow: 3,col: {xs: 24,sm: 12,md: 8,lg: 6},fold: true,fluid:true}
showToolbar显示工具栏Booleantrue
height表格高度String
formMode表单模式Stringdialogdialog drawer
beforeCreate表单创建前的回调函数,若返回 false 或者返回 Promise 且被 reject，则停止创建Function 参数为 formData
beforeQuery表单查询前的回调函数,若返回 false 或者返回 Promise 且被 reject，则停止查询Function 参数为 queryData
paginationConfig分页配置PaginationProps

ICRUD ​

ts
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> // 批量删除D
  getList: (data: { pageSize: number; pageNo: number; [key: string]: any }) // 获取列表
  getRecord?: ({ id }: { id: string }) => Promise<any> // 获取单个记录
}

BasicForm ​

ts
type BasicForm = {
  props?: Partial<FormProps> // 表单属性（element-plus的form属性）
  route?: any // 路由(默认是弹窗方式，如果要打开一个新页面，可以配置此项)
  span?: number // 栅格占位
  disabled?: boolean // 是否禁用
  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插槽
}
type FormSlot = {
  name: string // 插槽名称
  alias: string // 插槽别名
}

CustomTable ​

ts
interface CustomTable {
  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 // 列配置
}

Query ​

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

ColProps

方法 ​

方法名说明参数
handleCreate表单(from)新增
handleUpdate表单(from)编辑row
handleDelete表格(table)删除id
refresh表格(table)刷新

事件 ​

事件名说明参数
click-create点击新增按钮触发
click-edit点击编辑按钮触发row
click-view点击查看按钮触发row
click-reset点击重置按钮触发query

插槽 ​

插槽名说明
query自定义查询内容
header自定义头部内容（工具栏之前）
toolbar工具栏之后
-自定义默认内容
operateBefore自定义表格操作(编辑按钮)之前内容
operateAfter自定义表格操作(删除按钮)之后内容

Exposes ​

名称说明类型参数
handleCreate表单(from)新增Function
handleUpdate表单(from)编辑Functionrow
handleView表单(from)查看Functionrow
handleDelete表格(table)删除Functionid
refresh表格(table)刷新Function
handleQuery表格(table)查询Function
handleReset表格(table)重置Function
getForm获取表单实例Function
formData表单数据object
queryRef查询实例object
table表格实例object