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-03-08 16:10:14 +08:00
parent f3bebd063b
commit 8622bfe8f1
9 changed files with 248 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/notice/Template/Debug/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-modal <j-modal
v-model:visible="_vis" v-model:visible="_vis"
title="调试" title="调试"
cancelText="取消" cancelText="取消"
@ -8,33 +8,33 @@
@cancel="handleCancel" @cancel="handleCancel"
:confirmLoading="btnLoading" :confirmLoading="btnLoading"
> >
<a-form ref="formRef" layout="vertical" :model="formData"> <j-form ref="formRef" layout="vertical" :model="formData">
<a-form-item <j-form-item
label="通知配置" label="通知配置"
name="configId" name="configId"
:rules="{ required: true, message: '该字段为必填字段' }" :rules="{ required: true, message: '该字段为必填字段' }"
> >
<a-select <j-select
v-model:value="formData.configId" v-model:value="formData.configId"
placeholder="请选择通知配置" placeholder="请选择通知配置"
> >
<a-select-option <j-select-option
v-for="(item, index) in configList" v-for="(item, index) in configList"
:key="index" :key="index"
:value="item.id" :value="item.id"
> >
{{ item.name }} {{ item.name }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="变量" label="变量"
v-if=" v-if="
formData.templateDetailTable && formData.templateDetailTable &&
formData.templateDetailTable.length formData.templateDetailTable.length
" "
> >
<a-table <j-table
row-key="id" row-key="id"
:columns="columns" :columns="columns"
:data-source="formData.templateDetailTable" :data-source="formData.templateDetailTable"
@ -48,7 +48,7 @@
<span>{{ record[column.dataIndex] }}</span> <span>{{ record[column.dataIndex] }}</span>
</template> </template>
<template v-else> <template v-else>
<a-form-item <j-form-item
:name="['templateDetailTable', index, 'value']" :name="['templateDetailTable', index, 'value']"
:rules="{ :rules="{
required: record.required, required: record.required,
@ -78,13 +78,13 @@
v-model:modelValue="record.value" v-model:modelValue="record.value"
:itemType="record.type" :itemType="record.type"
/> />
</a-form-item> </j-form-item>
</template> </template>
</template> </template>
</a-table> </j-table>
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

8
src/views/notice/Template/Detail/components/Attachments.vue
View File

@ -6,7 +6,7 @@
v-for="(item, index) in fileList" v-for="(item, index) in fileList"
:key="index" :key="index"
> >
<a-input v-model:value="item.name"> <j-input v-model:value="item.name">
<template #addonAfter> <template #addonAfter>
<a-upload <a-upload
name="file" name="file"
@ -20,14 +20,14 @@
<upload-outlined /> <upload-outlined />
</a-upload> </a-upload>
</template> </template>
</a-input> </j-input>
<delete-outlined <delete-outlined
@click="handleDelete(item.id)" @click="handleDelete(item.id)"
style="cursor: pointer" style="cursor: pointer"
/> />
</div> </div>
<a-button <j-button
type="dashed" type="dashed"
@click="handleAdd" @click="handleAdd"
style="width: 100%; margin-top: 5px" style="width: 100%; margin-top: 5px"
@ -36,7 +36,7 @@
<plus-outlined /> <plus-outlined />
</template> </template>
添加 添加
</a-button> </j-button>
</div> </div>
</template> </template>

2
src/views/notice/Template/Detail/components/ToOrg.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-select <j-select
:options="options" :options="options"
@change="change" @change="change"
placeholder="请选择收信部门" placeholder="请选择收信部门"

2
src/views/notice/Template/Detail/components/ToTag.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-select <j-select
:options="options" :options="options"
@change="change" @change="change"
placeholder="请选择标签推送，多个标签用,号分隔" placeholder="请选择标签推送，多个标签用,号分隔"

2
src/views/notice/Template/Detail/components/ToUser.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-select <j-select
:options="options" :options="options"
@change="change" @change="change"
placeholder="请选择收信人" placeholder="请选择收信人"

40
src/views/notice/Template/Detail/components/VariableDefinitions.vue
View File

@ -1,7 +1,7 @@
<!-- 模板内容-变量列表 --> <!-- 模板内容-变量列表 -->
<template> <template>
<div class="table-wrapper"> <div class="table-wrapper">
<a-table <j-table
:columns="columns" :columns="columns"
:data-source="dataSource" :data-source="dataSource"
bordered bordered
@ -11,52 +11,52 @@
<span v-if="column.dataIndex === 'id'"> <span v-if="column.dataIndex === 'id'">
{{ record[column.dataIndex] }} {{ record[column.dataIndex] }}
</span> </span>
<a-input <j-input
v-if="column.dataIndex === 'name'" v-if="column.dataIndex === 'name'"
v-model:value="record.name" v-model:value="record.name"
/> />
<a-select <j-select
v-if="column.dataIndex === 'type'" v-if="column.dataIndex === 'type'"
v-model:value="record.type" v-model:value="record.type"
@change="handleTypeChange(record)" @change="handleTypeChange(record)"
> >
<a-select-option value="string">字符串</a-select-option> <j-select-option value="string">字符串</j-select-option>
<a-select-option value="date">时间</a-select-option> <j-select-option value="date">时间</j-select-option>
<a-select-option value="double">数字</a-select-option> <j-select-option value="double">数字</j-select-option>
</a-select> </j-select>
<template v-if="column.dataIndex === 'format'"> <template v-if="column.dataIndex === 'format'">
<span v-if="record.type === 'string'"> <span v-if="record.type === 'string'">
{{ record.format }} {{ record.format }}
</span> </span>
<a-select <j-select
v-if="record.type === 'date'" v-if="record.type === 'date'"
v-model:value="record.format" v-model:value="record.format"
> >
<a-select-option value="timestamp"> <j-select-option value="timestamp">
timestamp timestamp
</a-select-option> </j-select-option>
<a-select-option value="yyyy-MM-dd"> <j-select-option value="yyyy-MM-dd">
yyyy-MM-dd yyyy-MM-dd
</a-select-option> </j-select-option>
<a-select-option value="yyyy-MM-dd HH:mm:ss"> <j-select-option value="yyyy-MM-dd HH:mm:ss">
yyyy-MM-dd HH:mm:ss yyyy-MM-dd HH:mm:ss
</a-select-option> </j-select-option>
</a-select> </j-select>
<a-input <j-input
v-if="record.type === 'double'" v-if="record.type === 'double'"
v-model:value="record.format" v-model:value="record.format"
> >
<template #suffix> <template #suffix>
<a-tooltip <j-tooltip
title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数" title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
> >
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</template> </template>
</a-input> </j-input>
</template> </template>
</template> </template>
</a-table> </j-table>
</div> </div>
</template> </template>

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

@ -1,36 +1,36 @@
<!-- 通知模板详情 --> <!-- 通知模板详情 -->
<template> <template>
<page-container> <page-container>
<a-card> <j-card>
<a-row> <j-row>
<a-col :span="10"> <j-col :span="10">
<a-form layout="vertical"> <j-form layout="vertical">
<a-form-item <j-form-item
label="通知方式" label="通知方式"
v-bind="validateInfos.type" v-bind="validateInfos.type"
> >
<a-select <j-select
v-model:value="formData.type" v-model:value="formData.type"
placeholder="请选择通知方式" placeholder="请选择通知方式"
:disabled="!!formData.id" :disabled="!!formData.id"
@change="handleTypeChange" @change="handleTypeChange"
> >
<a-select-option <j-select-option
v-for="(item, index) in NOTICE_METHOD" v-for="(item, index) in NOTICE_METHOD"
:key="index" :key="index"
:value="item.value" :value="item.value"
> >
{{ item.label }} {{ item.label }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
<a-form-item label="名称" v-bind="validateInfos.name"> <j-form-item label="名称" v-bind="validateInfos.name">
<a-input <j-input
v-model:value="formData.name" v-model:value="formData.name"
placeholder="请输入名称" placeholder="请输入名称"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="类型" label="类型"
v-bind="validateInfos.provider" v-bind="validateInfos.provider"
v-if=" v-if="
@ -43,67 +43,67 @@
v-model="formData.provider" v-model="formData.provider"
@change="handleProviderChange" @change="handleProviderChange"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-bind="validateInfos.configId" v-bind="validateInfos.configId"
v-if="formData.type !== 'email'" v-if="formData.type !== 'email'"
> >
<template #label> <template #label>
<span> <span>
绑定配置 绑定配置
<a-tooltip <j-tooltip
title="使用固定的通知配置来发送此通知模版" title="使用固定的通知配置来发送此通知模版"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-select <j-select
v-model:value="formData.configId" v-model:value="formData.configId"
placeholder="请选择绑定配置" placeholder="请选择绑定配置"
@change="handleConfigChange" @change="handleConfigChange"
> >
<a-select-option <j-select-option
v-for="(item, index) in configList" v-for="(item, index) in configList"
:key="index" :key="index"
:value="item.id" :value="item.id"
> >
{{ item.name }} {{ item.name }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
<!-- 钉钉 --> <!-- 钉钉 -->
<template v-if="formData.type === 'dingTalk'"> <template v-if="formData.type === 'dingTalk'">
<template <template
v-if="formData.provider === 'dingTalkMessage'" v-if="formData.provider === 'dingTalkMessage'"
> >
<a-form-item <j-form-item
v-bind="validateInfos['template.agentId']" v-bind="validateInfos['template.agentId']"
> >
<template #label> <template #label>
<span> <span>
AgentID AgentID
<a-tooltip title="应用唯一标识"> <j-tooltip title="应用唯一标识">
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value=" v-model:value="
formData.template.agentId formData.template.agentId
" "
placeholder="请输入AppSecret" placeholder="请输入AppSecret"
/> />
</a-form-item> </j-form-item>
<a-row :gutter="10"> <j-row :gutter="10">
<a-col :span="12"> <j-col :span="12">
<a-form-item label="收信部门"> <j-form-item label="收信部门">
<ToOrg <ToOrg
v-model:toParty=" v-model:toParty="
formData.template formData.template
@ -112,14 +112,14 @@
:type="formData.type" :type="formData.type"
:config-id="formData.configId" :config-id="formData.configId"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
收信人 收信人
<a-tooltip <j-tooltip
title="如果不填写该字段，将在使用此模板发送通知时进行指定" title="如果不填写该字段，将在使用此模板发送通知时进行指定"
> >
<AIcon <AIcon
@ -128,7 +128,7 @@
margin-left: 2px; margin-left: 2px;
" "
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<ToUser <ToUser
@ -138,29 +138,29 @@
:type="formData.type" :type="formData.type"
:config-id="formData.configId" :config-id="formData.configId"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</template> </template>
<template <template
v-if=" v-if="
formData.provider === 'dingTalkRobotWebHook' formData.provider === 'dingTalkRobotWebHook'
" "
> >
<a-form-item <j-form-item
label="消息类型" label="消息类型"
v-bind=" v-bind="
validateInfos['template.messageType'] validateInfos['template.messageType']
" "
> >
<a-select <j-select
v-model:value=" v-model:value="
formData.template.messageType formData.template.messageType
" "
placeholder="请选择消息类型" placeholder="请选择消息类型"
@change="handleMessageTypeChange" @change="handleMessageTypeChange"
> >
<a-select-option <j-select-option
v-for="( v-for="(
item, index item, index
) in ROBOT_MSG_TYPE" ) in ROBOT_MSG_TYPE"
@ -168,16 +168,16 @@
:value="item.value" :value="item.value"
> >
{{ item.label }} {{ item.label }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
<template <template
v-if=" v-if="
formData.template.messageType === formData.template.messageType ===
'markdown' 'markdown'
" "
> >
<a-form-item <j-form-item
label="标题" label="标题"
v-bind=" v-bind="
validateInfos[ validateInfos[
@ -185,34 +185,34 @@
] ]
" "
> >
<a-input <j-input
v-model:value=" v-model:value="
formData.template.markdown.title formData.template.markdown.title
" "
placeholder="请输入标题" placeholder="请输入标题"
/> />
</a-form-item> </j-form-item>
</template> </template>
<template <template
v-if=" v-if="
formData.template.messageType === 'link' formData.template.messageType === 'link'
" "
> >
<a-form-item <j-form-item
label="标题" label="标题"
v-bind=" v-bind="
validateInfos['template.link.title'] validateInfos['template.link.title']
" "
> >
<a-input <j-input
v-model:value=" v-model:value="
formData.template.link.title formData.template.link.title
" "
placeholder="请输入标题" placeholder="请输入标题"
/> />
</a-form-item> </j-form-item>
<a-form-item label="图片链接"> <j-form-item label="图片链接">
<a-input <j-input
v-model:value=" v-model:value="
formData.template.link.picUrl formData.template.link.picUrl
" "
@ -239,55 +239,55 @@
/> />
</a-upload> </a-upload>
</template> </template>
</a-input> </j-input>
</a-form-item> </j-form-item>
<a-form-item label="内容链接"> <j-form-item label="内容链接">
<a-input <j-input
v-model:value=" v-model:value="
formData.template.link formData.template.link
.messageUrl .messageUrl
" "
placeholder="请输入内容链接" placeholder="请输入内容链接"
/> />
</a-form-item> </j-form-item>
</template> </template>
</template> </template>
</template> </template>
<!-- 微信 --> <!-- 微信 -->
<template v-if="formData.type === 'weixin'"> <template v-if="formData.type === 'weixin'">
<a-form-item <j-form-item
v-bind="validateInfos['template.agentId']" v-bind="validateInfos['template.agentId']"
> >
<template #label> <template #label>
<span> <span>
AgentId AgentId
<a-tooltip title="应用唯一标识"> <j-tooltip title="应用唯一标识">
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value="formData.template.agentId" v-model:value="formData.template.agentId"
placeholder="请输入agentId" placeholder="请输入agentId"
/> />
</a-form-item> </j-form-item>
<a-row :gutter="10"> <j-row :gutter="10">
<a-col :span="12"> <j-col :span="12">
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
收信人 收信人
<a-tooltip <j-tooltip
title="如果不填写该字段,将在使用此模版发送通知时进行指定。" title="如果不填写该字段,将在使用此模版发送通知时进行指定。"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<ToUser <ToUser
@ -297,10 +297,10 @@
:type="formData.type" :type="formData.type"
:config-id="formData.configId" :config-id="formData.configId"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item label="收信部门"> <j-form-item label="收信部门">
<ToOrg <ToOrg
v-model:toParty=" v-model:toParty="
formData.template.toParty formData.template.toParty
@ -308,21 +308,21 @@
:type="formData.type" :type="formData.type"
:config-id="formData.configId" :config-id="formData.configId"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
标签推送 标签推送
<a-tooltip <j-tooltip
title="本企业微信的标签ID列表,最多支持100个,如果不填写该字段,将在使用此模版发送通知时进行指定" title="本企业微信的标签ID列表,最多支持100个,如果不填写该字段,将在使用此模版发送通知时进行指定"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<ToTag <ToTag
@ -330,62 +330,62 @@
:type="formData.type" :type="formData.type"
:config-id="formData.configId" :config-id="formData.configId"
/> />
</a-form-item> </j-form-item>
</template> </template>
<!-- 邮件 --> <!-- 邮件 -->
<template v-if="formData.type === 'email'"> <template v-if="formData.type === 'email'">
<a-form-item <j-form-item
v-bind="validateInfos['template.subject']" v-bind="validateInfos['template.subject']"
> >
<template #label> <template #label>
<span> <span>
标题 标题
<a-tooltip title="邮件标题"> <j-tooltip title="邮件标题">
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value="formData.template.subject" v-model:value="formData.template.subject"
placeholder="请输入标题" placeholder="请输入标题"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
收件人 收件人
<a-tooltip <j-tooltip
title="多个收件人用换行分隔 最大支持1000个号码" title="多个收件人用换行分隔 最大支持1000个号码"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-select <j-select
mode="tags" mode="tags"
:options="[]" :options="[]"
v-model:value="formData.template.sendTo" v-model:value="formData.template.sendTo"
placeholder="请选择收件人" placeholder="请选择收件人"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
附件信息 附件信息
<a-tooltip <j-tooltip
title="附件只输入文件名称将在发送邮件时进行文件上传" title="附件只输入文件名称将在发送邮件时进行文件上传"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<Attachments <Attachments
@ -393,44 +393,44 @@
formData.template.attachments formData.template.attachments
" "
/> />
</a-form-item> </j-form-item>
</template> </template>
<!-- 语音 --> <!-- 语音 -->
<template v-if="formData.type === 'voice'"> <template v-if="formData.type === 'voice'">
<a-form-item <j-form-item
v-bind="validateInfos['template.templateType']" v-bind="validateInfos['template.templateType']"
> >
<template #label> <template #label>
<span> <span>
类型 类型
<a-tooltip <j-tooltip
title="语音验证码类型可配置变量，并且只支持数字和英文字母" title="语音验证码类型可配置变量，并且只支持数字和英文字母"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-select <j-select
v-model:value=" v-model:value="
formData.template.templateType formData.template.templateType
" "
placeholder="请选择类型" placeholder="请选择类型"
> >
<a-select-option <j-select-option
v-for="(item, index) in VOICE_TYPE" v-for="(item, index) in VOICE_TYPE"
:key="index" :key="index"
:value="item.value" :value="item.value"
> >
{{ item.label }} {{ item.label }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
<a-row :gutter="10"> <j-row :gutter="10">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
v-bind=" v-bind="
validateInfos[ validateInfos[
'template.templateCode' 'template.templateCode'
@ -440,49 +440,49 @@
<template #label> <template #label>
<span> <span>
模板ID 模板ID
<a-tooltip <j-tooltip
title="阿里云内部分配的唯一ID标识" title="阿里云内部分配的唯一ID标识"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value=" v-model:value="
formData.template.templateCode formData.template.templateCode
" "
placeholder="请输入模板ID" placeholder="请输入模板ID"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
被叫号码 被叫号码
<a-tooltip <j-tooltip
title="仅支持中国大陆号码" title="仅支持中国大陆号码"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value=" v-model:value="
formData.template.calledNumber formData.template.calledNumber
" "
placeholder="请输入被叫号码" placeholder="请输入被叫号码"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-form-item <j-form-item
v-bind=" v-bind="
validateInfos['template.calledShowNumbers'] validateInfos['template.calledShowNumbers']
" "
@ -490,92 +490,92 @@
<template #label> <template #label>
<span> <span>
被叫显号 被叫显号
<a-tooltip <j-tooltip
title="必须是已购买的号码,用于呼叫号码显示" title="必须是已购买的号码,用于呼叫号码显示"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value=" v-model:value="
formData.template.calledShowNumbers formData.template.calledShowNumbers
" "
placeholder="请输入被叫显号" placeholder="请输入被叫显号"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
播放次数 播放次数
<a-tooltip title="语音文件的播放次数"> <j-tooltip title="语音文件的播放次数">
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value="formData.template.playTimes" v-model:value="formData.template.playTimes"
placeholder="请输入播放次数" placeholder="请输入播放次数"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="formData.template.templateType === 'tts'" v-if="formData.template.templateType === 'tts'"
> >
<template #label> <template #label>
<span> <span>
模版内容 模版内容
<a-tooltip <j-tooltip
title="语音验证码内容输入框，用于渲染验语音证码变量。" title="语音验证码内容输入框，用于渲染验语音证码变量。"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-textarea <j-textarea
v-model:value="formData.template.message" v-model:value="formData.template.message"
show-count show-count
:rows="5" :rows="5"
placeholder="内容中的变量将用于阿里云语音验证码" placeholder="内容中的变量将用于阿里云语音验证码"
/> />
</a-form-item> </j-form-item>
</template> </template>
<!-- 短信 --> <!-- 短信 -->
<template v-if="formData.type === 'sms'"> <template v-if="formData.type === 'sms'">
<a-row :gutter="10"> <j-row :gutter="10">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
v-bind="validateInfos['template.code']" v-bind="validateInfos['template.code']"
> >
<template #label> <template #label>
<span> <span>
模板 模板
<a-tooltip <j-tooltip
title="阿里云短信平台自定义的模版名称" title="阿里云短信平台自定义的模版名称"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-select <j-select
v-model:value=" v-model:value="
formData.template.code formData.template.code
" "
placeholder="请选择模板" placeholder="请选择模板"
@change="handleTemplateChange" @change="handleTemplateChange"
> >
<a-select-option <j-select-option
v-for="( v-for="(
item, index item, index
) in templateList" ) in templateList"
@ -583,77 +583,77 @@
:value="item.templateCode" :value="item.templateCode"
> >
{{ item.templateName }} {{ item.templateName }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item> <j-form-item>
<template #label> <template #label>
<span> <span>
收信人 收信人
<a-tooltip <j-tooltip
title="仅支持中国大陆号码" title="仅支持中国大陆号码"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-input <j-input
v-model:value=" v-model:value="
formData.template.phoneNumber formData.template.phoneNumber
" "
placeholder="请输入收信人" placeholder="请输入收信人"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-form-item <j-form-item
v-bind="validateInfos['template.signName']" v-bind="validateInfos['template.signName']"
> >
<template #label> <template #label>
<span> <span>
签名 签名
<a-tooltip <j-tooltip
title="用于短信内容签名信息显示" title="用于短信内容签名信息显示"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-select <j-select
v-model:value="formData.template.signName" v-model:value="formData.template.signName"
placeholder="请选择签名" placeholder="请选择签名"
> >
<a-select-option <j-select-option
v-for="(item, index) in signsList" v-for="(item, index) in signsList"
:key="index" :key="index"
:value="item.signName" :value="item.signName"
> >
{{ item.signName }} {{ item.signName }}
</a-select-option> </j-select-option>
</a-select> </j-select>
</a-form-item> </j-form-item>
</template> </template>
<!-- webhook --> <!-- webhook -->
<template v-if="formData.type === 'webhook'"> <template v-if="formData.type === 'webhook'">
<a-form-item label="请求体"> <j-form-item label="请求体">
<a-radio-group <j-radio-group
v-model:value=" v-model:value="
formData.template.contextAsBody formData.template.contextAsBody
" "
style="margin-bottom: 20px" style="margin-bottom: 20px"
> >
<a-radio :value="true">默认</a-radio> <j-radio :value="true">默认</j-radio>
<a-radio :value="false">自定义</a-radio> <j-radio :value="false">自定义</j-radio>
</a-radio-group> </j-radio-group>
<a-textarea <j-textarea
v-model:value="formData.template.body" v-model:value="formData.template.body"
placeholder="请求体中的数据来自于发送通知时指定的所有变量" placeholder="请求体中的数据来自于发送通知时指定的所有变量"
v-if="formData.template.contextAsBody" v-if="formData.template.contextAsBody"
@ -668,7 +668,7 @@
" "
/> />
</div> </div>
</a-form-item> </j-form-item>
</template> </template>
<template <template
v-if=" v-if="
@ -676,23 +676,23 @@
formData.type !== 'voice' formData.type !== 'voice'
" "
> >
<a-form-item <j-form-item
v-bind="validateInfos['template.message']" v-bind="validateInfos['template.message']"
> >
<template #label> <template #label>
<span> <span>
模版内容 模版内容
<a-tooltip <j-tooltip
title="发送的内容，支持录入变量" title="发送的内容，支持录入变量"
> >
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style="margin-left: 2px" style="margin-left: 2px"
/> />
</a-tooltip> </j-tooltip>
</span> </span>
</template> </template>
<a-textarea <j-textarea
v-model:value="formData.template.message" v-model:value="formData.template.message"
:maxlength="200" :maxlength="200"
:rows="5" :rows="5"
@ -700,9 +700,9 @@
placeholder="变量格式:${name}; placeholder="变量格式:${name};
示例:尊敬的${name},${time}有设备触发告警,请注意处理" 示例:尊敬的${name},${time}有设备触发告警,请注意处理"
/> />
</a-form-item> </j-form-item>
</template> </template>
<a-form-item <j-form-item
label="变量列表" label="变量列表"
v-if=" v-if="
formData.variableDefinitions && formData.variableDefinitions &&
@ -714,32 +714,32 @@
formData.variableDefinitions formData.variableDefinitions
" "
/> />
</a-form-item> </j-form-item>
<a-form-item label="说明"> <j-form-item label="说明">
<a-textarea <j-textarea
v-model:value="formData.description" v-model:value="formData.description"
show-count show-count
:maxlength="200" :maxlength="200"
:rows="5" :rows="5"
placeholder="请输入说明" placeholder="请输入说明"
/> />
</a-form-item> </j-form-item>
<a-form-item> <j-form-item>
<a-button <j-button
type="primary" type="primary"
@click="handleSubmit" @click="handleSubmit"
:loading="btnLoading" :loading="btnLoading"
> >
保存 保存
</a-button> </j-button>
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-col> </j-col>
<a-col :span="12" :push="2"> <j-col :span="12" :push="2">
<Doc :docData="formData" /> <Doc :docData="formData" />
</a-col> </j-col>
</a-row> </j-row>
</a-card> </j-card>
</page-container> </page-container>
</template> </template>

12
src/views/notice/Template/Log/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%"> <j-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
<j-advanced-search <j-advanced-search
type="simple" type="simple"
:columns="columns" :columns="columns"
@ -21,18 +21,18 @@
{{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }} {{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
<a-space> <j-space>
<a-badge <j-badge
:status="slotProps.state.value" :status="slotProps.state.value"
:text="slotProps.state.text" :text="slotProps.state.text"
></a-badge> ></j-badge>
<AIcon <AIcon
v-if="slotProps.state.value === 'error'" v-if="slotProps.state.value === 'error'"
type="ExclamationCircleOutlined" type="ExclamationCircleOutlined"
style="color: #1d39c4; cursor: pointer" style="color: #1d39c4; cursor: pointer"
@click="handleError(slotProps.errorStack)" @click="handleError(slotProps.errorStack)"
/> />
</a-space> </j-space>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<AIcon <AIcon
@ -42,7 +42,7 @@
/> />
</template> </template>
</JProTable> </JProTable>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

24
src/views/notice/Template/index.vue
View File

@ -16,7 +16,7 @@
:gridColumn="3" :gridColumn="3"
> >
<template #headerTitle> <template #headerTitle>
<a-space> <j-space>
<PermissionButton <PermissionButton
type="primary" type="primary"
@click="handleAdd" @click="handleAdd"
@ -36,7 +36,7 @@
导入 导入
</PermissionButton> </PermissionButton>
</a-upload> </a-upload>
<a-popconfirm <j-popconfirm
title="确认导出？" title="确认导出？"
ok-text="确定" ok-text="确定"
cancel-text="取消" cancel-text="取消"
@ -47,8 +47,8 @@
> >
导出 导出
</PermissionButton> </PermissionButton>
</a-popconfirm> </j-popconfirm>
</a-space> </j-space>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -71,22 +71,22 @@
<h3 class="card-item-content-title"> <h3 class="card-item-content-title">
{{ slotProps.name }} {{ slotProps.name }}
</h3> </h3>
<a-row> <j-row>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
通知方式 通知方式
</div> </div>
<div> <div>
{{ getMethodTxt(slotProps.type) }} {{ getMethodTxt(slotProps.type) }}
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text">说明</div> <div class="card-item-content-text">说明</div>
<Ellipsis> <Ellipsis>
{{ slotProps.description }} {{ slotProps.description }}
</Ellipsis> </Ellipsis>
</a-col> </j-col>
</a-row> </j-row>
</template> </template>
<template #actions="item"> <template #actions="item">
<PermissionButton <PermissionButton
@ -119,7 +119,7 @@
</span> </span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<template <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
@ -138,7 +138,7 @@
<template #icon><AIcon :type="i.icon" /></template> <template #icon><AIcon :type="i.icon" /></template>
</PermissionButton> </PermissionButton>
</template> </template>
</a-space> </j-space>
</template> </template>
</JProTable> </JProTable>