加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
vue-role.0.1.0.min.js 8.68 KB
一键复制 编辑 原始数据 按行查看 历史
藤之内 提交于 2018-09-29 08:41 . d
(function(){var dialogData={role_imitate:'',role_names:{'1':'管理员','2':'小编','3':'客服'},edit_model:false,edit:true,edit_action:'',f:false,default_all:true,roleCheck:[1,2],show:false,lang:{title:'权限设置',sys_role:'系统设定,不可编辑',f:'不选择,除了超管没有其他角色可以访问',f_not:'不选择,任何角色都可以访问',cancel:'取消',submit:'提交',imitate:'模拟',close:'关闭'}};var pageSpan=null;var el_current=null;var onRoleEdit=function(action,roles,close){close();console.log(action+":"+JSON.stringify(roles))};var onPageNoRole=function(){alert('你没有权限访问当前页面');history.go(-1)};function parseSearch(){var search_l=location.search.substr(1);if(!search_l)return{};search_l=search_l.split('&');var search={};for(i=0;i<search_l.length;i++){var kv=search_l[i].split('=');search[kv[0]]=kv[1]}return search}function hashChange(){if(!pageSpan)return;var role_key=hashToKey();var roleCheck=config.roles[role_key];if(!roleCheck){roleCheck=[]}if(config.edit_model){pageSpan.classList.remove('vue-role-dot-has-role');pageSpan.classList.remove('vue-role-dot-f');pageSpan.classList.remove('vue-role-dot');if(roleCheck.length>0){pageSpan.classList.add('vue-role-dot-has-role')}else{pageSpan.classList.add('vue-role-dot')}}if(roleCheck.length>0){if(config.role==config.super_role){return}for(i=0;i<roleCheck.length;i++){if(roleCheck[i]==config.role){return}}onPageNoRole()}}window.addEventListener("popstate",hashChange,false);var vueRoleEditor=Vue.component('vue-role-dialog',{template:'<div v-if="edit_model">'+' <div v-if="show" class="vue-role-dialog__wrapper" >'+' <div class="vue-role-dialog" >'+' <div class="vue-role-dialog__header" >'+' <div >'+' <span>{{lang.title}}</span>'+' </div>'+' </div>'+' <div class="vue-role-dialog__content" style="">'+' <span style="width:120px;display: inline-block;padding-right: 10px;" v-for="(v,k) in role_names"> <input type="checkbox" :disabled="!edit" v-model="roleCheck" :value="k" /> {{v}}</span>'+' <div v-show="!edit" class="info"><span>{{lang.sys_role}}</span></div>'+' <div v-show="edit" class="info"><span>{{f? lang.f:lang.f_not}}</span></div>'+' </div>'+' <div class="vue-role-dialog__btns" >'+' <button @click="show=false" class="vue-role-btn" type="button" >'+' <span>{{lang.cancel}}</span>'+' </button>'+' <button @click="saveRole" class="vue-role-btn vue-role-btn-primary" type="button" >'+' <span>{{lang.submit}}</span>'+' </button>'+' </div>'+' </div>'+' </div>'+' <div v-if="show" class="vue-role-model" tabindex="0" style="z-index: 2000;"></div>'+' <div class="vue-role-change">'+' <select v-model="role_imitate">'+' <option v-for="(v,k) in role_names" :value="k"> {{v}}</option>'+' </select>'+' <button @click="imitate" style="border-radius:0" class="vue-role-btn vue-role-btn-primary">{{lang.imitate}}</button>'+' <button @click="close" style="border-radius:0" class="vue-role-btn ">{{lang.close}}</button>'+' </div>'+' </div>',data:function(){return dialogData},methods:{imitate:function(){var search=parseSearch();search.vue_role_edit_model=1;search.vue_role_imitate=this.role_imitate;var m='';for(var k in search){if(!search.hasOwnProperty(k)){return}if(m){m+='&'}m+=k+'='+search[k]}location.href=location.pathname+'?'+m+location.hash},close:function(){var search=parseSearch();delete search.vue_role_edit_model;delete search.vue_role_imitate;var m='';for(var k in search){if(!search.hasOwnProperty(k)){return}if(m){m+='&'}m+=k+'='+search[k]}location.href=location.pathname+'?'+m+location.hash},saveRole:function(){var me=this;function close(){me.show=false}if(!this.edit){close()}else{config.roles[this.edit_action]=this.roleCheck;el_current.classList.remove('vue-role-dot-has-role');el_current.classList.remove('vue-role-dot-f');el_current.classList.remove('vue-role-dot');if(this.roleCheck.length>0){el_current.classList.add('vue-role-dot-has-role')}else{if(this.f){el_current.classList.add('vue-role-dot-f')}else{el_current.classList.add('vue-role-dot')}}onRoleEdit(this.edit_action,this.roleCheck,close)}}}});var vueRoleEditorDiv=document.createElement('div');vueRoleEditorDiv.id='vue-role-editor';document.body.appendChild(vueRoleEditorDiv);var editor=(new vueRoleEditor);editor.$mount('#vue-role-editor');function hashToKey(){var hash=window.location.hash;hash=hash.substr(hash.indexOf('/')==1?2:1);if(hash.indexOf('?')>-1){hash=hash.substr(0,hash.indexOf('?'))}var path=hash.split('/');var m=[];for(var i=0;i<path.length;i++){var item=path[i];if(!(parseInt(item)+""==item||item.indexOf('@')==0)){m.push(item)}}path=m;return path.join('/')}var config={edit_model:false,role:1,super_role:1,super:true,roles:{'customer.menu':[]},role_names:{'1':'管理员','2':'小编','3':'客服'},lang:{title:'权限设置',sys_role:'系统设定,不可编辑',f:'不选择,除了超管没有其他角色可以访问',f_not:'不选择,任何角色都可以访问',cancel:'取消',submit:'提交',imitate:'模拟',close:'关闭'}};window.VueRole={config:function(set){var me=this;for(var i in set){if(!set.hasOwnProperty(i)){return}config[i]=set[i]}config.role=""+config.role;config.super_role=""+config.super_role;config.super=config.role==config.super_role;var search=parseSearch();config.edit_model=search['vue_role_edit_model'];dialogData.edit_model=config.edit_model;var role=search['vue_role_imitate'];if(role){config.role=role;config.super=false}dialogData.role_imitate=config.role;dialogData.role_names=config.role_names;if(config.edit_model){pageSpan=document.createElement('span');pageSpan.classList.add('vue-role-page');pageSpan.classList.add('vue-role-dot');document.body.appendChild(pageSpan);pageSpan.onclick=function(event){el_current=pageSpan;event.stopPropagation();dialogData.show=true;dialogData.f=false;var role_key=hashToKey();var roles=config.roles[role_key];if(!roles){roles=[]}dialogData.roleCheck=roles;dialogData.edit=true;dialogData.edit_action=role_key}}hashChange();if(config.role==config.super_role){document.onkeydown=function(e){if(e.ctrlKey&&e.key=='/'){me.editModel(!config.edit_model)}}}},editModel:function(open){if(open==null)open=true;var search=parseSearch();delete search.vue_role_edit_model;delete search.vue_role_imitate;if(open==true){search.vue_role_edit_model=1}var m='';for(var k in search){if(!search.hasOwnProperty(k)){return}if(m){m+='&'}m+=k+'='+search[k]}location.href=location.pathname+'?'+m+location.hash},onRoleEdit:function(fun){onRoleEdit=fun},onPageNoRole:function(fun){onPageNoRole=fun}};function locateNode(vnode){return vnode.componentInstance&&(!vnode.data||!vnode.data.transition)?locateNode(vnode.componentInstance._vnode):vnode}Vue.directive('role',{inserted:function(el,binding,vnode){var role_key=binding.rawName.replace('v-role:','').replace('.$f','').replace('.$h','');var arg=binding.arg;if(config.edit_model&&!binding.modifiers.$h&&(!binding.expression||binding.value)){if(!el.style.position||el.style.position=='inherit'||el.style.position=='initial'||el.style.position=='unset'||el.style.position=='static'){el.style.position='relative'}var span=document.createElement('span');var roles=config.roles[role_key];if(!roles){roles=[]}if(roles.length>0||!arg){span.classList.add('vue-role-dot-has-role')}else{if(binding.modifiers.$f){span.classList.add('vue-role-dot-f')}else{span.classList.add('vue-role-dot')}}span.onclick=function(event){el_current=span;event.stopPropagation();dialogData.show=true;dialogData.f=binding.modifiers.$f;if(!arg){var keys=[];for(var i in binding.modifiers){if(binding.modifiers.hasOwnProperty(i)){if(i=='$f'){f=true}else if(i=='$h'){h=true}else{keys.push(i)}}}dialogData.roleCheck=keys;dialogData.edit=false;dialogData.edit_action=''}else{dialogData.roleCheck=roles;dialogData.edit=true;dialogData.edit_action=role_key}};el.appendChild(span);span=document.createElement('span');span.style.clear='both';el.appendChild(span)}if(config.role==config.super_role){return}if(!arg){if(binding.modifiers[config.role]){return}}else{if(!config.roles[role_key]||config.roles[role_key].length==0){if(!binding.modifiers.$f){return}}else{for(i=0;i<config.roles[role_key].length;i++){if(config.roles[role_key][i]==config.role){return}}}}el.remove();el.style.display='none'}})})();
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化