Arch1Panel/apps/nps/v0.30.2/web/views/index/hlist.html

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 langtag="page-hostlist"></h5>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="content">
                    <div class="table-responsive">
                        <div id="toolbar">
                            <a class="btn btn-primary dim" href="{{.web_base_url}}/index/addhost?vkey={{.task_id}}&client_id={{.client_id}}">
                                <i class="fa fa-fw fa-lg fa-plus"></i>
                                <span langtag="word-add"></span>
                            </a>
                        </div>
                        <table class="table-striped table-hover" data-mobile-responsive="true" id="taskList_table"></table>
                    </div>
                </div>
                <div class="ibox-content">

                    <table id="table"></table>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: window.location, // 服务器数据的加载地址
        queryParams: function (params) {
            return {
                "offset": params.offset,
                "limit": params.limit,
                "client_id": {{.client_id}},
                "search": params.search,
                "sort": params.sort,
                "order": params.order
            }
        },
        search: true,
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true,//分页
        sidePagination: 'server',//服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50, 100, 'all'],
        cookie: true,
        cookieIdTable: 'host',
        cookieStorage: 'localStorage',
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            tmp = '<b langtag="word-exportflow"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.ExportFlow) + '</span>&emsp;'
                + '<b langtag="word-inletflow"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow) + '</span>&emsp;'
                + '<b langtag="word-crypt"></b>: <span langtag="word-' + row.Client.Cnf.Crypt + '"></span>&emsp;'
                + '<b langtag="word-compress"></b>: <span langtag="word-' + row.Client.Cnf.Compress + '"></span>&emsp;'
                + '<b langtag="word-flowlimit"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + row.Flow.FlowLimit + 'MB</span>&emsp;'
                + '<b langtag="word-timelimit"></b>: <span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + row.Flow.TimeLimit + '</span>&emsp;<br/><br>'
                + '<b langtag="word-autohttps"></b>: <span onclick="submitform(\'turn\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'auto_https\'})" langtag="word-' + row.AutoHttps + '"></span>&emsp;'
                + '<b langtag="word-autocors"></b>: <span onclick="submitform(\'turn\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'auto_cors\'})" langtag="word-' + row.AutoCORS + '"></span>&emsp;'
                + '<b langtag="word-compatmode"></b>: <span onclick="submitform(\'turn\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'compat_mode\'})" langtag="word-' + row.CompatMode + '"></span>&emsp;'
                + '<b langtag="word-httpsjustproxy"></b>: <span onclick="submitform(\'turn\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'https_just_proxy\'})" langtag="word-' + row.HttpsJustProxy + '"></span>&emsp;'
                + '<b langtag="word-targetishttps"></b>: <span onclick="submitform(\'turn\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'target_is_https\'})" langtag="word-ishttps' + row.TargetIsHttps + '"></span>&emsp;<br/><br>'
                + '<b langtag="word-basicusername"></b>: ' + row.Client.Cnf.U + '&emsp;'
                + '<b langtag="word-basicpassword"></b>: ' + row.Client.Cnf.P + '&emsp;<br/><br>'
                + '<b langtag="word-auth"></b>: ' + (row.UserAuth && row.UserAuth.Content ? row.UserAuth.Content : '') + '&emsp;<br/><br>'
                + '<b langtag="word-requesthost"></b>: ' + row.HostChange + '&emsp;<br/><br>'
                + '<b langtag="word-requestheader"></b>: ' + row.HeaderChange + '&emsp;<br/><br>'
                + '<b langtag="word-autossl"></b>: <span onclick="submitform(\'turn\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'auto_ssl\'})" langtag="word-' + row.AutoSSL + '"></span>&emsp;'
            if (row.Scheme != "http" && row.HttpsJustProxy == false && row.AutoSSL == false) {
                return tmp + "<br/><br>"
                + '<b langtag="word-httpscert"></b>: <div onclick="oCopy(this)" style="height:60px; max-width:75vw; overflow:auto; white-space:nowrap; border:1px solid #ccc; padding:5px; box-sizing:border-box;">' + row.CertFile + '</div>&emsp;<br/>'
                + '<b langtag="word-httpskey"></b>: <div onclick="oCopy(this)" style="height:60px; max-width:75vw; overflow:auto; white-space:nowrap; border:1px solid #ccc; padding:5px; box-sizing:border-box;">' + row.KeyFile + '</div>&emsp;<br/><br>'
            }
            return tmp
        },
        // 表格的列
        columns: [
            {
                field: 'Id', //域值
                title: '<span langtag="word-id"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Client.Id', //域值
                title: '<span langtag="word-clientid"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    var text = row.Client.Remark ? (row.Client.Id + ' · ' + row.Client.Remark) : row.Client.Id
                    return '<span onclick="copyText(\'' + row.Client.VerifyKey + '\')">' + text + '</span>'
                }
            },
            {
                field: 'Remark', //域值
                title: '<span langtag="word-remark"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Client.VerifyKey', //域值
                title: '<span langtag="word-verifykey"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Host', //域值
                title: '<span langtag="word-host"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    hosturl = ((row.Scheme == 'http') ? 'http://' : 'https://') + row.Host + ((row.Scheme == 'http') ? ":{{.httpProxyPort}}" : ":{{.httpsProxyPort}}") + row.Location
                    return '<a href="' + hosturl + '" target="_blank">' + row.Host + '</a>'
                }
            },
            {
                field: 'Scheme', //域值
                title: '<span langtag="word-scheme"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span langtag="word-' + value + '"></span>'
                }
            },
            {
                field: 'TargetIsHttps', //域值
                title: '<span langtag="word-targettype"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span langtag="word-ishttps' + value + '" onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stophost\', {\'id\':' + row.Id + ', \'mode\': \'target_is_https\'})"></span>'
                    } else {
                        return '<span langtag="word-ishttps' + value + '" onclick="submitform(\'start\', \'{{.web_base_url}}/index/starthost\', {\'id\':' + row.Id + ', \'mode\': \'target_is_https\'})"></span>'
                    }
                }
            },
            {
                field: 'Target.TargetStr', //域值
                title: '<span langtag="word-target"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Location', //域值
                title: '<span langtag="word-path"></span>', //标题
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'PathRewrite', //域值
                title: '<span langtag="word-pathrewrite"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'HttpsJustProxy', //域值
                title: '<span langtag="word-httpsjustproxytitle"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stophost\', {\'id\':' + row.Id + ', \'mode\': \'https_just_proxy\'})"></span>'
                    } else {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'start\', \'{{.web_base_url}}/index/starthost\', {\'id\':' + row.Id + ', \'mode\': \'https_just_proxy\'})"></span>'
                    }
                }
            },
            {
                field: 'AutoSSL', //域值
                title: '<span langtag="word-autossl"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stophost\', {\'id\':' + row.Id + ', \'mode\': \'auto_ssl\'})"></span>'
                    } else {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'start\', \'{{.web_base_url}}/index/starthost\', {\'id\':' + row.Id + ', \'mode\': \'auto_ssl\'})"></span>'
                    }
                }
            },
            {
                field: 'AutoHttps', //域值
                title: '<span langtag="word-autohttpstitle"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stophost\', {\'id\':' + row.Id + ', \'mode\': \'auto_https\'})"></span>'
                    } else {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'start\', \'{{.web_base_url}}/index/starthost\', {\'id\':' + row.Id + ', \'mode\': \'auto_https\'})"></span>'
                    }
                }
            },
            {
                field: 'AutoCORS', //域值
                title: '<span langtag="word-autocorstitle"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stophost\', {\'id\':' + row.Id + ', \'mode\': \'auto_cors\'})"></span>'
                    } else {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'start\', \'{{.web_base_url}}/index/starthost\', {\'id\':' + row.Id + ', \'mode\': \'auto_cors\'})"></span>'
                    }
                }
            },
            {
                field: 'CompatMode', //域值
                title: '<span langtag="word-compatmode"></span>', //标题
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'stop\', \'{{.web_base_url}}/index/stophost\', {\'id\':' + row.Id + ', \'mode\': \'compat_mode\'})"></span>'
                    } else {
                        return '<span langtag="word-' + value + '" onclick="submitform(\'start\', \'{{.web_base_url}}/index/starthost\', {\'id\':' + row.Id + ', \'mode\': \'compat_mode\'})"></span>'
                    }
                }
            },
            {
                field: 'InletFlow', //域值
                title: '<span langtag="word-inletflow"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow) + '</span>'
                }
            },
            {
                field: 'ExportFlow', //域值
                title: '<span langtag="word-exportflow"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: false, //false表示不显示
                sortable: true, //启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.ExportFlow) + '</span>'
                }
            },
            {
                field: 'TotalFlow', //域值
                title: '<span langtag="word-totalflow"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/index/clearhost\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow + row.Flow.ExportFlow) + '</span>'
                }
            },
            {
                field: 'NowConn', //域值
                title: '<span langtag="word-nowconn"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'IsClose', //域值
                title: '<span langtag="word-runstatus"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-badge" langtag="word-close"></span>'
                    } else {
                        return '<span class="badge badge-primary" langtag="word-open"></span>'
                    }
                }
            },
            {
                field: 'Client.IsConnect', //域值
                title: '<span langtag="word-clientstatus"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    hosturl = ((row.Scheme == 'http') ? 'http://' : 'https://') + row.Host + row.Location
                    if (value) {
                        return '<a href="' + hosturl + '" target="_blank"><span class="badge badge-primary" langtag="word-online"></span></a>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-offline"></span>'
                    }
                }
            },
            {
                field: 'option', //域值
                title: '<span langtag="word-option"></span>', //内容
                align: 'center',
                halign: 'center',
                visible: true, //false表示不显示
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'
                    if (row.IsClose) {
                        btn_group += "<a onclick=\"submitform('start', '{{.web_base_url}}/index/starthost', {\'id\':" + row.Id
                        btn_group += '})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    } else {
                        btn_group += "<a onclick=\"submitform('stop', '{{.web_base_url}}/index/stophost', {'id':" + row.Id
                        btn_group += '})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    }
                    btn_group += "<a onclick=\"submitform('delete', '{{.web_base_url}}/index/delhost', {'id':" + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    btn_group += '<a href="{{.web_base_url}}/index/edithost?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a></div>'
                    return btn_group
                }
            }
        ]
    });
</script>