{{# var lang001 = {"ch": "关键字搜索", "en": "Search"}, lang002 = {"ch": "删除", "en": "Delete"}, lang003 = {"ch": "添加", "en": "Add"}, lang004 = {"ch": "编辑", "en": "Edit"}, lang005 = {"ch": "趋势", "en": "Trend"}, lang006 = {"ch": "请选择需要操作的协议", "en": "Please select the protocol(s) to operate on first"}, lang007 = {"ch": "确定要删除选中协议", "en": "Confirm to delete selected protocol(s)?"}, lang008 = {"ch": "添加自定义协议", "en": "Add Custom Protocol"}, lang009 = {"ch": "自定义协议配置", "en": "Custom Protocol Configuration"}, lang010 = {"ch": "确定要删除自定义协议", "en": "Confirm to delete the custom protocol?"}, lang011 = {"ch": "序号", "en": "No."}, lang012 = {"ch": "协议名称", "en": "Protocol Name"}, lang013 = {"ch": "TCP端口", "en": "TCP Port"}, lang014 = {"ch": "UDP端口", "en": "UDP Port"}, lang015 = {"ch": "节点生存期", "en": "Node TTL"}, lang016 = {"ch": "操作", "en": "Action"}; }}  <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_user_app_list">     <div class="layui-form-item paui-table-form-left">         <div class="layui-input-inline">             <input class="layui-input" name="keyword" type="text" autocomplete="off"             placeholder='{{ lang001[g_lang] || "关键字搜索" }}' lay-affix="clear">         </div>         <div class="layui-input-inline" style="width:40px">             <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_user_app_list">                 <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" usrapp-event="btnevt_delete">                 <i class="layui-icon layui-icon-delete"></i>{{ lang002[g_lang] || "删除" }}             </span>             <span class="abtn" usrapp-event="btnevt_add">                 <i class="layui-icon layui-icon-add-1"></i>{{ lang003[g_lang] || "添加" }}             </span>             <span class="layui-hide" usrapp-event="btnevt_reload" id="paui-btn-reload-user-app"></span>         </div>     </div> </form> <div class="paui-table-card">     <table id="tab_user_app_list" lay-filter="tab_user_app_list"></table> </div>  <script id="tpl_user_app_td_action" type="text/html">     <span class="abtn" lay-event="tabevt_edit" title='{{ lang004[g_lang] || "编辑" }}'>         <i class="layui-icon layui-icon-edit"></i>     </span>     <span class="abtn" lay-event="tabevt_chart" title='{{ lang005[g_lang] || "趋势" }}'>         <i class="layui-icon layui-icon-chart"></i>     </span> <span class="abtn" lay-event="tabevt_rmv" title='{{ lang002[g_lang] || "删除" }}'> <i class="layui-icon layui-icon-delete"></i> </span> </script>  <script> layui.use(function(){     var $ = layui.$,     form = layui.form,     util = layui.util,     table = layui.table;      var pa_table = new Paui_table();     var api = '/cgi-bin/proto/ajax_user_app';       var event_center = {         btnevt_reload: function(){             table_search();         },          btnevt_delete: function(){             var data = "";             var chk = table.checkStatus('tab_user_app_list');             if(chk.data.length == 0){                 layer.msg('{{ lang006[g_lang] || "请选择需要操作的协议" }}');                 return;             }             layui.each(chk.data, function(index, elem){                 data += elem.name + " ";             });              pa_confirm('{{ lang007[g_lang] || "确定要删除选中协议" }}？', function(index){                 layer.close(index);                 pa_ajax({                     url: api,                     data: {"action": "rmv_user_app", "data": data},                     success: function(json){                         if(json.code != 0) {                             alert_err(json.msg);                         } else {                             alert_ok(json.msg);                             table_search();                         }                     }                 });             });         },          btnevt_add: function(){             paopen({                 title: '{{ lang008[g_lang] || "添加自定义协议" }}',                 url: '/html/proto/user_app_add.html',                 area: ['520px', '290px'],                 btn: 'default',                 subElem: '#submit_add_user_app'             });         },          tabevt_edit: function(obj){             obj.data.pop_title = '{{ lang009[g_lang] || "自定义协议配置" }}->' + obj.data.cname;             obj.data.pop_route = 'proto/user_app_main';             popupWindow(obj.data, 900, 600);         },          tabevt_chart: function(obj){             popupApp(obj.data.name, obj.data.cname, 1);         },          tabevt_rmv: function(obj){             pa_confirm('{{ lang010[g_lang] || "确定要删除自定义协议" }}：'+ obj.data.cname, function(index){                 pa_ajax({                     url: api,                     data: {"action": "rmv_user_app", "data": obj.data.name},                     success: function(json){                         if(json.code != 0)                             alert_err(json.msg);                         else {                             alert_ok(json.msg);                             table_search();                         }                     }                 });             });         }     };       var col_render = function(r){         switch(this.field){             case "cname":                 return '<span class="abtn" lay-event="tabevt_edit">'+ r.cname +'</span>';              case "tports":                 return r.tports == "NONE" ? "" : r.tports;              case "uports":                 return r.uports == "NONE" ? "" : r.uports;         }     };       var table_search = function(){         var search = form.getValue('form_user_app_list');         pa_table.reload({             where: search         });     };       /* 页面渲染 */     form.render();      pa_table.render({         elem: '#tab_user_app_list',         height: 'full-145',         url: api,         where: {'action': 'load_user_app_list'},         cols: [[             {type: 'checkbox'}             ,{type: 'numbers', title: '{{ lang011[g_lang] || "序号" }}'}             ,{field: 'cname', title: '{{ lang012[g_lang] || "协议名称" }}', templet: col_render}             ,{field: 'tports', title: '{{ lang013[g_lang] || "TCP端口" }}', templet: col_render}             ,{field: 'uports', title: '{{ lang014[g_lang] || "UDP端口" }}', templet: col_render}             ,{field: 'nodettl', title: '{{ lang015[g_lang] || "节点生存期" }}'}             ,{field: 'act', title: '{{ lang016[g_lang] || "操作" }}', width: 80, align: 'right', templet: '#tpl_user_app_td_action'}         ]]     });       /* 事件绑定 */     util.event('usrapp-event', event_center);     table.on('tool(tab_user_app_list)', function(obj){         event_center[obj.event](obj);     });      form.on('submit(submit_user_app_list)', function(obj){         table_search();         return false;     }); }); </script>