This commit is contained in:
211
frontend/src/components/administracao/permissao/Form.vue
Normal file
211
frontend/src/components/administracao/permissao/Form.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<rkm-form ref="Form">
|
||||
<rkm-row>
|
||||
<rkm-col cols="6">
|
||||
<rkm-form-input
|
||||
disabled
|
||||
label="Unidade"
|
||||
v-model="form.unidadeNomeFantasia"
|
||||
/>
|
||||
</rkm-col>
|
||||
|
||||
<rkm-col cols="6">
|
||||
<rkm-form-input
|
||||
disabled
|
||||
label="Local de atendimento"
|
||||
v-model="form.infraestruturaNome"
|
||||
/>
|
||||
</rkm-col>
|
||||
</rkm-row>
|
||||
|
||||
<rkm-row>
|
||||
<rkm-col cols="6">
|
||||
<rkm-form-input
|
||||
disabled
|
||||
label="Usuário"
|
||||
v-model="form.usuarioNome"
|
||||
/>
|
||||
</rkm-col>
|
||||
|
||||
<rkm-col cols="6">
|
||||
<rkm-form-input
|
||||
disabled
|
||||
label="CBO"
|
||||
v-model="form.ocupacaoNome"
|
||||
/>
|
||||
</rkm-col>
|
||||
</rkm-row>
|
||||
|
||||
<rkm-area
|
||||
v-if="form.papeis.length > 0"
|
||||
no-margin-top
|
||||
title="Papéis"
|
||||
>
|
||||
<rkm-form-checkbox-group v-model="model.papeis">
|
||||
<rkm-form-checkbox
|
||||
v-for="papel in form.papeis"
|
||||
:key="papel.id"
|
||||
:value="papel.id"
|
||||
>
|
||||
{{ papel.nome }}
|
||||
</rkm-form-checkbox>
|
||||
</rkm-form-checkbox-group>
|
||||
</rkm-area>
|
||||
|
||||
<rkm-area
|
||||
v-if="form.modulos.length > 0"
|
||||
no-margin-top
|
||||
title="Permissões"
|
||||
>
|
||||
<rkm-row>
|
||||
<rkm-col>
|
||||
<rkm-tabs>
|
||||
<rkm-tab
|
||||
v-for="modulo in form.modulos"
|
||||
:key="modulo.id"
|
||||
:title="modulo.nome"
|
||||
>
|
||||
<rkm-row>
|
||||
<rkm-col>
|
||||
<rkm-button
|
||||
@click="checkAll(modulo.id)"
|
||||
color="primary"
|
||||
small
|
||||
>
|
||||
Marcar todos
|
||||
</rkm-button>
|
||||
|
||||
<rkm-button
|
||||
@click="uncheckAll(modulo.id)"
|
||||
outline
|
||||
small
|
||||
>
|
||||
Desmarcar todos
|
||||
</rkm-button>
|
||||
</rkm-col>
|
||||
</rkm-row>
|
||||
|
||||
<rkm-row cols="3">
|
||||
<rkm-col
|
||||
v-for="funcionalidade in modulo.funcionalidades"
|
||||
:key="funcionalidade.id"
|
||||
>
|
||||
<rkm-area
|
||||
:title="funcionalidade.nome"
|
||||
no-margin-top
|
||||
>
|
||||
<rkm-form-checkbox-group v-model="model.permissoes">
|
||||
<rkm-form-checkbox
|
||||
v-for="permissao in funcionalidade.permissoes"
|
||||
:key="permissao.id"
|
||||
:value="permissao.id"
|
||||
>
|
||||
{{ permissao.nome }}
|
||||
</rkm-form-checkbox>
|
||||
</rkm-form-checkbox-group>
|
||||
</rkm-area>
|
||||
</rkm-col>
|
||||
</rkm-row>
|
||||
</rkm-tab>
|
||||
</rkm-tabs>
|
||||
</rkm-col>
|
||||
</rkm-row>
|
||||
</rkm-area>
|
||||
</rkm-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Vuex.
|
||||
import { mapActions } from 'vuex'
|
||||
|
||||
// Mixins.
|
||||
import { repository, stringCase, object, error } from '@/mixins'
|
||||
|
||||
export default {
|
||||
created() {
|
||||
|
||||
this.repositories = {
|
||||
permissao: this.getConectaSusRepository('administracao.permissao')
|
||||
}
|
||||
|
||||
this.load()
|
||||
},
|
||||
data: () => ({
|
||||
form: {
|
||||
papeis: [],
|
||||
modulos: []
|
||||
},
|
||||
model: {
|
||||
papeis: [],
|
||||
permissoes: []
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
...mapActions(['setLoading', 'unsetLoading']),
|
||||
checkAll(moduloId) {
|
||||
|
||||
this.form.modulos.find(m => m.id === moduloId).funcionalidades
|
||||
.map(f => f.permissoes.map(permissao => {
|
||||
|
||||
if (!this.model.permissoes.includes(permissao.id)) {
|
||||
|
||||
this.model.permissoes.push(permissao.id)
|
||||
}
|
||||
}))
|
||||
},
|
||||
uncheckAll(moduloId) {
|
||||
|
||||
this.form.modulos.find(m => m.id === moduloId).funcionalidades
|
||||
.map(f => f.permissoes.map(permissao => {
|
||||
|
||||
const index = this.model.permissoes.findIndex(id => id === permissao.id)
|
||||
|
||||
if (index >= 0) {
|
||||
|
||||
this.model.permissoes.splice(index, 1)
|
||||
}
|
||||
}))
|
||||
},
|
||||
load() {
|
||||
|
||||
this.setLoading()
|
||||
|
||||
this.repositories.permissao.edit(this.id)
|
||||
.then(({ data }) => {
|
||||
|
||||
this.form = data.form
|
||||
this.model = data.model
|
||||
})
|
||||
.catch(this.handleError)
|
||||
.finally(() => this.unsetLoading())
|
||||
},
|
||||
save() {
|
||||
|
||||
this.$refs.Form.validate()
|
||||
.then(valid => {
|
||||
|
||||
if (!valid) return
|
||||
|
||||
this.setLoading()
|
||||
|
||||
this.repositories.permissao.update(this.id, this.prepareData())
|
||||
.then(({ data }) => {
|
||||
|
||||
this.showSaveNotification()
|
||||
this.$emit('save', data)
|
||||
})
|
||||
.catch(this.handleError)
|
||||
.finally(() => this.unsetLoading())
|
||||
})
|
||||
},
|
||||
prepareData() {
|
||||
|
||||
return this.camelObjectKeysToSnakeRecursive(this.clone(this.model))
|
||||
},
|
||||
},
|
||||
mixins: [repository, stringCase, object, error],
|
||||
props: {
|
||||
id: { type: Number, required: true }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user