@flatbiz/antd 4.4.13 → 4.4.14

package/index.d.ts

@@ -943,7 +943,45 @@ export type DateRangePickerWrapperProps = Omit<RangePickerDateProps<TAny>, "valu
  * ```
  */
 export declare const DateRangePickerWrapper: (props: DateRangePickerWrapperProps) => import("react/jsx-runtime").JSX.Element;
-export interface FormItemWrapperProps extends FormItemProps {
+export type TFormLayoutPreClassNameProps = {
+	/**
+	 * 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";
+	/** formItem之间竖直间距，默认值：24 */
+	formItemGap?: "15" | "8" | "5" | "0";
+	/**
+	 * className 中可能会包含 preDefinedClassName.form.xx，优先级大于 labelWidth、labelItemVertical、labelAlign、formItemGap
+	 */
+	className?: string;
+};
+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 = FormItemProps & TFormItemLayoutPreClassNameProps & {
 	wrapper?: (children: ReactNode) => ReactElement;
 	/** 设置wrapper后，before、after失效 */
 	before?: ReactNode;
@@ -958,28 +996,6 @@ export interface FormItemWrapperProps extends FormItemProps {
 	outputNormalize?: (value?: TAny) => TAny;
 	/** 是否清除 Form.Item  */
 	isClear?: boolean;
-	/**
-	 * label宽度
-	 * ```
-	 * 1. 如果想控制Form下所有label，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性
-	 * 2. 可设置`auto`自适应
-	 * ```
-	 */
-	labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
-	/**
-	 * labelItem 竖直布局
-	 * ```
-	 * 1. 如果想控制Form下所有labelItem，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性
-	 * ```
-	 */
-	labelItemVertical?: boolean;
-	/**
-	 * label 对齐方式
-	 * ```
-	 * 1. 如果想控制Form下所有labelAlign，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性
-	 * ```
-	 */
-	labelAlign?: "left" | "right";
 	/**
 	 * 栅格占位格数，最大值：24
 	 * ```
@@ -987,7 +1003,7 @@ export interface FormItemWrapperProps extends FormItemProps {
 	 * ```
 	 */
 	span?: number;
-}
+};
 /**
  * 对 Form.Item 包装处理
  * ```
@@ -1454,6 +1470,7 @@ export type UploadWrapperProps<T extends TPlainObject = TPlainObject> = {
 /**
  * 文件上传
  * ```
+ * demo: https://fex.qa.tcshuke.com/docs/admin/main/file/upload
  * 1. 可通过配置children替换默认上传触发布局
  * 2. 接口返回结构：
  *    formData上传接口返回值
@@ -1471,6 +1488,14 @@ export type UploadWrapperProps<T extends TPlainObject = TPlainObject> = {
  * <Form.Item name="attachmentList" label="附件">
  *   <UploadWrapper action={uploadUrl} />
  * </Form.Item>
+ *
+ * 5. 回填数据结构
+ * [{
+ *    uid: '唯一值',
+ *    name（非必填）: 'image.png',
+ *    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ *  }]
+ * 其中 uid、name、url 可为其他命名，通过 fieldNames 进行映射即可
  * ```
  *
  */
@@ -1820,6 +1845,20 @@ export type DragFormListProps = {
 		children: ReactElement;
 	}) => ReactElement;
 	rules?: FormListProps["rules"];
+	/**
+	 * 设置FormList字段标题&必填标志
+	 * ```
+	 * demo: http://dev.flatjs.com:6007/pages/flat/oss-demo/main/form/list?env=me
+	 * 1. 会根据数组顺序进行渲染
+	 * ```
+	 */
+	formListItemTitleList?: {
+		title: string;
+		required?: boolean;
+		width?: number;
+	}[];
+	formListItemTitleClassName?: string;
+	formListItemTitleStyle?: CSSProperties;
 };
 /**
  * 可拖拽FormList
@@ -1928,22 +1967,8 @@ export declare const dynamicNode: {
 	};
 	remove: (elementId?: string) => void;
 };
-export type FormWrapperProps<Values = any> = FormProps<Values> & {
+export type FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & {
 	children: ReactNode;
-	/**
-	 * 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";
-	/** formItem之间竖直间距，默认值：24 */
-	formItemGap?: "15" | "8" | "5" | "0";
 };
 /**
  * Form 包装组件，添加对formItem的布局控制
@@ -1989,12 +2014,14 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
 	/** 网格间距 */
 	gridGutter?: BoxRowProps["gutter"];
 	children: ReactNode;
+	/** 是否为纯净模式，对EasyForm的子节点不做任何包装处理 */
+	isPure?: boolean;
 };
 /**
  * 简单Form布局，可自定义网格布局
  * ```
  * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
- * 2. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form属性失效，例如属性form、initialValues等都失效
+ * 2. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
  * 3. 布局网格以当前节点的宽度来计算的，不是屏幕宽度
  * 4. EasyForm 子节点包含 hidden = true 会被忽略
  * 5. 通过 column 可定义一行显示几列FormItem
@@ -2228,7 +2255,13 @@ export type EasyTableFilterProps = {
 	 * small = { xs: 24, sm: 8, md: 8, lg: 6, xl: 6, xxl: 6 };
 	 */
 	formGridSize?: FormRowProps["gridSize"];
+	/**
+	 * @deprecated已过期，使用 easyFormProps.className 配置
+	 */
 	formClassName?: string;
+	/**
+	 * @deprecated已过期，使用 easyFormProps.style 配置
+	 */
 	formStyle?: CSSProperties;
 	/** filter Form 外层 BlockLayout style */
 	filterWrapperStyle?: CSSProperties;
@@ -2245,6 +2278,7 @@ export type EasyTableFilterProps = {
 	rightOperateAreaAppendType?: "cover" | "beforeAppend" | "afterAppend";
 	/** 默认重启按钮触发请求，默认值：true */
 	defaultResetButtonTriggerRequest?: boolean;
+	easyFormProps?: Omit<EasyFormProps, "isPure" | "column" | "forceColumn" | "width" | "gridGutter" | "children">;
 };
 export type EasyTableTableProps<T> = Omit<TableProps<TAny>, "dataSource" | "loading" | "rowKey" | "columns"> & {
 	children?: ReactElement | ReactElement[];
@@ -2280,6 +2314,8 @@ export type EasyTableTableProps<T> = Omit<TableProps<TAny>, "dataSource" | "load
 /**
  * 对 查询条件+表格数据 进行深度封装，内置数据交互处理
  * ```
+ * Demo https://fex.qa.tcshuke.com/docs/admin/main/crud/easy-table
+ *
  * 1. 废弃modelKey参数
  * 2. 如果需要在路由跳转回退中缓存查询条件，设置cacheSwitch=true
  * 3. 需要获取查询条件、主动发起请求等可通过ref、useEasyTable操作
@@ -2289,41 +2325,38 @@ export type EasyTableTableProps<T> = Omit<TableProps<TAny>, "dataSource" | "load
  * 7. filterFixed=true，设置查询条件固定，不随滚动条滚动
  * 8. paginationFixed=true，可设置分页条件在底部固定，不随滚动条滚动
  * 9. foldKeys=string[]，查询条件展开、收起，被收起数组内容为EasyTable.Filter 子节点key值
- * 10. windows环境下，会在EasyTable.Table外部包装一下 TableScrollbar，提示高windows下table左右滚动体验
- *
- * Demo https://fex.qa.tcshuke.com/docs/admin/main/crud/easy-table
+ * 10. windows环境下，会在EasyTable.Table外部包装一下 TableScrollbar，提高windows下table左右滚动体验
  * ```
  */
 export declare const EasyTable: import("react").ForwardRefExoticComponent<EasyTableProps & import("react").RefAttributes<EasyTableRefApi>> & {
 	/**
 	 * 过滤条件
-	 * @param props
-	 * @returns
-	 *
 	 *```
-	 *1. 用法1
+	 * 1. 用法1
 	 *  -- 默认网格布局 规则：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
 	 *  <EasyTable.Filter>
-	 *   <Form.Item name="field1" label="条件1">xxx</Form.Item>
+	 *   <FormItemWrapper name="field1" label="条件1">xxx</FormItemWrapper>
 	 *  </EasyTable.Filter>
 	 *
-	 *  -- 自定义网格布局 使用 FormCol组件包装 Form.Item
+	 *  -- 自定义网格布局 使用 FormCol组件包装 FormItemWrapper
 	 *  <EasyTable.Filter>
-	 *    <FormCol span={12}><Form.Item name="field1" label="条件1">xxx</Form.Item></FormCol>
+	 *    <FormCol span={12}><FormItemWrapper name="field1" label="条件1">xxx</FormItemWrapper></FormCol>
 	 *  </EasyTable.Filter>
 	 *
 	 *  -- children 可为 function
 	 *  <EasyTable.Filter>
 	 *   {(form) => {
-	 *     return <Form.Item name="field1" label="条件1">xxx</Form.Item>
+	 *     return <FormItemWrapper name="field1" label="条件1">xxx</FormItemWrapper>
 	 *   }}
 	 * </EasyTable.Filter>
-	 *2. 用户2（自定义布局）
-	 *   EasyTable.Filter设置 isPure = true，FormItem无布局规则
-	 *3. EasyTable.Filter中内置了 Form 标签，当children为函数时，可获取form实例
-	 *4. 默认布局下，可通过设置 filterOperate 设置操作按钮
-	 *5. Filter 子节点包含 hidden = true 会被忽略
-	 *6. 如果想隐藏【查询、重置】按钮中的某一个，可设置 queryButtonProps.hidden、resetButtonProps.hidden
+	 * 2. 用户2（自定义布局）
+	 *    EasyTable.Filter设置 isPure = true，FormItem无布局规则
+	 * 3. EasyTable.Filter中内置了 Form 标签，当children为函数时，可获取form实例
+	 * 4. 默认布局下，可通过设置 filterOperate 设置操作按钮
+	 * 5. Filter 子节点包含 hidden = true 会被忽略
+	 * 6. 如果想隐藏【查询、重置】按钮中的某一个，可设置 queryButtonProps.hidden、resetButtonProps.hidden
+	 * 7. EasyTableFilter 子节点可使用 FormItemWrapper，FormItemWrapper中可配置label宽度等
+	 * 8. 通过easyFormProps属性可整体控制子节点FormItem布局
 	 *```
 	 */
 	Filter: (props: EasyTableFilterProps) => import("react/jsx-runtime").JSX.Element;
@@ -2617,6 +2650,48 @@ export declare const fbaUtils: {
 	attachPropertiesToComponent: typeof attachPropertiesToComponent;
 	getModelKey: () => string;
 };
+export type FileExportProps = {
+	/** 触发节点 */
+	action: (ReactElement & {
+		onClick?: (e: any) => void;
+	}) | ((data: {
+		onClick: (e: any) => void;
+	}) => ReactElement);
+	/**
+	 * 获取文件流数据
+	 * ```
+	 * 1. fileName 文件名称
+	 * 2. data 文件流
+	 * ```
+	 */
+	onRequest: () => Promise<{
+		fileName: string;
+		data: Blob;
+	}>;
+	/** 导出操作前 */
+	onExportPre?: () => void;
+	/** 导出操作后 */
+	onExportNext?: () => void;
+	/** 导出操作失败，隐藏默认失败效果 */
+	onExportError?: (error?: any) => void;
+};
+/**
+ * 文件导出
+ * ```
+ * demo：https://fex.qa.tcshuke.com/docs/admin/main/widget?key=file-export
+ * 例如：
+   <FileExport
+	 action={<Button>下载</Button>}
+	 onRequest={() => {
+	   return serviceHandle.fileExport('/export/file', {});
+	 }}
+	 onExportNext={() => {
+	   message.success('导出成功...');
+	 }}
+   />
+ * ```
+ */
+export declare const FileExport: (props: FileExportProps) => import("react/jsx-runtime").JSX.Element;
 export type FileImportProps = {
 	/** 上传文件接口返回处理 */
 	onImportFinish: (data?: TAny) => void;
@@ -2628,9 +2703,19 @@ export type FileImportProps = {
 /**
  * 文件导入
  * ```
- * 默认值：
- * name: 'file',
- * accept: '.xlsx,.xls',
+ * demo：https://fex.qa.tcshuke.com/docs/admin/main/widget?key=file-export
+ * 1. accept默认值 '.xlsx,.xls',
+ * 2. formData 上传key默认值 file
+ *
+ * 例如：
+   <FileImport
+	 action={'https://xxx/xxx/xx'}
+	 onImportFinish={(data) => {
+	   console.log('上传接口响应数据', data);
+	 }}
+   >
+	 <Button>文件上传</Button>
+   </FileImport>
  * ```
  */
 export declare const FileImport: {
@@ -2780,12 +2865,11 @@ export type FormItemHiddenProps = {
 export declare const FormItemHidden: (props: FormItemHiddenProps) => import("react/jsx-runtime").JSX.Element;
 export type FormItemTextServiceConfig = {
 	onRequest: (params?: TAny) => Promise<TAny>;
+	/** 接口参数，当params发生变化后，会主动发送查询请求 */
 	params?: TPlainObject;
 	/** 标记serviceConfig.params中无效参数，被设置的params key 不传入服务接口入参  */
 	invalidParamKey?: string[];
-	/**
-	 * 如果没有配置 render，返回结果会直接进行dom渲染，如果非string类型会进行JSON.stringify处理
-	 */
+	/** 如果没有配置 render，返回结果会直接进行dom渲染，如果非string类型会进行JSON.stringify处理 */
 	onResponseAdapter?: (respData?: TAny, value?: TAny) => TAny;
 	/** 必须参数key列表，与params配合使用 */
 	requiredParamsKeys?: string[];
@@ -2797,6 +2881,12 @@ export type FormItemTextProps = FormItemWrapperProps & {
 	render?: (value?: TAny) => ReactNode;
 	/** 占位值，当 value 为 ''、undefined、null时显示 */
 	placeholderValue?: string;
+	/**
+	 * 发起服务调用显示数据，例如：数据为key，通过key查询text显示
+	 * ```
+	 * 1. 当serviceConfig.params发生变化后，会主动发送查询请求
+	 * ```
+	 */
 	serviceConfig?: FormItemTextServiceConfig;
 };
 /**
@@ -2903,6 +2993,20 @@ export type FormListWrapperProps = {
 	}) => ReactElement;
 	/** FormList rules */
 	rules?: FormListProps["rules"];
+	/**
+	 * 设置FormList字段标题&必填标志
+	 * ```
+	 * demo: http://dev.flatjs.com:6007/pages/flat/oss-demo/main/form/list?env=me
+	 * 1. 会根据数组顺序进行渲染
+	 * ```
+	 */
+	formListItemTitleList?: {
+		title: string;
+		required?: boolean;
+		width?: number;
+	}[];
+	formListItemTitleClassName?: string;
+	formListItemTitleStyle?: CSSProperties;
 };
 /**
  * FormList
@@ -3194,16 +3298,15 @@ export type MetionEditorProps = Omit<MentionsWrapperProps, "prefix"> & {
  * 5. Demo: https://fex.qa.tcshuke.com/docs/admin/main/widget?key=mention-editor
  */
 export declare const MetionEditor: (props: MetionEditorProps) => import("react/jsx-runtime").JSX.Element;
-export type onClick = (e?: React.MouseEvent<HTMLElement>) => void;
 export interface ModalActionProps {
 	children: ReactElement | ((data: {
 		onClose: () => void;
 		open: boolean;
 	}) => ReactElement);
 	action?: (ReactElement & {
-		onClick?: onClick;
+		onClick?: (e: any) => void;
 	}) | ((data: {
-		onClick: onClick;
+		onClick: (e: any) => void;
 		onClose: () => void;
 		open: boolean;
 	}) => ReactElement);
@@ -3289,6 +3392,9 @@ export declare const Permission: (props: PermissionProps) => import("react/jsx-r
  * ```
  */
 export declare const preDefinedClassName: {
+	/**
+	 * @deprecated，已过期，使用preDefinedClassName.getFormLayoutClassName(...)
+	 */
 	form: {
 		label_width_70: string;
 		label_width_80: string;
@@ -3299,12 +3405,27 @@ export declare const preDefinedClassName: {
 		label_width_130: string;
 		label_width_140: string;
 		label_width_150: string;
-		label_width_160: string;
+		label_width_160: string; /**
+		 * 获取针对Form下全部label布局的预设className，包括
+		 * ```
+		 * 1. formLabel宽度
+		 * 2. formLabel对齐方式
+		 * 3. form label value的竖直布局
+		 * 4. formItem之间的间距
+		 * ```
+		 */
 		label_width_170: string;
 		label_width_180: string;
 		label_width_190: string;
 		label_width_200: string;
-		label_width_auto: string;
+		label_width_auto: string; /**
+		 * 获取针对单个FormItem label布局的预设className，包括
+		 * ```
+		 * 1. formLabel宽度
+		 * 2. formLabel对齐方式
+		 * 3. form label value的竖直布局
+		 * ```
+		 */
 		label_align_left: string;
 		label_align_right: string;
 		label_value_vertical: string;
@@ -3313,6 +3434,9 @@ export declare const preDefinedClassName: {
 		formItemGap5: string;
 		formItemGap0: string;
 	};
+	/**
+	 * @deprecated 已过期，使用preDefinedClassName.getFormItemLayoutClassName(...)
+	 */
 	formItem: {
 		label_width_70: string;
 		label_width_80: string;
@@ -3333,6 +3457,25 @@ export declare const preDefinedClassName: {
 		label_align_right: string;
 		label_value_vertical: string;
 	};
+	/**
+	 * 获取针对Form下全部label布局的预设className，包括
+	 * ```
+	 * 1. formLabel宽度
+	 * 2. formLabel对齐方式
+	 * 3. form label value的竖直布局
+	 * 4. formItem之间的间距
+	 * ```
+	 */
+	getFormLayoutClassName: (props: TFormLayoutPreClassNameProps) => string;
+	/**
+	 * 获取针对单个FormItem label布局的预设className，包括
+	 * ```
+	 * 1. formLabel宽度
+	 * 2. formLabel对齐方式
+	 * 3. form label value的竖直布局
+	 * ```
+	 */
+	getFormItemLayoutClassName: (props: TFormItemLayoutPreClassNameProps) => string;
 };
 export type RadioGroupWrapperValue = string | number | boolean;
 export type RadioGroupWrapperOptionItem = {

package/package.json

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