feat: 通知模板页面
This commit is contained in:
JiangQiming
parent
ad54e34a93
commit
cd146583a1
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import './index.less';
|
||||
|
||||
const AliyunSms = () => {
|
||||
return (
|
||||
<div class="doc">
|
||||
<div class="url">
|
||||
阿里云短信服务平台：
|
||||
<a
|
||||
href="https://dysms.console.aliyun.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
https://dysms.console.aliyun.com
|
||||
</a>
|
||||
</div>
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
使用阿里云短信时需先在阿里云短信服务平台创建短信模板。
|
||||
</div>
|
||||
<h1>2.模板配置说明</h1>
|
||||
|
||||
<div>
|
||||
<h2> 1、绑定配置</h2>
|
||||
<div> 使用固定的通知配置发送此通知模板</div>
|
||||
<h2> 2、模板</h2>
|
||||
<div> 阿里云短信平台自定义的模板名称</div>
|
||||
<h2> 3、收信人</h2>
|
||||
<div>
|
||||
{' '}
|
||||
当前仅支持国内手机号，此处若不填，则在模板调试和配置告警通知时手动填写
|
||||
</div>
|
||||
<h2> 4、签名</h2>
|
||||
<div> 用于短信内容签名信息显示，需在阿里云短信进行配置。</div>
|
||||
<h2> 5、变量属性</h2>
|
||||
<div>
|
||||
需要在当前页面手动设置与阿里云短信模板中一样的变量，否则会导致发送异常。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default AliyunSms;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import './index.less';
|
||||
|
||||
const AliyunVoice = () => {
|
||||
return (
|
||||
<div class="doc">
|
||||
<div class="url">
|
||||
阿里云语音服务平台：
|
||||
<a href="https://account.console.aliyun.com" target="_blank" rel="noopener noreferrer">
|
||||
https://account.console.aliyun.com
|
||||
</a>
|
||||
</div>
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
使用阿里云语音时需先在阿里云语音服务平台创建语音模板。
|
||||
</div>
|
||||
<h1>2.模板配置说明</h1>
|
||||
<div>
|
||||
<h2>1、绑定配置</h2>
|
||||
<div> 使用固定的通知配置发送此通知模板</div>
|
||||
<h2>2、类型</h2>
|
||||
<div> 阿里云语音通知类型，当类型为验证码类型时可配置变量。</div>
|
||||
<h2> 3、模板ID</h2>
|
||||
<div> 阿里云语音对每一条语音通知分配的唯一ID标识</div>
|
||||
<h2> 4、被叫号码</h2>
|
||||
<div> 当前仅支持国内手机号，此处若不填，则在模板调试和配置告警通知时手动填写。</div>
|
||||
<div>若您使用的语音通知文件为公共模式外呼，则该参数值不填。</div>
|
||||
<div>若您使用的语音通知文件为专属模式外呼，则必须传入已购买的号码，仅支持一个号码。</div>
|
||||
<h2> 5、被叫显号</h2>
|
||||
<div> 用户呼叫号码显示，必须是在阿里云购买的号码。</div>
|
||||
<h2> 6、播放次数</h2>
|
||||
<div> 最多可播放3次</div>
|
||||
<h2> 7、模板内容</h2>
|
||||
<div>
|
||||
仅当通知类型为验证码类型时可进行配置，变量标识需要阿里云模板中的标识一致，支持填写带变量的动态模板。
|
||||
变量填写规范示例：${'{name}'}
|
||||
。填写动态参数后，可对变量的名称、类型、格式进行配置，以便告警通知是填写。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default AliyunVoice;
|
||||
|
|
@ -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 (
|
||||
<div class="doc">
|
||||
<div class="url">
|
||||
钉钉开放平台：
|
||||
<a href="https://open-dev.dingtalk.com" target="_blank" rel="noopener noreferrer">
|
||||
https://open-dev.dingtalk.com
|
||||
</a>
|
||||
<br />
|
||||
钉钉管理后台：
|
||||
<a href="https://www.dingtalk.com" target="_blank" rel="noopener noreferrer">
|
||||
https://www.dingtalk.com
|
||||
</a>
|
||||
</div>
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
<div>使用钉钉消息通知时需在钉钉开放平台中创建好对应的应用</div>
|
||||
</div>
|
||||
<h1> 2.模板配置说明</h1>
|
||||
<h2> 1、绑定配置</h2>
|
||||
<div> 使用固定的通知配置发送此通知模板</div>
|
||||
<h2> 2、Agentid</h2>
|
||||
<div> 应用唯一标识</div>
|
||||
<div> 获取路径：“钉钉开放平台”--“应用开发”--“查看应用”</div>
|
||||
<div class="image">
|
||||
<Image width="100%" src={agentId} />
|
||||
</div>
|
||||
<h2> 3、收信人、收信部门</h2>
|
||||
<div>若不填写收信人，则在模板调试和配置告警通知时手动填写。</div>
|
||||
{/*<div> 收信人ID获取路径：“钉钉管理后台”--“通讯录”--“查看用户”</div>*/}
|
||||
{/*<div> 收信部门ID获取路径：“钉钉管理后台”--“通讯录”--“编辑部门”</div>*/}
|
||||
{/*<div class="image">*/}
|
||||
{/* <Image width="100%" src={userId} />*/}
|
||||
{/* <Image width="100%" src={dept} />*/}
|
||||
{/*</div>*/}
|
||||
<h2> 4、模板内容</h2>
|
||||
<div>
|
||||
支持填写带变量的动态模板。变量填写规范示例：${a}
|
||||
。填写动态参数后，可对变量的名称、类型、格式进行配置，以便告警通知时填写。
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default DingTalk;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import './index.less';
|
||||
|
||||
const DingTalkRebot = () => {
|
||||
const b = '{name}';
|
||||
return (
|
||||
<div class="doc">
|
||||
<div class="url">
|
||||
钉钉开放平台：
|
||||
<a href="https://open-dev.dingtalk.com" target="_blank" rel="noopener noreferrer">
|
||||
https://open-dev.dingtalk.com
|
||||
</a>
|
||||
</div>
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
</div>
|
||||
<div>
|
||||
使用钉钉群机器人消息通知时需在钉钉开放平台中创建好对应的机器人，再到钉钉客户端在对应的群中绑定智能机器人。
|
||||
</div>
|
||||
<h1>2.模板配置说明</h1>
|
||||
<div>
|
||||
<h2> 1、绑定配置</h2>
|
||||
<div> 使用固定的通知配置发送此通知模板</div>
|
||||
<h2> 2、消息类型</h2>
|
||||
<div> 目前支持text、markdown、link3种。</div>
|
||||
<h2> 3、模板内容</h2>
|
||||
<div>
|
||||
支持填写带变量的动态模板。变量填写规范示例：${b}
|
||||
。填写动态参数后，可对变量的名称、类型、格式进行配置，以便告警通知时填写。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default DingTalkRebot;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import './index.less';
|
||||
|
||||
const Email = () => {
|
||||
const a = '{标题}';
|
||||
const b = '{name}';
|
||||
return (
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
服务器地址支持自定义输入。
|
||||
</div>
|
||||
<h1>2.模板配置说明</h1>
|
||||
<div>
|
||||
{/* <h2> 1、服务器地址</h2>
|
||||
<div>服务器地址支持自定义输入</div> */}
|
||||
<h2> 1、标题</h2>
|
||||
<div>支持输入变量，变量格式${a}</div>
|
||||
<h2> 2、收件人</h2>
|
||||
<div> 支持录入多个邮箱地址，可填写变量参数。</div>
|
||||
<h2> 3、模板内容</h2>
|
||||
<div>
|
||||
支持填写带变量的动态模板。变量填写规范示例：${b}
|
||||
。填写动态参数后，可对变量的名称、类型、格式进行配置，以便告警通知时填写。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Email;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import './index.less';
|
||||
|
||||
const Webhook = () => {
|
||||
return (
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
</div>
|
||||
<h1>2.模板配置说明</h1>
|
||||
<div>
|
||||
1、请求体 请求体中的数据来自于发送通知时指定的所有变量,也可通过自定义的方式进行变量配置。
|
||||
使用webhook通知时，系统会将该事件通过您指定的URL地址，以POST方式发送。
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Webhook;
|
||||
|
|
@ -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 (
|
||||
<div class="doc">
|
||||
<div class="url">
|
||||
企业微信管理后台：
|
||||
<a href="https://work.weixin.qq.com" target="_blank" rel="noopener noreferrer">
|
||||
https://work.weixin.qq.com
|
||||
</a>
|
||||
</div>
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
</div>
|
||||
<h1>2.模板配置说明</h1>
|
||||
<div>
|
||||
<h2>1、绑定配置</h2>
|
||||
<div>使用固定的通知配置发送此通知模板</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>2、用户标签</h2>
|
||||
<div>以标签的维度通知该标签下所有用户</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>3、消息模板</h2>
|
||||
<div>微信公众号中配置的消息模板</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>4、模板跳转链接</h2>
|
||||
<div>点击消息之后进行页面跳转</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>5、跳转小程序Appid</h2>
|
||||
<div>点击消息之后打开对应的小程序</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>6、跳转小程序具体路径</h2>
|
||||
<div>点击消息之后跳转到小程序的具体页面</div>
|
||||
<div class="image">
|
||||
<Image width="100%" src={appId} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>7、模板内容</h2>
|
||||
<div>
|
||||
支持填写带变量的动态模板。变量填写规范示例：${name}
|
||||
。填写动态参数后，可对变量的名称、类型、格式进行配置，以便告警通知时填写。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default WeixinApp;
|
||||
|
|
@ -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 (
|
||||
<div class="doc">
|
||||
<div class="url">
|
||||
企业微信管理后台：
|
||||
<a href="https://work.weixin.qq.com" target="_blank" rel="noopener noreferrer">
|
||||
https://work.weixin.qq.com
|
||||
</a>
|
||||
</div>
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
|
||||
</div>
|
||||
<h1>2.模版配置说明</h1>
|
||||
<div>
|
||||
<h2> 1、绑定配置</h2>
|
||||
<div> 使用固定的通知配置发送此通知模板</div>
|
||||
<h2> 2、Agentid</h2>
|
||||
<div> 应用唯一标识</div>
|
||||
<div> 获取路径：“企业微信”管理后台--“应用管理”--“应用”--“查看应用”</div>
|
||||
<div class="image">
|
||||
<Image width="100%" src={agentId} />
|
||||
</div>
|
||||
<h2> 3、收信人ID、收信部门ID、标签推送</h2>
|
||||
<div>
|
||||
接收通知的3种方式，3个字段若在此页面都没有填写，则在模板调试和配置告警通知时需要手动填写
|
||||
</div>
|
||||
<div> 收信人ID获取路径：【通讯录】-{'>'}【成员信息】查看成员账号</div>
|
||||
<div> 收信组织ID获取路径：【通讯录】-{'>'}【部门信息】查看部门ID</div>
|
||||
<div class="image">
|
||||
<Image width="100%" src={userId} />
|
||||
<Image width="100%" src={toDept} />
|
||||
<Image width="100%" src={toTags} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default WeixinCorp;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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: <WeixinCorp />,
|
||||
officialMessage: <WeixinApp />,
|
||||
},
|
||||
dingTalk: {
|
||||
dingTalkMessage: <DingTalk />,
|
||||
dingTalkRobotWebHook: <DingTalkRebot />,
|
||||
},
|
||||
voice: {
|
||||
aliyun: <AliyunVoice />,
|
||||
},
|
||||
sms: {
|
||||
aliyunSms: <AliyunSms />,
|
||||
},
|
||||
email: {
|
||||
embedded: <Email />,
|
||||
},
|
||||
webhook: {
|
||||
http: <Webhook />,
|
||||
},
|
||||
};
|
||||
|
||||
return () => (
|
||||
docMap?.[props.docData.type]?.[props.docData.provider]
|
||||
)
|
||||
},
|
||||
});
|
||||
|
|
@ -1,8 +1,433 @@
|
|||
<!-- 通知模板详情 -->
|
||||
<template>
|
||||
<div class="page-container">通知模板详情</div>
|
||||
<div class="page-container">
|
||||
<a-card>
|
||||
<a-row>
|
||||
<a-col :span="10">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
label="通知方式"
|
||||
v-bind="validateInfos.type"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="formData.type"
|
||||
placeholder="请选择通知方式"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in NOTICE_METHOD"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="类型"
|
||||
v-bind="validateInfos.provider"
|
||||
v-if="formData.type !== 'email'"
|
||||
>
|
||||
<RadioCard
|
||||
:options="msgType"
|
||||
v-model="formData.provider"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- 钉钉 -->
|
||||
<template v-if="formData.type === 'dingTalk'">
|
||||
<template
|
||||
v-if="formData.provider === 'dingTalkMessage'"
|
||||
>
|
||||
<a-form-item
|
||||
label="AppKey"
|
||||
v-bind="
|
||||
validateInfos['configuration.appKey']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.appKey
|
||||
"
|
||||
placeholder="请输入AppKey"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="AppSecret"
|
||||
v-bind="
|
||||
validateInfos['configuration.appSecret']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.appSecret
|
||||
"
|
||||
placeholder="请输入AppSecret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template
|
||||
v-if="
|
||||
formData.provider === 'dingTalkRobotWebHook'
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
label="webHook"
|
||||
v-bind="validateInfos['configuration.url']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.url
|
||||
"
|
||||
placeholder="请输入webHook"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 微信 -->
|
||||
<template v-if="formData.type === 'weixin'">
|
||||
<a-form-item
|
||||
label="corpId"
|
||||
v-bind="validateInfos['configuration.corpId']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.corpId
|
||||
"
|
||||
placeholder="请输入corpId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="corpSecret"
|
||||
v-bind="
|
||||
validateInfos['configuration.corpSecret']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.corpSecret
|
||||
"
|
||||
placeholder="请输入corpSecret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 邮件 -->
|
||||
<template v-if="formData.type === 'email'">
|
||||
<a-form-item
|
||||
label="服务器地址"
|
||||
v-bind="validateInfos['configuration.host']"
|
||||
>
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.host
|
||||
"
|
||||
placeholder="请输入服务器地址"
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="
|
||||
formData.configuration.port
|
||||
"
|
||||
/>
|
||||
<a-checkbox
|
||||
v-model:value="
|
||||
formData.configuration.ssl
|
||||
"
|
||||
>
|
||||
开启SSL
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="发件人"
|
||||
v-bind="validateInfos['configuration.sender']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.sender
|
||||
"
|
||||
placeholder="请输入发件人"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="用户名"
|
||||
v-bind="validateInfos['configuration.username']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.username
|
||||
"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="密码"
|
||||
v-bind="validateInfos['configuration.password']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.password
|
||||
"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 语音/短信 -->
|
||||
<template
|
||||
v-if="
|
||||
formData.type === 'voice' ||
|
||||
formData.type === 'sms'
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
label="AccessKeyId"
|
||||
v-bind="
|
||||
validateInfos['configuration.accessKeyId']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.accessKeyId
|
||||
"
|
||||
placeholder="请输入AccessKeyId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="Secret"
|
||||
v-bind="validateInfos['configuration.secret']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.secret
|
||||
"
|
||||
placeholder="Secret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- webhook -->
|
||||
<template v-if="formData.type === 'webhook'">
|
||||
<a-form-item
|
||||
label="Webhook"
|
||||
v-bind="validateInfos['configuration.url']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.configuration.url"
|
||||
placeholder="请输入Webhook"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="请求头">
|
||||
<!-- <EditTable
|
||||
v-model:headers="
|
||||
formData.configuration.headers
|
||||
"
|
||||
/> -->
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
:rows="5"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 0, span: 3 }">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="btnLoading"
|
||||
style="width: 100%"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12" :push="2">
|
||||
<Doc :docData="formData" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { TemplateFormData } from '../types';
|
||||
import {
|
||||
NOTICE_METHOD,
|
||||
CONFIG_FIELD_MAP,
|
||||
MSG_TYPE,
|
||||
} from '@/views/notice/const';
|
||||
// import EditTable from './components/EditTable.vue';
|
||||
import configApi from '@/api/notice/config';
|
||||
import Doc from './doc/index';
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const useForm = Form.useForm;
|
||||
|
||||
// 消息类型
|
||||
const msgType = ref([
|
||||
{
|
||||
label: '钉钉消息',
|
||||
value: 'dingTalkMessage',
|
||||
logo: getImage('/notice/dingtalk.png'),
|
||||
},
|
||||
{
|
||||
label: '群机器人消息',
|
||||
value: 'dingTalkRobotWebHook',
|
||||
logo: getImage('/notice/dingTalk-rebot.png'),
|
||||
},
|
||||
]);
|
||||
|
||||
// 表单数据
|
||||
const formData = ref<TemplateFormData>({
|
||||
description: '',
|
||||
name: '',
|
||||
provider: '',
|
||||
type: NOTICE_METHOD[2].value,
|
||||
template: {
|
||||
subject: '',
|
||||
sendTo: [],
|
||||
attachments: [],
|
||||
message: '',
|
||||
text: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 根据通知方式展示对应的字段
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
(val) => {
|
||||
formData.value.configuration = CONFIG_FIELD_MAP[val];
|
||||
msgType.value = MSG_TYPE[val];
|
||||
|
||||
formData.value.provider = msgType.value[0].value;
|
||||
},
|
||||
);
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
type: [{ required: true, message: '请选择通知方式' }],
|
||||
name: [
|
||||
{ required: true, message: '请输入名称' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
provider: [{ required: true, message: '请选择类型' }],
|
||||
// 钉钉
|
||||
'configuration.appKey': [
|
||||
{ required: true, message: '请输入AppKey' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.appSecret': [
|
||||
{ required: true, message: '请输入AppSecret' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// 'configuration.url': [{ required: true, message: '请输入WebHook' }],
|
||||
// 微信
|
||||
'configuration.corpId': [
|
||||
{ required: true, message: '请输入corpId' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.corpSecret': [
|
||||
{ required: true, message: '请输入corpSecret' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// 阿里云语音/短信
|
||||
'configuration.regionId': [
|
||||
{ required: true, message: '请输入RegionId' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.accessKeyId': [
|
||||
{ required: true, message: '请输入AccessKeyId' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.secret': [
|
||||
{ required: true, message: '请输入Secret' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// 邮件
|
||||
'configuration.host': [{ required: true, message: '请输入服务器地址' }],
|
||||
'configuration.sender': [{ required: true, message: '请输入发件人' }],
|
||||
'configuration.username': [
|
||||
{ required: true, message: '请输入用户名' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.password': [
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// webhook
|
||||
'configuration.url': [
|
||||
{ required: true, message: '请输入Webhook' },
|
||||
{
|
||||
pattern:
|
||||
/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
|
||||
message: 'Webhook需要是一个合法的URL',
|
||||
},
|
||||
],
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
||||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
() => {
|
||||
clearValidate();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const getDetail = async () => {
|
||||
const res = await configApi.detail(route.params.id as string);
|
||||
// console.log('res: ', res);
|
||||
formData.value = res.result;
|
||||
// console.log('formData.value: ', formData.value);
|
||||
};
|
||||
getDetail();
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(async () => {
|
||||
// console.log('formData.value: ', formData.value);
|
||||
btnLoading.value = true;
|
||||
let res;
|
||||
if (!formData.value.id) {
|
||||
res = await configApi.save(formData.value);
|
||||
} else {
|
||||
res = await configApi.update(formData.value);
|
||||
}
|
||||
// console.log('res: ', res);
|
||||
if (res?.success) {
|
||||
message.success('保存成功');
|
||||
router.back();
|
||||
}
|
||||
btnLoading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err: ', err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-container {
|
||||
background: #f0f2f5;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
|
||||
};
|
||||
|
|
@ -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: ''
|
||||
}
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue