lu-lowcode-package-form 0.11.80 → 0.11.81

package/src/components/editor/index.jsx

@@ -1,4 +1,5 @@
 export {default as EditorQuill} from './quill'
 export { default as EditorWang } from './wang'
 export { default as EditorWang2 } from './wang2'
-export { default as EditorWang3 } from './wang-demo'
+export { default as EditorWang3 } from './wang-demo'
+export { default as EditorQuill2 } from './quill2'

package/src/components/editor/quill2.jsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef } from 'react';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css'; // 引入 Quill 的主题样式
+
+// 定义工具栏选项，可以根据需要自定义
+const toolbarOptions = [
+  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+  ['bold', 'italic', 'underline', 'strike'], // 粗体、斜体、下划线、删除线
+  [{ 'list': 'ordered'}, { 'list': 'bullet' }], // 有序列表、无序列表
+  [{ 'script': 'sub'}, { 'script': 'super' }], // 上标、下标
+  [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
+  [{ 'direction': 'rtl' }], // 文字方向
+  [{ 'size': ['small', false, 'large', 'huge'] }], // 字号
+  [{ 'color': [] }, { 'background': [] }], // 字体颜色、背景颜色
+  [{ 'font': [] }], // 字体
+  [{ 'align': [] }], // 对齐方式
+  ['clean'], // 清除格式
+  ['link', 'image', 'video'] // 链接、图片、视频
+];
+
+const QuillEditor = ({ value, onChange, placeholder = '请输入内容...', height = '300px' }) => {
+  const editorContainerRef = useRef(null); // Ref 指向编辑器的容器 div
+  const quillInstance = useRef(null);
+
+  useEffect(() => {
+    let quillEditorDiv; // Quill 实际初始化的 div
+    if (editorContainerRef.current && !quillInstance.current) {
+      // 创建一个 div 给 Quill 初始化，这样 Snow 主题的工具栏会和它关联
+      // Snow 主题通常会将工具栏放在编辑器 div 的前面
+      quillEditorDiv = document.createElement('div');
+      editorContainerRef.current.appendChild(quillEditorDiv);
+
+      quillInstance.current = new Quill(quillEditorDiv, {
+        modules: {
+          toolbar: toolbarOptions // 直接使用定义的工具栏选项
+        },
+        theme: 'snow',
+        placeholder: placeholder,
+      });
+
+      // 设置初始内容
+      if (value) {
+        quillInstance.current.clipboard.dangerouslyPasteHTML(value);
+      }
+
+      // 监听内容变化
+      quillInstance.current.on('text-change', (delta, oldDelta, source) => {
+        if (source === 'user') {
+          const html = quillInstance.current.root.innerHTML;
+          onChange?.(html);
+        }
+      });
+    }
+
+    return () => {
+      if (quillInstance.current) {
+        quillInstance.current.off('text-change');
+        quillInstance.current = null;
+      }
+      // 清理 editorContainerRef 内部所有由 Quill 创建的 DOM
+      if (editorContainerRef.current) {
+        editorContainerRef.current.innerHTML = '';
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 依赖项为空，确保只在挂载和卸载时运行
+
+  // 当外部传入的 value 变化时，更新编辑器内容
+  useEffect(() => {
+    if (quillInstance.current && value !== undefined) {
+      const currentEditorHTML = quillInstance.current.root.innerHTML;
+      if (value !== currentEditorHTML) {
+        const selection = quillInstance.current.getSelection();
+        quillInstance.current.clipboard.dangerouslyPasteHTML(value);
+        if (selection) {
+          // 尝试恢复光标位置，如果直接粘贴HTML导致光标丢失
+          quillInstance.current.setSelection(selection.index, selection.length);
+        }
+      }
+    }
+  }, [value]);
+
+  // editorContainerRef 的高度由 height prop 控制
+  // Quill 的 Snow 主题会自动在其内部管理编辑器区域和工具栏的布局
+  return <div ref={editorContainerRef} style={{ height: height }} />;
+};
+
+export default QuillEditor;

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

@@ -181,7 +181,7 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
             }
             if (nOptions.length > 0 && !isEqual(nOptions, list) && !list.some(item => item.value == value?.value)) {
                 console.log(`[${props?.label}]handleOptions onChange(undefined)`)
-                // 如果选项发生变化，并且选项中没有当前已经选择的数据，则清空当前已经选择的数据
+                // 如果选项发生变化，并且选项中没有当前已经选择的数据，则清空当前已经选择的数据(场景举例：出库时已选了库位A，此时如果变更出库仓库，新的仓库已经没有了库位A，则需要清空当前已经选择的库位，否则可能会造成操作错误)
                 typeof onChange === 'function' && onChange(undefined)
             }
         }

package/src/components/form-container/index.jsx

@@ -709,6 +709,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
 
 
     const changedFieldsState = React.useRef({});
+    const changedValuesState = React.useRef({});
     const timeoutRef = React.useRef(null);
 
     // 注意:初始化 setFieldsValue 的时候，如果没有更新lastFormValues，或者请求过慢，没有连上500毫秒的防抖，可能会造成数据加载异常（字段变化，填充的连锁反应，造成数据更新成非setFieldsValue的数据）
@@ -771,24 +772,77 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }, []);
 
     const handleFieldsChange = React.useCallback((changedFields) => {
-        console.log("handleFieldsChange", changedFields)
-        changedFields.filter(field => {
-            if (field.name && field.name.length > 0) {
-                // const fieldKey = field.name.filter(item => typeof item == "string").join(".")
-                changedFieldsState.current[field.name] = field;
-
-
-            }
-        })
-        console.log("handleFieldsChange", changedFieldsState.current)
-        debounceHandleFieldsChange();
-
+        console.log("handleFieldsChange (disabled, using handleValuesChange instead)", JSON.stringify(changedFields))
+        // 已禁用，改为使用 handleValuesChange 来处理字段变更
+        // 这样可以避免重复处理和多余的触发
     }, []);
-
-    const handleValuesChange = React.useCallback((changedValues) => {
-       console.log("handleValuesChange", changedValues)
-
+    const handleValuesChange = React.useCallback((changedValues, allValues) => {
+        console.log("handleValuesChange changedValues", JSON.stringify(changedValues))
+        console.log("handleValuesChange allValues", JSON.stringify(allValues))
+        
+        // 将 changedValues 转换为类似 handleFieldsChange 的格式
+        const convertToFieldsFormat = (values, parentPath = []) => {
+            const fieldsArray = [];
+            
+            for (let fieldName in values) {
+                const fieldValue = values[fieldName];
+                const currentPath = [...parentPath, fieldName];
+                
+                // 处理数组类型（如table字段）
+                if (Array.isArray(fieldValue)) {
+                    fieldValue.forEach((item, index) => {
+                        if (typeof item === 'object' && item !== null) {
+                            // 递归处理数组中的对象
+                            const subFields = convertToFieldsFormat(item, [...currentPath, index]);
+                            fieldsArray.push(...subFields);
+                        } else {
+                            // 数组中的基本类型值
+                            fieldsArray.push({
+                                touched: true,
+                                validating: false,
+                                errors: [],
+                                warnings: [],
+                                name: [...currentPath, index],
+                                validated: false,
+                                value: item
+                            });
+                        }
+                    });
+                } else {
+                    // 对于非数组类型（包括对象和基本类型），都作为完整的字段值处理
+                    // 这样可以正确处理像 {label: "选项2", value: "2"} 这样的对象值
+                    fieldsArray.push({
+                        touched: true,
+                        validating: false,
+                        errors: [],
+                        warnings: [],
+                        name: currentPath,
+                        validated: false,
+                        value: fieldValue
+                    });
+                }
+            }
+            
+            return fieldsArray;
+        };
+        
+        // 转换为类似 handleFieldsChange 的格式
+        const convertedFields = convertToFieldsFormat(changedValues);
+        console.log("handleValuesChange converted to fields format", JSON.stringify(convertedFields));
+        
+        // 使用转换后的数据，复用原有的处理逻辑
+        if (convertedFields.length > 0) {
+            convertedFields.forEach(field => {
+                if (field.name && field.name.length > 0) {
+                    changedFieldsState.current[field.name] = field;
+                }
+            });
+            
+            console.log("handleValuesChange changedFieldsState", changedFieldsState.current);
+            debounceHandleFieldsChange();
+        }
     }, []);
+  
     const getTableWithIds = (ids) => {
         let withAllIds = []
         ids.forEach(id => {