js vue2左右移动,作为权限
Sonder
2022-10-31
6715字
17分钟
浏览 (1.6k)
![image.png](https://s2.loli.net/2022/10/31/y2UaVfQzOrAStLe.png)
<template>
<div class='page_middle_container adminList'>
<div class='page_middle_title'>
{{item && item.id ? $config.label.table.modify:$config.label.table.create}}
<i class='el-icon-close page_middle_close' @click='closeInfo'></i>
</div>
<div class='page_middle_content'>
<div class='page_middle_permissions_title'>
<div>
<div class='box_select_tab'>
<div class='box_select_left'>
<div clas='box_select_main'>
<div class='box_select_ones' v-for='(item,index) in list' :class='{box_select_ones_select:type=="all" && curIndex==index}' :key='index' @click='selectTab("all",index)'>{{item.permission}}</div>
</div>
</div>
<div class='box_select_banner'>
<div><el-button size='mini' @click='doPrepAll' type="primary" icon="el-icon-arrow-left">全左移</el-button></div>
<div><el-button size='mini' @click='doPrep' type="primary" icon="el-icon-arrow-left">左移</el-button></div>
<div><el-button size='mini' @click='doNext' type="primary">右移<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
<div><el-button size='mini' @click='doNextAll' type="primary">全右移<i class="el-icon-arrow-right el-icon--right"></i></el-button></div>
</div>
<div class='box_select_right'>
<div clas='box_select_main'>
<div class='box_select_ones' v-for='(item,index) in permissions' :class='{box_select_ones_select:type=="mine" && curIndex==index}' :key='index' @click='selectTab("mine",index)'>{{item.permission}}</div>
</div>
</div>
</div>
<div class='pageMiddle_row'>
<el-button type="primary" @click="closeInfo">取消</el-button>
<el-button type="primary" @click="doCommit">{{item.id ? '修改':'新增'}}</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'pageMiddle',
props:{
item:{
type:Object,
default:()=>{
return {}
}
}
},
data(){
return {
data:{
username:'',
passwd:'',
surepasswd:'',
},
list:[{"id":4,"permission":"dsada22","code":"21321","type":0,"disabled":0,"level":0},{"id":5,"permission":"231321","code":"12111","type":1,"disabled":0,"level":1},{"id":6,"permission":"12312","code":"121312","type":0,"disabled":0,"level":0},{"id":7,"permission":"d@asascas","code":"121cv","type":0,"disabled":0,"level":0}],
permissions:[{"id":1,"permission":"权限","code":"aaa","type":0,"disabled":0,"level":0},{"id":2,"permission":"权限2","code":"bbb","type":0,"disabled":0,"level":1},{"id":3,"permission":"权限3","code":"ccc","type":0,"disabled":1,"level":0}],
loading:false,
curIndex:'',
type:""
}
},
mounted(){
if(this.item.id) this.loadData()
},
methods:{
loadData(){
// this.$axios.get(this.$urls.permissionList.list).then((res)=>{
// this.initData(res.data); //所有权限
// })
},
initData(list){
// this.data = {...this.item};
// let url = `${this.$urls.adminList.permission}?admin_id=${this.data.id}`
// this.$axios.get(url).then(res=>{
// this.data.permission = res.data
// this.permissions = list.filter(x=>(this.data.permission.map(j=>j.permission) || []).indexOf(x.permission) > -1) ;
// this.list = list.filter(x=>this.data.permission.map(j=>j.permission).indexOf(x.permission) == -1);
// })
},
selectTab(type,index){
this.type = type;
this.curIndex = index;
},
doPrep(){
if(this.type == 'mine' && this.curIndex !== ''){
let item = this.permissions.splice(this.curIndex,1);
this.list = this.list.concat(item)
this.type = this.curIndex = '';
}else{
this.type = this.curIndex = '';
}
},
doNext(){
if(this.type == 'all' && this.curIndex !== ''){
let item = this.list.splice(this.curIndex,1);
this.permissions = this.permissions.concat(item)
this.type = this.curIndex = '';
}else{
this.type = this.curIndex = '';
}
},
doPrepAll(){
this.list = this.list.concat(this.permissions.splice(0))
},
doNextAll(){
this.permissions = this.permissions.concat(this.list.splice(0))
},
closeInfo(){
this.$emit('closeInfo')
},
formatData(){
return true;
},
doCommit(){
if(this.loading || !this.formatData()){
return;
}
this.loading = true;
this.update()
},
update(){
let url = this.$urls.adminList.update_permisson;
let data = {
account_id:this.data.id,
permission_id_list:this.permissions.map(x=>x.id)
}
// console.log(this.data)
// console.log(data)
// return
this.$axios.post(url,data).then(()=>{
setTimeout(()=>{this.loading = false;},1000)
this.$tips.success({text:'修改成功'})
this.$emit('closeInfo',true)
}).catch(()=>{
setTimeout(()=>{this.loading = false;},1000)
})
},
},
}
</script>
<style scoped>
.adminList .page_middle_permissions_title{
display: flex;
justify-content: center;
}
.adminList .box_select_tab{
display: flex;
}
.adminList .box_select_left,.box_select_right{
width:150px;
height:486px;
/* background:red; */
border:1px solid #911C61;
padding:10px;
overflow: scroll;
}
.adminList .box_select_banner{
width:120px;
height:486px;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center
}
.adminList .box_select_banner button{
margin:20px 0;
width:90px;
}
.adminList .box_select_ones{
text-align: left;
padding:10px 10px;
font-size:14px;
}
.adminList .box_select_ones_select{
background:#0100c8;
color:#fff;
border-radius:2px;
}
.adminList .pageMiddle_row{
margin-top: 15px;
display: flex;
justify-content: center;
}
</style>