lu-lowcode-package-form 0.9.25 → 0.9.29

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 (10) hide show
  1. package/dist/index.cjs.js +55 -55
  2. package/dist/index.es.js +1133 -1073
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/App.jsx +29 -13
  6. package/src/components/field/base.jsx +6 -5
  7. package/src/components/field/select/index.jsx +2 -2
  8. package/src/components/field/select/select.jsx +17 -2
  9. package/src/components/form-container/index.jsx +25 -15
  10. package/src/components/index.jsx +4 -1
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
- *,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fabsolute{position:absolute}.frelative{position:relative}.fleft-0{left:0}.ftop-0{top:0}.fz-10{z-index:10}.fmy-2{margin-top:.5rem;margin-bottom:.5rem}.fmt-2{margin-top:.5rem}.fbox-border{box-sizing:border-box}.fflex{display:flex}.fhidden{display:none}.fh-11{height:2.75rem}.fh-12{height:3rem}.fh-24{height:6rem}.fh-5{height:1.25rem}.fh-8{height:2rem}.fh-full{height:100%}.fmax-h-full{max-height:100%}.fmin-h-20{min-height:5rem}.fmin-h-5{min-height:1.25rem}.fw-24{width:6rem}.fw-5{width:1.25rem}.fw-\[960px\]{width:960px}.fw-full{width:100%}.fmin-w-36{min-width:9rem}.fmin-w-full{min-width:100%}.fmax-w-full{max-width:100%}.fflex-1{flex:1 1 0%}.fcursor-not-allowed{cursor:not-allowed}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fflex-nowrap{flex-wrap:nowrap}.fitems-center{align-items:center}.fitems-stretch{align-items:stretch}.fjustify-center{justify-content:center}.fjustify-between{justify-content:space-between}.fgap-1{gap:.25rem}.fgap-2{gap:.5rem}.fgap-3{gap:.75rem}.fgap-x-1{column-gap:.25rem}.foverflow-hidden{overflow:hidden}.foverflow-x-auto{overflow-x:auto}.ftext-nowrap{text-wrap:nowrap}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-b{border-bottom-width:1px}.fborder-l-4{border-left-width:4px}.fborder-dashed{border-style:dashed}.fborder-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.fborder-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.fborder-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.fbg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.fbg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.fbg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.fbg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.fbg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.fbg-transparent{background-color:transparent}.fbg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fbg-opacity-50{--tw-bg-opacity: .5}.fobject-contain{object-fit:contain}.fp-0{padding:0}.fp-2{padding:.5rem}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpx-2{padding-left:.5rem;padding-right:.5rem}.fpb-10{padding-bottom:2.5rem}.fpl-2{padding-left:.5rem}.ftext-lg{font-size:1.125rem;line-height:1.75rem}.ftext-sm{font-size:.875rem;line-height:1.25rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-medium{font-weight:500}.ffont-semibold{font-weight:600}.ftext-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.ftext-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.ftext-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.fopacity-5{opacity:.05}.hover\:fborder-\[\#3e92f8\]:hover{--tw-border-opacity: 1;border-color:rgb(62 146 248 / var(--tw-border-opacity))}.hover\:ftext-\[\#3e92f8\]:hover{--tw-text-opacity: 1;color:rgb(62 146 248 / var(--tw-text-opacity))}.hover\:ftext-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.fgroup:hover .group-hover\:fflex{display:flex}.fgroup:hover .group-hover\:fbg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}/*!
1
+ *,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fabsolute{position:absolute}.frelative{position:relative}.fleft-0{left:0}.ftop-0{top:0}.fz-10{z-index:10}.fmy-2{margin-top:.5rem;margin-bottom:.5rem}.fmt-2{margin-top:.5rem}.fbox-border{box-sizing:border-box}.fflex{display:flex}.fhidden{display:none}.fh-11{height:2.75rem}.fh-12{height:3rem}.fh-24{height:6rem}.fh-5{height:1.25rem}.fh-8{height:2rem}.fh-full{height:100%}.fmax-h-full{max-height:100%}.fmin-h-20{min-height:5rem}.fmin-h-5{min-height:1.25rem}.fw-24{width:6rem}.fw-5{width:1.25rem}.fw-\[960px\]{width:960px}.fw-full{width:100%}.fmin-w-36{min-width:9rem}.fmin-w-full{min-width:100%}.fmax-w-full{max-width:100%}.fflex-1{flex:1 1 0%}.fcursor-not-allowed{cursor:not-allowed}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fflex-nowrap{flex-wrap:nowrap}.fitems-center{align-items:center}.fitems-stretch{align-items:stretch}.fjustify-center{justify-content:center}.fjustify-between{justify-content:space-between}.fgap-1{gap:.25rem}.fgap-2{gap:.5rem}.fgap-3{gap:.75rem}.fgap-x-1{column-gap:.25rem}.foverflow-hidden{overflow:hidden}.foverflow-x-auto{overflow-x:auto}.ftext-nowrap{text-wrap:nowrap}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-b{border-bottom-width:1px}.fborder-l-4{border-left-width:4px}.fborder-dashed{border-style:dashed}.fborder-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.fborder-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.fborder-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.fbg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.fbg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.fbg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.fbg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.fbg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.fbg-transparent{background-color:transparent}.fbg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fbg-opacity-50{--tw-bg-opacity: .5}.fobject-contain{object-fit:contain}.fp-0{padding:0}.fp-2{padding:.5rem}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpx-2{padding-left:.5rem;padding-right:.5rem}.fpb-10{padding-bottom:2.5rem}.fpl-2{padding-left:.5rem}.fpt-2{padding-top:.5rem}.ftext-lg{font-size:1.125rem;line-height:1.75rem}.ftext-sm{font-size:.875rem;line-height:1.25rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-bold{font-weight:700}.ffont-medium{font-weight:500}.ffont-semibold{font-weight:600}.ftext-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.ftext-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.ftext-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.ftext-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.fopacity-5{opacity:.05}.hover\:fborder-\[\#3e92f8\]:hover{--tw-border-opacity: 1;border-color:rgb(62 146 248 / var(--tw-border-opacity))}.hover\:ftext-\[\#3e92f8\]:hover{--tw-text-opacity: 1;color:rgb(62 146 248 / var(--tw-text-opacity))}.hover\:ftext-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.fgroup:hover .group-hover\:fflex{display:flex}.fgroup:hover .group-hover\:fbg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}/*!
2
2
  * Quill Editor v1.3.7
3
3
  * https://quilljs.com/
4
4
  * Copyright (c) 2014, Jason Chen
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lu-lowcode-package-form",
3
- "version": "0.9.25",
3
+ "version": "0.9.29",
4
4
  "dependencies": {
5
5
  "@ant-design/icons": "^4.8.1",
6
6
  "@testing-library/jest-dom": "^5.17.0",
package/src/App.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang } from './components';
2
2
  import './App.css';
3
- import { Button } from 'antd';
3
+ import { Button , Input , Select } from 'antd';
4
4
  import React, { useState } from 'react';
5
5
  import Draggable from 'react-draggable';
6
6
 
@@ -59,8 +59,20 @@ function App() {
59
59
  const formData = formRef?.current?.formRef?.getFieldsValue();
60
60
  console.log("formData", JSON.stringify(formData));
61
61
  }
62
+ // 验证
63
+ const validateFields = async () => {
64
+ try {
65
+ var values = await formRef?.current?.formRef?.validateFields({
66
+ validateOnly: false,
67
+ })
68
+ console.log("values", values)
69
+
70
+ } catch (error) {
71
+ console.log("error",error)
72
+ }
73
+ }
62
74
  const setFormFields = () => {
63
- formRef?.current?.formRef?.setFieldsValue({"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})
75
+ formRef?.current?.formRef?.setFieldsValue({ "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 })
64
76
  }
65
77
  const handleCols = () => {
66
78
  setCols(cols - 1)
@@ -76,20 +88,22 @@ function App() {
76
88
  <EditorQuill value={"[{\"insert\":\"sdfsd\"}]"} />
77
89
  </div>
78
90
  <div className='fw-full fp-4'>
91
+ <Select
92
+ mode="tags"
93
+ style={{ width: '100%' }}
94
+ placeholder="Tags Mode"
95
+ options={[ { label: '标签1', value: '1' }, { label: '标签2', value: '2' }]}
96
+ />
79
97
  <Setter.OptionSetter />
80
98
  </div>
81
99
  <div className='fw-[960px] frounded fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
82
100
 
83
-
101
+
84
102
  <FormContainerWrapper cols={cols} className="" ref={formRef} >
85
103
  <Layout.FormGroupTitle title={"基本信息"} />
86
104
  <Layout.FormRow layout={'1'}>
87
105
  <Field.Table label="子表格" __id="table" >
88
- <Field.Input readonly={true} label="商品价格" __id="product_price1" />
89
- <Field.Input readonly={true} label="商品数量" __id="product_num1" />
90
- <Field.Input readonly={true} label="商品数量" __id="product_num2" />
91
- <Field.Input readonly={true} label="商品数量" __id="product_num3" />
92
- <Field.Input readonly={true} label="商品数量" __id="product_num4" />
106
+ <Field.Input isRequired={true} label="商品价格" __id="product_price1" />
93
107
  <Field.Input label="商品总价" __id="product_sum1"
94
108
  withIds={["table.product_price1", "table.product_num1"]}
95
109
  withFill={{
@@ -162,11 +176,12 @@ function App() {
162
176
  ]
163
177
  }}
164
178
  />
165
- <Field.SearchSelect label="搜组件" option_search="username" option_label="username" setValue={() => { }} option_value="id"></Field.SearchSelect>
166
- <Field.Input label="商品价格" __id="product_price" />
167
- <Field.Input label="商品数量" __id="product_num" />
179
+ <Field.UserSelect label="选择用户" __id="userselect" customComponent={Input} />
180
+ <Field.SearchSelect isRequired={true} label="搜组件" __id="searchuser" option_search="username" option_label="username" setValue={() => { }} option_value="id"></Field.SearchSelect>
181
+ <Field.Input rules={"^(1[3-9]\\d{9})$"} isRequired={true} label="商品价格" __id="product_price" />
182
+ <Field.Input label="商品数量" __id="product_num" />
168
183
  <Field.NumberRange label="数量范围" __id="product_num_range" />
169
- <Field.Input label="商品总价" __id="product_sum"
184
+ <Field.Input rules={["^(1[3-9]\\d{9})$","^\\d+$"]} label="商品总价" __id="product_sum"
170
185
  withIds={["product_price", "product_num"]}
171
186
  withFill={{
172
187
  "value": [
@@ -207,7 +222,7 @@ function App() {
207
222
  <Field.SingleSelect readonly={true} mode="single" label="测试单选" __id="select1" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.SingleSelect>
208
223
  <Field.MultipleSelect readonly={true} mode="multiple" label="测多选" __id="select2" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]}></Field.MultipleSelect>
209
224
  <Field.TreeSelect readonly={true} label="分组名" __id="title11"></Field.TreeSelect>
210
- <Field.Switch label="开关" __id="switch"></Field.Switch>
225
+ <Field.Switch label="开关" __id="switch"></Field.Switch>
211
226
  <Layout.FormGroupTitle title={"嘟嘟嘟嘟嘟"} />
212
227
  <Field.CodeMachine readonly={true} label="角色编号" prompt="" __id="code"
213
228
  withIds={["switch"]}
@@ -245,6 +260,7 @@ function App() {
245
260
  Hover over me or my parent!
246
261
  </div>
247
262
  </div>
263
+ <Button type="primary" onClick={validateFields}>validateFields</Button>
248
264
  <Button type="primary" onClick={getFormFields}>GetValues</Button>
249
265
  <Button type="primary" onClick={setFormFields}>SetValues</Button>
250
266
  <Button type="primary" onClick={handleCols}>UpdateCol</Button>
package/src/components/field/base.jsx CHANGED
@@ -18,24 +18,25 @@ export const BaseWrapper = function BaseWrapper({
18
18
  subTableIndex,
19
19
  addWrapper = true,
20
20
  readonly,
21
+ isRequired,
21
22
  ...otherProps
22
23
  }) {
23
24
  if (!addWrapper) return children;
24
25
  const formWarpper = (
25
- <div className="frelative">
26
- {label && <div className='fh-8 ftext-gray-500 ftext-sm fflex fjustify-between fitems-center'>{label}</div>}
27
- <div className="fw-full fflex fitems-stretch ftext-gray-900 frelative">
26
+ <div className={`frelative ${!hidePrompt && prompt ? "" : "fpt-2"}`}>
27
+ {label && <div className='fh-8 ftext-gray-500 ftext-sm fflex fitems-center'>{label}{ isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
28
+ <div className={`fw-full fflex fitems-stretch ftext-gray-900 frelative`}>
28
29
  {readonly && <div className="fw-full fh-full fbg-gray-100 fopacity-5 fcursor-not-allowed fabsolute fleft-0 ftop-0 fz-10"></div>}
29
30
  {/* <FieldLable value={otherProps?.value} /> */}
30
31
  {children}
31
32
  </div>
32
- {!hidePrompt && <div className="ftext-xs ftext-gray-500 fmin-h-5 fflex fitems-center">{prompt}</div>}
33
+ {!hidePrompt && prompt && <div className="ftext-xs ftext-gray-500 fmin-h-5 fflex fitems-center">{prompt}</div>}
33
34
  </div>
34
35
  )
35
36
 
36
37
  const tableWarpper = (
37
38
  <div className="frelative fw-full">
38
- {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
39
+ {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fitems-center fpx-2 fborder-b'>{label}{ isRequired && <span className="ftext-red-500">*</span>}</div>}
39
40
  <div className="fw-full fflex fitems-stretch fp-2 frelative">
40
41
  {readonly && <div className="fw-full fh-full fbg-gray-50 fopacity-5 fcursor-not-allowed fabsolute fleft-0 ftop-0 fz-10"></div>}
41
42
  {/* <FieldLable value={otherProps?.value} /> */}
package/src/components/field/select/index.jsx CHANGED
@@ -1,4 +1,4 @@
1
1
  export { default as TreeSelect } from './tree-select.jsx';
2
- export { Select, WithSingleSelect,WithMultipleSelect , MultipleSelect, SingleSelect} from './select.jsx';
3
- export { SearchSelect } from './search-select.jsx'
2
+ export * from './select.jsx';
3
+ export * from './search-select.jsx'
4
4
 
package/src/components/field/select/select.jsx CHANGED
@@ -1,7 +1,8 @@
1
- import { Select as OriginalSelect } from "antd";
1
+ import { Select as OriginalSelect, Tree } from "antd";
2
2
 
3
3
  import { BaseWrapper } from "../base"
4
4
  import React, { useEffect, useState } from 'react';
5
+ import TreeSelect from './tree-select'
5
6
 
6
7
  const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, addWrapper = true, ...props }) => {
7
8
  // const [firstLoad, setFirstLoad] = React.useState(false)
@@ -124,4 +125,18 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
124
125
  )
125
126
  }
126
127
 
127
- export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select };
128
+ // 选择用户组件
129
+ const UserSelect = ({customComponent:CustomComponent,...props})=>{
130
+ if (!CustomComponent) return <BaseWrapper {...props}><div className="fflex fitems-center fh-8">未配置组件内容</div></BaseWrapper>
131
+ else return <BaseWrapper {...props}><CustomComponent {...props} /></BaseWrapper>
132
+ }
133
+ // 选择部门组件
134
+ const DeptSelect = ({FetchDeptList,...props})=>{
135
+ return <TreeSelect {...props} title={"deptName"} request={FetchDeptList} />
136
+ }
137
+ // 选择岗位组件
138
+ const PostSelect = ({FetchPostList,...props})=>{
139
+ return <TreeSelect {...props} title={"postName"} request={FetchPostList} />
140
+ }
141
+
142
+ export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select,UserSelect,DeptSelect,PostSelect };
package/src/components/form-container/index.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { forwardRef, useEffect } from "react";
2
- import { Form, Row, Col } from "antd";
2
+ import { Form, Row, Col, message } from "antd";
3
3
 
4
4
  import { debounce } from 'lodash';
5
5
  import { evalFormula } from '../../utils/formula'
@@ -32,7 +32,7 @@ function batchElements(elements, groupSize) {
32
32
  }
33
33
  }
34
34
  }
35
-
35
+
36
36
  if (tempArray.length > 0) {
37
37
  fillWithReactElement(groupSize, tempArray);
38
38
  groupedElements.push(tempArray);
@@ -42,7 +42,7 @@ function batchElements(elements, groupSize) {
42
42
  }
43
43
 
44
44
 
45
- const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) => {
45
+ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) => {
46
46
  const [form] = Form.useForm();
47
47
  const [formContent, setFormContent] = React.useState(null);
48
48
  const dependencyMap = React.useRef(null);
@@ -62,14 +62,14 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
62
62
  function traverse(currentNode) {
63
63
  var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
64
64
  const { props } = currentNode;
65
- if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.') )) {
65
+ if (componentName && (componentName.startsWith('Field.') || componentName.startsWith('Layout.'))) {
66
66
  fields.push(currentNode);
67
67
  }
68
-
69
- if (props?.children){
70
- let children = React.Children.toArray(props?.children)
71
- children.forEach(child => traverse(child));
72
- }
68
+
69
+ if (props?.children) {
70
+ let children = React.Children.toArray(props?.children)
71
+ children.forEach(child => traverse(child));
72
+ }
73
73
  }
74
74
  dependencyMap.current = new Map();
75
75
  const childrenArray = React.Children.toArray(children);
@@ -81,7 +81,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
81
81
  const { componentId, __id, ...props } = child?.props;
82
82
  const identifier = componentId || __id;
83
83
  dependencyMap.current.set(identifier, {
84
- children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item=>{
84
+ children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item => {
85
85
  return identifier == item || item.startsWith(identifier + '.')
86
86
  })),
87
87
  show: true,
@@ -183,7 +183,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
183
183
  return result
184
184
  })
185
185
  }
186
- console.log("formula",formula)
186
+ console.log("formula", formula)
187
187
  if (formula && formula.length > 0) {
188
188
  const childIdentifier = child.props.componentId || child.props.__id;
189
189
  form.setFieldValue(childIdentifier, evalFormula(formula))
@@ -197,7 +197,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
197
197
  if (id.indexOf(".") >= 0) {
198
198
  const [parentKey, childKey] = id.split(".");
199
199
  const parentValue = fieldValues?.[parentKey] || [];
200
- if (Array.isArray(parentValue))
200
+ if (Array.isArray(parentValue))
201
201
  result = parentValue.map(item => {
202
202
  return item?.[childKey] || ""
203
203
  })
@@ -248,7 +248,17 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
248
248
  const componentName = child.type?.displayName || _componentName;
249
249
  const identifier = componentId || __id;
250
250
  const isLayoutComponent = componentName && componentName.startsWith('Layout.');
251
-
251
+ const rules = []
252
+ if (props.isRequired)
253
+ rules.push({ required: true, message: `${props.label}必须填写` });
254
+ if (props.rules)
255
+ if (Array.isArray(props.rules)) {
256
+ const pattern = props.rules.join("|")
257
+ rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
258
+ }
259
+ else {
260
+ rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
261
+ }
252
262
  return (
253
263
  <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
254
264
  {isLayoutComponent ? (
@@ -258,7 +268,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
258
268
  style={{ marginBottom: 0 }}
259
269
  label=""
260
270
  name={identifier}
261
- rules={[{ required: props.isRequired, message: `${props.title}不能为空！` }]}
271
+ rules={rules}
262
272
  >
263
273
  {child}
264
274
  </Form.Item>
@@ -271,7 +281,7 @@ const FormContainer = forwardRef(({ cols = 1, children , mode="view" }, ref) =>
271
281
  };
272
282
 
273
283
  return (
274
- <Form form={form} className={"form-container fp-0 fw-full fh-full box-border" + (mode == "desgin" ?" fp-6":"")} onFieldsChange={handleFieldsChange}>
284
+ <Form form={form} className={"form-container fp-0 fw-full fh-full box-border" + (mode == "desgin" ? " fp-6" : "")} onFieldsChange={handleFieldsChange}>
275
285
  {formContent}
276
286
  </Form>
277
287
  );
package/src/components/index.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Input, TextArea, Password, Search ,CodeMachine, Number, NumberRange} from './field/input/index.jsx'
2
2
  import '../App.css';
3
- import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect } from './field/select/index.jsx'
3
+ import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect, UserSelect, DeptSelect, PostSelect } from './field/select/index.jsx'
4
4
  import Custom from './field/custom/index.jsx'
5
5
  import { FormContainer, FormContainerWrapper,LayoutFormRow,LayoutFormGroupTitle } from './form-container/index.jsx'
6
6
  import { Checkbox ,CheckboxTree, CheckboxGroup } from './field/checkbox/index.jsx'
@@ -34,6 +34,9 @@ const Field = {
34
34
  DatePicker,
35
35
  Table,
36
36
  Custom,
37
+ UserSelect,
38
+ DeptSelect,
39
+ PostSelect,
37
40
  }
38
41
  Object.keys(Field).forEach(key => {
39
42
  Field[key].displayName = `Field.${key}`;