DzzOffice/admin/setting/template/perm_group.htm

<link rel="stylesheet" href="{MOD_PATH}/images/setting.css">
<style type="text/css">
	.view-eidt{
		padding-right: 5px;
    color: #3779ff;
	}
</style>
<div class="middle-center-content"> 
  <!--地址栏结束-->
  <div class="perm-top middletopMenu">
    <div class="new-button">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="myModalLabel" data-bs-target="#myjurisdic" aria-expanded="false"> {lang new_permissions} </button>
      <div class="modal fade" id="myjurisdic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
          <div class="modal-content">
            <form action="{MOD_URL}&op=permgroup&do=addpermgroup" method="post" onsubmit="return permchk(this);">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">{lang add_folder_permission_group}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="col-md-12 clearfix">
                  <label> {lang folder_permissions}{lang name} </label>
                  <input type="text" class="form-control" name="pername" value=""/>
                </div>
                <div class="select-p clearfix">
                  <p class="select-perm ">{lang choose_permission}：</p>
                  <ul class="select-properties col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <!--{loop $perms $k $val}-->
                    <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="perms[]" id="$val[2]" value="$val[1]">
                        <label class="form-check-label" for="$val[2]"><span class="{$val[2]} view-eidt perm_chk" data-perm="$val[1]"></span><span>$val[0]</span></label>
                      </div>
                    </li>
                    <!--{/loop}-->
                  </ul>
                </div>
              </div>
              <div class="modal-footer">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="default" value="1" id="inputfore">
                  <label class="form-check-label" for="inputfore">{lang set_default_permission_group}</label>
                </div>
                <button type="submit" class="btn btn-outline-primary">{lang confirms}</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{lang cancel} </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>{lang name}</th>
        <th style="min-width: 120px;">{lang jurisdiction}</th>
        <th>启用</th>
        <th width="140px">{lang operation}</th>
      </tr>
    </thead>
    <tbody class="properties-con">
      <!--{loop $permgroups $v}-->
      <tr class="properties-list" id="perm_$v[id]">
        <td><img src="dzz/styles/thame/colorful/system/folder.png">
          <span class="d-inline-block text-truncate" style="max-width: 150px;">$v[pername]</span>
          <!--{if $v['system']}--> 
          <p class="label">{lang system_default}</p>
          <!--{/if}-->
        </td>
        <td>
          <ul class="nav nav-pills">
            <!--{loop $perms $k $val}--> 
            <li  class="nav-item" <!--{if $val[1]&$v[perm]}-->style="display:block"<!--{else}--> style="display:none"<!--{/if}-->><span class="{$val[2]}"></span>
            </li>
            <!--{/loop}-->
          </ul>
        </td>
        <td>
          <div class="form-check form-switch">
            <input type="checkbox" onchange="edit_perm(this,'$v[id]')" class="form-check-input" <!--{if !$v[off]}-->checked="checked" <!--{/if}--> /> 
          </div>
        </td>
        <td>
          <!--{if !$v['system']}--> 
          <span class="dzz dzz-netdisk-edit proper-delete" onclick="editpermgroup('$v[id]')"  style="cursor:pointer;"></span>
          <span class="dzz dzz-delete proper-delete" onclick="delete_perm(this,'$v[id]')"></span>
          <!--{/if}-->
          <!--{if $v[default]}--> 
          <span class="proper-perm proper-default"><span class="icon ti-check perm-ok perm-ok-color"></span>{lang default_permission}</span> 
          <!--{else}--> 
          <span class="proper-perm proper-set" onclick="setDefault(this,'$v[id]')"><span  class="icon ti-check perm-ok"></span>{lang set_default}</span> 
          <!--{/if}-->
        </td>
      </tr>
      <!--{/loop}--> 
    </tbody>
  </table>
  <div class="properties-title">
    <div class="properties-baground">
      <p class="properties-orange">{lang folder_property_group_permission}</p>
      <ul class="properties-explain">
        <!--{loop $perms $k $val}-->
        <li><span class="{$val[2]}"></span>$val[0]</li>
        <!--{/loop}-->
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
    function permchk(form) {
      jQuery.post(form.action, jQuery(form).serialize(), function (data) {
          if (data['success']) {
              var perms = data['success']['perm'];
              var permstr = '';
              if (data['success']['default'] == 0) {
                  var defaultstr = '<span class="proper-perm proper-set" onclick="setDefault(this,'+data['success']['id']+')"><span class="dzz dzz-done perm-ok"></span>{lang set_default}</span> ';
              } else {
                  var defaultstr = '<span class="proper-perm proper-default"><span class="dzz dzz-done perm-ok perm-ok-color"></span>{lang default_permission}</span>';
                  jQuery('.properties-list').each(function(){
                      var idval = jQuery(this).attr('id');
                    idval = idval.replace('perm_','');
                      jQuery(this).find('.proper-default').html('<span class="proper-perm proper-set" onclick="setDefault(this,'+idval+')"><span class="dzz dzz-done perm-ok"></span>{lang set_default}</span>')

                  })
              }
              for(var o in perms){
                  permstr += '<li class="nav-item"><span class="'+perms[o]+'" ></span></li>';
              }

              var html ='<tr class="properties-list" id="perm_'+data['success']['id']+'"> ' +
                      '<td>' +
                      '<img src="dzz/styles/thame/colorful/system/folder.png"><span class="d-inline-block text-truncate" style="max-width: 150px;">' + data['success']['pername'] + '</span> '+'</td>'+
                      '<td><ul class="nav nav-pills">' +permstr+'</ul></td>' +
											'<td>' +
											'<div class="form-check form-switch"><input type="checkbox" onchange="edit_perm(this,'+data['success']['id']+')" class="form-check-input" checked="checked"/></div>' +
											'</td>' +
											'<td>' +
                      '<span class="dzz dzz-netdisk-edit proper-delete" onclick="editpermgroup('+data['success']['id']+')" style="cursor:pointer;"></span> ' +
                      '<span class="dzz dzz-delete proper-delete" onclick="delete_perm(this,'+data['success']['id']+')"></span>'+defaultstr+' ' +
											'</td>' +
                      '</tr>';
                var elem = jQuery(html).appendTo('.properties-con').find('.js-switch');
                jQuery('#myjurisdic').modal('hide');
                return false;
            } else {
                showDialog(data['error']);
                return false;
            }
        }, 'json');
        return false;
    }
    function edit_perm(obj, pid) {
        if (jQuery(obj).prop('checked')) {
            var off = 0;
        } else var off = 1;
        jQuery.post(MOD_URL+'&op=permgroup&do=editpermgroup_off', {'off': off, id: pid}, function (data) {
            if (data['success']==true) {
                if (off == 0) {
                    jQuery(obj).attr('checked', true);
                    showmessage('{lang permission_group_open_succeeded}','success',1000,1);

                }else {
                    jQuery(obj).attr('checked', false);
                    showmessage('{lang permission_group_close_succeeded}','success',1000,1);
                }
            }
        }, 'json')
    }
    function setDefault(obj, pid) {
        jQuery.post(MOD_URL+'&op=permgroup&do=setdefault', {'id': pid}, function (data) {
            if (data['success']) {
                jQuery('.properties-list').each(function () {
                    var id = jQuery(this).attr('id').replace('perm_', '');
                    if (id != pid) {
                        jQuery(this).find('.proper-default').html('<span class="proper-perm proper-set" onclick="setDefault(this,' + id + ')"><span class="dzz dzz-done perm-ok"></span>{lang set_default}</span>');
                    }

                })
                jQuery(obj).replaceWith('<span class="proper-perm proper-default"><span class="dzz dzz-done perm-ok perm-ok-color"></span>{lang default_permission}</span>');
                showmessage('{lang set_default_permission_succeeded}','success',1000,1);
            }
        }, 'json');
    }
    function delete_perm(obj, pid) {
        if(confirm('{lang delete_permission_group_sure}')){
            jQuery.post(MOD_URL+'&op=permgroup&do=deleteperm', {'id': pid}, function (data) {
                if (data['success']) {
                    jQuery(obj).parents('.properties-list').remove();
                    showmessage('{lang permission_group_delete_succeeded}','success',1000,1);
                }
            }, 'json')
        }
        return false;
    }
    function editpermgroup(pid) {
        showWindow('editpermgroup', MOD_URL+'&op=ajax&operation=editpermgroup&id=' + pid);
    }

</script>