fix: 修复表单项和Form容器匹配问题

JackySoft · Sep 7, 2024 · 18e1408 · 18e1408
1 parent fd28dd5
commit 18e1408
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/packages/editor/src/layout/components/Menu/DragMenuItem.tsx b/packages/editor/src/layout/components/Menu/DragMenuItem.tsx
@@ -14,11 +14,12 @@ import { message } from '@/utils/AntdGlobal';
 const DragMenuItem = (props: IDragTarget) => {
   // 生成组件ID
   const [id, setId] = useState(createId(props.type));
-  const { selectedElement, addElement, addChildElements } = usePageStore((state) => {
+  const { selectedElement, elementsMap, addElement, addChildElements } = usePageStore((state) => {
     return {
       addElement: state.addElement,
       addChildElements: state.addChildElements,
       selectedElement: state.selectedElement,
+      elementsMap: state.page.elementsMap,
     };
   });
   const [{ isDragging }, drag] = useDrag(
@@ -45,8 +46,8 @@ const DragMenuItem = (props: IDragTarget) => {
     // 生成默认配置
     const { config, events, methods = [], elements = [] }: any = Components[(item.type + 'Config') as keyof typeof Components] || {};
     const newId = createId(item.type);
-    if (!checkComponentType(item.type, selectedElement?.type)) {
-      message.warning(`${item.name}组件不支持添加到${selectedElement?.type || '页面'}中`);
+    if (!checkComponentType(item.type, selectedElement?.id, selectedElement?.type, elementsMap)) {
+      message.info('请把表单项放在Form容器内');
       return;
     }
     const childElement =

diff --git a/packages/editor/src/utils/util.ts b/packages/editor/src/utils/util.ts
@@ -171,21 +171,32 @@ export const loadScript = (src: string) => {
   });
 };
 
+function findParentTypesById(id: string, elementsMap: { [id: string]: ComponentType }) {
+  const types = [elementsMap[id].type];
+  let parentItem = elementsMap[id];
+  while (parentItem.parentId) {
+    const parentType = elementsMap[parentItem.parentId].type;
+    parentType && types.push(parentType);
+    parentItem = elementsMap[parentItem.parentId];
+  }
+  return types;
+}
+
 /**
  * 判断组件是否允许添加
  * 主要判断表单组件只能添加到Form或者SearhForm中
  */
-export const checkComponentType = (type: string, parentType?: string) => {
+export const checkComponentType = (type: string, parentId: string = '', parentType: string = '', elementsMap: { [id: string]: ComponentType }) => {
+  const childFormList = components.find((item) => item.type === 'Form')?.data.map((item) => item.type);
   if (!parentType) {
-    const childFormList = components.find((item) => item.type === 'form')?.data.map((item) => item.type);
-    if (childFormList?.includes(type) || type === 'EditTable') {
+    if (childFormList?.includes(type)) {
       return false;
     }
     return true;
   } else {
-    const childFormList = components.find((item) => item.type === 'form')?.data.map((item) => item.type);
     if (childFormList?.includes(type)) {
-      if (parentType === 'Form' || parentType === 'SearchForm') return true;
+      const types = findParentTypesById(parentId, elementsMap);
+      if (types.includes('Form') || types.includes('SearchForm')) return true;
       return false;
     }
   }