236 lines
11 KiB
Vue
236 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<v-layout>
|
|
<v-flex xs12 mb-2 style="width:100%">
|
|
<v-card>
|
|
<v-card-text>
|
|
<v-layout row>
|
|
<v-flex xs6>
|
|
<h4 class="headline">HAK AKSES HALAMAN</h4>
|
|
</v-flex>
|
|
<v-flex class="text-sm-right" xs6>
|
|
<v-btn @click="save()" color="primary">Simpan</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout>
|
|
<v-dialog v-model="dialogsuccess" persistent max-width="290">
|
|
<v-card>
|
|
<v-card-title color="success" class="headline">Berhasil !</v-card-title>
|
|
<v-card-text>
|
|
{{msgsuccess}}
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-flex xs12>
|
|
<v-layout row wrap>
|
|
<v-flex xs3>
|
|
<v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 0">
|
|
<v-card-title
|
|
dark
|
|
class="headline info pt-2 pb-2"
|
|
primary-title
|
|
style="color:white"
|
|
>
|
|
<h5 dark>{{mp.name}}</h5>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
|
|
<v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
|
|
<v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
|
|
<v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
<v-flex xs3>
|
|
<v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 1">
|
|
<v-card-title
|
|
dark
|
|
class="headline info pt-2 pb-2"
|
|
primary-title
|
|
style="color:white"
|
|
>
|
|
<h5 dark>{{mp.name}}</h5>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
|
|
<v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
|
|
<v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
|
|
<v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
<v-flex xs3>
|
|
<v-card class="mb-2 mr-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 2">
|
|
<v-card-title
|
|
dark
|
|
class="headline info pt-2 pb-2"
|
|
primary-title
|
|
style="color:white"
|
|
>
|
|
<h5 dark>{{mp.name}}</h5>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
|
|
<v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
|
|
<v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
|
|
<v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
<v-flex xs3>
|
|
<v-card class="mb-2" v-for="(mp,index) in xpriviledges" v-if="rmod(index) === 3">
|
|
<v-card-title
|
|
dark
|
|
class="headline info pt-2 pb-2"
|
|
primary-title
|
|
style="color:white"
|
|
>
|
|
<h5 dark>{{mp.name}}</h5>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<div v-for="(p,idx) in mp.childs" :key="p.S_PrivilegeID">
|
|
<v-btn v-if="p.status === 'N' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="error"><v-icon left>close</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.status === 'Y' && p.S_MenuUrl !== '#'" small @click="changePriviledge(index,idx,p.status)" color="success"><v-icon left>check</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<v-btn v-if="p.S_MenuUrl === '#'" small color="info"><v-icon left>home</v-icon>{{p.S_MenuName}}</v-btn>
|
|
<div v-for="(px,indx) in p.childs" :key="px.S_PrivilegeID">
|
|
<v-btn class="ml-4" v-if="px.status === 'N'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="error"><v-icon left>close</v-icon>{{px.S_MenuName}}</v-btn>
|
|
<v-btn class="ml-4" v-if="px.status === 'Y'" small @click="changePriviledgeLevel2(index,idx,indx,px.status)" color="success"><v-icon left>check</v-icon>{{px.S_MenuName}}</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table, td, th {
|
|
border: 1px solid #ddd;
|
|
text-align: left;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
th, td {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-left: 8px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.mini-input .v-input{
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
|
|
margin-top: 0px;
|
|
margin-bottom:0px;
|
|
margin-left:3px;
|
|
}
|
|
.mini-input .v-messages{
|
|
min-height:0px;
|
|
}
|
|
input.fhm-input{
|
|
border: 1px solid black;
|
|
border-radius: 2px;
|
|
-webkit-box-shadow:
|
|
inset 0 0 2px rgba(0,0,0,0.1),
|
|
0 0 4px rgba(0,0,0,0.1);
|
|
-moz-box-shadow:
|
|
inset 0 0 2px rgba(0,0,0,0.1),
|
|
0 0 4px rgba(0,0,0,0.1);
|
|
box-shadow:
|
|
inset 0 0 2px rgba(0,0,0,0.1),
|
|
0 0 4px rgba(0,0,0,0.1);
|
|
padding: 2px 4px;
|
|
background: rgba(255,255,255,0.5);
|
|
margin: 0 0 1px 0;
|
|
width:30px;
|
|
text-align:center;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data: () => ({
|
|
|
|
}),
|
|
computed: {
|
|
xpriviledges() {
|
|
return this.$store.state.priviledge.priviledges
|
|
},
|
|
dialogsuccess: {
|
|
get() {
|
|
return this.$store.state.priviledge.dialog_success
|
|
},
|
|
set(val) {
|
|
this.$store.commit("priviledge/update_dialog_success",val)
|
|
}
|
|
},
|
|
msgsuccess(){
|
|
return this.$store.state.priviledge.msg_success
|
|
}
|
|
},
|
|
methods : {
|
|
rmod(idx){
|
|
return idx % 4
|
|
},
|
|
changePriviledge(idxpar,idxchild,val){
|
|
var arrx = this.$store.state.priviledge.priviledges
|
|
arrx[idxpar]['childs'][idxchild].status = val === 'N'?'Y':'N'
|
|
arrx[idxpar]['childs'][idxchild].active = 'Y'
|
|
|
|
this.$store.commit("priviledge/update_priviledges",arrx)
|
|
this.$store.commit("usergroup/update_no_save",true)
|
|
},
|
|
changePriviledgeLevel2(idxpar,idxchild,idxchild2,val){
|
|
var arrx = this.$store.state.priviledge.priviledges
|
|
arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].status = val === 'N'?'Y':'N'
|
|
arrx[idxpar]['childs'][idxchild]['childs'][idxchild2].active = 'Y'
|
|
|
|
this.$store.commit("priviledge/update_priviledges",arrx)
|
|
this.$store.commit("usergroup/update_no_save",true)
|
|
},
|
|
closeDialogSuccess(){
|
|
this.$store.commit("priviledge/update_dialog_success",false)
|
|
this.$store.dispatch("priviledge/lookup",{
|
|
id:this.$store.state.usergroup.selected_usergroup.id
|
|
})
|
|
},
|
|
save(){
|
|
var prm = this.$store.state.priviledge.priviledges
|
|
this.$store.dispatch("priviledge/save",prm)
|
|
}
|
|
}
|
|
}
|
|
</script>
|