{{# var lang001 = {"ch": "外网线路", "en": "External Link"}, lang002 = {"ch": "内网IP", "en": "Internal IP"}, lang003 = {"ch": "外网IP", "en": "External IP"}, lang004 = {"ch": "备注", "en": "Notes"}, lang005 = {"ch": "添加静态NAT44", "en": "Add Static NAT44"}, lang006 = {"ch": "编辑静态NAT44", "en": "Edit Static NAT44"}, lang007 = {"ch": "确定要删除", "en": "Confirm deletion?"}, lang008 = {"ch": "禁用", "en": "Disable"}, lang009 = {"ch": "启用", "en": "Enable"}, lang010 = {"ch": "添加", "en": "Add"}, lang011 = {"ch": "关键字搜索", "en": "Search"}, lang012 = {"ch": "批量操作", "en": "Batch Operation"}, lang013 = {"ch": "删除", "en": "Delete"}, lang014 = {"ch": "编辑", "en": "Edit"}, lang015 = {"ch": "请选择需要操作的数据", "en": "Please select the item(s) to operate on"}, lang016 = {"ch": "确定要禁用选中数据", "en": "Confirm to disable the selected item(s)?"}, lang017 = {"ch": "确定要启用选中数据", "en": "Confirm to enable the selected item(s)?"}, lang018 = {"ch": "确定要删除选中数据", "en": "Confirm to delete the selected item(s)?"}, lang019 = {"ch": "下一跳", "en": "Next-Hop"}, lang020 = {"ch": "操作", "en": "Action"}, lang021 = {"ch": "确定要禁用", "en": "Confirm to disable?"}, lang022 = {"ch": "确定要启用", "en": "Confirm to enable?"}; }}  <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_static_nat_search">     <div class="layui-form-item paui-table-form-left">         <div class="layui-input-inline">             <input type="text" name="keyword" class="layui-input" autocomplete="off"             placeholder='{{ lang011[g_lang] || "关键字搜索" }}' lay-affix="clear" lay-filter="clear_static_nat_search">         </div>         <div class="layui-input-inline" style="width:80px">             <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_static_nat_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" paui-hover-evt="paui_btn_more" style="margin-right:0px"> <span class="abtn"> <i class="layui-icon layui-icon-set-fill"></i>&nbsp;{{ lang012[g_lang] || "批量操作" }} </span> <dl class="layui-nav-child layui-anim layui-anim-upbit" style="top:30px;"> <dd> <span class="abtn" static_nat-event="btnevt_bat_disable"> <i class="layui-icon layui-icon-pause"></i>&nbsp;{{ lang008[g_lang] || "禁用" }} </span> </dd> <dd> <span class="abtn" static_nat-event="btnevt_bat_enable"> <i class="layui-icon layui-icon-play"></i>&nbsp;{{ lang009[g_lang] || "启用" }} </span> </dd> <dd> <span class="abtn" static_nat-event="btnevt_bat_remove"> <i class="layui-icon layui-icon-delete"></i>&nbsp;{{ lang013[g_lang] || "删除" }} </span> </dd> </dl> </div> <div class="layui-form-mid">             <span class="abtn" static_nat-event="btnevt_add">                 <i class="layui-icon layui-icon-add-1"></i>{{ lang010[g_lang] || "添加" }}             </span>             <span class="layui-hide" id="btn-reload-static_nat" static_nat-event="btnevt_reload"></span>         </div>     </div> </form> <div class="layui-row paui-table-card">     <table id="tab_static_nat_list" lay-filter="tab_static_nat_list"></table>     <div class="layui-table-page" id="page_static_nat_list"></div> </div>  <script id="tpl_static_nat_action" type="text/html">     <span class="abtn" lay-event="tabevt_edit" title='{{ lang014[g_lang] || "编辑" }}'>         <i class="layui-icon layui-icon-edit"></i>     </span> <span class="abtn" lay-event="tabevt_rmv" title='{{ lang013[g_lang] || "删除" }}'> <i class="layui-icon layui-icon-delete"></i> </span> {%# if (d.disable == 0) { %} <span class="abtn" lay-event="tabevt_disable" title='{{ lang008[g_lang] || "禁用" }}'> <i class="layui-icon layui-icon-pause"></i> </span> {%# } else { %} <span class="abtn" lay-event="tabevt_enable" title='{{ lang009[g_lang] || "启用" }}'> <i class="layui-icon layui-icon-play"></i> </span> {%# } %} </script>  <script> layui.use(function(){ var $ = layui.$, util = layui.util, form = layui.form, table = layui.table;  var pa_table = new Paui_table(); var pa_timer = new Paui_timer();  var api = "/cgi-bin/network/ajax_static_nat";   var event_center = { btnevt_add: function(){ paopen({ title: '{{ lang005[g_lang] || "添加静态NAT" }}', url: '/html/route/static_nat_add.html', btn: 'default', subElem: '#submit_static_nat_add', area: ['650px', '500px'] }); },  btnevt_bat_disable:function(){ var data = ""; var chk = table.checkStatus('tab_static_nat_list'); if(chk.data.length == 0){ layer.msg('{{ lang015[g_lang] || "请选择需要操作的数据" }}'); return; } layui.each(chk.data, function(index, elem){ data += elem.id + ";"; }); pa_confirm('{{ lang016[g_lang] || "确定要禁用选中数据" }}？', function(index){ pa_ajax({ url: api, data: {ids:data,action:"bat_disabled_nat"}, success: function(json){ if(json.code != 0) alert_err(json.msg); else { alert_ok(json.msg); table_search(); } } }) }); },  btnevt_bat_enable:function(){ var data = ""; var chk = table.checkStatus('tab_static_nat_list'); if(chk.data.length == 0){ layer.msg('{{ lang015[g_lang] || "请选择需要操作的数据" }}'); return; } layui.each(chk.data, function(index, elem){ data += elem.id + ";"; }); pa_confirm('{{ lang017[g_lang] || "确定要启用选中数据" }}？', function(index){ pa_ajax({ url: api, data: {ids:data,action:"bat_enable_nat"}, success: function(json){ if(json.code != 0) alert_err(json.msg); else { alert_ok(json.msg); table_search(); } } }) }); },  btnevt_bat_remove:function(){ var data = ""; var chk = table.checkStatus('tab_static_nat_list'); if(chk.data.length == 0){ layer.msg('{{ lang015[g_lang] || "请选择需要操作的数据" }}'); return; } layui.each(chk.data, function(index, elem){ data += elem.id + ";"; }); pa_confirm('{{ lang018[g_lang] || "确定要删除选中数据" }}？', function(index){ pa_ajax({ url: api, data: {ids:data,action:"bat_remove_nat"}, success: function(json){ if(json.code != 0) alert_err(json.msg); else { alert_ok(json.msg); table_search(); } } }) }); },  btnevt_reload: function(){ table_search(); },  tabevt_proxy(obj){ popupProxy("", "", obj.data.wan_name); },  tabevt_edit: function(obj){ obj.data.action = 'edit_static_nat_obj'; paopen({ title: '{{ lang006[g_lang] || "编辑静态NAT" }}->' + obj.data.id, url: '/html/route/static_nat_add.html', data: {id:obj.data.id}, btn: 'default', subElem: '#submit_static_nat_add', area: ['650px', '500px'] }); },  tabevt_rmv: function(obj){ pa_confirm('{{ lang007[g_lang] || "确定要删除" }}:' + obj.data.id, function(index){ layer.close(index); obj.data.action = 'rmv_static_nat'; pa_ajax({ url: api, data: obj.data, success: function(json){ if(json.code != 0) alert_err(json.msg); else { alert_ok(json.msg); table_search(); } } }) }); },  tabevt_disable:function(obj){ pa_confirm('{{ lang021[g_lang] || "确定要禁用" }}:' + obj.data.id, function(index){ pa_ajax({ url: api, data: {id:obj.data.id,action:"disabled_nat"}, success: function(json){ if(json.code != 0) alert_err(json.msg); else { alert_ok(json.msg); table_search(); } } }); }); },  tabevt_enable:function(obj){ pa_confirm('{{ lang022[g_lang] || "确定要启用" }}:' + obj.data.id, function(index){ pa_ajax({ url: api, data: {id:obj.data.id,action:"enable_nat"}, 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 "id": return '<div class="abtn" lay-event="tabevt_edit">' + r.id + '</div>';  case "wan_name": return '<div class="abtn" lay-event="tabevt_proxy">' + r.wan_name + '</div>';  case "desc": return r.desc == "NULL" ? "" : r.desc;  case "act": return patpl($("#tpl_static_nat_action").html()).render(r); } };   var table_search = function(){ var search = form.getValue("form_static_nat_search"); pa_table.reload({where: search}); };   /* 页面渲染 */ form.render();  pa_table.render({ elem: '#tab_static_nat_list', url: api, height: 'full-190', page: true, pageType: 'web', pageElem: 'page_static_nat_list', where: {'action': 'list_static_nat'}, cols: [[ {type:'checkbox'} ,{field:'id', title:'ID',width: 40, templet: col_render} ,{field:'wan_name', title:'{{ lang001[g_lang] || "外网线路" }}',minWidth: 120, templet: col_render} ,{field:'wanip', title:'{{ lang003[g_lang] || "外网IP" }}',minWidth: 120} ,{field:'pcip', title:'{{ lang002[g_lang] || "内网IP" }}',minWidth: 120} ,{field:'gateway', title:'{{ lang019[g_lang] || "下一跳" }}',minWidth: 120} ,{field:'desc', title:'{{ lang004[g_lang] || "备注" }}',templet: col_render, minWidth: 120} ,{field:'act', title:'{{ lang020[g_lang] || "操作" }}',  minWidth: 120, align: 'right', templet: col_render} ]], done: function(json){ var obj = $("#tab_static_nat_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");  if(elem.active == "0") obj.find('tr[data-index="' + index + '"]').addClass("paui-color-danger");  else obj.find('tr[data-index="' + index + '"]').removeClass("paui-color-danger");  }); } });   /* 事件绑定 */ util.event("static_nat-event", event_center);  table.on('tool(tab_static_nat_list)', function(obj){ event_center[obj.event](obj); });   form.on('input-affix(clear_static_nat_search)', table_search); form.on('submit(submit_static_nat_search)', function(obj){ table_search(); return false; });  pa_timer.render('select_static_nat_refresh', table_search, 10); }); </script>