{{# var lang001 = {"ch": "关键字搜索", "en": "Search"}, lang002 = {"ch": "导出", "en": "Export"}, lang003 = {"ch": "参数设置", "en": "Settings"}, lang004 = {"ch": "每IP端口数量", "en": "Ports Per IP"}, lang005 = {"ch": "NAT地址池", "en": "NAT Address Pool"}, lang006 = {"ch": "动态分配设置", "en": "Dynamic Allocation Settings"}, lang007 = {"ch": "序号", "en": "No."}, lang008 = {"ch": "内网地址", "en": "Internal Address"}, lang009 = {"ch": "创建时间", "en": "Creation Time"}, lang010 = {"ch": "NAT地址", "en": "NAT Address"}, lang011 = {"ch": "NAT端口范围", "en": "NAT Port Range"}, lang012 = {"ch": "使用次数", "en": "Usage Count"}, lang013 = {"ch": "失败次数", "en": "Failure Count"}, lang014 = {"ch": "确定要导出吗", "en": "Confirm to export?"}, lang015 = {"ch": "导出成功，正在下载", "en": "Export successful, downloading"}; }}  <div style="padding: 10px 20px;"> <form class="layui-row layui-form layui-form-pane paui-table-form" lay-filter="form_cgnat_dynflow_search"> <div class="layui-form-item paui-table-form-left"> <div class="layui-input-inline"> <input type="text" name="keyword" placeholder='{{ lang001[g_lang] || "关键字搜索" }}' autocomplete="off" class="layui-input" lay-affix="clear" lay-filter="clear_cgnat_dynflow_search"> </div> <div class="layui-form-mid" style="padding:0px!important"> <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit id="submit_cgnat_dynflow_search" lay-filter="submit_cgnat_dynflow_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" cgnat_dyn_event="btnevt_export"> <i class="pa-icon pa-download"></i>&nbsp;{{ lang002[g_lang] || "导出" }} </span> </div> </div> </form>  <div class="paui-table-card"> <table id="tab_cgnat_dynflow_list" lay-filter="tab_cgnat_dynflow_list"></table> <div class="layui-table-page" id="page_cgnat_dynflow_list"></div> </div> </div>  <script> layui.use(function(){ var $ = layui.$, util = layui.util, form = layui.form, table = layui.table;  var pa_table = new Paui_table();  var api = '/cgi-bin/network/ajax_cgnat';  var event_center = { btnevt_export: function(){ pa_confirm('{{ lang014[g_lang] || "确定要导出吗" }}?', function(index){ layer.close(index); pa_ajax({ url: api, data: {"action": "export_dyn_cgnat", "id": "{{ d.id || '' }}"}, success: function(json){ if(json.code != 0) alert_err(json.msg); else { alert_ok('{{ lang015[g_lang] || "导出成功，正在下载" }}'); web_download(json.data.file_name); } } }); }); },  tabevt_ip: function(obj){ popupIPobj(obj.data.srcip); } };   var col_render = function(r){ switch(this.field){ case "srcip": return '<span class="abtn" lay-event="tabevt_ip">'+ r.srcip +'</span>';  case "birth": return util.toDateString(r.birth * 1000);  case "fail": return '<span class="paui-color-danger">'+ r.fail +'</span>';  } };   var table_search = function(){ var search = form.getValue(); pa_table.reload({ where: search }); };   /* 页面渲染 */ form.render();  pa_table.render({ elem: '#tab_cgnat_dynflow_list' ,height: '500px' ,page: true ,pageType: 'web' ,pageElem: 'page_cgnat_dynflow_list' ,url: api ,where: {"action": "list_cgnat_dyn_session", "id": "{{ d.id || '' }}"} ,cols: [[ {type: 'numbers', title:'{{ lang007[g_lang] || "序号" }}', width: 60} ,{field: 'srcip', title:'{{ lang008[g_lang] || "内网地址" }}', templet: col_render} ,{field: 'natip', title:'{{ lang010[g_lang] || "NAT地址" }}'} ,{field: 'port',  title:'{{ lang011[g_lang] || "NAT端口范围" }}', sort: true} ,{field: 'count', title:'{{ lang012[g_lang] || "使用次数" }}', sort: true} ,{field: 'fail',  title:'{{ lang013[g_lang] || "失败次数" }}', templet: col_render, sort: true} ,{field: 'birth', title:'{{ lang009[g_lang] || "创建时间" }}', templet: col_render, sort: true} ]] });   /* 事件绑定 */ util.event('cgnat_dyn_event', event_center);  table.on('tool(tab_cgnat_dynflow_list)', function(obj){ event_center[obj.event](obj); });  form.on('input-affix(clear_cgnat_dynflow_search)', table_search); form.on('submit(submit_cgnat_dynflow_search)', function(obj){ table_search(); return false; }); }); </script>