@flatbiz/antd 4.4.5 → 4.4.7

package/index.d.ts

@@ -5,7 +5,7 @@
 import { API, ModelType } from '@dimjs/model';
 import { DateFormatType, TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils';
 import { IAllProps } from '@tinymce/tinymce-react';
-import { AlertProps, ButtonProps, CardProps, CascaderProps, CheckboxProps, CollapseProps, ColorPickerProps, DrawerProps, DropdownProps, FormInstance, FormItemProps, FormListFieldData, FormListOperation, InputNumberProps, InputProps, MentionProps, ModalProps, PaginationProps, PopconfirmProps, PopoverProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, TabsProps, TagProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
+import { AlertProps, ButtonProps, CardProps, CascaderProps, CheckboxProps, CollapseProps, ColorPickerProps, DrawerProps, DropdownProps, FormInstance, FormItemProps, FormListFieldData, FormListOperation, FormProps, InputNumberProps, InputProps, MentionProps, ModalProps, PaginationProps, PopconfirmProps, PopoverProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, TabsProps, TagProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
 import { ConfigProviderProps } from 'antd/es/config-provider';
 import { PickerDateProps, RangePickerDateProps } from 'antd/es/date-picker/generatePicker';
 import { FormListProps } from 'antd/es/form';
@@ -301,16 +301,69 @@ export type BootstrapProps = {
  * ```
  */
 export declare const Bootstrap: (props: BootstrapProps) => import("react/jsx-runtime").JSX.Element;
+declare const PresetDefaultGrid: {
+	xs: number;
+	sm: number;
+	md: number;
+	lg: number;
+	xl: number;
+	xxl: number;
+};
+export type TBoxBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export interface ICommonReact {
+	children?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+}
+export type Gutter = number | undefined | Partial<Record<TBoxBreakpoint, number>>;
+export type GutterParams = Gutter | [
+	Gutter,
+	Gutter
+];
+export interface BoxRowProps {
+	/**
+	 * 默认的栅格配置
+	 */
+	defaultGrid?: Partial<typeof PresetDefaultGrid>;
+	/** 间距 */
+	gutter?: GutterParams;
+	/** flex 布局的垂直对齐方式 */
+	align?: "top" | "middle" | "bottom" | "stretch";
+	/** flex 布局的水平排列方式 */
+	justify?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly";
+}
+export type BoxColProps = {
+	/** 栅格占位格数，固定分数，为0相当于隐藏 */
+	span?: number;
+	/** 屏幕 < 576px  */
+	xs?: number;
+	/** 屏幕 ≥ 576px */
+	sm?: number;
+	/** 屏幕 ≥ 768px */
+	md?: number;
+	/** 屏幕 ≥ 992px */
+	lg?: number;
+	/** 屏幕 ≥ 1200px */
+	xl?: number;
+	/** 屏幕 ≥ 1600px */
+	xxl?: number;
+};
+export declare const BoxGrid: {
+	Row: import("react").FC<BoxRowProps & ICommonReact>;
+	Col: import("react").FC<BoxColProps & ICommonReact>;
+};
 export type ButtonWrapperProps = Omit<ButtonProps, "onClick"> & {
+	/** 当返回 Promise 时，按钮自动loading */
 	onClick?: (e: React.MouseEvent<HTMLElement>) => Promise<TAny> | void;
+	/** 重复点击间隙，单位毫秒 默认值：500 */
 	debounceDuration?: number;
+	/** 基于GLOBAL中elemAclLimits按钮权限列表，控制按钮显示、隐藏 */
 	permission?: string;
+	/** 是否隐藏按钮 */
 	hidden?: boolean;
 	/** loading 显示位置，默认值：left */
 	loadingPosition?: "left" | "center";
-	/**
-	 * 移除间隙，一般用于 type=link 类型下
-	 */
+	/** 移除按钮内边距，一般用于 type=link 类型下 */
 	removeGap?: boolean;
 };
 /**
@@ -321,7 +374,7 @@ export type ButtonWrapperProps = Omit<ButtonProps, "onClick"> & {
  * @returns
  */
 export declare const ButtonWrapper: (props: ButtonWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
-export type DialogModalProps = Omit<ModalProps, "onOk" | "onCancel" | "getContainer" | "open" | "open" | "okButtonProps" | "cancelButtonProps"> & {
+export type DialogModalProps = Omit<ModalProps, "onOk" | "onCancel" | "getContainer" | "open" | "open" | "okButtonProps" | "cancelButtonProps" | "footer"> & {
 	onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
 	onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
 	content: string | ReactElement | ((form: FormInstance, operate: {
@@ -341,6 +394,8 @@ export type DialogModalProps = Omit<ModalProps, "onOk" | "onCancel" | "getContai
 	 */
 	bodyHeightPercent?: number;
 	titleExtra?: ReactElement;
+	/** null则隐藏footer */
+	footer?: null | ReactElement;
 };
 /**
  * 居中弹框
@@ -393,15 +448,14 @@ export interface DropdownMenuWrapperProps extends Omit<DropdownProps, "menu"> {
  */
 export declare const DropdownMenuWrapper: (props: DropdownMenuWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export interface ButtonOperateItem extends ButtonWrapperProps {
-	hidden?: boolean;
 	/** hover 提示文字，isFold=true无效 */
 	hoverTips?: string | React.ReactElement;
 	/** hover 提示类型 默认：'tooltip' */
 	tipsType?: "popover" | "tooltip";
+	/** 按钮文案 */
 	text?: string | ReactElement;
+	/** 自定义按钮颜色 */
 	color?: string;
-	onClick?: (event: React.MouseEvent<HTMLElement>) => void | Promise<void>;
-	permission?: string;
 	/** 是否需要二次弹框确认 */
 	needConfirm?: boolean;
 	/** 二次弹框确认文案  */
@@ -412,6 +466,8 @@ export interface ButtonOperateItem extends ButtonWrapperProps {
 	confirmModalProps?: DialogModalProps;
 }
 export interface ButtonOperateProps {
+	className?: string;
+	style?: CSSProperties;
 	/**
 	 * 如果数组中元素为ReactElement类型
 	 * 1. 一般为antd Button组件，如果组件存在属性hidden=true，则会隐藏
@@ -420,14 +476,16 @@ export interface ButtonOperateProps {
 	 * 3. 不支持fold效果
 	 */
 	operateList: Array<ButtonOperateItem | null | ReactElement>;
+	/** 是否换行，默认true */
 	wrap?: boolean;
+	/** 隐藏图标Icon */
 	foldIcon?: ReactElement;
-	className?: string;
+	/** 按钮之间是否添加分隔符 */
 	split?: boolean;
+	/** 多个按钮的包装组件Space属性 */
 	spaceProps?: SpaceProps;
 	/** 间距，默认：10；split=true配置下无效（可通过spaceProps设置间距） */
 	gap?: number;
-	style?: CSSProperties;
 	/** 折叠合拢属性 */
 	dropdownMenuProps?: Omit<DropdownMenuWrapperProps, "menuList">;
 }
@@ -444,7 +502,9 @@ export declare const ButtonOperateItemContent: (props: Pick<ButtonOperateItem, "
  */
 export declare const ButtonOperate: FC<ButtonOperateProps>;
 export type CardLayoutProps = {
+	/** 描述 */
 	desc?: string | string[] | ReactElement | ReactElement[];
+	/** 标题 */
 	title?: string | ReactElement;
 	/**
 	 * layoutType 布局类型
@@ -478,9 +538,9 @@ export type CardLayoutProps = {
 	size?: "default" | "small";
 	onClick?: (event: any) => void;
 	hidden?: boolean;
+	children?: ReactNode;
 	className?: string;
 	style?: CSSProperties;
-	children?: ReactNode;
 };
 /**
  * 卡片结构布局，替代 SimpleLayout 组件
@@ -838,14 +898,36 @@ export interface FormItemWrapperProps extends FormItemProps {
 	 * 如果设置 normalize 属性，outputNormalize将失效
 	 */
 	outputNormalize?: (value?: TAny) => TAny;
-	/** 是否清楚 Form.Item  */
+	/** 是否清除 Form.Item  */
 	isClear?: boolean;
+	/**
+	 * label宽度
+	 * ```
+	 * 1. 如果想控制Form下所有label，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性
+	 * ```
+	 */
+	labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
+	/**
+	 * labelItem 竖直布局
+	 * ```
+	 * 1. 如果想控制Form下所有labelItem，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性
+	 * ```
+	 */
+	labelItemVertical?: true;
+	/**
+	 * label 对齐方式
+	 * ```
+	 * 1. 如果想控制Form下所有labelAlign，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性
+	 * ```
+	 */
+	labelAlign?: "left" | "right";
 }
 /**
  * 对 Form.Item 包装处理
  * ```
  * 1. 为 children 增加 before、after
  * 2. 对输入、输出数据进行序列化处理
+ * 3. 内置布局样式使用 preDefinedClassName.formItem
  * ```
  */
 export declare const FormItemWrapper: (props: FormItemWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -1777,6 +1859,55 @@ export declare const dynamicNode: {
 	};
 	remove: (elementId?: string) => void;
 };
+export type FormWrapperProps<Values = any> = FormProps<Values> & {
+	children: ReactNode;
+	/** label宽度，Form内部所有FormItem label都生效 */
+	labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
+	/** labelItem 竖直布局 */
+	labelItemVertical?: true;
+	/** label 对齐方式 */
+	labelAlign?: "left" | "right";
+	/** formItem之间竖直间距，默认值：24 */
+	formItemGap?: "15" | "8" | "5" | "0";
+};
+/**
+ * Form 包装组件，添加对formItem的布局控制
+ * ```
+ * 1. 内置布局样式使用 preDefinedClassName.form
+ * ```
+ */
+export declare const FormWrapper: (props: FormWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
+	children: ReactElement | ReactElement[];
+	/** 一行显示几列，定义FormItem网格占比 */
+	column?: 1 | 2 | 3 | 4;
+};
+/**
+ * 简单Form布局，可自定义网格布局
+ * ```
+ * 1. EasyForm 子节点包含 hidden = true 会被忽略
+ * 2. 通过 column 可修改一行显示几列FormItem
+ * 3. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/label
+ * <EasyForm column={3}>
+	<Form.Item name="field1" label="条件1">
+	  <Input placeholder="请输入" allowClear={true} />
+	</Form.Item>
+	<Form.Item name="field2" label="条件2">
+	  <Input placeholder="请输入" allowClear={true} />
+	</Form.Item>
+	<!-- ！！！可通过使用 FormGrid.Col 包裹元素来自定义网格占比 ！！！  -->
+	<FormGrid.Col span={24}>
+	  <Form.Item name="field5" label="条件5">
+		<Input placeholder="请输入" allowClear={true} />
+	  </Form.Item>
+	</FormGrid.Col>
+	<Form.Item name="field6" label="条件6">
+	  <Input placeholder="请输入" allowClear={true} />
+	</Form.Item>
+  </EasyForm>
+ * ```
+ */
+export declare const EasyForm: (props: EasyFormProps) => import("react/jsx-runtime").JSX.Element;
 export type TEasyTableTableColumn<T> = ColumnsType<T>[0] & {
 	/**
 	 * @description 请使用 tipsWrapperProps 属性配置
@@ -1807,8 +1938,9 @@ export type EasyTableRefApi = {
 	onRequest: (params?: TPlainObject) => void;
 	/** 获取请求参数 */
 	getRequestParams: () => TPlainObject;
-	/** 清楚查询条件 */
+	/** 清除查询条件 */
 	clearQueryCondition: (values?: TPlainObject) => Promise<void>;
+	/** 搜素表单实例 */
 	form: FormInstance;
 	/** 重置请求 */
 	onResetRequest: (params?: TPlainObject) => void;
@@ -1828,7 +1960,6 @@ export type EasyTableServiceConfig = {
 	requestParamsAdapter?: (params: TPlainObject) => TPlainObject;
 	/**
 	 * 接口相应数据处理
-	 * @param params
 	 * ```
 	 * 返回数据为对象，包含两个字段
 	 * 1. 表格列表数据 - Array
@@ -1908,6 +2039,7 @@ export type EasyTableProps = {
 	};
 	/** 初始化是否请求，默认值：true */
 	initRequest?: boolean;
+	/** 表格数据变更回调 */
 	onDataSourceChange?: (dataSource: TAny) => void;
 	/** 如果自定义查询按钮，可设置 Form onFinish */
 	onFormFinish?: (values?: TPlainObject) => void;
@@ -1926,11 +2058,7 @@ export type EasyTableProps = {
 	 * 查询条件展开、收起，被收起key数组；数组内容为EasyTable.Filter 子节点key值
 	 */
 	foldKeys?: string[];
-	/**
-	 * 自定义处理服务异常
-	 * @param error
-	 * @returns
-	 */
+	/** 自定义处理服务异常 */
 	onRequestErrorHandle?: (error: any) => void;
 	/**
 	 * 是否inline模式
@@ -1984,9 +2112,9 @@ export type EasyTableFilterProps = {
 	formGridSize?: FormRowProps["gridSize"];
 	formClassName?: string;
 	formStyle?: CSSProperties;
-	/** filter Form 外层 SimpleLayout style */
+	/** filter Form 外层 BlockLayout style */
 	filterWrapperStyle?: CSSProperties;
-	/** filter Form 外层 SimpleLayout className  */
+	/** filter Form 外层 BlockLayout className  */
 	filterWrapperClassName?: string;
 	/**
 	 * 自定义 filterOperate.rightList 后 默认【查询、重置】按钮处理逻辑
@@ -2017,6 +2145,19 @@ export type EasyTableTableProps<T> = Omit<TableProps<TAny>, "dataSource" | "load
 	/** table Form 外层 SimpleLayout className  */
 	tableWrapperClassName?: string;
 	columns: TEasyTableTableColumn<T>[];
+	/**
+	 * 数据加载与表格初始化渲染 是否同步
+	 * @version 4.4.6
+	 * ```
+	 * 1. true：获取数据后再初始化渲染表格（可用于实现表格中defaultXxxx相关功能的使用）
+	 * ```
+	 */
+	isSync?: boolean;
+	/**
+	 * 空效果显示尺寸，默认值：small
+	 * @version 4.4.6
+	 */
+	emptyShowSize?: "small" | "large";
 };
 /**
  * 对 查询条件+表格数据 进行深度封装，内置数据交互处理
@@ -3220,6 +3361,16 @@ export type SearchFormProps = {
 	formGridSize?: FormRowProps["gridSize"];
 	formClassName?: string;
 	formStyle?: CSSProperties;
+	/** form 初始值 */
+	formInitialValues?: TPlainObject;
+	/** label宽度，Form内部所有FormItem label都生效 */
+	formLabelWidth?: FormWrapperProps["labelWidth"];
+	/** labelItem 竖直布局 */
+	formLabelItemVertical?: FormWrapperProps["labelItemVertical"];
+	/** label 对齐方式 */
+	formLabelAlign?: FormWrapperProps["labelAlign"];
+	/** formItem之间竖直间距，默认值：24 */
+	formFormItemGap?: FormWrapperProps["formItemGap"];
 	/**
 	 * 自定义 searchOperate.rightList 后 默认【查询、重置】按钮处理逻辑
 	 * 1. cover：覆盖内部查询重置按钮（默认值）
@@ -3231,8 +3382,10 @@ export type SearchFormProps = {
 	rightOperateAreaAppendType?: "cover" | "beforeAppend" | "afterAppend";
 	/** 默认重启按钮触发请求，默认值：true */
 	defaultResetButtonTriggerRequest?: boolean;
+	/**
+	 * 展开、收起key值列表（内容当前组件子组件key值）
+	 */
 	foldKeys?: string[];
-	formInitialValues?: TPlainObject;
 	/**
 	 * 按钮提交事件
 	 * 如果需要自定义回车提交事件，需要自定义提交按钮
@@ -3251,6 +3404,7 @@ export type SearchFormProps = {
 	cacheSwitch?: boolean;
 	/** 初始化是否请求，默认值：true */
 	initRequest?: boolean;
+	form?: FormInstance;
 };
 export type SearchFormRefApi = {
 	onQuery: (values?: TPlainObject) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatbiz/antd",
-  "version": "4.4.5",
+  "version": "4.4.7",
   "description": "flat-biz ui components",
   "main": "index.js",
   "typings": "index.d.ts",