{{#     var lang001 = {"ch": "关键字搜索", "en": "Search"},     lang002 = {"ch": "参数配置", "en": "Configuration"},     lang003 = {"ch": "状态", "en": "Status"},     lang004 = {"ch": "关闭", "en": "Disabled"},     lang005 = {"ch": "启用", "en": "Enabled"},     lang006 = {"ch": "要代理的域名", "en": "Proxy Domain"},     lang007 = {"ch": "解析线路", "en": "Resolution Line"},     lang008 = {"ch": "代理IP范围", "en": "Proxy IP Range"},     lang009 = {"ch": "老化时间", "en": "Aging Time"},     lang010 = {"ch": "秒", "en": "seconds"},     lang011 = {"ch": "参数配置", "en": "Settings"},     lang012 = {"ch": "序号", "en": "No."},     lang013 = {"ch": "域名", "en": "Domain"},     lang014 = {"ch": "代理IP", "en": "Proxy IP"},     lang015 = {"ch": "源站IP", "en": "Src IP"},     lang016 = {"ch": "最近访问时间", "en": "Last Access"},     lang017 = {"ch": "访问次数/成功次数", "en": "Access Count/Success Count"},     lang018 = {"ch": "刷新", "en": "Refresh"},     lang019 = {"ch": "编辑", "en": "Edit"},     lang020 = {"ch": "刷新成功", "en": "Refresh Successful"}; }}  <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_dnsnat_search">     <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" lay-filter="clear_dnsnat_search">         </div>         <div class="layui-input-inline" style="width:40px">             <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit             lay-filter="search_dnsnat_search" id="search_dnsnat_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" dnsnat_event="btnevt_config">                 <i class="layui-icon layui-icon-set"></i>&nbsp;{{ lang002[g_lang] || "参数配置" }}             </span>         </div>     </div> </form> <div class="paui-table-card">     <table id="tab_dnsnat_list" lay-filter="tab_dnsnat_list"></table>     <div class="layui-table-page" id="page_dnsnat_list"></div> </div>  <script id="tpl_dnsnat_config" type="text/html">     <form class="layui-form" lay-filter="form_dnsnat_config" style="padding-top: 20px;">         <div class="layui-form-item">             <label class="layui-form-label">{{ lang003[g_lang] || "状态" }}</label>             <div class="layui-input-inline">                 <input type="hidden" name="action" value="set_config_env">                 <select name="dnsnat_enable">                     <option value="0">{{ lang004[g_lang] || "关闭" }}</option>                     <option value="1">{{ lang005[g_lang] || "启用" }}</option>                 </select>             </div>         </div>         <div class="layui-form-item">             <label class="layui-form-label">{{ lang006[g_lang] || "要代理的域名" }}</label>             <div class="layui-input-inline">                 <select name="dnsnat_dnsgrp" id="select_dnsnat_dnsgrp" lay-search>                     {%#                         layui.each(d.dns, function(index, elem) {                             if(elem.type != "usr") return;                     %}                         <option value="{% elem.id %}">{% elem.name %}</option>                     {%# }); %}                 </select>             </div>             <div class="layui-form-mid">                 <span class="abtn" dnsnat_event="btnevt_reload">{{ lang018[g_lang] || "刷新" }}</span>                 &nbsp;                 <span class="abtn" dnsnat_event="btnevt_edit_dns">{{ lang019[g_lang] || "编辑" }}</span>             </div>         </div>         <div class="layui-form-item">             <label class="layui-form-label">{{ lang007[g_lang] || "解析线路" }}</label>             <div class="layui-input-inline">                 <select name="dnsnat_pxy" id="select_dnsnat_pxy" lay-search>                     {%# layui.each(d.wan, function(index, elem) { %}                         <option value="{% elem.id %}">{% elem.name %}</option>                     {%# }); %}                 </select>             </div>         </div>         <div class="layui-form-item">             <label class="layui-form-label">{{ lang008[g_lang] || "代理IP范围" }}</label>             <div class="layui-input-inline">                 <input type="text" name="dnsnat_ipstart" class="layui-input">             </div>             <div class="layui-form-mid">-</div>             <div class="layui-input-inline">                 <input type="text" name="dnsnat_ipend" class="layui-input">             </div>         </div>         <div class="layui-form-item">             <label class="layui-form-label">{{ lang009[g_lang] || "老化时间" }}</label>             <div class="layui-input-inline">                 <input type="text" name="dnsnat_ttldelay" class="layui-input">             </div>             <div class="layui-form-mid">{{ lang010[g_lang] || "秒" }}</div>         </div>         <div class="layui-form-item">             <button id="submit_dnsnat_config" lay-filter="submit_dnsnat_config" lay-submit></button>         </div>     </form> </script>  <script> layui.use(function(){     var $ = layui.$,     util = layui.util,     form = layui.form,     table = layui.table,     patpl = layui.patpl;      var env = {};     var pa_table = new Paui_table();     var api = '/cgi-bin/network/ajax_dnsnat';     var TPL = $("#tpl_dnsnat_config").html();       var load_env = function(callback){         pa_ajax({             url: api,             data: {'action': 'load_config_env'},             success: function(json){                 env = json.data;                 layui.each(env.wan, function(item, elem){                     if(elem.name == env.conf.dnsnat_pxy)                         env.conf.dnsnat_pxy = elem.id;                 });                  if ( typeof callback == 'function' )                     callback();             }         });     };       var event_center = {         btnevt_config: function(){             paopen({                 title: '{{ lang011[g_lang] || "参数配置" }}',                 area: ['600px', '500px'],                 content: patpl(TPL).render(env),                 btn: 'default',                 subElem: '#submit_dnsnat_config',                 success: function(){                     form.val('form_dnsnat_config', env.conf);                     form.on('submit(submit_dnsnat_config)', function(obj){                         pa_ajax({                             url: api,                             data: obj.field,                             success: function(json){                                 if(json.code != 0)                                     alert_err(json.msg);                                 else {                                     load_env();                                     table_search();                                     alert_ok(json.msg);                                 }                             }                         });                         return false;                     });                 }             });         },          btnevt_reload: function(){             load_env(function(){                 var dom = $("#select_dnsnat_dnsgrp");                 dom.html('');                 layui.each(env.dns, function(index, elem){                     if(elem.type != "usr") return;                     var opt = new Option(elem.name, elem.id);                     dom.append(opt);                 });                 form.render('select');                 layer.msg('{{ lang020[g_lang] || "刷新成功" }}');             });         },          btnevt_edit_dns: function(){             var conf = form.getValue('form_dnsnat_config');              popupUrlGroup(conf.customdns || '');         },          tabevt_usrip: function(obj){             popupIPobj(obj.data.usr_ip);         }     };       var col_render = function(r){         switch(this.field){             case 'usr_ip':                 return '<span class="abtn" lay-event="tabevt_usrip">'+ r.usr_ip +'</span>';              case "ttl":                 return sec_to_str(r.ttl);              case "ltime":                 return util.toDateString( Number(r.ltime) * 1000);              case "hits":                 if (r.hits != r.oks)                     return '<span class="paui-color-danger">' + r.hits + '/' + r.oks + '</span>';                 else                     return r.hits + '/' + r.oks;         }     };       var table_search = function(){         var search = form.getValue('form_dnsnat_search');         pa_table.reload({             where: search         });     };       /* 页面渲染 */     load_env();     form.render();      pa_table.render({         elem: '#tab_dnsnat_list',         height: 'full-190',         page: true,         pageElem: 'page_dnsnat_list',         pageType: 'web',         url: api,         where: {'action': 'list_dns_nat'},         cols: [[             {field: 'id', title: '{{ lang012[g_lang] || "序号" }}', width: 60}             ,{field: 'host', title: '{{ lang013[g_lang] || "域名" }}', minWidth: 200}             ,{field: 'vir_ip', title: '{{ lang014[g_lang] || "代理IP" }}'}             ,{field: 'usr_ip', title: '{{ lang015[g_lang] || "源站IP" }}', templet: col_render}             ,{field: 'ttl', title: 'TTL', sort: true, templet: col_render}             ,{field: 'ltime', title: '{{ lang016[g_lang] || "最近访问时间" }}', sort: true, templet: col_render}             ,{field: 'hits', title: '{{ lang017[g_lang] || "访问次数/成功次数" }}', sort: true, templet: col_render}         ]]     });       /* 事件绑定 */     util.event('dnsnat_event', event_center);      form.on('select(select_dnsnat_refresh)', table_search);     form.on('input-affix(clear_dnsnat_search)', table_search);     form.on('submit(search_dnsnat_search)', function(obj){         table_search();         return false;     });          table.on('tool(tab_dnsnat_list)', function(obj){         event_center[obj.event](obj);     });  }); </script>