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

{$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>
        <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"/>
                            <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"/>
                            <span class="ui label">分钟</span>
                        </div>
                    </div>
                </div>
                <p class="comment">用来限制此媒介的发送频率。</p>
            </td>
        </tr>
        <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>
        <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>