fix: 验证表单录入组件是否放在Form容器内

JackySoft · Dec 18, 2024 · c016941 · c016941
1 parent 62087f9
commit c016941
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/editor/src/pages/admin/menu/CreateMenu.tsx b/packages/editor/src/pages/admin/menu/CreateMenu.tsx
@@ -195,7 +195,12 @@ export default function CreateMenu(props: IModalProp<Menu.EditParams>) {
                         </Radio.Group>
                       </Form.Item>
                     )}
-                    <Form.Item label="页面路径" name="path" extra="配置页面路径后，访问时会优先使用页面路径">
+                    <Form.Item
+                      label="页面路由"
+                      name="path"
+                      extra="配置页面路由后，访问时会优先使用页面路由"
+                      rules={[{ pattern: /^\/?[a-zA-Z-_]+$/g, message: '页面路由只支持字母-_ 组合' }]}
+                    >
                       <Input placeholder="请输入页面路径，例如: /dashboard" />
                     </Form.Item>
                   </>

diff --git a/packages/editor/src/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -5,7 +5,7 @@ import { useDrop } from 'react-dnd';
 import { useDebounceFn, useKeyPress } from 'ahooks';
 import { getComponent } from '@/packages/index';
 import { IDragTargetItem } from '@/packages/types/index';
-import { createId, getElement } from '@/utils/util';
+import { checkComponentType, createId, getElement } from '@/utils/util';
 import storage from '@/utils/storage';
 import { getPageDetail } from '@/api';
 import Toolbar from '@/components/Toolbar/Toolbar';
@@ -115,6 +115,10 @@ const Editor = () => {
       if (monitor.didDrop()) return;
       // 生成默认配置
       const { config, events, methods = [], elements = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
+      if (!checkComponentType(item.type, selectedElement?.id, selectedElement?.type, elementsMap)) {
+        message.info('请把表单项放在Form容器内');
+        return;
+      }
       const childElement =
         elements.map(async (child: IDragTargetItem) => {
           const { config, events, methods = [] }: any = (await getComponent(child.type + 'Config'))?.default || {};

diff --git a/packages/editor/src/utils/util.ts b/packages/editor/src/utils/util.ts
@@ -181,7 +181,7 @@ function findParentTypesById(id: string, elementsMap: { [id: string]: ComponentT
  * 主要判断表单组件只能添加到Form或者SearchForm中
  */
 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);
+  const childFormList = components.find((item) => item.type === 'FormItems')?.data.map((item) => item.type);
   if (!parentType) {
     if (childFormList?.includes(type)) {
       return false;