zy-react-library 1.2.39 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/components/Cascader/Area/index.d.ts +11 -2
  2. package/components/Cascader/Dictionary/index.d.ts +12 -1
  3. package/components/Cascader/Industry/index.d.ts +11 -2
  4. package/components/FormBuilder/FormBuilder.d.ts +19 -7
  5. package/components/FormBuilder/FormItemsRenderer.d.ts +59 -48
  6. package/components/FormBuilder/FormItemsRenderer.js +1 -1
  7. package/components/FormBuilder/index.d.ts +3 -0
  8. package/components/LeftTree/Area/index.d.ts +12 -2
  9. package/components/LeftTree/Department/Gwj/index.d.ts +12 -1
  10. package/components/LeftTree/Dictionary/index.d.ts +12 -1
  11. package/components/Search/index.d.ts +17 -11
  12. package/components/Select/Dictionary/index.d.ts +11 -1
  13. package/components/Select/Personnel/Gwj/index.d.ts +19 -1
  14. package/components/SelectTree/Area/index.d.ts +11 -2
  15. package/components/SelectTree/Department/Gwj/index.d.ts +12 -1
  16. package/components/SelectTree/Dictionary/index.d.ts +12 -1
  17. package/components/SelectTree/HiddenLevel/Gwj/index.d.ts +12 -1
  18. package/components/SelectTree/HiddenPart/Gwj/index.d.ts +12 -1
  19. package/components/SelectTree/Industry/index.d.ts +11 -2
  20. package/hooks/useGetUserInfo/index.d.ts +15 -1
  21. package/package.json +1 -1
  22. package/components/DragTableBuilder/DragTableBuilder.js +0 -1
  23. package/components/DragTableBuilder/DragTableBuilder.less +0 -8
  24. package/components/DragTableBuilder/DropZone.js +0 -1
  25. package/components/DragTableBuilder/DropZone.less +0 -80
  26. package/components/DragTableBuilder/FieldConfigEditor.js +0 -1
  27. package/components/DragTableBuilder/FieldConfigEditor.less +0 -5
  28. package/components/DragTableBuilder/FieldLibrary.js +0 -1
  29. package/components/DragTableBuilder/FieldLibrary.less +0 -37
  30. package/components/DragTableBuilder/TablePreview.js +0 -1
  31. package/components/DragTableBuilder/TablePreview.less +0 -69
  32. package/components/DragTableBuilder/index.d.ts +0 -71
  33. package/components/DragTableBuilder/index.js +0 -1
@@ -1,11 +1,20 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicCascaderProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ value: string;
6
+ label: string;
7
+ children: Data[];
8
+ }
9
+
4
10
  /**
5
11
  * 组件属性
6
12
  */
7
- export interface AreaCascaderProps extends Omit<BasicCascaderProps, "options" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
8
-
13
+ export interface AreaCascaderProps extends Omit<BasicCascaderProps, "options" | "placeholder" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
14
+ /** 获取父级节点 */
15
+ onGetNodePaths?: (nodes: Data[]) => void;
16
+ /** 获取数据 */
17
+ onGetData?: (data: Data[], processedData: Data[]) => void;
9
18
  }
10
19
 
11
20
  /**
@@ -1,10 +1,17 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicCascaderProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ dictValue: string;
6
+ dictLabel: string;
7
+ children: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 组件属性
6
13
  */
7
- export interface DictionaryCascaderProps extends Omit<BasicCascaderProps, "options" | "nameKey" | "idKey" | "childrenKey"> {
14
+ export interface DictionaryCascaderProps extends Omit<BasicCascaderProps, "options" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
8
15
  /** appKey,默认 DICTIONARY_APP_KEY_ENUM.DEFAULT(0bb989ecada5470c87635018ece9f327) */
9
16
  appKey?: string;
10
17
  /** 要获取的字典 */
@@ -13,6 +20,10 @@ export interface DictionaryCascaderProps extends Omit<BasicCascaderProps, "optio
13
20
  nameKey?: string;
14
21
  /** 树形数据 value 字段,默认 dictValue */
15
22
  idKey?: string;
23
+ /** 获取父级节点 */
24
+ onGetNodePaths?: (nodes: Data[]) => void;
25
+ /** 获取数据 */
26
+ onGetData?: (data: Data[], processedData: Data[]) => void;
16
27
  }
17
28
 
18
29
  /**
@@ -1,11 +1,20 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicCascaderProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ dict_value: string;
6
+ dict_label: string;
7
+ childrenList: Data[];
8
+ }
9
+
4
10
  /**
5
11
  * 组件属性
6
12
  */
7
- export interface IndustryCascaderProps extends Omit<BasicCascaderProps, "options" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
8
-
13
+ export interface IndustryCascaderProps extends Omit<BasicCascaderProps, "options" | "placeholder" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
14
+ /** 获取父级节点 */
15
+ onGetNodePaths?: (nodes: Data[]) => void;
16
+ /** 获取数据 */
17
+ onGetData?: (data: Data[], processedData: Data[]) => void;
9
18
  }
10
19
 
11
20
  /**
@@ -1,17 +1,23 @@
1
1
  import type { FormInstance, FormProps } from "antd/es/form";
2
2
  import type { Gutter } from "antd/es/grid/row";
3
- import type { Store } from "rc-field-form/lib/interface";
4
- import type { FC, ReactNode } from "react";
3
+ import type { ReactElement, ReactNode } from "react";
5
4
  import type { FormOption } from "./FormItemsRenderer";
6
5
 
6
+ /**
7
+ * 深度部分类型,将所有嵌套属性都变为可选
8
+ */
9
+ export type DeepPartial<T> = T extends object
10
+ ? { [P in keyof T]?: DeepPartial<T[P]> }
11
+ : T;
12
+
7
13
  /**
8
14
  * FormBuilder 组件属性
9
15
  */
10
- export interface FormBuilderProps extends Omit<FormProps, "form"> {
16
+ export interface FormBuilderProps<Values = any> extends Omit<FormProps, "form" | "onFinish"> {
11
17
  /** 表单初始值 */
12
- values?: Store;
18
+ values?: DeepPartial<Values>;
13
19
  /** 表单配置项数组 */
14
- options: FormOption[];
20
+ options: FormOption<Values>[];
15
21
  /** 栅格间距,默认 24 */
16
22
  gutter?: Gutter | [Gutter, Gutter];
17
23
  /** 占据栅格列数,默认 12 */
@@ -35,15 +41,21 @@ export interface FormBuilderProps extends Omit<FormProps, "form"> {
35
41
  /** 是否处于加载状态,默认 false */
36
42
  loading?: boolean;
37
43
  /** 表单实例(通过 Form.useForm() 创建) */
38
- form: FormInstance;
44
+ form: FormInstance<Values>;
45
+ /** 表单提交时的回调函数 */
46
+ onFinish?: (values: Values) => void;
39
47
  }
40
48
 
41
49
  /**
42
50
  * 表单构建器组件
43
51
  */
44
- declare const FormBuilder: FC<FormBuilderProps> & {
52
+ type FormBuilderComponent = {
45
53
  useForm: typeof import("antd").Form.useForm;
46
54
  useWatch: typeof import("antd").Form.useWatch;
55
+ } & {
56
+ <Values = any>(props: FormBuilderProps<Values>): ReactElement;
47
57
  };
48
58
 
59
+ declare const FormBuilder: FormBuilderComponent;
60
+
49
61
  export default FormBuilder;
@@ -2,13 +2,10 @@ import type { ColProps } from "antd/es/col";
2
2
  import type { FormItemProps, Rule } from "antd/es/form";
3
3
  import type { FormListFieldData } from "antd/es/form/FormList";
4
4
  import type { Gutter } from "antd/es/grid/row";
5
- import type { Store } from "rc-field-form/lib/interface";
6
- import type { FC, ReactNode } from "react";
5
+ import type { NamePath, Store } from "rc-field-form/lib/interface";
6
+ import type { ReactElement, ReactNode } from "react";
7
7
  import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender";
8
8
 
9
- /** 表单项 name */
10
- export type FormFieldName = string | number | (string | number)[];
11
-
12
9
  /**
13
10
  * 选择项数据类型
14
11
  */
@@ -61,7 +58,7 @@ export interface FormListUniqueProps {
61
58
  /** 删除按钮的文本,默认 '删除' */
62
59
  removeButtonText?: string;
63
60
  /** 表单配置项 */
64
- options: (field: FormListFieldData, fieldIndex: number, operations: FormListOperations) => FormOption[];
61
+ options: (field: FormListFieldData, fieldIndex: number, operations: FormListOperations) => FormListOption[];
65
62
  /** 点击新增按钮时的默认值 */
66
63
  addDefaultValue?: Store;
67
64
  /** 点击新增按钮时插入的索引位置 */
@@ -76,74 +73,74 @@ type WhenTrue<Condition extends boolean, T> = Condition extends true ? never : T
76
73
  /**
77
74
  * 表单配置项属性类型辅助工具
78
75
  */
79
- type FormOptionProperty<O extends boolean, C extends boolean, T> = WhenTrue<O, WhenTrue<C, T>>;
76
+ type FormOptionProperty<IsOnlyForLabel extends boolean, IsCustomizeRender extends boolean, T> = WhenTrue<IsOnlyForLabel, WhenTrue<IsCustomizeRender, T>>;
80
77
 
81
78
  /**
82
79
  * 表单配置项公共字段
83
80
  */
84
- export interface FormOptionBase<O extends boolean = false, C extends boolean = false> {
81
+ export interface FormOptionBase<Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> {
85
82
  /** React 需要的 key,如果传递了唯一的 name,则不需要 */
86
83
  key?: string;
87
84
  /** 表单项字段名 */
88
- name?: FormFieldName;
85
+ name?: Name;
89
86
  /** 表单项标签 */
90
87
  label?: ReactNode;
91
88
  /** 占据栅格列数,默认 12 */
92
- span?: WhenTrue<O, number | string>;
89
+ span?: WhenTrue<IsOnlyForLabel, number | string>;
93
90
  /** 是否必填,默认 true,支持函数动态计算 */
94
- required?: FormOptionProperty<O, C, boolean | ((formValues: Store) => boolean)>;
91
+ required?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean | ((formValues: Values) => boolean)>;
95
92
  /** 验证规则 */
96
- rules?: FormOptionProperty<O, C, Rule | Rule[]>;
93
+ rules?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Rule | Rule[]>;
97
94
  /** 是否使用字符验证限制 */
98
- useConstraints?: FormOptionProperty<O, C, boolean>;
95
+ useConstraints?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean>;
99
96
  /** 占位符文本,默认会根据传入的 render 类型自动判断(请选择、请输入)和 label 组合 */
100
- placeholder?: FormOptionProperty<O, C, ReactNode>;
97
+ placeholder?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ReactNode>;
101
98
  /** 提示信息,传入将在 label 右侧生成图标展示 tooltip */
102
- tip?: FormOptionProperty<O, C, ReactNode>;
99
+ tip?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ReactNode>;
103
100
  /** 是否隐藏,默认 false,支持函数动态计算 */
104
- hidden?: WhenTrue<O, boolean | ((formValues: Store) => boolean)>;
101
+ hidden?: WhenTrue<IsOnlyForLabel, boolean | ((formValues: Values) => boolean)>;
105
102
  /** 是否自定义渲染,完全交给外部控制渲染,默认 false */
106
- customizeRender?: C;
103
+ customizeRender?: IsCustomizeRender;
107
104
  /** 传递给 Form.Item 的属性,支持函数动态计算 */
108
- formItemProps?: FormOptionProperty<O, C, FormItemProps | ((formValues: Store) => FormItemProps)>;
105
+ formItemProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, FormItemProps | ((formValues: Values) => FormItemProps)>;
109
106
  /** label 栅格配置,默认直接使用外层的 labelCol,如果 span 等于 24,是外层的 labelCol.span 一半 */
110
- labelCol?: FormOptionProperty<O, C, ColProps>;
107
+ labelCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ColProps>;
111
108
  /** wrapper 栅格配置,默认 24 - labelCol.span */
112
- wrapperCol?: FormOptionProperty<O, C, ColProps>;
109
+ wrapperCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ColProps>;
113
110
  /** 是否应该更新(用于表单联动) */
114
- shouldUpdate?: FormOptionProperty<O, C, boolean | ((prevValues: Store, nextValues: Store, info: { source?: string }) => boolean)>;
111
+ shouldUpdate?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean | ((prevValues: Values, nextValues: Values, info: { source?: string }) => boolean)>;
115
112
  /** 依赖字段(用于表单联动) */
116
- dependencies?: FormOptionProperty<O, C, FormFieldName[]>;
113
+ dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Name[]>;
117
114
  /** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */
118
- onlyForLabel?: O;
115
+ onlyForLabel?: IsOnlyForLabel;
119
116
  }
120
117
 
121
118
  /**
122
119
  * 按 render 类型区分的表单项
123
120
  */
124
- export type FormOptionByRender<R extends keyof FORM_ITEM_RENDER_TYPE_MAP, O extends boolean = false, C extends boolean = false> = FormOptionBase<O, C> & {
121
+ export type FormOptionByRender<RenderType extends keyof FORM_ITEM_RENDER_TYPE_MAP, Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> = FormOptionBase<Values, IsOnlyForLabel, IsCustomizeRender, Name> & {
125
122
  /** 渲染类型(写字面量时 componentProps 会按该类型推导) */
126
- render: R;
123
+ render: RenderType;
127
124
  /** 传递给表单控件的属性,类型由 render 决定 */
128
- componentProps?: FormOptionProperty<O, C, FORM_ITEM_RENDER_TYPE_MAP[R] | ((formValues: Store) => FORM_ITEM_RENDER_TYPE_MAP[R])>;
125
+ componentProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, FORM_ITEM_RENDER_TYPE_MAP[RenderType] | ((formValues: Values) => FORM_ITEM_RENDER_TYPE_MAP[RenderType])>;
129
126
  /** 选项数据(用于 select、radio、checkbox) */
130
- items?: FormOptionProperty<O, C, R extends "select" | "radio" | "checkbox" ? OptionItem[] : never>;
127
+ items?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "select" | "radio" | "checkbox" ? OptionItem[] : never>;
131
128
  /** 字段键配置 */
132
- itemsField?: FormOptionProperty<O, C, R extends "select" | "radio" | "checkbox" ? ItemsFieldConfig : never>;
129
+ itemsField?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "select" | "radio" | "checkbox" ? ItemsFieldConfig : never>;
133
130
  /** checkbox 的栅格数量,如果不传入不使用栅格,传入才使用 */
134
- checkboxCol?: FormOptionProperty<O, C, R extends "checkbox" ? number : never>;
131
+ checkboxCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "checkbox" ? number : never>;
135
132
  /** Form.List 独有的属性 */
136
- formListUniqueProps?: FormOptionProperty<O, C, R extends "formList" ? FormListUniqueProps | ((formValues: Store) => FormListUniqueProps) : never>;
133
+ formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: Values) => FormListUniqueProps) : never>;
137
134
  };
138
135
 
139
136
  /**
140
137
  * 不写 render 或 render 为 input 时的表单项(默认按输入框)
141
138
  */
142
- export type FormOptionDefault<O extends boolean = false, C extends boolean = false> = FormOptionBase<O, C> & {
139
+ export type FormOptionDefault<Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> = FormOptionBase<Values, IsOnlyForLabel, IsCustomizeRender, Name> & {
143
140
  /** 渲染类型,默认 input */
144
141
  render?: "input" | undefined;
145
142
  /** 传递给 Input 的属性 */
146
- componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: Store) => FORM_ITEM_RENDER_TYPE_MAP["input"]);
143
+ componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: Values) => FORM_ITEM_RENDER_TYPE_MAP["input"]);
147
144
  /** 选项数据(用于 select、radio、checkbox),input 时不需要 */
148
145
  items?: never;
149
146
  /** 字段键配置,input 时不需要 */
@@ -157,7 +154,7 @@ export type FormOptionDefault<O extends boolean = false, C extends boolean = fal
157
154
  /**
158
155
  * 自定义渲染时的表单项(render 为 ReactNode 时使用)
159
156
  */
160
- export type FormOptionCustomRender<O extends boolean = false, C extends boolean = false> = FormOptionBase<O, C> & {
157
+ export type FormOptionCustomRender<Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> = FormOptionBase<Values, IsOnlyForLabel, IsCustomizeRender, Name> & {
161
158
  /** 渲染类型,默认 ReactNode */
162
159
  render: ReactNode;
163
160
  /** 传递给表单控件的属性,自定义渲染时不需要 */
@@ -173,25 +170,39 @@ export type FormOptionCustomRender<O extends boolean = false, C extends boolean
173
170
  };
174
171
 
175
172
  /**
176
- * 表单配置项
173
+ * 表单配置项(普通表单项)
174
+ */
175
+ export type FormOption<Values = any>
176
+ = | FormOptionDefault<Values, false, false>
177
+ | FormOptionDefault<Values, false, true>
178
+ | FormOptionDefault<Values, true, false>
179
+ | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
180
+ | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, true> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
181
+ | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, true, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
182
+ | FormOptionCustomRender<Values, false, false>
183
+ | FormOptionCustomRender<Values, false, true>
184
+ | FormOptionCustomRender<Values, true, false>;
185
+
186
+ /**
187
+ * Form.List 子项表单配置项(使用 [number, NamePath] 作为 name 类型)
177
188
  */
178
- export type FormOption
179
- = | FormOptionDefault<false, false>
180
- | FormOptionDefault<false, true>
181
- | FormOptionDefault<true, false>
182
- | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, false, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
183
- | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, false, true> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
184
- | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, true, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
185
- | FormOptionCustomRender<false, false>
186
- | FormOptionCustomRender<false, true>
187
- | FormOptionCustomRender<true, false>;
189
+ export type FormListOption<Values = any>
190
+ = | FormOptionDefault<Values, false, false, [number, NamePath<Values>]>
191
+ | FormOptionDefault<Values, false, true, [number, NamePath<Values>]>
192
+ | FormOptionDefault<Values, true, false, [number, NamePath<Values>]>
193
+ | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, false, [number, NamePath<Values>]> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
194
+ | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, true, [number, NamePath<Values>]> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
195
+ | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, true, false, [number, NamePath<Values>]> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
196
+ | FormOptionCustomRender<Values, false, false, [number, NamePath<Values>]>
197
+ | FormOptionCustomRender<Values, false, true, [number, NamePath<Values>]>
198
+ | FormOptionCustomRender<Values, true, false, [number, NamePath<Values>]>;
188
199
 
189
200
  /**
190
201
  * FormItemsRenderer 组件属性
191
202
  */
192
- export interface FormItemsRendererProps {
203
+ export interface FormItemsRendererProps<Values = any> {
193
204
  /** 表单配置项数组 */
194
- options: FormOption[];
205
+ options: FormOption<Values>[];
195
206
  /** 默认栅格占据列数,默认 12 */
196
207
  span?: number;
197
208
  /** 是否折叠(仅显示前3项),默认 false */
@@ -199,7 +210,7 @@ export interface FormItemsRendererProps {
199
210
  /** 自动生成必填规则,默认 true */
200
211
  useAutoGenerateRequired?: boolean;
201
212
  /** 初始值,用于在表单未初始化时提供默认值 */
202
- initialValues?: Store;
213
+ initialValues?: Values;
203
214
  /** 栅格间距,继承自 FormBuilder */
204
215
  gutter?: Gutter | [Gutter, Gutter];
205
216
  /** label 栅格配置,继承自 FormBuilder */
@@ -209,6 +220,6 @@ export interface FormItemsRendererProps {
209
220
  /**
210
221
  * 表单项渲染器组件
211
222
  */
212
- declare const FormItemsRenderer: FC<FormItemsRendererProps>;
223
+ declare const FormItemsRenderer: <Values = any>(props: FormItemsRendererProps<Values>) => ReactElement;
213
224
 
214
225
  export default FormItemsRenderer;
@@ -1 +1 @@
1
- import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as t,Form as n,Col as l,Divider as s,Row as a,Button as o,Checkbox as d,Radio as i,Select as u,InputNumber as p,Tooltip as c}from"antd";import m from"dayjs";import{FORM_ITEM_RENDER_ENUM as h}from"../../enum/formItemRender/index.js";import{jsx as y,Fragment as E,jsxs as b}from"react/jsx-runtime";const{TextArea:T}=r,{RangePicker:f}=t,I=({options:I,labelCol:v,gutter:A=24,span:R=12,collapse:Y=!1,useAutoGenerateRequired:D=!0,initialValues:C})=>{const N=n.useFormInstance(),w=()=>{const e=N.getFieldsValue();return 0===Object.keys(e).length&&C?C:e},P=e=>"function"==typeof e.componentProps?e.componentProps(w()):e.componentProps||{},U=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(w()):e.formItemProps||{};return[h.DATE,h.DATE_MONTH,h.DATE_YEAR,h.DATETIME].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e):void 0})),[h.DATE_WEEK].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e,"YYYY-wo"):void 0})),[h.DATE_RANGE,h.DATETIME_RANGE].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:Array.isArray(e)?e.map(e=>e?m(e):void 0):void 0})),r},M=e=>"function"==typeof e?e(w()):e??!0,x=e=>{if(e.render===h.DIVIDER)return[];const r=[];switch(e.render||h.INPUT){case h.INPUT:!1!==e.useConstraints&&r.push({max:50,message:"最多输入50字符"});break;case h.TEXTAREA:!1!==e.useConstraints&&r.push({max:500,message:"最多输入500字符"});break;case h.INPUT_NUMBER:case h.NUMBER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)(\.\d{1,2})?$/,message:"请输入正确的数字,最多保留两位小数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()});break;case h.INTEGER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)$/,message:"请输入正确的整数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()})}if(!D)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(M(e.required)){const t=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(e.render);return r.push({required:!0,message:`${t?"请输入":"请选择"}${e.label}`}),e.rules&&(Array.isArray(e.rules)?r.push(...e.rules):r.push(e.rules)),r}return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r},g=e=>e.key||e.name,B=e=>{const r=e.render===h.DIVIDER?24:e.span??R,t=e.labelCol??(24===r?{span:v.span/2}:v);return{span:r,labelCol:t,wrapperCol:e.wrapperCol??{span:24-t.span}}},_=(e,r)=>({value:e[r.valueKey],label:"function"==typeof r.labelKey?r.labelKey(e):e[r.labelKey],disabled:e.disabled}),k=e=>{const n=P(e),s=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),o=e.render||h.INPUT,c=e.placeholder||`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(o)?"输入":"选择"}${e.label}`;switch(o){case h.INPUT:return y(r,{placeholder:c,maxLength:!1!==e.useConstraints?50:9999,...n});case h.TEXTAREA:return y(T,{placeholder:c,maxLength:!1!==e.useConstraints?500:9999,showCount:!0,rows:3,...n});case h.INPUT_NUMBER:case h.NUMBER:case h.INTEGER:return y(p,{placeholder:c,style:{width:"100%"},...n});case h.SELECT:return y(u,{placeholder:c,showSearch:!0,allowClear:!0,optionFilterProp:"children",...n,children:(e.items||[]).map(e=>{const{value:r,label:t,disabled:n}=_(e,s);return y(u.Option,{value:r,disabled:n,children:t},r)})});case h.RADIO:return y(i.Group,{...n,children:(e.items||[]).map(e=>{const{value:r,label:t,disabled:n}=_(e,s);return y(i,{value:r,disabled:n,children:t},r)})});case h.CHECKBOX:return y(d.Group,{...n,children:e.checkboxCol?y(a,{children:(e.items||[]).map(r=>{const{value:t,label:n,disabled:a}=_(r,s);return y(l,{span:e.checkboxCol,children:y(d,{value:t,disabled:a,children:n})},t)})}):(e.items||[]).map(e=>{const{value:r,label:t,disabled:n}=_(e,s);return y(d,{value:r,disabled:n,children:t},r)})});case h.DATE:return y(t,{placeholder:c,format:"YYYY-MM-DD",style:{width:"100%"},...n});case h.DATE_MONTH:return y(t,{picker:"month",placeholder:c,format:"YYYY-MM",style:{width:"100%"},...n});case h.DATE_YEAR:return y(t,{picker:"year",placeholder:c,format:"YYYY",style:{width:"100%"},...n});case h.DATE_WEEK:return y(t,{picker:"week",placeholder:c,format:"YYYY-wo",style:{width:"100%"},...n});case h.DATE_RANGE:return y(f,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...n});case h.DATETIME:return y(t,{showTime:!0,placeholder:c,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...n});case h.DATETIME_RANGE:return y(f,{showTime:!0,placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...n});case h.DIVIDER:return null;default:return o}},V=r=>r.tip?b(E,{children:[r.label,y(c,{title:r.tip,children:y(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,F=({option:e,style:r,col:t,index:s})=>{const a=U(e);return delete a.dependencies,delete a.shouldUpdate,("function"==typeof(o=e.hidden)?o(w()):o)?null:y(l,{span:t.span,style:r,children:y(n.Item,{name:e.name,label:V(e),rules:x(e),labelCol:t.labelCol,wrapperCol:t.wrapperCol,preserve:!1,...a,children:k(e)})},g(e)||s);var o},$=({option:e,style:r,col:t,index:a})=>{const o=P(e);return e.customizeRender?y(l,{span:t.span,style:r,children:e.render},g(e)||a):e.onlyForLabel?y(n.Item,{name:e.name,noStyle:!0,preserve:!1,children:y("input",{type:"hidden"})},g(e)||a):e.render===h.DIVIDER?y(l,{span:t.span,style:r,children:y(s,{orientation:"left",...o,children:e.label})},g(e)||a):null};return y(E,{children:I.map((e,r)=>{const t=B(e),s=(e=>Y&&e>=3?{display:"none"}:void 0)(r),d=U(e);return $({option:e,style:s,col:t,index:r})||(e.render===h.FORM_LIST?((e,r,t,s)=>{const d=(e=>{const r={showAddButton:!0,showRemoveButton:!0,addButtonText:"添加",removeButtonText:"删除",options:[],addDefaultValue:{},addInsertIndex:void 0};return"function"==typeof e.formListUniqueProps?{...r,...e.formListUniqueProps(w())}:{...r,...e.formListUniqueProps||{}}})(e),i=P(e);return y(l,{span:t.span,style:s,children:y(n.List,{name:e.name,...i,children:(e,{add:r,remove:t,move:i})=>y(E,{children:e.map((e,u)=>{const p=((e,r,t,n,l,s)=>"function"==typeof e?e(r,t,{field:r,fieldIndex:t,add:n,remove:l,move:s}):e??[])(d.options,e,u,r,t,i);return y(a,{gutter:A,children:p.map((a,i)=>{const c=B(a),m=U(a);delete m.dependencies,delete m.shouldUpdate;const h={option:a,style:s,col:c,index:`${u}_${i}`};return $(h)||(i===p.length-1?y(l,{span:c.span,style:s,children:y(n.Item,{label:V(a),labelCol:c.labelCol,wrapperCol:c.wrapperCol,preserve:!1,required:M(a.required),...m,children:b("div",{style:{display:"flex",gap:10,alignItems:"center",justifyContent:"space-between"},children:[y("div",{style:{flex:1},children:y(n.Item,{noStyle:!0,rules:x(a),name:a.name,children:k(a)})}),u>=1?d.showRemoveButton&&y(o,{type:"primary",danger:!0,onClick:()=>t(e.name),children:d.removeButtonText}):d.showAddButton&&y(o,{type:"primary",onClick:()=>r(d.addDefaultValue,d.addInsertIndex),children:d.addButtonText})]})})},g(a)||i):F(h))})},e.key)})})})},g(e)||r)})(e,r,t,s):(e.shouldUpdate??e.dependencies)||(d.shouldUpdate??d.dependencies)?((e,r,t,l)=>{const s=U(e);return y(n.Item,{noStyle:!0,preserve:!1,shouldUpdate:e.shouldUpdate??s.shouldUpdate,dependencies:e.dependencies??s.dependencies,children:()=>F({option:e,style:t,col:l,index:r})},g(e)||r)})(e,r,s,t):F({option:e,style:s,col:t,index:r}))})})};I.displayName="FormItemsRenderer";export{I as default};
1
+ import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as n,Form as t,Col as l,Divider as s,Row as a,Button as o,Checkbox as d,Radio as i,Select as u,InputNumber as p,Tooltip as c}from"antd";import m from"dayjs";import{FORM_ITEM_RENDER_ENUM as h}from"../../enum/formItemRender/index.js";import{jsx as y,Fragment as E,jsxs as f}from"react/jsx-runtime";const{TextArea:T}=r,{RangePicker:b}=n,I=({options:I,labelCol:v,gutter:A=24,span:R=12,collapse:Y=!1,useAutoGenerateRequired:D=!0,initialValues:C})=>{const N=t.useFormInstance(),w=()=>{const e=N.getFieldsValue();return 0===Object.keys(e).length&&C?C:e},M=e=>"function"==typeof e.componentProps?e.componentProps(w()):e.componentProps||{},P=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(w()):e.formItemProps||{};return[h.DATE,h.DATE_MONTH,h.DATE_YEAR,h.DATETIME].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e):void 0})),[h.DATE_WEEK].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e,"YYYY-wo"):void 0})),[h.DATE_RANGE,h.DATETIME_RANGE].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:Array.isArray(e)?e.map(e=>e?m(e):void 0):void 0})),r},U=e=>"function"==typeof e?e(w()):e??!0,x=e=>{if(e.render===h.DIVIDER)return[];const r=[];switch(e.render||h.INPUT){case h.INPUT:!1!==e.useConstraints&&r.push({max:50,message:"最多输入50字符"});break;case h.TEXTAREA:!1!==e.useConstraints&&r.push({max:500,message:"最多输入500字符"});break;case h.INPUT_NUMBER:case h.NUMBER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)(\.\d{1,2})?$/,message:"请输入正确的数字,最多保留两位小数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()});break;case h.INTEGER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)$/,message:"请输入正确的整数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()})}if(!D)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(U(e.required)){const n=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(e.render);return r.push({required:!0,message:`${n?"请输入":"请选择"}${e.label}`}),e.rules&&(Array.isArray(e.rules)?r.push(...e.rules):r.push(e.rules)),r}return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r},g=e=>e.key||e.name,_=e=>{const r=e.render===h.DIVIDER?24:e.span??R,n=e.labelCol??(24===r?{span:v.span/2}:v);return{span:r,labelCol:n,wrapperCol:e.wrapperCol??{span:24-n.span}}},B=e=>"function"==typeof e?e(w()):e??!1,F=(e,r)=>({value:e[r.valueKey],label:"function"==typeof r.labelKey?r.labelKey(e):e[r.labelKey],disabled:e.disabled}),k=e=>{const t=M(e),s=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),o=e.render??h.INPUT,c=e.placeholder??`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(o)?"输入":"选择"}${e.label}`;switch(o){case h.INPUT:return y(r,{placeholder:c,maxLength:!1!==e.useConstraints?50:9999,...t});case h.TEXTAREA:return y(T,{placeholder:c,maxLength:!1!==e.useConstraints?500:9999,showCount:!0,rows:3,...t});case h.INPUT_NUMBER:case h.NUMBER:case h.INTEGER:return y(p,{placeholder:c,style:{width:"100%"},...t});case h.SELECT:return y(u,{placeholder:c,showSearch:!0,allowClear:!0,optionFilterProp:"children",...t,children:(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=F(e,s);return y(u.Option,{value:r,disabled:t,children:n},r)})});case h.RADIO:return y(i.Group,{...t,children:(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=F(e,s);return y(i,{value:r,disabled:t,children:n},r)})});case h.CHECKBOX:return y(d.Group,{...t,children:e.checkboxCol?y(a,{children:(e.items||[]).map(r=>{const{value:n,label:t,disabled:a}=F(r,s);return y(l,{span:e.checkboxCol,children:y(d,{value:n,disabled:a,children:t})},n)})}):(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=F(e,s);return y(d,{value:r,disabled:t,children:n},r)})});case h.DATE:return y(n,{placeholder:c,format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATE_MONTH:return y(n,{picker:"month",placeholder:c,format:"YYYY-MM",style:{width:"100%"},...t});case h.DATE_YEAR:return y(n,{picker:"year",placeholder:c,format:"YYYY",style:{width:"100%"},...t});case h.DATE_WEEK:return y(n,{picker:"week",placeholder:c,format:"YYYY-wo",style:{width:"100%"},...t});case h.DATE_RANGE:return y(b,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATETIME:return y(n,{showTime:!0,placeholder:c,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DATETIME_RANGE:return y(b,{showTime:!0,placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DIVIDER:return null;default:return o}},L=r=>r.tip?f(E,{children:[r.label,y(c,{title:r.tip,children:y(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,V=({option:e,style:r,col:n,index:s})=>{const a=P(e);return delete a.dependencies,delete a.shouldUpdate,B(e.hidden)?null:y(l,{span:n.span,style:r,children:y(t.Item,{name:e.name,label:L(e),rules:x(e),labelCol:n.labelCol,wrapperCol:n.wrapperCol,preserve:!1,required:" "!==L(e)&&U(e.required),colon:" "!==L(e),...a,children:k(e)})},g(e)||s)},$=({option:e,style:r,col:n,index:a})=>{const o=M(e);return e.customizeRender?y(l,{span:n.span,style:r,children:e.render},g(e)||a):e.onlyForLabel?y(t.Item,{name:e.name,noStyle:!0,preserve:!1,children:y("input",{type:"hidden"})},g(e)||a):e.render===h.DIVIDER?y(l,{span:n.span,style:r,children:y(s,{orientation:"left",...o,children:e.label})},g(e)||a):null},G=({option:e,index:r,col:n,style:s})=>{const d=(e=>{const r={showAddButton:!0,showRemoveButton:!0,addButtonText:"添加",removeButtonText:"删除",options:[],addDefaultValue:{},addInsertIndex:void 0};return"function"==typeof e.formListUniqueProps?{...r,...e.formListUniqueProps(w())}:{...r,...e.formListUniqueProps||{}}})(e),i=M(e);return y(l,{span:n.span,style:s,children:y(t.List,{name:e.name,...i,children:(e,{add:r,remove:n,move:i})=>y(E,{children:e.map((e,u)=>{const p=((e,r,n,t,l,s)=>"function"==typeof e?e(r,n,{field:r,fieldIndex:n,add:t,remove:l,move:s}):e??[])(d.options,e,u,r,n,i);return y(a,{gutter:A,children:p.map((a,i)=>{if(B(a.hidden))return null;const c=_(a),m=P(a),E={option:a,style:s,col:c,index:`${u}_${i}`},T=$(E);if(T)return T;if(a.render===h.FORM_LIST)return G(E);const b=e=>!B(e.hidden)&&!e.onlyForLabel,I=p[i+1],v=I&&I.render===h.FORM_LIST,A=I&&!b(I);return i===(()=>{for(let e=p.length-1;e>=0;e--){const r=p[e];if(r.render===h.FORM_LIST)return e;if(b(r))return e}return-1})()||v||A?(delete m.dependencies,delete m.shouldUpdate,y(l,{span:c.span,style:s,children:y(t.Item,{label:L(a),labelCol:c.labelCol,wrapperCol:c.wrapperCol,preserve:!1,required:" "!==L(a)&&U(a.required),colon:" "!==L(a),...m,children:f("div",{style:{display:"flex",gap:10,alignItems:"center",justifyContent:"space-between"},children:[y("div",{style:{flex:1},children:y(t.Item,{noStyle:!0,rules:x(a),name:a.name,children:k(a)})}),u>=1?d.showRemoveButton&&y(o,{type:"primary",danger:!0,onClick:()=>n(e.name),children:d.removeButtonText}):d.showAddButton&&y(o,{type:"primary",onClick:()=>r(d.addDefaultValue,d.addInsertIndex),children:d.addButtonText})]})})},g(a)||i)):V(E)})},e.key)})})})},g(e)||r)};return y(E,{children:I.map((e,r)=>{const n=_(e),l=(e=>Y&&e>=3?{display:"none"}:void 0)(r),s=P(e),a={option:e,style:l,col:n,index:r};return $(a)||(e.render===h.FORM_LIST?G(a):(e.shouldUpdate??e.dependencies)||(s.shouldUpdate??s.dependencies)?(({option:e,index:r,style:n,col:l})=>{const s=P(e);return y(t.Item,{noStyle:!0,preserve:!1,shouldUpdate:e.shouldUpdate??s.shouldUpdate,dependencies:e.dependencies??s.dependencies,children:()=>V({option:e,style:n,col:l,index:r})},g(e)||r)})(a):V(a))})})};I.displayName="FormItemsRenderer";export{I as default};
@@ -1,3 +1,6 @@
1
+ import type { FormOption } from "./FormItemsRenderer";
1
2
  import FormBuilder from "./FormBuilder";
2
3
 
4
+ export type { FormOption };
5
+
3
6
  export default FormBuilder;
@@ -1,11 +1,21 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicLeftTreeProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ value: string;
6
+ label: string;
7
+ children: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 组件属性
6
13
  */
7
- export interface AreaLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
8
-
14
+ export interface AreaLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
15
+ /** 获取父级节点 */
16
+ onGetNodePaths?: (nodes: Data[]) => void;
17
+ /** 获取数据 */
18
+ onGetData?: (data: Data[], processedData: Data[]) => void;
9
19
  }
10
20
 
11
21
  /**
@@ -2,14 +2,25 @@ import type { FC } from "react";
2
2
  import type { DepartmentSelectTreeProps } from "../../../SelectTree/Department/Gwj";
3
3
  import type { BasicLeftTreeProps } from "../../Basic";
4
4
 
5
+ interface Data {
6
+ id: string;
7
+ name: string;
8
+ childrenList: Data[];
9
+ [key: string]: any;
10
+ }
11
+
5
12
  /**
6
13
  * 组件属性
7
14
  */
8
- export interface DepartmentLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
15
+ export interface DepartmentLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
9
16
  /** 请求参数 */
10
17
  params?: DepartmentSelectTreeProps["params"];
11
18
  /** 查询的企业类型 */
12
19
  searchType?: DepartmentSelectTreeProps["searchType"];
20
+ /** 获取父级节点 */
21
+ onGetNodePaths?: (nodes: Data[]) => void;
22
+ /** 获取数据 */
23
+ onGetData?: (data: Data[], processedData: Data[]) => void;
13
24
  }
14
25
 
15
26
  /**
@@ -1,10 +1,17 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicLeftTreeProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ dictValue: string;
6
+ dictLabel: string;
7
+ children: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 组件属性
6
13
  */
7
- export interface DictionaryLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
14
+ export interface DictionaryLeftTreeProps extends Omit<BasicLeftTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
8
15
  /** appKey,默认 DICTIONARY_APP_KEY_ENUM.DEFAULT(0bb989ecada5470c87635018ece9f327) */
9
16
  appKey?: string;
10
17
  /** 要获取的字典 */
@@ -13,6 +20,10 @@ export interface DictionaryLeftTreeProps extends Omit<BasicLeftTreeProps, "treeD
13
20
  nameKey?: string;
14
21
  /** 树形数据 value 字段,默认 dictValue */
15
22
  idKey?: string;
23
+ /** 获取父级节点 */
24
+ onGetNodePaths?: (nodes: Data[]) => void;
25
+ /** 获取数据 */
26
+ onGetData?: (data: Data[], processedData: Data[]) => void;
16
27
  }
17
28
 
18
29
  /**
@@ -1,22 +1,24 @@
1
1
  import type { FormInstance, FormProps } from "antd/es/form";
2
- import type { Store } from "rc-field-form/lib/interface";
3
- import type { FC, ReactNode } from "react";
4
- import type { FormOption } from "../FormBuilder/FormItemsRenderer";
2
+ import type { ReactElement, ReactNode } from "react";
3
+ import type { FormOption } from "../FormBuilder";
4
+ import type { DeepPartial } from "../FormBuilder/FormBuilder";
5
+
6
+ export type { FormOption };
5
7
 
6
8
  /**
7
9
  * Search 组件属性
8
10
  */
9
- export interface SearchProps extends Omit<FormProps, "form" | "onFinish"> {
11
+ export interface SearchProps<Values = any> extends Omit<FormProps, "form" | "onFinish" | "onReset"> {
10
12
  /** 表单配置项数组 */
11
- options: FormOption[];
13
+ options: FormOption<Values>[];
12
14
  /** 表单值 */
13
- values?: Store;
15
+ values?: DeepPartial<Values>;
14
16
  /** 搜索和重置都会触发的回调 */
15
- onFinish?: (values: Store, type: "submit" | "reset") => void;
17
+ onFinish?: (values: Values, type: "submit" | "reset") => void;
16
18
  /** 搜索回调 */
17
- onSubmit?: (values: Store) => void;
19
+ onSubmit?: (values: Values) => void;
18
20
  /** 重置回调 */
19
- onReset?: (values: Store) => void;
21
+ onReset?: (values: Values) => void;
20
22
  /** 搜索按钮文本,默认"搜索" */
21
23
  searchText?: string;
22
24
  /** 重置按钮文本,默认"重置" */
@@ -28,16 +30,20 @@ export interface SearchProps extends Omit<FormProps, "form" | "onFinish"> {
28
30
  /** 额外的底部按钮组 */
29
31
  extraButtons?: ReactNode;
30
32
  /** 表单实例(通过 Form.useForm() 创建) */
31
- form: FormInstance;
33
+ form: FormInstance<Values>;
32
34
  }
33
35
 
34
36
  /**
35
37
  * 搜索表单组件
36
38
  * 支持自动展开/收起功能,当表单项超过4个时显示展开/收起按钮
37
39
  */
38
- declare const Search: FC<SearchProps> & {
40
+ type SearchComponent = {
39
41
  useForm: typeof import("antd").Form.useForm;
40
42
  useWatch: typeof import("antd").Form.useWatch;
43
+ } & {
44
+ <Values = any>(props: SearchProps<Values>): ReactElement;
41
45
  };
42
46
 
47
+ declare const Search: SearchComponent;
48
+
43
49
  export default Search;
@@ -1,10 +1,16 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ dictValue: string;
6
+ dictLabel: string;
7
+ [key: string]: any;
8
+ }
9
+
4
10
  /**
5
11
  * 组件属性
6
12
  */
7
- export interface DictionarySelectProps extends Omit<BasicSelectProps, "data" | "nameKey" | "idKey"> {
13
+ export interface DictionarySelectProps extends Omit<BasicSelectProps, "data" | "nameKey" | "idKey" | "onGetOption" | "onGetData"> {
8
14
  /** appKey,默认 DICTIONARY_APP_KEY_ENUM.DEFAULT(0bb989ecada5470c87635018ece9f327) */
9
15
  appKey?: string;
10
16
  /** 要获取的字典 */
@@ -13,6 +19,10 @@ export interface DictionarySelectProps extends Omit<BasicSelectProps, "data" | "
13
19
  nameKey?: string;
14
20
  /** 树形数据 value 字段,默认 dictValue */
15
21
  idKey?: string;
22
+ /** 获取选中的项 */
23
+ onGetOption?: (option: Data | Data[]) => void;
24
+ /** 获取数据 */
25
+ onGetData?: (data: Data[]) => void;
16
26
  }
17
27
 
18
28
  /**
@@ -1,6 +1,20 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectProps } from "../../Basic";
3
3
 
4
+ interface Data {
5
+ id: string;
6
+ name: string;
7
+ corpinfoId: string;
8
+ corpinfoName: string;
9
+ departmentId: string;
10
+ departmentName: string;
11
+ postId: string;
12
+ postName: string;
13
+ userId: string;
14
+ username: string;
15
+ [key: string]: any;
16
+ }
17
+
4
18
  /**
5
19
  * 请求参数
6
20
  */
@@ -31,7 +45,7 @@ export interface ExtraParams {
31
45
  /**
32
46
  * 组件属性
33
47
  */
34
- export interface PersonnelSelectProps extends Omit<BasicSelectProps, "data" | "placeholder" | "nameKey" | "idKey"> {
48
+ export interface PersonnelSelectProps extends Omit<BasicSelectProps, "data" | "placeholder" | "nameKey" | "idKey" | "onGetOption" | "onGetData"> {
35
49
  /** 请求参数 */
36
50
  params?: Params;
37
51
  /** 占位符,默认"人员" */
@@ -44,6 +58,10 @@ export interface PersonnelSelectProps extends Omit<BasicSelectProps, "data" | "p
44
58
  isNeedDepartmentId?: boolean;
45
59
  /** 额外请求参数 */
46
60
  extraParams?: ExtraParams;
61
+ /** 获取选中的项 */
62
+ onGetOption?: (option: Data | Data[]) => void;
63
+ /** 获取数据 */
64
+ onGetData?: (data: Data[]) => void;
47
65
  }
48
66
 
49
67
  /**
@@ -1,11 +1,20 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectTreeProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ value: string;
6
+ label: string;
7
+ children: Data[];
8
+ }
9
+
4
10
  /**
5
11
  * 组件属性
6
12
  */
7
- export interface AreaSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
8
-
13
+ export interface AreaSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
14
+ /** 获取父级节点 */
15
+ onGetNodePaths?: (nodes: Data[]) => void;
16
+ /** 获取数据 */
17
+ onGetData?: (data: Data[], processedData: Data[]) => void;
9
18
  }
10
19
 
11
20
  /**
@@ -1,6 +1,13 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectTreeProps } from "../../Basic";
3
3
 
4
+ interface Data {
5
+ id: string;
6
+ name: string;
7
+ childrenList: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 企业类型枚举(用于 inType)
6
13
  */
@@ -28,7 +35,7 @@ export interface Params {
28
35
  /**
29
36
  * 组件属性
30
37
  */
31
- export interface DepartmentSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
38
+ export interface DepartmentSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
32
39
  /** 请求参数 */
33
40
  params?: Params;
34
41
  /** 占位符,默认"部门" */
@@ -39,6 +46,10 @@ export interface DepartmentSelectTreeProps extends Omit<BasicSelectTreeProps, "t
39
46
  isNeedParentId?: boolean;
40
47
  /** 查询的企业类型,默认current,current 接收 eqCorpinfoId 或者 eqParentId,all 不接受任何参数,inType 接收 inType 或者 enterpriseType */
41
48
  searchType?: "current" | "all" | "inType";
49
+ /** 获取父级节点 */
50
+ onGetNodePaths?: (nodes: Data[]) => void;
51
+ /** 获取数据 */
52
+ onGetData?: (data: Data[], processedData: Data[]) => void;
42
53
  }
43
54
 
44
55
  /**
@@ -1,10 +1,17 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectTreeProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ dictValue: string;
6
+ dictLabel: string;
7
+ children: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 组件属性
6
13
  */
7
- export interface DictionarySelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
14
+ export interface DictionarySelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
8
15
  /** appKey,默认 DICTIONARY_APP_KEY_ENUM.DEFAULT(0bb989ecada5470c87635018ece9f327) */
9
16
  appKey?: string;
10
17
  /** 要获取的字典 */
@@ -13,6 +20,10 @@ export interface DictionarySelectTreeProps extends Omit<BasicSelectTreeProps, "t
13
20
  nameKey?: string;
14
21
  /** 树形数据 value 字段,默认 dictValue */
15
22
  idKey?: string;
23
+ /** 获取父级节点 */
24
+ onGetNodePaths?: (nodes: Data[]) => void;
25
+ /** 获取数据 */
26
+ onGetData?: (data: Data[], processedData: Data[]) => void;
16
27
  }
17
28
 
18
29
  /**
@@ -1,16 +1,27 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectTreeProps } from "../../Basic";
3
3
 
4
+ interface Data {
5
+ dictValue: string;
6
+ dictLabel: string;
7
+ children: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 组件属性
6
13
  */
7
- export interface HiddenLevelSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "level"> {
14
+ export interface HiddenLevelSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "level" | "onGetNodePaths" | "onGetData"> {
8
15
  /** 是否显示忽略隐患,默认 true */
9
16
  isShowNeglect?: boolean;
10
17
  /** 是否显示较大隐患,默认 true */
11
18
  isShowLarger?: boolean;
12
19
  /** 是否显示重大隐患,默认 true */
13
20
  isShowMajor?: boolean;
21
+ /** 获取父级节点 */
22
+ onGetNodePaths?: (nodes: Data[]) => void;
23
+ /** 获取数据 */
24
+ onGetData?: (data: Data[], processedData: Data[]) => void;
14
25
  }
15
26
 
16
27
  /**
@@ -1,6 +1,13 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectTreeProps } from "../../Basic";
3
3
 
4
+ interface Data {
5
+ hiddenregionId: string;
6
+ hiddenregion: string;
7
+ children: Data[];
8
+ [key: string]: any;
9
+ }
10
+
4
11
  /**
5
12
  * 请求参数
6
13
  */
@@ -12,11 +19,15 @@ export interface Params {
12
19
  /**
13
20
  * 组件属性
14
21
  */
15
- export interface HiddenPartSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey"> {
22
+ export interface HiddenPartSelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
16
23
  /** 请求参数 */
17
24
  params?: Params;
18
25
  /** 是否需要企业id,默认 false */
19
26
  isNeedCorpInfoId?: boolean;
27
+ /** 获取父级节点 */
28
+ onGetNodePaths?: (nodes: Data[]) => void;
29
+ /** 获取数据 */
30
+ onGetData?: (data: Data[], processedData: Data[]) => void;
20
31
  }
21
32
 
22
33
  /**
@@ -1,11 +1,20 @@
1
1
  import type { FC } from "react";
2
2
  import type { BasicSelectTreeProps } from "../Basic";
3
3
 
4
+ interface Data {
5
+ dict_value: string;
6
+ dict_label: string;
7
+ childrenList: Data[];
8
+ }
9
+
4
10
  /**
5
11
  * 组件属性
6
12
  */
7
- export interface IndustrySelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey"> {
8
-
13
+ export interface IndustrySelectTreeProps extends Omit<BasicSelectTreeProps, "treeData" | "placeholder" | "nameKey" | "idKey" | "childrenKey" | "onGetNodePaths" | "onGetData"> {
14
+ /** 获取父级节点 */
15
+ onGetNodePaths?: (nodes: Data[]) => void;
16
+ /** 获取数据 */
17
+ onGetData?: (data: Data[], processedData: Data[]) => void;
9
18
  }
10
19
 
11
20
  /**
@@ -1,4 +1,18 @@
1
- export type getUserInfoFunction = () => Promise<Record<string, any>>;
1
+ interface Data {
2
+ corpinfoId: string;
3
+ corpinfoName: string;
4
+ departmentId: string;
5
+ departmentName: string;
6
+ id: string;
7
+ name: string;
8
+ postId: string;
9
+ postName: string;
10
+ userId: string;
11
+ username: string;
12
+ [key: string]: any;
13
+ }
14
+
15
+ export type getUserInfoFunction = () => Promise<Data>;
2
16
 
3
17
  /**
4
18
  * 获取用户信息
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "zy-react-library",
3
3
  "private": false,
4
- "version": "1.2.39",
4
+ "version": "1.3.1",
5
5
  "type": "module",
6
6
  "description": "",
7
7
  "author": "LiuJiaNan",
@@ -1 +0,0 @@
1
- import{useState as e,useCallback as t}from"react";import{message as i,Modal as l,Space as n,Button as o,Row as d,Col as r}from"antd";import{CopyOutlined as a,ExportOutlined as s,Html5Outlined as c,ClearOutlined as p}from"@ant-design/icons";import{DndContext as b}from"../../node_modules/@dnd-kit/core/dist/core.esm";import{arrayMove as h}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm";import m from"./FieldLibrary.js";import f from"./DropZone.js";import g from"./FieldConfigEditor.js";import u from"./TablePreview.js";import"../../src/components/DragTableBuilder/DragTableBuilder.less";import{jsxs as x,jsx as y}from"react/jsx-runtime";const w=[{type:"text",label:"文本",icon:"T"},{type:"number",label:"数字",icon:"#"},{type:"date",label:"日期",icon:"📅"},{type:"datetime",label:"日期时间",icon:"🕐"},{type:"select",label:"下拉选择",icon:"▼"},{type:"boolean",label:"布尔值",icon:"☑"},{type:"email",label:"邮箱",icon:"✉"},{type:"url",label:"链接",icon:"🔗"},{type:"image",label:"图片",icon:"🖼"},{type:"tag",label:"标签",icon:"🏷"},{type:"progress",label:"进度条",icon:"▓"},{type:"rate",label:"评分",icon:"★"}],v=v=>{const{fieldTypes:k=w,initialFields:C=[],onChange:T,onExport:L,showPreview:$=!0,showLibrary:E=!0,showConfigEditor:j=!0}=v,[I,D]=e(C),[M,R]=e(null),[_,F]=e(!1),H=t(()=>`field_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,[]),O=t(e=>{const{active:t,over:i}=e;if(i&&t.id!==i.id){const e=I.findIndex(e=>e.id===t.id),l=I.findIndex(e=>e.id===i.id),n=h(I,e,l);D(n),T&&T(n)}},[I,T]),U=t(e=>{const t=I.filter(t=>t.id!==e);D(t),T&&T(t)},[I,T]),B=t(e=>{R(e),F(!0)},[]),N=t(e=>{const t=I.map(t=>t.id===e.id?e:t);D(t),F(!1),R(null),T&&T(t),i.success("字段配置已保存")},[I,T]),S=t(()=>{F(!1),R(null)},[]),P=t(()=>{l.confirm({title:"确认清空",content:"确定要清空所有字段吗?",onOk:()=>{D([]),T&&T([]),i.success("已清空所有字段")}})},[T]),z=t(()=>{const e=I.map(e=>({title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed,ellipsis:e.ellipsis,sorter:!1!==e.sortable})),t=JSON.stringify(e,null,2);navigator.clipboard.writeText(t).then(()=>{i.success("配置已复制到剪贴板")}).catch(()=>{i.error("复制失败")})},[I]),J=t(()=>{const e=I.map(e=>({title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed,ellipsis:e.ellipsis,sorter:!1!==e.sortable}));L?L(e):(console.log("导出的表格配置:",e),i.success("配置已导出到控制台"))},[I,L]),Z=t(()=>{let e=`<table style="width: ${I.reduce((e,t)=>e+(t.width||150),0)}px; border-collapse: collapse; font-size: 13px;">\n`;return e+=" <thead>\n",e+=" <tr>\n",I.forEach(t=>{const i=t.align||"center";e+=` <th style="width: ${t.width||150}px; text-align: ${i}; padding: 8px 12px; border: 1px solid #f0f0f0; background: #fafafa; font-weight: 600;">${t.title||t.label}</th>\n`}),e+=" </tr>\n",e+=" </thead>\n",e+=" <tbody>\n",e+=" <tr>\n",I.forEach(t=>{const i=t.align||"center";e+=` <td style="width: ${t.width||150}px; text-align: ${i}; padding: 8px 12px; border: 1px solid #f0f0f0;">数据示例</td>\n`}),e+=" </tr>\n",e+=" </tbody>\n",e+="</table>",e},[I]),q=t(()=>{const e=Z();navigator.clipboard.writeText(e).then(()=>{i.success("HTML代码已复制到剪贴板")}).catch(()=>{i.error("复制失败")})},[Z]),A=t(()=>{const e=Z(),t=new Blob([e],{type:"text/html"}),l=URL.createObjectURL(t),n=document.createElement("a");n.href=l,n.download="table.html",document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(l),i.success("HTML文件已导出")},[Z]),G=t(e=>{const t={id:H(),type:e.type,label:e.label,title:e.label,dataIndex:`field_${I.length+1}`,width:150,align:"center",ellipsis:!0,sortable:!0},l=[...I,t];D(l),T&&T(l),i.success(`已添加${e.label}字段`)},[I,H,T]);return x("div",{className:"drag-table-builder",children:[y("div",{className:"builder-header",children:x(n,{wrap:!0,children:[y(o,{icon:y(a,{}),onClick:z,disabled:0===I.length,children:"复制配置"}),y(o,{icon:y(s,{}),onClick:J,disabled:0===I.length,children:"导出配置"}),y(o,{icon:y(c,{}),onClick:q,disabled:0===I.length,children:"复制HTML"}),y(o,{icon:y(c,{}),onClick:A,disabled:0===I.length,children:"导出HTML"}),y(o,{icon:y(p,{}),onClick:P,disabled:0===I.length,danger:!0,children:"清空"})]})}),y(b,{onDragEnd:O,children:x(d,{gutter:16,children:[E&&y(r,{span:6,children:y(m,{fields:k,onFieldClick:G})}),x(r,{span:E?18:24,children:[y(f,{fields:I,onRemove:U,onEdit:B}),$&&y("div",{style:{marginTop:16},children:y(u,{fields:I})})]})]})}),j&&y(g,{visible:_,field:M,onSave:N,onCancel:S})]})};export{v as default};
@@ -1,8 +0,0 @@
1
- .drag-table-builder {
2
- .builder-header {
3
- margin-bottom: 16px;
4
- padding: 12px;
5
- background: #f5f5f5;
6
- border-radius: 6px;
7
- }
8
- }
@@ -1 +0,0 @@
1
- import{DeleteOutlined as e}from"@ant-design/icons";import{SortableContext as i,verticalListSortingStrategy as t,useSortable as n}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm";import{CSS as s}from"../../node_modules/@dnd-kit/utilities/dist/utilities.esm";import{Card as a,Empty as d}from"antd";import"../../src/components/DragTableBuilder/DropZone.less";import{jsx as o,jsxs as l}from"react/jsx-runtime";const r=({field:i,onRemove:t,onEdit:a})=>{const{attributes:d,listeners:r,setNodeRef:c,transform:m,transition:p,isDragging:f}=n({id:i.id}),h={transform:s.Transform.toString(m),transition:p,opacity:f?.5:1};return o("div",{ref:c,style:h,...d,...r,className:"sortable-field",children:l("div",{className:"field-content",children:[o("span",{className:"drag-handle",children:"⋮⋮"}),o("span",{className:"field-title",children:i.title||i.label}),o("span",{className:"field-dataindex",children:i.dataIndex||"未设置"}),l("div",{className:"field-actions",children:[o("span",{className:"action-btn edit-btn",onClick:e=>{e.stopPropagation(),a(i)},children:"编辑"}),o("span",{className:"action-btn delete-btn",onClick:e=>{e.stopPropagation(),t(i.id)},children:o(e,{})})]})]})})},c=({fields:e,onRemove:n,onEdit:s,children:l})=>o("div",{className:"drop-zone",children:o(a,{title:"表格字段",size:"small",className:"drop-zone-card",children:0===e.length?o(d,{description:"从左侧点击字段添加到此处",image:d.PRESENTED_IMAGE_SIMPLE}):o(i,{items:e.map(e=>e.id),strategy:t,children:o("div",{className:"field-list",children:e.map(e=>o(r,{field:e,onRemove:n,onEdit:s},e.id))})})})});export{c as default};
@@ -1,80 +0,0 @@
1
- .drop-zone {
2
- .drop-zone-card {
3
- min-height: 400px;
4
-
5
- .field-list {
6
- display: flex;
7
- flex-direction: column;
8
- gap: 8px;
9
- }
10
- }
11
-
12
- .sortable-field {
13
- cursor: move;
14
- transition: all 0.3s;
15
- border: 1px solid #d9d9d9;
16
- border-radius: 4px;
17
- padding: 8px 12px;
18
- background: #fff;
19
-
20
- &:hover {
21
- border-color: #1890ff;
22
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
23
- }
24
-
25
- .field-content {
26
- display: flex;
27
- align-items: center;
28
- gap: 12px;
29
-
30
- .drag-handle {
31
- cursor: move;
32
- color: #999;
33
- font-size: 12px;
34
- letter-spacing: -2px;
35
- }
36
-
37
- .field-title {
38
- flex: 1;
39
- font-weight: 500;
40
- color: #333;
41
- }
42
-
43
- .field-dataindex {
44
- color: #999;
45
- font-size: 12px;
46
- font-family: monospace;
47
- }
48
-
49
- .field-actions {
50
- display: flex;
51
- gap: 8px;
52
- margin-left: auto;
53
-
54
- .action-btn {
55
- cursor: pointer;
56
- font-size: 12px;
57
- padding: 2px 8px;
58
- border-radius: 3px;
59
- transition: all 0.3s;
60
-
61
- &.edit-btn {
62
- color: #1890ff;
63
-
64
- &:hover {
65
- background: #e6f7ff;
66
- }
67
- }
68
-
69
- &.delete-btn {
70
- color: #ff4d4f;
71
-
72
- &:hover {
73
- background: #fff1f0;
74
- }
75
- }
76
- }
77
- }
78
- }
79
- }
80
- }
@@ -1 +0,0 @@
1
- import{Select as e,Input as l,Form as i,Modal as a,Space as t,InputNumber as r,Switch as d}from"antd";import{useEffect as n}from"react";import"../../src/components/DragTableBuilder/FieldConfigEditor.less";import{jsx as s,jsxs as o}from"react/jsx-runtime";const{Option:c}=e,{TextArea:h}=l,m=({visible:m,field:u,onSave:p,onCancel:x})=>{const[b]=i.useForm();return n(()=>{m&&u&&b.setFieldsValue({title:u.title||u.label||"",dataIndex:u.dataIndex||"",width:u.width||150,align:u.align||"center",fixed:u.fixed||void 0,ellipsis:void 0===u.ellipsis||u.ellipsis,sortable:void 0===u.sortable||u.sortable,render:u.render||""})},[m,u,b]),s(a,{title:"编辑字段配置",open:m,onOk:()=>{b.validateFields().then(e=>{const l={...u,title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed||void 0,ellipsis:e.ellipsis,sortable:e.sortable,render:e.render};p(l)})},onCancel:x,width:600,okText:"保存",cancelText:"取消",children:o(i,{form:b,layout:"vertical",className:"field-config-form",children:[s(i.Item,{label:"列标题",name:"title",rules:[{required:!0,message:"请输入列标题"}],children:s(l,{placeholder:"请输入列标题"})}),s(i.Item,{label:"数据字段名",name:"dataIndex",rules:[{required:!0,message:"请输入数据字段名"}],children:s(l,{placeholder:"请输入数据字段名(如:name, age等)"})}),o(t,{style:{width:"100%"},size:"large",children:[s(i.Item,{label:"列宽度",name:"width",initialValue:150,children:s(r,{min:50,max:1e3,style:{width:120}})}),s(i.Item,{label:"对齐方式",name:"align",initialValue:"center",children:o(e,{style:{width:120},children:[s(c,{value:"left",children:"左对齐"}),s(c,{value:"center",children:"居中"}),s(c,{value:"right",children:"右对齐"})]})})]}),o(t,{style:{width:"100%"},size:"large",children:[s(i.Item,{label:"固定列",name:"fixed",children:o(e,{placeholder:"不固定",style:{width:120},allowClear:!0,children:[s(c,{value:"left",children:"左侧固定"}),s(c,{value:"right",children:"右侧固定"})]})}),s(i.Item,{label:"超长省略",name:"ellipsis",valuePropName:"checked",initialValue:!0,children:s(d,{})}),s(i.Item,{label:"可排序",name:"sortable",valuePropName:"checked",initialValue:!0,children:s(d,{})})]}),s(i.Item,{label:"自定义渲染函数(可选)",name:"render",extra:"请输入函数体,如:return text + '元'",children:s(h,{rows:3,placeholder:"可选:输入自定义渲染函数的函数体"})})]})})};export{m as default};
@@ -1,5 +0,0 @@
1
- .field-config-form {
2
- .ant-form-item {
3
- margin-bottom: 16px;
4
- }
5
- }
@@ -1 +0,0 @@
1
- import{Card as l,Tag as e}from"antd";import"../../src/components/DragTableBuilder/FieldLibrary.less";import{jsx as i,jsxs as a}from"react/jsx-runtime";const c=({field:l,onClick:c})=>i("div",{className:"clickable-field",onClick:()=>c(l),children:a(e,{color:"blue",className:"field-tag",children:[l.icon&&i("span",{className:"field-icon",children:l.icon}),i("span",{className:"field-label",children:l.label})]})}),s=({fields:e,onFieldClick:a})=>i("div",{className:"field-library",children:i(l,{title:"字段库",size:"small",className:"field-library-card",children:i("div",{className:"field-list",children:e.map(l=>i(c,{field:l,onClick:a},l.type))})})});export{s as default};
@@ -1,37 +0,0 @@
1
- .field-library {
2
- .field-library-card {
3
- min-height: 400px;
4
-
5
- .field-list {
6
- display: flex;
7
- flex-wrap: wrap;
8
- gap: 8px;
9
- }
10
- }
11
-
12
- .clickable-field {
13
- cursor: pointer;
14
- transition: all 0.3s;
15
-
16
- &:hover {
17
- transform: translateY(-2px);
18
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
19
- }
20
-
21
- .field-tag {
22
- margin: 0;
23
- padding: 4px 12px;
24
- font-size: 14px;
25
- cursor: pointer;
26
- user-select: none;
27
-
28
- .field-icon {
29
- margin-right: 4px;
30
- }
31
-
32
- .field-label {
33
- font-weight: 500;
34
- }
35
- }
36
- }
37
- }
@@ -1 +0,0 @@
1
- import{Card as e,Empty as t}from"antd";import"../../src/components/DragTableBuilder/TablePreview.less";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({fields:a,dataSource:l})=>{const n=l||(0===a.length?[]:Array.from({length:3},(e,t)=>{const r={};return a.forEach(e=>{const i=e.dataIndex;if(i)switch(e.type){case"text":r[i]=`示例文本${t+1}`;break;case"number":r[i]=Math.floor(1e3*Math.random());break;case"date":r[i]="2024-01-01";break;case"datetime":r[i]="2024-01-01 12:00:00";break;case"select":r[i]=t%2==0?"选项1":"选项2";break;case"boolean":r[i]=t%2==0?"是":"否";break;case"email":r[i]=`example${t}@test.com`;break;case"url":r[i]=`https://example.com/${t}`;break;default:r[i]=`数据${t+1}`}}),r})),s=a.reduce((e,t)=>e+(t.width||150),0);return r("div",{className:"table-preview",children:r(e,{title:"表格预览",size:"small",className:"preview-card",children:0===a.length?r(t,{description:"暂无数据,请先添加字段",image:t.PRESENTED_IMAGE_SIMPLE}):r("div",{className:"native-table-container",children:i("table",{className:"native-table",style:{width:s},children:[r("thead",{children:r("tr",{children:a.map(e=>r("th",{style:{width:e.width||150,textAlign:e.align||"center",position:e.fixed?"sticky":"static",left:"left"===e.fixed?0:"auto",right:"right"===e.fixed?0:"auto",zIndex:e.fixed?2:1},children:e.title||e.label},e.id))})}),r("tbody",{children:n.map((e,t)=>r("tr",{children:a.map(i=>{const a=e[i.dataIndex],l=((e,t,r,i)=>{if(e.render)try{return new Function("text","record","index",e.render)(t,r,i)}catch(e){return console.error("渲染函数执行错误:",e),t}return t})(i,a,e,t);return r("td",{style:{width:i.width||150,textAlign:i.align||"center",overflow:!1!==i.ellipsis?"hidden":"visible",textOverflow:!1!==i.ellipsis?"ellipsis":"clip",whiteSpace:!1!==i.ellipsis?"nowrap":"normal"},title:!1!==i.ellipsis?a:void 0,children:l},i.id)})},t))})]})})})})};export{a as default};
@@ -1,69 +0,0 @@
1
- .table-preview {
2
- .preview-card {
3
- .native-table-container {
4
- overflow-x: auto;
5
- overflow-y: auto;
6
- max-height: 300px;
7
- border: 1px solid #f0f0f0;
8
- border-radius: 4px;
9
- }
10
-
11
- .native-table {
12
- width: 100%;
13
- border-collapse: collapse;
14
- font-size: 13px;
15
- background: #fff;
16
-
17
- thead {
18
- position: sticky;
19
- top: 0;
20
- z-index: 10;
21
- background: #fafafa;
22
- }
23
-
24
- th {
25
- padding: 8px 12px;
26
- font-weight: 600;
27
- color: rgba(0, 0, 0, 0.88);
28
- background: #fafafa;
29
- border: 1px solid #f0f0f0;
30
- white-space: nowrap;
31
-
32
- &[style*="position: sticky"] {
33
- background: #fafafa;
34
- z-index: 2;
35
- }
36
- }
37
-
38
- tbody {
39
- tr {
40
- transition: background 0.3s;
41
-
42
- &:hover {
43
- background: #fafafa;
44
- }
45
-
46
- &:nth-child(even) {
47
- background: #fafafa;
48
- }
49
-
50
- &:hover:nth-child(even) {
51
- background: #f0f0f0;
52
- }
53
- }
54
- }
55
-
56
- td {
57
- padding: 8px 12px;
58
- color: rgba(0, 0, 0, 0.88);
59
- border: 1px solid #f0f0f0;
60
- background: #fff;
61
-
62
- &[style*="position: sticky"] {
63
- background: #fff;
64
- z-index: 1;
65
- }
66
- }
67
- }
68
- }
69
- }
@@ -1,71 +0,0 @@
1
- import type { FC, ReactNode } from "react";
2
- import type { ColumnsType } from "antd/es/table";
3
-
4
- /**
5
- * 字段类型定义
6
- */
7
- export interface FieldType {
8
- /** 字段类型标识 */
9
- type: string;
10
- /** 字段显示名称 */
11
- label: string;
12
- /** 字段图标 */
13
- icon?: string;
14
- }
15
-
16
- /**
17
- * 表格字段配置
18
- */
19
- export interface TableField {
20
- /** 字段唯一标识 */
21
- id: string;
22
- /** 字段类型 */
23
- type: string;
24
- /** 字段标签 */
25
- label: string;
26
- /** 列标题 */
27
- title: string;
28
- /** 数据字段名 */
29
- dataIndex: string;
30
- /** 列宽度 */
31
- width?: number;
32
- /** 对齐方式 */
33
- align?: "left" | "center" | "right";
34
- /** 固定列 */
35
- fixed?: "left" | "right";
36
- /** 超长省略 */
37
- ellipsis?: boolean;
38
- /** 可排序 */
39
- sortable?: boolean;
40
- /** 自定义渲染函数 */
41
- render?: string;
42
- }
43
-
44
- /**
45
- * DragTableBuilder 组件属性
46
- */
47
- export interface DragTableBuilderProps {
48
- /** 可用字段类型列表 */
49
- fieldTypes?: FieldType[];
50
- /** 初始字段列表 */
51
- initialFields?: TableField[];
52
- /** 字段列表变化回调 */
53
- onChange?: (fields: TableField[]) => void;
54
- /** 导出配置回调 */
55
- onExport?: (config: ColumnsType<any>) => void;
56
- /** 是否显示预览区域 */
57
- showPreview?: boolean;
58
- /** 是否显示字段库 */
59
- showLibrary?: boolean;
60
- /** 是否显示配置编辑器 */
61
- showConfigEditor?: boolean;
62
- /** 自定义预览数据 */
63
- dataSource?: any[];
64
- }
65
-
66
- /**
67
- * 拖拽式表格构建器组件
68
- */
69
- declare const DragTableBuilder: FC<DragTableBuilderProps>;
70
-
71
- export default DragTableBuilder;
@@ -1 +0,0 @@
1
- import r from"./DragTableBuilder.js";export{r as default};