lu-lowcode-package-form 0.11.55 → 0.11.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.11.55",
+  "version": "0.11.57",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/components/field/table/drag-head.jsx

@@ -3,7 +3,7 @@ import { eventEmitter } from "../../../utils/events"
 import { createPortal } from "react-dom"
 import { Resizable } from "react-resizable"
 
-const DragHead = ({ children, changeWidth, showAction, ...props }) => {
+const DragHead = ({ childrenDesc, changeWidth, showAction, showLabel = false, ...props }) => {
     const [headWidths, setHeadWidths] = useState([])
     const headWidthsRef = useRef([])
     const [isDragging, setIsDragging] = useState(false)
@@ -48,7 +48,6 @@ const DragHead = ({ children, changeWidth, showAction, ...props }) => {
             headWidthsRef.current = newHeadWidths
             setHeadWidths(newHeadWidths)
             typeof changeWidth === 'function' && changeWidth(newHeadWidths)
-            eventEmitter.emit('changeSubTableColumnWidth', newHeadWidths)
             // 重置拖动状态
             setIsDragging(false)
             setResizingColumn(null)
@@ -58,7 +57,7 @@ const DragHead = ({ children, changeWidth, showAction, ...props }) => {
     // 虚拟指示线组件
     const DragIndicator = () => {
         if (!isDragging) return null
-        
+
         const style = {
             position: 'fixed',
             top: 0,
@@ -69,7 +68,7 @@ const DragHead = ({ children, changeWidth, showAction, ...props }) => {
             pointerEvents: 'none',
             zIndex: 9999
         }
-        
+
         return createPortal(
             <div style={style}></div>,
             document.body
@@ -77,44 +76,44 @@ const DragHead = ({ children, changeWidth, showAction, ...props }) => {
     }
 
     return <><div className="fflex flex-nowrap fmin-w-full fabsolute">
-                {React.Children.map(children, (child, childIndex) => {
-                    const width = getColumnWidth(childIndex)
-                    
-                    return (
-                        <Resizable
-                            key={childIndex}
-                            width={width}
-                            height={0} // 高度不用调整，设为0
-                            onResizeStart={onResizeStart(childIndex)}
-                            onResize={onResize(childIndex)}
-                            onResizeStop={onResizeStop(childIndex)}
-                            handle={
-                                <div
-                                    className="react-resizable-handle react-resizable-handle-e"
-                                    style={{
-                                        position: 'absolute',
-                                        right: 0,
-                                        top: 0,
-                                        height: '100%',
-                                        width: '8px',
-                                        cursor: 'col-resize',
-                                        zIndex: 9999
-                                    }}
-                                />
-                            }
-                            resizeHandles={['e']} // 只允许从右侧拖动调整宽度
-                        >
-                            <div 
-                                className="fflex-1 fh-12 fflex fitems-center fpx-1 frelative" 
-                                style={{minWidth: width}}
-                            >
-                                &nbsp;
-                            </div>
-                        </Resizable>
-                    )
-                })}
-                {showAction && <div className="fsticky fright-0 fborder-b" style={{ boxShadow: "rgba(50, 50, 50, 0.15) -6px 0px 6px -6px", flex: "0 0 50px", width: "50px" }}></div>}
-            </div>
+        {childrenDesc.map((child, childIndex) => {
+            const width = getColumnWidth(childIndex)
+
+            return (
+                <Resizable
+                    key={childIndex}
+                    width={width}
+                    height={0} // 高度不用调整，设为0
+                    onResizeStart={onResizeStart(childIndex)}
+                    onResize={onResize(childIndex)}
+                    onResizeStop={onResizeStop(childIndex)}
+                    handle={
+                        <div
+                            className="react-resizable-handle react-resizable-handle-e"
+                            style={{
+                                position: 'absolute',
+                                right: 0,
+                                top: 0,
+                                height: '100%',
+                                width: '8px',
+                                cursor: 'col-resize',
+                                zIndex: 9999
+                            }}
+                        />
+                    }
+                    resizeHandles={['e']} // 只允许从右侧拖动调整宽度
+                >
+                    <div
+                        className="fflex-1 fh-12 fflex fitems-center fpx-1 frelative"
+                        style={{ minWidth: width }}
+                    >
+                        {showLabel ? <>{child?.props?.label}</> : <>&nbsp;</>}
+                    </div>
+                </Resizable>
+            )
+        })}
+        {showAction && <div className="fsticky fright-0 fborder-b" style={{ boxShadow: "rgba(50, 50, 50, 0.15) -6px 0px 6px -6px", flex: "0 0 50px", width: "50px" }}></div>}
+    </div>
         <DragIndicator /></>
 }
 

package/src/components/field/table/index.jsx

@@ -59,6 +59,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
     const name = props.componentId || props.__id
     const childrenIds = React.Children.map(children, (child) => `${name}.${child.props.componentId || child.props.__id}`)
     const rules = []
+    const [childrenDesc, setChildrenDesc] = useState([])
     const handleAdd = () => {
         if (!init) setInit(true);
         form?.setFieldValue(fieldName, [{}])
@@ -77,6 +78,15 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
         }
     }, [])
 
+    useEffect(()=>{
+        const childrenDesc = React.Children.map(children, (child) => {
+            return {id:child.props.componentId || child.props.__id,label:child.props.label}
+        })
+        console.log("Emit Table childrenDesc", childrenDesc)
+        eventEmitter.emit("tableChildrenDesc", childrenDesc)
+        setChildrenDesc(childrenDesc)
+    },[children])
+
 
     const getColumnWidth = (index) => {
         return headWidths[index] || 150
@@ -132,7 +142,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                 return <div className="fw-full ">
 
                     <div className="fw-full frelative fmin-h-20 foverflow-x-auto" style={{ position: 'relative' }}>
-                        <DragHead changeWidth={handleChangeWidth} showAction={disabled != true && readonly != true}>{children}</DragHead>
+                        <DragHead changeWidth={handleChangeWidth} showAction={disabled != true && readonly != true} childrenDesc={childrenDesc}/>
                         {fields.length === 0 && <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
                             {React.Children.map(children, (child, childIndex) => {
                                 const hidden = (child?.props?.calcHidden || !getDependencyMapShow(child?.props?.componentId || child?.props?.__id)) && mode != "desgin";
@@ -280,4 +290,5 @@ TableWrapper.displayName = "Table"
 export default TableWrapper;
 export { TableCol, TableAction };
 
-export { WithTable } from "./with-table"    
+export { WithTable } from "./with-table"    
+export  { DragHead }

package/src/components/index.jsx

@@ -9,7 +9,7 @@ import { default as RadioGroup } from './field/radio/index.jsx'
 import { UploadFile,UploadImage } from './field/upload'
 import  {default as Switch} from './field/switch'
 import {default as DatePicker } from './field/date-picker'
-import { default as Table , TableCol, WithTable } from './field/table'
+import { default as Table , TableCol, WithTable, DragHead } from './field/table'
 const Field = {
     Input,
     TextArea,
@@ -37,7 +37,8 @@ const Field = {
     Custom,
     UserSelect,
     DeptSelect,
-    PostSelect
+    PostSelect,
+    DragHead
 }
 Object.keys(Field).forEach(key => {
     Field[key].displayName = `Field.${key}`;