feat: 优化场景联动

src/pages/home/index.tsx

@@ -5,11 +5,13 @@ import Device from './device';
 import Init from './init';
 import Ops from './ops';
 import Service from './service';
+import { Skeleton } from 'antd';
 
 export const service = new Service();
 const Home = () => {
   type ViewType = keyof typeof ViewMap;
   const [current, setCurrent] = useState<ViewType>('init'); // 默认为初始化
+  const [loading, setLoading] = useState(true);
 
   const ViewMap = {
     init: <Init changeView={(value: ViewType) => setCurrent(value)} />,
@@ -20,6 +22,7 @@ const Home = () => {
 
   useEffect(() => {
     service.queryView().then((resp) => {
+      setLoading(false);
       if (resp.status === 200) {
         if (resp.result.length == 0) {
           setCurrent('init');
@@ -29,6 +32,12 @@ const Home = () => {
       }
     });
   }, []);
-  return <PageContainer>{ViewMap[current]}</PageContainer>;
+  return (
+    <PageContainer>
+      <Skeleton loading={loading} active>
+        {ViewMap[current]}
+      </Skeleton>
+    </PageContainer>
+  );
 };
 export default Home;

src/pages/media/Device/Save/index.tsx

@@ -52,6 +52,7 @@ const Save = () => {
           const _accessType = res.result?.provider || DefaultAccessType;
           setAccessType(_accessType);
           queryProduct(_accessType);
+          setOldPassword(res.result.password);
         }
       });
     } else {
@@ -67,9 +68,9 @@ const Save = () => {
     const formData = await form.validateFields();
     if (formData) {
       const { provider, ...extraFormData } = formData;
-      if (formData.password === oldPassword) {
-        delete extraFormData.password;
-      }
+      // if (formData.password === oldPassword) {
+      //   delete extraFormData.password;
+      // }
       const resp =
         provider === DefaultAccessType
           ? await service.saveGB(extraFormData)
@@ -221,7 +222,6 @@ const Save = () => {
                             form.setFieldsValue({
                               password: pwd,
                             });
-                            setOldPassword(pwd);
                           }}
                         />
                       </Form.Item>

src/pages/rule-engine/Scene/Save/action/VariableItems/builtIn.tsx

@@ -3,9 +3,10 @@ import { useCallback, useEffect, useState } from 'react';
 import type { FormInstance } from 'antd';
 import { queryBuiltInParams } from '@/pages/rule-engine/Scene/Save/action/service';
 import { ItemGroup } from '@/pages/rule-engine/Scene/Save/components';
-import moment from 'moment';
 import { BuiltInParamsHandleTreeData } from '@/pages/rule-engine/Scene/Save/components/BuiltInParams';
 
+import moment from 'moment';
+
 type ChangeType = {
   source?: string;
   value?: string;
@@ -45,7 +46,8 @@ export default (props: BuiltInProps) => {
             const actionParams = res.result.filter(
               (item: any) => item.id === `action_${props.name}`,
             );
-            setBuiltInList(BuiltInParamsHandleTreeData(actionParams));
+            const _data = props.name === 0 ? res.result : BuiltInParamsHandleTreeData(actionParams);
+            setBuiltInList(_data);
           }
         });
       } else {

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

@@ -123,6 +123,11 @@ export default observer((props: ActionProps) => {
       if (data.executor) {
         setType1(data.executor);
       }
+      console.log(data.terms);
+      if (data.terms) {
+        // 显示过滤条件
+        setIsFiltering(true);
+      }
 
       if (data.notify) {
         // 消息通知
@@ -207,15 +212,14 @@ export default observer((props: ActionProps) => {
   const parallelNode = (
     <Col span={2}>
       {!props.parallel ? (
-        <Form.Item noStyle>
-          <Checkbox
-            onChange={(e) => {
-              setIsFiltering(e.target.checked);
-            }}
-          >
-            条件过滤
-          </Checkbox>
-        </Form.Item>
+        <Checkbox
+          checked={isFiltering}
+          onChange={(e) => {
+            setIsFiltering(e.target.checked);
+          }}
+        >
+          条件过滤
+        </Checkbox>
       ) : null}
     </Col>
   );
@@ -330,7 +334,11 @@ export default observer((props: ActionProps) => {
           </Row>
           {!props.parallel && isFiltering && (
             <Row gutter={24}>
-              <ConditionalFiltering name={name} form={props.form} />
+              <ConditionalFiltering
+                name={name}
+                form={props.form}
+                data={props.actionItemData.terms}
+              />
             </Row>
           )}
         </>
@@ -338,22 +346,28 @@ export default observer((props: ActionProps) => {
       {type1 === 'device' &&
       deviceMessageType === MessageTypeEnum.READ_PROPERTY &&
       properties.length ? (
-        <Row gutter={24}>
-          <Col span={4}>
-            <Form.Item
-              name={[name, 'device', 'message', 'properties']}
-              rules={[{ required: true, message: '请选择属性' }]}
-            >
-              <ReadProperty properties={properties} />
-            </Form.Item>
-          </Col>
-          {parallelNode}
+        <>
+          <Row gutter={24}>
+            <Col span={4}>
+              <Form.Item
+                name={[name, 'device', 'message', 'properties']}
+                rules={[{ required: true, message: '请选择属性' }]}
+              >
+                <ReadProperty properties={properties} />
+              </Form.Item>
+            </Col>
+            {parallelNode}
+          </Row>
           {!props.parallel && isFiltering && (
             <Row gutter={24}>
-              <ConditionalFiltering name={name} form={props.form} />
+              <ConditionalFiltering
+                name={name}
+                form={props.form}
+                data={props.actionItemData.terms}
+              />
             </Row>
           )}
-        </Row>
+        </>
       ) : null}
       {type1 === 'device' &&
       deviceMessageType === MessageTypeEnum.INVOKE_FUNCTION &&
@@ -367,7 +381,7 @@ export default observer((props: ActionProps) => {
           </Form.Item>
           <Row gutter={24}>
             {parallelNode}
-            <ConditionalFiltering name={name} form={props.form} />
+            <ConditionalFiltering name={name} form={props.form} data={props.actionItemData.terms} />
           </Row>
         </>
       ) : null}

src/pages/rule-engine/Scene/Save/action/device/ConditionalFiltering.tsx

@@ -7,6 +7,7 @@ import { queryBuiltInParams } from '@/pages/rule-engine/Scene/Save/action/servic
 interface ConditionalFilteringProps {
   name: number;
   form: FormInstance;
+  data?: any;
 }
 
 export default (props: ConditionalFilteringProps) => {
@@ -106,10 +107,16 @@ export default (props: ConditionalFilteringProps) => {
     });
   }, []);
 
+  useEffect(() => {
+    console.log('Conditional', builtInList);
+    if (props.data[0] && props.data[0].column && builtInList && builtInList.length) {
+      getBuiltItemById(props.data[0].column);
+    }
+  }, [props.data, builtInList]);
   return (
     <>
       <Col span={4}>
-        <Form.Item name={[props.name, 'terms[0].column']}>
+        <Form.Item name={[props.name, 'terms', 0, 'column']}>
           <TreeSelect
             placeholder={'请选择参数'}
             fieldNames={{
@@ -117,15 +124,35 @@ export default (props: ConditionalFilteringProps) => {
               label: 'name',
             }}
             treeData={builtInList}
-            onSelect={(v: any) => {
-              getBuiltItemById(v);
-              props.form.resetFields([props.name, 'terms[0].termType']);
+            onSelect={() => {
+              props.form.setFields([
+                {
+                  name: [props.name, 'terms', 0, 'termType'],
+                  value: undefined,
+                },
+                {
+                  name: [props.name, 'terms', 0, 'value', 'source'],
+                  value: 'fixed',
+                },
+                {
+                  name: [props.name, 'terms', 0, 'value', 'value'],
+                  value: undefined,
+                },
+                {
+                  name: [props.name, 'terms', 0, 'value', 'value', 0],
+                  value: undefined,
+                },
+                {
+                  name: [props.name, 'terms', 0, 'value', 'value', 1],
+                  value: undefined,
+                },
+              ]);
             }}
           />
         </Form.Item>
       </Col>
       <Col span={2}>
-        <Form.Item name={[props.name, 'terms[0].termType']}>
+        <Form.Item name={[props.name, 'terms', 0, 'termType']}>
           <Select
             style={{ width: '100%' }}
             options={termTypes}
@@ -137,7 +164,7 @@ export default (props: ConditionalFilteringProps) => {
       <Col span={7}>
         <Form.Item noStyle>
           <ItemGroup>
-            <Form.Item name={[props.name, 'terms[0].value.source']}>
+            <Form.Item name={[props.name, 'terms', 0, 'value', 'source']} initialValue={'fixed'}>
               <Select
                 options={[
                   { label: '手动输入', value: 'fixed' },
@@ -149,21 +176,48 @@ export default (props: ConditionalFilteringProps) => {
                 }}
               />
             </Form.Item>
-            <Form.Item name={[props.name, 'terms[0].value.value[0]']}>
-              {source === 'fixed' ? (
-                valueTypeMap(type)
-              ) : (
-                <TreeSelect
-                  placeholder={'请选择参数'}
-                  fieldNames={{ value: 'id', label: 'name' }}
-                  treeData={builtInList}
-                />
-              )}
-            </Form.Item>
+            {['nbtw', 'btw'].includes(props.data[0] && props.data[0].termType) ? (
+              <>
+                <Form.Item name={[props.name, 'terms', 0, 'value', 'value', 0]}>
+                  {source === 'fixed' ? (
+                    valueTypeMap(type)
+                  ) : (
+                    <TreeSelect
+                      placeholder={'请选择参数'}
+                      fieldNames={{ value: 'id', label: 'name' }}
+                      treeData={builtInList}
+                    />
+                  )}
+                </Form.Item>
+                <Form.Item name={[props.name, 'terms', 0, 'value', 'value', 1]}>
+                  {source === 'fixed' ? (
+                    valueTypeMap(type)
+                  ) : (
+                    <TreeSelect
+                      placeholder={'请选择参数'}
+                      fieldNames={{ value: 'id', label: 'name' }}
+                      treeData={builtInList}
+                    />
+                  )}
+                </Form.Item>
+              </>
+            ) : (
+              <Form.Item name={[props.name, 'terms', 0, 'value', 'value']}>
+                {source === 'fixed' ? (
+                  valueTypeMap(type)
+                ) : (
+                  <TreeSelect
+                    placeholder={'请选择参数'}
+                    fieldNames={{ value: 'id', label: 'name' }}
+                    treeData={builtInList}
+                  />
+                )}
+              </Form.Item>
+            )}
           </ItemGroup>
         </Form.Item>
       </Col>
-      <Col span={1}>不执行后续动作</Col>
+      <Col>不执行后续动作</Col>
     </>
   );
 };

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

@@ -47,20 +47,35 @@ export default (props: WritePropertyProps) => {
     return [];
   };
 
+  const onChange = (key?: string, value?: any, _source: string = 'fixed') => {
+    if (props.onChange) {
+      props.onChange({
+        [key || 0]: {
+          value,
+          source: _source,
+        },
+      });
+    }
+  };
+
   useEffect(() => {
     if (source === 'upper') {
+      onChange(propertiesKey, undefined, source);
       if (props.parallel === false) {
-        const data = props.form.getFieldsValue();
+        // 串行
         const params = props.name - 1 >= 0 ? { action: props.name - 1 } : undefined;
+        const data = props.form.getFieldsValue();
         queryBuiltInParams(data, params).then((res: any) => {
           if (res.status === 200) {
             const actionParams = res.result.filter(
               (item: any) => item.id === `action_${props.name}`,
             );
-            setBuiltInList(handleTreeData(actionParams));
+            const _data = props.name === 0 ? res.result : handleTreeData(actionParams);
+            setBuiltInList(_data);
           }
         });
       } else {
+        // 并行
         queryBuiltInParams({
           trigger: { type: props.type },
         }).then((res: any) => {
@@ -73,14 +88,14 @@ export default (props: WritePropertyProps) => {
   }, [source, props.type, props.parallel]);
 
   useEffect(() => {
-    console.log('writeProperty', props.value);
     if (props.value && props.properties && props.properties.length) {
       if (0 in props.value) {
         setPropertiesValue(props.value[0]);
       } else {
         Object.keys(props.value).forEach((key: string) => {
           setPropertiesKey(key);
-          setPropertiesValue(props.value[key]);
+          setPropertiesValue(props.value[key].value);
+          setSource(props.value[key].source);
           const propertiesItem = props.properties.find((item: any) => item.id === key);
           if (propertiesItem) {
             setPropertiesType(propertiesItem.valueType.type);
@@ -90,14 +105,6 @@ export default (props: WritePropertyProps) => {
     }
   }, [props.value, props.properties]);
 
-  const onChange = (key?: string, value?: any) => {
-    if (props.onChange) {
-      props.onChange({
-        [key || 0]: value,
-      });
-    }
-  };
-
   const inputNodeByType = useCallback(
     (type: string) => {
       switch (type) {
@@ -112,7 +119,7 @@ export default (props: WritePropertyProps) => {
               ]}
               placeholder={'请选择'}
               onChange={(value) => {
-                onChange(propertiesKey, value);
+                onChange(propertiesKey, value, source);
               }}
             />
           );
@@ -126,7 +133,7 @@ export default (props: WritePropertyProps) => {
               value={propertiesValue}
               placeholder={'请输入'}
               onChange={(value) => {
-                onChange(propertiesKey, value);
+                onChange(propertiesKey, value, source);
               }}
             />
           );
@@ -137,7 +144,11 @@ export default (props: WritePropertyProps) => {
               style={{ width: '100%' }}
               value={propertiesValue ? moment(propertiesValue, 'YYYY-MM-DD HH:mm:ss') : undefined}
               onChange={(date) => {
-                onChange(propertiesKey, date ? date.format('YYYY-MM-DD HH:mm:ss') : undefined);
+                onChange(
+                  propertiesKey,
+                  date ? date.format('YYYY-MM-DD HH:mm:ss') : undefined,
+                  source,
+                );
               }}
             />
           );
@@ -147,12 +158,12 @@ export default (props: WritePropertyProps) => {
               style={{ width: '100%' }}
               value={propertiesValue}
               placeholder={'请输入'}
-              onChange={(e) => onChange(propertiesKey, e.target.value)}
+              onChange={(e) => onChange(propertiesKey, e.target.value, source)}
             />
           );
       }
     },
-    [propertiesKey, propertiesValue],
+    [propertiesKey, propertiesValue, source],
   );
 
   return (
@@ -169,7 +180,7 @@ export default (props: WritePropertyProps) => {
           fieldNames={{ label: 'name', value: 'id' }}
           style={{ width: '100%' }}
           onSelect={(key: any) => {
-            onChange(key, undefined);
+            onChange(key, undefined, source);
           }}
           placeholder={'请选择属性'}
         ></Select>
@@ -185,6 +196,7 @@ export default (props: WritePropertyProps) => {
             style={{ width: 120 }}
             onChange={(key) => {
               setSource(key);
+              onChange(propertiesKey, propertiesValue, key);
             }}
           />
           {source === 'upper' ? (
@@ -197,7 +209,7 @@ export default (props: WritePropertyProps) => {
               value={propertiesValue}
               treeData={builtInList}
               onSelect={(value: any) => {
-                onChange(propertiesKey, value);
+                onChange(propertiesKey, value, source);
               }}
             />
           ) : (

src/pages/rule-engine/Scene/Save/components/TimingTrigger/RangePicker.tsx

@@ -0,0 +1,32 @@
+import { TimePicker } from 'antd';
+import moment from 'moment';
+
+type RangePickerValue = {
+  from: string;
+  to: string;
+};
+
+interface RangePickerProps {
+  value?: RangePickerValue;
+  onChange?: (value: RangePickerValue) => void;
+}
+export default (props: RangePickerProps) => {
+  return (
+    <TimePicker.RangePicker
+      style={{ width: '100%' }}
+      format={'HH:mm:ss'}
+      value={[
+        moment(props.value?.from || new Date(), 'HH:mm:ss'),
+        moment(props.value?.to || new Date(), 'hh:mm:ss'),
+      ]}
+      onChange={(_, dateString) => {
+        if (props.onChange) {
+          props.onChange({
+            from: dateString[0],
+            to: dateString[1],
+          });
+        }
+      }}
+    />
+  );
+};

src/pages/rule-engine/Scene/Save/components/TimingTrigger/TimePicker.tsx

@@ -0,0 +1,27 @@
+import { TimePicker } from 'antd';
+import moment from 'moment';
+
+type TimePickerValue = {
+  time: string;
+};
+
+interface TimePickerProps {
+  value?: TimePickerValue;
+  onChange?: (value: TimePickerValue) => void;
+}
+export default (props: TimePickerProps) => {
+  return (
+    <TimePicker
+      style={{ width: '100%' }}
+      format={'HH:mm:ss'}
+      value={moment(props.value?.time || new Date(), 'HH:mm:ss')}
+      onChange={(_, dateString) => {
+        if (props.onChange) {
+          props.onChange({
+            time: dateString,
+          });
+        }
+      }}
+    />
+  );
+};

src/pages/rule-engine/Scene/Save/components/index.ts

@@ -1,5 +1,5 @@
 export { default as TimeSelect } from './TimeSelect';
-export { default as TimingTrigger } from './TimingTrigger';
+export { default as TimingTrigger } from './TimingTrigger/refactor';
 export { default as TriggerWay } from './TriggerWay';
 export { default as ItemGroup } from './ItemGroup';
 export { default as InputFile } from './InputUpload';

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

@@ -3,18 +3,22 @@
 .scene-save {
   .trigger-type-content,
   & .scene-actions {
-    padding: 24px;
+    padding: 24px 24px 0 24px;
     background-color: @bgColor;
   }
 
-  .trigger-type-content {
-    > .ant-row {
-      margin-bottom: 24px;
-
-      &:last-child,
-      &:first-child {
-        margin-bottom: 0;
-      }
-    }
+  .ant-form-item-with-help .ant-form-item-explain {
+    height: 0 !important;
   }
+
+  //.trigger-type-content {
+  //  > .ant-row {
+  //    margin-bottom: 24px;
+  //
+  //    &:last-child,
+  //    &:first-child {
+  //      margin-bottom: 0;
+  //    }
+  //  }
+  //}
 }