feat: 执行动作通知配置

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

@@ -0,0 +1,3 @@
+export default () => {
+  return <div>通知配置</div>;
+};

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

@@ -0,0 +1,3 @@
+export default () => {
+  return <div>通知模板</div>;
+};

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

@@ -0,0 +1,30 @@
+import { Form } from 'antd';
+import NotifyType from './components/notifyType';
+import { useEffect, useState } from 'react';
+import { queryMessageType } from '@/pages/rule-engine/Scene/Save/action/service';
+
+export default () => {
+  const [form] = Form.useForm();
+  const [list, setList] = useState<any[]>([]);
+
+  useEffect(() => {
+    queryMessageType().then((resp) => {
+      if (resp.status === 200) {
+        setList(resp.result);
+      }
+    });
+  }, []);
+
+  return (
+    <Form form={form} layout={'vertical'}>
+      <Form.Item
+        name="notifyType"
+        label="应用"
+        required
+        rules={[{ required: true, message: '请选择类型' }]}
+      >
+        <NotifyType options={list} />
+      </Form.Item>
+    </Form>
+  );
+};

src/pages/rule-engine/Scene/Save/action/notify/components/notifyType/index.less

@@ -0,0 +1,63 @@
+@import '~antd/es/style/themes/default.less';
+
+.trigger-way-warp {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+
+  .trigger-way-item {
+    display: flex;
+    justify-content: space-between;
+    width: 237px;
+    //width: 100%;
+    padding: 16px;
+    border: 1px solid #e0e4e8;
+    border-radius: 2px;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: all 0.3s;
+
+    .way-item-title {
+      p {
+        margin-bottom: 8px;
+        font-weight: bold;
+        font-size: 16px;
+      }
+
+      span {
+        color: rgba(#000, 0.35);
+        font-size: 12px;
+      }
+    }
+
+    .way-item-image {
+      margin: 0 !important;
+    }
+
+    &:hover {
+      color: @primary-color-hover;
+      opacity: 0.8;
+    }
+
+    &.active {
+      border-color: @primary-color-active;
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    .trigger-way-item {
+      cursor: not-allowed;
+
+      &:hover {
+        color: initial;
+        opacity: 0.6;
+      }
+
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import './index.less';
+
+interface NotifyTypeProps {
+  value?: string;
+  className?: string;
+  onChange?: (type: string) => void;
+  onSelect?: (type: string) => void;
+  disabled?: boolean;
+  options: any[];
+}
+
+export default (props: NotifyTypeProps) => {
+  const [type, setType] = useState(props.value || '');
+
+  useEffect(() => {
+    setType(props.value || '');
+  }, [props.value]);
+
+  const onSelect = (_type: string) => {
+    if (!props.disabled) {
+      setType(_type);
+
+      if (props.onChange) {
+        props.onChange(_type);
+      }
+    }
+  };
+
+  return (
+    <div className={classNames('trigger-way-warp', props.className, { disabled: props.disabled })}>
+      {(props?.options || []).map((item) => (
+        <div
+          key={item.id}
+          className={classNames('trigger-way-item', {
+            active: type === item.id,
+          })}
+          onClick={() => {
+            onSelect(item.id);
+          }}
+        >
+          <div className={'way-item-title'}>
+            <p>{item.name}</p>
+          </div>
+          <div className={'way-item-image'}>
+            <img width={48} src={item.image} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+.steps-steps {
+  width: 100%;
+  margin-bottom: 17px;
+  padding-bottom: 17px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.steps-content {
+  width: 100%;
+}

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

@@ -1,37 +1,45 @@
 import { Modal, Button, Steps } from 'antd';
-import { useState } from 'react';
+import React from 'react';
 import { observer } from '@formily/react';
+import { model } from '@formily/reactive';
+import NotifyWay from './NotifyWay';
+import NotifyConfig from './NotifyConfig';
+import NotifyTemplate from './NotifyTemplate';
+import './index.less';
+const initSteps = [
+  {
+    key: 'way',
+    title: '通知方式',
+    content: <NotifyWay />,
+  },
+  {
+    key: 'config',
+    title: '通知配置',
+    content: <NotifyConfig />,
+  },
+  {
+    key: 'template',
+    title: '通知模板',
+    content: <NotifyTemplate />,
+  },
+];
 
-// const NotifyeModel = model<{
-//   steps: <{title: string, content: ReactNode}>[]
-// }>({
-//   current: {}
-// });
+const NotifyModel = model<{
+  steps: { key: string; title: string; content: React.ReactNode }[];
+  current: number;
+}>({
+  steps: initSteps,
+  current: 0,
+});
 
 export default observer(() => {
-  const [current, setCurrent] = useState(0);
-  const steps = [
-    {
-      title: '通知方式',
-      content: 'First-content',
-    },
-    {
-      title: '通知配置',
-      content: 'Second-content',
-    },
-    {
-      title: '通知模板',
-      content: 'Last-content',
-    },
-  ];
   const next = () => {
-    setCurrent(current + 1);
+    NotifyModel.current += 1;
   };
 
   const prev = () => {
-    setCurrent(current - 1);
+    NotifyModel.current -= 1;
   };
-  const items = steps.map((item) => ({ key: item.title, title: item.title }));
 
   return (
     <Modal
@@ -40,26 +48,29 @@ export default observer(() => {
       width={1000}
       footer={
         <div className="steps-action">
-          {current < steps.length - 1 && (
+          {NotifyModel.current === 0 && <Button onClick={() => {}}>取消</Button>}
+          {NotifyModel.current < NotifyModel.steps.length - 1 && (
             <Button type="primary" onClick={() => next()}>
-              Next
+              下一步
             </Button>
           )}
-          {current === steps.length - 1 && (
+          {NotifyModel.current === NotifyModel.steps.length - 1 && (
             <Button type="primary" onClick={() => {}}>
-              Done
+              确定
             </Button>
           )}
-          {current > 0 && (
+          {NotifyModel.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>
+      <div className="steps-steps">
+        <Steps current={NotifyModel.current} items={NotifyModel.steps} />
+      </div>
+      <div className="steps-content">{NotifyModel.steps[NotifyModel.current]?.content}</div>
     </Modal>
   );
 });