lu-lowcode-package-form 0.9.8 → 0.9.18

package/src/components/field/base.jsx

@@ -1,16 +1,30 @@
+import { useEffect, useState } from "react";
+
+const FieldLable = ({value,onChange})=>{
+    const [text, setText] = useState("");
+    useEffect(() => {
+        setText(value);
+        console.log("value changed", value)
+    }, [value]);
+    return <>{text}</>
+}
+
 export const BaseWrapper = function BaseWrapper({
     label,
     children,
     prompt,
     subTable,
     subTableIndex,
+    addWrapper = true,
     ...otherProps
 }) {
+    if (!addWrapper) return children;
     const formWarpper =  (
         <div className="frelative">
-            {label && <div className='fh-8 ftext-sm fflex fjustify-between fitems-center'>{label}</div>}
-            <div className="fw-full fflex fitems-stretch">
-                {children}
+            {label && <div className='fh-8 ftext-gray-500 ftext-sm fflex fjustify-between fitems-center'>{label}</div>}
+            <div className="fw-full fflex fitems-stretch ftext-gray-900">
+               {/* <FieldLable value={otherProps?.value} /> */}
+               {children}
             </div>
             {!subTable && <div className="ftext-xs ftext-gray-500 fmin-h-5 fflex fitems-center">{prompt}</div>}
         </div>
@@ -18,9 +32,10 @@ export const BaseWrapper = function BaseWrapper({
 
     const tableWarpper = (
         <div className="frelative fw-full">
-            {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fjustify-between fitems-center fpx-2 fborder-b frounded-t-md'>{label}</div>}
-            <div className="fw-full fflex fitems-stretch fp-2 fborder-b">
-                {children}
+            {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>}
+            <div className="fw-full fflex fitems-stretch fp-2 ">
+               {/* <FieldLable value={otherProps?.value} /> */}
+               {children}
             </div>
         </div>
     )

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

@@ -11,24 +11,10 @@ export const Checkbox = (props) => {
   );
 }
 
-export const CheckboxGroup = ({value, onChange,...props}) => {
-  const [nValue, setNValue] = useState([])
-
-  useEffect(() => {
-    if (typeof value === "string") {
-      try {
-        value = JSON.parse(value)
-        onChange(value)
-      } catch (error) {
-
-      }
-    }
-
-    setNValue(value)
-  }, [value])
+export const CheckboxGroup = (props) => {
   return (
     <BaseWrapper {...props}>
-      <OriginalCheckbox.Group {...props} value={nValue} />
+      <OriginalCheckbox.Group {...props} />
     </BaseWrapper>
   );
 }

package/src/components/field/date-picker/index.jsx

@@ -3,7 +3,14 @@ import { DatePicker as OriginalDatePicker, Button } from 'antd';
 import { BaseWrapper } from "../base.jsx"
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-dayjs.locale('zh-cn');
+import zh from 'antd/es/date-picker/locale/zh_CN';
+
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(updateLocale);
+dayjs.updateLocale('zh-cn', {
+  weekStart: 0,
+});
 
 const DatePicker = ({ datetype, value, onChange, ...props }) => {
     datetype = datetype || "date"
@@ -58,7 +65,7 @@ const DatePicker = ({ datetype, value, onChange, ...props }) => {
     }, [datetype])
     return (
         <BaseWrapper {...props}>
-            <OriginalDatePicker {...props} picker={picker} format={format} style={{ width: '100%' }} onChange={handleChange} value={nValue} showTime={showTime} needConfirm={needConfirm} />
+            <OriginalDatePicker locale={zh} {...props} picker={picker} format={format} style={{ width: '100%' }} onChange={handleChange} value={nValue} showTime={showTime} needConfirm={needConfirm} />
         </BaseWrapper>
     );
 }

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

@@ -1,4 +1,5 @@
 import { Input as OriginalInput } from 'antd';
+import { InputNumber } from 'antd';
 import { BaseWrapper } from "../base.jsx"
 import React from 'react'; 
 const {
@@ -7,6 +8,8 @@ const {
   Search: OriginalSearch,
 } = OriginalInput;
 
+
+
 const Input = (props) =>{
   return (
     <BaseWrapper {...props}>
@@ -48,4 +51,11 @@ const Search = (props) =>{
   );
 }
 
-export  {Input,TextArea,Password,Search,CodeMachine};
+const Number = (props) =>{
+  return (
+    <BaseWrapper {...props}>
+      <InputNumber {...props} style={{width: '100%'}} />
+    </BaseWrapper>
+  );
+}
+export {Input,TextArea,Password,Search,CodeMachine,Number};

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

@@ -1,4 +1,4 @@
 export { default as TreeSelect } from './tree-select.jsx';
 export { Select, WithSingleSelect,WithMultipleSelect , MultipleSelect, SingleSelect} from './select.jsx';
-
+export { SearchSelect } from './search-select.jsx'
 

package/src/components/field/select/search-select.jsx

@@ -0,0 +1,110 @@
+
+
+import { Input, Select as OriginalSelect, Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { BaseWrapper } from "../base"
+import { debounce } from 'lodash';
+
+
+const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, ...props }) => {
+    const [nOptions, setNOptions] = React.useState([])
+    const [fetching, setFetching] = useState(false);
+    useEffect(() => {
+        initData(requestParams)
+    }, [requestParams])
+
+    const initData = async (params) => {
+        let item = null
+        if (request && typeof request === 'function') {
+            const list = await fetchOptions(params)
+            if (list && Array.isArray(list))
+                item = value ? list.find(item => item.value == value) : null
+        }
+
+        if (options && options.length > 0) {
+            item = value ? options.find(item => item.value == value) : null
+            setNOptions(options)
+        }
+
+        if (item) {
+            onChange(item)
+        }
+
+    }
+
+    const handleSearch = debounce(async (value) => {
+        const params = { ...requestParams }
+        params[option_search] = value
+        await fetchOptions(params)
+    }, 200)
+
+    const fetchOptions = async (params) => {
+        try {
+            setFetching(true)
+            const response = await request(params);
+            if (response.code > 0) {
+                callError && typeof callError === 'function' && callError(response.message);
+                return
+            }
+            let list = response.data?.list || response.data
+            if (Array.isArray(list)) {
+                list = list.map(item => ({ ...item, label: item[option_label], value: item[option_value] }))
+                setNOptions(list)
+            }
+            else setNOptions([])
+            return list
+        } catch (error) {
+            console.error("fetchOptions", error)
+        }
+        finally {
+            setFetching(false)
+        }
+    }
+
+    const handleChange = (value) => {
+        const item = nOptions.find(item => item.value === value)
+        onChange(item)
+    }
+
+
+    return addWrapper ? (
+        <BaseWrapper {...props}>
+            <OriginalSelect
+                notFoundContent={fetching ? <Spin size="small" /> : null}
+                value={value}
+                {...props}
+                disabled={false}
+                filterOption={false}
+                showSearch={request && option_search ? true : false}
+                onSearch={request && option_search ? handleSearch : null}
+                onChange={handleChange}
+                style={{ width: '100%' }}
+                mode="single" >
+                {nOptions.map((item, index) => (
+                    <OriginalSelect.Option key={index} value={item.value} disabled={false}>
+                        {item.label}
+                    </OriginalSelect.Option>
+                ))}
+            </OriginalSelect>
+        </BaseWrapper>
+    ) : <OriginalSelect
+        notFoundContent={fetching ? <Spin size="small" /> : null}
+        value={value}
+        {...props}
+        disabled={false}
+        filterOption={false}
+        showSearch={request && option_search ? true : false}
+        onSearch={request && option_search ? handleSearch : null}
+        onChange={handleChange}
+        style={{ width: '100%' }}
+        mode="single" >
+        {nOptions.map((item, index) => (
+            <OriginalSelect.Option key={index} value={item.value} disabled={false}>
+                {item.label}
+            </OriginalSelect.Option>
+        ))}
+    </OriginalSelect>
+
+}
+
+export {SearchSelect}

package/src/components/field/select/select.jsx

@@ -3,7 +3,7 @@ import { Select as OriginalSelect } from "antd";
 import { BaseWrapper } from "../base"
 import React, { useEffect, useState } from 'react';
 
-const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, ...props }) => {
+const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, addWrapper = true, ...props }) => {
     // const [firstLoad, setFirstLoad] = React.useState(false)
     const [nOptions, setNOptions] = React.useState([])
     useEffect(() => {
@@ -29,11 +29,11 @@ const Select = ({ request, option_label = "label", option_value = "id", disabled
 
         // setFirstLoad(true)
     }
-    return (
+    return addWrapper ?(
         <BaseWrapper {...props}>
             <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
         </BaseWrapper>
-    )
+    ) : <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
 }
 
 const SingleSelect =  ({ ...props }) => {
@@ -46,7 +46,7 @@ const MultipleSelect =  ({ onChange, value, ...props }) => {
     const [nValue, setNValue] = React.useState([])
 
     useEffect(()=>{
-        if (typeof value === "string") {
+        if (value && typeof value === "string") {
             try {
                 value = JSON.parse(value)
                 onChange(value)
@@ -55,7 +55,7 @@ const MultipleSelect =  ({ onChange, value, ...props }) => {
             }
         }
        
-        setNValue(value)
+        if(value) setNValue(value)
     },[value])
   
     return (

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

@@ -1,36 +1,267 @@
-import React, { useState } from "react"
-import { Button, Row } from "antd"
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { Button } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import { isEqual, debounce } from 'lodash';
+import { evalFormula } from "../../../utils/formula";
 
 const TableCol = ({ children, width, ...props }) => {
-    return <div className=" fw-full fmin-h-20 fflex fflex-nowrap foverflow-auto  " style={{ width: `${width}px` }} {...props}>
+    const [sWidth, setSWidth] = useState(0);
+    useEffect(() => {
+        setSWidth(width);
+    }, [width]);
+    return <div className="fflex-1" style={{ minWidth: `${sWidth}px` }} {...props}>
         {children}
     </div>
 }
 
-const Table = ({ children, ...props }) => {
-    const [rows, setRows] = useState([{}]); // 初始有一个空行
+const TableAction = ({ label, subTableIndex, children, ...props }) => {
+    return <div className="fw-16">
+        <div className="frelative fw-full fh-full fflex fflex-col">
+            {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>}
+            <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 ">
+                {children}
+            </div>
+        </div>
+    </div>
+}
+
+const Table = ({ children, value, onChange, ...props }) => {
+    const [rows, setRows] = useState([{}]);
+    const prevRowsRef = useRef(rows);
+    const dependencyMap = useRef(new Map());
+    const [updateField, setUpdateField] = useState({});
+    const tableId = props.componentId || props.__id;
+    const setPrevRows = (newValue) => {
+        setRows(newValue);
+        prevRowsRef.current = newValue;
+      }
+    
+    useEffect(() => {
+        console.log("value useEffect ", JSON.stringify(value));
+        if (value && typeof value === "string") {
+            try {
+                value = JSON.parse(value);
+                onChange(value);
+            } catch (error) { }
+        }
+        if (value && Array.isArray(value) && !isEqual(prevRowsRef.current, value)) {
+            console.log("useEffect setRows");
+            setPrevRows(value);
+        }
+    }, [value]);
+
+    useEffect(() => {
+        console.log("children useEffect ",children);
+        initializeDependencyMap();
+    }, [children]);
+
+    const initializeDependencyMap = useCallback(() => {
+        dependencyMap.current.clear();
+        const childrenArray = React.Children.toArray(children);
+        childrenArray.forEach(child => {
+            const { componentId, __id, ...props } = child.props;
+            const identifier = `${tableId}.${(componentId || __id)}`;
+
+            dependencyMap.current.set(identifier, {
+                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
+                show: true,
+            });
+        });
+        initializeFieldVisibility();
+    }, [children, tableId]);
+
+    const handleRowValues = useCallback((rowValues) => {
+        const result = {};
+        for (let key in rowValues) {
+            result[`${tableId}.${key}`] = rowValues[key] || '';
+        }
+        return result;
+    }, [tableId]);
+
+    const initializeFieldVisibility = useCallback(() => {
+        rows.forEach((row, rowIndex) => {
+            const fieldValues = handleRowValues(row);
+            for (let key of dependencyMap.current.keys()) {
+                handleFieldsWith(key, fieldValues, rowIndex);
+            }
+        });
+    }, [rows, handleRowValues]);
+
+    const handleFieldsWith = useCallback((identifier, fieldValues, rowIndex) => {
+        let needRefresh = false;
+        const fullIdentifier = `${tableId}.${identifier}`;
+        if (dependencyMap.current.has(fullIdentifier)) {
+            const dependentChildren = dependencyMap.current.get(fullIdentifier).children;
+            dependentChildren.forEach(child => {
+                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
+                    needRefresh = handleFieldsVisible(fieldValues, child);
+                }
+
+                if (child.props.withFill) {
+                    handleFieldsWithFill(fieldValues, child, rowIndex);
+                }
+            });
+        }
+        return needRefresh;
+    }, [tableId, rows]);
+
+    const handleFieldsVisible = useCallback((fieldValues, child) => {
+        let needRefresh = false;
+        const childShouldBeVisible = child.props.withFunc(fieldValues);
+        const childIdentifier = child.props.componentId || child.props.__id;
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (childData.show !== childShouldBeVisible) {
+                childData.show = childShouldBeVisible;
+                dependencyMap.current.set(childIdentifier, childData);
+                needRefresh = true;
+            }
+        }
+        return needRefresh;
+    }, []);
+
+    const handleFieldsWithFill = useCallback(async (fieldValues, child, rowIndex) => {
+        const withFill = child.props.withFill;
+        const withDataFetch = child.props.withDataFetch;
+
+        let withDatas = [];
+        if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
+            for (let index = 0; index < withFill?.withData.length; index++) {
+                const element = withFill?.withData[index];
+                let params = {}
+                params.tableName = element.withTable.table_name;
+                params.filter = {};
+                for (let index = 0; index < element.withCondition.length; index++) {
+                    const { value: condition_value, column: condition_column } = element.withCondition[index];
+                    params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas);
+                }
+
+                const response = await withDataFetch(params);
+                if (response.code === 0 && response.data.list) {
+                    withDatas.push({
+                        id: element.id,
+                        data: response.data.list
+                    });
+                }
+            }
+        }
+
+        let formula;
+        if (withFill.value && withFill.value.length > 0) {
+            formula = withFill.value.map(item => {
+                let result = "";
+                const { insert, attributes } = item;
+                if (typeof insert !== "string") {
+                    if (insert?.span && attributes && attributes.tagKey && attributes.id) {
+                        result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas);
+                        if(result) result = `"${result}"`
+                    }
+                } else {
+                    result = insert;
+                }
+                return result;
+            });
+        }
+        console.log("formula", formula);
+        if (formula && formula.length > 0) {
+            const childIdentifier = child.props.componentId || child.props.__id;
+            const formulaResult = evalFormula(formula);
+            console.log("formulaResult", formulaResult);
+            console.log("handleFieldsWithFill setRows");
+            const newRows = [...rows]
+            newRows[rowIndex][childIdentifier] = formulaResult;
+            setPrevRows(newRows)
+        }
+    }, [rows])
+
+    const getParamValue = useCallback((tagKey, id, fieldValues, withDatas) => {
+        let result = "";
+        if (tagKey === "fieldsValue") result = fieldValues?.[id] || "";
+        else {
+            let withData = withDatas.find(item => item.id === tagKey);
+            if (withData && withData.data && withData.data.length > 0) {
+                result = withData.data[0]?.[id] || "";
+            }
+        }
+        return result;
+    }, []);
+
+
+
+    const handleInputChange = useCallback((rowIndex, childIndex, e) => {
+
+        const newRows = [...rows];
+        newRows[rowIndex] = {
+            ...newRows[rowIndex],
+            [childIndex]: e?.target?.value || '',
+        };
+        console.log("handleInputChange setRows")
+        setPrevRows(newRows);
+
+        setUpdateField({
+            rowIndex: rowIndex,
+            identifier: childIndex,
+            value: handleRowValues(newRows[rowIndex]),
+        });
+
+    }, [rows, handleFieldsWith, handleRowValues, onChange]);
+
+
+    const handleDeleteRow = (rowIndex) => {
+        const newRows = [...rows];
+        newRows.splice(rowIndex, 1);
+        console.log("handleDeleteRow setRows")
+        setPrevRows(newRows);
+    }
 
     const addRow = () => {
-        setRows([...rows, {}]); // 添加新行
-    };
+        console.log("addRow setRows")
+        setPrevRows([...rows, {}]);
+    }
 
-    return (
-        <div className=" fw-full fmin-h-20 ">
-            <Button onClick={addRow}>添加行</Button>
-            {rows.map((row, rowIndex) => (
-                <div className=" fflex fflex-nowrap foverflow-auto " key={rowIndex}>
-                    {React.Children.map(children, (child, index) =>
-                        <TableCol width={200}>
-                            {React.cloneElement(child, { key: `row_${rowIndex}_child_${index}`, subTable: true, subTableIndex: rowIndex })}
-                        </TableCol>
-                    )}
-                </div>
-            ))}
-        </div>
-    );
-}
+    useEffect(() => {
+        console.log("rows changed rows", JSON.stringify(prevRowsRef.current));
+        console.log("rows changed value", JSON.stringify(value));
+        if (isEqual(prevRowsRef.current, value)) return;
+        console.log("noreq")
+        typeof onChange === "function" && onChange(prevRowsRef.current);
+    }, [rows]);
+
+    useEffect(() => {
+        if (updateField && updateField.identifier) {
+            handleFieldsWith(updateField.identifier, updateField.value, updateField.rowIndex);
+        }
+    }, [updateField])
 
-export default Table
 
-export { TableCol };
+    return (
+        <>
+            <div className="fw-full fmin-h-20 foverflow-x-auto">
+                {rows.map((row, rowIndex) => (
+                    <div className="fborder-b finline-flex fflex-wrap fmin-w-full" style={{ width: "max-content" }} key={rowIndex}>
+                        {React.Children.map(children, (child, childIndex) => {
+                            const col_id = child?.props?.__id || childIndex;
+                            if (row?.[col_id] === undefined) row[col_id] = "";
+                            return <TableCol width={100} key={`row_${rowIndex}_col_${childIndex}`}>
+                                {React.cloneElement(child, {
+                                    key: `row_${rowIndex}_child_${childIndex}`,
+                                    subTable: true,
+                                    subTableIndex: rowIndex,
+                                    value: row[col_id] || '',
+                                    onChange: (e) => handleInputChange(rowIndex, col_id, e),
+                                })}
+                            </TableCol>
+                        })}
+                        <TableAction key={`row_${rowIndex}_action`} subTable={true} subTableIndex={rowIndex} label={"操作"}>
+                            <DeleteOutlined className="fcursor-pointer" onClick={() => handleDeleteRow(rowIndex)} />
+                        </TableAction>
+                    </div>
+                ))}
+            </div>
+            <Button onClick={addRow}>新增行</Button>
+        </>
+    );
+};
 
+export default Table;
+export { TableCol, TableAction };

package/src/components/field/upload/upload-file.jsx

@@ -49,8 +49,7 @@ const UploadFile = ({ value, maxCount, onChange, ...props }) => {
                 maxCount={maxCount}
                 onChange={handleChange}
                 fileList={fileList}>
-                <div className=" fmin-w-36 fgap-1 frounded fborder-gray-300 fborder hover:fborder-[#3e92f8] hover:ftext-[#3e92f8] fcursor-pointer fh-8 fflex fitems-center fbg-white fjustify-center "><UploadOutlined />点击上传文件</div>
-
+               { !props?.disabled &&  <div className=" fmin-w-36 fgap-1 frounded fborder-gray-300 fborder hover:fborder-[#3e92f8] hover:ftext-[#3e92f8] fcursor-pointer fh-8 fflex fitems-center fbg-white fjustify-center "><UploadOutlined />点击上传文件</div>}
             </OriginalUpload>
         </BaseWrapper>
     );

package/src/components/field/upload/upload-image.jsx

@@ -72,7 +72,6 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
 
         let handleFileList = []
 
-        console.log("fileMap.current", JSON.parse(JSON.stringify(fileMap.current)))
         for (let i = 0; i < newFileList.length; i++) {
             var file = newFileList[i];
             file.version = new Date().getTime()
@@ -88,8 +87,6 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
                 handleFileList.push(file)
             }
         }
-        console.log("newFileList", JSON.parse(JSON.stringify(newFileList)))
-        console.log("handleFileList", JSON.parse(JSON.stringify(handleFileList)))
         fileMap.current = handleFileList
         setFileList(handleFileList);
         onChange(handleFileList.map((file) => {
@@ -152,7 +149,7 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
                     onPreview={handlePreview}
                     onChange={handleChange}
                 >
-                    {fileList.length >= maxCount ? null : uploadButton}
+                    {fileList.length >= maxCount || props?.disabled ? null : uploadButton}
                 </OriginalUpload>
             </div>