From 5c1506a4c4363f47003a04b912bcad86adbc81c7 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Wed, 22 Feb 2023 16:35:23 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E9=80=9A=E7=9F=A5=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/notice/Template/Detail/index.vue | 337 ++++++++++++++++++---
 1 file changed, 300 insertions(+), 37 deletions(-)

diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue
index 257dd71d..09850394 100644
--- a/src/views/notice/Template/Detail/index.vue
+++ b/src/views/notice/Template/Detail/index.vue
@@ -44,10 +44,22 @@
                             />
                         </a-form-item>
                         <a-form-item
-                            label="绑定配置"
                             v-bind="validateInfos.configId"
                             v-if="formData.type !== 'email'"
                         >
+                            <template #label>
+                                <span>
+                                    绑定配置
+                                    <a-tooltip
+                                        title="使用固定的通知配置来发送此通知模版"
+                                    >
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            style="margin-left: 2px"
+                                        />
+                                    </a-tooltip>
+                                </span>
+                            </template>
                             <a-select
                                 v-model:value="formData.configId"
                                 placeholder="请选择绑定配置"
@@ -68,9 +80,19 @@
                                 v-if="formData.provider === 'dingTalkMessage'"
                             >
                                 <a-form-item
-                                    label="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
                                         v-model:value="
                                             formData.template.agentId
@@ -78,6 +100,45 @@
                                         placeholder="请输入AppSecret"
                                     />
                                 </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
                                 v-if="
@@ -191,9 +252,19 @@
                         <!-- 微信 -->
                         <template v-if="formData.type === 'weixin'">
                             <a-form-item
-                                label="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
                                     v-model:value="formData.template.agentId"
                                     placeholder="请输入agentId"
@@ -201,7 +272,20 @@
                             </a-form-item>
                             <a-row :gutter="10">
                                 <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
                                             v-model:toUser="
                                                 formData.template.toUser
@@ -223,7 +307,20 @@
                                     </a-form-item>
                                 </a-col>
                             </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
                                     v-model:toTag="formData.template.toTag"
                                     :type="formData.type"
@@ -234,15 +331,38 @@
                         <!-- 邮件 -->
                         <template v-if="formData.type === 'email'">
                             <a-form-item
-                                label="标题"
                                 v-bind="validateInfos['template.subject']"
                             >
+                                <template #label>
+                                    <span>
+                                        标题
+                                        <a-tooltip title="邮件标题">
+                                            <AIcon
+                                                type="QuestionCircleOutlined"
+                                                style="margin-left: 2px"
+                                            />
+                                        </a-tooltip>
+                                    </span>
+                                </template>
                                 <a-input
                                     v-model:value="formData.template.subject"
                                     placeholder="请输入标题"
                                 />
                             </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
                                     mode="tags"
                                     :options="[]"
@@ -250,7 +370,20 @@
                                     placeholder="请选择收件人"
                                 />
                             </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
                                     v-model:attachments="
                                         formData.template.attachments
@@ -261,9 +394,21 @@
                         <!-- 语音 -->
                         <template v-if="formData.type === 'voice'">
                             <a-form-item
-                                label="类型"
                                 v-bind="validateInfos['template.templateType']"
                             >
+                                <template #label>
+                                    <span>
+                                        类型
+                                        <a-tooltip
+                                            title="语音验证码类型可配置变量，并且只支持数字和英文字母"
+                                        >
+                                            <AIcon
+                                                type="QuestionCircleOutlined"
+                                                style="margin-left: 2px"
+                                            />
+                                        </a-tooltip>
+                                    </span>
+                                </template>
                                 <a-select
                                     v-model:value="
                                         formData.template.templateType
@@ -282,13 +427,25 @@
                             <a-row :gutter="10">
                                 <a-col :span="12">
                                     <a-form-item
-                                        label="模板ID"
                                         v-bind="
                                             validateInfos[
                                                 'template.templateCode'
                                             ]
                                         "
                                     >
+                                        <template #label>
+                                            <span>
+                                                模板ID
+                                                <a-tooltip
+                                                    title="阿里云内部分配的唯一ID标识"
+                                                >
+                                                    <AIcon
+                                                        type="QuestionCircleOutlined"
+                                                        style="margin-left: 2px"
+                                                    />
+                                                </a-tooltip>
+                                            </span>
+                                        </template>
                                         <a-input
                                             v-model:value="
                                                 formData.template.templateCode
@@ -298,7 +455,20 @@
                                     </a-form-item>
                                 </a-col>
                                 <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
                                             v-model:value="
                                                 formData.template.calledNumber
@@ -308,7 +478,20 @@
                                     </a-form-item>
                                 </a-col>
                             </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
                                     v-model:value="
                                         formData.template.calledShowNumbers
@@ -316,16 +499,39 @@
                                     placeholder="请输入被叫显号"
                                 />
                             </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
                                     v-model:value="formData.template.playTimes"
                                     placeholder="请输入播放次数"
                                 />
                             </a-form-item>
                             <a-form-item
-                                label="模版内容"
                                 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
                                     v-model:value="formData.template.message"
                                     show-count
@@ -339,14 +545,27 @@
                             <a-row :gutter="10">
                                 <a-col :span="12">
                                     <a-form-item
-                                        label="模板"
                                         v-bind="validateInfos['template.code']"
                                     >
+                                        <template #label>
+                                            <span>
+                                                模板
+                                                <a-tooltip
+                                                    title="阿里云短信平台自定义的模版名称"
+                                                >
+                                                    <AIcon
+                                                        type="QuestionCircleOutlined"
+                                                        style="margin-left: 2px"
+                                                    />
+                                                </a-tooltip>
+                                            </span>
+                                        </template>
                                         <a-select
                                             v-model:value="
                                                 formData.template.code
                                             "
                                             placeholder="请选择模板"
+                                            @change="handleTemplateChange"
                                         >
                                             <a-select-option
                                                 v-for="(
@@ -361,7 +580,20 @@
                                     </a-form-item>
                                 </a-col>
                                 <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
                                             v-model:value="
                                                 formData.template.phoneNumber
@@ -372,9 +604,21 @@
                                 </a-col>
                             </a-row>
                             <a-form-item
-                                label="签名"
                                 v-bind="validateInfos['template.signName']"
                             >
+                                <template #label>
+                                    <span>
+                                        签名
+                                        <a-tooltip
+                                            title="用于短信内容签名信息显示"
+                                        >
+                                            <AIcon
+                                                type="QuestionCircleOutlined"
+                                                style="margin-left: 2px"
+                                            />
+                                        </a-tooltip>
+                                    </span>
+                                </template>
                                 <a-select
                                     v-model:value="formData.template.signName"
                                     placeholder="请选择签名"
@@ -419,17 +663,28 @@
                             </a-form-item>
                         </template>
                         <a-form-item
-                            label="模版内容"
                             v-if="
-                                formData.type !== 'sms' &&
                                 formData.type !== 'webhook' &&
                                 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
                                 v-model:value="formData.template.message"
                                 :maxlength="200"
                                 :rows="5"
+                                :disabled="formData.type === 'sms'"
                                 placeholder="变量格式:${name};
     示例:尊敬的${name},${time}有设备触发告警,请注意处理"
                             />
@@ -549,8 +804,13 @@ watch(
         formData.value.template =
             TEMPLATE_FIELD_MAP[val][formData.value.provider];
 
-        getConfigList();
+        if (val !== 'email') getConfigList();
         clearValid();
+
+        if (val === 'sms') {
+            getTemplateList();
+            getSignsList();
+        }
     },
 );
 
@@ -589,6 +849,7 @@ const formRules = ref({
     'template.signName': [{ required: true, message: '请输入签名' }],
     // webhook
     description: [{ max: 200, message: '最多可输入200个字符' }],
+    'template.message': [{ required: true, message: '请输入' }],
 });
 
 const { resetFields, validate, validateInfos, clearValidate } = useForm(
@@ -634,16 +895,14 @@ const clearValid = () => {
  * 获取详情
  */
 const getDetail = async () => {
-    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);
-
-    if (formData.value.type === 'sms') {
-        getTemplateList();
-        getSignsList();
+    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();
 
 /**
  * 获取绑定配置
@@ -657,7 +916,6 @@ const getConfigList = async () => {
     const { result } = await templateApi.getConfig({ terms });
     configList.value = result;
 };
-getConfigList();
 
 /**
  * link消息类型 图片链接
@@ -681,25 +939,30 @@ const handleConfigChange = () => {
  */
 const templateList = ref();
 const getTemplateList = async () => {
-    const { result } = await templateApi.getAliTemplate(
-        formData.value.configId,
-    );
+    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 { result } = await templateApi.getSigns(formData.value.configId);
+    const id = formData.value.configId || undefined;
+    const { result } = await templateApi.getSigns(id);
     signsList.value = result;
 };
 
-onMounted(() => {
-    if (route.params.id) getDetail();
-});
-
 /**
  * 表单提交
  */