zszq-trs/YLErpWeb/Areas/Admin/Views/OtcConfig/SmtpConfig.cshtml

@model YLErp.MailKit.SmtpConfig

@{

    ViewData["Title"] = "邮件发送配置";

    var pageObj = new
    {
        Model = Model,
        AjaxSaveSmtpConfig = Url.Action("AjaxSaveSmtpConfig"),
        AjaxSendMailTest = Url.Action("AjaxSendMailTest")
    };
}

@section heads{
    <style>
        .btn-primary {
            min-width: 100px;
        }
    </style>
}
<div class="card">
    <div class="card-header">
        <h4 class="card-title">邮件发送配置</h4>
    </div>
    <div class="card-body" id="configCont" v-cloak>
        <form class="form-layout" onsubmit="return false;" id="form1">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-row">
                        <label class="form-label col-auto">主机:</label>
                        <div class="col">
                            <input type="text" class="form-control" name="Server" v-model="Server" maxlength="50">
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label col-auto">端口:</label>
                        <div class="col">
                            <input type="number" class="form-control" name="Port" v-model="Port" step="1" min="0" max="66666">
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label col-auto">选项:</label>
                        <div class="col">
                            <!--使用SSL-->
                            <label class="mr-2"><input type="checkbox" class="mr-1" name="EnableSsl" v-model="EnableSsl">使用SSL</label>
                            <!--压缩附件-->
                            <label class="mr-2"><input type="checkbox" class="mr-1" name="ZipAttach" v-model="ZipAttach">压缩附件</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <label class="form-label col-auto">用户</label>
                <div class="col">
                    <input type="text" class="form-control" name="UserName" v-model="UserName" maxlength="100">
                </div>
                <label class="form-label col-auto w-auto">密码</label>
                <div class="col">
                    <input type="password" class="form-control" name="Password" v-model="Password" maxlength="30">
                </div>
                <div class="col-auto">
                    <!--需要回执-->
                    <label><input type="checkbox" class="mr-1" name="Receipt" v-model="Receipt">需要回执</label>
                </div>
                <label class="form-label col-auto">显示名称</label>
                <div class="col">
                    <input type="text" class="form-control" name="From" v-model="From" maxlength="100" placeholder="可不填,默认为用户">
                </div>
            </div>

            <div class="form-row" v-for="item in OtherUsers">
                <label class="form-label col-auto"><a href="javascript:;" v-on:click="removeUser(item)"><i class="fa fa-remove"></i></a> 用户</label>
                <div class="col">
                    <input type="text" class="form-control" name="UserName" v-model="item.UserName" maxlength="100">
                </div>
                <label class="form-label col-auto w-auto">密码</label>
                <div class="col">
                    <input type="password" class="form-control" name="Password" v-model="item.Password" maxlength="30">
                </div>
                <div class="col-auto">
                    <!--需要回执-->
                    <input type="hidden" name="Receipt" value="false">
                    <label><input type="checkbox" class="mr-1" name="Receipt" v-model="item.Receipt">需要回执</label>
                </div>
                <label class="form-label col-auto">显示名称</label>
                <div class="col">
                    <input type="text" class="form-control" name="From" v-model="item.From" maxlength="100" placeholder="可不填,默认为用户">
                </div>
            </div>
        </form>
        <div class="offset-3 mt-5">
            <button type="button" class="btn btn-primary" v-on:click="saveConfig">保存</button>
            <button type="button" class="btn btn-primary" v-on:click="newUser">新增用户</button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h4 class="card-title">邮件发送测试</h4>
    </div>
    <div class="card-body">
        <div class="form-inline">
            <div class="form-group">
                <span>发送测试邮件到&nbsp;&nbsp;</span>
                <input type="text" class="form-control" name="mailTo" id="txtmailTo" style="width:300px;" />
                <button class="btn btn-primary ml-2" id="btnSendMailTest" onclick="sendMailTest()">发送</button>
            </div>
        </div>
    </div>
</div>

@section scripts{

    <script>

        const page = @Json.Serialize(pageObj);

        !page.Model.OtherUsers && (page.Model.OtherUsers = []);

        const vue = new Vue({
            el: '#configCont',
            data: page.Model,
            methods: {
                newUser() {
                    this.OtherUsers.push({ UserName: '', Password: '', Receipt: true });
                },
                removeUser(item) {
                    var index = this.OtherUsers.indexOf(item);
                    this.OtherUsers.splice(index,1);
                },
                saveConfig() {
                    var users = this.OtherUsers.map(x => (x.UserName || '').trim().toLowerCase());
                    users.push((this.UserName || '').trim().toLowerCase());
                    if (users.some(x => !x)) {
                        return main.alert('用户不能为空');
                    }
                    if (users.length !== _.uniq(users).length) {
                        return main.alert('用户不能重复');
                    }
                    var $e = $(event.target).prop('disabled', true);
                    main.post(page.AjaxSaveSmtpConfig, this.$data).done(function (resp) {
                        layer.msg('保存成功');
                    }).always(function () {
                        $e.prop('disabled', false);
                    });
                }
            }
        });

        function sendMailTest() {
            var $e = $(event.target).prop('disabled', true);
            main.post(page.AjaxSendMailTest, { mailTo: $('#txtmailTo').val() }).done(function (resp) {
                layer.msg('发送成功');
            }).always(function () {
                $e.prop('disabled', false);
            });
        }

    </script>
}