feat: 执行动作类型

src/pages/rule-engine/Scene/Save/action/ListItem/Item.tsx

@@ -1,5 +1,7 @@
 import { AddButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
+import { useState } from 'react';
 export type ItemType = 'serial' | 'parallel';
+import Modal from '../Modal/add';
 interface ItemProps {
   name: number;
   resetField: any;
@@ -8,10 +10,17 @@ interface ItemProps {
 }
 
 export default (props: ItemProps) => {
+  const [visible, setVisible] = useState<boolean>(false);
   return (
-    <div className="actions-item">
+    <div
+      className="actions-item"
+      onClick={() => {
+        setVisible(true);
+      }}
+    >
       {props.name}
       <AddButton>点击配置执行动作</AddButton>
+      {visible && <Modal />}
     </div>
   );
 };

src/pages/rule-engine/Scene/Save/action/Modal/add.tsx

@@ -1,12 +1,32 @@
 import { Modal, Form } from 'antd';
 import ActionsType from '@/pages/rule-engine/Scene/Save/components/TriggerWay/actionsType';
-
+import { useState } from 'react';
+import Notify from '../notify';
 export default () => {
   const [form] = Form.useForm();
+  const [actionType, setActionType] = useState<string>('');
+
+  const actionTypeComponent = (type: string) => {
+    switch (type) {
+      case 'notify':
+        return <Notify />;
+      default:
+        return null;
+    }
+  };
 
   return (
-    <Modal title="类型">
-      <Form form={form}>
+    <Modal
+      title="类型"
+      open
+      width={800}
+      onCancel={() => {}}
+      onOk={async () => {
+        const values = await form.validateFields();
+        setActionType(values.type);
+      }}
+    >
+      <Form form={form} layout={'vertical'}>
         <Form.Item
           name="type"
           label="类型"
@@ -16,6 +36,7 @@ export default () => {
           <ActionsType />
         </Form.Item>
       </Form>
+      {actionTypeComponent(actionType)}
     </Modal>
   );
 };

src/pages/rule-engine/Scene/Save/action/notify/index.tsx

@@ -0,0 +1,65 @@
+import { observe } from '@formily/reactive';
+import { Modal, Button, Steps } from 'antd';
+import { useState } from 'react';
+
+// const NotifyeModel = model<{
+//   steps: <{title: string, content: ReactNode}>[]
+// }>({
+//   current: {}
+// });
+
+export default observe(() => {
+  const [current, setCurrent] = useState(0);
+  const steps = [
+    {
+      title: '通知方式',
+      content: 'First-content',
+    },
+    {
+      title: '通知配置',
+      content: 'Second-content',
+    },
+    {
+      title: '通知模板',
+      content: 'Last-content',
+    },
+  ];
+  const next = () => {
+    setCurrent(current + 1);
+  };
+
+  const prev = () => {
+    setCurrent(current - 1);
+  };
+  const items = steps.map((item) => ({ key: item.title, title: item.title }));
+
+  return (
+    <Modal
+      title={'执行动作'}
+      open
+      width={1000}
+      footer={
+        <div className="steps-action">
+          {current < steps.length - 1 && (
+            <Button type="primary" onClick={() => next()}>
+              Next
+            </Button>
+          )}
+          {current === steps.length - 1 && (
+            <Button type="primary" onClick={() => {}}>
+              Done
+            </Button>
+          )}
+          {current > 0 && (
+            <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
+              Previous
+            </Button>
+          )}
+        </div>
+      }
+    >
+      <Steps current={current} items={items} />
+      <div className="steps-content">{steps[current].content}</div>
+    </Modal>
+  );
+});

src/pages/rule-engine/Scene/Save/components/TriggerWay/actionsType.tsx

@@ -20,13 +20,33 @@ const TypeList = [
   {
     label: '设备输出',
     value: 'device',
-    image: '',
+    image: require('/public/images/scene/device-type.png'),
     tip: '配置设备调用功能、读取属性、设置属性规则',
   },
-  { label: '消息通知', value: 'notify', image: '', tip: '' },
-  { label: '延迟执行', value: 'delay', image: '', tip: '' },
-  { label: '触发告警', value: 'trigger', image: '', tip: '' },
-  { label: '解除告警', value: 'relieve', image: '', tip: '' },
+  {
+    label: '消息通知',
+    value: 'notify',
+    image: require('/public/images/scene/message-type.png'),
+    tip: '配置向指定用户发邮件、钉钉、微信、短信等通知',
+  },
+  {
+    label: '延迟执行',
+    value: 'delay',
+    image: require('/public/images/scene/delay-type.png'),
+    tip: '等待一段时间后，再执行后续动作',
+  },
+  {
+    label: '触发告警',
+    value: 'trigger',
+    image: require('/public/images/scene/trigger-type.png'),
+    tip: '配置触发告警规则，需配合“告警配置”使用',
+  },
+  {
+    label: '解除告警',
+    value: 'relieve',
+    image: require('/public/images/scene/cancel-type.png'),
+    tip: '配置解除告警规则，需配合“告警配置”使用',
+  },
 ];
 
 export default (props: ActionsTypeProps) => {
@@ -50,6 +70,7 @@ export default (props: ActionsTypeProps) => {
     <div className={classNames('trigger-way-warp', props.className, { disabled: props.disabled })}>
       {TypeList.map((item) => (
         <div
+          key={item.value}
           className={classNames('trigger-way-item', {
             active: type === item.value,
           })}

src/pages/rule-engine/Scene/Save/components/TriggerWay/index.less

@@ -2,13 +2,15 @@
 
 .trigger-way-warp {
   display: flex;
-  gap: 24px;
+  flex-wrap: wrap;
+  gap: 8px;
   width: 100%;
 
   .trigger-way-item {
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    width: 237px;
+    //width: 100%;
     padding: 16px;
     border: 1px solid #e0e4e8;
     border-radius: 2px;

src/pages/rule-engine/Scene/Save/timer/index.tsx

@@ -1,6 +1,7 @@
 import { AddButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
 import { useState } from 'react';
 import TimerTrigger from './TimerTrigger';
+import Action from '../action';
 
 export default () => {
   const [visible, setVisible] = useState<boolean>(false);
@@ -15,7 +16,9 @@ export default () => {
       >
         <AddButton>点击配置定时触发规则</AddButton>
       </div>
-      <div>执行动作</div>
+      <div>
+        <Action />
+      </div>
       {visible && (
         <TimerTrigger
           data={{}}