From cd146583a161b2ef2f00adffffd21e0ec26963a1 Mon Sep 17 00:00:00 2001 From: JiangQiming <291854119@qq.com> Date: Mon, 16 Jan 2023 18:00:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E7=9F=A5=E6=A8=A1=E6=9D=BF?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/notice/template.ts | 12 + .../notice/Template/Detail/doc/AliyunSms.tsx | 43 ++ .../Template/Detail/doc/AliyunVoice.tsx | 43 ++ .../notice/Template/Detail/doc/DingTalk.tsx | 54 +++ .../Template/Detail/doc/DingTalkRebot.tsx | 35 ++ .../notice/Template/Detail/doc/Email.tsx | 30 ++ .../notice/Template/Detail/doc/Webhook.tsx | 18 + .../notice/Template/Detail/doc/WeixinApp.tsx | 58 +++ .../notice/Template/Detail/doc/WeixinCorp.tsx | 48 ++ .../notice/Template/Detail/doc/index.less | 39 ++ .../notice/Template/Detail/doc/index.tsx | 46 ++ src/views/notice/Template/Detail/index.vue | 431 +++++++++++++++++- src/views/notice/Template/types.d.ts | 74 +++ src/views/notice/const.ts | 68 +++ 14 files changed, 996 insertions(+), 3 deletions(-) create mode 100644 src/api/notice/template.ts create mode 100644 src/views/notice/Template/Detail/doc/AliyunSms.tsx create mode 100644 src/views/notice/Template/Detail/doc/AliyunVoice.tsx create mode 100644 src/views/notice/Template/Detail/doc/DingTalk.tsx create mode 100644 src/views/notice/Template/Detail/doc/DingTalkRebot.tsx create mode 100644 src/views/notice/Template/Detail/doc/Email.tsx create mode 100644 src/views/notice/Template/Detail/doc/Webhook.tsx create mode 100644 src/views/notice/Template/Detail/doc/WeixinApp.tsx create mode 100644 src/views/notice/Template/Detail/doc/WeixinCorp.tsx create mode 100644 src/views/notice/Template/Detail/doc/index.less create mode 100644 src/views/notice/Template/Detail/doc/index.tsx create mode 100644 src/views/notice/Template/types.d.ts diff --git a/src/api/notice/template.ts b/src/api/notice/template.ts new file mode 100644 index 00000000..b49dbd8b --- /dev/null +++ b/src/api/notice/template.ts @@ -0,0 +1,12 @@ +import { patch, post, get } from '@/utils/request' + +export default { + // 列表 + list: (data: any) => post(`/notifier/template/_query`, data), + // 详情 + detail: (id: string): any => get(`/notifier/template/${id}`), + // 新增 + save: (data: any) => post(`/notifier/template`, data), + // 修改 + update: (data: any) => patch(`/notifier/template`, data) +} \ No newline at end of file diff --git a/src/views/notice/Template/Detail/doc/AliyunSms.tsx b/src/views/notice/Template/Detail/doc/AliyunSms.tsx new file mode 100644 index 00000000..e44a7e40 --- /dev/null +++ b/src/views/notice/Template/Detail/doc/AliyunSms.tsx @@ -0,0 +1,43 @@ +import './index.less'; + +const AliyunSms = () => { + return ( +
+
+ 阿里云短信服务平台: + + https://dysms.console.aliyun.com + +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 + 使用阿里云短信时需先在阿里云短信服务平台创建短信模板。 +
+

2.模板配置说明

+ +
+

1、绑定配置

+
使用固定的通知配置发送此通知模板
+

2、模板

+
阿里云短信平台自定义的模板名称
+

3、收信人

+
+ {' '} + 当前仅支持国内手机号,此处若不填,则在模板调试和配置告警通知时手动填写 +
+

4、签名

+
用于短信内容签名信息显示,需在阿里云短信进行配置。
+

5、变量属性

+
+ 需要在当前页面手动设置与阿里云短信模板中一样的变量,否则会导致发送异常。 +
+
+
+ ); +}; +export default AliyunSms; diff --git a/src/views/notice/Template/Detail/doc/AliyunVoice.tsx b/src/views/notice/Template/Detail/doc/AliyunVoice.tsx new file mode 100644 index 00000000..0ef4ba6b --- /dev/null +++ b/src/views/notice/Template/Detail/doc/AliyunVoice.tsx @@ -0,0 +1,43 @@ +import './index.less'; + +const AliyunVoice = () => { + return ( +
+
+ 阿里云语音服务平台: + + https://account.console.aliyun.com + +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 + 使用阿里云语音时需先在阿里云语音服务平台创建语音模板。 +
+

2.模板配置说明

+
+

1、绑定配置

+
使用固定的通知配置发送此通知模板
+

2、类型

+
阿里云语音通知类型,当类型为验证码类型时可配置变量。
+

3、模板ID

+
阿里云语音对每一条语音通知分配的唯一ID标识
+

4、被叫号码

+
当前仅支持国内手机号,此处若不填,则在模板调试和配置告警通知时手动填写。
+
若您使用的语音通知文件为公共模式外呼,则该参数值不填。
+
若您使用的语音通知文件为专属模式外呼,则必须传入已购买的号码,仅支持一个号码。
+

5、被叫显号

+
用户呼叫号码显示,必须是在阿里云购买的号码。
+

6、播放次数

+
最多可播放3次
+

7、模板内容

+
+ 仅当通知类型为验证码类型时可进行配置,变量标识需要阿里云模板中的标识一致,支持填写带变量的动态模板。 + 变量填写规范示例:${'{name}'} + 。填写动态参数后,可对变量的名称、类型、格式进行配置,以便告警通知是填写。 +
+
+
+ ); +}; +export default AliyunVoice; diff --git a/src/views/notice/Template/Detail/doc/DingTalk.tsx b/src/views/notice/Template/Detail/doc/DingTalk.tsx new file mode 100644 index 00000000..387fb2b0 --- /dev/null +++ b/src/views/notice/Template/Detail/doc/DingTalk.tsx @@ -0,0 +1,54 @@ + +import './index.less'; +import { Image } from 'ant-design-vue'; +import { getImage } from '@/utils/comm'; + +const DingTalk = () => { + const agentId = getImage('/notice/doc/template/dingTalk-message/01-Agentid.jpg'); + // const userId = getImage('/notice/doc/template/dingTalk-message/02-user-id.jpg'); + // const dept = getImage('/notice/doc/template/dingTalk-message/03-dept.jpg'); + const a = '{name}'; + return ( +
+
+ 钉钉开放平台: + + https://open-dev.dingtalk.com + +
+ 钉钉管理后台: + + https://www.dingtalk.com + +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 +
使用钉钉消息通知时需在钉钉开放平台中创建好对应的应用
+
+

2.模板配置说明

+

1、绑定配置

+
使用固定的通知配置发送此通知模板
+

2、Agentid

+
应用唯一标识
+
获取路径:“钉钉开放平台”--“应用开发”--“查看应用”
+
+ +
+

3、收信人、收信部门

+
若不填写收信人,则在模板调试和配置告警通知时手动填写。
+ {/*
收信人ID获取路径:“钉钉管理后台”--“通讯录”--“查看用户”
*/} + {/*
收信部门ID获取路径:“钉钉管理后台”--“通讯录”--“编辑部门”
*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} +

4、模板内容

+
+ 支持填写带变量的动态模板。变量填写规范示例:${a} + 。填写动态参数后,可对变量的名称、类型、格式进行配置,以便告警通知时填写。 +
+
+ ); +}; +export default DingTalk; diff --git a/src/views/notice/Template/Detail/doc/DingTalkRebot.tsx b/src/views/notice/Template/Detail/doc/DingTalkRebot.tsx new file mode 100644 index 00000000..29f9a107 --- /dev/null +++ b/src/views/notice/Template/Detail/doc/DingTalkRebot.tsx @@ -0,0 +1,35 @@ +import './index.less'; + +const DingTalkRebot = () => { + const b = '{name}'; + return ( +
+
+ 钉钉开放平台: + + https://open-dev.dingtalk.com + +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 +
+
+ 使用钉钉群机器人消息通知时需在钉钉开放平台中创建好对应的机器人,再到钉钉客户端在对应的群中绑定智能机器人。 +
+

2.模板配置说明

+
+

1、绑定配置

+
使用固定的通知配置发送此通知模板
+

2、消息类型

+
目前支持text、markdown、link3种。
+

3、模板内容

+
+ 支持填写带变量的动态模板。变量填写规范示例:${b} + 。填写动态参数后,可对变量的名称、类型、格式进行配置,以便告警通知时填写。 +
+
+
+ ); +}; +export default DingTalkRebot; diff --git a/src/views/notice/Template/Detail/doc/Email.tsx b/src/views/notice/Template/Detail/doc/Email.tsx new file mode 100644 index 00000000..4278b66a --- /dev/null +++ b/src/views/notice/Template/Detail/doc/Email.tsx @@ -0,0 +1,30 @@ +import './index.less'; + +const Email = () => { + const a = '{标题}'; + const b = '{name}'; + return ( +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 + 服务器地址支持自定义输入。 +
+

2.模板配置说明

+
+ {/*

1、服务器地址

+
服务器地址支持自定义输入
*/} +

1、标题

+
支持输入变量,变量格式${a}
+

2、收件人

+
支持录入多个邮箱地址,可填写变量参数。
+

3、模板内容

+
+ 支持填写带变量的动态模板。变量填写规范示例:${b} + 。填写动态参数后,可对变量的名称、类型、格式进行配置,以便告警通知时填写。 +
+
+
+ ); +}; +export default Email; diff --git a/src/views/notice/Template/Detail/doc/Webhook.tsx b/src/views/notice/Template/Detail/doc/Webhook.tsx new file mode 100644 index 00000000..ee0d2fff --- /dev/null +++ b/src/views/notice/Template/Detail/doc/Webhook.tsx @@ -0,0 +1,18 @@ +import './index.less'; + +const Webhook = () => { + return ( +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 +
+

2.模板配置说明

+
+ 1、请求体 请求体中的数据来自于发送通知时指定的所有变量,也可通过自定义的方式进行变量配置。 + 使用webhook通知时,系统会将该事件通过您指定的URL地址,以POST方式发送。 +
+
+ ); +}; +export default Webhook; diff --git a/src/views/notice/Template/Detail/doc/WeixinApp.tsx b/src/views/notice/Template/Detail/doc/WeixinApp.tsx new file mode 100644 index 00000000..d441e4db --- /dev/null +++ b/src/views/notice/Template/Detail/doc/WeixinApp.tsx @@ -0,0 +1,58 @@ +import './index.less'; +import { Image } from 'ant-design-vue'; +import { getImage } from '@/utils/comm'; + +const WeixinApp = () => { + const appId = getImage('/notice/doc/template/weixin-official/02-mini-Program-Appid.png'); + + return ( +
+
+ 企业微信管理后台: + + https://work.weixin.qq.com + +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 +
+

2.模板配置说明

+
+

1、绑定配置

+
使用固定的通知配置发送此通知模板
+
+
+

2、用户标签

+
以标签的维度通知该标签下所有用户
+
+
+

3、消息模板

+
微信公众号中配置的消息模板
+
+
+

4、模板跳转链接

+
点击消息之后进行页面跳转
+
+
+

5、跳转小程序Appid

+
点击消息之后打开对应的小程序
+
+
+

6、跳转小程序具体路径

+
点击消息之后跳转到小程序的具体页面
+
+ +
+
+
+

7、模板内容

+
+ 支持填写带变量的动态模板。变量填写规范示例:${name} + 。填写动态参数后,可对变量的名称、类型、格式进行配置,以便告警通知时填写。 +
+
+
+ ); +}; +export default WeixinApp; diff --git a/src/views/notice/Template/Detail/doc/WeixinCorp.tsx b/src/views/notice/Template/Detail/doc/WeixinCorp.tsx new file mode 100644 index 00000000..5f547d7b --- /dev/null +++ b/src/views/notice/Template/Detail/doc/WeixinCorp.tsx @@ -0,0 +1,48 @@ +import './index.less'; +import { Image } from 'ant-design-vue'; +import { getImage } from '@/utils/comm'; + +const WeixinCorp = () => { + const agentId = getImage('/notice/doc/template/weixin-corp/01-Agentid.jpg'); + const userId = getImage('/notice/doc/template/weixin-corp/02-userID.jpg'); + const toDept = getImage('/notice/doc/template/weixin-corp/03-toDept.jpg'); + const toTags = getImage('/notice/doc/template/weixin-corp/04-toTags.jpg'); + + return ( +
+
+ 企业微信管理后台: + + https://work.weixin.qq.com + +
+

1. 概述

+
+ 通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。 +
+

2.模版配置说明

+
+

1、绑定配置

+
使用固定的通知配置发送此通知模板
+

2、Agentid

+
应用唯一标识
+
获取路径:“企业微信”管理后台--“应用管理”--“应用”--“查看应用”
+
+ +
+

3、收信人ID、收信部门ID、标签推送

+
+ 接收通知的3种方式,3个字段若在此页面都没有填写,则在模板调试和配置告警通知时需要手动填写 +
+
收信人ID获取路径:【通讯录】-{'>'}【成员信息】查看成员账号
+
收信组织ID获取路径:【通讯录】-{'>'}【部门信息】查看部门ID
+
+ + + +
+
+
+ ); +}; +export default WeixinCorp; diff --git a/src/views/notice/Template/Detail/doc/index.less b/src/views/notice/Template/Detail/doc/index.less new file mode 100644 index 00000000..1b61258c --- /dev/null +++ b/src/views/notice/Template/Detail/doc/index.less @@ -0,0 +1,39 @@ +.doc { + height: 750px; + padding: 24px; + overflow-y: auto; + color: rgba(#000, 0.8); + font-size: 14px; + background-color: #fafafa; + + .url { + padding: 8px 16px; + color: #2f54eb; + background-color: rgba(#a7bdf7, 0.2); + } + + h1 { + margin: 16px 0; + color: rgba(#000, 0.85); + font-weight: bold; + font-size: 14px; + + &:first-child { + margin-top: 0; + } + } + + h2 { + margin: 6px 0; + color: rgba(0, 0, 0, 0.8); + font-size: 14px; + } + span { + color: rgba(0, 0, 0, 0.8); + font-weight: 600; + } + + .image { + margin: 16px 0; + } +} diff --git a/src/views/notice/Template/Detail/doc/index.tsx b/src/views/notice/Template/Detail/doc/index.tsx new file mode 100644 index 00000000..3069e35e --- /dev/null +++ b/src/views/notice/Template/Detail/doc/index.tsx @@ -0,0 +1,46 @@ +import DingTalk from './DingTalk'; +import DingTalkRebot from './DingTalkRebot'; +import AliyunSms from './AliyunSms'; +import AliyunVoice from './AliyunVoice'; +import Email from './Email'; +import Webhook from './Webhook'; +import WeixinApp from './WeixinApp'; +import WeixinCorp from './WeixinCorp'; + +export default defineComponent({ + name: 'Doc', + props: { + docData: { + type: Object, + default: () => ({}), + }, + }, + setup(props) { + const docMap = { + weixin: { + corpMessage: , + officialMessage: , + }, + dingTalk: { + dingTalkMessage: , + dingTalkRobotWebHook: , + }, + voice: { + aliyun: , + }, + sms: { + aliyunSms: , + }, + email: { + embedded: , + }, + webhook: { + http: , + }, + }; + + return () => ( + docMap?.[props.docData.type]?.[props.docData.provider] + ) + }, +}); diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue index c2a1ee68..e4a6bdc6 100644 --- a/src/views/notice/Template/Detail/index.vue +++ b/src/views/notice/Template/Detail/index.vue @@ -1,8 +1,433 @@ - + + + diff --git a/src/views/notice/Template/types.d.ts b/src/views/notice/Template/types.d.ts new file mode 100644 index 00000000..664ab4c9 --- /dev/null +++ b/src/views/notice/Template/types.d.ts @@ -0,0 +1,74 @@ +export interface IHeaders { + id?: number; + key: string; + value: string; +} + +interface IAttachments { + location: string; + name: string; +} +interface IVariableDefinitions { + id: string; + name: string; + type: string; + format: string; +} + +export type TemplateFormData = { + name: string; + type: string; + provider: string; + description: string; + id?: string; + creatorId?: string; + createTime?: number; + configId?: string; + template: { + // 钉钉消息 + agentId?: string; + message?: string; + // 钉钉机器人 + messageType?: string; + markdown?: { + text: string; + title: string; + }; + link?: { + title: string; + picUrl: string; + messageUrl: string; + text: string; + }; + // 微信 + agentId?: string; + // message?: string; + toParty?: string; + toUser?: string; + toTag?: string; + // 邮件 + subject?: string; + sendTo?: string[]; + attachments?: IAttachments[]; + // message?: string; + text?: string; + // 语音 + templateType?: string; + templateCode?: string; + ttsCode?: string; + // message?: string; + playTimes?: number; + calledShowNumbers?: string; + calledNumber?: string; + // 短信 + code?: string; + // message?: string; + phoneNumber?: string; + signName?: string; + // webhook + contextAsBody?: boolean; + body?: string; + }; + variableDefinitions: IVariableDefinitions[]; + +}; \ No newline at end of file diff --git a/src/views/notice/const.ts b/src/views/notice/const.ts index 47a86c03..a0e48d70 100644 --- a/src/views/notice/const.ts +++ b/src/views/notice/const.ts @@ -123,4 +123,72 @@ export const CONFIG_FIELD_MAP = { url: undefined, headers: [], }, +}; + +// 模板 +export const TEMPLATE_FIELD_MAP = { + dingTalk: { + dingTalkMessage: { + agentId: '', + message: '', + }, + dingTalkRobotWebHook: { + message: '', + messageType: '', + markdown: { + text: '', + title: '', + }, + link: { + title: '', + picUrl: '', + messageUrl: '', + text: '', + }, + } + }, + weixin: { + corpMessage: { + agentId: '', + message: '', + toParty: '', + toUser: '', + toTag: '', + }, + officialMessage: {}, + }, + email: { + embedded: { + subject: '', + sendTo: [], + attachments: [], + message: '', + text: '', + } + }, + voice: { + aliyun: { + templateType: '', + templateCode: '', + ttsCode: '', + message: '', + playTimes: undefined, + calledShowNumbers: '', + calledNumber: '', + } + }, + sms: { + aliyunSms: { + code: '', + message: '', + phoneNumber: '', + signName: '', + } + }, + webhook: { + http: { + contextAsBody: false, + body: '' + } + }, }; \ No newline at end of file