expose.d.ts:
import { CompositionColumns, CrudBinding, FormProps, Page, PageQuery, PageRes, RemoveProps, UserPageQuery } from "./crud";
import { Ref } from "vue";
import { Editable } from "./expose-editable";
export type SearchOptions = {
silence?: boolean;
};
export type DoValueResolveProps<R = any> = {
form: R;
};
export declare class SetFormDataOptions {
/**
* 是否执行valueChange
*/
valueChange?: boolean;
mergeForm?: boolean;
}
/**
* doRefresh方法的参数
*/
export type DoRefreshProps = {
/**
* 刷新后是否跳转到首页
*/
goFirstPage?: boolean;
/**
* 是否静默刷新,不显示loading,没有任何外在表现
*/
silence?: boolean;
/**
* 是否滚动到顶部
*/
scrollTop?: boolean;
};
/**
* crudExpose
*/
export type CrudExpose<R = any> = {
crudRef: Ref;
crudBinding: Ref<CrudBinding<R>>;
/**
* 获取FsFormWrapper的实例
*/
getFormWrapperRef: () => any;
/**
* 获取FsFormRef
*/
getFormRef: () => any;
/**
* 获取表单数据,仅表单打开时有效
*/
getFormData: () => R;
/**
* 设置当前表单数据,仅表单打开时有效
* data: 表单数据
*/
setFormData: (data: R, options?: SetFormDataOptions) => any;
/**
* 获取表单组件实例,仅表单打开时有效
* key: 字段key
* isAsync: 是否异步获取,传true时,此方法返回promise(当组件是异步组件<extends中的组件>时,第一次获取会为空,所以需要异步等待加载完成后才能获取)
*/
getFormComponentRef: (key: string, isAsync?: boolean) => any;
/**
* 执行valueBuilder
* @param rows 表格数据列表
*/
doValueBuilder: (rows: R[], columns?: CompositionColumns<R>) => void;
/**
* 执行valueResolve
* @param props { form }
*/
doValueResolve: (props: DoValueResolveProps<R>, columns?: CompositionColumns<R>) => void;
/**
* 刷新列表数据
*/
doRefresh: (props?: DoRefreshProps) => Promise<void>;
/**
* 翻页, 注意,需要另外手动调用doRefresh才会刷新数据
*/
doPageTurn: (no: number) => void;
/**
* 查询按钮点击,执行查询
* @param opts {form, goFirstPage =true,mergeForm=false}
*/
doSearch: (props: DoSearchProps<R>) => Promise<void>;
/**
* 构建page查询参数
* @param pageQuery
*/
buildPageQuery(pageQuery: PageQuery<R>): UserPageQuery<R>;
/**
* 获取当前分页参数
*/
getPage(): Page;
/**
* 执行搜索,返回页面数据
* @param pageQuery
*/
search: (pageQuery: PageQuery<R>, options?: SearchOptions) => Promise<PageRes<R>>;
/**
* 删除行按钮点击
* @param context = {index / row}
*/
doRemove: (context: DoRemoveContext<R>, opts?: RemoveProps<R>) => Promise<any>;
/**
* 复制行,以当前行数据打开新增对话框
*/
openCopy: (context: OpenEditContext<R>, formOpts?: OpenDialogProps<R>) => Promise<any>;
/**
* 打开编辑对话框
*/
openEdit: (context: OpenEditContext, formOpts?: OpenDialogProps<R>) => Promise<any>;
/**
* 打开添加对话框
*/
openAdd: (context: OpenEditContext, formOpts?: OpenDialogProps<R>) => Promise<any>;
/**
* 打开查看对话框
*/
openView: (context: OpenEditContext, formOpts?: OpenDialogProps) => Promise<any>;
/**
* 打开对话框
*/
openDialog: (formOpts: OpenDialogProps) => Promise<any>;
_openDialog: (mode: string, context: OpenEditContext, formOpts?: OpenDialogProps) => Promise<any>;
/**
* 获取查询组件ref
*/
getSearchRef: () => any;
/**
* 触发查询表单校验
*/
doSearchValidate: () => void;
/**
* 获取查询表单数据
*/
getSearchFormData: () => any;
/**
* 获取查询表单校验成功的数据
*/
getSearchValidatedFormData: () => any;
/**
* 重新设置查询表单数据
*/
setSearchFormData: (props: SetSearchFormDataProps<R>) => void;
/**
* 获取toolbar组件Ref
*/
getToolbarRef: () => any;
/**
* 获取列设置组件Ref
*/
getColumnsFilterRef: () => any;
/**
* 获取列设置的原始列配置Ref
* 可以修改列设置的原始配置
*/
getColumnsFilterOriginalColumnsRef: () => any;
/**
* 获取列设置的每列配置Ref
* 可以修改列设置的每列配置
*/
getColumnsFilterColumnsRef: () => any;
/**
* 获取FsTable的实例
*/
getTableRef: () => any;
/**
* 获取x-table的实例
*/
getBaseTableRef: () => any;
/**
* 获取表格数据
*/
getTableData: () => R[];
/**
* 重新设置表格数据
*/
setTableData: (data: R[]) => void;
/**
* 插入行
* @param index
* @param row
*/
insertTableRow: (index: number, row: R) => void;
/**
* 更新行
* @param index
* @param row
*/
updateTableRow: (index: number, row: R, merge?: boolean) => void;
/**
* 删除行
* @param index
*/
removeTableRow: (index: number) => void;
/**
* 获取表格数据某一行,不支持树形结构
*/
getTableDataRow: (index: number) => any;
/**
* 根据rowKey删除某一行
* @param rowKey
*/
removeTableRowByRowKey: (rowKey: any, data?: R[]) => boolean;
/**
* 选中某一行
* @param context = {row}
*/
doSelectCurrentRow: (context: SelectCurrentRowProps<R>) => void;
/**
* 行编辑
*/
editable: Editable;
};
/**
* index or row 必须传一个
*/
export type OpenEditContext<R = any> = {
/**
* 行索引, 行索引或row,必传一个
*/
index?: number;
/**
* 行数据,默认会赋值给initialForm作为初始值
*/
row?: R;
};
/**
* crudExpose.openDialog 打开对话框参数
*/
export type OpenDialogProps<R = any> = {
/**
* 是否新创建一个实例打开
* 当使用新建实例打开时,无法通过getFormWrapperRef获取到表单ref,你可以从openDialog的返回值中拿到ref
* const {openDialog} = useFormWrapper()
* const wrapperRef = await openDialog(props:OpenDialogProps)
*/
newInstance?: boolean;
/**
* 对话框id,不传则随机生成,新实例在关闭时不会被销毁,使用相同id的form重复打开会被覆盖
*/
id?: string;
} & FormProps<R>;
/**
* crudExpose.setSearchFormData参数
*/
export type SetSearchFormDataProps<R = any> = {
form: R;
mergeForm?: boolean;
triggerSearch?: boolean;
refWarning?: boolean;
};
/**
* crudExpose.doRemove参数
*/
export type DoRemoveContext<R = any> = {
index?: number;
row?: R;
};
export type OnAfterRemoveContext<R = any> = DoRemoveContext<R> & {
res: any;
};
/**
* crudExpose.doSearch参数
*/
export type DoSearchProps<R = any> = {
form: R;
goFirstPage?: boolean;
mergeForm?: boolean;
};
/**
* crudExpose.doSelectCurrentRow参数
*/
export type SelectCurrentRowProps<R = any> = {
row: R;
};
crud.d.ts:
import { Component, Ref, ShallowRef, ComputedRef } from "vue";
import { ComputeContext } from "./compute";
import { CrudExpose, DoRemoveContext, OnAfterRemoveContext, OpenDialogProps } from "../d/expose";
import { RuleItem } from "async-validator";
import { UiSlot, UiSlotRet } from "@fast-crud/ui-interface";
import { ExportProps } from "../lib/fs-export";
import { Dict, GetContextFn } from "../use";
export type RowRecord = {
[key: string]: any;
children?: any[];
};
export type UseFsRet<R = any, C = any> = {
crudRef: Ref;
crudBinding: Ref<CrudBinding<R>>;
crudExpose: CrudExpose<R>;
context: C;
} & UseCrudRet<R> & CreateCrudOptionsRet<R>;
export type UseFsContext = any;
export type CreateCrudOptionsProps<R = any, C = any> = {
crudExpose: CrudExpose<R>;
expose?: CrudExpose<R>;
context: C;
};
export type CreateCrudOptionsRet<R = any> = {
/**
* crudOptions
*/
crudOptions: DynamicallyCrudOptions<R>;
/**
* 自定义返回变量
*/
[key: string]: any;
};
export type UseFsProps<R = any, C = any> = {
crudRef?: Ref;
crudBinding?: Ref<CrudBinding<R>>;
crudExpose?: CrudExpose<R>;
crudExposeRef?: Ref<CrudExpose<R>>;
createCrudOptions: CreateCrudOptions<R, C> | CreateCrudOptionsAsync<R, C>;
crudOptionsOverride?: DynamicallyCrudOptions<R>;
onExpose?: (context: OnExposeContext<R, C>) => any;
context?: C;
};
export type CreateCrudOptions<R = any, C = any> = (props: CreateCrudOptionsProps<R, C>) => CreateCrudOptionsRet<R>;
export type OnExposeContext<R = any, C = any> = {
crudRef: Ref;
crudBinding: Ref<CrudBinding<R>>;
crudExpose: CrudExpose<R>;
context: C;
};
export type CreateCrudOptionsAsync<R = any, C = any> = (props: CreateCrudOptionsProps<R, C>) => Promise<CreateCrudOptionsRet<R>>;
export type UseCrudProps<R = any, C = any> = {
crudOptions: DynamicallyCrudOptions<R>;
/**
* 即将废弃,请使用crudExpose
*/
expose?: CrudExpose<R>;
crudExpose: CrudExpose<R>;
context?: C;
/**
* 自定义参数
* common里面可以使用
*/
[key: string]: any;
};
export type UseCrudRet<R = any> = {
/**
* 重新设置crudOptions
* @param overOptions
*/
resetCrudOptions: (options: DynamicType<CrudOptions<R>>) => void;
/**
* 覆盖crudOptions配置
* @param overOptions
*/
appendCrudOptions: (options: DynamicType<CrudOptions<R>>) => DynamicType<CrudOptions<R>>;
/**
* 追加配置,注意是覆盖crudBinding的结构,而不是crudOptions的结构
* @param overBinding
*/
appendCrudBinding: (overBinding: CrudBinding<R>) => void;
};
export type RowContext<R = any> = {
/**
* 字段key
*/
key: string;
/**
* 字段值
*/
value: any;
/**
* 表单数据
*/
form: R;
/**
* 行数据
*/
row: R;
/**
* naive ui 有record
*/
record?: R;
/**
* 第几行
*/
index: number;
};
export type ScopeContext<R = any> = {
/**
* 表单模式,add,view,edit
*/
mode: string;
/**
* 获取其他字段组件ref
*/
getComponentRef: (key: string) => any;
/**
* 当前字段组件的ref
*/
componentRef?: any;
/**
* ui特有的context属性
*/
[key: string]: any;
} & RowContext<R>;
export type ComponentRenderContext<R = any> = {
/**
* 继承component的attrs
*/
attrs: any;
} & ScopeContext<R>;
export type FormScopeContext<R = any> = {
/**
* 初始form数据
*/
initialForm: R;
/**
* 属性
*/
attrs?: any;
/**
* 提交成功后的response
*/
res?: any;
/**
* 表单数据
*/
form: R;
} & ScopeContext<R>;
export type ComponentEventContext<R = any> = {
/**
* 原始事件
*/
$event: any;
} & ScopeContext<R>;
export type ValueChangeContext<R = any> = {
/**
* 当前是否是第一次触发的
*/
immediate?: boolean;
[key: string]: any;
} & ScopeContext<R>;
/**
* valueChange复合配置
*/
export type ValueChangeProps<R = any> = {
/**
* 是否立即触发一次
*/
immediate?: boolean;
/**
* valueChange处理器
*/
handle: ValueChangeHandle<R>;
};
/**
* valueChange 处理器
*/
export type ValueChangeHandle<R = any> = (context: ValueChangeContext<R>) => Promise<void>;
export type Page = {
/**
* 当前页
*/
currentPage?: number;
/**
* 每页条数
*/
pageSize?: number;
};
/**
* 查询排序参数
*/
export type PageSort = {
prop?: string;
order?: string;
asc?: boolean;
};
/**
* 查询
*/
export type PageQuery<R = any> = {
/**
* 翻页参数
*/
page?: Page;
/**
* 查询表单
*/
form?: R;
/**
* 远程排序配置
*/
sort?: PageSort;
};
/**
* fs-crud能够接受的页面数据格式,
* 如果你的后台与此格式不一致,你需要转化成此格式,
* 请参考transformRes
*/
export type PageRes<R = any> = {
/**
* 当前页
*/
currentPage: number;
/**
* 每页条数
*/
pageSize: number;
/**
* 总记录数
*/
total: number;
/**
* 列表数据
*/
records: R[];
};
export type EditReq<R = any> = {
form?: R;
row?: R;
[key: string]: any;
};
export type AddReq<R = any> = {
form?: R;
[key: string]: any;
};
export type DelReq<R = any> = {
row?: R;
[key: string]: any;
};
export type InfoReq<R = any> = {
mode?: string;
row?: R;
[key: string]: any;
};
/**
* 用户后台page请求原始返回
*/
export type UserPageRes<R = any> = {
[key: string]: any;
};
/**
* 页面数据转换参数
*/
export type TransformResProps<R = any> = {
/**
* 用户页面请求实际返回
*/
res: UserPageRes<R>;
/**
* 本次请求参数
*/
query: UserPageQuery<R>;
};
/**
* 用户自定义的后台翻页参数
*/
export type UserPageQuery<R = any> = {
[key: string]: any;
};
export type TransformQuery<R = any> = (query: PageQuery<R>) => UserPageQuery<R>;
export type TransformRes<R = any> = (props: TransformResProps<R>) => PageRes<R>;
export type PageRequest<R = any> = (query: UserPageQuery<R>) => Promise<UserPageRes<R>>;
export type EditRequest<R = any> = (req: EditReq<R>) => Promise<any>;
export type AddRequest<R = any> = (req: AddReq<R>) => Promise<any>;
export type DelRequest<R = any> = (req: DelReq<R>) => Promise<any>;
export type InfoRequest<R = any> = (req: InfoReq<R>) => Promise<any>;
/**
* 请求配置
*/
export type RequestProp<R = any> = {
transformQuery?: TransformQuery<R>;
transformRes?: TransformRes<R>;
pageRequest?: PageRequest<R>;
addRequest?: AddRequest<R>;
editRequest?: EditRequest<R>;
delRequest?: DelRequest<R>;
infoRequest?: InfoRequest<R>;
[key: string]: any;
};
/**
* 可改变的插槽集合
*/
export type WriteableSlots = {
[name: string]: UiSlot;
};
/**
* vModel支持trim,number
*/
export type VModelProps = {
/**
* vModel name
*/
name?: string;
/**
* 是否trim
*/
trim?: boolean;
/**
* 是否转换成number
*/
number?: boolean;
/**
* 自定义转换器
* @param value
*/
transform?: (value: any) => any;
};
/**
* 组件配置
*/
export type ComponentProps<R = any> = {
/**
* 是否显示组件
*/
show?: boolean;
/**
* 组件的名称
*/
name?: string | Component;
/**
* vmodel绑定的目标属性名
*/
vModel?: string | VModelProps;
/**
* 当原始组件名的参数被以上属性名占用时,可以配置在这里
* 例如:原始组件有一个叫name的属性,你想要配置它,则可以按如下配置
* ```
* component:{
* name:"组件的名称"
* props:{
* name:"组件的name属性" <-----------
* }
* }
* ```
*/
props?: {
[key: string]: any;
};
/**
* 组件事件监听,带上下文
*/
on?: {
[key: string]: (context: ComponentEventContext<R>) => void;
};
/**
* 同on,即将废弃
*/
events?: {
[key: string]: (context: ComponentEventContext<R>) => void;
};
/**
* 插槽
*/
slots?: WriteableSlots;
/**
* 同插槽
*/
children?: WriteableSlots;
/**
* 直接渲染
* @param scope
*/
render?: (scope: ComponentRenderContext<R>) => any;
/**
* 组件其他参数,如style、class、onXxx事件等
*/
[key: string]: any;
};
export type RemoveConfirmFn<R = any> = (context: DoRemoveContext<R>) => Promise<void>;
/**
* 删除操作配置
*/
export type RemoveProps<R = any> = {
noConfirm?: boolean;
/**
* 自定义确认删除,抛出异常则取消
* @param context
*/
confirmFn?: RemoveConfirmFn<R>;
/**
* 自定义删除确认标题
* confirm未配置时生效
*/
confirmTitle?: string;
/**
* 自定义删除确认内容
* confirm未配置时生效
*/
confirmMessage?: string;
/**
* 删除后刷新列表
*/
refreshTable?: boolean;
/**
* 删除请求之后的操作,如果返回false,终止后续的执行,比如显示删除成功通知等
* @param context
*/
afterRemove?: (context: OnAfterRemoveContext<R>) => Promise<any>;
/**
* 显示成功提示
*/
showSuccessNotification?: boolean;
/**
* 当取消删除时
* @param context
*/
onCanceled?: (context: ScopeContext<R>) => Promise<any>;
/**
* 删除成功后的操作
* @param context
*/
onRemoved?: (context: ScopeContext<R>) => Promise<any>;
/**
* 实际删除操作,返回false则不继续后续的刷新表格等操作
* @param context
*/
handle?: (context: DoRemoveContext<R>) => Promise<any>;
/**
* confirm对话框的属性
*/
confirmProps?: any;
/**
* 其他属性
*/
[key: string]: any;
};
export type EditableProps<R = any> = {
/**
* 是否启用编辑
*/
enabled?: boolean;
rowKey?: string;
/**
* 是否readonly
*/
readonly?: boolean;
addForm?: FormProps<R>;
editForm?: FormProps<R>;
mode?: "free" | "row" | "cell";
/**
* 是否排他式激活,激活一个,关闭其他
*/
exclusive?: boolean;
/**
* 排他式激活关闭其他编辑时的效果,是取消还是保存
*/
exclusiveEffect?: "cancel" | "save";
activeTrigger?: "onClick" | "onDbClick" | false;
activeDefault?: boolean;
isEditable?: (opts: {
editableId: any;
key: string;
row: R;
}) => boolean;
/**
* 更新单元格方法
* @param opts
*/
updateCell?: (opts: {
editableId: any;
row: R;
key: string;
value: any;
}) => Promise<any>;
/**
* 本地自定义插入方法
* 如果你不喜欢新增的记录在第一条的话,你可以自己实现插入方法
*/
addRow?: (data: R[], row: R) => boolean;
[key: string]: any;
};
export type TableColumnEditableDisabledFunc<R = any> = (opts: {
column: ColumnProps;
editableId: any;
row: R;
}) => boolean;
export type EditableUpdateCellRequest<R = any> = (opts: {
editableId: any;
row: R;
key: string;
value: any;
}) => Promise<R>;
export type EditableUpdateColumnRequest<R = any> = (opts: {
editableId: any;
row: R;
key: string;
data: R[];
}) => Promise<any>;
export type TableColumnEditableProps<R = any> = {
disabled?: boolean | TableColumnEditableDisabledFunc;
updateCell?: EditableUpdateCellRequest<R>;
updateColumn?: EditableUpdateColumnRequest<R>;
showAction?: boolean;
};
export type ConditionalRenderProps<R = any> = {
match: (scope: ScopeContext<R>) => boolean;
render: (scope: ScopeContext<R>) => UiSlotRet;
};
export type MobileAdaptorProps<R = any> = {
isMobile?: Ref<boolean>;
rowHandle?: {
width?: number;
};
};
export type RowSelectionProps<R = any> = {
/**
* 是否多选
*/
multiple?: boolean;
/**
* 跨页选中
*/
crossPage?: boolean;
/**
* 选中值变化事件
* @param selectedRowKeys
*/
onSelectedChanged?: (selectedRowKeys: R[]) => void;
/**
* 选中的id列表
*/
selectedRowKeys?: Ref<any[]> | Function;
/**
* 选择列是否固定
*/
selectionFixed?: string;
};
/**
* 表格配置
*/
export type TableProps<R = any> = {
/**
* 调用doRefresh完成之后触发
*/
onRefreshed?: (context: {
data: R[];
}) => void;
/**
* 是否禁用loading状态
*/
disableLoading?: boolean;
/**
* 删除配置
*/
remove?: RemoveProps;
/**
* x-table 插槽
*/
slots?: WriteableSlots;
/**
* 表格数据
*/
data?: R[];
/**
* 单元格列配置
*/
columns?: TableColumnsProps<R>;
/**
* 列配置 map
*/
columnsMap?: TableColumnsProps<R>;
/**
* 条件渲染
*/
conditionalRender?: ConditionalRenderProps<R>;
/**
* 表格最大高度调整
*/
maxHeightAdjust?: number;
/**
* 可编辑配置
*/
editable?: EditableProps<R>;
/**
* [x]-table组件的配置
*/
[key: string]: any;
};
/**
* [x]-col的配置
*/
export type ColProps = {
span?: number;
[props: string]: any;
};
export type FormWrapperSaveRemindProps = boolean | (() => Promise<boolean>);
/**
* 表单对话框配置
*/
export type FormWrapperProps<R = any> = {
/**
* 对话框使用什么组件,[el-dialog,a-modal,n-modal,el-drawer,a-drawer,n-drawer]
*/
is?: string;
/**
* 是否支持拖拽
*/
draggable?: boolean;
/**
* 对话框打开前事件处理
* @param opts
*/
onOpen?: (opts: OpenDialogProps<R>) => void;
/**
* 对话框打开后事件处理
* @param opts
*/
onOpened?: (opts: FormWrapperContext<R>) => void;
/**
* 对话框关闭前事件处理,返回false则阻止关闭
*/
beforeClose?: (opts: FormWrapperContext<R>) => Promise<boolean>;
/**
* 对话框关闭后事件处理
* @param opts
*/
onClosed?: (opts: FormWrapperContext<R>) => void;
buttons?: {
[key: string]: ButtonProps<FormWrapperContext<R>>;
};
/**
* 打开对话框时是否全屏
*/
fullscreen?: boolean;
/**
* 变更保存提醒
*/
saveRemind?: FormWrapperSaveRemindProps;
/**
* 是否内部打开对话框
*/
inner?: boolean;
/**
* 内部打开对话框时容器的选择器,一般是admin框架主页面的容器的元素选择器
* 比如fs-admin 为 main.fs-framework-content
*/
innerContainerSelector?: string;
/**
* 对应对话框组件的配置
*/
[key: string]: any;
};
/**
* 表单分组-组配置
*/
export type FormGroupItemProps<R = any> = {
/**
* 是否显示该分组
*/
show?: boolean;
/**
* 分组标题(根据你使用的分组组件和组件库来确定标题)
*/
title?: string;
/**
* 分组标题(根据你使用的分组组件和组件库来确定标题)
*/
label?: string;
/**
* 分组标题(根据你使用的分组组件和组件库来确定标题)
*/
header?: string;
/**
* [a|el|n]-tab-panel的参数
*/
tab?: any;
/**
* 插槽,可以用来自定义标题
*/
slots?: WriteableSlots;
/**
* 此分组包含哪些字段,keys数组
*/
columns?: Array<string>;
/**
* 其他配置
* 支持el-collapse-item,el-tab-pane,a-collapse-panel,a-tab-pane 等组件的配置
*/
[key: string]: any;
};
/**
* 表单分组配置
*/
export type FormGroupProps<R = any> = {
type?: string;
groups?: {
[key: string]: FormGroupItemProps<R>;
};
[key: string]: any;
};
/**
* 表单字段帮助说明配置
*/
export type FormItemHelperProps<R = any> = {
/**
* 自定义渲染帮助说明
* @param scope
*/
render?: (scope: ScopeContext<R>) => any;
/**
* 帮助文本
*/
text?: string;
/**
* 帮助说明所在的位置,[ undefined | label]
*/
position?: string;
/**
* [a|el|n]-tooltip配置
*/
tooltip?: object;
/**
* 自定义配置
*/
[key: string]: any;
};
/**
* 表单配置
*/
export type FormProps<R = any> = {
/**
* 表单初始值
*/
initialForm?: R;
/**
* 表单模式 [add/edit/view]
*/
mode?: string;
/**
* 布局方式
*/
display?: "flex" | "grid";
/**
* a-col,el-col,n-col的配置
* 可以配置跨列 {span:24}表示此字段占满一行
*/
col?: ColProps;
/**
* a-row的配置
*/
row?: any;
/**
* 字段组件之前render
* @param scope
*/
prefixRender?: (scope: ScopeContext<R>) => any;
/**
* 字段组件之后render
* @param scope
*/
suffixRender?: (scope: ScopeContext<R>) => any;
/**
* 表单对话框/抽屉配置
*/
wrapper?: FormWrapperProps<R>;
/**
* 点击保存按钮,表单校验之前做一些操作,返回false或抛异常,阻止后续操作
*/
beforeValidate?: (context: FormScopeContext<R>) => Promise<boolean>;
/**
* 提交前做一些操作,返回false或抛异常,阻止后续操作
*/
beforeSubmit?: (context: FormScopeContext<R>) => Promise<boolean>;
/**
* 提交表单的方法(默认已经配置好,将会调用addRequest或者updateRequest)
*/
doSubmit?: (context: FormScopeContext<R>) => Promise<any>;
/**
* 提交后做一些操作,可以抛异常来阻止后续操作,其中context.res = doSubmit的返回值
* @param context
*/
afterSubmit?: (context: FormScopeContext<R>) => Promise<any>;
/**
* 成功后的操作,afterSubmit未抛异常时执行,默认为刷新表格
* @param context
*/
onSuccess?: (context: FormScopeContext<R>) => Promise<any>;
/**
* 表单重置时的操作
*/
doReset?: () => Promise<any>;
/**
* 表单分组配置
*/
group?: FormGroupProps<R>;
/**
* 插槽render
*/
slots?: {
[key: string]: () => any;
};
/**
* 其他表单配置 [x]-form的配置
*/
[key: string]: any;
};
export type FormItemTitleRender<R = any> = (context: ScopeContext<R>) => any;
export type RuleRecord = {
trigger?: string | string[];
} & RuleItem;
/**
* 表单字段配置
*/
export type FormItemProps<R = any> = {
/**
* 字段label
*/
title?: string | FormItemTitleRender<R>;
/**
* 表单字段组件配置
*/
component?: ComponentProps<R>;
/**
* 表单字段 x-col的配置
* 一般用来配置跨列:{span:24} 占满一行
*/
col?: ColProps;
/**
* 默认值
*/
value?: any;
/**
* 帮助提示配置
*/
helper?: string | FormItemHelperProps<R>;
/**
* 排序号
*/
order?: number;
/**
* 是否显示此字段
*/
show?: boolean;
/**
* 是否是空白占位栏
*/
blank?: boolean;
/**
* 是否提交给后台
*/
submit?: boolean;
/**
* 表单valueChange
*/
valueChange?: ValueChangeHandle<R> | ValueChangeProps<R>;
/**
* 值构建器,打开对话框时执行
* 从pageRequest获取到的字段数据值可能并不是组件能够识别的值,所以需要将其做一层转化
* 即row[key]=字段组件能够识别的值
* @param context
*/
valueBuilder?: (context: ValueBuilderContext<R>) => void;
/**
* 值解析器,表单提交前执行
* 表单输出的值可能不是后台所需要的值,所以需要在提交前做一层转化
* 即:row[key]=后台能所需要的值
* @param context
*/
valueResolve?: (context: ValueResolveContext<R>) => void;
/**
* 条件渲染
* @param scope
*/
conditionalRender?: ConditionalRenderProps<R>;
/**
* 直接渲染组件
* @param scope
*/
render?: (scope: ScopeContext<R>) => any;
/**
* 组件左边渲染
* @param scope
*/
prefixRender?: (scope: ScopeContext<R>) => any;
/**
* 组件右边渲染
* @param scope
*/
suffixRender?: (scope: ScopeContext<R>) => any;
/**
* 组件上方渲染
* @param scope
*/
topRender?: (scope: ScopeContext<R>) => any;
/**
* 组件下方渲染
* @param scope
*/
bottomRender?: (scope: ScopeContext<R>) => any;
/**
* 校验规则
*/
rules?: RuleRecord | RuleRecord[];
/**
* fs-form-item 、 x-form-item的其他配置
*/
[key: string]: any;
};
/**
* crud外部容器配置
*/
export type ContainerProps = {
/**
* 布局容器组件名称
*/
is?: string | ShallowRef;
[key: string]: any;
};
export type ColumnsFilterContainerProps = {
width?: string;
drawer?: any;
};
export interface FsRemoteStorage {
get(key: string): Promise<any>;
set(key: string, value: any): Promise<void>;
remove(key: string): Promise<void>;
}
export type ColumnsFilterComponentProps<R = any> = {
/**
* 布局容器组件配置
*/
container?: ContainerProps & ColumnsFilterContainerProps;
/**
* 列配置组件名称
*/
is?: string | ShallowRef;
/**
* 是否显示列设置抽屉
*/
show?: boolean;
/**
* 模式,default,simple
*/
mode?: string;
/**
* 列数据
*/
columns?: TableColumnsProps<R>;
/**
* 原始列数据,还原成此列表
*/
originalColumns?: TableColumnsProps<R>;
/**
* 是否保存设置
*/
storage?: boolean | string | FsRemoteStorage;
/**
* 文本设置
*/
text?: {
/**
* 标题
*/
title?: string;
/**
* 固定
*/
fixed?: string;
/**
* 排序
*/
order?: string;
/**
* 重置
*/
reset?: string;
/**
* 确认
*/
confirm?: string;
/**
* 未命名
*/
unnamed?: string;
};
/**
* 重置事件
*/
onReset?: () => Promise<void>;
/**
* 保存事件
* @param props
*/
onSubmit?: (props: {
columns: any;
}) => Promise<void>;
};
export type ToolbarComponentProps<R = any> = {
/**
* 按钮配置
* {
* search:{}, 查询
* refresh:{}, 刷新
* compact:{}, 紧凑模式
* columns:{} 列设置
* }
*/
buttons?: {
/**
* 按钮key: 按钮配置
*/
[key: string]: ButtonProps;
};
/**
* 注意:不要配置此项
* 注意:如果要隐藏search,请配置crudOptions.search.show=false
*/
search?: boolean;
columnsFilter?: ColumnsFilterComponentProps<R>;
/**
* 当前是否紧凑模式
*/
compact?: boolean;
/**
* 导出配置
*/
export?: ExportProps<R>;
/**
* 列配置
*/
columns?: TableColumnsProps<R>;
/**
* 是否保存用户列设置
* 传string则表示传入缓存的主key
*/
storage?: boolean | string;
/**
* 插槽
*/
slots?: {
[key: string]: Function;
};
};
/**
* 工具条配置
*/
export type ToolbarProps<R = any> = {
[key: string]: any;
} & ToolbarComponentProps<R>;
type ButtonIconProps = string | {
icon: string;
[key: string]: any;
} | UiSlot;
type NullableString = string | null;
export type FormWrapperContext<R = any> = {
formWrapperId: any;
formWrapperIdClass: any;
wrapper: any;
options: any;
formRef: any;
form: R;
mode: string;
title: any;
fullscreen: any;
wrapperBindRef: any;
formOptionsRef: any;
setFormData: (form: R) => void;
getFormData: () => R;
reset: () => void;
loading: Ref;
fullscreenEnabled: any;
doClose: () => Promise<boolean>;
close: () => Promise<void>;
toggleFullscreen: () => void;
submit: () => Promise<void>;
onClosed: any;
onOpened: any;
open: (opts: OpenDialogProps) => Promise<any>;
[key: string]: any;
};
/**
* 按钮配置
*/
export type ButtonProps<E = any> = {
/**
* 按钮文本
*/
text?: NullableString;
/**
* 图标
* [图标的使用](/guide/start/icon.html)
*/
icon?: ButtonIconProps;
/**
* 文本右侧图标
*/
iconRight?: string;
/**
* 是否圆形按钮
*/
circle?: boolean;
/**
* 序号
*/
order?: number;
/**
* 是否折叠此按钮,仅当rowHandle时有效
* 当配置为true,将会收起到dropdown中
*/
dropdown?: boolean;
/**
* 当按钮作为折叠时,折叠按钮的额外配置
*/
dropdownItem?: any;
/**
* 点击事件
*/
click?: (context: E) => void;
show?: boolean;
/**
* 其他按钮配置 [a|el|n]-button的配置,请查看对应ui组件的文档
*/
[key: string]: any;
};
export type ButtonsProps<E> = TypeMap<ButtonProps<E>>;
export type TypeMap<T> = {
[key: string]: T;
};
export type ActionbarClickEvent = {
key: string;
btn: ButtonProps;
$event: any;
};
export type ActionbarProps = {
buttons?: ButtonsProps<ActionbarClickEvent>;
[key: string]: any;
};
export type SearchEventContext<R = any> = {
form: R;
validatedForm: R;
getComponentRef?: (key: string) => any;
doSearch?: () => void;
doReset?: () => void;
doValidate?: (silent: boolean, trigger: string) => Promise<boolean>;
};
/**
* 查询框配置
*/
export type SearchProps<R = any> = {
/**
* 是否显示查询框
*/
show?: boolean;
/**
* 初始化查询表单数据,reset会还原成此对象
*/
initialForm?: Record<string, R>;
/**
* 校验成功后的表单数据,无需手动配置
*/
validatedForm?: Record<string, R>;
/**
* 查询框的按钮配置(查询和重置按钮,你还可以添加自定义按钮)
*/
buttons?: ButtonsProps<SearchEventContext>;
/**
* 查询框容器
*/
container?: {
is?: string;
collapse?: boolean;
/**
* 按钮组 form-item配置
*/
action?: {
label?: string;
col?: {
span?: number;
[key: string]: any;
};
[key: string]: any;
};
collapseButton?: ButtonProps;
/**
* 布局方式:【single-line单行, multi-line多行】
*/
layout?: string;
[key: string]: any;
};
/**
* 查询表单参数 ,[a|el|n]-form的参数
*/
options?: any;
/**
* 其他配置
*/
[key: string]: any;
};
/**
* 搜索框字段配置
*/
export type SearchItemProps<R = any> = {
/**
* 搜索框是否显示此字段组件
*/
show?: boolean;
/**
* 组件配置
*/
component?: ComponentProps;
/**
* 值解析器
* @param context
*/
valueResolve?: (context: ValueResolveContext<R>) => void;
/**
* 字段排序号
*/
order?: number;
/**
* [a|el|n]-col的配置
*/
col?: ColProps;
/**
* 此字段是否开启触发自动查询, 传入string则表示,[input,change,enter]事件时触发
*/
autoSearchTrigger?: boolean | string;
/**
* 值变化事件
*/
valueChange?: ValueChangeHandle<R> | ValueChangeProps<R>;
/**
* 其他[a|el|n]-form-item的配置
*/
[key: string]: any;
};
export type TableColumnsProps<R = any> = {
[key: string]: ColumnProps<R>;
};
/**
* 表格列配置(单元格)
*/
export type ColumnProps<R = any> = {
key?: string;
/**
* 单元格组件配置
*/
component?: ComponentProps<R>;
/**
* 在列设置中是否禁用勾选
*/
columnSetDisabled?: boolean;
/**
* 在列设置中是否显示此字段
*/
columnSetShow?: boolean;
/**
* 此列是否显示
*/
show?: boolean;
/**
* 列排序号
*/
order?: number;
/**
* 格式化方法,比如格式化一下时间
* @param scope
*/
formatter?: (scope: ScopeContext<R>) => string;
/**
* 自定义render方法
* @param scope
*/
cellRender?: (scope: ScopeContext<R>) => any;
/**
* 多级表头
*/
children?: TableColumnsProps<R>;
/**
* 单元格值变化事件处理
*/
valueChange?: ValueChangeHandle<R> | ValueChangeProps<R>;
/**
* 是否支持导出
*/
exportable?: boolean;
/**
* 单元格可编辑配置
*/
editable?: TableColumnEditableProps<R>;
/**
* element-plus 列自定插槽配置,可以自定义header
*/
columnSlots?: Record<string, any>;
/**
* 其他x-table-column配置
*/
[key: string]: any;
};
/**
* valueBuild参数
*/
export type ValueBuilderContext<R = any> = {
value: any;
key: keyof R;
row?: R;
form?: R;
index?: number;
mode?: string;
column?: ColumnCompositionProps<R>;
};
export type ValueResolveContext<R = any> = ValueBuilderContext<R>;
/**
* 列综合配置
*/
export type ColumnCompositionProps<R = any> = {
/**
* 列标题
*/
title?: string;
/**
* key
*/
key?: keyof R;
/**
* 字段类型,【默认可以用:text】
*/
type?: string | string[];
/**
* 表格列配置(单元格)
*/
column?: ColumnProps<R>;
/**
* 表单字段配置
*/
form?: FormItemProps<R>;
/**
* 添加表单字段配置(与form合并)
*/
addForm?: FormItemProps<R>;
/**
* 编辑表单字段配置(与form合并)
*/
editForm?: FormItemProps<R>;
/**
* 查看表单字段配置(与form合并)
*/
viewForm?: FormItemProps<R>;
/**
* 查询框字段配置
*/
search?: SearchItemProps<R>;
/**
* 值构建器,pageRequest之后执行
* 从pageRequest获取到的字段数据值可能并不是组件能够识别的值,所以需要将其做一层转化
* 即row[key]=字段组件能够识别的值
* @param context
*/
valueBuilder?: (context: ValueBuilderContext<R>) => void;
/**
* 值解析器,表单提交前执行
* 表单输出的值可能不是后台所需要的值,所以需要在提交前做一层转化
* 即:row[key]=后台能所需要的值
* @param context
*/
valueResolve?: (context: ValueResolveContext<R>) => void;
/**
* dict,会复制到各个component中去
*/
dict?: Dict;
/**
* 多级表头
*/
children?: CompositionColumns<R>;
/**
* 其他配置
*/
[key: string]: any;
};
/**
* 底部翻页条配置
*/
export type PaginationProps = {
/**
* 是否显示pagination
*/
show?: boolean;
/**
* [x]-pagination组件的其他配置
*/
[key: string]: any;
};
type RowHandleDropdownProps<R = any> = {
/**
* 更多按钮配置
*/
more?: ButtonProps;
[key: string]: any;
};
type RowHandleGroupProps<R = any> = {
/**
* 按钮组组key
*/
[groupKey: string]: {
/**
* 按钮
*/
[buttonKey: string]: ButtonProps;
};
};
/**
* 操作列配置
*/
export type RowHandleProps<R = any> = {
/**
* 是否显示操作列
*/
show?: boolean;
/**
* 操作列按钮配置
*/
buttons?: ButtonsProps<ScopeContext<R>>;
/**
* 按钮折叠
*/
dropdown?: RowHandleDropdownProps<R>;
/**
* 额外的按钮组
* 激活时就显示,没激活的不显示
* 同一时间只能激活一组
*/
group?: RowHandleGroupProps<R>;
/**
* 当前激活是哪个分组
* 默认为default,激活的buttons里面配置的按钮组
*/
active?: string;
/**
* 其他配置
*/
[key: string]: any;
};
/**
* 复合columns配置
*/
export type CompositionColumns<R = any> = {
[K in keyof R]: ColumnCompositionProps<R>;
};
export type CrudOptionsPluginOpts = {
before?: boolean;
order?: number;
};
export type CrudOptionsPluginReg = {
handle: CrudOptionsPluginHandle;
opts?: CrudOptionsPluginOpts;
};
export type CrudOptionsPluginHandle<T = any, R = any> = (props: T, ctx: UseCrudProps, crudOptions: any) => CrudOptions<R>;
export type CrudOptionsPlugin<T, R = any> = {
/**
* 是否启用,默认启用
*/
enabled?: boolean;
/**
* 插件参数
*/
props?: T;
/**
* 插件顺序
*/
order?: number;
/**
* 合并在用户的CrudOptions之前还是之后
*/
before?: boolean;
/**
* 插件处理器
*/
handle?: CrudOptionsPluginHandle<T, R>;
};
export type CrudOptionsPlugins<R = any> = {
/**
* 行选择插件
*/
rowSelection?: CrudOptionsPlugin<RowSelectionProps, R>;
[key: string]: CrudOptionsPlugin<any, R>;
};
/**
* crud配置
*/
export type CrudOptions<R = any> = {
/**
* 列配置
*/
columns?: CompositionColumns<R>;
} & CrudBinding<R>;
export type CrudSettings<R = any> = {
viewFormUseCellComponent?: boolean;
searchCopyFormProps?: string[];
onUseCrud?: (bindings: CrudBinding<R>) => void;
/**
* crudOptions插件,插件能够生成一些crudOptions配置,并与用户的crudOptions进行合并
*/
plugins?: CrudOptionsPlugins<R>;
};
export type CrudMode = {
/**
* 模式名称: local,remote
*/
name?: string;
/**
* 更新时是否将表单值merge到行数据中
*/
isMergeWhenUpdate?: boolean;
/**
* 添加时是否在列表最后插入
*/
isAppendWhenAdd?: boolean;
[key: string]: any;
};
export type TabsFilterDefaultOption = {
show?: boolean;
value?: any;
label?: string;
};
export type TabsFilterOption = {
value: any;
label: string;
[key: string]: any;
};
export interface TabsFilterProps<R = any> {
/**
* 目标字段的key,查询时作为search的key
*/
name: string;
/**
* 是否显示
*/
show?: boolean;
/**
* 全部选项卡(第一个选项卡)的配置
*/
defaultOption?: TabsFilterDefaultOption;
/**
* 选项,如果目标字段配置了dict,那么将自动通过dict生成,无需配置
*/
options?: TabsFilterOption[];
/**
* 选项value的名称
*/
value?: string;
/**
* 选项label的名称
*/
label?: string;
/**
* change事件
* @param context
*/
onChange?: (context: any) => void;
/**
* tabs 显示类型
*/
type?: string;
/**
* x-tabs 其他属性
*/
[key: string]: any;
}
/**
* crudBinding
*/
export type CrudBinding<R = any> = {
/**
* 表格id
*/
id?: string;
settings?: CrudSettings;
/**
* 模式
*/
mode?: CrudMode;
/**
* 表格配置
*/
table?: TableProps<R>;
/**
* 列表数据,一般会从pageRequest之后更新
*/
data?: R[];
/**
* 操作列配置
*/
rowHandle?: RowHandleProps<R>;
/**
* 查询框配置
*/
search?: SearchProps<R>;
/**
* 右上角工具条配置
*/
toolbar?: ToolbarProps;
/**
* 左上角动作条(默认添加按钮)
*/
actionbar?: ActionbarProps;
/**
* Tabs快捷查询组件
*/
tabs?: TabsFilterProps<R>;
/**
* 表单配置
*/
form?: FormProps<R>;
/**
* 添加表单的独立配置(与form配置合并)
*/
addForm?: FormProps<R>;
/**
* 编辑表单的独立配置(与form配置合并)
*/
editForm?: FormProps<R>;
/**
* 查看表单的独立配置(与form配置合并)
*/
viewForm?: FormProps<R>;
/**
* 底部翻页组件配置
*/
pagination?: PaginationProps;
/**
* http请求配置
*/
request?: RequestProp<R>;
/**
* crud外部容器配置
*/
container?: ContainerProps;
/**
* 其他配置
*/
[key: string]: any;
};
export type ComputeRef<RV = any, R = any> = {
computeFn: (context: ComputeContext<R>) => RV;
};
export type ComputeFn<RV = any, R = any> = (context: ComputeContext<R>) => RV;
export type AsyncComputeRef<RV = any, R = any, WV = any> = {
watch?: (context: ScopeContext<R>) => WV;
asyncFn: (value: WV, getContextFn: GetContextFn) => Promise<RV>;
defaultValue?: RV;
};
export type RefableType<T = any, R = any> = Ref<T> | ComputedRef<T> | ComputeRef<T, R> | AsyncComputeRef<T, R> | DynamicType<T, R>;
export type DynamicType<T = any, R = any> = {
[P in keyof T]: T[P] | RefableType<T[P], R>;
};
/**
* crudOptions支持动态化配置
*/
export type DynamicallyCrudOptions<R = any> = DynamicType<CrudOptions<R>, R>;
export {};