zy-react-library 1.1.2 → 1.1.4
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.
- package/components/Cascader/Area/index.js +1 -20
- package/components/Cascader/Basic/index.js +1 -57
- package/components/Cascader/Dictionary/index.js +1 -42
- package/components/Cascader/Industry/index.js +1 -21
- package/components/Editor/index.js +1 -82
- package/components/FormBuilder/FormBuilder.js +1 -97
- package/components/FormBuilder/FormItemsRenderer.js +1 -589
- package/components/FormBuilder/index.js +1 -5
- package/components/HeaderBack/index.js +1 -44
- package/components/HiddenInfo/gwj/index.js +1 -586
- package/components/Icon/AddIcon/index.js +1 -9
- package/components/Icon/BackIcon/index.js +1 -9
- package/components/Icon/DeleteIcon/index.js +1 -9
- package/components/Icon/DownloadIcon/index.js +1 -9
- package/components/Icon/EditIcon/index.js +1 -9
- package/components/Icon/ExportIcon/index.js +1 -9
- package/components/Icon/ImportIcon/index.js +1 -9
- package/components/Icon/LocationIcon/index.js +1 -9
- package/components/Icon/PrintIcon/index.js +1 -9
- package/components/Icon/ResetIcon/index.js +1 -9
- package/components/Icon/SearchIcon/index.js +1 -9
- package/components/Icon/VideoIcon/index.js +1 -9
- package/components/Icon/ViewIcon/index.js +1 -9
- package/components/ImportFile/index.js +1 -94
- package/components/LeftTree/Area/index.js +1 -15
- package/components/LeftTree/Basic/index.js +1 -160
- package/components/LeftTree/Department/Gwj/index.js +1 -29
- package/components/LeftTree/Dictionary/index.js +1 -42
- package/components/Map/MapSelector.js +1 -280
- package/components/Map/index.js +1 -90
- package/components/Page/index.js +1 -59
- package/components/Pdf/index.js +1 -136
- package/components/PreviewImg/index.js +1 -26
- package/components/PreviewPdf/index.js +1 -78
- package/components/Search/index.js +1 -147
- package/components/Select/Basic/index.js +1 -70
- package/components/Select/Dictionary/index.js +1 -42
- package/components/Select/Personnel/Gwj/index.js +1 -45
- package/components/SelectCreate/index.js +1 -48
- package/components/SelectTree/Area/index.js +1 -20
- package/components/SelectTree/Basic/index.js +1 -105
- package/components/SelectTree/Department/Gwj/index.js +1 -40
- package/components/SelectTree/Dictionary/index.js +1 -42
- package/components/SelectTree/HiddenLevel/Gwj/index.js +1 -70
- package/components/SelectTree/HiddenPart/Gwj/index.js +1 -36
- package/components/SelectTree/Industry/index.js +1 -21
- package/components/Signature/index.js +1 -100
- package/components/Table/index.js +1 -77
- package/components/TooltipPreviewImg/index.js +1 -28
- package/components/Upload/index.js +1 -229
- package/components/Video/AliPlayer.js +1 -182
- package/components/Video/index.js +1 -71
- package/enum/dictionary/index.js +1 -9
- package/enum/formItemRender/index.js +1 -39
- package/enum/hidden/gwj/index.js +1 -70
- package/enum/uploadFile/gwj/index.js +1 -258
- package/hooks/useDeleteFile/index.js +1 -95
- package/hooks/useDictionary/index.js +1 -64
- package/hooks/useDownloadBlob/index.js +1 -80
- package/hooks/useDownloadFile/index.js +1 -78
- package/hooks/useGetFile/index.js +1 -74
- package/hooks/useGetUrlQuery/index.js +1 -15
- package/hooks/useGetUserInfo/index.js +1 -42
- package/hooks/useIdle/index.js +1 -65
- package/hooks/useImportFile/index.js +1 -61
- package/hooks/useIsExistenceDuplicateSelection/index.js +1 -27
- package/hooks/useTable/index.js +1 -124
- package/hooks/useUploadFile/index.js +1 -144
- package/hooks/useUrlQueryCriteria/index.js +1 -84
- package/package.json +5 -1
- package/regular/index.js +1 -56
- package/utils/index.js +1 -591
|
@@ -1,589 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Input, DatePicker, Form, Col, Divider, Row, Button, Tooltip, Checkbox, Radio, Select, InputNumber } from 'antd';
|
|
3
|
-
import dayjs from 'dayjs';
|
|
4
|
-
import { FORM_ITEM_RENDER_ENUM } from '../../enum/formItemRender/index.js';
|
|
5
|
-
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
const {
|
|
8
|
-
TextArea
|
|
9
|
-
} = Input;
|
|
10
|
-
const {
|
|
11
|
-
RangePicker
|
|
12
|
-
} = DatePicker;
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* 表单项渲染器组件
|
|
16
|
-
* @param {object} props - 组件属性
|
|
17
|
-
* @param {Array} props.options - 表单配置项数组
|
|
18
|
-
* @param {object} props.labelCol - label 栅格配置
|
|
19
|
-
* @param {number} props.gutter - 栅格间距
|
|
20
|
-
* @param {number} props.span - 默认栅格占据列数
|
|
21
|
-
* @param {boolean} props.collapse - 是否折叠(仅显示前3项)
|
|
22
|
-
* @param {boolean} props.useAutoGenerateRequired - 是否自动生成必填规则
|
|
23
|
-
* @param {object} props.initialValues - 初始值
|
|
24
|
-
*/
|
|
25
|
-
const FormItemsRenderer = ({
|
|
26
|
-
options,
|
|
27
|
-
labelCol,
|
|
28
|
-
gutter = 24,
|
|
29
|
-
span = 12,
|
|
30
|
-
collapse = false,
|
|
31
|
-
useAutoGenerateRequired = true,
|
|
32
|
-
initialValues
|
|
33
|
-
}) => {
|
|
34
|
-
const form = Form.useFormInstance();
|
|
35
|
-
|
|
36
|
-
// 获取表单值,优先使用 initialValues
|
|
37
|
-
const getFormValues = () => {
|
|
38
|
-
const formValues = form.getFieldsValue();
|
|
39
|
-
// 如果表单值为空但有 initialValues,则使用 initialValues
|
|
40
|
-
if (Object.keys(formValues).length === 0 && initialValues) {
|
|
41
|
-
return initialValues;
|
|
42
|
-
}
|
|
43
|
-
return formValues;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
// 获取传给组件的属性
|
|
47
|
-
const getComponentProps = option => {
|
|
48
|
-
return typeof option.componentProps === "function" ? option.componentProps(getFormValues()) : option.componentProps || {};
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
// 获取 Form.List 独有的属性
|
|
52
|
-
const getFormListUniqueProps = option => {
|
|
53
|
-
const defaultProps = {
|
|
54
|
-
showAddButton: true,
|
|
55
|
-
showRemoveButton: true,
|
|
56
|
-
addButtonText: "添加",
|
|
57
|
-
removeButtonText: "删除",
|
|
58
|
-
options: [],
|
|
59
|
-
addDefaultValue: {},
|
|
60
|
-
addInsertIndex: undefined
|
|
61
|
-
};
|
|
62
|
-
if (typeof option.formListUniqueProps === "function") {
|
|
63
|
-
return {
|
|
64
|
-
...defaultProps,
|
|
65
|
-
...option.formListUniqueProps(getFormValues())
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
return {
|
|
69
|
-
...defaultProps,
|
|
70
|
-
...(option.formListUniqueProps || {})
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
// 获取传给formItem的属性
|
|
75
|
-
const getFormItemProps = option => {
|
|
76
|
-
const formItemProps = typeof option.formItemProps === "function" ? option.formItemProps(getFormValues()) : option.formItemProps || {};
|
|
77
|
-
|
|
78
|
-
// 为日期组件添加特殊处理
|
|
79
|
-
if ([FORM_ITEM_RENDER_ENUM.DATE, FORM_ITEM_RENDER_ENUM.DATE_MONTH, FORM_ITEM_RENDER_ENUM.DATE_YEAR, FORM_ITEM_RENDER_ENUM.DATETIME].includes(option.render)) {
|
|
80
|
-
formItemProps.getValueFromEvent = (_, dateString) => dateString;
|
|
81
|
-
formItemProps.getValueProps = value => ({
|
|
82
|
-
value: value ? dayjs(value) : undefined
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// 为日期周组件添加特殊处理
|
|
87
|
-
if ([FORM_ITEM_RENDER_ENUM.DATE_WEEK].includes(option.render)) {
|
|
88
|
-
formItemProps.getValueFromEvent = (_, dateString) => dateString;
|
|
89
|
-
formItemProps.getValueProps = value => ({
|
|
90
|
-
value: value ? dayjs(value, "YYYY-wo") : undefined
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// 为日期范围组件添加特殊处理
|
|
95
|
-
if ([FORM_ITEM_RENDER_ENUM.DATE_RANGE, FORM_ITEM_RENDER_ENUM.DATETIME_RANGE].includes(option.render)) {
|
|
96
|
-
formItemProps.getValueFromEvent = (_, dateString) => dateString;
|
|
97
|
-
formItemProps.getValueProps = value => ({
|
|
98
|
-
value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
return formItemProps;
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
// 获取items里的value和label字段key
|
|
105
|
-
const getItemsFieldKey = option => {
|
|
106
|
-
return {
|
|
107
|
-
valueKey: option?.itemsField?.valueKey || "bianma",
|
|
108
|
-
labelKey: option?.itemsField?.labelKey || "name"
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
// 获取 required
|
|
113
|
-
const getRequired = required => {
|
|
114
|
-
// 支持动态计算 required
|
|
115
|
-
return typeof required === "function" ? required(getFormValues()) : required ?? true;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
// 获取验证规则
|
|
119
|
-
const getRules = option => {
|
|
120
|
-
if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) return [];
|
|
121
|
-
const rules = [];
|
|
122
|
-
|
|
123
|
-
/** @type {string | Function} */
|
|
124
|
-
const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
|
|
125
|
-
switch (render) {
|
|
126
|
-
case FORM_ITEM_RENDER_ENUM.INPUT:
|
|
127
|
-
option.useConstraints !== false && rules.push({
|
|
128
|
-
max: 50,
|
|
129
|
-
message: "最多输入50字符"
|
|
130
|
-
});
|
|
131
|
-
break;
|
|
132
|
-
case FORM_ITEM_RENDER_ENUM.TEXTAREA:
|
|
133
|
-
option.useConstraints !== false && rules.push({
|
|
134
|
-
max: 500,
|
|
135
|
-
message: "最多输入500字符"
|
|
136
|
-
});
|
|
137
|
-
break;
|
|
138
|
-
case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
|
|
139
|
-
case FORM_ITEM_RENDER_ENUM.NUMBER:
|
|
140
|
-
option.useConstraints !== false && rules.push({
|
|
141
|
-
pattern: /^(\d+)(\.\d{1,2})?$/,
|
|
142
|
-
message: "请输入正确的数字,最多保留两位小数"
|
|
143
|
-
});
|
|
144
|
-
option.useConstraints !== false && rules.push({
|
|
145
|
-
validator: (_, value) => {
|
|
146
|
-
if (value && Math.abs(Number.parseFloat(value)) > 999999999) {
|
|
147
|
-
return Promise.reject("输入数值超出安全范围");
|
|
148
|
-
}
|
|
149
|
-
return Promise.resolve();
|
|
150
|
-
}
|
|
151
|
-
});
|
|
152
|
-
break;
|
|
153
|
-
}
|
|
154
|
-
if (!useAutoGenerateRequired) return option.rules ? Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules] : rules;
|
|
155
|
-
if (getRequired(option.required)) {
|
|
156
|
-
const isBlurTrigger = !option.render || [FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(option.render);
|
|
157
|
-
rules.push({
|
|
158
|
-
required: true,
|
|
159
|
-
message: `${isBlurTrigger ? "请输入" : "请选择"}${option.label}`
|
|
160
|
-
});
|
|
161
|
-
if (option.rules) {
|
|
162
|
-
if (Array.isArray(option.rules)) {
|
|
163
|
-
rules.push(...option.rules);
|
|
164
|
-
} else {
|
|
165
|
-
rules.push(option.rules);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
return rules;
|
|
169
|
-
}
|
|
170
|
-
return option.rules ? Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules] : rules;
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
// 获取key
|
|
174
|
-
const getKey = option => {
|
|
175
|
-
return option.key || option.name;
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
// 使用 style 控制显示/隐藏
|
|
179
|
-
const getStyle = index => {
|
|
180
|
-
return collapse && index >= 3 ? {
|
|
181
|
-
display: "none"
|
|
182
|
-
} : undefined;
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
// 列数
|
|
186
|
-
const getCol = option => {
|
|
187
|
-
const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
|
|
188
|
-
const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? {
|
|
189
|
-
span: labelCol.span / 2
|
|
190
|
-
} : labelCol);
|
|
191
|
-
const itemWrapperCol = option.wrapperCol ?? {
|
|
192
|
-
span: 24 - itemLabelCol.span
|
|
193
|
-
};
|
|
194
|
-
return {
|
|
195
|
-
span: itemSpan,
|
|
196
|
-
labelCol: itemLabelCol,
|
|
197
|
-
wrapperCol: itemWrapperCol
|
|
198
|
-
};
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
// 获取 hidden
|
|
202
|
-
const getHidden = hidden => {
|
|
203
|
-
// 支持动态计算 hidden
|
|
204
|
-
return typeof hidden === "function" ? hidden(getFormValues()) : hidden ?? false;
|
|
205
|
-
};
|
|
206
|
-
|
|
207
|
-
// 获取 listOptions
|
|
208
|
-
const getListOptions = (listOptions, field, fieldIndex, add, remove, move) => {
|
|
209
|
-
return typeof listOptions === "function" ? listOptions(field, fieldIndex, {
|
|
210
|
-
field,
|
|
211
|
-
fieldIndex,
|
|
212
|
-
add,
|
|
213
|
-
remove,
|
|
214
|
-
move
|
|
215
|
-
}) : listOptions ?? [];
|
|
216
|
-
};
|
|
217
|
-
|
|
218
|
-
// 渲染表单控件
|
|
219
|
-
const renderFormControl = option => {
|
|
220
|
-
const componentProps = getComponentProps(option);
|
|
221
|
-
const itemsFieldKey = getItemsFieldKey(option);
|
|
222
|
-
/** @type {string | Function} */
|
|
223
|
-
const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
|
|
224
|
-
const placeholder = option.placeholder || `请${[FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(render) ? "输入" : "选择"}${option.label}`;
|
|
225
|
-
switch (render) {
|
|
226
|
-
case FORM_ITEM_RENDER_ENUM.INPUT:
|
|
227
|
-
return /*#__PURE__*/jsx(Input, {
|
|
228
|
-
placeholder: placeholder,
|
|
229
|
-
maxLength: 50,
|
|
230
|
-
...componentProps
|
|
231
|
-
});
|
|
232
|
-
case FORM_ITEM_RENDER_ENUM.TEXTAREA:
|
|
233
|
-
return /*#__PURE__*/jsx(TextArea, {
|
|
234
|
-
placeholder: placeholder,
|
|
235
|
-
maxLength: 500,
|
|
236
|
-
showCount: true,
|
|
237
|
-
rows: 3,
|
|
238
|
-
...componentProps
|
|
239
|
-
});
|
|
240
|
-
case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
|
|
241
|
-
case FORM_ITEM_RENDER_ENUM.NUMBER:
|
|
242
|
-
return /*#__PURE__*/jsx(InputNumber, {
|
|
243
|
-
placeholder: placeholder,
|
|
244
|
-
style: {
|
|
245
|
-
width: "100%"
|
|
246
|
-
},
|
|
247
|
-
...componentProps
|
|
248
|
-
});
|
|
249
|
-
case FORM_ITEM_RENDER_ENUM.SELECT:
|
|
250
|
-
return /*#__PURE__*/jsx(Select, {
|
|
251
|
-
placeholder: placeholder,
|
|
252
|
-
showSearch: true,
|
|
253
|
-
allowClear: true,
|
|
254
|
-
optionFilterProp: "children",
|
|
255
|
-
...componentProps,
|
|
256
|
-
children: (option.items || []).map(item => {
|
|
257
|
-
const value = item[itemsFieldKey.valueKey];
|
|
258
|
-
const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
|
|
259
|
-
return /*#__PURE__*/jsx(Select.Option, {
|
|
260
|
-
value: value,
|
|
261
|
-
children: label
|
|
262
|
-
}, value);
|
|
263
|
-
})
|
|
264
|
-
});
|
|
265
|
-
case FORM_ITEM_RENDER_ENUM.RADIO:
|
|
266
|
-
return /*#__PURE__*/jsx(Radio.Group, {
|
|
267
|
-
...componentProps,
|
|
268
|
-
children: (option.items || []).map(item => {
|
|
269
|
-
const value = item[itemsFieldKey.valueKey];
|
|
270
|
-
const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
|
|
271
|
-
return /*#__PURE__*/jsx(Radio, {
|
|
272
|
-
value: value,
|
|
273
|
-
children: label
|
|
274
|
-
}, value);
|
|
275
|
-
})
|
|
276
|
-
});
|
|
277
|
-
case FORM_ITEM_RENDER_ENUM.CHECKBOX:
|
|
278
|
-
return /*#__PURE__*/jsx(Checkbox.Group, {
|
|
279
|
-
...componentProps,
|
|
280
|
-
children: (option.items || []).map(item => {
|
|
281
|
-
const value = item[itemsFieldKey.valueKey];
|
|
282
|
-
const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
|
|
283
|
-
return /*#__PURE__*/jsx(Checkbox, {
|
|
284
|
-
value: value,
|
|
285
|
-
children: label
|
|
286
|
-
}, value);
|
|
287
|
-
})
|
|
288
|
-
});
|
|
289
|
-
case FORM_ITEM_RENDER_ENUM.DATE:
|
|
290
|
-
return /*#__PURE__*/jsx(DatePicker, {
|
|
291
|
-
placeholder: placeholder,
|
|
292
|
-
format: "YYYY-MM-DD",
|
|
293
|
-
style: {
|
|
294
|
-
width: "100%"
|
|
295
|
-
},
|
|
296
|
-
...componentProps
|
|
297
|
-
});
|
|
298
|
-
case FORM_ITEM_RENDER_ENUM.DATE_MONTH:
|
|
299
|
-
return /*#__PURE__*/jsx(DatePicker, {
|
|
300
|
-
picker: "month",
|
|
301
|
-
placeholder: placeholder,
|
|
302
|
-
format: "YYYY-MM",
|
|
303
|
-
style: {
|
|
304
|
-
width: "100%"
|
|
305
|
-
},
|
|
306
|
-
...componentProps
|
|
307
|
-
});
|
|
308
|
-
case FORM_ITEM_RENDER_ENUM.DATE_YEAR:
|
|
309
|
-
return /*#__PURE__*/jsx(DatePicker, {
|
|
310
|
-
picker: "year",
|
|
311
|
-
placeholder: placeholder,
|
|
312
|
-
format: "YYYY",
|
|
313
|
-
style: {
|
|
314
|
-
width: "100%"
|
|
315
|
-
},
|
|
316
|
-
...componentProps
|
|
317
|
-
});
|
|
318
|
-
case FORM_ITEM_RENDER_ENUM.DATE_WEEK:
|
|
319
|
-
return /*#__PURE__*/jsx(DatePicker, {
|
|
320
|
-
picker: "week",
|
|
321
|
-
placeholder: placeholder,
|
|
322
|
-
format: "YYYY-wo",
|
|
323
|
-
style: {
|
|
324
|
-
width: "100%"
|
|
325
|
-
},
|
|
326
|
-
...componentProps
|
|
327
|
-
});
|
|
328
|
-
case FORM_ITEM_RENDER_ENUM.DATE_RANGE:
|
|
329
|
-
return /*#__PURE__*/jsx(RangePicker, {
|
|
330
|
-
placeholder: [`请选择开始${option.label}`, `请选择结束${option.label}`],
|
|
331
|
-
format: "YYYY-MM-DD",
|
|
332
|
-
style: {
|
|
333
|
-
width: "100%"
|
|
334
|
-
},
|
|
335
|
-
...componentProps
|
|
336
|
-
});
|
|
337
|
-
case FORM_ITEM_RENDER_ENUM.DATETIME:
|
|
338
|
-
return /*#__PURE__*/jsx(DatePicker, {
|
|
339
|
-
showTime: true,
|
|
340
|
-
placeholder: placeholder,
|
|
341
|
-
format: "YYYY-MM-DD HH:mm:ss",
|
|
342
|
-
style: {
|
|
343
|
-
width: "100%"
|
|
344
|
-
},
|
|
345
|
-
...componentProps
|
|
346
|
-
});
|
|
347
|
-
case FORM_ITEM_RENDER_ENUM.DATETIME_RANGE:
|
|
348
|
-
return /*#__PURE__*/jsx(RangePicker, {
|
|
349
|
-
showTime: true,
|
|
350
|
-
placeholder: [`请选择开始${option.label}`, `请选择结束${option.label}`],
|
|
351
|
-
format: "YYYY-MM-DD HH:mm:ss",
|
|
352
|
-
style: {
|
|
353
|
-
width: "100%"
|
|
354
|
-
},
|
|
355
|
-
...componentProps
|
|
356
|
-
});
|
|
357
|
-
case FORM_ITEM_RENDER_ENUM.DIVIDER:
|
|
358
|
-
return null;
|
|
359
|
-
default:
|
|
360
|
-
return render;
|
|
361
|
-
}
|
|
362
|
-
};
|
|
363
|
-
|
|
364
|
-
// 渲染 label(带提示)
|
|
365
|
-
const renderLabel = option => {
|
|
366
|
-
if (!option.tip) return option.label;
|
|
367
|
-
return /*#__PURE__*/jsxs(Fragment, {
|
|
368
|
-
children: [option.label, /*#__PURE__*/jsx(Tooltip, {
|
|
369
|
-
title: option.tip,
|
|
370
|
-
children: /*#__PURE__*/jsx(InfoCircleOutlined, {
|
|
371
|
-
style: {
|
|
372
|
-
marginLeft: 4,
|
|
373
|
-
fontSize: 12
|
|
374
|
-
}
|
|
375
|
-
})
|
|
376
|
-
})]
|
|
377
|
-
});
|
|
378
|
-
};
|
|
379
|
-
|
|
380
|
-
// 渲染普通表单项
|
|
381
|
-
const renderFormItem = ({
|
|
382
|
-
option,
|
|
383
|
-
style,
|
|
384
|
-
col,
|
|
385
|
-
index
|
|
386
|
-
}) => {
|
|
387
|
-
if (getHidden(option.hidden)) return null;
|
|
388
|
-
return /*#__PURE__*/jsx(Col, {
|
|
389
|
-
span: col.span,
|
|
390
|
-
style: style,
|
|
391
|
-
children: /*#__PURE__*/jsx(Form.Item, {
|
|
392
|
-
name: option.name,
|
|
393
|
-
label: renderLabel(option),
|
|
394
|
-
rules: getRules(option),
|
|
395
|
-
labelCol: col.labelCol,
|
|
396
|
-
wrapperCol: col.wrapperCol,
|
|
397
|
-
preserve: false,
|
|
398
|
-
...getFormItemProps(option),
|
|
399
|
-
children: renderFormControl(option)
|
|
400
|
-
})
|
|
401
|
-
}, getKey(option) || index);
|
|
402
|
-
};
|
|
403
|
-
|
|
404
|
-
// 渲染特殊类型的表单项
|
|
405
|
-
const renderOtherTypeItem = ({
|
|
406
|
-
option,
|
|
407
|
-
style,
|
|
408
|
-
col,
|
|
409
|
-
index
|
|
410
|
-
}) => {
|
|
411
|
-
const componentProps = getComponentProps(option);
|
|
412
|
-
|
|
413
|
-
// 如果是 customizeRender 类型,完全交给外部控制渲染
|
|
414
|
-
if (option.customizeRender) {
|
|
415
|
-
return /*#__PURE__*/jsx(Col, {
|
|
416
|
-
span: col.span,
|
|
417
|
-
style: style,
|
|
418
|
-
children: option.render
|
|
419
|
-
}, getKey(option) || index);
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
// 如果是 onlyForLabel 类型,不渲染任何UI,只在表单中保存数据
|
|
423
|
-
if (option.onlyForLabel) {
|
|
424
|
-
return /*#__PURE__*/jsx(Form.Item, {
|
|
425
|
-
name: option.name,
|
|
426
|
-
noStyle: true,
|
|
427
|
-
preserve: false,
|
|
428
|
-
children: /*#__PURE__*/jsx("input", {
|
|
429
|
-
type: "hidden"
|
|
430
|
-
})
|
|
431
|
-
}, getKey(option) || index);
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
// 如果是分割线
|
|
435
|
-
if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
|
|
436
|
-
return /*#__PURE__*/jsx(Col, {
|
|
437
|
-
span: col.span,
|
|
438
|
-
style: style,
|
|
439
|
-
children: /*#__PURE__*/jsx(Divider, {
|
|
440
|
-
orientation: "left",
|
|
441
|
-
...componentProps,
|
|
442
|
-
children: option.label
|
|
443
|
-
})
|
|
444
|
-
}, getKey(option) || index);
|
|
445
|
-
}
|
|
446
|
-
return null;
|
|
447
|
-
};
|
|
448
|
-
|
|
449
|
-
// 渲染 Form.List
|
|
450
|
-
const renderFormList = (option, index, col, style) => {
|
|
451
|
-
const formListUniqueProps = getFormListUniqueProps(option);
|
|
452
|
-
const componentProps = getComponentProps(option);
|
|
453
|
-
return /*#__PURE__*/jsx(Col, {
|
|
454
|
-
span: col.span,
|
|
455
|
-
style: style,
|
|
456
|
-
children: /*#__PURE__*/jsx(Form.List, {
|
|
457
|
-
name: option.name,
|
|
458
|
-
...componentProps,
|
|
459
|
-
children: (fields, {
|
|
460
|
-
add,
|
|
461
|
-
remove,
|
|
462
|
-
move
|
|
463
|
-
}) => /*#__PURE__*/jsx(Fragment, {
|
|
464
|
-
children: fields.map((field, fieldIndex) => {
|
|
465
|
-
const listOptions = getListOptions(option.formListUniqueProps.options, field, fieldIndex, add, remove, move);
|
|
466
|
-
return /*#__PURE__*/jsx(Row, {
|
|
467
|
-
gutter: gutter,
|
|
468
|
-
children: listOptions.map((listOption, listIndex) => {
|
|
469
|
-
const col = getCol(listOption);
|
|
470
|
-
const params = {
|
|
471
|
-
option: listOption,
|
|
472
|
-
style,
|
|
473
|
-
col,
|
|
474
|
-
index: `${fieldIndex}_${listIndex}`
|
|
475
|
-
};
|
|
476
|
-
const otherTypeItem = renderOtherTypeItem(params);
|
|
477
|
-
if (otherTypeItem) return otherTypeItem;
|
|
478
|
-
|
|
479
|
-
// 如果是最后一个表单项,则在其后添加操作按钮
|
|
480
|
-
// 这样可以确保每个表单项组都有添加/删除按钮
|
|
481
|
-
if (listIndex === listOptions.length - 1) {
|
|
482
|
-
return /*#__PURE__*/jsx(Col, {
|
|
483
|
-
span: col.span,
|
|
484
|
-
style: style,
|
|
485
|
-
children: /*#__PURE__*/jsx(Form.Item, {
|
|
486
|
-
label: renderLabel(listOption),
|
|
487
|
-
labelCol: col.labelCol,
|
|
488
|
-
wrapperCol: col.wrapperCol,
|
|
489
|
-
preserve: false,
|
|
490
|
-
required: getRequired(listOption.required),
|
|
491
|
-
...getFormItemProps(listOption),
|
|
492
|
-
children: /*#__PURE__*/jsxs("div", {
|
|
493
|
-
style: {
|
|
494
|
-
display: "flex",
|
|
495
|
-
gap: 10,
|
|
496
|
-
alignItems: "center",
|
|
497
|
-
justifyContent: "space-between"
|
|
498
|
-
},
|
|
499
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
500
|
-
style: {
|
|
501
|
-
flex: 1
|
|
502
|
-
},
|
|
503
|
-
children: /*#__PURE__*/jsx(Form.Item, {
|
|
504
|
-
noStyle: true,
|
|
505
|
-
rules: getRules(listOption),
|
|
506
|
-
name: listOption.name,
|
|
507
|
-
children: renderFormControl(listOption)
|
|
508
|
-
})
|
|
509
|
-
}),
|
|
510
|
-
// 只有当不是第一行时才显示删除按钮
|
|
511
|
-
fieldIndex >= 1 ? formListUniqueProps.showRemoveButton && /*#__PURE__*/jsx(Button, {
|
|
512
|
-
type: "primary",
|
|
513
|
-
danger: true,
|
|
514
|
-
onClick: () => remove(field.name),
|
|
515
|
-
children: formListUniqueProps.removeButtonText
|
|
516
|
-
}) :
|
|
517
|
-
// 第一行显示添加按钮
|
|
518
|
-
formListUniqueProps.showAddButton && /*#__PURE__*/jsx(Button, {
|
|
519
|
-
type: "primary",
|
|
520
|
-
onClick: () => add(formListUniqueProps.addDefaultValue, formListUniqueProps.addInsertIndex),
|
|
521
|
-
children: formListUniqueProps.addButtonText
|
|
522
|
-
})]
|
|
523
|
-
})
|
|
524
|
-
})
|
|
525
|
-
}, getKey(listOption) || listIndex);
|
|
526
|
-
}
|
|
527
|
-
return renderFormItem(params);
|
|
528
|
-
})
|
|
529
|
-
}, field.key);
|
|
530
|
-
})
|
|
531
|
-
})
|
|
532
|
-
})
|
|
533
|
-
}, getKey(option) || index);
|
|
534
|
-
};
|
|
535
|
-
|
|
536
|
-
// 渲染需要动态更新的表单项
|
|
537
|
-
const renderDynamicFormItem = (option, index, style, col) => {
|
|
538
|
-
return /*#__PURE__*/jsx(Form.Item, {
|
|
539
|
-
noStyle: true,
|
|
540
|
-
preserve: false,
|
|
541
|
-
shouldUpdate: option.shouldUpdate ?? option?.componentProps?.shouldUpdate,
|
|
542
|
-
dependencies: option.dependencies ?? option?.componentProps?.dependencies,
|
|
543
|
-
children: () => {
|
|
544
|
-
return renderFormItem({
|
|
545
|
-
option,
|
|
546
|
-
style,
|
|
547
|
-
col,
|
|
548
|
-
index
|
|
549
|
-
});
|
|
550
|
-
}
|
|
551
|
-
}, getKey(option) || index);
|
|
552
|
-
};
|
|
553
|
-
return /*#__PURE__*/jsx(Fragment, {
|
|
554
|
-
children: options.map((option, index) => {
|
|
555
|
-
const col = getCol(option);
|
|
556
|
-
const style = getStyle(index);
|
|
557
|
-
|
|
558
|
-
// 处理特殊类型的表单项
|
|
559
|
-
const otherTypeItem = renderOtherTypeItem({
|
|
560
|
-
option,
|
|
561
|
-
style,
|
|
562
|
-
col,
|
|
563
|
-
index
|
|
564
|
-
});
|
|
565
|
-
if (otherTypeItem) return otherTypeItem;
|
|
566
|
-
|
|
567
|
-
// 如果是 Form.List
|
|
568
|
-
if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST) {
|
|
569
|
-
return renderFormList(option, index, col, style);
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
// 如果配置了 shouldUpdate 或 dependencies,使用 Form.Item 的联动机制
|
|
573
|
-
if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
|
|
574
|
-
return renderDynamicFormItem(option, index, style, col);
|
|
575
|
-
}
|
|
576
|
-
|
|
577
|
-
// 普通表单项(静态配置)
|
|
578
|
-
return renderFormItem({
|
|
579
|
-
option,
|
|
580
|
-
style,
|
|
581
|
-
col,
|
|
582
|
-
index
|
|
583
|
-
});
|
|
584
|
-
})
|
|
585
|
-
});
|
|
586
|
-
};
|
|
587
|
-
FormItemsRenderer.displayName = "FormItemsRenderer";
|
|
588
|
-
|
|
589
|
-
export { FormItemsRenderer 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 o,Row as s,Button as a,Tooltip as i,Checkbox as d,Radio as p,Select as u,InputNumber 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:A}=n,I=({options:I,labelCol:b,gutter:v=24,span:Y=12,collapse:D=!1,useAutoGenerateRequired:P=!0,initialValues:R})=>{const w=t.useFormInstance(),U=()=>{const e=w.getFieldsValue();return 0===Object.keys(e).length&&R?R:e},M=e=>"function"==typeof e.componentProps?e.componentProps(U()):e.componentProps||{},N=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(U()):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},C=e=>"function"==typeof e?e(U()):e??!0,g=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()})}if(!P)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(C(e.required)){const n=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER].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},x=e=>e.key||e.name,K=e=>{const r=e.render===h.DIVIDER?24:e.span??Y,n=e.labelCol??(24===r?{span:b.span/2}:b);return{span:r,labelCol:n,wrapperCol:e.wrapperCol??{span:24-n.span}}},B=e=>{const t=M(e),l=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),o=e.render||h.INPUT,s=e.placeholder||`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER].includes(o)?"输入":"选择"}${e.label}`;switch(o){case h.INPUT:return y(r,{placeholder:s,maxLength:50,...t});case h.TEXTAREA:return y(T,{placeholder:s,maxLength:500,showCount:!0,rows:3,...t});case h.INPUT_NUMBER:case h.NUMBER:return y(c,{placeholder:s,style:{width:"100%"},...t});case h.SELECT:return y(u,{placeholder:s,showSearch:!0,allowClear:!0,optionFilterProp:"children",...t,children:(e.items||[]).map(e=>{const r=e[l.valueKey],n=e["function"==typeof l.labelKey?l.labelKey(e):l.labelKey];return y(u.Option,{value:r,children:n},r)})});case h.RADIO:return y(p.Group,{...t,children:(e.items||[]).map(e=>{const r=e[l.valueKey],n=e["function"==typeof l.labelKey?l.labelKey(e):l.labelKey];return y(p,{value:r,children:n},r)})});case h.CHECKBOX:return y(d.Group,{...t,children:(e.items||[]).map(e=>{const r=e[l.valueKey],n=e["function"==typeof l.labelKey?l.labelKey(e):l.labelKey];return y(d,{value:r,children:n},r)})});case h.DATE:return y(n,{placeholder:s,format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATE_MONTH:return y(n,{picker:"month",placeholder:s,format:"YYYY-MM",style:{width:"100%"},...t});case h.DATE_YEAR:return y(n,{picker:"year",placeholder:s,format:"YYYY",style:{width:"100%"},...t});case h.DATE_WEEK:return y(n,{picker:"week",placeholder:s,format:"YYYY-wo",style:{width:"100%"},...t});case h.DATE_RANGE:return y(A,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATETIME:return y(n,{showTime:!0,placeholder:s,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DATETIME_RANGE:return y(A,{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}},_=r=>r.tip?f(E,{children:[r.label,y(i,{title:r.tip,children:y(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,V=({option:e,style:r,col:n,index:o})=>{return("function"==typeof(s=e.hidden)?s(U()):s)?null:y(l,{span:n.span,style:r,children:y(t.Item,{name:e.name,label:_(e),rules:g(e),labelCol:n.labelCol,wrapperCol:n.wrapperCol,preserve:!1,...N(e),children:B(e)})},x(e)||o);var s},k=({option:e,style:r,col:n,index:s})=>{const a=M(e);return e.customizeRender?y(l,{span:n.span,style:r,children:e.render},x(e)||s):e.onlyForLabel?y(t.Item,{name:e.name,noStyle:!0,preserve:!1,children:y("input",{type:"hidden"})},x(e)||s):e.render===h.DIVIDER?y(l,{span:n.span,style:r,children:y(o,{orientation:"left",...a,children:e.label})},x(e)||s):null};return y(E,{children:I.map((e,r)=>{const n=K(e),o=(e=>D&&e>=3?{display:"none"}:void 0)(r);return k({option:e,style:o,col:n,index:r})||(e.render===h.FORM_LIST?((e,r,n,o)=>{const i=(e=>{const r={showAddButton:!0,showRemoveButton:!0,addButtonText:"添加",removeButtonText:"删除",options:[],addDefaultValue:{},addInsertIndex:void 0};return"function"==typeof e.formListUniqueProps?{...r,...e.formListUniqueProps(U())}:{...r,...e.formListUniqueProps||{}}})(e),d=M(e);return y(l,{span:n.span,style:o,children:y(t.List,{name:e.name,...d,children:(r,{add:n,remove:d,move:p})=>y(E,{children:r.map((r,u)=>{const c=((e,r,n,t,l,o)=>"function"==typeof e?e(r,n,{field:r,fieldIndex:n,add:t,remove:l,move:o}):e??[])(e.formListUniqueProps.options,r,u,n,d,p);return y(s,{gutter:v,children:c.map((e,s)=>{const p=K(e),m={option:e,style:o,col:p,index:`${u}_${s}`};return k(m)||(s===c.length-1?y(l,{span:p.span,style:o,children:y(t.Item,{label:_(e),labelCol:p.labelCol,wrapperCol:p.wrapperCol,preserve:!1,required:C(e.required),...N(e),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:g(e),name:e.name,children:B(e)})}),u>=1?i.showRemoveButton&&y(a,{type:"primary",danger:!0,onClick:()=>d(r.name),children:i.removeButtonText}):i.showAddButton&&y(a,{type:"primary",onClick:()=>n(i.addDefaultValue,i.addInsertIndex),children:i.addButtonText})]})})},x(e)||s):V(m))})},r.key)})})})},x(e)||r)})(e,r,n,o):(e.shouldUpdate??e.dependencies)||(e?.componentProps?.shouldUpdate??e?.componentProps?.dependencies)?((e,r,n,l)=>y(t.Item,{noStyle:!0,preserve:!1,shouldUpdate:e.shouldUpdate??e?.componentProps?.shouldUpdate,dependencies:e.dependencies??e?.componentProps?.dependencies,children:()=>V({option:e,style:n,col:l,index:r})},x(e)||r))(e,r,o,n):V({option:e,style:o,col:n,index:r}))})})};I.displayName="FormItemsRenderer";export{I as default};
|
|
@@ -1,44 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Divider } from 'antd';
|
|
3
|
-
import './index.less';
|
|
4
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
function HeaderBack(props) {
|
|
7
|
-
const {
|
|
8
|
-
title,
|
|
9
|
-
history,
|
|
10
|
-
previous = true
|
|
11
|
-
} = props;
|
|
12
|
-
return /*#__PURE__*/jsx("div", {
|
|
13
|
-
className: "header-back",
|
|
14
|
-
children: /*#__PURE__*/jsxs("div", {
|
|
15
|
-
className: "action",
|
|
16
|
-
children: [previous && /*#__PURE__*/jsxs(Fragment, {
|
|
17
|
-
children: [/*#__PURE__*/jsxs("div", {
|
|
18
|
-
className: "back",
|
|
19
|
-
onClick: () => history?.goBack?.() || window.history.back(),
|
|
20
|
-
children: [/*#__PURE__*/jsx(ArrowLeftOutlined, {
|
|
21
|
-
style: {
|
|
22
|
-
fontSize: 14
|
|
23
|
-
}
|
|
24
|
-
}), /*#__PURE__*/jsx("span", {
|
|
25
|
-
children: "\u8FD4\u56DE"
|
|
26
|
-
})]
|
|
27
|
-
}), /*#__PURE__*/jsx(Divider, {
|
|
28
|
-
type: "vertical",
|
|
29
|
-
style: {
|
|
30
|
-
backgroundColor: "#dcdfe6",
|
|
31
|
-
marginLeft: 15,
|
|
32
|
-
marginRight: 15
|
|
33
|
-
}
|
|
34
|
-
})]
|
|
35
|
-
}), /*#__PURE__*/jsx("div", {
|
|
36
|
-
className: "title",
|
|
37
|
-
children: title
|
|
38
|
-
})]
|
|
39
|
-
})
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
HeaderBack.displayName = "HeaderBack";
|
|
43
|
-
|
|
44
|
-
export { HeaderBack as default };
|
|
1
|
+
import{ArrowLeftOutlined as e}from"@ant-design/icons";import{Divider as i}from"antd";import"./index.less";import{jsx as a,jsxs as r,Fragment as t}from"react/jsx-runtime";function c(c){const{title:n,history:o,previous:s=!0}=c;return a("div",{className:"header-back",children:r("div",{className:"action",children:[s&&r(t,{children:[r("div",{className:"back",onClick:()=>o?.goBack?.()||window.history.back(),children:[a(e,{style:{fontSize:14}}),a("span",{children:"返回"})]}),a(i,{type:"vertical",style:{backgroundColor:"#dcdfe6",marginLeft:15,marginRight:15}})]}),a("div",{className:"title",children:n})]})})}c.displayName="HeaderBack";export{c as default};
|