feat(场景联动): 添加用户

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

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from 'react';
+import { DatePicker, Input, InputNumber, Select, TreeSelect } from 'antd';
+import type { FormInstance } from 'antd';
+import { InputFile, ItemGroup } from '@/pages/rule-engine/Scene/Save/components';
+import { TriggerWayType } from '@/pages/rule-engine/Scene/Save/components/TriggerWay';
+
+type ChangeType = {
+  source?: string;
+  value?: string;
+  upperKey?: string;
+};
+
+interface VariableItemProps {
+  data?: any;
+  value?: any;
+  notifyType?: string;
+  form: FormInstance;
+  onChange?: (value: ChangeType) => void;
+}
+
+const BuiltInSelectOptions = {
+  [TriggerWayType.timing]: [
+    { label: '设备名称', value: 'device-name' },
+    { label: '设备ID', value: 'device-id' },
+    { label: '产品名称', value: 'product-name' },
+    { label: '产品ID', value: 'product-id' },
+    { label: '系统时间', value: 'device-name' },
+    { label: '设备名称', value: 'device-name' },
+  ],
+  [TriggerWayType.manual]: [],
+  [TriggerWayType.device]: [],
+};
+
+export default (props: VariableItemProps) => {
+  const [value, setValue] = useState<ChangeType | undefined>(props.value);
+  const [type, setType] = useState('');
+
+  const [triggerType, setTriggerType] = useState('');
+
+  const getTrigger = () => {
+    const { trigger } = props.form.getFieldsValue([['trigger', 'type']]);
+    if (trigger) {
+      setTriggerType(trigger.type);
+    }
+  };
+
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+
+  useEffect(() => {
+    setType(props.data.expands ? props.data.expands.businessType : props.data.type);
+  }, []);
+
+  const itemOnChange = useCallback(
+    (val: any) => {
+      setValue({
+        source: value?.source,
+        value: val,
+      });
+      if (props.onChange) {
+        props.onChange({
+          source: value?.source,
+          value: val,
+        });
+      }
+    },
+    [props.onChange, value],
+  );
+
+  const inputNodeByType = useCallback(
+    (data: any) => {
+      const _type = data.expands ? data.expands.businessType : data.type;
+      switch (_type) {
+        case 'enum':
+          return (
+            <Select
+              placeholder={`请选择${data.name}`}
+              style={{ width: '100%' }}
+              onChange={itemOnChange}
+            />
+          );
+        case 'date':
+          // @ts-ignore
+          return (
+            <DatePicker
+              style={{ width: '100%' }}
+              format={data.format || 'YYYY-MM-DD HH:mm:ss'}
+              onChange={(date) => {
+                itemOnChange(date?.format(data.format || 'YYYY-MM-DD HH:mm:ss'));
+              }}
+            />
+          );
+        case 'number':
+          return (
+            <InputNumber
+              placeholder={`请输入${data.name}`}
+              style={{ width: '100%' }}
+              onChange={itemOnChange}
+            />
+          );
+        case 'file':
+          return <InputFile onChange={itemOnChange} />;
+        case 'org':
+          return <TreeSelect onChange={itemOnChange} />;
+        case 'user':
+          return <Select onChange={itemOnChange} />;
+        default:
+          return (
+            <Input
+              placeholder={`请输入${data.name}`}
+              onChange={(e) => itemOnChange(e.target.value)}
+            />
+          );
+      }
+    },
+    [props.onChange],
+  );
+
+  const addonBefore = useCallback(
+    (_type: string) => {
+      switch (_type) {
+        case 'org':
+          return null;
+        case 'user':
+          const options = [
+            { label: '平台用户', value: 'fixed' },
+            { label: props.notifyType === 'dingTalk' ? '钉钉用户' : '微信用户', value: 'relation' },
+          ];
+          return <Select value={value && value.source} options={options} style={{ width: 120 }} />;
+        default:
+          return (
+            <Select
+              value={value && value.source}
+              options={[
+                { label: '手动输入', value: 'fixed' },
+                { label: '内置参数', value: 'upper' },
+              ]}
+              style={{ width: 120 }}
+              onChange={(key) => {
+                if (key === 'upper') {
+                  getTrigger();
+                }
+                if (props.onChange) {
+                  props.onChange({ source: key, value: undefined });
+                }
+                setValue({ source: key, value: undefined });
+              }}
+            />
+          );
+      }
+    },
+    [props.onChange, value, props.notifyType],
+  );
+
+  return (
+    <ItemGroup>
+      {addonBefore(type)}
+      {value && value.source === 'upper' ? (
+        <Select
+          value={value.upperKey}
+          options={BuiltInSelectOptions[triggerType] || []}
+          style={{ width: '100%' }}
+          onChange={(key) => {
+            if (props.onChange) {
+              props.onChange({ source: value.source, value: undefined, upperKey: key });
+            }
+          }}
+        />
+      ) : (
+        <div> {inputNodeByType(props.data)} </div>
+      )}
+    </ItemGroup>
+  );
+};

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

@@ -21,6 +21,7 @@ interface ActionProps {
 const ActionItem = (props: ActionProps) => {
   const { name } = props;
   const [type1, setType1] = useState('');
+  const [notifyType, setNotifyType] = useState('');
   const [templateData, setTemplateData] = useState<any>(undefined);
 
   const { data: messageType, run: queryMessageTypes } = useRequest(queryMessageType, {
@@ -56,6 +57,7 @@ const ActionItem = (props: ActionProps) => {
           style={{ width: 140 }}
           onChange={async (key: string) => {
             setTemplateData(undefined);
+            setNotifyType(key);
             props.form.resetFields([['actions', name, 'notify', 'notifierId']]);
             props.form.resetFields([['actions', name, 'notify', 'templateId']]);
             await queryMessageConfigs({
@@ -170,7 +172,12 @@ const ActionItem = (props: ActionProps) => {
         )}
       </div>
       {type1 === 'message' && templateData ? (
-        <MessageContent form={props.form} template={templateData} name={props.name} />
+        <MessageContent
+          form={props.form}
+          template={templateData}
+          name={props.name}
+          notifyType={notifyType}
+        />
       ) : null}
     </div>
   );

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

@@ -1,66 +1,17 @@
-import { Col, Form, Row, Select, Input, DatePicker, InputNumber } from 'antd';
+import { Col, Form, Row } from 'antd';
 import type { FormInstance } from 'antd';
-import { ItemGroup, InputFile } from '@/pages/rule-engine/Scene/Save/components';
-import { useEffect, useState } from 'react';
-import { TriggerWayType } from '@/pages/rule-engine/Scene/Save/components/TriggerWay';
+import VarItem from './VariableItem';
 
 interface MessageContentProps {
   name: number;
   template?: any;
   form: FormInstance;
+  notifyType: string;
 }
 
 const rowGutter = 12;
 
-const BuiltInSelectOptions = {
-  [TriggerWayType.timing]: [
-    { label: '设备名称', value: 'device-name' },
-    { label: '设备ID', value: 'device-id' },
-    { label: '产品名称', value: 'product-name' },
-    { label: '产品ID', value: 'product-id' },
-    { label: '系统时间', value: 'device-name' },
-    { label: '设备名称', value: 'device-name' },
-  ],
-  [TriggerWayType.manual]: [],
-  [TriggerWayType.device]: [],
-};
-
 export default (props: MessageContentProps) => {
-  const [triggerType, setTriggerType] = useState('');
-
-  useEffect(() => {
-    const trigger = props.form.getFieldsValue([['trigger', 'type']]);
-    if (trigger) {
-      setTriggerType(trigger.type);
-    }
-  }, []);
-
-  // const inputNodeByType = useCallback((data: any) => {
-  //   const { actions } = props.form.getFieldsValue([['actions',props.name, 'notify']])
-  //   console.log(actions);
-  //   if (actions && actions[props.name].notify && actions[props.name].notify.variables) {
-  //     const type = actions[props.name].notify.variables[data.id].type
-  //
-  //     if (type === 2) {
-  //       return <Select options={BuiltInSelectOptions[triggerType] || []} style={{ width: '100%'}} />
-  //     }
-  //   }
-  //
-  //   switch (data.type) {
-  //     case 'enum':
-  //       return <Select placeholder={`请选择${data.name}`} style={{ width: '100%' }} />;
-  //     case 'date':
-  //       // @ts-ignore
-  //       return <DatePicker style={{ width: '100%' }} format={data.format || 'YYYY-MM-DD HH:mm:ss'} />;
-  //     case 'number':
-  //       return <InputNumber placeholder={`请输入${data.name}`} style={{ width: '100%' }} />;
-  //     case 'file':
-  //       return <InputFile />;
-  //     default:
-  //       return <Input placeholder={`请输入${data.name}`} />;
-  //   }
-  // }, [triggerType]);
-
   return (
     <>
       {props.template && (
@@ -70,87 +21,15 @@ export default (props: MessageContentProps) => {
               {props.template.variableDefinitions.map((item: any, index: number) => {
                 return (
                   <Col span={12} key={`${item.id}_${index}`}>
-                    <Form.Item label={item.name} style={{ margin: 0 }}>
-                      <ItemGroup>
-                        <Form.Item
-                          name={[props.name, 'notify', 'variables', item.id, 'type']}
-                          initialValue={'1'}
-                        >
-                          <Select
-                            options={[
-                              { label: '手动输入', value: '1' },
-                              { label: '内置参数', value: '2' },
-                            ]}
-                            style={{ width: 120 }}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          name={[props.name, 'notify', 'variables', item.id, 'value']}
-                          shouldUpdate={(prevValues, curValues) => {
-                            const oldNotify = prevValues.actions[props.name].notify.variables;
-                            const curNotify = curValues.actions[props.name].notify.variables;
-
-                            if (oldNotify && curNotify) {
-                              if (oldNotify[item.id] && curNotify[item.id]) {
-                                return oldNotify[item.id].type !== curNotify[item.id].type;
-                              }
-                            }
-                            return false;
-                          }}
-                        >
-                          {() => {
-                            const { actions } = props.form.getFieldsValue([
-                              ['actions', props.name, 'notify'],
-                            ]);
-                            console.log(actions);
-                            if (
-                              actions &&
-                              actions[props.name].notify &&
-                              actions[props.name].notify.variables
-                            ) {
-                              const type = actions[props.name].notify.variables[item.id].type;
-
-                              if (type === 2) {
-                                return (
-                                  <Select
-                                    options={BuiltInSelectOptions[triggerType] || []}
-                                    style={{ width: '100%' }}
-                                  />
-                                );
-                              }
-                            }
-
-                            switch (item.type) {
-                              case 'enum':
-                                return (
-                                  <Select
-                                    placeholder={`请选择${item.name}`}
-                                    style={{ width: '100%' }}
-                                  />
-                                );
-                              case 'date':
-                                return (
-                                  // @ts-ignore
-                                  <DatePicker
-                                    style={{ width: '100%' }}
-                                    format={item.format || 'YYYY-MM-DD HH:mm:ss'}
-                                  />
-                                );
-                              case 'number':
-                                return (
-                                  <InputNumber
-                                    placeholder={`请输入${item.name}`}
-                                    style={{ width: '100%' }}
-                                  />
-                                );
-                              case 'file':
-                                return <InputFile />;
-                              default:
-                                return <Input placeholder={`请输入${item.name}`} />;
-                            }
-                          }}
-                        </Form.Item>
-                      </ItemGroup>
+                    <Form.Item
+                      name={[props.name, 'notify', 'variables', item.id]}
+                      label={item.name}
+                      initialValue={{
+                        source: 'fixed',
+                        value: undefined,
+                      }}
+                    >
+                      <VarItem form={props.form} data={item} notifyType={props.notifyType} />
                     </Form.Item>
                   </Col>
                 );