fix: bug#10242 #10245

src/views/notice/Template/Detail/components/VariableDefinitions.vue

@@ -11,10 +11,26 @@
                 <span v-if="column.dataIndex === 'id'">
                     {{ record[column.dataIndex] }}
                 </span>
-                <j-input
+                <template v-if="column.dataIndex === 'name'">
-                    v-if="column.dataIndex === 'name'"
+                    <j-input
-                    v-model:value="record.name"
+                        v-model:value="record.name"
-                />
+                        :class="
+                            !record.name || record.name.length > 64
+                                ? 'has-error'
+                                : ''
+                        "
+                    />
+                    <!-- antd useForm 无table表单校验 手动添加校验 -->
+                    <div
+                        class="error-text"
+                        v-show="!record.name || record.name.length > 64"
+                    >
+                        <span v-show="!record.name"> 该字段是必填字段 </span>
+                        <span v-show="record.name.length > 64">
+                            最多可输入64个字符
+                        </span>
+                    </div>
+                </template>
                 <j-select
                     v-if="column.dataIndex === 'type'"
                     v-model:value="record.type"
@@ -91,7 +107,7 @@ const columns = [
     {
         title: '名称',
         dataIndex: 'name',
-        // width: 160,
+        width: 160,
     },
     {
         title: '类型',
@@ -133,4 +149,20 @@ const handleTypeChange = (record: IVariable) => {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.table-wrapper {
+    .has-error {
+        border-color: rgba(255, 77, 79);
+        &:focus {
+            border-color: rgba(255, 120, 117);
+            box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+            border-right-width: 1px !important;
+            outline: 0;
+        }
+    }
+    .error-text {
+        color: rgba(255, 77, 79);
+        font-size: 12px;
+    }
+}
+</style>

src/views/notice/Template/Detail/index.vue

@@ -526,6 +526,7 @@
                             </j-form-item>
                             <j-form-item
                                 v-if="formData.template.templateType === 'tts'"
+                                v-bind="validateInfos['template.ttsmessage']"
                             >
                                 <template #label>
                                     <span>
@@ -541,8 +542,7 @@
                                     </span>
                                 </template>
                                 <j-textarea
-                                    v-model:value="formData.template.message"
+                                    v-model:value="formData.template.ttsmessage"
-                                    show-count
                                     :rows="5"
                                     placeholder="内容中的变量将用于阿里云语音验证码"
                                 />
@@ -840,7 +840,8 @@ const resetPublicFiles = () => {
             formData.value.template.templateType = 'tts';
             formData.value.template.templateCode = '';
             formData.value.template.ttsCode = '';
-            formData.value.template.message = '';
+            // formData.value.template.message = '';
+            formData.value.template.ttsmessage = '';
             formData.value.template.playTimes = 1;
             formData.value.template.calledShowNumbers = '';
             formData.value.template.calledNumber = '';
@@ -910,26 +911,29 @@ const formRules = ref({
     // 阿里云语音
     'template.templateType': [{ required: true, message: '请选择类型' }],
     'template.templateCode': [{ required: true, message: '请输入模板ID' }],
+    'template.calledShowNumbers': [
+        {
+            trigger: 'change',
+            validator(_rule: Rule, value: string) {
+                if (!value) return Promise.resolve();
+                if (!phoneRegEx(value)) return Promise.reject('请输入有效号码');
+                return Promise.resolve();
+            },
+        },
+    ],
     // 短信
     'template.code': [{ required: true, message: '请选择模板' }],
     'template.signName': [{ required: true, message: '请输入签名' }],
     // webhook
     description: [{ max: 200, message: '最多可输入200个字符' }],
     'template.message': [
-        { required: true, message: '请输入' },
+        {
+            required: true,
+            message: '请输入',
+        },
         { max: 500, message: '最多可输入500个字符' },
     ],
-    'template.calledShowNumbers': [
+    'template.ttsmessage': [{ max: 500, message: '最多可输入500个字符' }],
-        {
-            trigger: 'blur',
-            validator(_rule: Rule, value: string) {
-                if (!phoneRegEx(value)) {
-                    return Promise.reject('请输入有效号码');
-                }
-                return Promise.resolve();
-            },
-        },
-    ],
 });
 
 const { resetFields, validate, validateInfos, clearValidate } = useForm(
@@ -1033,6 +1037,7 @@ const variableReg = () => {
  * 钉钉机器人 消息类型选择改变
  */
 const handleMessageTypeChange = () => {
+    if (formData.value.type !== 'dingTalk') return;
     delete formData.value.template.markdown;
     delete formData.value.template.link;
     delete formData.value.template.text;
@@ -1159,6 +1164,13 @@ const getSignsList = async () => {
  */
 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;
@@ -1169,9 +1181,16 @@ const handleSubmit = () => {
     setTimeout(() => {
         validate()
             .then(async () => {
-                if (formData.value.provider === 'ttsCode')
+                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) {

src/views/notice/Template/types.d.ts

@@ -60,6 +60,7 @@ export type TemplateFormData = {
         templateCode?: string;
         ttsCode?: string;
         // message?: string;
+        ttsmessage?: string;
         playTimes?: number;
         calledShowNumbers?: string;
         calledNumber?: string;

src/views/notice/const.ts

@@ -189,7 +189,8 @@ export const TEMPLATE_FIELD_MAP = {
             templateType: 'tts',
             templateCode: '',
             ttsCode: '',
-            message: '',
+            // message: '',
+            ttsmessage: '',
             playTimes: 1,
             calledShowNumbers: '',
             calledNumber: '',