0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 通知模板优化

This commit is contained in:
JiangQiming 2023-02-22 16:35:23 +08:00
parent 8ac4fc8178
commit 5c1506a4c4
1 changed files with 300 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

337
src/views/notice/Template/Detail/index.vue
View File

@ -44,10 +44,22 @@
/> />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="绑定配置"
v-bind="validateInfos.configId" v-bind="validateInfos.configId"
v-if="formData.type !== 'email'" v-if="formData.type !== 'email'"
> >
<template #label>
<span>
绑定配置
<a-tooltip
title="使用固定的通知配置来发送此通知模版"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-select <a-select
v-model:value="formData.configId" v-model:value="formData.configId"
placeholder="请选择绑定配置" placeholder="请选择绑定配置"
@ -68,9 +80,19 @@
v-if="formData.provider === 'dingTalkMessage'" v-if="formData.provider === 'dingTalkMessage'"
> >
<a-form-item <a-form-item
label="AgentId"
v-bind="validateInfos['template.agentId']" v-bind="validateInfos['template.agentId']"
> >
<template #label>
<span>
AgentID
<a-tooltip title="应用唯一标识">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value=" v-model:value="
formData.template.agentId formData.template.agentId
@ -78,6 +100,45 @@
placeholder="请输入AppSecret" placeholder="请输入AppSecret"
/> />
</a-form-item> </a-form-item>
<a-row :gutter="10">
<a-col :span="12">
<a-form-item label="收信部门">
<ToOrg
v-model:toParty="
formData.template.toParty
"
:type="formData.type"
:config-id="formData.configId"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item>
<template #label>
<span>
收信人
<a-tooltip
title="如果不填写该字段，将在使用此模板发送通知时进行指定"
>
<AIcon
type="QuestionCircleOutlined"
style="
margin-left: 2px;
"
/>
</a-tooltip>
</span>
</template>
<ToUser
v-model:toUser="
formData.template.toUser
"
:type="formData.type"
:config-id="formData.configId"
/>
</a-form-item>
</a-col>
</a-row>
</template> </template>
<template <template
v-if=" v-if="
@ -191,9 +252,19 @@
<!-- 微信 --> <!-- 微信 -->
<template v-if="formData.type === 'weixin'"> <template v-if="formData.type === 'weixin'">
<a-form-item <a-form-item
label="AgentId"
v-bind="validateInfos['template.agentId']" v-bind="validateInfos['template.agentId']"
> >
<template #label>
<span>
AgentId
<a-tooltip title="应用唯一标识">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value="formData.template.agentId" v-model:value="formData.template.agentId"
placeholder="请输入agentId" placeholder="请输入agentId"
@ -201,7 +272,20 @@
</a-form-item> </a-form-item>
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="收信人"> <a-form-item>
<template #label>
<span>
收信人
<a-tooltip
title="如果不填写该字段,将在使用此模版发送通知时进行指定。"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<ToUser <ToUser
v-model:toUser=" v-model:toUser="
formData.template.toUser formData.template.toUser
@ -223,7 +307,20 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item label="标签推送"> <a-form-item>
<template #label>
<span>
标签推送
<a-tooltip
title="本企业微信的标签ID列表,最多支持100个,如果不填写该字段,将在使用此模版发送通知时进行指定"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<ToTag <ToTag
v-model:toTag="formData.template.toTag" v-model:toTag="formData.template.toTag"
:type="formData.type" :type="formData.type"
@ -234,15 +331,38 @@
<!-- 邮件 --> <!-- 邮件 -->
<template v-if="formData.type === 'email'"> <template v-if="formData.type === 'email'">
<a-form-item <a-form-item
label="标题"
v-bind="validateInfos['template.subject']" v-bind="validateInfos['template.subject']"
> >
<template #label>
<span>
标题
<a-tooltip title="邮件标题">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value="formData.template.subject" v-model:value="formData.template.subject"
placeholder="请输入标题" placeholder="请输入标题"
/> />
</a-form-item> </a-form-item>
<a-form-item label="收件人"> <a-form-item>
<template #label>
<span>
收件人
<a-tooltip
title="多个收件人用换行分隔 最大支持1000个号码"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-select <a-select
mode="tags" mode="tags"
:options="[]" :options="[]"
@ -250,7 +370,20 @@
placeholder="请选择收件人" placeholder="请选择收件人"
/> />
</a-form-item> </a-form-item>
<a-form-item label="附件信息"> <a-form-item>
<template #label>
<span>
附件信息
<a-tooltip
title="附件只输入文件名称将在发送邮件时进行文件上传"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<Attachments <Attachments
v-model:attachments=" v-model:attachments="
formData.template.attachments formData.template.attachments
@ -261,9 +394,21 @@
<!-- 语音 --> <!-- 语音 -->
<template v-if="formData.type === 'voice'"> <template v-if="formData.type === 'voice'">
<a-form-item <a-form-item
label="类型"
v-bind="validateInfos['template.templateType']" v-bind="validateInfos['template.templateType']"
> >
<template #label>
<span>
类型
<a-tooltip
title="语音验证码类型可配置变量，并且只支持数字和英文字母"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-select <a-select
v-model:value=" v-model:value="
formData.template.templateType formData.template.templateType
@ -282,13 +427,25 @@
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="12"> <a-col :span="12">
<a-form-item <a-form-item
label="模板ID"
v-bind=" v-bind="
validateInfos[ validateInfos[
'template.templateCode' 'template.templateCode'
] ]
" "
> >
<template #label>
<span>
模板ID
<a-tooltip
title="阿里云内部分配的唯一ID标识"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value=" v-model:value="
formData.template.templateCode formData.template.templateCode
@ -298,7 +455,20 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="被叫号码"> <a-form-item>
<template #label>
<span>
被叫号码
<a-tooltip
title="仅支持中国大陆号码"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value=" v-model:value="
formData.template.calledNumber formData.template.calledNumber
@ -308,7 +478,20 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item label="被叫显号"> <a-form-item>
<template #label>
<span>
被叫显号
<a-tooltip
title="必须是已购买的号码,用于呼叫号码显示"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value=" v-model:value="
formData.template.calledShowNumbers formData.template.calledShowNumbers
@ -316,16 +499,39 @@
placeholder="请输入被叫显号" placeholder="请输入被叫显号"
/> />
</a-form-item> </a-form-item>
<a-form-item label="播放次数"> <a-form-item>
<template #label>
<span>
播放次数
<a-tooltip title="语音文件的播放次数">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value="formData.template.playTimes" v-model:value="formData.template.playTimes"
placeholder="请输入播放次数" placeholder="请输入播放次数"
/> />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="模版内容"
v-if="formData.template.templateType === 'tts'" v-if="formData.template.templateType === 'tts'"
> >
<template #label>
<span>
模版内容
<a-tooltip
title="语音验证码内容输入框，用于渲染验语音证码变量。"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-textarea <a-textarea
v-model:value="formData.template.message" v-model:value="formData.template.message"
show-count show-count
@ -339,14 +545,27 @@
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="12"> <a-col :span="12">
<a-form-item <a-form-item
label="模板"
v-bind="validateInfos['template.code']" v-bind="validateInfos['template.code']"
> >
<template #label>
<span>
模板
<a-tooltip
title="阿里云短信平台自定义的模版名称"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-select <a-select
v-model:value=" v-model:value="
formData.template.code formData.template.code
" "
placeholder="请选择模板" placeholder="请选择模板"
@change="handleTemplateChange"
> >
<a-select-option <a-select-option
v-for="( v-for="(
@ -361,7 +580,20 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="收信人"> <a-form-item>
<template #label>
<span>
收信人
<a-tooltip
title="仅支持中国大陆号码"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-input <a-input
v-model:value=" v-model:value="
formData.template.phoneNumber formData.template.phoneNumber
@ -372,9 +604,21 @@
</a-col> </a-col>
</a-row> </a-row>
<a-form-item <a-form-item
label="签名"
v-bind="validateInfos['template.signName']" v-bind="validateInfos['template.signName']"
> >
<template #label>
<span>
签名
<a-tooltip
title="用于短信内容签名信息显示"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-select <a-select
v-model:value="formData.template.signName" v-model:value="formData.template.signName"
placeholder="请选择签名" placeholder="请选择签名"
@ -419,17 +663,28 @@
</a-form-item> </a-form-item>
</template> </template>
<a-form-item <a-form-item
label="模版内容"
v-if=" v-if="
formData.type !== 'sms' &&
formData.type !== 'webhook' && formData.type !== 'webhook' &&
formData.type !== 'voice' formData.type !== 'voice'
" "
v-bind="validateInfos['template.message']"
> >
<template #label>
<span>
模版内容
<a-tooltip title="发送的内容，支持录入变量">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</span>
</template>
<a-textarea <a-textarea
v-model:value="formData.template.message" v-model:value="formData.template.message"
:maxlength="200" :maxlength="200"
:rows="5" :rows="5"
:disabled="formData.type === 'sms'"
placeholder="变量格式:${name}; placeholder="变量格式:${name};
示例:尊敬的${name},${time}有设备触发告警,请注意处理" 示例:尊敬的${name},${time}有设备触发告警,请注意处理"
/> />
@ -549,8 +804,13 @@ watch(
formData.value.template = formData.value.template =
TEMPLATE_FIELD_MAP[val][formData.value.provider]; TEMPLATE_FIELD_MAP[val][formData.value.provider];
getConfigList(); if (val !== 'email') getConfigList();
clearValid(); clearValid();
if (val === 'sms') {
getTemplateList();
getSignsList();
}
}, },
); );
@ -589,6 +849,7 @@ const formRules = ref({
'template.signName': [{ required: true, message: '请输入签名' }], 'template.signName': [{ required: true, message: '请输入签名' }],
// webhook // webhook
description: [{ max: 200, message: '最多可输入200个字符' }], description: [{ max: 200, message: '最多可输入200个字符' }],
'template.message': [{ required: true, message: '请输入' }],
}); });
const { resetFields, validate, validateInfos, clearValidate } = useForm( const { resetFields, validate, validateInfos, clearValidate } = useForm(
@ -634,16 +895,14 @@ const clearValid = () => {
* 获取详情 * 获取详情
*/ */
const getDetail = async () => { const getDetail = async () => {
const res = await templateApi.detail(route.params.id as string); if (route.params.id !== ':id') {
// formData.value = res.result; const res = await templateApi.detail(route.params.id as string);
Object.assign(formData.value, res.result); // formData.value = res.result;
// console.log('formData.value: ', formData.value); Object.assign(formData.value, res.result);
// console.log('formData.value: ', formData.value);
if (formData.value.type === 'sms') {
getTemplateList();
getSignsList();
} }
}; };
getDetail();
/** /**
* 获取绑定配置 * 获取绑定配置
@ -657,7 +916,6 @@ const getConfigList = async () => {
const { result } = await templateApi.getConfig({ terms }); const { result } = await templateApi.getConfig({ terms });
configList.value = result; configList.value = result;
}; };
getConfigList();
/** /**
* link消息类型 图片链接 * link消息类型 图片链接
@ -681,25 +939,30 @@ const handleConfigChange = () => {
*/ */
const templateList = ref(); const templateList = ref();
const getTemplateList = async () => { const getTemplateList = async () => {
const { result } = await templateApi.getAliTemplate( const id = formData.value.configId || undefined;
formData.value.configId, const { result } = await templateApi.getAliTemplate(id);
);
templateList.value = result; templateList.value = result;
}; };
/**
* 短信模板改变
*/
const handleTemplateChange = () => {
formData.value.template.message = templateList.value.find(
(f: any) => formData.value.template.code === f.templateCode,
)?.templateContent;
};
/** /**
* 获取签名 * 获取签名
*/ */
const signsList = ref(); const signsList = ref();
const getSignsList = async () => { const getSignsList = async () => {
const { result } = await templateApi.getSigns(formData.value.configId); const id = formData.value.configId || undefined;
const { result } = await templateApi.getSigns(id);
signsList.value = result; signsList.value = result;
}; };
onMounted(() => {
if (route.params.id) getDetail();
});
/** /**
* 表单提交 * 表单提交
*/ */