{{# var lang001 = {"ch": "所有VLAN", "en": "All VLANs"}, lang002 = {"ch": "添加", "en": "Add"}, lang003 = {"ch": "本地端口", "en": "Local Port"}, lang004 = {"ch": "远程端口", "en": "Remote Port"}, lang005 = {"ch": "参数配置", "en": "Configuration"}, lang006 = {"ch": "VLAN配置", "en": "VLAN Configuration"}, lang007 = {"ch": "添加端口", "en": "Add Port"}, lang008 = {"ch": "编辑端口", "en": "Edit Port"}, lang009 = {"ch": "开启", "en": "On"}, lang010 = {"ch": "关闭", "en": "Off"}, lang011 = {"ch": "端口", "en": "Port"}, lang012 = {"ch": "端口模式", "en": "Port Mode"}, lang013 = {"ch": "远程端口无法操作", "en": "Remote port cannot be operated"}, lang014 = {"ch": "序号", "en": "No."}, lang018 = {"ch": "操作", "en": "Action"}, lang019 = {"ch": "流入流量", "en": "Inbound Traffic (Bytes)"}, lang020 = {"ch": "流出流量", "en": "Outbound Traffic (Bytes)"}, lang021 = {"ch": "确定要删除该端口吗？", "en": "Confirm to delete this port?"}, lang022 = {"ch": "端口类型", "en": "Port Type"}, lang023 = {"ch": "关键字搜索", "en": "Search"}, lang024 = {"ch": "所属VLAN", "en": "Owning VLAN"}; }}  <style> .paui-switch-vlan-active{font-weight: bold; color: #4E97EE;} .paui-switch-vlan-box{width: 10%; border-right: 1px solid #d2d2d2;}  /* 暗色主题 */ .paui-app-theme-dark .paui-switch-vlan-box{border-color: #333333;} </style>  <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_vlan_search"> <div class="layui-form-item paui-table-form-left">         <div class="layui-input-inline"> <input class="layui-input" type="text" name="keyword" autocomplete="off" placeholder='{{ lang023[g_lang] || "关键字搜索" }}' lay-affix="clear" lay-filter="clear_vlan_search"> </div> <div class="layui-input-inline"> <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="submit_vlan_search" lay-filter="submit_iwansvr_search"> <i class="layui-icon layui-icon-search"></i> </button> </div>     </div>     <div class="layui-form-item paui-table-form-right">         <div class="layui-form-mid">             <span class="abtn" switch-event="btnevt_config">                 <i class="layui-icon layui-icon-set"></i>&nbsp;{{ lang005[g_lang] || "参数配置" }}             </span>             <span class="abtn" switch-event="btnevt_add_if">                 <i class="layui-icon layui-icon-add-1"></i>&nbsp;{{ lang002[g_lang] || "添加" }}             </span>         </div>     </div> </form>  <div class="layui-row paui-table-card" style="display: flex;">     <div class="paui-switch-vlan-box">         <div id="paui-switch-vlan-tree"></div>     </div>     <div style="width: 90%;">         <table id="tab_switch_port" lay-filter="tab_switch_port"></table>         <div class="layui-table-page" id="page_switch_port"></div>     </div> </div>   <script id="tpl_vlanif_action" type="text/html">     <span class="abtn" lay-event="tabevt_show_mac">         <i class="layui-icon layui-icon-user"></i>     </span>     &nbsp;     {%# if(d.portype < 0) { %}         <span class="abtn" lay-event="tabevt_edit_if">             <i class="layui-icon layui-icon-edit"></i>         </span>         &nbsp;         <span class="abtn" lay-event="tabevt_del_if">             <i class="layui-icon layui-icon-delete"></i>         </span>     {%# } else { %}         <span class="paui-color-disable">             <i class="layui-icon layui-icon-edit"></i>         </span>         &nbsp;         <span class="paui-color-disable">             <i class="layui-icon layui-icon-delete"></i>         </span>     {%# } %} </script>   <script> layui.use(function(){     var $ = layui.$,     util = layui.util,     form = layui.form,     tree = layui.tree,     table = layui.table,     patpl = layui.patpl;      var pa_table = new Paui_table();     var api = '/cgi-bin/network/ajax_switch';     var pdata = JSON.parse('{{- JSON.stringify(d) }}');       var event_center = {          btnevt_config:function(){             paopen({                 title: '{{ lang005[g_lang] || "参数配置" }}',                 area: ['400px', '260px'],                 url: '/html/network/switch_config.html',                 btn: "default",                 subElem: "#submit_switch_stat",             });         },          btnevt_add_if: function(){             paopen({                 title: '{{ lang007[g_lang] || "添加端口" }}',                 area: ['600px', '300px'],                 url: '/html/network/switch_add_if.html',                 data: {action: 'add_vlan_if', iflist: pdata.if},                 btn: "default",                 subElem: "#submit_add_vlanif",                 end: function(){                     tree_reload();                     table_search()                 }             });         },          tree_update: function(obj){             paopen({                 title: '{{ lang006[g_lang] || "VLAN配置" }}',                 area: ['600px', '260px'],                 url: '/html/network/switch_add_vlan.html',                 data:obj,                 btn: "default",                 subElem: "#submit_add_switch",                 end: tree_reload             });         },          tabevt_show_if: function(obj){             popupInterface(obj.data.port);         },          tabevt_show_ip: function(obj){             popupIPobj(obj.data.ip);         },          tabevt_edit_if: function(obj){             obj.data.action = 'edit_vlan_if';             obj.data.iflist = pdata.if;             paopen({                 title: '{{ lang008[g_lang] || "编辑端口" }}',                 area: ['600px', '300px'],                 url: '/html/network/switch_add_if.html',                 data: obj.data,                 btn: "default",                 subElem: "#submit_add_vlanif",                 end: function(){                     tree_reload();                     table_search()                 }             });         },          tabevt_del_if: function(obj){             pa_confirm('{{ lang021[g_lang] || "确定要删除该端口吗？" }}', function(index){                 layer.close(index);                 pa_ajax({                     url: api,                     data: {                         action: 'del_vlan_if',                         vlan: obj.data.vlan,                         if: obj.data.port                     },                     success: function(){                         tree_reload();                         table_search()                     }                 });             });         },          tabevt_show_mac: function(obj){             pdata.list = obj.data;             paopen({                 title: 'IP/MAC -> VLAN: '+ obj.data.vlan + ', {{ lang011[g_lang] || "端口" }}：' + obj.data.port,                 area: ['850px', '600px'],                 data: pdata,                 url: '/html/network/switch_mac_list.html'             });         }     };           var col_render = function(r){ switch(this.field) {              case "rx":                 return numberformat(r.rx);              case "tx":                 return numberformat(r.tx);              case "untag":                 return r.untag == 0 ? 'Tag' : 'Untag';              case "type":                 return r.portype < 0 ? '{{ lang003[g_lang] || "本地端口" }}' : '{{ lang004[g_lang] || "远程端口" }}';              case "port":                 if(r.portype < 0)                     return '<span class="abtn" lay-event="tabevt_show_if">'+ r.port +'</span>';                 else                     return '<span class="abtn" lay-event="tabevt_show_ip">'+ r.port +'</span>';              case "act": return patpl( $("#tpl_vlanif_action").html() ).render(r); }; };       var table_search = function(vlan){         var search = form.getValue("form_vlan_search");         search.vlan = vlan;         pa_table.reload({             where:search         });     };      var tree_reload = function(){         get_vlan_list(function(data){             tree.reload('paui-switch-vlan-tree',{data:data});         })     };          var tree_render = function(data){         tree.render({             elem: '#paui-switch-vlan-tree',             id:'paui-switch-vlan-tree',             onlyIconControl:true,             edit: ['update'],             data: data,             edit_callback: function(obj){                 event_center["tree_" + obj.type](obj.data);             },             click: function(obj){                 $('#paui-switch-vlan-tree .layui-tree-txt').removeClass('paui-switch-vlan-active');                 $('#paui-switch-vlan-tree').find('div[data-id="'+ obj.data.id +'"] .layui-tree-txt').eq(0).addClass('paui-switch-vlan-active');                 table_search(obj.data.id);             }         });          $('#paui-switch-vlan-tree').find('div[data-id=""] .layui-tree-txt').eq(0).addClass('paui-switch-vlan-active');     };       var get_vlan_list = function(success){         pa_ajax({             url: api,             data: {'action': 'list_vlan'},             success: function(json){                 var tree_data = [{                     title: '{{ lang001[g_lang] || "所有VLAN" }}',                     id: '',                     edit: [],                     children: json.data.map(function(item){                         item.title = item.id = item.vlan;                         return item;                     }),                     spread:true,                 }];                 success(tree_data);             }         });     };       /* 页面渲染 */     form.render();      get_vlan_list(function(data){         tree_render(data)     });      pa_table.render({         elem: '#tab_switch_port',         height: 'full-190',         page: true,         pageType: "web",         pageElem: 'page_switch_port',         url: api,         where: {action:'load_port_list'},         parseData: function(json){             var portbase = parseInt(pdata.base.switch_iwansportbase);              layui.each(json.data, function(index, elem){                 elem.portype = elem.portid - portbase;                  if(elem.portype < 0) /* 本地端口 */                     return;                  var robj = pdata.iwan[elem.portype];                  if(robj) {                     elem.port = robj.acct + '/' + robj.ip;                     elem.ip = robj.ip;  /* 远程端口下钻使用 */                 }             });              return json;         },         cols: [[             {type: 'numbers', title: '{{ lang014[g_lang] || "序号" }}', width: 50}             ,{field: 'vlan', title: '{{ lang024[g_lang] || "所属VLAN" }}', width: 100}             ,{field: 'port', title: '{{ lang011[g_lang] || "端口" }}', templet: col_render}             ,{field: 'type', title: '{{ lang022[g_lang] || "端口类型" }}', templet: col_render}             ,{field: 'untag', title: '{{ lang012[g_lang] || "端口模式" }}', templet: col_render}             ,{field: 'rx', title: '{{ lang019[g_lang] || "流入流量" }}', templet: col_render}             ,{field: 'tx', title: '{{ lang020[g_lang] || "流出流量" }}', templet: col_render}             ,{field:'act', title:'{{ lang018[g_lang] || "操作" }}', width: 80, align:"right", templet: col_render}         ]]     });       /* 事件绑定 */     util.event("switch-event", event_center);     form.on('submit(submit_vlan_search)', function(obj){ table_search(); return false; });     form.on('input-affix(clear_vlan_search)', function(obj){ table_search(); return false; });     table.on('tool(tab_switch_port)', function(obj){         event_center[obj.event](obj);     });  }); </script>