iot-ui-vue/src/views/notice/Template/Detail/index.vue

1282 lines
58 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 通知模板详情 -->
<template>
<page-container>
<j-card>
<j-row>
<j-col :span="10">
<j-form layout="vertical">
<j-form-item
label="通知方式"
v-bind="validateInfos.type"
>
<j-select
v-model:value="formData.type"
placeholder="请选择通知方式"
:disabled="!!formData.id"
@change="handleTypeChange"
>
<j-select-option
v-for="(item, index) in NOTICE_METHOD"
:key="index"
:value="item.value"
>
{{ item.label }}
</j-select-option>
</j-select>
</j-form-item>
<j-form-item label="名称" v-bind="validateInfos.name">
<j-input
v-model:value="formData.name"
placeholder="请输入名称"
/>
</j-form-item>
<j-form-item
label="类型"
v-bind="validateInfos.provider"
v-if="
formData.type !== 'email' &&
formData.type !== 'webhook'
"
>
<RadioCard
:options="msgType"
v-model="formData.provider"
@change="handleProviderChange"
/>
</j-form-item>
<j-form-item
v-bind="validateInfos.configId"
v-if="formData.type !== 'email'"
>
<template #label>
<span>
绑定配置
<j-tooltip
title="使用固定的通知配置来发送此通知模版"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-select
v-model:value="formData.configId"
placeholder="请选择绑定配置"
@change="handleConfigChange"
>
<j-select-option
v-for="(item, index) in configList"
:key="index"
:value="item.id"
>
{{ item.name }}
</j-select-option>
</j-select>
</j-form-item>
<!-- 钉钉 -->
<template v-if="formData.type === 'dingTalk'">
<template
v-if="formData.provider === 'dingTalkMessage'"
>
<j-form-item
v-bind="validateInfos['template.agentId']"
>
<template #label>
<span>
AgentID
<j-tooltip title="应用唯一标识">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="
formData.template.agentId
"
placeholder="请输入AppSecret"
/>
</j-form-item>
<j-row :gutter="10">
<j-col :span="12">
<j-form-item label="收信部门">
<ToOrg
v-model:toParty="
formData.template
.departmentIdList
"
:type="formData.type"
:config-id="formData.configId"
/>
</j-form-item>
</j-col>
<j-col :span="12">
<j-form-item>
<template #label>
<span>
收信人
<j-tooltip
title="如果不填写该字段,将在使用此模板发送通知时进行指定"
>
<AIcon
type="QuestionCircleOutlined"
style="
margin-left: 2px;
"
/>
</j-tooltip>
</span>
</template>
<ToUser
v-model:toUser="
formData.template.userIdList
"
:type="formData.type"
:config-id="formData.configId"
/>
</j-form-item>
</j-col>
</j-row>
</template>
<template
v-if="
formData.provider === 'dingTalkRobotWebHook'
"
>
<j-form-item
label="消息类型"
v-bind="
validateInfos['template.messageType']
"
>
<j-select
v-model:value="
formData.template.messageType
"
placeholder="请选择消息类型"
@change="handleMessageTypeChange"
>
<j-select-option
v-for="(
item, index
) in ROBOT_MSG_TYPE"
:key="index"
:value="item.value"
>
{{ item.label }}
</j-select-option>
</j-select>
</j-form-item>
<template
v-if="
formData.template.messageType ===
'markdown'
"
>
<j-form-item
label="标题"
v-bind="
validateInfos[
'template.markdown.title'
]
"
>
<j-input
v-model:value="
formData.template.markdown.title
"
placeholder="请输入标题"
/>
</j-form-item>
</template>
<template
v-if="
formData.template.messageType === 'link'
"
>
<j-form-item
label="标题"
v-bind="
validateInfos['template.link.title']
"
>
<j-input
v-model:value="
formData.template.link.title
"
placeholder="请输入标题"
/>
</j-form-item>
<j-form-item label="图片链接">
<j-input
v-model:value="
formData.template.link.picUrl
"
placeholder="请输入图片链接"
>
<template #addonAfter>
<a-upload
name="file"
:action="FILE_UPLOAD"
:headers="{
[TOKEN_KEY]:
LocalStore.get(
TOKEN_KEY,
),
}"
:showUploadList="false"
@change="
(e) =>
handleLinkChange(e)
"
>
<AIcon
type="UploadOutlined"
/>
</a-upload>
</template>
</j-input>
</j-form-item>
<j-form-item label="内容链接">
<j-input
v-model:value="
formData.template.link
.messageUrl
"
placeholder="请输入内容链接"
/>
</j-form-item>
</template>
</template>
</template>
<!-- 微信 -->
<template v-if="formData.type === 'weixin'">
<j-form-item
v-bind="validateInfos['template.agentId']"
>
<template #label>
<span>
AgentId
<j-tooltip title="应用唯一标识">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="formData.template.agentId"
placeholder="请输入agentId"
/>
</j-form-item>
<j-row :gutter="10">
<j-col :span="12">
<j-form-item>
<template #label>
<span>
收信人
<j-tooltip
title="如果不填写该字段,将在使用此模版发送通知时进行指定。"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<ToUser
v-model:toUser="
formData.template.toUser
"
:type="formData.type"
:config-id="formData.configId"
/>
</j-form-item>
</j-col>
<j-col :span="12">
<j-form-item label="收信部门">
<ToOrg
v-model:toParty="
formData.template.toParty
"
:type="formData.type"
:config-id="formData.configId"
/>
</j-form-item>
</j-col>
</j-row>
<j-form-item>
<template #label>
<span>
标签推送
<j-tooltip
title="本企业微信的标签ID列表,最多支持100个,如果不填写该字段,将在使用此模版发送通知时进行指定"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<ToTag
v-model:toTag="formData.template.toTag"
:type="formData.type"
:config-id="formData.configId"
/>
</j-form-item>
</template>
<!-- 邮件 -->
<template v-if="formData.type === 'email'">
<j-form-item
v-bind="validateInfos['template.subject']"
>
<template #label>
<span>
标题
<j-tooltip title="邮件标题">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="formData.template.subject"
placeholder="请输入标题"
/>
</j-form-item>
<j-form-item
v-bind="validateInfos['template.sendTo']"
>
<template #label>
<span>
收件人
<j-tooltip
title="多个收件人用换行分隔 最大支持1000个号码"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-select
mode="tags"
v-model:value="formData.template.sendTo"
placeholder="请输入收件人邮箱,多个收件人用换行分隔"
/>
</j-form-item>
<j-form-item>
<template #label>
<span>
附件信息
<j-tooltip
title="附件只输入文件名称将在发送邮件时进行文件上传"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<Attachments
v-model:attachments="
formData.template.attachments
"
/>
</j-form-item>
</template>
<!-- 语音 -->
<template v-if="formData.type === 'voice'">
<j-form-item
v-bind="validateInfos['template.templateType']"
>
<template #label>
<span>
类型
<j-tooltip
title="语音验证码类型可配置变量,并且只支持数字和英文字母"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-select
v-model:value="
formData.template.templateType
"
placeholder="请选择类型"
>
<j-select-option
v-for="(item, index) in VOICE_TYPE"
:key="index"
:value="item.value"
>
{{ item.label }}
</j-select-option>
</j-select>
</j-form-item>
<j-row :gutter="10">
<j-col :span="12">
<j-form-item
v-bind="
validateInfos[
'template.templateCode'
]
"
>
<template #label>
<span>
模板ID
<j-tooltip
title="阿里云内部分配的唯一ID标识"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="
formData.template.templateCode
"
placeholder="请输入模板ID"
/>
</j-form-item>
</j-col>
<j-col :span="12">
<j-form-item
v-bind="
validateInfos[
'template.calledNumber'
]
"
>
<template #label>
<span>
被叫号码
<j-tooltip
title="仅支持中国大陆号码"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="
formData.template.calledNumber
"
placeholder="请输入被叫号码"
/>
</j-form-item>
</j-col>
</j-row>
<j-form-item
v-bind="
validateInfos['template.calledShowNumbers']
"
>
<template #label>
<span>
被叫显号
<j-tooltip
title="必须是已购买的号码,用于呼叫号码显示"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="
formData.template.calledShowNumbers
"
placeholder="请输入被叫显号"
/>
</j-form-item>
<j-form-item
v-bind="validateInfos['template.playTimes']"
>
<template #label>
<span>
播放次数
<j-tooltip title="语音文件的播放次数">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input-number
v-model:value="formData.template.playTimes"
placeholder="请输入播放次数"
style="width: 100%"
/>
</j-form-item>
<j-form-item
v-if="formData.template.templateType === 'tts'"
v-bind="validateInfos['template.ttsmessage']"
>
<template #label>
<span>
模版内容
<j-tooltip
title="语音验证码内容输入框,用于渲染验语音证码变量。"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-textarea
v-model:value="formData.template.ttsmessage"
:rows="5"
placeholder="内容中的变量将用于阿里云语音验证码"
/>
</j-form-item>
</template>
<!-- 短信 -->
<template v-if="formData.type === 'sms'">
<j-row :gutter="10">
<j-col :span="12">
<j-form-item
v-bind="validateInfos['template.code']"
>
<template #label>
<span>
模板
<j-tooltip
title="阿里云短信平台自定义的模版名称"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-select
v-model:value="
formData.template.code
"
placeholder="请选择模板"
@change="handleTemplateChange"
>
<j-select-option
v-for="(
item, index
) in templateList"
:key="index"
:value="item.templateCode"
>
{{ item.templateName }}
</j-select-option>
</j-select>
</j-form-item>
</j-col>
<j-col :span="12">
<j-form-item>
<template #label>
<span>
收信人
<j-tooltip
title="仅支持中国大陆号码"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-input
v-model:value="
formData.template.phoneNumber
"
placeholder="请输入收信人"
/>
</j-form-item>
</j-col>
</j-row>
<j-form-item
v-bind="validateInfos['template.signName']"
>
<template #label>
<span>
签名
<j-tooltip
title="用于短信内容签名信息显示"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-select
v-model:value="formData.template.signName"
placeholder="请选择签名"
>
<j-select-option
v-for="(item, index) in signsList"
:key="index"
:value="item.signName"
>
{{ item.signName }}
</j-select-option>
</j-select>
</j-form-item>
</template>
<!-- webhook -->
<template v-if="formData.type === 'webhook'">
<j-form-item label="请求体">
<j-radio-group
v-model:value="
formData.template.contextAsBody
"
style="margin-bottom: 20px"
>
<j-radio :value="true">默认</j-radio>
<j-radio :value="false">自定义</j-radio>
</j-radio-group>
<j-textarea
v-model:value="formData.template.body"
placeholder="请求体中的数据来自于发送通知时指定的所有变量"
v-if="formData.template.contextAsBody"
disabled
:rows="5"
/>
<div v-else style="height: 400px">
<MonacoEditor
theme="vs"
v-model:modelValue="
formData.template.body
"
/>
</div>
</j-form-item>
</template>
<template
v-if="
formData.type !== 'webhook' &&
formData.type !== 'voice'
"
>
<j-form-item
v-bind="validateInfos['template.message']"
>
<template #label>
<span>
模版内容
<j-tooltip
title="发送的内容,支持录入变量"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</j-tooltip>
</span>
</template>
<j-textarea
v-model:value="formData.template.message"
:rows="5"
:disabled="formData.type === 'sms'"
placeholder="变量格式:${name};
示例:尊敬的${name},${time}有设备触发告警,请注意处理"
/>
</j-form-item>
</template>
<j-form-item
label="变量列表"
v-if="
formData.variableDefinitions &&
formData.variableDefinitions.length
"
>
<VariableDefinitions
v-model:variableDefinitions="
formData.variableDefinitions
"
/>
</j-form-item>
<j-form-item label="说明">
<j-textarea
v-model:value="formData.description"
show-count
:maxlength="200"
:rows="5"
placeholder="请输入说明"
/>
</j-form-item>
<j-form-item>
<j-button
type="primary"
@click="handleSubmit"
:loading="btnLoading"
>
保存
</j-button>
</j-form-item>
</j-form>
</j-col>
<j-col :span="12" :push="2">
<Doc :docData="formData" />
</j-col>
</j-row>
</j-card>
</page-container>
</template>
<script setup lang="ts">
import { getImage } from '@/utils/comm';
import { Form, UploadChangeParam } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import type { IVariableDefinitions, TemplateFormData } from '../types';
import {
NOTICE_METHOD,
TEMPLATE_FIELD_MAP,
MSG_TYPE,
ROBOT_MSG_TYPE,
VOICE_TYPE,
} from '@/views/notice/const';
import templateApi from '@/api/notice/template';
import Doc from './doc/index';
import MonacoEditor from '@/components/MonacoEditor/index.vue';
import Attachments from './components/Attachments.vue';
import VariableDefinitions from './components/VariableDefinitions.vue';
import ToUser from './components/ToUser.vue';
import ToOrg from './components/ToOrg.vue';
import ToTag from './components/ToTag.vue';
import { FILE_UPLOAD } from '@/api/comm';
import { LocalStore } from '@/utils/comm';
import { TOKEN_KEY } from '@/utils/variable';
import { phoneRegEx } from '@/utils/validate';
import type { Rule } from 'ant-design-vue/es/form';
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>({
template: {
subject: '',
sendTo: [],
attachments: [],
message: '',
text: '',
},
name: '',
type: 'email',
provider: 'embedded',
description: '',
variableDefinitions: [],
configId: '',
});
/**
* 重置字段值
*/
const resetPublicFiles = () => {
formData.value.template = {};
switch (formData.value.provider) {
case 'dingTalkMessage':
formData.value.template.agentId = '';
formData.value.template.message = '';
formData.value.template.departmentIdList = '';
formData.value.template.userIdList = '';
break;
case 'dingTalkRobotWebHook':
formData.value.template.message = '';
formData.value.template.messageType = 'markdown';
formData.value.template.markdown = { text: '', title: '' };
break;
case 'corpMessage':
formData.value.template.agentId = '';
formData.value.template.message = '';
formData.value.template.toParty = '';
formData.value.template.toUser = '';
formData.value.template.toTag = '';
break;
case 'embedded':
formData.value.template.subject = '';
formData.value.template.message = '';
formData.value.template.text = '';
formData.value.template.sendTo = [];
formData.value.template.attachments = [];
break;
case 'aliyun':
formData.value.template.templateType = 'tts';
formData.value.template.templateCode = '';
formData.value.template.ttsCode = '';
// formData.value.template.message = '';
formData.value.template.ttsmessage = '';
formData.value.template.playTimes = 1;
formData.value.template.calledShowNumbers = '';
formData.value.template.calledNumber = '';
break;
case 'aliyunSms':
formData.value.template.code = '';
formData.value.template.message = '';
formData.value.template.phoneNumber = '';
formData.value.template.signName = '';
break;
case 'http':
formData.value.template.contextAsBody = true;
formData.value.template.body = '';
break;
}
formData.value.configId = undefined;
formData.value.variableDefinitions = [];
handleMessageTypeChange();
// console.log('formData.value.template: ', formData.value.template);
};
// 根据通知方式展示对应的字段
watch(
() => formData.value.type,
(val) => {
msgType.value = MSG_TYPE[val];
formData.value.provider =
route.params.id !== ':id'
? formData.value.provider
: msgType.value[0].value;
if (val !== 'email') getConfigList();
if (val === 'sms') {
getTemplateList();
getSignsList();
}
},
);
// 验证规则
const formRules = ref({
type: [{ required: true, message: '请选择通知方式' }],
name: [
{ required: true, message: '请输入名称' },
{ max: 64, message: '最多可输入64个字符' },
],
provider: [{ required: true, message: '请选择类型' }],
configId: [{ required: true, message: '请选择绑定配置' }],
// 钉钉
'template.agentId': [{ required: true, message: '请输入agentId' }],
'template.messageType': [{ required: true, message: '请选择消息类型' }],
'template.markdown.title': [
{ required: true, message: '请输入标题', trigger: 'change' },
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
],
'template.link.title': [
{ required: true, message: '请输入标题', trigger: 'change' },
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
],
// 'template.url': [{ required: true, message: '请输入WebHook' }],
// 微信
// 'template.agentId': [{ required: true, message: '请输入agentId' }],
// 邮件
'template.subject': [
{ required: true, message: '请输入标题' },
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
],
'template.sendTo': [
{
trigger: 'change',
validator(_rule: Rule, value: string[]) {
const regEmail =
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
let error;
if (value) {
value.some((item: string) => {
if (!regEmail.test(item)) {
error = item;
return true;
}
return false;
});
}
if (error)
return Promise.reject(error ? `${error}邮件格式错误` : '');
else return Promise.resolve();
},
},
],
// 阿里云语音
'template.templateType': [{ required: true, message: '请选择类型' }],
'template.templateCode': [{ required: true, message: '请输入模板ID' }],
'template.calledNumber': [
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
{
trigger: 'change',
validator(_rule: Rule, value: string) {
if (!value) return Promise.resolve();
if (!phoneRegEx(value)) return Promise.reject('请输入有效号码');
return Promise.resolve();
},
},
],
'template.calledShowNumbers': [
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
{
trigger: 'change',
validator(_rule: Rule, value: string) {
if (!value) return Promise.resolve();
if (!phoneRegEx(value)) return Promise.reject('请输入有效号码');
return Promise.resolve();
},
},
],
'template.playTimes': [
{
trigger: 'change',
validator(_rule: Rule, value: number) {
if (value < 1 || value > 3)
return Promise.reject('仅支持13次');
else return Promise.resolve();
},
},
],
// 短信
'template.code': [{ required: true, message: '请选择模板' }],
'template.signName': [{ required: true, message: '请输入签名' }],
// webhook
description: [{ max: 200, message: '最多可输入200个字符' }],
'template.message': [
{
required: true,
message: '请输入模板内容',
},
{ max: 500, message: '最多可输入500个字符', trigger: 'change' },
],
'template.ttsmessage': [{ max: 500, message: '最多可输入500个字符' }],
});
const { resetFields, validate, validateInfos, clearValidate } = useForm(
formData.value,
formRules.value,
);
// 钉钉机器人markdown标题变量提取
watch(
() => formData.value.template.markdown?.title,
(val) => {
if (!val) return;
variableReg();
},
{ deep: true },
);
// 钉钉机器人link标题变量提取
watch(
() => formData.value.template.link?.title,
(val) => {
if (!val) return;
variableReg();
},
{ deep: true },
);
// 邮件标题变量提取
watch(
() => formData.value.template.subject,
(val) => {
if (!val) return;
variableReg();
},
{ deep: true },
);
// 模板内容变量提取
watch(
() => formData.value.template.message,
(val) => {
if (!val) return;
variableReg();
},
{ deep: true },
);
// webhook请求体变量提取
watch(
() => formData.value.template.body,
(val) => {
if (!val) return;
variableReg();
},
{ deep: true },
);
/**
* 将需要提取变量的字段值拼接为一个字符串, 用于统一提取变量
*/
const spliceStr = () => {
let variableFieldsStr = formData.value.template.message;
if (formData.value.provider === 'dingTalkRobotWebHook') {
if (formData.value.template.messageType === 'markdown')
variableFieldsStr += formData.value.template.markdown
?.title as string;
if (formData.value.template.messageType === 'link')
variableFieldsStr += formData.value.template.link?.title as string;
}
if (formData.value.provider === 'embedded')
variableFieldsStr += formData.value.template.subject as string;
if (formData.value.provider === 'http')
variableFieldsStr += formData.value.template.body as string;
// console.log('variableFieldsStr: ', variableFieldsStr);
return variableFieldsStr || '';
};
/**
* 根据字段输入内容, 提取变量
* @param value
*/
const variableReg = () => {
const _val = spliceStr();
// 已经存在的变量
const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
// 正则提取${}里面的值
const pattern = /(?<=\$\{).*?(?=\})/g;
const titleList = _val.match(pattern)?.filter((f) => f);
const newKey = [...new Set(titleList)];
const result = newKey?.map((m) =>
oldKey.includes(m)
? formData.value.variableDefinitions.find((item) => item.id === m)
: {
id: m,
name: '',
type: 'string',
format: '%s',
},
);
formData.value.variableDefinitions = result as IVariableDefinitions[];
};
/**
* 钉钉机器人 消息类型选择改变
*/
const handleMessageTypeChange = () => {
if (formData.value.type !== 'dingTalk') return;
delete formData.value.template.markdown;
delete formData.value.template.link;
delete formData.value.template.text;
if (formData.value.template.messageType === 'link') {
formData.value.template.link = {
title: '',
picUrl: '',
messageUrl: '',
text: formData.value.template.message as string,
};
}
if (formData.value.template.messageType === 'markdown') {
formData.value.template.markdown = {
title: '',
text: formData.value.template.message as string,
};
}
if (formData.value.template.messageType === 'text') {
formData.value.template.text = {
content: formData.value.template.message as string,
};
}
formData.value.variableDefinitions = [];
// formData.value.template.message = '';
};
/**
* 获取详情
*/
const getDetail = async () => {
if (route.params.id !== ':id') {
const res = await templateApi.detail(route.params.id as string);
// formData.value = res.result;
Object.assign(formData.value, res.result);
// console.log('formData.value: ', formData.value);
}
};
getDetail();
/**
* 获取绑定配置
*/
const configList = ref();
const getConfigList = async () => {
const terms = [
{ column: 'type$IN', value: formData.value.type },
{ column: 'provider', value: formData.value.provider },
];
const { result } = await templateApi.getConfig({ terms });
configList.value = result;
};
/**
* 通知方式改变
*/
const handleTypeChange = () => {
setTimeout(() => {
formData.value.template =
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider];
resetPublicFiles();
}, 0);
};
/**
* 通知类型改变
*/
const handleProviderChange = () => {
formData.value.template =
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider];
// console.log('formData.value: ', formData.value);
// console.log('formData.value.template: ', formData.value.template);
getConfigList();
resetPublicFiles();
};
/**
* link消息类型 图片链接
*/
const handleLinkChange = (info: UploadChangeParam) => {
if (info.file.status === 'done') {
formData.value.template.link.picUrl = info.file.response?.result;
}
};
/**
* 配置选择改变
*/
const handleConfigChange = () => {
getTemplateList();
getSignsList();
};
/**
* 获取阿里模板
*/
const templateList = ref();
const getTemplateList = async () => {
const id = formData.value.configId || undefined;
const { result } = await templateApi.getAliTemplate(id);
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 getSignsList = async () => {
const id = formData.value.configId || undefined;
const { result } = await templateApi.getSigns(id);
signsList.value = result;
};
/**
* 表单提交
*/
const btnLoading = ref<boolean>(false);
const handleSubmit = () => {
// 变量列表存在, 且存在空值
if (
formData.value.variableDefinitions.length &&
formData.value.variableDefinitions.some((s: any) => !s.name)
)
return;
// 邮件没有配置字段
if (formData.value.type === 'email') delete formData.value.configId;
if (formData.value.template.messageType === 'markdown')
delete formData.value.template.link;
if (formData.value.template.messageType === 'link')
delete formData.value.template.markdown;
// console.log('formData.value: ', formData.value);
// 提交必填验证无法通过, 实际已有值, 问题未知, 暂时解决方法: 延迟验证
setTimeout(() => {
validate()
.then(async () => {
if (formData.value.provider === 'aliyun') {
formData.value.template.ttsCode =
formData.value.template.templateCode;
// 语音message字段与其他类型的message字段重名, 但语音不需要必填验证
// 取别名ttsmessage, 验证通过之后, 赋值回message字段, 并删除别名字段
formData.value.template.message =
formData.value.template.ttsmessage;
delete formData.value.template.ttsmessage;
}
btnLoading.value = true;
let res;
if (!formData.value.id) {
res = await templateApi.save(formData.value);
} else {
res = await templateApi.update(formData.value);
}
// console.log('res: ', res);
if (res?.success) {
message.success('保存成功');
router.back();
}
})
.catch((err) => {
console.log('err: ', err);
})
.finally(() => {
btnLoading.value = false;
});
}, 200);
};
// test
// watch(
// () => formData.value,
// (val) => {
// console.log('formData.value: ', val);
// },
// { deep: true },
// );
// test
</script>