Files
EdgeAdmin/web/views/@default/admins/recipients/instances/update.html

391 lines
23 KiB
HTML
Raw Normal View History

2021-04-05 20:48:13 +08:00
{$layout}
{$template "instance_menu"}
{$template "/code_editor"}
<form class="ui form" data-tea-action="$" data-tea-success="success">
<csrf-token></csrf-token>
<input type="hidden" name="instanceId" :value="instance.id"/>
<table class="ui table definition selectable">
<tr>
<td>媒介名称 *</td>
<td>
<input type="text" name="name" ref="focus" maxlength="100" v-model="instance.name"/>
</td>
</tr>
<tr>
<td class="color-border title">媒介类型 *</td>
<td>
<message-media-selector :v-media-type="instance.media.type" @change="changeMediaType"></message-media-selector>
</td>
</tr>
<!-- E-mail -->
<tbody v-show="mediaType == 'email'">
<tr>
<td class="color-border">SMTP *</td>
<td>
<input type="text" name="emailSmtp" v-model="instance.params.smtp" maxlength="500" placeholder="类似于 smtp.xxx.com:465"/>
<p class="comment">只支持SSL或TLS连接端口通常为465或587。</p>
</td>
</tr>
<tr>
<td class="color-border">账号 *</td>
<td>
<input type="text" name="emailUsername" v-model="instance.params.username" maxlength="500" placeholder="类似于 xxx@xxx.com" @input="changeEmailUsername"/>
<p class="comment">邮箱账号,比如 123456@qq.com<span v-html="emailUsernameHelp"></span></p>
</td>
</tr>
<tr>
<td class="color-border">密码 *</td>
<td>
<input type="text" name="emailPassword" v-model="instance.params.password" maxlength="100"/>
<p class="comment">账号对应的密码或者授权码比如QQ邮箱就需要授权码</p>
</td>
</tr>
<tr>
<td class="color-border">发送者Email</td>
<td>
<input type="text" name="emailFrom" v-model="instance.params.from" maxlength="500" placeholder="类似于 xxx@xxx.com"/>
<p class="comment">默认和账号一致</p>
</td>
</tr>
</tbody>
<!-- WebHook -->
<tbody v-show="mediaType == 'webHook'">
<tr>
<td class="color-border">URL *</td>
<td>
<input type="text" name="webHookURL" v-model="instance.params.url" maxlength="500" placeholder="http://..."/>
<p class="comment">可以在URL中使用<span class="ui label tiny">${NoticeUser}</span><span class="ui label tiny">${NoticeSubject}</span><span class="ui label tiny">${NoticeBody}</span>来代表接收人标识、标题和内容。</p>
</td>
</tr>
<tr>
<td class="color-border">请求方法 *</td>
<td>
<select name="webHookMethod" v-model="webHookMethod" class="ui dropdown" style="width:10em">
<option v-for="method in methods" :value="method">{{method}}</option>
</select>
<p class="comment" v-if="webHookMethod == 'POST'">将以POST方式发送<span class="ui label tiny">NoticeUser</span><span class="ui label tiny">NoticeSubject</span><span class="ui label tiny">NoticeBody</span>参数,分别代表接收人标识、标题和内容</p>
</td>
</tr>
<tr v-show="advancedOptionsVisible">
<td class="color-border">自定义Header</td>
<td>
<div class="webHook-headers-box">
<span class="ui label tiny" v-for="(header,index) in webHookHeaders">{{header.name}}:{{header.value}}
<input type="hidden" name="webHookHeaderNames" :value="header.name"/>
<input type="hidden" name="webHookHeaderValues" :value="header.value"/>
<a href="" title="删除" @click.prevent="removeWebHookHeader(index)"><i class="icon remove"></i></a>
</span>
</div>
<button class="ui button tiny" type="button" @click.prevent="addWebHookHeader()" v-if="!webHookHeadersAdding">+</button>
<div v-if="webHookHeadersAdding">
<div class="ui fields inline">
<div class="ui field">
<input type="text" name="webHookHeaderName" v-model="webHookHeadersAddingName" placeholder="名称" maxlength="100" @keyup.enter="confirmWebHookHeadersAdding" @keypress.enter.prevent="1"/>
</div>
<div class="ui field">:</div>
<div class="ui field">
<input type="text" placeholder="值" v-model="webHookHeadersAddingValue" size="50" maxlength="256" @keyup.enter="confirmWebHookHeadersAdding" @keypress.enter.prevent="1"/>
</div>
</div>
<button class="ui button tiny" type="button" @click.prevent="confirmWebHookHeadersAdding()">确认添加</button>
&nbsp; <a href="" @click.prevent="cancelWebHookHeadersAdding()">取消</a>
</div>
</td>
</tr>
<tr v-show="webHookMethod == 'POST' && advancedOptionsVisible">
<td class="color-border">自定义内容</td>
<td>
<div class="ui menu tabular small attached">
<a href="" class="item" :class="{active:webHookContentType == 'params'}" @click.prevent="selectWebHookContentType('params')">参数对</a>
<a href="" class="item" :class="{active:webHookContentType == 'body'}" @click.prevent="selectWebHookContentType('body')">文本内容</a>
</div>
<div class="ui segment attached" v-if="webHookContentType == 'params'">
<input type="hidden" name="webHookContentType" value="params"/>
<div class="webHook-headers-box">
<span class="ui label tiny" v-for="(param,index) in webHookParams">{{param.name}}:{{param.value}}
<input type="hidden" name="webHookParamNames" :value="param.name"/>
<input type="hidden" name="webHookParamValues" :value="param.value"/>
<a href="" title="删除" @click.prevent="removeWebHookParam(index)"><i class="icon remove"></i></a>
</span>
</div>
<button class="ui button tiny" type="button" @click.prevent="addWebHookParam()" v-if="!webHookParamsAdding">+</button>
<div v-if="webHookParamsAdding">
<input type="hidden" name="webHookContentType" value="params"/>
<div class="ui fields inline">
<div class="ui field">
<input type="text" name="webHookParamName" v-model="webHookParamsAddingName" placeholder="名称" maxlength="100" @keyup.enter="confirmWebHookParamsAdding" @keypress.enter.prevent="1"/>
</div>
<div class="ui field">:</div>
<div class="ui field">
<textarea type="text" placeholder="值" v-model="webHookParamsAddingValue" cols="50" maxlength="1024" rows="2"></textarea>
</div>
</div>
<button class="ui button tiny" type="button" @click.prevent="confirmWebHookParamsAdding()">确认添加</button>
&nbsp; <a href="" @click.prevent="cancelWebHookParamsAdding()">取消</a>
</div>
</div>
<div class="ui segment attached" v-if="webHookContentType == 'body'">
<input type="hidden" name="webHookContentType" value="body"/>
<textarea name="webHookBody" v-model="webHookBody" rows="5" placeholder="发送的内容"></textarea>
<p class="comment">
内容中可以使用三个变量:<span class="ui label tiny">${NoticeUser}</span><span class="ui label tiny">${NoticeSubject}</span><span class="ui label tiny">${NoticeBody}</span>参数,分别代表接收人标识、标题和内容
</p>
</div>
</td>
</tr>
</tbody>
<!-- Script -->
<tbody v-show="mediaType == 'script'">
<tr>
<td class="color-border">脚本 *</td>
<td>
<input type="hidden" name="scriptType" :value="scriptTab"/>
<input type="hidden" name="scriptLang" :value="scriptLang"/>
<div class="ui tabular menu attached small">
<a class="item" :class="{active:scriptTab == 'path'}" @click.prevent="selectScriptTab('path')">脚本文件</a>
<a class="item" :class="{active:scriptTab == 'code'}" @click.prevent="selectScriptTab('code')">脚本代码</a>
</div>
<div class="ui bottom segment attached" v-show="scriptTab == 'path'">
<input type="text" name="scriptPath" v-model="instance.params.path" maxlength="500"/>
<p class="comment">如果是Shell脚本请不要忘记在头部添加 <em>#!脚本解释工具</em>,比如 <em>#!/bin/bash</em><br/>
执行此脚本时,在脚本中可以使用<span class="ui label tiny">${NoticeUser}</span><span class="ui label tiny">${NoticeSubject}</span><span class="ui label tiny">${NoticeBody}</span>三个环境变量分别代表通知的接收人标识、标题和内容。
</p>
</div>
<div class="ui bottom segment attached" v-show="scriptTab == 'code'" style="padding-top:0">
<div class="ui menu text small">
<a class="item" v-for="lang in scriptLangs" :class="{active:lang.code == scriptLang}" @click.prevent="selectScriptLang(lang.code)">{{lang.name}}</a>
</div>
<textarea name="scriptCode" id="script-code-editor" rows="1"></textarea>
<p class="comment">如果是Shell脚本请不要忘记在头部添加 <em>#!脚本解释工具</em>,比如 <em>#!/bin/bash</em><br/>
执行此脚本时,在脚本中可以使用<span class="ui label tiny">${NoticeUser}</span><span class="ui label tiny">${NoticeSubject}</span><span class="ui label tiny">${NoticeBody}</span>三个环境变量分别代表通知的接收人标识、标题和内容。
</p>
</div>
</td>
</tr>
<tr v-show="advancedOptionsVisible">
<td class="color-border">当前工作目录<em>CWD</em></td>
<td>
<input type="text" name="scriptCwd" v-model="instance.params.cwd" maxlength="500"/>
</td>
</tr>
<tr v-show="advancedOptionsVisible">
<td class="color-border">环境变量<em>ENV</em></td>
<td>
<div class="ui field">
<span class="ui label small" v-for="(var1, index) in env">
<input type="hidden" name="scriptEnvNames" :value="var1.name"/>
<input type="hidden" name="scriptEnvValues" :value="var1.value"/>
<em>{{var1.name}}</em>: {{var1.value}}
<a href="" @click.prevent="removeEnv(index)"><i class="icon remove"></i></a>
</span>
</div>
<div v-if="envAdding" class="ui fields inline">
<div class="ui field">
<input type="text" name="envAddingName" v-model="envAddingName" placeholder="变量名" style="width:9em" @keyup.enter="confirmAddEnv" @keypress.enter.prevent="1"/>
</div>
<div class="ui field">
<input type="text" name="envAddingValue" v-model="envAddingValue" placeholder="变量值" style="width:15em" @keyup.enter="confirmAddEnv" @keypress.enter.prevent="1"/>
</div>
<div class="ui field">
<button class="ui button" type="button" @click="confirmAddEnv()">添加</button>
</div>
<div class="ui field">
<a href="" @click.prevent="cancelEnv()"><i class="icon remove"></i></a>
</div>
</div>
<div class="ui field">
<button class="ui button small" type="button" @click="addEnv()">+</button>
</div>
</td>
</tr>
</tbody>
<!-- 钉钉 -->
<tbody v-show="mediaType == 'dingTalk'">
<tr>
<td class="color-border">Hook地址 *</td>
<td>
<textarea name="dingTalkWebHookURL" maxlength="500" placeholder="https://oapi.dingtalk.com/robot/send?access_token=xxx" v-model="instance.params.webHookURL" rows="2"></textarea>
<p class="comment">填入自定义群机器人的Hook地址<a href="https://developers.dingtalk.com/document/app/custom-robot-access" target="_blank">获取方法&raquo;</a></p>
</td>
</tr>
</tbody>
<!-- 企业微信 -->
<tbody v-show="mediaType == 'qyWeixin'">
<tr>
<td class="color-border">企业ID *</td>
<td>
<input type="text" name="qyWeixinCorporateId" maxlength="100" v-model="instance.params.corporateId" />
</td>
</tr>
<tr>
<td class="color-border">应用AgentId *</td>
<td>
<input type="text" name="qyWeixinAgentId" maxlength="100" v-model="instance.params.agentId"/>
</td>
</tr>
<tr>
<td class="color-border">应用Secret *</td>
<td>
<input type="text" name="qyWeixinAppSecret" maxlength="100" v-model="instance.params.appSecret"/>
</td>
</tr>
<tr>
<td class="color-border">内容文本格式</td>
<td>
<select name="qyWeixinTextFormat" v-model="instance.params.textFormat" class="ui dropdown" style="width:10em">
<option value="text">普通文本</option>
<option value="markdown">Markdown</option>
</select>
<p class="comment" v-if="instance.params.textFormat == 'markdown'">企业微信目前只支持少数的Markdown语法<a href="https://work.weixin.qq.com/api/doc#90000/90135/90236/%E6%94%AF%E6%8C%81%E7%9A%84markdown%E8%AF%AD%E6%B3%95" target="_blank">点击这里了解&raquo;</a> </p>
</td>
</tr>
</tbody>
<!-- 企业微信群机器人 -->
<tbody v-show="mediaType == 'qyWeixinRobot'">
<tr>
<td class="color-border">WebHook地址 *</td>
<td>
<textarea name="qyWeixinRobotWebHookURL" v-model="instance.params.webHookURL" maxlength="500" placeholder="https://qyapi.weixin.qq.com/cgi-bin/webHook/send?key=xxx" rows="2"></textarea>
<p class="comment">填入自定义群机器人的WebHook地址</p>
</td>
</tr>
<tr>
<td class="color-border">内容文本格式</td>
<td>
<select name="qyWeixinRobotTextFormat" v-model="instance.params.textFormat" class="ui dropdown" style="width:10em">
<option value="text">普通文本</option>
<option value="markdown">Markdown</option>
</select>
<p class="comment" v-if="instance.params.textFormat == 'markdown'">企业微信目前只支持少数的Markdown语法<a href="https://work.weixin.qq.com/api/doc#90000/90135/91760/markdown%E7%B1%BB%E5%9E%8B" target="_blank">点击这里了解&raquo;</a> </p>
</td>
</tr>
</tbody>
<!-- 阿里云短信 -->
<tbody v-show="mediaType == 'aliyunSms'">
<tr>
<td class="color-border">签名名称 *</td>
<td>
<input type="text" name="aliyunSmsSign" maxlength="100" v-model="instance.params.sign"/>
<p class="comment">已经审核通过的短信签名名称</p>
</td>
</tr>
<tr>
<td class="color-border">模板CODE *</td>
<td>
<input type="text" name="aliyunSmsTemplateCode" maxlength="100" v-model="instance.params.templateCode" placeholder="类似于SMS_12345"/>
<p class="comment">已经审核通过的模板CODE</p>
</td>
</tr>
<tr>
<td class="color-border">模板变量 *</td>
<td>
<div class="ui field">
<span class="ui label small" v-for="(var1, index) in aliyunSmsTemplateVars">
<input type="hidden" name="aliyunSmsTemplateVarNames" :value="var1.name"/>
<input type="hidden" name="aliyunSmsTemplateVarValues" :value="var1.value"/>
<em>{{var1.name}}</em>: {{var1.value}}
<a href="" @click.prevent="removeAliyunSmsTemplateVar(index)"><i class="icon remove"></i></a>
</span>
</div>
<div v-if="aliyunSmsTemplateVarAdding" class="ui fields inline">
<div class="ui field">
<input type="text" name="aliyunSmsTemplateVarAddingName" v-model="aliyunSmsTemplateVarAddingName" placeholder="变量名" style="width:9em" @keyup.enter="confirmAddAliyunSmsTemplateVar" @keypress.enter.prevent="1"/>
</div>
<div class="ui field">
<input type="text" name="aliyunSmsTemplateVarAddingValue" v-model="aliyunSmsTemplateVarAddingValue" placeholder="变量值" style="width:15em" @keyup.enter="confirmAddAliyunSmsTemplateVar" @keypress.enter.prevent="1"/>
</div>
<div class="ui field">
<button class="ui button" type="button" @click="confirmAddAliyunSmsTemplateVar()">添加</button>
</div>
<div class="ui field">
<a href="" @click.prevent="cancelAliyunSmsTemplateVar()"><i class="icon remove"></i></a>
</div>
</div>
<div class="ui field">
<button class="ui button small" type="button" @click="addAliyunSmsTemplateVar()">+</button>
</div>
<p class="comment">模板中使用的变量,在变量中可以使用<span class="ui label tiny">${NoticeUser}</span><span class="ui label tiny">${NoticeSubject}</span><span class="ui label tiny">${NoticeBody}</span>来代表接收人标识、标题和内容。</p>
</td>
</tr>
<tr>
<td class="color-border">AccessKey ID *</td>
<td>
<input type="text" name="aliyunSmsAccessKeyId" maxlength="100" v-model="instance.params.accessKeyId"/>
<p class="comment">在阿里云控制台中的访问控制中某个用户的AccessKey ID</p>
</td>
</tr>
<tr>
<td class="color-border">AccessKey Secret *</td>
<td>
<input type="text" name="aliyunSmsAccessKeySecret" maxlength="100" v-model="instance.params.accessKeySecret"/>
<p class="comment">在阿里云控制台中的访问控制中某个用户的AccessKey Secret和上面的AccessKey ID匹配</p>
</td>
</tr>
</tbody>
<!-- Telegram -->
<tbody v-if="mediaType == 'telegram'">
<tr>
<td class="color-border">机器人Token</td>
<td>
<input type="text" name="telegramToken" v-model="instance.params.token"/>
<p class="comment">在创建机器人的时候可以获得,类似于 123456:AAAA-AAAAAAAAAAAAAAAAAAAA</p>
</td>
</tr>
</tbody>
2021-08-24 15:46:37 +08:00
<tr>
<td>发送频率<em>(次/分钟)</em></td>
<td>
<div class="ui fields inline">
<div class="ui field">
<div class="ui right labeled input">
<input type="text" name="rateCount" size="4" v-model="instance.rate.count" maxlength="4"/>
2021-08-24 15:46:37 +08:00
<span class="ui label"></span>
</div>
</div>
<div class="ui field">/</div>
<div class="ui field">
<div class="ui right labeled input">
<input type="text" name="rateMinutes" size="4" v-model="instance.rate.minutes" maxlength="4"/>
2021-08-24 15:46:37 +08:00
<span class="ui label">分钟</span>
</div>
</div>
</div>
<p class="comment">用来限制此媒介的发送频率。</p>
</td>
</tr>
2021-08-24 20:45:07 +08:00
<tr>
<td>忽略相似消息周期</td>
<td>
<div class="ui input right labeled">
<input type="text" name="hashLife" style="width: 5em" maxlength="4" v-model="instance.hashLife"/>
<span class="ui label"></span>
</div>
<p class="comment">可以在这个时间内忽略相似消息防止短时间内消息数量过载。不填或者为0表示默认为60秒。</p>
</td>
</tr>
2021-04-05 20:48:13 +08:00
<tr>
<td>备注</td>
<td>
<textarea rows="3" name="description" maxlength="100" v-model="instance.description"></textarea>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<checkbox name="isOn" value="1" v-model="instance.isOn"></checkbox>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>