nps/web/views/index/edit.html

<div class="row tile">
    <div class="col-md-6 col-md-auto">
        <div>
            <h3 class="tile-title">添加</h3>
            <div class="tile-body">
                <form>
                    <input type="hidden" name="id" value="{{.t.Id}}">
                    <div class="form-group">
                        <label class="control-label">模式</label>
                        <select class="form-control" name="type" id="type">
                            <option {{if eq "tunnelServer" .t.Mode}}selected{{end}} value="tunnelServer">tcp隧道</option>
                            <option {{if eq "udpServer" .t.Mode}}selected{{end}} value="udpServer">udp隧道</option>
                            <option {{if eq "socks5Server" .t.Mode}}selected{{end}} value="socks5Server">socks5代理
                            </option>
                            <option {{if eq "httpProxyServer" .t.Mode}}selected{{end}} value="httpProxyServer">http代理
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">备注</label>
                        <input class="form-control" value="{{.t.Remark}}" type="text" name="remark" placeholder="备注">
                    </div>
                    <div class="form-group" id="port">
                        <label class="control-label">监听的端口</label>
                        <input class="form-control" value="{{.t.TcpPort}}" type="text" name="port"
                               placeholder="公网服务器对外访问端口，例如8024">
                    </div>
                    <div class="form-group" id="target">
                        <label class="control-label">内网目标(仅tcp、udp隧道模式需填写)</label>
                        <input class="form-control" value="{{.t.Target}}" type="text" name="target"
                               placeholder="内网隧道目标，例如10.1.50.203:22">
                    </div>
                    <div class="form-group" id="client_id">
                        <label class="control-label">客户端ID</label>
                        <input class="form-control" value="{{.t.ClientId}}" type="text" name="client_id"
                               placeholder="客户端id">
                    </div>
                    <div class="form-group" id="use_client">
                        <label class="control-label">是否使用客户端配置</label>
                        <select class="form-control" name="use_client">
                            <option {{if eq false .t.UseClientCnf}}selected{{end}} value="0">否</option>
                            <option {{if eq  true .t.UseClientCnf}}selected{{end}} value="1">是</option>
                        </select>
                    </div>
                    <div class="form-group" id="compress">
                        <label class="control-label">数据压缩方式(所有模式均支持)</label>
                        <select class="form-control" name="compress">
                            <option {{if eq "" .t.Compress}}selected{{end}} value="">不压缩</option>
                            <option {{if eq "snappy" .t.Compress}}selected{{end}} value="snappy">snappy压缩</option>
                        </select>
                    </div>
                    <div class="form-group" id="crypt">
                        <label class="control-label">是否加密传输(所有模式均支持)</label>
                        <select class="form-control" name="crypt">
                            <option {{if eq false .t.Crypt}}selected{{end}} value="0">不加密</option>
                            <option {{if eq  true .t.Crypt}}selected{{end}} value="1">加密</option>
                        </select>
                    </div>
                    <div class="form-group" id="mux">
                        <label class="control-label">是否启用TCP复用(所有模式均支持)</label>
                        <select class="form-control" name="mux">
                            <option {{if eq false .t.Mux}}selected{{end}} value="0">不启用</option>
                            <option {{if eq  true .t.Mux}}selected{{end}} value="1">启用</option>
                        </select>
                    </div>
                    <div class="form-group" id="u">
                        <label class="control-label">验证用户名(仅socks5,web穿透支持)</label>
                        <input class="form-control" value="{{.t.U}}" type="text" name="u"
                               placeholder="不填则无需验证">
                    </div>
                    <div class="form-group" id="p">
                        <label class="control-label">验证密码(仅socks5,web穿透支持)</label>
                        <input class="form-control" value="{{.t.P}}" type="text" name="p"
                               placeholder="不填则无需验证">
                    </div>
                </form>
            </div>
            <div class="tile-footer">
                &nbsp;&nbsp;<button class="btn btn-success" href="#" id="add"><i
                    class="fa fa-fw fa-lg fa-eye"></i>保存
            </button>
            </div>
        </div>
    </div>
</div>
</main>
<script>
    var arr = []
    arr["all"] = ["type", "port", "compress", "u", "p", "target"]
    arr["tunnelServer"] = ["type", "port", "target", "u", "p", "compress"]
    arr["udpServer"] = ["type", "port", "target", "compress"]
    arr["socks5Server"] = ["type", "port", "compress", "u", "p"]
    arr["httpProxyServer"] = ["type", "port", "compress", "u", "p"]
    arrClientHide = ["compress", "u", "p", "crypt", "mux"]

    function resetForm() {
        for (var i = 0; i < arr["all"].length; i++) {
            $("#" + arr["all"][i]).css("display", "none")
        }
        o = $("#type option:selected").val()
        for (var i = 0; i < arr[o].length; i++) {
            $("#" + arr[o][i]).css("display", "block")
        }
    }

    function resetClientCnf() {
        for (var i = 0; i < arrClientHide.length; i++) {
            $("#" + arrClientHide[i]).css("display", "block")
        }
        op = $("#use_client  option:selected").val()
        if (op == 1) {
            for (var i = 0; i < arrClientHide.length; i++) {
                $("#" + arrClientHide[i]).css("display", "none")
            }
        }
    }

    $(function () {
        resetForm()
        resetClientCnf()
        $("#type").on("change", function () {
            resetForm()
            resetClientCnf()
        })
        $("#use_client").on("change", function () {
            resetForm()
            resetClientCnf()
        })
        $("#add").on("click", function () {
            $.ajax({
                type: "POST",
                url: "/index/edit",
                data: $("form").serializeArray(),
                success: function (res) {
                    alert(res.msg)
                    if (res.status) {
                        history.back(-1)
                    }
                }
            })
        })
    })
</script>