{{#     var lang001 = {"ch": "待选择列表", "en": "Available List"}, lang002 = {"ch": "请输入协议名称关键字进行搜索", "en": "Please enter protocol keyword to search"}, lang003 = {"ch": "已选择列表", "en": "Selected List"}, lang004 = {"ch": "序号", "en": "No."}, lang005 = {"ch": "协议名称", "en": "Protocol Name"}, lang006 = {"ch": "操作", "en": "Action"}, lang007 = {"ch": "未知应用", "en": "Unknown Protocol"}, lang008 = {"ch": "确定要提交吗", "en": "Confirm to submit?"}, lang009 = {"ch": "应用协议", "en": "Protocol"}, lang010 = {"ch": "全选", "en": "Select All"}, lang011 = {"ch": "反选", "en": "Invert Selection"},     lang012 = {"ch": "选中该组下所有协议", "en": "Select all agreements in this group"},     lang013 = {"ch": "取消选中该组下所有协议", "en": "Unselect all agreements in this group."},     lang014 = {"ch": "在其它协议组中选中", "en": "Chosen in other groups"},     lang015 = {"ch": "前缀表示在其它协议组中已选择", "en": "Prefix indicates that it has been selected in other protocol groups"}; }}  <style>     .selectAll{vertical-align: middle; margin-left: 10px;}     .selected-node .layui-tree-txt {         padding: 0 8px;         background-color: #e4eeff;     }     .protoselect {         display: inline-block;         width: 8px;         height: 8px;         background-color: #1890ff;         border-radius: 50%;         margin-right: 6px;         vertical-align: middle;         margin-bottom: 3px;     } </style>  <div class="layui-row layui-col-space8 paui-page-agp-edit-content" style="margin: 0px 8px">     <div class="layui-col-xs6">         <div class="layui-card">             <div class="layui-card-header" style="overflow: hidden;">                 <div class="layui-inline">                     {{ lang001[g_lang] || "待选择列表" }}                 </div> {{# if(d.selected_applist) { }}                 <div class="layui-inline paui-color-disable" style="position: absolute; right: 0px;">                     <span class="protoselect"></span>{{ lang015[g_lang] || "前缀表示在其它协议组中已选择" }}                 </div> {{# } }}              </div>             <form class="layui-form layui-form-pane paui-table-form" lay-filter="form_agp_edit" style="padding-top:10px;">                 <div class="layui-form-item paui-table-form-left">                     <div class="layui-input-inline" style="width: 320px;">                         <input id="paui-agp-input-search" class="layui-input" name="keyword" type="text" placeholder='{{ lang002[g_lang] || "请输入协议名称关键字进行搜索" }}' style="width: 100%;">                     </div>                     <div class="layui-input-inline" style="width:40px">                         <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="submit_agp_edit">                             <i class="layui-icon layui-icon-search"></i>                         </button>                         <span class="layui-hide" id="submit_edit_user_agp"></span>                     </div>                 </div>             </form>             <div class="layui-col-xs6" style="height: 460px; width: 95%; overflow-y: auto;">                 <div id="paui-agpapp-tree">                     <div class="paui-loading paui-page-agp-edit-loading">                         <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>                     </div>                 </div>                 <div id="paui-agpapp-rows" style="display: none;">                     <table id="tab_search_app" lay-filter="tab_search_app"></table>                 </div>             </div>         </div>     </div>     <div class="layui-col-xs6">         <div class="layui-card">             <div class="layui-card-header">{{ lang003[g_lang] || "已选择列表" }}</div>             <div class="layui-card-body">                 <table id="tab_agp_app" lay-filter="tab_agp_app"></table>             </div>         </div>     </div> </div>  <script> layui.use(function(){     var $ = layui.$,     form = layui.form,     tree = layui.tree,     table = layui.table;      var pa_table   = new Paui_table();     var search_tab = new Paui_table();     var pdata = JSON.parse('{{- JSON.stringify(d) }}');      var api = '/cgi-bin/proto/ajax_user_agp';     var l_app = [];     var l_checked = [];     var treelist = [];       var rmv_checked_app = function(data, source, selectAll){         l_checked[data.field] && delete l_checked[data.field];         updateNodeStyle(data.id, false);         if(selectAll){             data.children.forEach(item => {                 updateNodeStyle(item.id, false);                 l_checked[item.field] && delete l_checked[item.field];             })         }         show_table();              };       var add_checked_app = function(data, selectAll){         if(selectAll){             data.children.forEach(item => {                 l_checked[item.field] = {                     'field': item.field,                     'title': item.name                 };                 updateNodeStyle(item.id, true);             })         } else {             l_checked[data.field] = {                 'field': data.field,                 'title': data.name             };             updateNodeStyle(data.id, true);         }         show_table();     };  var add_node = function(pNode, index) { var list = []; var node = {};  for (var i = index; i < l_app.length; i++) {             l_app[i].checked = false;             l_app[i].LAY_CHECKED = false;              if (l_checked[l_app[i].field]) {                 l_app[i].checked = true;                 l_app[i].LAY_CHECKED = true;             }             node = l_app[i];             /* 忽略自定义协议组，ID=1280，CITS 2730 */ if(node.pid == pNode.id && node.id != '1280') {                 if(!node.name){                     node.name = node.title;                 }                              node.title = node.name + `<span class="paui-node-id" style="display:none">${node.field}</span>`;                 if(pdata.selected_applist && pdata.selected_applist[node.name] && !l_checked[l_app[i].field]){                     node.title = `<span class="protoselect" title='{{ lang014[g_lang] || "在其它协议组中选中" }}'></span>` + node.title;                 } if (node.children) {                     node.children = add_node(node, i);                 }                 treelist[node.field] = node; list.push(node);                 var checkbox = layui.$('.select-all-input[data-node-id="' + 1035 + '"]'); } } return list; };      function addSelectAllButtons() {         $('#paui-agpapp-tree .layui-tree-entry').each(function() {             var $entry = $(this);             var nodeId = $entry.find('.paui-node-id').text();             if (treelist[nodeId] && treelist[nodeId].children) {                 var $txt = $entry.find('.layui-tree-txt');                 var buttons = `<span class="paui-tree-btns">                     <span class="select-all selectAll" title="{{ lang012[g_lang] || "选中改组下所有协议" }}" data-node-id="${treelist[nodeId].field}">{{ lang010[g_lang] || "全选" }}</span>                     <span class="unselect-all selectAll" title="{{ lang013[g_lang] || "取消选中该组下所有协议" }}" data-node-id="${treelist[nodeId].field}">{{ lang011[g_lang] || "反选" }}</span>                     </span>`;                 $txt.after(buttons);             }         });     }      function addSelectAllCheckboxListener() {         $('#paui-agpapp-tree').on('click', '.select-all', function(){             var nodeId = layui.$(this).data('node-id');             var node = treelist[nodeId];             add_checked_app(node, true);         });         $('#paui-agpapp-tree').on('click', '.unselect-all', function(){             var nodeId = layui.$(this).data('node-id');             var node = treelist[nodeId];             rmv_checked_app(node, 'tree', true);         });     }  var show_tree = function(method){ var root_node = [{ "pid": 0, "id": 1044, "field": "", "title": '{{ lang009[g_lang] || "应用协议" }}', "spread": true, children: [] }];         root_node[0].children = add_node(root_node[0], 0);                  if (method != "init") {             tree.reload('paui-agpapp-tree', {                 data: root_node             });         }else{             tree.render({                 elem: '#paui-agpapp-tree',                 id: 'paui-agpapp-tree',                 data: root_node                 ,autoCheckbox: false                 ,onlyIconControl: true                 ,click: function(obj){                     if(obj.data.field == "") return;                     if(!l_checked[obj.data.field]){                         add_checked_app(obj.data);                     }else{                         rmv_checked_app(obj.data, 'tree');                     }                                      }             });         };         for (var field in l_checked) {             if (l_checked[field] && field !== "") {                 updateNodeStyle(treelist[field].id, true);             }          };         addSelectAllButtons();         addSelectAllCheckboxListener(); };      function updateNodeStyle(nodeId, add) {         var nodeElem = $('#paui-agpapp-tree').find('[data-id="' + nodeId + '"]');         if (add) {             nodeElem.addClass('selected-node');         } else {             nodeElem.removeClass('selected-node');         }     }       var show_table = function(method){         var data = [];         layui.each(l_checked, function(index, elem){             data.push(elem);         });         pa_table.render({             elem: '#tab_agp_app',             height: 'full-248',             data: data,             cols: [[                 {type: 'numbers', title: '{{ lang004[g_lang] || "序号" }}'}                 ,{field: 'title', title: '{{ lang005[g_lang] || "协议名称" }}'}                 ,{field: 'act', title: '{{ lang006[g_lang] || "操作" }}', width: 60, align: 'right', templet: function(r){                     return '<span class="abtn" lay-event="tabevt_rmv"><i class="layui-icon layui-icon-delete"></i></span>';                 }}             ]]         });          if(method != "init") return;          search_tab.render({             elem: '#tab_search_app',             height: 'full-286',             data: [],             cols: [[                 {type: 'checkbox'}                 ,{type: 'numbers', title: '{{ lang004[g_lang] || "序号" }}'}                 ,{field: 'title', title: '{{ lang005[g_lang] || "协议名称" }}'}             ]]         });          table.on('tool(tab_agp_app)', function(obj){             rmv_checked_app(obj.data, 'checked');         });          table.on('checkbox(tab_search_app)', function(obj){             if(obj.type == "all"){                 var data = table.cache['tab_search_app'];                 layui.each(data, function(index, elem){                     if(obj.checked)                         add_checked_app(elem);                     else                         rmv_checked_app(elem, 'search');                 });             } else {                 if(obj.checked)                     add_checked_app(obj.data);                 else                     rmv_checked_app(obj.data, 'search');             }         });     };       var app_serach = function(){         var search = form.getValue("form_agp_edit");         if(search.keyword == ""){             $("#paui-agpapp-tree").show();             $("#paui-agpapp-rows").hide();             show_tree();             return false;         };          var data = [];                  layui.each(l_app, function(index, elem){             if( pa_str_find(elem.field || '', search.keyword) || pa_str_find(elem.title || '', search.keyword)){                 elem.title = elem.name;                 data.push(elem);             }         });         $("#paui-agpapp-tree").hide();         $("#paui-agpapp-rows").show();         table.reload("tab_search_app", {             data: data         });     };       /* 页面渲染 */     pa_ajax({ url: api, data: {'action': 'load_edit_agp_env', 'name': '{{d.name}}', 'showany': 'no'},         success: function(json){             l_app = json.data.app_tree;             l_app.push({pid: "1044", id: "0", field: "default", title: '{{ lang007[g_lang] || "未知应用" }}', type: "sysapp"});             l_checked = json.data.checked;             show_table('init');             show_tree('init');         }     });       /* 绑定搜索 */     $("#paui-agp-input-search").on('keyup', app_serach);     form.on('submit(submit_agp_edit)', function(obj){         app_serach();         return false;     });       /* 选定提交 */     $("#submit_edit_user_agp").on("click", function(){         pa_confirm('{{ lang008[g_lang] || "确定要提交吗" }}?', function(index){             layer.close(index);             var data = [];             layui.each(l_checked, function(index, elme){                 data.push('app=' + index);             });              pa_ajax({                 url: api,                 data: {                     'action': 'edit_user_agp',                     'name': '{{d.name}}',                     'cname': '{{d.cname}}',                     'applist': data.join(' ')                 },                 success: function(json){                     if(json.code != 0)                         alert_err(json.msg);                     else{                         layer.closeAll();                         alert_ok(json.msg);                         $("#paui-btn-reload-agp").click();                     }                 }             });         });     }); }); </script>