100011797 3 роки тому
батько
коміт
a30149d595

+ 4 - 4
src/components/ProTableCard/CardItems/scene.tsx

@@ -45,10 +45,10 @@ export default (props: DeviceCardProps) => {
               <label>触发方式</label>
               <Ellipsis title={TriggerWayType[props.triggerType]} />
             </div>
-            <div>
-              <label>说明</label>
-              <Ellipsis title={props.description} />
-            </div>
+            {/*<div>*/}
+            {/*  <label>说明</label>*/}
+            {/*  <Ellipsis title={props.description} />*/}
+            {/*</div>*/}
           </div>
         </div>
       </div>

+ 1 - 0
src/pages/rule-engine/Scene/Save/components/Buttons/index.less

@@ -1,6 +1,7 @@
 .rule-button-warp {
   padding: 8px;
   background-color: #fafafa;
+  cursor: pointer;
 
   .rule-button {
     padding: 6px 20px;

+ 3 - 0
src/pages/rule-engine/Scene/Save/device/index.tsx

@@ -0,0 +1,3 @@
+export default () => {
+  return <div>设备触发</div>;
+};

+ 52 - 64
src/pages/rule-engine/Scene/Save/index.tsx

@@ -1,70 +1,58 @@
-import { Modal } from '@/components';
-import { Form, Input } from 'antd';
-import TriggerWay from '@/pages/rule-engine/Scene/Save/components/TriggerWay';
-import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
-import { useEffect } from 'react';
-import { getMenuPathByCode } from '@/utils/menu';
-import useHistory from '@/hooks/route/useHistory';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Button, Card, Form, Input } from 'antd';
+import useLocation from '@/hooks/route/useLocation';
+import Device from '../Save/device/index';
+import Manual from '../Save/manual/index';
+import Timer from '../Save/timer/index';
+import { TitleComponent } from '@/components';
 
-interface Props {
-  close: () => void;
-  data: Partial<SceneItem>;
-}
+export default () => {
+  const location = useLocation();
+  const triggerType = location?.query?.triggerType || '';
 
-export default (props: Props) => {
-  const [form] = Form.useForm();
-  const history = useHistory();
-
-  useEffect(() => {
-    form.setFieldsValue({
-      ...props.data,
-    });
-  }, [props.data]);
+  const triggerRender = (type: string) => {
+    switch (type) {
+      case 'device':
+        return (
+          <Form.Item label={<TitleComponent style={{ fontSize: 14 }} data={'设备触发'} />}>
+            <Device />
+          </Form.Item>
+        );
+      case 'manual':
+        return (
+          <Form.Item label={<TitleComponent style={{ fontSize: 14 }} data={'手动触发'} />}>
+            <Manual />
+          </Form.Item>
+        );
+      case 'timer':
+        return (
+          <Form.Item label={<TitleComponent style={{ fontSize: 14 }} data={'定时触发'} />}>
+            <Timer />
+          </Form.Item>
+        );
+      default:
+        return null;
+    }
+  };
 
   return (
-    <Modal
-      title={props.data?.id ? '编辑' : '新增'}
-      maskClosable={false}
-      visible
-      onCancel={() => {
-        props.close();
-      }}
-      onOk={async () => {
-        const values = await form.validateFields();
-        props.close();
-        const url = getMenuPathByCode('rule-engine/Scene/Detail');
-        history.push(`${url}?type=${values.trigger?.type}`);
-      }}
-      width={700}
-    >
-      <Form name="scene-save" layout={'vertical'} form={form} autoComplete="off">
-        <Form.Item
-          name={'name'}
-          label={'名称'}
-          rules={[
-            { required: true, message: '请输入名称' },
-            {
-              max: 64,
-              message: '最多输入64个字符',
-            },
-          ]}
-        >
-          <Input placeholder={'请输入名称'} />
-        </Form.Item>
-        <Form.Item
-          label={'触发方式'}
-          name={['trigger', 'type']}
-          rules={[{ required: true, message: '请选择触发方式' }]}
-          initialValue={'device'}
-        >
-          <TriggerWay
-            // onSelect={(val) => {
-            //   // console.log(val);
-            // }}
-            disabled={!!props.data?.id}
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
+    <PageContainer>
+      <Card>
+        <Form name="timer" layout={'vertical'}>
+          {triggerRender(triggerType)}
+          <Form.Item
+            label={<TitleComponent style={{ fontSize: 14 }} data={'说明'} />}
+            name="description"
+          >
+            <Input.TextArea showCount maxLength={200} placeholder={'请输入说明'} rows={4} />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </PageContainer>
   );
 };

+ 3 - 0
src/pages/rule-engine/Scene/Save/manual/index.tsx

@@ -0,0 +1,3 @@
+export default () => {
+  return <div>手动</div>;
+};

+ 70 - 0
src/pages/rule-engine/Scene/Save/save.tsx

@@ -0,0 +1,70 @@
+import { Modal } from '@/components';
+import { Form, Input } from 'antd';
+import TriggerWay from '@/pages/rule-engine/Scene/Save/components/TriggerWay';
+import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
+import { useEffect } from 'react';
+import { getMenuPathByCode } from '@/utils/menu';
+import useHistory from '@/hooks/route/useHistory';
+
+interface Props {
+  close: () => void;
+  data: Partial<SceneItem>;
+}
+
+export default (props: Props) => {
+  const [form] = Form.useForm();
+  const history = useHistory();
+
+  useEffect(() => {
+    form.setFieldsValue({
+      ...props.data,
+    });
+  }, [props.data]);
+
+  return (
+    <Modal
+      title={props.data?.id ? '编辑' : '新增'}
+      maskClosable={false}
+      visible
+      onCancel={() => {
+        props.close();
+      }}
+      onOk={async () => {
+        const values = await form.validateFields();
+        props.close();
+        const url = getMenuPathByCode('rule-engine/Scene/Save');
+        history.push(`${url}?triggerType=${values.trigger?.type}`);
+      }}
+      width={700}
+    >
+      <Form name="scene-save" layout={'vertical'} form={form} autoComplete="off">
+        <Form.Item
+          name={'name'}
+          label={'名称'}
+          rules={[
+            { required: true, message: '请输入名称' },
+            {
+              max: 64,
+              message: '最多输入64个字符',
+            },
+          ]}
+        >
+          <Input placeholder={'请输入名称'} />
+        </Form.Item>
+        <Form.Item
+          label={'触发方式'}
+          name={['trigger', 'type']}
+          rules={[{ required: true, message: '请选择触发方式' }]}
+          initialValue={'device'}
+        >
+          <TriggerWay
+            // onSelect={(val) => {
+            //   // console.log(val);
+            // }}
+            disabled={!!props.data?.id}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};

+ 28 - 0
src/pages/rule-engine/Scene/Save/timer/TimerTrigger/index.tsx

@@ -0,0 +1,28 @@
+import { SceneItem } from '@/pages/rule-engine/Scene/typings';
+import { Modal } from 'antd';
+
+interface Props {
+  close: () => void;
+  data: Partial<SceneItem>;
+  save: (data: any) => void;
+}
+
+export default (props: Props) => {
+  return (
+    <Modal
+      title={'定时触发'}
+      maskClosable={false}
+      visible
+      onCancel={() => {
+        props.close();
+      }}
+      onOk={async () => {
+        // const values = await form.validateFields();
+        // props.close();
+      }}
+      width={700}
+    >
+      123
+    </Modal>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { AddButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
+import { useState } from 'react';
+import TimerTrigger from './TimerTrigger';
+
+export default () => {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  return (
+    <div style={{ marginLeft: 40 }}>
+      <div
+        style={{ width: 200 }}
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        <AddButton>点击配置定时触发规则</AddButton>
+      </div>
+      <div>执行动作</div>
+      {visible && (
+        <TimerTrigger
+          data={{}}
+          save={(data: any) => {
+            console.log(data);
+          }}
+          close={() => {
+            setVisible(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};

+ 1 - 1
src/pages/rule-engine/Scene/index.tsx

@@ -20,7 +20,7 @@ import { getMenuPathByCode } from '@/utils/menu';
 import { StatusColorEnum } from '@/components/BadgeStatus';
 import { onlyMessage } from '@/utils/util';
 import useHistory from '@/hooks/route/useHistory';
-import Save from './Save';
+import Save from './Save/save';
 
 export const service = new Service('scene');
 

+ 1 - 1
src/utils/menu/index.ts

@@ -10,7 +10,7 @@ export const MENUS_BUTTONS_CACHE = 'MENUS_BUTTONS_CACHE';
 
 const DetailCode = 'detail';
 
-// 额外子级路由
+// 额外子级路由F
 const extraRouteObj = {
   notice: {
     children: [