feat: merge

src/components/Upload/index.tsx

@@ -13,6 +13,7 @@ interface Props {
   value: string;
   onChange: (value: string | FileProperty) => void;
   type?: 'file' | 'image';
+  placeholder: string;
 }
 
 type FileProperty = {
@@ -66,6 +67,7 @@ const FUpload = connect((props: Props) => {
     node: (
       <>
         <Input
+          placeholder={props.placeholder}
           value={(url as FileProperty)?.url}
           onClick={(e) => {
             e.preventDefault();

src/pages/notice/Config/Detail/index.tsx

@@ -4,12 +4,27 @@ import { Card, Col, Input, Row } from 'antd';
 import { ISchema } from '@formily/json-schema';
 import { useMemo } from 'react';
 import { createSchemaField } from '@formily/react';
-import { FormButtonGroup, FormItem, Select, Submit, Switch, Form } from '@formily/antd';
+import {
+  FormButtonGroup,
+  FormItem,
+  Select,
+  Submit,
+  Switch,
+  Form,
+  Radio,
+  ArrayTable,
+  Editable,
+  PreviewText,
+  Space,
+  NumberPicker,
+  Checkbox,
+} from '@formily/antd';
 import styles from './index.less';
 import { service } from '@/pages/notice/Config';
 import { useAsyncDataSource } from '@/utils/util';
 import { useParams } from 'umi';
 import { typeList } from '@/pages/notice';
+import FUpload from '@/components/Upload';
 
 const Detail = () => {
   const { id } = useParams<{ id: string }>();
@@ -45,6 +60,14 @@ const Detail = () => {
       Input,
       Select,
       Switch,
+      Radio,
+      ArrayTable,
+      Editable,
+      PreviewText,
+      Space,
+      FUpload,
+      Checkbox,
+      NumberPicker,
     },
   });
 
@@ -68,6 +91,7 @@ const Detail = () => {
         title: '分类',
         'x-component': 'Input',
         'x-value': id,
+        'x-hidden': true,
       },
       provider: {
         title: '类型',
@@ -79,6 +103,7 @@ const Detail = () => {
         },
         required: true,
         'x-visible': typeList[id]?.length > 0,
+        'x-hidden': id === 'email',
         enum: typeList[id] || [],
       },
       configuration: {
@@ -92,53 +117,109 @@ const Detail = () => {
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
                 // 企业消息
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="corpMessage"}}',
+                    },
+                  },
+                },
               },
               corpSecret: {
                 title: 'corpSecret',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
-                // 企业消息
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="corpMessage"}}',
+                    },
+                  },
+                },
               },
               AppId: {
                 title: 'appId',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
-                // 服务号
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="officialMessage"}}',
+                    },
+                  },
+                },
               },
               AppSecret: {
                 title: 'appSecret',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
-                // 服务号
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="officialMessage"}}',
+                    },
+                  },
+                },
               },
             },
+            'x-visible': id === 'weixin',
           },
           dingTalk: {
             type: 'void',
+            'x-visible': id === 'dingTalk',
             properties: {
               AppKey: {
                 title: 'AppKey',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
                 // 钉钉消息通知
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="dingTalkMessage"}}',
+                    },
+                  },
+                },
               },
               AppSecret: {
                 title: 'AppSecret',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
                 // 钉钉消息通知
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="dingTalkMessage"}}',
+                    },
+                  },
+                },
               },
               Webhook: {
                 title: 'webHook',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
                 // 群机器人
+                'x-reactions': {
+                  dependencies: ['provider'],
+                  fulfill: {
+                    state: {
+                      visible: '{{$deps[0]==="dingTalkRobotWebHook"}}',
+                    },
+                  },
+                },
               },
             },
           },
           // 阿里云语音/短信
           voiceOrSms: {
             type: 'void',
+            'x-visible': id === 'voice' || id === 'sms',
             properties: {
               RegionId: {
                 title: 'regionId',
@@ -159,21 +240,36 @@ const Detail = () => {
           },
           email: {
             type: 'void',
+            'x-visible': id === 'email',
             properties: {
-              host: {
+              space: {
                 title: '服务器地址',
-                'x-component': 'Input',
-                'x-decorator': 'FormItem',
-              },
-              port: {
-                title: '端口',
-                'x-component': 'Input',
-                'x-decorator': 'FormItem',
-              },
-              enableSSL: {
-                title: '开启SSL',
-                'x-component': 'Input',
+                type: 'void',
+                'x-component': 'Space',
                 'x-decorator': 'FormItem',
+                'x-decorator-props': {
+                  asterisk: true,
+                  feedbackLayout: 'none',
+                },
+                properties: {
+                  host: {
+                    // title: '服务器地址',
+                    'x-component': 'Input',
+                    'x-decorator': 'FormItem',
+                  },
+                  port: {
+                    // title: '端口',
+                    'x-component': 'NumberPicker',
+                    'x-decorator': 'FormItem',
+                  },
+                  enableSSL: {
+                    // title: '开启SSL',
+                    type: 'boolean',
+                    'x-component': 'Checkbox.Group',
+                    'x-decorator': 'FormItem',
+                    enum: [{ label: '开启SSL', value: true }],
+                  },
+                },
               },
               sender: {
                 title: '发件人',
@@ -194,6 +290,14 @@ const Detail = () => {
           },
         },
       },
+      description: {
+        title: '说明',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+        'x-component-props': {
+          rows: 4,
+        },
+      },
     },
   };
 

src/pages/notice/Config/index.tsx

@@ -20,6 +20,7 @@ import SearchComponent from '@/components/SearchComponent';
 import ProTable from '@jetlinks/pro-table';
 import { history } from '@@/core/history';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
+import { useLocation } from 'umi';
 
 export const service = new Service('notifier/config');
 
@@ -28,6 +29,9 @@ const Config = observer(() => {
   const actionRef = useRef<ActionType>();
   const providerRef = useRef<NetworkType[]>([]);
   const oldTypeRef = useRef();
+  const location = useLocation<{ id: string }>();
+
+  const id = (location as any).query?.id;
 
   // const [configSchema, setConfigSchema] = useState<ISchema>({});
   // const [loading, setLoading] = useState<boolean>(false);
@@ -305,11 +309,10 @@ const Config = observer(() => {
         search={false}
         params={param}
         columns={columns}
-        headerTitle={'通知模版'}
+        headerTitle={'通知配置'}
         toolBarRender={() => [
           <Button
             onClick={() => {
-              const id = (location as any).query?.id;
               history.push(getMenuPathByParams(MENUS_CODE['notice/Config/Detail'], id));
             }}
             key="button"

src/pages/notice/Template/Detail/index.tsx

@@ -14,7 +14,7 @@ import {
   Switch,
 } from '@formily/antd';
 import type { Field } from '@formily/core';
-import { createForm, onFieldValueChange } from '@formily/core';
+import { createForm, onFieldInit, onFieldValueChange } from '@formily/core';
 import { createSchemaField, observer } from '@formily/react';
 import type { ISchema } from '@formily/json-schema';
 import styles from './index.less';
@@ -25,6 +25,7 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Col, message, Row } from 'antd';
 import { typeList } from '@/pages/notice';
 import { service, state } from '@/pages/notice/Template';
+import FBraftEditor from '@/components/FBraftEditor';
 
 const Detail = observer(() => {
   const { id } = useParams<{ id: string }>();
@@ -36,8 +37,19 @@ const Detail = observer(() => {
       createForm({
         validateFirst: true,
         effects() {
+          onFieldInit('template.message', (field, form1) => {
+            if (id === 'email') {
+              field.setComponent(FBraftEditor);
+            }
+            console.log(form1);
+            ///给FBraftEditor 设置初始值
+          });
           onFieldValueChange('template.message', (field, form1) => {
-            const value = (field as Field).value;
+            let value = (field as Field).value;
+            if (id === 'email' && form1.modified) {
+              value = value?.toHTML();
+            }
+            console.log(value, 'test');
             const idList = value
               .match(pattern)
               ?.filter((i: string) => i)
@@ -98,6 +110,7 @@ const Detail = observer(() => {
       Space,
       FUpload,
       NumberPicker,
+      FBraftEditor,
     },
   });
 
@@ -128,6 +141,10 @@ const Detail = observer(() => {
           data.template.link.text = data.template.message;
       }
     }
+    if (id === 'email') {
+      data.provider = 'embedded';
+      data.template.message = data.template.message.toHTML();
+    }
 
     const response: any = await service.save(data);
 
@@ -172,6 +189,7 @@ const Detail = observer(() => {
         },
         required: true,
         'x-visible': typeList[id]?.length > 0,
+        'x-hidden': id === 'email',
         enum: typeList[id] || [],
       },
       configId: {
@@ -184,6 +202,7 @@ const Detail = observer(() => {
           { label: '测试配置2', value: 'test2' },
           { label: '测试配置3', value: 'test3' },
         ],
+        'x-visible': id !== 'email',
       },
       template: {
         type: 'object',
@@ -482,19 +501,43 @@ const Detail = observer(() => {
             // PlayTimes	String	语音-播放次数
           },
           email: {
-            type: 'object',
+            type: 'void',
             'x-visible': id === 'email',
             properties: {
               // subject	String	邮件-模板ID
               // sendTo	Array	邮件-收件人
               // sendTo	String	邮件-内容
               // attachments	String	邮件-附件信息
-
-              subject: {
-                title: '模版ID',
+              sendTo: {
+                'x-component': 'Input.TextArea',
                 'x-decorator': 'FormItem',
-                'x-component': 'Input',
+                title: '收件人',
+                'x-decorator-props': {
+                  tip: '请输入收件人邮箱,多个收件人用换行分隔',
+                },
+              },
+              // message: {
+              //   "x-component": 'FBraftEditor',
+              //   "x-decorator": 'FormItem',
+              //   title: '模版内容',
+              //   "x-decorator-props": {
+              //     tip: '请输入收件人邮箱,多个收件人用换行分隔'
+              //   },
+              // },
+              attachments: {
+                'x-component': 'FUpload',
+                'x-decorator': 'FormItem',
+                title: '附件',
+                'x-component-props': {
+                  type: 'file',
+                  placeholder: '请上传文件',
+                },
               },
+              // subject: {
+              //   title: '模版ID',
+              //   'x-decorator': 'FormItem',
+              //   'x-component': 'Input',
+              // },
             },
           },
         },
@@ -569,7 +612,7 @@ const Detail = observer(() => {
             column4: {
               type: 'void',
               'x-component': 'ArrayTable.Column',
-              'x-component-props': { title: '格式' },
+              'x-component-props': { title: '格式', width: '150px' },
               properties: {
                 format: {
                   type: 'string',

src/pages/notice/index.tsx

@@ -67,7 +67,12 @@ export const typeList = {
       value: 'aliyunSms',
     },
   ],
-  email: [],
+  email: [
+    {
+      value: 'email',
+      label: '默认',
+    },
+  ],
 };
 
 const Type = observer(() => {