feat: 1. 新增Icon组件。 2.增加FormAction。3. 优化代码。

JackySoft · Sep 8, 2024 · 8abd896 · 8abd896
1 parent 08e7afb
commit 8abd896
Show file tree

Hide file tree

Showing 15 changed files with 241 additions and 20 deletions.
diff --git a/packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx b/packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx
@@ -3,6 +3,8 @@ import { forwardRef, useImperativeHandle, useState } from 'react';
 // 页面
 import JumpLinkAction from './JumpLinkAction';
 import ReloadPageAction from './ReloadPageAction';
+// 表单
+import FormAction from './FormAction';
 // 弹框
 import OpenModalAction from './OpenModalAction';
 import MessageAction from './MessageAction';
@@ -53,6 +55,37 @@ const ActionModal = (props: any, ref: any) => {
         },
       ],
     },
+    {
+      label: '表单',
+      key: 'form-nav',
+      children: [
+        {
+          label: '表单重置',
+          key: 'formReset',
+          render: () => <FormAction />,
+        },
+        {
+          label: '表单提交',
+          key: 'formSubmit',
+          render: () => <FormAction />,
+        },
+        {
+          label: '表单验证',
+          key: 'formValidate',
+          render: () => <FormAction />,
+        },
+        {
+          label: '表单赋值',
+          key: 'formAssignment',
+          render: () => <FormAction />,
+        },
+        {
+          label: '获取表单值',
+          key: 'formGetValue',
+          render: () => <FormAction />,
+        },
+      ],
+    },
     {
       label: '弹框',
       key: 'modal-nav',

diff --git a/packages/editor/src/components/EventConfig/ActionModal/FormAction.tsx b/packages/editor/src/components/EventConfig/ActionModal/FormAction.tsx
@@ -0,0 +1,39 @@
+import { Form, Select, Divider } from 'antd';
+import { usePageStore } from '@/stores/pageStore';
+import styles from './index.module.less';
+const FormAction = () => {
+  // 页面组件
+  const { modals } = usePageStore((state) => {
+    const modals: { id: string }[] = [];
+    Object.values(state.page.elementsMap).forEach((item) => {
+      if (item.type === 'SearchForm' || item.type === 'Form') {
+        modals.push({
+          id: item.id,
+        });
+      }
+    });
+    return {
+      modals,
+    };
+  });
+
+  return (
+    <>
+      <div className={styles.desc}>
+        <h3 className={styles.descTitle}>说明</h3>
+        <p className={styles.descInfo}>触发一个事件动作后，可以选择目标表单，调用该表单方法。</p>
+        <Divider />
+      </div>
+      <Form.Item label="选择表单" name={'target'} rules={[{ required: true, message: '请选择表单组件' }]}>
+        <Select>
+          {modals.map((item) => (
+            <Select.Option key={item.id} value={item.id}>
+              {`${item.id}`}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+    </>
+  );
+};
+export default FormAction;
diff --git a/packages/editor/src/components/EventConfig/ActionModal/RequestAction.tsx b/packages/editor/src/components/EventConfig/ActionModal/RequestAction.tsx
@@ -14,7 +14,7 @@ const RequestAction = ({ type }: { type: 'request' | 'download' }) => {
     <>
       <div className={styles.desc}>
         <h3 className={styles.descTitle}>说明</h3>
-        <p className={styles.descInfo}>点击一个按钮，可以通过此行为来发送一个请求。</p>
+        <p className={styles.descInfo}>文件下载时，后端接口必须返回Blob对象才可以。</p>
         <Divider />
       </div>
       <Form.Item label="配置请求" name="id" rules={[{ required: true, message: '请选择请求接口' }]}>

diff --git a/packages/editor/src/components/SetterRender/SetterRender.tsx b/packages/editor/src/components/SetterRender/SetterRender.tsx
@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
-import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance } from 'antd';
+import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance, Tooltip } from 'antd';
 import * as icons from '@ant-design/icons';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { SchemaType } from '@/packages/types';
 import { CaretDownOutlined } from '@ant-design/icons/lib';
 import MColorPicker from '../ColorPicker';
@@ -33,7 +34,12 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => {
         if (item.type == 'Title') {
           return (
             <h2 className={styles.title} key={key}>
-              {item.label}
+              <span style={{ marginRight: 10 }}>{item.label}</span>
+              {item.tooltip ? (
+                <Tooltip title={item.tooltip}>
+                  <QuestionCircleOutlined />
+                </Tooltip>
+              ) : null}
             </h2>
           );
         } else if (item.type == 'Input') {

diff --git a/packages/editor/src/config/components.ts b/packages/editor/src/config/components.ts
@@ -326,6 +326,11 @@ const components = [
         name: '超链接',
         type: 'Link',
       },
+      {
+        icon: '',
+        name: '图标',
+        type: 'Icon',
+      },
     ],
   },
   {

diff --git a/packages/editor/src/packages/Basic/Icon/Icon.tsx b/packages/editor/src/packages/Basic/Icon/Icon.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import Icon, * as Icons from '@ant-design/icons';
+import { ComponentType } from '@/packages/types';
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MImage = (
+  {
+    id,
+    type,
+    config,
+  }: ComponentType<{
+    icon: string;
+    style?: React.CSSProperties;
+  }>,
+  ref: any,
+) => {
+  const [visible, setVisible] = useState(true);
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+  const iconComp = Icons[config.props.icon as keyof typeof Icons];
+  return (
+    visible && (
+      <Icon component={iconComp as React.ForwardRefExoticComponent<any>} style={config.style} {...config.props} data-id={id} data-type={type} />
+    )
+  );
+};
+export default forwardRef(MImage);
diff --git a/packages/editor/src/packages/Basic/Icon/Schema.tsx b/packages/editor/src/packages/Basic/Icon/Schema.tsx
@@ -0,0 +1,49 @@
+/**
+ * 组件配置和属性值
+ */
+
+export default {
+  // 组件属性配置JSON
+  attrs: [
+    {
+      type: 'Title',
+      label: '基础配置',
+      key: 'basic',
+      tooltip: '图标大小和颜色可在样式中修改字体颜色和大小',
+    },
+    {
+      type: 'Icons',
+      label: '图标',
+      name: 'icon',
+    },
+    {
+      type: 'InputNumber',
+      label: '旋转角度',
+      name: 'rotate',
+    },
+    {
+      type: 'Switch',
+      label: '旋转动画',
+      name: 'spin',
+    },
+  ],
+  config: {
+    // 组件默认属性值
+    props: {
+      icon: 'GithubOutlined',
+      rotate: 0,
+      spin: false,
+    },
+    // 组件样式
+    style: {},
+  },
+  // 组件事件
+  events: [
+    {
+      value: 'handleClick',
+      name: '点击事件',
+    },
+  ],
+  // 组件接口
+  api: {},
+};
diff --git a/packages/editor/src/packages/Basic/Icon/index.ts b/packages/editor/src/packages/Basic/Icon/index.ts
@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon';
+export { default as IconConfig } from './Schema';
diff --git a/packages/editor/src/packages/Basic/index.ts b/packages/editor/src/packages/Basic/index.ts
@@ -2,3 +2,4 @@ export { Image, ImageConfig } from './Image';
 export { Text, TextConfig } from './Text';
 export { Title, TitleConfig } from './Title';
 export { Link, LinkConfig } from './Link';
+export { Icon, IconConfig } from './Icon';
diff --git a/...src/packages/Functional/Button/Schema.tsx → .../src/packages/Functional/Button/Schema.ts b/...src/packages/Functional/Button/Schema.tsx → .../src/packages/Functional/Button/Schema.ts
@@ -1,4 +1,3 @@
-import IConSetting from '@/packages/components/IConSetting';
 /**
  * 组件配置和属性值
  */
@@ -63,10 +62,9 @@ export default {
       name: ['disabled'],
     },
     {
-      type: 'function',
-      render() {
-        return <IConSetting key="icon-setting" />;
-      },
+      type: 'Icons',
+      label: '按钮图标',
+      name: ['icon'],
     },
     {
       type: 'Title',

diff --git a/...packages/Functional/FileUpload/Schema.tsx → .../packages/Functional/FileUpload/Schema.ts b/...packages/Functional/FileUpload/Schema.tsx → .../packages/Functional/FileUpload/Schema.ts
@@ -1,7 +1,6 @@
 /**
  * 组件配置和属性值
  */
-import IConSetting from '@/packages/components/IConSetting';
 export default {
   // 组件属性配置JSON
   attrs: [
@@ -58,10 +57,9 @@ export default {
       name: ['button', 'danger'],
     },
     {
-      type: 'function',
-      render() {
-        return <IConSetting key="icon-setting" name={['button', 'icon']} />;
-      },
+      type: 'Icons',
+      label: '按钮图标',
+      name: ['button', 'icon'],
     },
     {
       type: 'Title',

diff --git a/...or/src/packages/Functional/Tab/Schema.tsx → ...tor/src/packages/Functional/Tab/Schema.ts b/...or/src/packages/Functional/Tab/Schema.tsx → ...tor/src/packages/Functional/Tab/Schema.ts
@@ -1,4 +1,3 @@
-import IConSetting from '@/packages/components/IConSetting';
 /**
  * 组件配置和属性值
  */
@@ -21,10 +20,9 @@ export default {
       name: ['label'],
     },
     {
-      type: 'function',
-      render() {
-        return <IConSetting key="icon-setting" />;
-      },
+      type: 'Icons',
+      label: '按钮图标',
+      name: ['icon'],
     },
     {
       type: 'Switch',

diff --git a/packages/editor/src/packages/utils/action.ts b/packages/editor/src/packages/utils/action.ts
@@ -169,9 +169,24 @@ const execAction = (node: any, params: any = {}) => {
       handleNotifacation(node, data);
     } else if (node.action.actionType === 'request' || node.action.actionType === 'download') {
       handleRequest(node, data);
-    } else if (node.action.actionType === 'openModal' || node.action.actionType === 'openDrawer') {
+    } else if (node.action.actionType === 'formReset') {
+      node.action.method = 'reset';
+      handleMethods(node, data);
+    } else if (node.action.actionType === 'formSubmit') {
+      node.action.method = 'submit';
+      handleMethods(node, data);
+    } else if (node.action.actionType === 'formValidate') {
+      node.action.method = 'validate';
+      handleMethods(node, data);
+    } else if (node.action.actionType === 'formAssignment') {
+      node.action.method = 'init';
+      handleMethods(node, data);
+    } else if (node.action.actionType === 'formGetValue') {
+      node.action.method = 'getFormData';
+      handleMethods(node, data);
+    } else if (['openModal', 'openDrawer'].includes(node.action.actionType)) {
       handleOpenModal(node, data, 'open');
-    } else if (node.action.actionType === 'closeModal' || node.action.actionType === 'closeDrawer') {
+    } else if (['closeModal', 'closeDrawer'].includes(node.action.actionType)) {
       handleOpenModal(node, data, 'close');
     } else if (node.action.actionType === 'jumpLink') {
       handleJumpLink(node, data);

diff --git a/packages/materials/Basic/Icon/Icon.tsx b/packages/materials/Basic/Icon/Icon.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import Icon, * as Icons from '@ant-design/icons';
+import { ComponentType } from '../../types';
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MIcon = (
+  {
+    id,
+    type,
+    config,
+  }: ComponentType<{
+    icon: string;
+    style?: React.CSSProperties;
+  }>,
+  ref: any,
+) => {
+  const [visible, setVisible] = useState(true);
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+  const iconComp = Icons[config.props.icon as keyof typeof Icons];
+  return visible && <Icon component={iconComp as React.ForwardRefExoticComponent<any>} style={config.style} {...config.props} />;
+};
+export default forwardRef(MIcon);
diff --git a/packages/materials/Basic/Icon/index.ts b/packages/materials/Basic/Icon/index.ts
@@ -0,0 +1 @@
+export { default as Icon } from './Icon';