{{# var lang001 = {"ch": "关键字搜索", "en": "Search"}, lang002 = {"ch": "隐藏已加入过群组的线路", "en": "Hide interfaces already assigned to a group"}, lang003 = { "ch": "带宽比重，是指线路下行带宽的相对值，比如将一条100M线路和一条50M线路加到群组中，那么他们的比值就是2和1。", "en": "Weight is the relative value of the interface's downstream bandwidth. For example, if a 100M and a 50M interface are added to the group, their relative weights are 2 and 1."}, lang004 = {"ch": "批量编辑", "en": "Batch Edit"}, lang005 = {"ch": "确定", "en": "Confirm"}, lang006 = {"ch": "取消", "en": "Cancel"}, lang007 = {"ch": "请先选择需要操作的线路", "en": "Please select the interface(s) first"}, lang008 = {"ch": "确定要提交吗", "en": "Confirm to submit?"}, lang009 = {"ch": "否", "en": "No"}, lang010 = {"ch": "是", "en": "Yes"}, lang011 = {"ch": "序号", "en": "No."}, lang012 = {"ch": "名称", "en": "Name"}, lang013 = {"ch": "网卡", "en": "NIC"}, lang014 = {"ch": "状态", "en": "Status"}, lang015 = {"ch": "线路网关", "en": "Interface Gateway"}, lang016 = {"ch": "权重", "en": "Weight"}, lang017 = {"ch": "是否已加入过群组", "en": "Assigned to Group"}, lang018 = {"ch": "最大带宽", "en": "Max Bandwidth"}; }}  <style> .paui-wan-weight .layui-form-select .layui-input{border:0px;} .paui-wangrp-addwan-box .layui-table-cell{overflow: unset;} </style>  <div class="layui-card" style="margin:10px 10px 0px 10px"> <form class="layui-form paui-table-form" lay-filter="form_wan_search"> <div class="layui-form-item" style="margin-bottom:5px"> <div class="layui-input-inline"> <input type="text" name="keyword" class="layui-input" autocomplete="off" placeholder='{{ lang001[g_lang] || "关键字搜索" }}'> </div> <div class="layui-input-inline" style="width:40px"> <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_search_wan"> <i class="layui-icon layui-icon-search"></i> </button> </div> <div class="layui-input-inline"> <input type="checkbox" name="hide" title='{{ lang002[g_lang] || "隐藏已加入过群组的线路" }}' lay-skin="primary" lay-filter="chk_hide">  </div> </div> <div class="layui-form-item" style="margin-bottom:5px"> {{# if(d.type == "leftbw" || d.type == "leftbwup") { }} <div class="layui-form-mid paui-color-disable"> {{# if(g_lang == "en") { }} Tip: the type is "Max Left Bandwidth", which means that the connection is preferentially allocated to the line with the largest idle bandwidth. {{# } else { }} 提示：群组负载类型为“最大空闲带宽”，表示将连接优先分配给空闲带宽最大的线路。 {{# } }} </div> {{# } else { }} <div class="layui-form-mid"> {{ lang003[g_lang] || "带宽比重，是指线路下行带宽的相对值，比如将一条100M线路和一条50M线路加到群组中，那么他们的比值就是2和1。" }} </div> <div class="layui-form-mid"> {{ lang004[g_lang] || "批量编辑" }}: </div> <div class="layui-input-inline" style="width:50px"> <select name="weight" lay-filter="select_weight"> {{# for(var i = 1; i <= 20; i++) { }} <option value="{{ i }}">{{ i }}</option> {{# } }} </select> </div> {{# } }} </div> </form>  <div class="layui-row paui-wangrp-addwan-box" style="margin-top:5px"> <table id="tab_wan_group_add" lay-filter="tab_wan_group_add"></table> </div>  <div class="layui-row layui-table-page" id="page_proxy_tab" style="width:960px"></div>  <div class="layui-row" style="position: absolute; right:10px; bottom:10px"> <button class="layui-btn layui-btn-sm layui-btn-normal paui-pxy-act" paui-event="btnevt_ok"> {{ lang005[g_lang] || "确定" }} </button> <button class="layui-btn layui-btn-sm layui-btn-primary paui-pxy-act" paui-event="btnevt_back"> {{ lang006[g_lang] || "取消" }} </button> </div> </div>   <script id="tpl_wan_td_status" type="text/html"> {%# if (d.disable == 1) { %} <i class="layui-icon layui-icon-reduce-circle paui-color-disable"></i> {%# } else { if (d.state == 1) { %} <i class="layui-icon layui-icon-ok-circle"></i> {%# } else { %} <i class="layui-icon layui-icon-close-fill"></i> {%# } %} {%# } %} </script>  {{# if(d.type == "leftbw" || d.type == "leftbwup") { }} <script id="tpl_weight" type="text/html"> <div class="layui-inline paui-wan-weight" style="width:70px; margin-top:-4px;"> <input type="text" name="weight_{% d.name %}" class="layui-input" value="1" lay-filter="required|numbers" placeholder="Mbps"> </div> <div class="layui-inline" style="width: 20px; margin-top:-4px;">Mbps</div> </script> {{# } else { }} <script id="tpl_weight" type="text/html"> <div class="layui-row paui-wan-weight" style="width:50%; margin-top:-8px;"> <select name="weight_{% d.name %}"> {%# for(var i = 1; i <= 20; i++) { %} <option value="{% i %}">{% i %}</option> {%# } %} </select> </div> </script> {{# } }}   <script> layui.use(function(){ var $ = layui.$, form = layui.form, patpl = layui.patpl, table = layui.table, laypage = layui.laypage;  var api = '/cgi-bin/network/ajax_wan_group'; var l_limit = 500; var l_page = 1;  var l_proxy_cache = [];   var page_evt = { tabevt_name: function(obj){ popupProxy(obj.data.id, obj.data.type, ""); },  tabevt_if: function(obj){ if(obj.data.type == "l2tpwan" || obj.data.type == "iwan" || obj.data.type == "ipsecwan") popupProxy("", "", obj.data.if); else popupInterface(obj.data.if); },  /* 提交选择 */ btnevt_ok: function(){ var data = []; var weight = 1; var chk = table.checkStatus('tab_wan_group_add');  if(chk.data.length == 0) { layer.msg('{{ lang007[g_lang] || "请先选择需要操作的线路" }}'); return; }  layui.each(chk.data, function(index, elem){ weight = $('{{d.type == "leftbw" || d.type == "leftbwup" ? "input" : "select" }}[name="weight_' + elem.name + '"]').val(); data.push(elem.name + ":" + weight); });  pa_confirm('{{ lang008[g_lang] || "确定要提交吗" }}?', function(index){ layer.close(index);  layer.load(); pa_ajax({ url: api, data: { action: "add_wan_to_group", group_id: "{{d.id}}", wan_list: data.join(",") }, success: function(json){ if(json.code != 0) alert_err(json.msg); else { $('button[lay-filter="submit_wg_search"]').click(); $('button[lay-filter="submit_wgwan_search"]').click(); layer.closeAll(); alert_ok(json.msg); } } }); }); },  btnevt_back: function(){ layer.closeAll(); } };   var col_render = function(r){ switch(this.field) { case "name": return '<span class="abtn" lay-event="tabevt_name">' + r.name + '</span>';  case "if": return '<span class="abtn" lay-event="tabevt_if">' + r.if + '</span>';  case "weight": return patpl( $("#tpl_weight").html() ).render(r);  case "ingroup": return r.ingroup == 0 ? '{{ lang009[g_lang] || "否" }}' : '{{ lang010[g_lang] || "是" }}';  case "state": return patpl( $("#tpl_wan_td_status").html() ).render(r);  }; };   var data_render = function(){ var pdata = [], sdata = []; var p_end = l_limit * l_page; var p_start = p_end - l_limit;  var search_data = form.getValue("form_wan_search");  layui.each(l_proxy_cache, function(index, elem){ if ( JSON.stringify(elem).indexOf(search_data.keyword) < 0 ) return; if( search_data.hide == "on" && elem.ingroup == "1" ) return;  sdata.push(elem); });  if(p_start > sdata.length) p_start = 0; if(p_end > sdata.length) p_end = sdata.length;  for (var i = p_start; i < p_end; i++){ sdata[i].number = i + 1; pdata.push(sdata[i]); }  table.render({ elem: '#tab_wan_group_add' ,data: pdata ,lang: g_lang ,limit: 2048 ,autoSort: false ,height: '485px' ,cols: [[ {type: 'checkbox', field: 'id'} ,{title: '{{ lang011[g_lang] || "序号" }}', field: 'number', width: 36} ,{field: 'name', title: '{{ lang012[g_lang] || "名称" }}', templet: col_render} ,{field: 'if', title: '{{ lang013[g_lang] || "网卡" }}', templet: col_render} ,{field: 'state', title: '{{ lang014[g_lang] || "状态" }}', templet: col_render} ,{field: 'ip', title: 'IP'} ,{field: 'gw', title: '{{ lang015[g_lang] || "线路网关" }}'} ,{field: 'vlan', title: 'VLAN'} ,{ field: 'weight', title: '{{ d.type == "leftbw" || d.type == "leftbwup" ? (lang018[g_lang] || "最大带宽") : (lang016[g_lang] || "带宽权重") }}', templet: col_render } ,{field: 'ingroup', title: '{{ lang017[g_lang] || "是否已加入过群组" }}', align: 'center', templet: col_render} ]] });  laypage.render({ elem: 'page_proxy_tab' ,groups: 5 ,lang: g_lang ,curr: l_page ,limit: l_limit ,limits: [100, 200, 300, 500, 1000, 2500] ,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] ,prev: '<i class="layui-icon layui-icon-left"></i>' ,next: '<i class="layui-icon layui-icon-right"></i>' ,count: sdata.length ,jump: function(obj, first){ if(!first){ l_page = obj.curr; l_limit = obj.limit; layer.load(); data_render(); } } });  layer.closeAll("loading"); };   /* 页面渲染 */ layer.load(); form.render();  pa_ajax({ url: api, data: {"action": "load_add_wan_env", "id": "{{d.id}}"}, success: function(json){ layui.each(json.data.wan, function(index, elem){ if( arryInclude(json.data.self, elem.name) ) return;  if( arryInclude(json.data.pool, elem.name) ) elem.ingroup = 1; else elem.ingroup = 0;  l_proxy_cache.push(elem); });  data_render(); } });   /* 事件绑定 */ table.on('tool(tab_wan_group_add)', function(obj){ page_evt[obj.event](obj); });  $(".paui-pxy-act").off("click"); $(".paui-pxy-act").on("click", function(){ var event = $(this).attr("paui-event"); page_evt[event](); });  form.on('select(select_weight)', function(obj){ layui.each($(".paui-wangrp-addwan-box select"), function(index, elem){ $(elem).val(obj.value); });  form.render(); });  form.on('checkbox(chk_hide)', function(obj){ layer.load(); data_render(); });  form.on('submit(submit_search_wan)', function(obj){ layer.load(); data_render(); return false; }); }); </script>