@ttkj/avue 2.10.11 → 2.10.13

package/types/crud/index.d.ts

@@ -0,0 +1,264 @@
+import { VNode } from 'vue';
+import { ElPagination } from 'element-ui/types/pagination';
+import { cellCallbackParams, rowCallbackParams, SummaryMethodParams } from 'element-ui/types/table';
+import { ElForm } from 'element-ui/types/form';
+import { ElTable } from 'element-ui/types/element-ui';
+import { ElUploadInternalRawFile } from 'element-ui/types/upload';
+
+import { AvueComponent, Obj } from '../global';
+import { CrudOption } from './option';
+import { AvueCrudColumn } from './column';
+import { AvueCrudHeaderSearch } from './refs/header-search';
+import { AvueCrudDialogForm } from './refs/dialog-form';
+
+/** 表单打开类型 */
+export type AvueCrudFormMode = 'add' | 'edit' | 'view';
+
+/** 权限类型 */
+export type AvueCrudPermission =
+  | 'addBtn'
+  | 'addRowBtn'
+  | 'excelBtn'
+  | 'printBtn'
+  | 'refreshBtn'
+  | 'columnBtn'
+  | 'filterBtn'
+  | 'menu'
+  | 'viewBtn'
+  | 'editBtn'
+  | 'saveBtn'
+  | 'copyBtn'
+  | 'delBtn'
+  | 'selectClearBtn';
+
+/** 表格Refs */
+export interface AvueCrudRefs<T = Obj> {
+  /**
+   * 搜索组件
+   * @description 包含了search、prop+'SearchLabel'、prop+'Search'、searchMenu插槽
+   */
+  headerSearch: AvueCrudHeaderSearch;
+  /**
+   * 顶部菜单组件
+   * @description 包含了menuLeft和menuRight插槽
+   */
+  headerMenu: VNode;
+  /**
+   * 表格表单组件
+   * @description 用于行编辑时表单校验
+   */
+  cellForm: ElForm;
+  /**
+   * 默认列组件
+   * @description 表格的默认列(序号、折叠面板、选择框)，包含了expand插槽
+   */
+  columnDefault: VNode;
+  /** 表格组件 */
+  table: ElTable;
+  /** 分页组件 */
+  tablePage: ElPagination;
+  /** 内置弹窗组件 */
+  dialogForm: AvueCrudDialogForm<T>;
+  /** 列显隐组件 */
+  dialogColumn: VNode;
+  /** 导出数据组件 */
+  dialogExcel: VNode;
+  /** 过滤器组件 */
+  dialogFilter: VNode;
+}
+
+/** 表格组件 */
+export declare class AvueCrud<T = Obj, S = Partial<T>> extends AvueComponent {
+  // ========== 属性 ==========
+  /**
+   * 打开前的回调，会暂停Dialog的打开
+   * @param done 用于关闭Dialog
+   * @param type 当前窗口的类型
+   */
+  beforeOpen: (done: Function, type: string) => void;
+  /**
+   * 关闭前的回调，会暂停Dialog的关闭
+   * @param done 用于关闭Dialog
+   * @param type 当前窗口的类型
+   */
+  beforeClose: (done: Function, type: string) => void;
+  /** 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 */
+  cellClassName: string | ((param: cellCallbackParams) => string);
+  /** 表格数据 */
+  data: T[];
+  /** 默认配置 */
+  config: Obj;
+  /** 分页的变量(需要sync修饰符) */
+  page: ElPagination;
+  /** 搜索的变量(需要sync修饰符) */
+  search: S;
+  /** 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 */
+  headerCellClassName: string | ((param: cellCallbackParams) => string);
+  /** 组件配置属性 */
+  option: CrudOption;
+  /** 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 */
+  rowClassName: string | ((param: rowCallbackParams) => string);
+  /** 合并行或列的计算方法 */
+  spanMethod: (param: rowCallbackParams) => { rowspan: number; colspan: number } | number[];
+  /** 自定义的合计计算方法 */
+  summaryMethod: (param: SummaryMethodParams) => any[];
+  /** 表格等待框的控制 */
+  tableLoading = false;
+  /**
+   * 文件上传前的回调,会暂停文件上传
+   * @param file 上传的文件
+   * @param done 用于继续文件上传
+   * @param loading 用于中断操作
+   */
+  uploadBefore: (file: ElUploadInternalRawFile, done: Function, loading: Function) => void;
+  // TODO upload-after/upload-delete/upload-preview/upload-error/upload-exceed
+  // ========== 方法 ==========
+  /** 初始化数据字典 */
+  dicInit(type?: 'cascader'): void;
+  /**
+   * 移除表单项的校验结果。
+   * @param {string | string[]} [props] 传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+   */
+  clearValidate(props?: string | string[]): void;
+  /** 打开表单新增窗口 */
+  rowAdd(): void;
+  /** 表单保存调用 */
+  rowSave(): void;
+  /** 表单更新调用 */
+  rowUpdate(): void;
+  /**
+   * 关闭内置的表单弹窗
+   * @since 2.5.1
+   */
+  closeDialog(): void;
+  /**
+   * 获取prop的ref对象
+   * @param prop 表单项的 prop 属性
+   */
+  getPropRef(prop: keyof AvueCrudRefs<T>): ReturnType<AvueCrudRefs<T>>;
+  /**
+   * 打开表单查看窗口
+   * @param row 表单数据
+   * @param index 表单所在行
+   */
+  rowView(row: T, index: number): void;
+  /**
+   * 打开表单编辑窗口
+   * @param row 表单数据
+   * @param index 表单所在行
+   */
+  rowEdit(row: T, index: number): void;
+  /**
+   * 将行数据复制，并打开新增窗口
+   * @param row 表单数据
+   * @since 2.6.14
+   */
+  rowCopy(row: T): void;
+  /**
+   * 打开行编辑
+   * @param row 表单数据
+   * @param index 表单所在行
+   */
+  rowCell(row: T, index: number): void;
+  /**
+   * 删除表单
+   * @param row 表单数据
+   * @param index 表单所在行
+   */
+  rowDel(row: T, index: number): void;
+  /** 打印表格 */
+  rowPrint(): void;
+  /** 导出表格 */
+  rowExcel(): void;
+  /** 清空表单数据 */
+  resetForm(): void;
+  /**
+   * 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
+   * @param {object} [row] 需要高亮的行
+   */
+  setCurrentRow(row?: T): void;
+  /** 用于多选表格，清空用户的选择 */
+  selectClear(): void;
+  /** 清空搜索栏目的值 */
+  searchReset(): void;
+  /**
+   * 用于多选表格，切换选中状态。如果调用时不加参数，则会清空用户的选择。
+   * @param rows 需要切换选中状态的行
+   */
+  toggleSelection(rows?: T[]): void;
+  /** 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） */
+  toggleRowSelection(row: T, select?: boolean): void;
+  /** 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） */
+  toggleRowExpansion(row: T, expanded?: boolean): void;
+  /** 动态计算表格高度 */
+  getTableHeight(): void;
+  /** 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 */
+  doLayout(): void;
+  /** 列初始化 */
+  columnInit(): void;
+  /** 刷新表格 */
+  refreshTable(callback?: Function): void;
+  /**
+   * 根据主键ID查找数据
+   * @description 此处的数据来源为crud组件中传入的data值，当ID为数据项中某个children中的值时，parent即为该数据项，parentList为该数据项的children，否则parent为undefined，parentList为传入的data
+   * @since 2.9.4
+   */
+  findData: (id: string | number) =>
+    | {
+        /** 查找到的数据 */
+        item: T;
+        /** 数据的序号 */
+        index: number;
+        /** 上级数据列表 */
+        parentList: T[];
+        /** 上级数据 */
+        parent?: T;
+      }
+    | {};
+  /** 组件Refs */
+  $refs: AvueCrudRefs<T>;
+}
+
+/** 通用插槽 */
+export interface CrudNormalScope<T = Obj> {
+  /** 数据 */
+  row: T;
+  /** 数据所在行序号 */
+  index: number;
+  /** 大小 */
+  size: AvueComponentSize;
+  /** 文字 */
+  label: string;
+}
+
+/** 通用搜索插槽 */
+export interface CrudSearchFormNormalScope<T = any, R = Obj> {
+  /** 数据，与search相同 */
+  row: R;
+  /** 数据，与row相同 */
+  search: R;
+  /** 表单值 */
+  value: T;
+  /** 列配置 */
+  column: Obj;
+  /** 大小 */
+  size: AvueComponentSize;
+  /** 是否禁用 */
+  disabled: boolean;
+  /** 数据字典 */
+  dic?: Obj[];
+}
+
+/** 通用表单插槽 */
+export interface CrudFormNormalScope<T = any> {
+  /** 表单值 */
+  value: T;
+  /** 列配置 */
+  column: AvueCrudColumn;
+  /** 大小 */
+  size: AvueComponentSize;
+  /** 是否禁用 */
+  disabled: boolean;
+  /** 表单弹窗类型 */
+  type: AvueCrudFormMode;
+}

package/types/crud/option.d.ts

@@ -0,0 +1,376 @@
+import { AvueAlignment, AvueMenuType, AvueComponentSize, Obj } from '../global';
+import { FormBaseOption, FormColumnOption } from '../form/option';
+import { AvueCrudColumn } from './column';
+
+/** 表格组件基础配置属性 */
+export interface CrudBaseOption {
+  // ======== 表格基础配置 ========
+  /** 表格标题 */
+  title: string;
+  /** 表头标题所用的HTML标签, 默认: 'h2' */
+  titleSize: string;
+  /** 表头对齐方式, 默认: 'center' */
+  headerAlign: AvueAlignment;
+  /** 表格列齐方式, 默认: 'center' */
+  align: AvueAlignment;
+  /** 表格边框, 默认: false */
+  border: boolean;
+  /** 表格高度差（主要用于减去其他部分让表格高度自适应） */
+  calcHeight?: number;
+  /** 列显隐按钮, 默认: true */
+  columnBtn: boolean;
+  /** 列显隐按钮, 默认: 'el-icon-s-operation' */
+  columnBtnIcon: string;
+  /** 表格的排序字段 */
+  defaultSort?: {
+    /** 默认排序字段 */
+    prop: string;
+    /** 排序方式 */
+    order: string;
+  };
+  /** 空数据时显示的文本内容，也可以通过slot="empty"设置, 默认: '暂无数据' */
+  emptyText: string;
+  /** 是列的宽度是否自撑开属性, 默认: true */
+  fit: boolean;
+  /** 表格高度 */
+  height?: number | 'auto';
+  /** 头部显隐, 默认: true */
+  header: boolean;
+  /** 是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数, 默认: false */
+  index: boolean;
+  /** 序号的标题, 默认: '#' */
+  indexLabel: string;
+  /** 序号的宽度, 默认: 50 */
+  indexWidth: number;
+  /** 序号是否冻结, 默认: 'left' */
+  indexFixed: boolean | AvueAlignment;
+  /** 行数据的 Key的主键，用于其他相关操作, 默认: 'id' */
+  rowKey: string;
+  /** 设置 indeterminate 状态，只负责样式控制 如果选择一半，不会出现半选, 默认: false */
+  indeterminate: boolean;
+  /** 表格最大高度 */
+  maxHeight?: number;
+  /** 字段排序, 默认: 0 */
+  order?: number;
+  /** 是否显示表格的表头, 默认: true */
+  showHeader: boolean;
+  /** 控件大小 */
+  size: AvueComponentSize;
+  /** 是否显示表格的斑马条纹, 默认: false */
+  stripe: boolean;
+  // ======== 表格分页配置 ========
+  /**
+   * 是否显示分页, 默认: true
+   * @since 2.8.11
+   */
+  page: boolean;
+  /**
+   * 只有一页时是否隐藏分页, 默认: false
+   * @since 2.4.1
+   */
+  simplePage: boolean;
+  // ======== 表格合计配置 ========
+  /** 是否在表尾显示合计行, 默认: false */
+  showSummary: boolean;
+  /** 表格合计需要配置的字段 */
+  sumColumnList: {
+    /** prop属性值 */
+    name: string;
+    /**
+     * 统计类型
+     * @description count: label的值+数据总数; avg: 平均值 sum: 合计
+     */
+    type: 'count' | 'avg' | 'sum';
+    /** 数据的小数位数, 默认: 2 */
+    decimals?: number;
+    /** 自定义前缀 */
+    label?: string;
+  }[];
+  // ======== 表格行折叠配置 ========
+  /** 是否展开折叠行, 默认: false */
+  expand: boolean;
+  /** 是否展开折叠行宽度, 默认: 60 */
+  expandWidth: number;
+  /** 是否展开折叠行冻结, 默认: 'left' */
+  expandFixed: boolean | AvueAlignment;
+  /** 是否默认展开所有行，"expand"为true的时候有效, 默认: false */
+  defaultExpandAll: boolean;
+  /** 可以通过该属性设置目前的展开行，需要设置 rowKey 属性才能使用，该属性为展开行的 keys 数组。 */
+  expandRowKeys: any[];
+  // ======== 表格树配置 ========
+  /**
+   * 是否为表格树，若无配置，判断数据项中是否包含children，若包含，则为true, 默认: false
+   * @since 2.5.0
+   */
+  tree: boolean;
+  /**
+   * 是否开启懒加载，通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点, 默认: false
+   * @since 2.3.0
+   */
+  lazy: boolean;
+  /**
+   * 行数据的 上级Key的主键，用于树其他相关操作, 默认: 'parentId'
+   * @since 2.6.15
+   */
+  rowParentKey: string;
+  // ======== 其他配置 ========
+  /** 是否开启表格排序, 默认: false */
+  sortable: boolean;
+}
+
+/** 表格行勾选配置 */
+export interface CurdSelectionOption<T = Obj> {
+  /** 行可勾选, 默认: false */
+  selection: boolean;
+  /** 行可勾选的宽度, 默认: 50 */
+  selectionWidth: number;
+  /** 行可勾选是否冻结, 默认: 'left' */
+  selectionFixed: boolean | AvueAlignment;
+  /** 行可勾选是否显示tip信息, 默认: true */
+  tip: boolean;
+  /**
+   * 仅对 selection为true 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
+   * @param row 所在行数据
+   * @param index 行号
+   */
+  selectable: (row: T, index: number) => boolean;
+  /** 仅对 selection为true 的列有效，为 true 则会在数据更新之后保留之前选中的数据（需指定 rowKey）, 默认: true */
+  reserveSelection: boolean;
+  /** 清空选中按钮（当selection为true起作用）, 默认: true */
+  selectClearBtn: boolean;
+}
+
+/** 表格组件菜单栏配置 */
+export interface CurdMenuOption {
+  /** 是否显示操作菜单栏, 默认: true */
+  menu: boolean;
+  /** 操作菜单栏的宽度, 默认: 220 */
+  menuWidth: number;
+  /** 手机端时操作菜单栏的宽度, 默认: 100 */
+  menuXsWidth: number;
+  /**
+   * 菜单栏标题对齐方式, 默认: 'center'
+   * @since 2.6.0
+   */
+  menuHeaderAlign: AvueAlignment;
+  /** 菜单栏对齐方式, 默认: 'center' */
+  menuAlign: AvueAlignment;
+  /** 操作栏菜单按钮类型, 默认: 'text' */
+  menuType: AvueMenuType;
+  /** 菜单下拉按钮的文字，仅在menuType为'menu'时生效, 默认: '功能' */
+  menuBtnTitle: string;
+  /** 操作列的文字, 默认: '操作' */
+  menuTitle: string;
+  /** 操作列是否冻结, 默认: 'right' */
+  menuFixed: boolean | 'left' | 'right';
+  /**
+   * 操作按钮排序，未列入的按钮会按默认顺序放在最后
+   * @description
+   * 默认排序：'viewBtn','editBtn','copyBtn','delBtn'
+   * 行编辑模式默认排序：'editBtn','viewBtn','copyBtn','delBtn'
+   * @since 2.10.10
+   */
+  menuBtnSort: ('viewBtn' | 'editBtn' | 'copyBtn' | 'delBtn')[];
+}
+
+/** 表格操作按钮及对应功能配置 */
+export interface CrudActionOption {
+  // ==== menuLeft ====
+  /** 是否显示新增按钮, 默认: true */
+  addBtn: boolean;
+  /** 新增按钮, 默认: '新 增' */
+  addBtnText: string;
+  /** 自定义过滤按钮图标, 默认: 'el-icon-plus' */
+  addBtnIcon: string;
+  /** 新增窗口标题文案, 默认: '新 增' */
+  addTitle: string;
+  /**
+   * 是否显示新增行按钮, 默认: false
+   *
+   * tip: 该按钮的功能为点击后在表格中新增一行
+   * @since 2.6.9
+   */
+  addRowBtn: boolean;
+  // ==== menuRight ====
+  /** 是否显示保存按钮, 默认: true */
+  saveBtn: boolean;
+  /** 弹出框为新增时保存按钮标题, 默认: '新 增' */
+  saveBtnText: string;
+  /** 弹出框为新增时保存按钮图标, 默认: 'el-icon-circle-plus-outline' */
+  saveBtnIcon: string;
+  /** 是否显示日期组件按钮, 默认: false */
+  dateBtn: boolean;
+  /** 日期控件默认的值, 默认: false */
+  dateDefault: boolean;
+  /** 是否显示Excel打印按钮, 默认: false */
+  excelBtn: boolean;
+  /** Excel打印按钮文案, 默认: '导出' */
+  excelBtnText: string;
+  /** Excel打印按钮图标, 默认: 'el-icon-download' */
+  excelBtnIcon: string;
+  /** 是否显示自定义过滤按钮, 默认: false */
+  filterBtn: boolean;
+  /** 自定义过滤按钮图标, 默认: 'el-icon-tickets' */
+  filterBtnIcon: string;
+  /** 是否显示打印按钮, 默认: false */
+  printBtn: boolean;
+  /** 打印按钮文案, 默认: '打印' */
+  printBtnText: string;
+  /** 打印按钮图标, 默认: 'el-icon-printer' */
+  printBtnIcon: string;
+  /** 是否显示刷新按钮, 默认: true */
+  refreshBtn: boolean;
+  /** 自定义过滤按钮图标, 默认: 'el-icon-refresh' */
+  refreshBtnIcon: string;
+  /** 是否显示搜索显隐按钮, 默认: true */
+  searchShowBtn: boolean;
+  /** 搜索按钮图标, 默认: 'el-icon-search' */
+  searchBtnIcon: string;
+}
+
+/** 表格行操作按钮及对应功能配置 */
+export interface CrudRowActionOption {
+  // ======== 表格弹窗操作 ========
+  // ==== 复制新增功能 ====
+  /** 是否显示复制新增按钮, 默认: false */
+  copyBtn: boolean;
+  /** 复制新增按钮文案, 默认: '复 制' */
+  copyBtnText: string;
+  /** 复制新增按钮图标, 默认: 'el-icon-document-add' */
+  copyBtnIcon: string;
+  // ==== 编辑功能 ====
+  /** 是否显示行内编辑按钮, 默认: true */
+  editBtn: boolean;
+  /** 编辑按钮文案, 默认: '编辑' */
+  editBtnText: string;
+  /** 编辑按钮图标, 默认: 'el-icon-edit' */
+  editBtnIcon: string;
+  /** 编辑窗口标题文案, 默认: '编 辑' */
+  editTitle: string;
+  /** 是否显示更新按钮, 默认: true */
+  updateBtn: boolean;
+  /** 弹出框为编辑时保存按钮标题, 默认: '修 改' */
+  updateBtnText: string;
+  /** 弹出框为编辑时保存按钮图标, 默认: 'el-icon-circle-check' */
+  updateBtnIcon: string;
+  // ==== 查看功能 ====
+  /** 是否显示查看按钮, 默认: false */
+  viewBtn: boolean;
+  /** 查看按钮文案, 默认: '查看' */
+  viewBtnText: string;
+  /** 查看按钮图标, 默认: 'el-icon-view' */
+  viewBtnIcon: string;
+  /** 查看窗口标题文案, 默认: '查 看' */
+  viewTitle: string;
+  // ==== 删除功能 ====
+  /** 是否显示删除按钮, 默认: true */
+  delBtn: boolean;
+  /** 删除按钮文案, 默认: '删 除' */
+  delBtnText: string;
+  /** 删除按钮图标, 默认: 'el-icon-delete' */
+  delBtnIcon: string;
+  // ======== 表格行内操作 ========
+  /** 表格单元格可编辑（当column中有搜索的属性中有cell为true的属性启用，只对type为select和input有作用), 默认: false */
+  cellBtn: boolean;
+  /** 是否显示行编辑取消按钮, 默认: true */
+  cancelBtn: boolean;
+  /** 编辑取消按钮文案, 默认: '取 消' */
+  cancelBtnText: string;
+  /** 删除按钮图标, 默认: 'el-icon-circle-close' */
+  cancelBtnIcon: string;
+}
+
+/** 表格组件_弹窗组件配置 */
+export interface CrudDialogOption<T = Obj> extends FormBaseOption, Omit<FormColumnOption<T>, 'column'> {
+  // ======== 弹窗配置 ========
+  /** 是否为全屏Dialog, 默认: false */
+  dialogFullscreen: boolean;
+  /** 是否可以通过按下ESC关闭Dialog, 默认: true */
+  dialogEscape: boolean;
+  /** 是否可以通过点击modal关闭Dialog, 默认: true */
+  dialogClickModal: boolean;
+  /** 是否显示关闭按钮, 默认: true */
+  dialogCloseBtn: boolean;
+  /** 是否需要遮罩层, 默认: true */
+  dialogModal: boolean;
+  /** 弹出表单的弹窗具体顶部的距离(px), 默认: '0' */
+  dialogTop: string | number;
+  /** 弹出表单的类型, 默认: dialog */
+  dialogType: 'dialog' | 'drawer';
+  /** 弹出表单的弹窗宽度, 默认: '60%' */
+  dialogWidth: string;
+  /**
+   * 是否允许拖拽, 默认: true
+   * @since 2.9.0
+   */
+  dialogDrag: boolean;
+  // ======== 弹窗表单配置 ========
+  /**
+   * 弹出表单按钮组的位置, 默认: 'right'
+   * @deprecated 2.7.9
+   */
+  menuPosition: AvueAlignment;
+  /**
+   * 弹出表单按钮组的位置, 默认: 'right'
+   * @since 2.7.9
+   */
+  dialogMenuPosition: AvueAlignment;
+}
+
+/** 表格组件_搜索组件配置 */
+export interface CrudSearchOption {
+  /** 首次加载是否显示搜索, 默认: true */
+  searchShow: boolean;
+  /** 回车提交表单, 默认: true */
+  searchEnter: boolean;
+  /** 是否展示半收缩按钮, 默认: undefined */
+  searchIcon: boolean;
+  /** 展示半收缩按钮的个数, 默认: 2 */
+  searchIndex: number;
+  /** 搜索项的长度, 默认: 6 */
+  searchSpan: number;
+  /** 搜索项之间的间距, 默认: 20 */
+  searchGutter: number;
+  /** 搜索项label的宽度, 默认: 80 */
+  searchLabelWidth: number;
+  /** 搜索项label的定位, 默认: 'right' */
+  searchLabelPosition: AvueAlignment;
+  /** 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，对cascader|tree类型组件生效, 默认: false */
+  searchCheckStrictly: boolean;
+  /** 搜索按钮的长度, 默认: 6 */
+  searchMenuSpan: number;
+  /**
+   * 搜索按钮的位置, 默认: 'center'
+   * @since 2.7.9
+   */
+  searchMenuPosition: AvueAlignment;
+  /**
+   * 组件尺寸
+   * @since 2.7.9
+   */
+  searchSize: AvueComponentSize;
+  /** 搜索按钮文案, 默认: '搜索' */
+  searchBtnText: string;
+  /** 搜索按钮图标, 默认: 'el-icon-search' */
+  searchBtnIcon: string;
+  /** 是否显示搜索按钮, 默认: true */
+  searchBtn: boolean;
+  /** 是否显示清空按钮, 默认: true */
+  emptyBtn: boolean;
+  /** 清空按钮文案, 默认: '清空' */
+  emptyBtnText: string;
+  /** 清空按钮图标, 默认: 'el-icon-delete' */
+  emptyBtnIcon: string;
+}
+
+/** 表格组件配置属性 */
+export type CrudOption<T = Obj> = Partial<CrudBaseOption> &
+  Partial<CurdSelectionOption<T>> &
+  Partial<CurdMenuOption> &
+  Partial<CrudActionOption> &
+  Partial<CrudRowActionOption> &
+  Partial<CrudDialogOption> &
+  Partial<CrudSearchOption> & {
+    /** 表格列配置属性*/
+    column?: AvueCrudColumn<T>[];
+  };

package/types/crud/refs/dialog-form.d.ts

@@ -0,0 +1,36 @@
+// 引入定义
+import { AvueForm } from '../../form';
+import { AvueCrudFormMode } from '../index';
+
+/** 表格组件表单弹窗 */
+export declare class AvueCrudDialogForm<T = Obj> {
+  // ========== 方法 ==========
+  /**
+   * 表单提交
+   * @since 2.8.18
+   */
+  submit(): void;
+  /**
+   * 清空表单数据
+   * @since 2.8.18
+   */
+  reset(): void;
+  /** 切换弹窗全屏模式 */
+  handleFullScreen(): void;
+  /**
+   * 关闭弹窗
+   * @param row 弹窗对应行的数据
+   * @description 若row为空，则仅关闭弹窗；否则，视弹窗类型(add/edit)对表格数据进行更新（根据表格rowKey确定的主键查找对应行数据，存在则替换，不存在则添加一行）
+   */
+  closeDialog(row?: T): void;
+  /**
+   * 打开弹窗
+   * @param type 弹窗类型
+   */
+  show(type: AvueCrudFormMode): void;
+  /** 组件Refs */
+  $refs: {
+    /** 表单实例 */
+    tableForm: AvueForm<T>;
+  };
+}

package/types/crud/refs/header-search.d.ts

@@ -0,0 +1,18 @@
+// 引入定义
+import { FormOption } from '../../form/option';
+
+export declare class AvueCrudHeaderSearch {
+  /** 搜索表单配置 */
+  readonly option: FormOption;
+  // ========== 方法 ==========
+  /** 搜索清空 */
+  resetChange(): void;
+  /** 搜索清空 */
+  searchReset(): void;
+  /** 切换搜索显示 */
+  handleSearchShow(): void;
+  /** 设置搜索是否显示 */
+  handleSearchCollapse(searchShow: boolean): void;
+  /** 判断是否显示搜索 */
+  dataFormat(): void;
+}