{{# var lang001 = {"ch": "Ping对象", "en": "Ping Target"}, lang002 = {"ch": "只支持输入IPv4地址", "en": "IPv4 addresses only"}, lang003 = {"ch": "对象备注", "en": "Target Note"}, lang004 = {"ch": "下一跳IP", "en": "Next Hop IP"}, lang005 = {"ch": "仅在接口类型为LAN时才生效", "en": "Effective only if interface type is LAN"}, lang006 = {"ch": "告警", "en": "Alert"}, lang007 = {"ch": "禁用", "en": "Disable"}, lang008 = {"ch": "启用", "en": "Enable"}, lang009 = {"ch": "开启后，需要在设置中开启“告警通知”", "en": "Enable 'Alert Notification' in Settings after turning this on"}, lang010 = {"ch": "Ping接口选择", "en": "Ping Interface Selection"}, lang011 = {"ch": "任意类型", "en": "Any Type"}, lang012 = {"ch": "管理口", "en": "MGMT Port"}, lang013 = {"ch": "WAN线路", "en": "WAN Line"}, lang014 = {"ch": "静态IPv4", "en": "Static IPv4"}, lang015 = {"ch": "静态IPv6", "en": "Static IPv6"}, lang016 = {"ch": "关键字搜索", "en": "Search"}, lang017 = {"ch": "已选择接口", "en": "Interface Selected"}, lang018 = {"ch": "序号", "en": "No."}, lang019 = {"ch": "接口名称", "en": "Interface Name"}, lang020 = {"ch": "接口类型", "en": "Interface Type"}, lang021 = {"ch": "接口IP", "en": "Interface IP"}, lang022 = {"ch": "请选择Ping接口", "en": "Please select Ping interface"}, lang023 = {"ch": "操作", "en": "Action"}, lang024 = {"ch": "确定要提交吗？", "en": "Confirm Submit?"}, lang025 = {"ch": "支持输入v4 IP/v6 IP/域名", "en": "Supports IPv4/IPv6/Domain"}, lang026 = {"ch": "全局告警对象为“任意”时默认开启", "en": "Default enabled when global alarm target is 'Any'"}; }}  <form class="layui-form paui-form" style="padding-top: 20px;">     <div class="layui-form-item">         <label class="layui-form-label">{{ lang001[g_lang] || "Ping对象" }}</label>         <div class="layui-input-inline">             <input type="hidden" name="action" value="add_pingmonitor_obj">             <input class="layui-input" name="obj" type="text" lay-verify="required">         </div>         <div class="layui-form-mid layui-word-aux">{{ lang025[g_lang] || "支持输入v4 IP/v6 IP/域名" }}</div>     </div>     <div class="layui-form-item">         <label class="layui-form-label">{{ lang003[g_lang] || "对象备注" }}</label>         <div class="layui-input-inline">             <input class="layui-input" name="desc" type="text" lay-verify="required|isName">         </div>     </div>     <div class="layui-form-item">         <label class="layui-form-label">{{ lang004[g_lang] || "下一跳IP" }}</label>         <div class="layui-input-inline">             <input class="layui-input" name="nexthop" type="text" lay-verify="isIP">         </div>         <div class="layui-form-mid layui-word-aux">{{ lang005[g_lang] || "仅在接口类型为LAN时才生效" }}</div>     </div>     <div class="layui-form-item">         <label class="layui-form-label">{{ lang006[g_lang] || "告警" }}</label>         <div class="layui-input-inline">             <select name="warring">                 <option value="0">{{ lang007[g_lang] || "禁用" }}</option>                 <option value="1">{{ lang008[g_lang] || "启用" }}</option>             </select>         </div>         <div class="layui-form-mid layui-word-aux">             {{ lang009[g_lang] || "开启后，需要在设置中开启“告警通知”" }}，             {{ lang009[g_lang] || "全局告警对象为“任意”时默认开启" }}         </div>     </div>     <div class="layui-hide">         <button lay-submit lay-filter="submit_pingmonitor_add" id="submit_pingmonitor_add"></button>     </div> </form>  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">     <legend>{{ lang010[g_lang] || "Ping接口选择" }}</legend> </fieldset>  <div class="layui-row">     <div class="layui-col-xs7" style="padding: 0px 4px 0px 8px;">         <div class="layui-card-header">             <form class="layui-form paui-table-form" lay-filter="form_ping_interface">                 <div class="layui-form-item paui-table-form-left">                     <div class="layui-input-inline" style="width: 130px;">                         <select name="type" lay-search lay-filter="select_ping_interface">                             <option value="">{{ lang011[g_lang] || "任意类型" }}</option>                             <option value="mgt">{{ lang012[g_lang] || "管理口" }}</option>                             <optgroup label='{{ lang013[g_lang] || "WAN线路" }}'>                                 <option value="proxy">{{ lang014[g_lang] || "静态IPv4" }}</option>                                 <option value="proxy6">{{ lang015[g_lang] || "静态IPv6" }}</option>                                 <option value="dhcpwan">DHCP</option>                                 <option value="pppoe">PPPoE</option>                                 <option value="iwan">iWAN</option>                                 <option value="l2tpwan">L2TP</option>                                 <option value="ipsecwan">IPSec</option>                                 <option value="grewan">GREWAN</option>                             </optgroup>                             <optgroup label="LAN接口">                                 <option value="rtif">IPv4-LAN</option>                                 <option value="rtif6">IPv6-LAN</option>                                 <option value="vrif">VRRP</option>                                 <option value="grelan">GRELAN</option>                                 <option value="posvrif">PPPOE Serve</option>                                 <option value="iwansvc">iWAN Server</option>                             </optgroup>                         </select>                     </div>                     <div class="layui-input-inline">                         <input type="text" name="keyword" placeholder='{{ lang016[g_lang] || "关键字搜索" }}' class="layui-input">                     </div>                     <div class="layui-input-inline" style="width:40px">                         <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_ping_interface">                             <i class="layui-icon layui-icon-search"></i>                         </button>                     </div>                 </div>             </form>         </div>         <div class="paui-table-card">             <table id="tab_ping_interface_list" lay-filter="tab_ping_interface_list"></table>         </div>     </div>     <div class="layui-col-xs5" style="padding: 0px 8px 0px 4px;">         <div class="layui-card-header">             {{ lang017[g_lang] || "已选择接口" }}             [<span id="paui-pxy-select-num">0</span>]         </div>         <div class="paui-table-card">             <table id="tab_ping_interface_select" lay-filter="tab_ping_interface_select"></table>         </div>     </div> </div>  <script> layui.use(function(){     var $ = layui.$,     form = layui.form,     table = layui.table;      var l_pxylist = [];     var api = '/cgi-bin/system/ajax_pingmonitor';      var pxy_type = {         'mgt': '{{ lang012[g_lang] || "管理口" }}',         'proxy': '{{ lang014[g_lang] || "静态IPv4" }}',         'proxy6': '{{ lang015[g_lang] || "静态IPv6" }}',         'dhcpwan': 'DHCP',         'pppoe': 'PPPOE',         'iwan': 'iWAN',         'l2tpwan': 'L2TP',         'ipsecwan': 'IPSec',         'grewan': 'GREWAN',         'rtif': 'IPv4-LAN',         'rtif6': 'IPv6-LAN',         'vrif': 'VRRP',         'grelan': 'GRELAN',         'posvrif': 'PPPOE Server',         'iwansvc': 'iWAN Server'     };       var event_center = {         tabevt_do_select: function(){             var data = table.cache['tab_ping_interface_list'];             layui.each(data, function(index, elem){                 l_pxylist[elem.select_index].LAY_CHECKED = elem.LAY_CHECKED;             });             render_sel_tab();         },          tabevt_un_select: function(obj){             l_pxylist[obj.data.select_index].LAY_CHECKED = false;             render_all_tab();             render_sel_tab();         },          tabevt_pxy: function(obj){             popupProxy(obj.data.id, obj.data.name, obj.data.type);         }     };       var col_render = function(r){         switch(this.field){             case "name":                 if(r.id == 0)                     return r.name;                 else                     return '<span class="abtn" lay-event="tabevt_pxy">'+ r.name +'</span>';              case "type":                 return pxy_type[r.type] || r.type;              case "act":                 return '<span class="abtn" lay-event="tabevt_un_select"><i class="layui-icon layui-icon-delete" title="删除"></i></span>';         }     };       var render_all_tab = function(){         var data = [];         var search = form.getValue('form_ping_interface');         layui.each(l_pxylist, function(index, elem){             if(search.type != "" && search.type != elem.type) return;             if(!pa_str_find(JSON.stringify(elem), search.keyword)) return;             data.push(elem);         });         table.render({             elem: '#tab_ping_interface_list',             height: '340px',             data: data,             className: 'paui-table-hide-scroll',             page: {limit: 100, limits: [50, 100, 200, 300, 400, 500], lang: g_lang},             cols: [[                 {type: 'checkbox'},                 {type: 'numbers', title: '{{ lang018[g_lang] || "序号" }}'},                 {field: 'name', title: '{{ lang019[g_lang] || "接口名称" }}', templet: col_render},                 {field: 'type', title: '{{ lang020[g_lang] || "接口类型" }}', templet: col_render},                 {field: 'ip', title: '{{ lang021[g_lang] || "接口IP" }}'}             ]],             done: function(json){                 var obj = $("#tab_ping_interface_list").next();                 layui.each(json.data, function(index, elem){                     if(elem.disable == "1")                         obj.find('tr[data-index="' + index + '"]').addClass("layui-word-aux");                      else                         obj.find('tr[data-index="' + index + '"]').removeClass("layui-word-aux");                  });             }         });     };           var render_sel_tab = function(){         var data = [];         var chk_num = 0;         layui.each(l_pxylist, function(index, elem){             if(elem.LAY_CHECKED == true){                 chk_num++;                 data.push(elem);             }         });         $("#paui-pxy-select-num").text(chk_num);          table.render({             elem: '#tab_ping_interface_select',             height: '340px',             limit: 4096,             data: data,             className: 'paui-table-hide-scroll',             text: {'none': '{{ lang022[g_lang] || "请选择Ping接口" }}'},             cols: [[                 {type: 'numbers', title: '{{ lang018[g_lang] || "序号" }}'},                 {field: 'name', title: '{{ lang019[g_lang] || "接口名称" }}', templet: col_render},                 {field: 'act', title: '{{ lang023[g_lang] || "操作" }}', width: 80, align: 'right', templet: col_render}             ]]         });     };       /* 页面渲染*/     form.render();      pa_ajax({         url: api,         data: {'action': 'load_addobj_env'},         success: function(json){             l_pxylist[0] = {                 select_index: 0,                 id: 0,                 name: '{{ lang012[g_lang] || "管理口" }}',                 ip: json.data.mgtip,                 type: 'mgt',             };             layui.each(json.data.proxy, function(index, elem){                 elem.select_index = index + 1;                 l_pxylist.push(elem);             });             render_all_tab();             render_sel_tab();         }     });       /* 事件绑定 */     form.on('select(select_ping_interface)', render_all_tab);      form.on('submit(submit_ping_interface)', function(obj){         render_all_tab();         return false;     });      table.on('checkbox(tab_ping_interface_list)', function(obj){         event_center['tabevt_do_select']();     });      table.on('tool(tab_ping_interface_list)', function(obj){         event_center[obj.event](obj);     });      table.on('tool(tab_ping_interface_select)', function(obj){         event_center[obj.event](obj);     });       /* 页面提交 */     form.on('submit(submit_pingmonitor_add)', function(obj){         var pxy = "";         layui.each(l_pxylist, function(index,elem){             if(elem.LAY_CHECKED == true)                 pxy += elem.id + " ";         });          if(pxy == ""){             layer.msg('{{ lang022[g_lang] || "请选择Ping接口" }}');             return false;         }          pa_confirm('{{ lang024[g_lang] || "确定要提交吗？" }}', function(index){             layer.close(index);             obj.field.pxy = pxy;             pa_ajax({                 url: api,                 data: obj.field,                 success: function(json){                     if(json.code != 0)                         alert_err(json.msg);                     else {                         layer.closeAll();                         alert_ok(json.msg);                         $("#submit_pingmonitor_search").click();                     }                 }             });         });          return false;     });  }); </script>