@flatbiz/antd

import { TAny, TPlainObject } from '@flatbiz/utils'; import { FormItemProps, FormListOperation, PopoverProps, TableProps, TooltipProps } from 'antd'; import { FormListProps } from 'antd/es/form'; import { ColumnsType } from 'antd/es/table'; import { CSSProperties, ReactElement, ReactNode } from 'react'; export type TFormItemLayoutPreClassNameProps = { /** * label宽度，Form内部所有FormItem label都生效 * ``` * 1. 可设置数值 * 2. 可设置`auto`自适应 * ``` */ labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200"; /** labelItem 竖直布局 */ labelItemVertical?: boolean; /** label 对齐方式 */ labelAlign?: "left" | "right"; /** * className 中可能会包含 preDefinedClassName.formItem.xx，优先级大于 labelWidth、labelItemVertical、labelAlign */ className?: string; }; export type FormItemWrapperProps = Omit<FormItemProps, "hidden" | "children" | "noStyle"> & TFormItemLayoutPreClassNameProps & { wrapper?: (children: ReactNode) => ReactElement; /** 设置wrapper后，before、after失效 */ before?: ReactNode; /** 设置wrapper后，before、after失效 */ after?: ReactNode; /** 设置 before、after 属性的包装结构style */ beforeAfterStyle?: CSSProperties; /** value 序列化处理 */ inputNormalize?: (value?: TAny) => TAny; /** * onChange 参数序列化处理 * 如果设置 normalize 属性，outputNormalize将失效 */ outputNormalize?: (value?: TAny) => TAny; /** * 隐藏 Form.Item，同时清除 Form.Item 值 * ``` * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏 * 2.提交不校验rules * ``` */ isClear?: boolean | ((formValues: TPlainObject) => boolean); /** * 隐藏 Form.Item，不会清除 Form.Item 值 * ``` * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏 * 2.提交会校验rules * ``` */ hidden?: boolean | ((formValues: TPlainObject) => boolean); /** * 栅格占位格数，最大值：24 * ``` * 1. 当前FormItemWrapper处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数； * 2. 父节点使用属性值，当前节点不使用属性值 * ``` */ span?: number; /** 不支持函数式写法，如果需要使用dependencies获取表单值，可使用FormItemWrapperDependencies 组件 */ children?: ReactNode; /** * ``` * 1. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常 * 2. 在FormItemWrapper中使用 dependencies 逻辑不需要设置 noStyle * ``` */ noStyle?: boolean; }; export type TipsWrapperProps = { gap?: number; className?: string; style?: CSSProperties; children?: ReactNode; icon?: ReactElement; /** Icon添加点击事件，设置hoverTips后失效 */ onClick?: (event: any) => void; /** * 提示效果类型 * ``` * 1. popover 气泡卡片，内容通过popoverProps设置 * 2. tooltip 文字提示，内容通过tooltipProps设置 * ``` */ tipType?: "popover" | "tooltip"; popoverProps?: PopoverProps; tooltipProps?: TooltipProps; trigger?: "icon" | "all"; }; export type EditableTableProDataIndex = string | readonly (string | number)[]; export interface EditableTableProOperation { add: (defaultValue: TPlainObject, insertIndex?: number) => void; remove: (index: number) => void; /** 同一级内移动 */ move: (fromIndex: number, toIndex: number) => void; /** 是否可编辑 */ editable: boolean; /** 当前行数据层级 */ level: number; /** 设置当前行指定字段值 */ setCurrentRowTargetField: (dataIndexConfigs: { name: EditableTableProDataIndex; value?: TAny; }[]) => void; /** 设置当前行 children 数据 */ setCurrentRowChildrenValue: (value?: TPlainObject[]) => void; /** 当前行父级数据 */ parentItem: TPlainObject | null; /** 当前行表单 name */ tableRowFormItemName: Array<string | number>; /** 当前行表单完整 name */ tableRowFormItemCompleteName: Array<string | number>; /** 当前行表单验证，需要自行指定nameList（dataIndex数组） */ validateRowFields: (nameList: EditableTableProDataIndex[]) => Promise<void>; } export type EditableTableProColumnItem = Omit<ColumnsType[0], "render" | "title" | "dataIndex"> & { title?: ReactElement | string; dataIndex?: EditableTableProDataIndex; /** Form.Item props */ formItemProps?: Omit<FormItemWrapperProps, "children" | "name"> | ((value: TAny, record: TPlainObject, index: number, operation: EditableTableProOperation) => Omit<FormItemWrapperProps, "children" | "name">); /** * 通过 operation.editable 来判断渲染结构，其中render返回的根节点会作为 Form.Item 的children * ``` * 例如 * render: (_value, _record, _index, operation) => { * if (operation.editable) { * return <Input placeholder="请输入" />; * } * return <Tag>{value}</Tag>; * } * * 如果需要额外布局，可通过 formItemProps.wrapper 实现 * formItemProps: (_value, _record, _index, operation) => { * return { * wrapper: (children) => { * return ( * <FlexLayout fullIndex={[0]} direction="horizontal" gap={10}> * <div>{children}</div> * <div>额外布局</div> * </FlexLayout> * ); * }, * }; * }, * render: (_value, _record, _index, operation) => { * if (operation.editable) { * return <Input placeholder="请输入" />; * } * return <Tag>{value}</Tag>; * } * ``` */ render?: (value: TAny, record: TPlainObject, index: number, operation: EditableTableProOperation) => ReactElement; /** 是否可编辑 */ editable: boolean | ((record: TPlainObject, index: number) => boolean); /** * 会在 title 之后展示一个 icon * ``` * 1. title为string类型有效 * 2. 可为icon添加提示效果 * 3. 可为icon添加点击事件 * ``` */ tipsWrapperProps?: string | TipsWrapperProps; /** 为表格header中的字段添加必填标识，如果未配置 formItemProps.rules，内部会新增一条required rule */ required?: boolean; }; export type EditableTableProProps = { columns: EditableTableProColumnItem[]; /** * 当前Edittable处在formList内部时（必填），完整formItem的name * ``` * 例如处在formList内部 * 1. formListName=[0,dataList] * 2. formListCompleteName=[xxxList, 0, dataList] * ``` */ formListCompleteName?: Array<string | number>; /** Form.List name */ formListName: Array<string | number> | string; /** 唯一值字段Key */ uidFieldKey: string; /** 初始化值 */ initialValue?: TPlainObject[]; /** 指定树形结构的列名，默认值：children */ childrenColumnName?: string; /** 表格组件配置 */ tableProps?: Omit<TableProps<TPlainObject>, "dataSource" | "columns" | "rowKey"> & { cellVerticalAlign?: "baseline" | "middle" | "top" | "bottom"; }; /** * Form.List rules * ``` rules={[ { validator: async (_, names) => { if (!names || names.length < 2) { return Promise.reject(new Error('At least 2 passengers')); } }, }, ]} * ``` */ rules?: FormListProps["rules"]; className?: string; style?: CSSProperties; /**`默认新增按钮`新增行默认值，hiddenFooterBtn != true 有效 */ addRowDefaultValues?: () => TPlainObject; /** 隐藏底部`新增`按钮 */ hiddenFooterBtn?: boolean; /** 表格顶部区域渲染 */ tableBeforeAreaRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null; /** 表格底部区域渲染 */ tableAfterAreaRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null; /** 展开的行key，一般用于初始化，重新tableProps.expandable.expandedRowKeys后失效 */ expandedRowKeys?: string[]; /** * 展开图标布局，默认：layout1 * ``` * 1. 可编辑表格第一项为可编辑状态时，选 layout1 * 2. 可编辑表格第一项为非可编辑状态时，选 layout2 * ``` */ expandedIconLayout?: "layout1" | "layout2"; }; /** * 使用FormList实现可编辑表格 * ``` * 1. 必须在外部包裹Form组件 * 2. 表格数据源数组中必须存在唯一值字段，通过uidFieldKey配置 * 3. 可嵌套编辑，数据嵌套的节点名称可通过 childrenColumnName设置，默认：children * 4. 行内需要联动逻辑可使用 column.render.operation.setCurrentRowTargetField 方法 * 5. 在多级编辑中，可通过 column.render.operation.level 判断当前行数据层级 * 6. 不存在多级的情况下，可使用DragEditableTablePro组件实现拖拽排序 * 7. 存在多级的情况下，可通过 column.render.operation.move 方法实现同一级内移动 * * demo * https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable1 * https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable2 * https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable4 * ``` */ export declare const EditableTablePro: (props: EditableTableProProps) => import("react").JSX.Element; export {};