lu-lowcode-package-form 0.9.96 → 0.9.97

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 (6) hide show
  1. package/dist/index.cjs.js +154 -154
  2. package/dist/index.es.js +15881 -15872
  3. package/package.json +1 -1
  4. package/src/App.jsx +68 -12
  5. package/src/components/field/select/search-select.jsx +13 -10
  6. package/src/components/form-container/index.jsx +21 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lu-lowcode-package-form",
3
- "version": "0.9.96",
3
+ "version": "0.9.97",
4
4
  "dependencies": {
5
5
  "@ant-design/icons": "^4.8.1",
6
6
  "@dnd-kit/core": "^6.1.0",
package/src/App.jsx CHANGED
@@ -102,7 +102,8 @@ function App() {
102
102
  }
103
103
  }
104
104
  const setFormFields = () => {
105
- formRef?.current?.formRef?.setFieldsValue({ "userselect": "1213131", "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2, \"remark11\":\"{ label: '选项3', value: '3' }\"},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "" }, { "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_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": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }] })
105
+ formRef?.current?.setFieldsValue({ "userselect": "1213131","tianchong1":{"label":"选项1","value":"1"}, "remark11": { "label": "选项1", "value": "1", "name": "1111", "table": "[{\"price\":1,\"num\":2, \"remark11\":\"{ label: '选项3', value: '3' }\"},{\"price\":2,\"num\":2},{\"price\":3,\"num\":3},{\"price\":3,\"num\":3}]" }, "table": [{ "product_num1": "123", "product_sum1": "", "node_oclxmzswzti": "", "select2": "", "switch_table": false, "remark11": { "label": "选项2", "value": "2" }, "product_price12": "" }, { "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_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": [{ "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" }] })
106
+ // formRef?.current?.setFieldsValue({"tianchong1":{"label":"选项1","value":"1"}, })
106
107
  }
107
108
  const handleCols = () => {
108
109
  setCols(cols - 1)
@@ -127,7 +128,7 @@ function App() {
127
128
  <div className=" fflex fflex-col fitems-center fflex-1 foverflow-y-auto">
128
129
  <DraggableBtn />
129
130
  {/* <MyPureComponentWithRef ref={testRef} />; */}
130
- <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
131
+ {/* <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
131
132
  <div className='fflex fflex-col'>
132
133
  <SortList
133
134
  items={sortItems}
@@ -147,13 +148,13 @@ function App() {
147
148
  </div>
148
149
  )}
149
150
  /></div>
150
- </div>
151
+ </div> */}
151
152
  {/* <div className=' fp-4 fflex fjustify-center fw-[1336px]'>
152
153
  <WangEditorNext />
153
154
  </div> */}
154
- <div className='fw-full fp-4 fflex fjustify-center'>
155
+ {/* <div className='fw-full fp-4 fflex fjustify-center'>
155
156
  <TinyMCEEditor />
156
- </div>
157
+ </div> */}
157
158
  {/* <div className='fw-full fp-4 fflex fjustify-center'>
158
159
  <EditorWang />
159
160
  </div> */}
@@ -173,12 +174,67 @@ function App() {
173
174
 
174
175
 
175
176
  <FormContainerWrapper cols={cols} className="" ref={formRef} >
177
+ <Field.WithSingleSelect
178
+ isRequired={true} ref={testRef}
179
+ request={async (params) => {
180
+ return { code: 0, data: { list: [{ label: '选项1', value: '1', tianchong2: { label: '选项2', value: '2'} ,tcinput1: "1111" , }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
181
+ }}
182
+ option_label="label"
183
+ option_value="value"
184
+ fillRules={[
185
+ {
186
+ "id": "636d3924-0298-4e9b-809a-26d4a10d7b19",
187
+ "type": 0,
188
+ "source": "tianchong2",
189
+ "target": "tianchong2",
190
+ "subRules": [
191
+ ]
192
+ },
193
+ {
194
+ "id": "636d3924-0298-4e9b-809a-26d4a10d7b11",
195
+ "type": 0,
196
+ "source": "tcinput1",
197
+ "target": "tcinput1",
198
+ "subRules": [
199
+ ]
200
+ },
201
+
202
+ ]} label="测试填充1" __id="tianchong1" />
203
+ <Field.WithSingleSelect
204
+ isRequired={true} ref={testRef}
205
+ request={async (params) => {
206
+ return { code: 0, data: { list: [{ label: '选项1', value: '1', }, { label: '选项2', value: '2' ,tcinput1: "8989",tcinput2: "2222" }, { label: '选项3', value: '3' }] } }
207
+ }}
208
+ option_label="label"
209
+ option_value="value"
210
+ fillRules={[
211
+ {
212
+ "id": "636d3924-0298-4e9b-809a-16d4a10d7b29",
213
+ "type": 0,
214
+ "source": "tcinput1",
215
+ "target": "tcinput1",
216
+ "subRules": [
217
+ ]
218
+ },
219
+ {
220
+ "id": "636d3924-0298-4e9b-809a-26d4a10d7b29",
221
+ "type": 0,
222
+ "source": "tcinput2",
223
+ "target": "tcinput2",
224
+ "subRules": [
225
+ ]
226
+ },
227
+
228
+ ]} label="测试填充2" __id="tianchong2" />
229
+ <Field.Input label="测试被填充1" __id="tcinput1" />
230
+ <Field.Input label="测试被填充2" __id="tcinput2" />
231
+
176
232
  <Field.UserSelect label="选择用户" __id="userselect" defaultValue={[{ id: 1, username: "十天" }]} />
177
233
  <Layout.FormGroupTitle title={"基本信息"} />
178
234
  <Field.WithSingleSelect
179
235
  rightIconRender={({ form, fieldName }) => {
180
- console.log("rightIconRender form", form,)
181
- console.log("rightIconRender fieldName", fieldName)
236
+ // console.log("rightIconRender form", form,)
237
+ // console.log("rightIconRender fieldName", fieldName)
182
238
  return <><PrinterOutlined /></>
183
239
  }}
184
240
  isRequired={true} ref={testRef} fillRules={[
@@ -255,11 +311,11 @@ function App() {
255
311
  <Field.DatePicker defaultNow={true} label="日期时间" prompt="" datetype="date" __id="datetime2" />
256
312
 
257
313
  <Field.WithSingleSelect ref={testRef}
258
- request={async (params)=>{
314
+ request={async (params) => {
259
315
  console.log("WithSingleSelect params", params)
260
- if (params?.node_ocm009lpxt2 == "111")
261
- return {code:0,data:{ list:[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }]}}
262
- else return {code:0,data:{ list:[{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' },]}}
316
+ if (params?.ruleParams?.node_ocm009lpxt2 == 111)
317
+ return { code: 0, data: { list: [{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }] } }
318
+ else return { code: 0, data: { list: [{ label: '选项1', value: '1', product_price11: "1111", product_price12: "2222", product_price1: 111 }, { label: '选项2', value: '2' },] } }
263
319
  }}
264
320
  option_label="label"
265
321
  option_value="value"
@@ -300,7 +356,7 @@ function App() {
300
356
  ]
301
357
  },
302
358
 
303
- ]} label="测试关联单选" __id="remark11" />
359
+ ]} label="测试关联单选" __id="remark11" />
304
360
 
305
361
  <Field.Switch label="开关" __id="switch_table"></Field.Switch>
306
362
  <Field.Input defaultValue={3} isRequired={true} label="含税单价" __id="product_price11" />
package/src/components/field/select/search-select.jsx CHANGED
@@ -9,6 +9,17 @@ import { debounce, isEqual } from 'lodash';
9
9
  const SearchSelect = ({ addWrapper = true, form, fieldName, fieldsValue, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIconRender, rightIcon, rightIconClick, ...props }) => {
10
10
  const [nOptions, setNOptions] = React.useState([])
11
11
  const [fetching, setFetching] = useState(false);
12
+ useEffect(() => {
13
+ // console.log("SearchSelect useEffect props", props)
14
+ // console.log(`SearchSelect ${fieldName} value`, value)
15
+ if (value && nOptions.length > 0) {
16
+ let item = nOptions.find(item => item.value == value?.value || item.value == value)
17
+ if (item && !isEqual(item, value)){
18
+ console.log("new value /////",item)
19
+ typeof onChange === 'function' && onChange(item)
20
+ }
21
+ }
22
+ },[value])
12
23
  useEffect(() => {
13
24
  initData(requestParams)
14
25
  }, [requestParams, fieldsValue])
@@ -37,22 +48,14 @@ const SearchSelect = ({ addWrapper = true, form, fieldName, fieldsValue, value,
37
48
  }
38
49
  }
39
50
  if (request && typeof request === 'function') {
40
- const list = await fetchOptions(params, ruleParams)
41
- if (list && Array.isArray(list)) {
42
- item = value ? list.find(item => item.value == value) : null
43
- console.log("SearchSelect value", value)
44
- console.log("SearchSelect item", item)
45
- }
51
+ await fetchOptions(params, ruleParams)
46
52
  }
47
53
 
48
54
  if (options && options.length > 0) {
49
- item = value ? options.find(item => item.value == value) : null
50
55
  setNOptions(options)
51
56
  }
52
57
 
53
- if (item) {
54
- onChange(item)
55
- }
58
+
56
59
 
57
60
  }
58
61
 
package/src/components/form-container/index.jsx CHANGED
@@ -48,11 +48,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
48
48
  const [formContent, setFormContent] = React.useState(null);
49
49
 
50
50
  const dependencyMap = React.useRef(null);
51
-
51
+ // 调用setFieldsValue时,进入锁定状态,阻止因字段值变化而触发级联处理
52
+ const lockStatus = React.useRef(0);
52
53
  React.useImperativeHandle(ref, () => ({
53
54
  formRef: form,
54
55
  setFieldsValue: (values) => {
55
- changedFieldsState.current = {};
56
+ lockStatus.current = 1;
56
57
  form.setFieldsValue(values)
57
58
  },
58
59
  initializeFieldVisibility,
@@ -215,16 +216,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
215
216
  setValue = current_value[withFillIndex]?.[source]
216
217
  }
217
218
  }
219
+ changedFields[target] = { name: [target], value: setValue};
218
220
  }
219
221
  if (rule?.type == 1) {
220
222
  form.setFieldValue(target, undefined);
221
223
  }
222
-
223
- setTimeout(() => {
224
- form.setFieldValue(target, setValue)
225
- handleFieldsWith(target, form.getFieldsValue())
224
+ form.setFieldValue(target, setValue)
225
+ // handleFieldsWith(target, form.getFieldsValue())
226
+ // setTimeout(() => {
227
+ // form.setFieldValue(target, setValue)
228
+ // handleFieldsWith(target, form.getFieldsValue())
226
229
  // if (idGroups.length > 0) handleTableAddRow(idGroups)
227
- }, 0);
230
+ // }, 0);
228
231
 
229
232
 
230
233
  // if (idGroups.length > 0) setTimeout(() => handleTableAddRow(idGroups), 0)
@@ -236,6 +239,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
236
239
  changedKeys.forEach(key => {
237
240
  changedFieldsState.current[key] = changedFields[key];
238
241
  })
242
+ console.log("changedFieldsState",changedFieldsState.current)
239
243
  debounceHandleFieldsChange();
240
244
  }
241
245
  console.log("idGroups", idGroups)
@@ -343,7 +347,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
343
347
  }
344
348
 
345
349
  if (formula && formula.length > 0) {
346
- console.log(`${childIdentifier} 计算公式:`, formula)
350
+ // console.log(`${childIdentifier} 计算公式:`, formula)
347
351
  const formulaResult = evalFormula(formula);
348
352
  form.setFieldValue(childIdentifier, formulaResult)
349
353
  handleFieldsWith(childIdentifier, form.getFieldsValue())
@@ -379,12 +383,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
379
383
  const changedFieldsState = React.useRef({});
380
384
  const debounceHandleFieldsChange = debounce(() => {
381
385
  const fieldValues = form.getFieldsValue();
386
+ const lockStatus_ = lockStatus.current;
387
+ lockStatus.current = 0
382
388
  let needRefresh = false;
383
389
  if (!lastFormValues.current) lastFormValues.current = {}
384
390
  for (let key in changedFieldsState.current) {
385
391
  let field = changedFieldsState.current[key];
392
+ // console.log("field",field.value)
393
+ // console.log("getLastFieldValue(field.name)",getLastFieldValue(field.name))
386
394
  if (!isEqual(field.value, getLastFieldValue(field.name))) {
387
- needRefresh = handleFieldsWith(field.name, fieldValues);
395
+ if (lockStatus_ !=1){
396
+ needRefresh = handleFieldsWith(field.name, fieldValues);
397
+ }
388
398
  lastFormValues.current[field.name] = field.value;
389
399
  }
390
400
  }
@@ -393,7 +403,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
393
403
  }
394
404
  // lastFormValues.current = form.getFieldsValue();
395
405
  changedFieldsState.current = {};
396
- }, 200);
406
+ }, 100);
397
407
 
398
408
  const handleFieldsChange = (changedFields) => {
399
409
  console.log("changedFields", changedFields)
@@ -527,7 +537,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
527
537
 
528
538
  return (
529
539
  <Form form={form} className={"form-container fp-0 fw-full fh-full box-border fflex fflex-col fgap-y-2" + (mode == "desgin" ? " fp-6" : "")} onValuesChange={(changedValues, allValues) => {
530
- console.log("changedValues", changedValues)
540
+ // console.log("changedValues", changedValues)
531
541
  // console.log("allValues", allValues)
532
542
  }} onFieldsChange={handleFieldsChange}>
533
543
  {formContent}