lu-lowcode-package-form 0.9.57 → 0.9.58
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 +119 -119
- package/dist/index.es.js +2107 -2080
- package/package.json +1 -1
- package/src/App.jsx +89 -59
- package/src/components/form-container/index.jsx +34 -5
package/package.json
CHANGED
package/src/App.jsx
CHANGED
|
@@ -1,30 +1,29 @@
|
|
|
1
|
-
import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang
|
|
1
|
+
import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext } from './components';
|
|
2
2
|
import './App.css';
|
|
3
3
|
import { Button, Input, Select } from 'antd';
|
|
4
4
|
import React, { useEffect, useState } from 'react';
|
|
5
5
|
import Draggable from 'react-draggable';
|
|
6
|
-
import {MyPureComponentWithRef} from "./components/field/select/index"
|
|
7
6
|
|
|
8
7
|
const searchSelectOptions = [
|
|
9
|
-
{id:1,name:"1111"},
|
|
10
|
-
{id:2,name:"2222"},
|
|
11
|
-
{id:3,name:"3333"},
|
|
12
|
-
{id:4,name:"4444"},
|
|
13
|
-
{id:5,name:"5555"},
|
|
14
|
-
{id:6,name:"6666"},
|
|
15
|
-
{id:7,name:"7777"},
|
|
16
|
-
{id:8,name:"8888"},
|
|
17
|
-
{id:9,name:"9999"},
|
|
8
|
+
{ id: 1, name: "1111" },
|
|
9
|
+
{ id: 2, name: "2222" },
|
|
10
|
+
{ id: 3, name: "3333" },
|
|
11
|
+
{ id: 4, name: "4444" },
|
|
12
|
+
{ id: 5, name: "5555" },
|
|
13
|
+
{ id: 6, name: "6666" },
|
|
14
|
+
{ id: 7, name: "7777" },
|
|
15
|
+
{ id: 8, name: "8888" },
|
|
16
|
+
{ id: 9, name: "9999" },
|
|
18
17
|
]
|
|
19
18
|
const searchSelectRequest = async (params) => {
|
|
20
19
|
console.log("params", params)
|
|
21
20
|
return await new Promise((resolve) => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
setTimeout(() => {
|
|
22
|
+
if (params && params?.name) {
|
|
23
|
+
resolve({ code: 0, data: searchSelectOptions.filter(item => item.name.includes(params.name)) })
|
|
24
|
+
}
|
|
25
|
+
resolve({ code: 0, data: searchSelectOptions })
|
|
26
|
+
}, 20);
|
|
28
27
|
})
|
|
29
28
|
}
|
|
30
29
|
const DraggableBtn = () => {
|
|
@@ -78,7 +77,7 @@ function App() {
|
|
|
78
77
|
const testRef = React.useRef()
|
|
79
78
|
useEffect(() => {
|
|
80
79
|
console.log("testRef //////", testRef.current)
|
|
81
|
-
},[testRef.current])
|
|
80
|
+
}, [testRef.current])
|
|
82
81
|
const [cols, setCols] = React.useState(3);
|
|
83
82
|
|
|
84
83
|
const getFormFields = () => {
|
|
@@ -100,7 +99,7 @@ function App() {
|
|
|
100
99
|
}
|
|
101
100
|
}
|
|
102
101
|
const setFormFields = () => {
|
|
103
|
-
formRef?.current?.formRef?.setFieldsValue({"remark11":{"label":"选项2","value":"2"},"remark12":[{"label":"选项1","value":"1"},{"label":"选项2","value":"2"}], "userselect": "1213131","DeptSelect":["leaf11"], "searchuser":[{"id":2,"name":"2222","label":"2222","value":2},{"id":4,"name":"4444","label":"4444","value":4}],"PostSelect":'["parent 1-1","leaf11"]', "table": [{ "product_price1": "12", "product_num1": "123", "product_sum1": "1476", "node_oclxmzswzti": "", "select2": "" }, { "product_price1": "123", "product_num1": "213", "product_sum1": "26199", "node_oclxmzswzti": "", "select2": "" }], "product_total_price": "0.00", "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false })
|
|
102
|
+
formRef?.current?.formRef?.setFieldsValue({ "remark11": { "label": "选项2", "value": "2" }, "remark12": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }], "userselect": "1213131", "DeptSelect": ["leaf11"], "searchuser": [{ "id": 2, "name": "2222", "label": "2222", "value": 2 }, { "id": 4, "name": "4444", "label": "4444", "value": 4 }], "PostSelect": '["parent 1-1","leaf11"]', "table": [{ "product_price1": "12", "product_num1": "123", "product_sum1": "1476", "node_oclxmzswzti": "", "select2": "" }, { "product_price1": "123", "product_num1": "213", "product_sum1": "26199", "node_oclxmzswzti": "", "select2": "" }], "product_total_price": "0.00", "product_price": "213", "product_num": "21", "product_num_range": [1, 22], "product_sum": "4473", "switch": false })
|
|
104
103
|
}
|
|
105
104
|
const handleCols = () => {
|
|
106
105
|
setCols(cols - 1)
|
|
@@ -110,7 +109,7 @@ function App() {
|
|
|
110
109
|
return (
|
|
111
110
|
|
|
112
111
|
<div className="App fflex fflex-col fitems-center">
|
|
113
|
-
<DraggableBtn />
|
|
112
|
+
<DraggableBtn />
|
|
114
113
|
{/* <MyPureComponentWithRef ref={testRef} />; */}
|
|
115
114
|
{/* <div className='fw-full fp-4 fflex fjustify-center'>
|
|
116
115
|
<WangEditorNext />
|
|
@@ -140,11 +139,11 @@ function App() {
|
|
|
140
139
|
<Layout.FormGroupTitle title={"基本信息"} />
|
|
141
140
|
<Layout.FormRow layout={'1'}>
|
|
142
141
|
<Field.Table label="子表格" __id="table" >
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
142
|
+
<Field.Switch label="开关" __id="switch_table"></Field.Switch>
|
|
143
|
+
<Field.Input isRequired={true} label="商品价格" __id="product_price11" />
|
|
144
|
+
<Field.Input isRequired={true} label="商品价格" __id="product_price12" />
|
|
145
|
+
<Field.Input isRequired={true} label="商品价格" __id="product_price13" />
|
|
146
|
+
<Field.Input isRequired={true} label="商品价格" __id="product_price14" />
|
|
148
147
|
<Field.Input isRequired={true} label="商品价格" __id="product_price1" />
|
|
149
148
|
<Field.Input isRequired={true} label="商品个数" __id="product_num1" />
|
|
150
149
|
<Field.Input label="商品总价" __id="product_sum1"
|
|
@@ -219,8 +218,8 @@ function App() {
|
|
|
219
218
|
]
|
|
220
219
|
}}
|
|
221
220
|
/>
|
|
222
|
-
<Field.UserSelect
|
|
223
|
-
<Field.DeptSelect
|
|
221
|
+
<Field.UserSelect label="选择用户" __id="userselect" customComponent={Input} />
|
|
222
|
+
<Field.DeptSelect label="DeptSelect" __id="DeptSelect" treeData={[{
|
|
224
223
|
value: 'parent 1-1',
|
|
225
224
|
title: 'parent 1-1',
|
|
226
225
|
children: [
|
|
@@ -230,7 +229,7 @@ function App() {
|
|
|
230
229
|
},
|
|
231
230
|
],
|
|
232
231
|
},]}></Field.DeptSelect>
|
|
233
|
-
|
|
232
|
+
<Field.PostSelect multiple={true} label="PostSelect" __id="PostSelect" treeData={[{
|
|
234
233
|
value: 'parent 1-1',
|
|
235
234
|
title: 'parent 1-1',
|
|
236
235
|
children: [
|
|
@@ -240,8 +239,8 @@ function App() {
|
|
|
240
239
|
},
|
|
241
240
|
],
|
|
242
241
|
},]}></Field.PostSelect>
|
|
243
|
-
<Field.SearchSelect
|
|
244
|
-
<Field.Input
|
|
242
|
+
<Field.SearchSelect mode='multiple' label="搜组件" __id="searchuser" request={searchSelectRequest} option_search={"name"} option_label="name" option_value="id"></Field.SearchSelect>
|
|
243
|
+
<Field.Input rules={"^(1[3-9]\\d{9})$"} isRequired={true} label="商品价格" __id="product_price" />
|
|
245
244
|
<Field.Input label="商品数量" __id="product_num" />
|
|
246
245
|
<Field.NumberRange label="数量范围" __id="product_num_range" />
|
|
247
246
|
<Field.Input rules={["^(1[3-9]\\d{9})$", "^\\d+$"]} label="商品总价" __id="product_sum"
|
|
@@ -282,19 +281,19 @@ function App() {
|
|
|
282
281
|
|
|
283
282
|
]
|
|
284
283
|
}} />
|
|
285
|
-
<Field.SingleSelect
|
|
286
|
-
<Field.MultipleSelect
|
|
287
|
-
<Field.TreeSelect
|
|
288
|
-
<Field.Switch
|
|
284
|
+
<Field.SingleSelect mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
|
|
285
|
+
<Field.MultipleSelect mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
|
|
286
|
+
<Field.TreeSelect label="分组名" __id="title11"></Field.TreeSelect>
|
|
287
|
+
<Field.Switch label="开关" __id="switch"></Field.Switch>
|
|
289
288
|
<Layout.FormGroupTitle title={"嘟嘟嘟嘟嘟"} />
|
|
290
|
-
<Field.CodeMachine
|
|
289
|
+
<Field.CodeMachine label="角色编号" prompt="" __id="code"
|
|
291
290
|
withIds={["switch"]}
|
|
292
291
|
withFunc={(fieldsValue) => {
|
|
293
292
|
return fieldsValue?.switch ? true : false
|
|
294
293
|
}}
|
|
295
294
|
/>
|
|
296
295
|
<Field.DatePicker label="日期时间" prompt="" datetype="month" value='2022-10-22' __id="datetime" />
|
|
297
|
-
<Field.DatePicker
|
|
296
|
+
<Field.DatePicker label="日期时间" prompt="" datetype="date" value='2022-10-22' __id="datetime2" />
|
|
298
297
|
<Field.DatePicker label="日期时间" prompt="" datetype="datetime" value={'2022-10-22'} __id="datetime3" />
|
|
299
298
|
<Field.DatePicker label="年" prompt="" datetype="year" value={'2022-10-22'} __id="datetime4" />
|
|
300
299
|
<Field.Input label="角色名称" __id="name" />
|
|
@@ -302,39 +301,70 @@ function App() {
|
|
|
302
301
|
<Field.Input label="角色名称布局" __id="name1" />
|
|
303
302
|
<Field.Input label="角色名称布局2" __id="name2" />
|
|
304
303
|
</Layout.FormRow>
|
|
305
|
-
<Field.CheckboxTree
|
|
304
|
+
<Field.CheckboxTree label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
|
|
306
305
|
<Layout.FormGroupTitle title={"关联信息"} />
|
|
307
|
-
<Field.WithSingleSelect
|
|
308
|
-
|
|
306
|
+
<Field.WithSingleSelect fillRules={[
|
|
307
|
+
{
|
|
308
|
+
"id": "636d3924-0298-4e9b-809a-26d4a10d7b89",
|
|
309
|
+
"type": 0,
|
|
310
|
+
"source": "name",
|
|
311
|
+
"target": "name",
|
|
312
|
+
"subRules": [
|
|
313
|
+
|
|
314
|
+
]
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"id": "93401e38-60a4-4acf-84a6-8958785a4a30",
|
|
318
|
+
"type": 1,
|
|
319
|
+
"source": "table",
|
|
320
|
+
"target": "table",
|
|
321
|
+
"subRules": [
|
|
322
|
+
{
|
|
323
|
+
"id": "c4a65ae5-58ff-4d7f-8738-a04de1acab61",
|
|
324
|
+
"type": 0,
|
|
325
|
+
"source": "price",
|
|
326
|
+
"target": "product_price1"
|
|
327
|
+
},
|
|
328
|
+
|
|
329
|
+
{
|
|
330
|
+
"id": "c4a65ae5-58ff-4d7f-8738-a04de1acab61",
|
|
331
|
+
"type": 0,
|
|
332
|
+
"source": "num",
|
|
333
|
+
"target": "product_num1"
|
|
334
|
+
},
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
]} label="测试关联单选" options={[{ label: '选项1', value: '1', name:"1111",table:[{"price":1,"num":2,},{"price":2,"num":2,}] }, { label: '选项2', value: '2' }]} __id="remark11" />
|
|
338
|
+
<Field.WithMultipleSelect label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
|
|
309
339
|
<Layout.FormRow > <Field.TextArea label="备注" __id="remark" /></Layout.FormRow>
|
|
310
340
|
|
|
311
341
|
<Layout.FormRow layout={'1'}>
|
|
312
|
-
<Field.RadioGroup
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
},
|
|
319
|
-
"attributes": {
|
|
320
|
-
"id": "remark11",
|
|
321
|
-
"color": "blue",
|
|
322
|
-
"tagKey": "fieldsValue",
|
|
323
|
-
"content": "测试关联单选"
|
|
324
|
-
}
|
|
342
|
+
<Field.RadioGroup withIds={["remark11"]}
|
|
343
|
+
withFill={{
|
|
344
|
+
"value": [
|
|
345
|
+
{
|
|
346
|
+
"insert": {
|
|
347
|
+
"span": true
|
|
325
348
|
},
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
349
|
+
"attributes": {
|
|
350
|
+
"id": "remark11",
|
|
351
|
+
"color": "blue",
|
|
352
|
+
"tagKey": "fieldsValue",
|
|
353
|
+
"content": "测试关联单选"
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
],
|
|
357
|
+
"version": 1719296886283,
|
|
358
|
+
"withData": [
|
|
329
359
|
|
|
330
|
-
|
|
331
|
-
|
|
360
|
+
]
|
|
361
|
+
}} options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
|
|
332
362
|
</Layout.FormRow>
|
|
333
363
|
<Layout.FormRow layout={'1'}>
|
|
334
|
-
<Field.CheckboxGroup
|
|
364
|
+
<Field.CheckboxGroup options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
|
|
335
365
|
</Layout.FormRow>
|
|
336
366
|
<Field.UploadFile label="上传文件" __id="UploadFile" ></Field.UploadFile>
|
|
337
|
-
<Field.UploadImage
|
|
367
|
+
<Field.UploadImage label="上传图片" __id="UploadImage" ></Field.UploadImage>
|
|
338
368
|
|
|
339
369
|
</FormContainerWrapper>
|
|
340
370
|
<div class="fgroup">11111
|
|
@@ -62,6 +62,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
62
62
|
function traverse(currentNode, parentNode = null) {
|
|
63
63
|
var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
|
|
64
64
|
const { props } = currentNode;
|
|
65
|
+
console.log("props ///////////", props)
|
|
65
66
|
if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.'))) {
|
|
66
67
|
let identifier = props?.componentId || props?.__id;
|
|
67
68
|
let withIds = []
|
|
@@ -73,7 +74,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
73
74
|
if (props?.withIds)
|
|
74
75
|
withIds = [...withIds, ...props?.withIds]
|
|
75
76
|
|
|
76
|
-
fields.push({ identifier, withIds, component: currentNode,componentName });
|
|
77
|
+
fields.push({ identifier, withIds, component: currentNode,componentName, fillRules:props?.fillRules });
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
if (props?.children) {
|
|
@@ -87,7 +88,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
87
88
|
const element = childrenArray[index];
|
|
88
89
|
traverse(element)
|
|
89
90
|
}
|
|
90
|
-
// console.log("fields", fields)
|
|
91
91
|
fields.forEach(field => {
|
|
92
92
|
const { identifier } = field;
|
|
93
93
|
dependencyMap.current.set(identifier, {
|
|
@@ -96,7 +96,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
96
96
|
// })),
|
|
97
97
|
children: fields.filter(item => item.withIds.some(item => item == identifier)),
|
|
98
98
|
show: true,
|
|
99
|
-
|
|
99
|
+
...field
|
|
100
100
|
});
|
|
101
101
|
});
|
|
102
102
|
// console.log("dependencyMap", dependencyMap.current)
|
|
@@ -121,11 +121,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
121
121
|
identifier = identifier.filter(item => typeof item == "string").join(".")
|
|
122
122
|
}
|
|
123
123
|
if (dependencyMap.current.has(identifier)) {
|
|
124
|
-
// console.log("dependencyMap.current.get(identifier)",dependencyMap.current.get(identifier))
|
|
125
124
|
const dependent = dependencyMap.current.get(identifier)
|
|
125
|
+
console.log("dependent",dependent)
|
|
126
126
|
const dependentChildren = dependent.children;
|
|
127
127
|
// console.log("dependentChildren", dependentChildren)
|
|
128
|
-
|
|
128
|
+
if (dependent?.fillRules && Array.isArray(dependent?.fillRules) && dependent?.fillRules.length > 0) {
|
|
129
|
+
handleFillRules(identifier,parentIdentifier, fieldValues, dependent?.fillRules)
|
|
130
|
+
}
|
|
129
131
|
dependentChildren.forEach(child => {
|
|
130
132
|
if (child.component.props.withFunc && typeof child.component.props.withFunc === 'function') {
|
|
131
133
|
needRefresh = handleFieldsVisible(fieldValues, child, parentIdentifier)
|
|
@@ -139,6 +141,33 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
139
141
|
return needRefresh;
|
|
140
142
|
};
|
|
141
143
|
|
|
144
|
+
// 处理填充规则
|
|
145
|
+
const handleFillRules = (current_identifier,parentIdentifier, fieldValues, fillRules) => {
|
|
146
|
+
// 获取当前变更的字段数据
|
|
147
|
+
let current_value = getParamValue("fieldsValue", current_identifier, fieldValues, null)
|
|
148
|
+
for (let index = 0; index < fillRules.length; index++) {
|
|
149
|
+
const rule = fillRules[index];
|
|
150
|
+
const { source , target } = rule
|
|
151
|
+
const source_value = current_value?.[source]
|
|
152
|
+
// 子表
|
|
153
|
+
if (rule?.type == 1) {
|
|
154
|
+
if (!Array.isArray(source_value)) return
|
|
155
|
+
let target_value = source_value.map(item => {
|
|
156
|
+
let target_value = {}
|
|
157
|
+
if (rule?.subRules && Array.isArray(rule?.subRules) && rule?.subRules.length > 0)
|
|
158
|
+
for (let index = 0; index < rule?.subRules.length; index++) {
|
|
159
|
+
const { source:subSource, target:subTarget } = rule?.subRules[index];
|
|
160
|
+
target_value[subTarget] = item?.[subSource]
|
|
161
|
+
}
|
|
162
|
+
return target_value
|
|
163
|
+
})
|
|
164
|
+
form.setFieldValue(target,target_value)
|
|
165
|
+
}
|
|
166
|
+
// 同级字段
|
|
167
|
+
else form.setFieldValue(target,source_value)
|
|
168
|
+
}
|
|
169
|
+
console.log("current value",current_value )
|
|
170
|
+
}
|
|
142
171
|
// 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
|
|
143
172
|
const handleFieldsVisible = (fieldValues, child, parentIdentifier) => {
|
|
144
173
|
let needRefresh = false;
|