lu-lowcode-package-form 0.11.9 → 0.11.10
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/dist/index.cjs.js +248 -248
- package/dist/index.es.js +19706 -19703
- package/package.json +1 -1
- package/src/App copy 2.jsx +952 -0
- package/src/App copy 3.jsx +278 -0
- package/src/App.jsx +3 -7
- package/src/components/form-container/index.jsx +22 -12
@@ -0,0 +1,278 @@
|
|
1
|
+
import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext, Show } from './components';
|
2
|
+
import './App.css';
|
3
|
+
import { Button, Input, Select } from 'antd';
|
4
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
5
|
+
import Draggable from 'react-draggable';
|
6
|
+
import { throttle, debounce } from 'lodash';
|
7
|
+
import { SortList } from "./components"
|
8
|
+
import { TinyMCEEditor } from './components'
|
9
|
+
import { PrinterOutlined } from '@ant-design/icons';
|
10
|
+
const searchSelectOptions = [
|
11
|
+
{ id: 1, name: "1111" },
|
12
|
+
{ id: 2, name: "2222" },
|
13
|
+
{ id: 3, name: "3333" },
|
14
|
+
{ id: 4, name: "4444" },
|
15
|
+
{ id: 5, name: "5555" },
|
16
|
+
{ id: 6, name: "6666" },
|
17
|
+
{ id: 7, name: "7777" },
|
18
|
+
{ id: 8, name: "8888" },
|
19
|
+
{ id: 9, name: "9999" },
|
20
|
+
]
|
21
|
+
const searchSelectRequest = async (params) => {
|
22
|
+
// console.log("params", params)
|
23
|
+
return await new Promise((resolve) => {
|
24
|
+
setTimeout(() => {
|
25
|
+
if (params && params?.name) {
|
26
|
+
resolve({ code: 0, data: searchSelectOptions.filter(item => item.name.includes(params.name)) })
|
27
|
+
}
|
28
|
+
resolve({ code: 0, data: searchSelectOptions })
|
29
|
+
}, 20);
|
30
|
+
})
|
31
|
+
}
|
32
|
+
const DraggableBtn = () => {
|
33
|
+
const [dragging, setDragging] = useState(false);
|
34
|
+
|
35
|
+
const handleStart = (e) => {
|
36
|
+
e.preventDefault();
|
37
|
+
setDragging(false);
|
38
|
+
};
|
39
|
+
|
40
|
+
const handleDrag = () => {
|
41
|
+
setDragging(true);
|
42
|
+
};
|
43
|
+
|
44
|
+
const handleStop = (e) => {
|
45
|
+
e.preventDefault();
|
46
|
+
if (!dragging) {
|
47
|
+
alert('Button clicked!');
|
48
|
+
}
|
49
|
+
};
|
50
|
+
|
51
|
+
return (
|
52
|
+
<Draggable
|
53
|
+
onStart={handleStart}
|
54
|
+
onDrag={handleDrag}
|
55
|
+
onStop={handleStop}
|
56
|
+
>
|
57
|
+
<button className="floating-button">Drag me!</button>
|
58
|
+
</Draggable>
|
59
|
+
);
|
60
|
+
}
|
61
|
+
|
62
|
+
const treeData = [
|
63
|
+
{
|
64
|
+
title: '0-1',
|
65
|
+
key: '0-1',
|
66
|
+
children: [
|
67
|
+
{ title: '0-1-0-0', key: '0-1-0-0' },
|
68
|
+
{ title: '0-1-0-1', key: '0-1-0-1' },
|
69
|
+
{ title: '0-1-0-2', key: '0-1-0-2' },
|
70
|
+
],
|
71
|
+
},
|
72
|
+
{
|
73
|
+
title: '0-2',
|
74
|
+
key: '0-2',
|
75
|
+
},
|
76
|
+
];
|
77
|
+
|
78
|
+
function App() {
|
79
|
+
const formRef = React.createRef();
|
80
|
+
const testRef = React.useRef()
|
81
|
+
const [testCalcHidden, setTestCalcHidden] = useState(false);
|
82
|
+
const [readonly, setReadonly] = useState(true);
|
83
|
+
|
84
|
+
const testdebounce = useCallback(debounce((param1, param2) => {
|
85
|
+
console.log("testdebounce param1", param1)
|
86
|
+
console.log("testdebounce param2", param2)
|
87
|
+
}, 200))
|
88
|
+
|
89
|
+
|
90
|
+
useEffect(() => {
|
91
|
+
testdebounce(1, 2)
|
92
|
+
testdebounce(11, 22)
|
93
|
+
testdebounce(111, 222)
|
94
|
+
// console.log("testRef //////", testRef.current)
|
95
|
+
}, [testRef.current])
|
96
|
+
const [cols, setCols] = React.useState(3);
|
97
|
+
|
98
|
+
const getFormFields = () => {
|
99
|
+
console.log("formRef?.current", formRef)
|
100
|
+
const formData = formRef?.current?.formRef?.getFieldsValue();
|
101
|
+
console.log("formData", JSON.stringify(formData));
|
102
|
+
}
|
103
|
+
// 验证
|
104
|
+
const validateFields = async () => {
|
105
|
+
try {
|
106
|
+
var values = await formRef?.current?.formRef?.validateFields({
|
107
|
+
validateOnly: false,
|
108
|
+
})
|
109
|
+
console.log("values", values)
|
110
|
+
|
111
|
+
} catch (error) {
|
112
|
+
console.log("error", error)
|
113
|
+
console.log(error.errorFields[0].errors[0])
|
114
|
+
}
|
115
|
+
}
|
116
|
+
const setFormFields = () => {
|
117
|
+
formRef?.current?.setFieldsValue({ "__id": 1, "userselect": "1213131", "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table2": [{}], "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "", "tianchong1": { "label": "选项1", "value": "1", "tianchong2": { "label": "选项2", "value": "2" }, "tcinput1": "1111" }, "tianchong2": { "label": "选项2", "value": "2", "tcinput1": "8989", "tcinput2": "2222" }, "tcinput1": "8989", "tcinput2": "2222", "tcinput3": "2222" }, { "product_num1": "213", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "datetime2": "2024-08-22 11:09:07", "product_price13": 1, "product_price14": 2, "product_price12": "", "remark11": { "label": "选项3", "value": "3" }, "product_price11": 3 }], "product_total_price": "0.00", "DeptSelect": ["leaf11"], "PostSelect": ["parent 1-1", "leaf11"], "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }], "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false, "datetime": "2024-08-25", "datetime2": "2024-08-25", "datetime3": "", "datetime4": "2024-08-22 11:09:04", "remark12": JSON.stringify([{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }]) })
|
118
|
+
// formRef?.current?.setFieldsValue({"tianchong1":{"label":"选项1","value":"1"}, })
|
119
|
+
}
|
120
|
+
const handleCols = () => {
|
121
|
+
|
122
|
+
setCols(cols == 1 ? 3 : cols - 1)
|
123
|
+
}
|
124
|
+
|
125
|
+
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
|
126
|
+
|
127
|
+
const handleUpdateReadonly = () => {
|
128
|
+
setReadonly(!readonly)
|
129
|
+
}
|
130
|
+
|
131
|
+
const [sortItems, setSortItems] = useState([{ id: 1, content: "sdfsfd" }, { id: 2, content: "sdfsfd2" }, { id: 3, content: "sdfsfd3" }]);
|
132
|
+
return (
|
133
|
+
<div className='fflex fflex-col fitems-center fh-screen '>
|
134
|
+
<div className='fflex fgap-2 fitems-center fjustify-center fw-full'>
|
135
|
+
<Button type="primary" onClick={() => {
|
136
|
+
setTestCalcHidden(!testCalcHidden)
|
137
|
+
}}>testCalcHidden</Button>
|
138
|
+
<Button type="primary" onClick={validateFields}>validateFields</Button>
|
139
|
+
<Button type="primary" onClick={getFormFields}>GetValues</Button>
|
140
|
+
<Button type="primary" onClick={setFormFields}>SetValues</Button>
|
141
|
+
<Button type="primary" onClick={() => {
|
142
|
+
console.log("testRef.current", testRef.current)
|
143
|
+
testRef.current?.handleChange({ label: '选项1', value: '1', name: "1111", table: "[{\"price\":1,\"num\":2},{\"price\":2,\"num\":2}]" })
|
144
|
+
}}>testwithref</Button>
|
145
|
+
<Button type="primary" onClick={handleCols}>UpdateCol</Button>
|
146
|
+
<Button type="primary" onClick={handleUpdateReadonly}>UpdateReadonly</Button>
|
147
|
+
</div>
|
148
|
+
|
149
|
+
<div className=" fflex fflex-col fitems-center fflex-1 foverflow-y-auto">
|
150
|
+
<div className='fw-[960px] frounded fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
|
151
|
+
|
152
|
+
|
153
|
+
<FormContainerWrapper cols={cols} className="" ref={formRef} >
|
154
|
+
|
155
|
+
<Field.RadioGroup
|
156
|
+
buttonStyle="solid"
|
157
|
+
label="菜单类型"
|
158
|
+
__id="routeType"
|
159
|
+
defaultValue={2}
|
160
|
+
options={[{ label: "菜单分组", value: 999 }, { label: "URL", value: 1 }, { label: "绑定表单", value: 2 }]} />
|
161
|
+
|
162
|
+
|
163
|
+
<Field.Input label="测试 withVisible" __id="withVisible"
|
164
|
+
isRequired={true}
|
165
|
+
withIds={["routeType"]}
|
166
|
+
withVisible={{
|
167
|
+
"value": [
|
168
|
+
{
|
169
|
+
"insert": {
|
170
|
+
"span": true
|
171
|
+
},
|
172
|
+
"attributes": {
|
173
|
+
"id": "routeType",
|
174
|
+
"color": "blue",
|
175
|
+
"tagKey": "fieldsValue",
|
176
|
+
"content": "当前表单.开关"
|
177
|
+
}
|
178
|
+
},
|
179
|
+
{
|
180
|
+
"insert": " == 1\n"
|
181
|
+
}
|
182
|
+
],
|
183
|
+
"version": 1734400834533,
|
184
|
+
"withData": [
|
185
|
+
|
186
|
+
]
|
187
|
+
}}
|
188
|
+
/>
|
189
|
+
<Field.Input label="测试 withVisible2" __id="withVisible2"
|
190
|
+
isRequired={true}
|
191
|
+
withIds={["routeType"]}
|
192
|
+
withVisible={{
|
193
|
+
"value": [
|
194
|
+
{
|
195
|
+
"insert": {
|
196
|
+
"span": true
|
197
|
+
},
|
198
|
+
"attributes": {
|
199
|
+
"id": "routeType",
|
200
|
+
"color": "blue",
|
201
|
+
"tagKey": "fieldsValue",
|
202
|
+
"content": "当前表单.开关2"
|
203
|
+
}
|
204
|
+
},
|
205
|
+
{
|
206
|
+
"insert": " == 2\n"
|
207
|
+
}
|
208
|
+
],
|
209
|
+
"version": 1734400834533,
|
210
|
+
"withData": [
|
211
|
+
|
212
|
+
]
|
213
|
+
}}
|
214
|
+
/>
|
215
|
+
<Field.Input label="测试 withVisible21" __id="withVisible21"
|
216
|
+
isRequired={true}
|
217
|
+
withIds={["routeType"]}
|
218
|
+
withVisible={{
|
219
|
+
"value": [
|
220
|
+
{
|
221
|
+
"insert": {
|
222
|
+
"span": true
|
223
|
+
},
|
224
|
+
"attributes": {
|
225
|
+
"id": "routeType",
|
226
|
+
"color": "blue",
|
227
|
+
"tagKey": "fieldsValue",
|
228
|
+
"content": "当前表单.开关2"
|
229
|
+
}
|
230
|
+
},
|
231
|
+
{
|
232
|
+
"insert": " == 2\n"
|
233
|
+
}
|
234
|
+
],
|
235
|
+
"version": 1734400834533,
|
236
|
+
"withData": [
|
237
|
+
|
238
|
+
]
|
239
|
+
}}
|
240
|
+
/>
|
241
|
+
<Field.Select label="绑定表单"
|
242
|
+
option_label={"formTitle"}
|
243
|
+
__id="menuFormTemplateId"
|
244
|
+
withIds={["routeType"]}
|
245
|
+
withVisibleFunc={(fieldsValue) => {
|
246
|
+
const result = fieldsValue?.routeType == 2 ? true : false
|
247
|
+
// console.log("withVisibleFunc menuFormTemplateId", fieldsValue)
|
248
|
+
// console.log("withVisibleFunc menuFormTemplateId result", result)
|
249
|
+
return result
|
250
|
+
}} />
|
251
|
+
|
252
|
+
|
253
|
+
<Field.Input label="隐藏字段" __id="hidden1"
|
254
|
+
calcHidden={true}
|
255
|
+
/>
|
256
|
+
|
257
|
+
<Field.Input label="菜单URL" __id="route"
|
258
|
+
withIds={["routeType"]}
|
259
|
+
withVisibleFunc={(fieldsValue) => {
|
260
|
+
const result = fieldsValue?.routeType == 1 ? true : false
|
261
|
+
// console.log("withVisibleFunc route", fieldsValue)
|
262
|
+
// console.log("withVisibleFunc route result", result)
|
263
|
+
return result
|
264
|
+
}} />
|
265
|
+
|
266
|
+
</FormContainerWrapper>
|
267
|
+
|
268
|
+
|
269
|
+
</div>
|
270
|
+
|
271
|
+
</div>
|
272
|
+
</div>
|
273
|
+
);
|
274
|
+
}
|
275
|
+
|
276
|
+
export default App;
|
277
|
+
|
278
|
+
export { FormContainer, Field, FormContainerWrapper } from './components'
|
package/src/App.jsx
CHANGED
@@ -87,12 +87,7 @@ function App() {
|
|
87
87
|
}, 200))
|
88
88
|
|
89
89
|
|
90
|
-
|
91
|
-
testdebounce(1, 2)
|
92
|
-
testdebounce(11, 22)
|
93
|
-
testdebounce(111, 222)
|
94
|
-
// console.log("testRef //////", testRef.current)
|
95
|
-
}, [testRef.current])
|
90
|
+
|
96
91
|
const [cols, setCols] = React.useState(3);
|
97
92
|
|
98
93
|
const getFormFields = () => {
|
@@ -194,7 +189,7 @@ function App() {
|
|
194
189
|
<div className='fw-[960px] frounded fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
|
195
190
|
|
196
191
|
|
197
|
-
<FormContainerWrapper cols={cols} className="" ref={formRef} >
|
192
|
+
<FormContainerWrapper cols={cols} key={"formc"} className="" ref={formRef} >
|
198
193
|
|
199
194
|
<Field.WithSingleSelect
|
200
195
|
ref={testRef}
|
@@ -225,6 +220,7 @@ function App() {
|
|
225
220
|
buttonStyle="solid"
|
226
221
|
label="菜单类型"
|
227
222
|
__id="routeType"
|
223
|
+
defaultValue={2}
|
228
224
|
options={[{ label: "菜单分组", value: 999 }, { label: "URL", value: 1 }, { label: "绑定表单", value: 2 }]} />
|
229
225
|
|
230
226
|
|
@@ -80,17 +80,20 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
80
80
|
|
81
81
|
// 添加节流后的 initializeFormRender
|
82
82
|
const throttledInitializeFormRender = React.useCallback(
|
83
|
-
throttle(() => {
|
83
|
+
throttle(async () => {
|
84
84
|
console.log("throttledInitializeFormRender")
|
85
|
-
initializeDependencyMap();
|
86
|
-
|
85
|
+
await initializeDependencyMap();
|
86
|
+
requestAnimationFrame(() => {
|
87
|
+
setFormContent(renderChildren());
|
88
|
+
})
|
89
|
+
console.log("throttledInitializeFormRender end")
|
90
|
+
|
87
91
|
}, 300),
|
88
92
|
[children, cols]
|
89
93
|
);
|
90
94
|
|
91
95
|
|
92
96
|
useEffect(() => {
|
93
|
-
console.log("children", children)
|
94
97
|
throttledInitializeFormRender();
|
95
98
|
return () => {
|
96
99
|
throttledInitializeFormRender.cancel();
|
@@ -113,7 +116,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
113
116
|
// }
|
114
117
|
// return current;
|
115
118
|
}
|
116
|
-
const initializeDependencyMap = () => {
|
119
|
+
const initializeDependencyMap = async () => {
|
117
120
|
const fields = [];
|
118
121
|
function traverse(currentNode, parentNode = null) {
|
119
122
|
var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
|
@@ -157,19 +160,26 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
157
160
|
});
|
158
161
|
});
|
159
162
|
console.log("dependencyMap.current", dependencyMap.current)
|
160
|
-
|
163
|
+
await initializeFieldVisibilityImmediate();
|
161
164
|
};
|
162
|
-
|
163
|
-
// 初始化字段的级联关系
|
164
|
-
const initializeFieldVisibility = debounce(async (reloadFields = false) => {
|
165
|
+
const initializeFieldVisibilityImmediate = async (reloadFields = false) => {
|
165
166
|
console.log("initializeFieldVisibility *************************************")
|
166
167
|
const fieldValues = form.getFieldsValue();
|
167
|
-
|
168
|
-
|
169
|
-
|
168
|
+
|
169
|
+
await Promise.all(Array.from(dependencyMap.current.keys()).map(async (key) => {
|
170
|
+
await handleFieldsWith(key, fieldValues, true);
|
171
|
+
}))
|
172
|
+
// for (let key of dependencyMap.current.keys()) {
|
173
|
+
// await handleFieldsWith(key, fieldValues, true);
|
174
|
+
// }
|
170
175
|
if (reloadFields) setFormContent(renderChildren());
|
176
|
+
};
|
177
|
+
// 初始化字段的级联关系
|
178
|
+
const initializeFieldVisibility = debounce(async (reloadFields = false) => {
|
179
|
+
await initializeFieldVisibilityImmediate(reloadFields);
|
171
180
|
}, 100);
|
172
181
|
|
182
|
+
|
173
183
|
// 计算字段级联关系
|
174
184
|
const handleFieldsWith = async (identifier, fieldValues, init = false) => {
|
175
185
|
// console.log("handleFieldsWith identifier", identifier)
|