lu-lowcode-package-form 0.9.30 → 0.9.32

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 (14) hide show
  1. package/dist/index.cjs.js +118 -118
  2. package/dist/index.es.js +10816 -10821
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/App.jsx +43 -22
  6. package/src/components/field/base.jsx +18 -11
  7. package/src/components/field/checkbox/checkbox-tree.jsx +0 -1
  8. package/src/components/field/select/select.jsx +44 -19
  9. package/src/components/field/table/index copy 2.jsx +268 -0
  10. package/src/components/field/table/index copy.jsx +268 -0
  11. package/src/components/field/table/index.jsx +80 -247
  12. package/src/components/form-container/index copy.jsx +302 -0
  13. package/src/components/form-container/index.jsx +72 -41
  14. package/src/components/form-container/layout/form-row.jsx +0 -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}.fgap-y-2{row-gap:.5rem}.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-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))}/*!
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}.f-mx-1{margin-left:-.25rem;margin-right:-.25rem}.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-12{width:3rem}.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}.fgap-y-2{row-gap:.5rem}.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-r{border-right-width:1px}.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))}.fborder-r-\[\#e9e9e9\]{--tw-border-opacity: 1;border-right-color:rgb(233 233 233 / var(--tw-border-opacity))}.fbg-\[\#fafafa\]{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-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-1{padding-left:.25rem;padding-right:.25rem}.fpx-2{padding-left:.5rem;padding-right:.5rem}.fpy-2{padding-top:.5rem;padding-bottom:.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-xl{font-size:1.25rem;line-height:1.75rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-bold{font-weight:700}.ffont-medium{font-weight:500}.ffont-semibold{font-weight:600}.ftext-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.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.30",
3
+ "version": "0.9.32",
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 , Input , Select } 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
 
@@ -61,19 +61,19 @@ function App() {
61
61
  }
62
62
  // 验证
63
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)
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
72
  console.log(error.errorFields[0].errors[0])
73
- }
73
+ }
74
74
  }
75
75
  const setFormFields = () => {
76
- formRef?.current?.formRef?.setFieldsValue({ "userselect":"1213131","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 })
76
+ formRef?.current?.formRef?.setFieldsValue({ "userselect": "1213131","DeptSelect":["leaf11"],"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 })
77
77
  }
78
78
  const handleCols = () => {
79
79
  setCols(cols - 1)
@@ -89,22 +89,23 @@ function App() {
89
89
  <EditorQuill value={"[{\"insert\":\"sdfsd\"}]"} />
90
90
  </div>
91
91
  <div className='fw-full fp-4'>
92
- <Select
93
- mode="tags"
94
- style={{ width: '100%' }}
95
- placeholder="Tags Mode"
96
- options={[ { label: '标签1', value: '1' }, { label: '标签2', value: '2' }]}
97
- />
92
+ <Select
93
+ mode="tags"
94
+ style={{ width: '100%' }}
95
+ placeholder="Tags Mode"
96
+ options={[{ label: '标签1', value: '1' }, { label: '标签2', value: '2' }]}
97
+ />
98
98
  <Setter.OptionSetter />
99
99
  </div>
100
100
  <div className='fw-[960px] frounded fbg-slate-50 fflex fflex-col fitems-center fpb-10'>
101
101
 
102
-
102
+
103
103
  <FormContainerWrapper cols={cols} className="" ref={formRef} >
104
104
  <Layout.FormGroupTitle title={"基本信息"} />
105
105
  <Layout.FormRow layout={'1'}>
106
106
  <Field.Table label="子表格" __id="table" >
107
- <Field.Input isRequired={true} label="商品价格" __id="product_price1" />
107
+ <Field.Input isRequired={true} label="商品价格" __id="product_price1" />
108
+ <Field.Input isRequired={true} label="商品个数" __id="product_num1" />
108
109
  <Field.Input label="商品总价" __id="product_sum1"
109
110
  withIds={["table.product_price1", "table.product_num1"]}
110
111
  withFill={{
@@ -178,11 +179,31 @@ function App() {
178
179
  }}
179
180
  />
180
181
  <Field.UserSelect label="选择用户" __id="userselect" customComponent={Input} />
182
+ <Field.DeptSelect label="DeptSelect" __id="DeptSelect" treeData={[{
183
+ value: 'parent 1-1',
184
+ title: 'parent 1-1',
185
+ children: [
186
+ {
187
+ value: 'leaf11',
188
+ title: <b style={{ color: '#08c' }}>leaf11</b>,
189
+ },
190
+ ],
191
+ },]}></Field.DeptSelect>
192
+ <Field.PostSelect multiple={true} label="PostSelect" __id="PostSelect" treeData={[{
193
+ value: 'parent 1-1',
194
+ title: 'parent 1-1',
195
+ children: [
196
+ {
197
+ value: 'leaf11',
198
+ title: <b style={{ color: '#08c' }}>leaf11</b>,
199
+ },
200
+ ],
201
+ },]}></Field.PostSelect>
181
202
  <Field.SearchSelect isRequired={true} label="搜组件" __id="searchuser" option_search="username" option_label="username" setValue={() => { }} option_value="id"></Field.SearchSelect>
182
- <Field.Input rules={"^(1[3-9]\\d{9})$"} isRequired={true} label="商品价格" __id="product_price" />
183
- <Field.Input label="商品数量" __id="product_num" />
203
+ <Field.Input rules={"^(1[3-9]\\d{9})$"} isRequired={true} label="商品价格" __id="product_price" />
204
+ <Field.Input label="商品数量" __id="product_num" />
184
205
  <Field.NumberRange label="数量范围" __id="product_num_range" />
185
- <Field.Input rules={["^(1[3-9]\\d{9})$","^\\d+$"]} label="商品总价" __id="product_sum"
206
+ <Field.Input rules={["^(1[3-9]\\d{9})$", "^\\d+$"]} label="商品总价" __id="product_sum"
186
207
  withIds={["product_price", "product_num"]}
187
208
  withFill={{
188
209
  "value": [
package/src/components/field/base.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import { useEffect, useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
 
3
- const FieldLable = ({value,onChange})=>{
3
+ const FieldLable = ({ value, onChange }) => {
4
4
  const [text, setText] = useState("");
5
5
  useEffect(() => {
6
6
  setText(value);
@@ -11,9 +11,11 @@ const FieldLable = ({value,onChange})=>{
11
11
 
12
12
  export const BaseWrapper = function BaseWrapper({
13
13
  label,
14
+ higLabel = false,
14
15
  children,
15
16
  prompt,
16
17
  subTable,
18
+ subTableHead = false,
17
19
  hidePrompt = false,
18
20
  subTableIndex,
19
21
  addWrapper = true,
@@ -21,14 +23,18 @@ export const BaseWrapper = function BaseWrapper({
21
23
  isRequired,
22
24
  ...otherProps
23
25
  }) {
26
+
24
27
  if (!addWrapper) return children;
25
- const formWarpper = (
28
+ const formWarpper = (
26
29
  <div className={`frelative`}>
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>}
30
+ {label && <>
31
+ {!higLabel && <div className={`fh-8 ftext-gray-500 ftext-sm fflex fitems-center ${higLabel ? " ftext-xl fmy-2 ftext-black" : ""}`}>{label}{isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
32
+ {higLabel && <div className="fh-11 fflex fitems-center ftext-lg ffont-medium "><span className="fborder-l-4 fborder-slate-300 fpl-2 ">{label}</span>{isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
33
+ </>}
28
34
  <div className={`fw-full fflex fitems-stretch ftext-gray-900 frelative`}>
29
35
  {readonly && <div className="fw-full fh-full fbg-gray-100 fopacity-5 fcursor-not-allowed fabsolute fleft-0 ftop-0 fz-10"></div>}
30
- {/* <FieldLable value={otherProps?.value} /> */}
31
- {children}
36
+ {/* <FieldLable value={otherProps?.value} /> */}
37
+ {children}
32
38
  </div>
33
39
  {!hidePrompt && prompt && <div className="ftext-xs ftext-gray-500 fmin-h-5 fflex fitems-center">{prompt}</div>}
34
40
  </div>
@@ -36,14 +42,15 @@ export const BaseWrapper = function BaseWrapper({
36
42
 
37
43
  const tableWarpper = (
38
44
  <div className="frelative fw-full">
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>}
40
- <div className="fw-full fflex fitems-stretch fp-2 frelative">
45
+ {subTableHead && label && <div className='fh-12 ffont-semibold fbg-[#fafafa] ftext-sm fflex fitems-center fborder-b fpl-2 f-mx-1'><div className="fw-full fborder-r fborder-r-[#e9e9e9]">{label}{isRequired && <span className="ftext-red-500">*</span>}</div></div>}
46
+ {!subTableHead && <div className="fw-full fflex fitems-stretch frelative fpy-2">
41
47
  {readonly && <div className="fw-full fh-full fbg-gray-50 fopacity-5 fcursor-not-allowed fabsolute fleft-0 ftop-0 fz-10"></div>}
42
- {/* <FieldLable value={otherProps?.value} /> */}
43
- {children}
48
+ {/* <FieldLable value={otherProps?.value} /> */}
49
+ {children}
44
50
  </div>
51
+ }
45
52
  </div>
46
53
  )
47
-
54
+
48
55
  return subTable ? tableWarpper : formWarpper;
49
56
  };
package/src/components/field/checkbox/checkbox-tree.jsx CHANGED
@@ -56,7 +56,6 @@ const CheckboxTree = ({ request, value, onChange,callError,disabledValue, addRoo
56
56
  }, [])
57
57
 
58
58
  useEffect(() => {
59
- console.log("CheckboxTree value ", value)
60
59
  if ( typeof value == 'string') {
61
60
  try {
62
61
  value = JSON.parse(value)
package/src/components/field/select/select.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Select as OriginalSelect, Tree , Input} from "antd";
1
+ import { Select as OriginalSelect, Tree, Input } from "antd";
2
2
 
3
3
  import { BaseWrapper } from "../base"
4
4
  import React, { useEffect, useState } from 'react';
@@ -30,35 +30,35 @@ const Select = ({ request, option_label = "label", option_value = "id", disabled
30
30
 
31
31
  // setFirstLoad(true)
32
32
  }
33
- return addWrapper ?(
33
+ return addWrapper ? (
34
34
  <BaseWrapper {...props}>
35
35
  <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
36
36
  </BaseWrapper>
37
37
  ) : <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
38
38
  }
39
39
 
40
- const SingleSelect = ({ ...props }) => {
40
+ const SingleSelect = ({ ...props }) => {
41
41
  return (
42
42
  <Select {...props} mode="single" />
43
43
  )
44
44
  }
45
45
 
46
- const MultipleSelect = ({ onChange, value, ...props }) => {
46
+ const MultipleSelect = ({ onChange, value, ...props }) => {
47
47
  const [nValue, setNValue] = React.useState([])
48
48
 
49
- useEffect(()=>{
49
+ useEffect(() => {
50
50
  if (value && typeof value === "string") {
51
51
  try {
52
52
  value = JSON.parse(value)
53
53
  onChange(value)
54
54
  } catch (error) {
55
-
55
+
56
56
  }
57
57
  }
58
-
59
- if(value) setNValue(value)
60
- },[value])
61
-
58
+
59
+ if (value) setNValue(value)
60
+ }, [value])
61
+
62
62
  return (
63
63
  <Select {...props} onChange={onChange} mode="multiple" value={nValue} />
64
64
  )
@@ -80,7 +80,7 @@ const WithSingleSelect = ({ onChange, value, ...props }) => {
80
80
 
81
81
  }
82
82
  }
83
- if(value) setNValue(value)
83
+ if (value) setNValue(value)
84
84
  }, [value])
85
85
 
86
86
 
@@ -111,7 +111,7 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
111
111
 
112
112
  }
113
113
  }
114
-
114
+
115
115
  if (Array.isArray(value)) setNValue(value)
116
116
  }, [value])
117
117
 
@@ -126,17 +126,42 @@ const WithMultipleSelect = ({ onChange, value, ...props }) => {
126
126
  }
127
127
 
128
128
  // 选择用户组件
129
- const UserSelect = ({customComponent:CustomComponent,...props})=>{
130
- if (!CustomComponent) return <BaseWrapper {...props}><Input {...props} /></BaseWrapper>
129
+ const UserSelect = ({ customComponent: CustomComponent, ...props }) => {
130
+ if (!CustomComponent) return <BaseWrapper {...props}><Input {...props} /></BaseWrapper>
131
131
  else return <BaseWrapper {...props}><CustomComponent {...props} /></BaseWrapper>
132
132
  }
133
+ const ArrayTreeSelect = ( {onChange, value, multiple, ...props} )=>{
134
+ const [nValue, setNValue] = React.useState()
135
+ useEffect(() => {
136
+ if (value && typeof value === "string") {
137
+ try {
138
+ value = JSON.parse(value)
139
+ onChange(value)
140
+ return
141
+ }
142
+ catch (error) { }
143
+ }
144
+ if (multiple) {
145
+ if (Array.isArray(value)) setNValue(value)
146
+ } else {
147
+ if (Array.isArray(value))
148
+ value = value[0]
149
+ setNValue(value)
150
+ }
151
+ }, [value])
152
+ const handleChange = (_value)=>{
153
+ if (!Array.isArray(_value)) _value = [_value]
154
+ onChange && typeof onChange == "function" && onChange(_value)
155
+ }
156
+ return <TreeSelect {...props} onChange={handleChange} value={nValue} multiple={multiple} />
157
+ }
133
158
  // 选择部门组件
134
- const DeptSelect = ({FetchDeptList,...props})=>{
135
- return <TreeSelect {...props} title={"deptName"} request={FetchDeptList} />
159
+ const DeptSelect = ({ FetchDeptList,...props }) => {
160
+ return <ArrayTreeSelect {...props} title={"deptName"} request={FetchDeptList} />
136
161
  }
137
162
  // 选择岗位组件
138
- const PostSelect = ({FetchPostList,...props})=>{
139
- return <TreeSelect {...props} title={"postName"} request={FetchPostList} />
163
+ const PostSelect = ({ FetchPostList, ...props }) => {
164
+ return <ArrayTreeSelect {...props} title={"postName"} request={FetchPostList} />
140
165
  }
141
166
 
142
- export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select,UserSelect,DeptSelect,PostSelect };
167
+ export { WithSingleSelect, WithMultipleSelect, MultipleSelect, SingleSelect, Select, UserSelect, DeptSelect, PostSelect };
package/src/components/field/table/index copy 2.jsx ADDED
@@ -0,0 +1,268 @@
1
+ import React, { useEffect, useState, useRef, useCallback } from "react";
2
+ import { Button } from "antd";
3
+ import { DeleteOutlined } from "@ant-design/icons";
4
+ import { isEqual, debounce } from 'lodash';
5
+ import { evalFormula } from "../../../utils/formula";
6
+
7
+ const TableCol = ({ children, width, ...props }) => {
8
+ const [sWidth, setSWidth] = useState(0);
9
+ useEffect(() => {
10
+ setSWidth(width);
11
+ }, [width]);
12
+ return <div className="fflex-1" style={{ minWidth: `${sWidth}px` }} {...props}>
13
+ {children}
14
+ </div>
15
+ }
16
+
17
+ const TableAction = ({ label, subTableIndex, children, ...props }) => {
18
+ return <div className="">
19
+ <div className="frelative fw-full fh-full fflex fflex-col foverflow-hidden">
20
+ {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fflex-nowrap ftext-nowrap fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
21
+ <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border ">
22
+ {children}
23
+ </div>
24
+ </div>
25
+ </div>
26
+ }
27
+
28
+ const Table = ({ children, value, onChange, ...props }) => {
29
+ const [rows, setRows] = useState([{}]);
30
+ const prevRowsRef = useRef(rows);
31
+ const dependencyMap = useRef(new Map());
32
+ const [updateField, setUpdateField] = useState({});
33
+ const tableId = props.componentId || props.__id;
34
+ const setPrevRows = (newValue) => {
35
+ setRows(newValue);
36
+ prevRowsRef.current = newValue;
37
+ }
38
+
39
+ useEffect(() => {
40
+ console.log("value useEffect ", JSON.stringify(value));
41
+ if (value && typeof value === "string") {
42
+ try {
43
+ value = JSON.parse(value);
44
+ onChange(value);
45
+ } catch (error) { }
46
+ }
47
+ if (value && Array.isArray(value) && !isEqual(prevRowsRef.current, value)) {
48
+ console.log("useEffect setRows");
49
+ setPrevRows(value);
50
+ }
51
+ }, [value]);
52
+
53
+ useEffect(() => {
54
+ console.log("children useEffect ",children);
55
+ initializeDependencyMap();
56
+ }, [children]);
57
+
58
+ const initializeDependencyMap = useCallback(() => {
59
+ dependencyMap.current.clear();
60
+ const childrenArray = React.Children.toArray(children);
61
+ childrenArray.forEach(child => {
62
+ const { componentId, __id, ...props } = child.props;
63
+ const identifier = `${tableId}.${(componentId || __id)}`;
64
+
65
+ dependencyMap.current.set(identifier, {
66
+ children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
67
+ show: true,
68
+ });
69
+ });
70
+ initializeFieldVisibility();
71
+ }, [children, tableId]);
72
+
73
+ const handleRowValues = useCallback((rowValues) => {
74
+ const result = {};
75
+ for (let key in rowValues) {
76
+ result[`${tableId}.${key}`] = rowValues[key] || '';
77
+ }
78
+ return result;
79
+ }, [tableId]);
80
+
81
+ const initializeFieldVisibility = useCallback(() => {
82
+ rows.forEach((row, rowIndex) => {
83
+ const fieldValues = handleRowValues(row);
84
+ for (let key of dependencyMap.current.keys()) {
85
+ handleFieldsWith(key, fieldValues, rowIndex);
86
+ }
87
+ });
88
+ }, [rows, handleRowValues]);
89
+
90
+ const handleFieldsWith = useCallback((identifier, fieldValues, rowIndex) => {
91
+ let needRefresh = false;
92
+ const fullIdentifier = `${tableId}.${identifier}`;
93
+ if (dependencyMap.current.has(fullIdentifier)) {
94
+ const dependentChildren = dependencyMap.current.get(fullIdentifier).children;
95
+ dependentChildren.forEach(child => {
96
+ if (child.props.withFunc && typeof child.props.withFunc === 'function') {
97
+ needRefresh = handleFieldsVisible(fieldValues, child);
98
+ }
99
+
100
+ if (child.props.withFill) {
101
+ handleFieldsWithFill(fieldValues, child, rowIndex);
102
+ }
103
+ });
104
+ }
105
+ return needRefresh;
106
+ }, [tableId, rows]);
107
+
108
+ const handleFieldsVisible = useCallback((fieldValues, child) => {
109
+ let needRefresh = false;
110
+ const childShouldBeVisible = child.props.withFunc(fieldValues);
111
+ const childIdentifier = child.props.componentId || child.props.__id;
112
+ if (dependencyMap.current.has(childIdentifier)) {
113
+ const childData = dependencyMap.current.get(childIdentifier);
114
+ if (childData.show !== childShouldBeVisible) {
115
+ childData.show = childShouldBeVisible;
116
+ dependencyMap.current.set(childIdentifier, childData);
117
+ needRefresh = true;
118
+ }
119
+ }
120
+ return needRefresh;
121
+ }, []);
122
+
123
+ const handleFieldsWithFill = useCallback(async (fieldValues, child, rowIndex) => {
124
+ const withFill = child.props.withFill;
125
+ const withDataFetch = child.props.withDataFetch;
126
+
127
+ let withDatas = [];
128
+ if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
129
+ for (let index = 0; index < withFill?.withData.length; index++) {
130
+ const element = withFill?.withData[index];
131
+ let params = {}
132
+ params.tableName = element.withTable.table_name;
133
+ params.filter = {};
134
+ for (let index = 0; index < element.withCondition.length; index++) {
135
+ const { value: condition_value, column: condition_column } = element.withCondition[index];
136
+ params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas);
137
+ }
138
+
139
+ const response = await withDataFetch(params);
140
+ if (response.code === 0 && response.data.list) {
141
+ withDatas.push({
142
+ id: element.id,
143
+ data: response.data.list
144
+ });
145
+ }
146
+ }
147
+ }
148
+
149
+ let formula;
150
+ if (withFill.value && withFill.value.length > 0) {
151
+ formula = withFill.value.map(item => {
152
+ let result = "";
153
+ const { insert, attributes } = item;
154
+ if (typeof insert !== "string") {
155
+ if (insert?.span && attributes && attributes.tagKey && attributes.id) {
156
+ result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas);
157
+ if(result) result = `"${result}"`
158
+ }
159
+ } else {
160
+ result = insert;
161
+ }
162
+ return result;
163
+ });
164
+ }
165
+ console.log("formula", formula);
166
+ if (formula && formula.length > 0) {
167
+ const childIdentifier = child.props.componentId || child.props.__id;
168
+ const formulaResult = evalFormula(formula);
169
+ console.log("formulaResult", formulaResult);
170
+ console.log("handleFieldsWithFill setRows");
171
+ const newRows = [...rows]
172
+ newRows[rowIndex][childIdentifier] = formulaResult;
173
+ setPrevRows(newRows)
174
+ }
175
+ }, [rows])
176
+
177
+ const getParamValue = useCallback((tagKey, id, fieldValues, withDatas) => {
178
+ let result = "";
179
+ if (tagKey === "fieldsValue") result = fieldValues?.[id] || "";
180
+ else {
181
+ let withData = withDatas.find(item => item.id === tagKey);
182
+ if (withData && withData.data && withData.data.length > 0) {
183
+ result = withData.data[0]?.[id] || "";
184
+ }
185
+ }
186
+ return result;
187
+ }, []);
188
+
189
+
190
+
191
+ const handleInputChange = useCallback((rowIndex, childIndex, e) => {
192
+ console.log(e)
193
+ const newRows = [...rows];
194
+ newRows[rowIndex] = {
195
+ ...newRows[rowIndex],
196
+ [childIndex]: e?.target?.value || e || '',
197
+ };
198
+ console.log("handleInputChange setRows")
199
+ setPrevRows(newRows);
200
+
201
+ setUpdateField({
202
+ rowIndex: rowIndex,
203
+ identifier: childIndex,
204
+ value: handleRowValues(newRows[rowIndex]),
205
+ });
206
+
207
+ }, [rows, handleFieldsWith, handleRowValues, onChange]);
208
+
209
+
210
+ const handleDeleteRow = (rowIndex) => {
211
+ const newRows = [...rows];
212
+ newRows.splice(rowIndex, 1);
213
+ console.log("handleDeleteRow setRows")
214
+ setPrevRows(newRows);
215
+ }
216
+
217
+ const addRow = () => {
218
+ console.log("addRow setRows")
219
+ setPrevRows([...rows, {}]);
220
+ }
221
+
222
+ useEffect(() => {
223
+ console.log("rows changed rows", JSON.stringify(prevRowsRef.current));
224
+ console.log("rows changed value", JSON.stringify(value));
225
+ if (isEqual(prevRowsRef.current, value)) return;
226
+ console.log("noreq")
227
+ typeof onChange === "function" && onChange(prevRowsRef.current);
228
+ }, [rows]);
229
+
230
+ useEffect(() => {
231
+ if (updateField && updateField.identifier) {
232
+ handleFieldsWith(updateField.identifier, updateField.value, updateField.rowIndex);
233
+ }
234
+ }, [updateField])
235
+
236
+
237
+ return (
238
+ <>
239
+ <div className="fw-full frelative fmin-h-20 foverflow-x-auto">
240
+
241
+ {rows.map((row, rowIndex) => (
242
+ <div className="fborder-b fflex flex-nowrap fmin-w-full" key={rowIndex}>
243
+ {React.Children.map(children, (child, childIndex) => {
244
+ const col_id = child?.props?.__id || childIndex;
245
+ if (row?.[col_id] === undefined) row[col_id] = "";
246
+ return <TableCol width={150} key={`row_${rowIndex}_col_${childIndex}`}>
247
+ {React.cloneElement(child, {
248
+ key: `row_${rowIndex}_child_${childIndex}`,
249
+ subTable: true,
250
+ subTableIndex: rowIndex,
251
+ value: row[col_id] || '',
252
+ onChange: (e) => handleInputChange(rowIndex, col_id, e),
253
+ })}
254
+ </TableCol>
255
+ })}
256
+ <TableAction key={`row_${rowIndex}_action`} subTable={true} subTableIndex={rowIndex} label={"操作"}>
257
+ <DeleteOutlined className="fcursor-pointer" onClick={() => handleDeleteRow(rowIndex)} />
258
+ </TableAction>
259
+ </div>
260
+ ))}
261
+ </div>
262
+ <Button onClick={addRow} className="fmy-2">新增一行</Button>
263
+ </>
264
+ );
265
+ };
266
+
267
+ export default Table;
268
+ export { TableCol, TableAction };