130 lines
3.7 KiB
Vue
130 lines
3.7 KiB
Vue
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
|
|
import menuRoles from "@/components/apps/Setting/TipePengguna/element/table.vue";
|
|
import pages from "@/components/apps/Setting/TipePengguna/element/checkboxElement.vue";
|
|
import { useSettingStore } from "~/store/apps/Setting/setting";
|
|
|
|
import rolePages from "~/data/dummy/rolePage.ts";
|
|
import sidebarItem from "@/components/layout/full/vertical-sidebar/sidebarItem.ts";
|
|
// const store = useSettingStore();
|
|
const props = defineProps({
|
|
typeForm: {
|
|
type: String,
|
|
},
|
|
});
|
|
|
|
const onSubmit = () => {
|
|
console.log(data.value.form$.data);
|
|
// emit('stateValue', {data:data.value.form$.data, state:false})
|
|
};
|
|
|
|
|
|
const data = ref(null);
|
|
const menu = ref(null);
|
|
const form = ref({});
|
|
|
|
const allMenu = () => {
|
|
menu.value = sidebarItem.flatMap((item) => {
|
|
return item.children
|
|
.flatMap((subitem) => {
|
|
const data = {
|
|
header: item.header,
|
|
title: subitem.title,
|
|
path: subitem.to,
|
|
permission: [],
|
|
}
|
|
if(subitem.children){
|
|
const dataSubChildren = subitem.children.map((submenu) => ({
|
|
header: item.header,
|
|
title: submenu.title,
|
|
path: submenu.to,
|
|
permission: [],
|
|
}))
|
|
return [data, ...dataSubChildren];
|
|
}
|
|
return [data];
|
|
})
|
|
|
|
});
|
|
// filter((menu) => !data.value?.pages.some((m) => m.path === menu.path))
|
|
// menu.value.push(...data.value.pages);
|
|
// console.log("menu:", menu.value);
|
|
}
|
|
|
|
onBeforeMount(async () => {
|
|
if (props.typeForm === "edit"){
|
|
data.value = rolePages.find((item) => item.id_user === 1);
|
|
Object.assign(form.value, data.value);
|
|
|
|
// console.log("data.value:", data.value);
|
|
// console.log("all menu:", sidebarItem);
|
|
|
|
allMenu()
|
|
}else{
|
|
allMenu()
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <pre>{{ rolePages }}</pre> -->
|
|
<pre>{{ data }}</pre>
|
|
<!-- <pre>{{ form }}</pre> -->
|
|
<Vueform
|
|
ref="data"
|
|
v-model="form"
|
|
validate-on="change|step"
|
|
method="post"
|
|
:endpoint="onSubmit"
|
|
>
|
|
<template #empty>
|
|
<FormSteps>
|
|
<FormStep
|
|
name="page0"
|
|
label="Type User"
|
|
:elements="['username', 'role']"
|
|
/>
|
|
<FormStep
|
|
name="page1"
|
|
label="Permission Categories"
|
|
:elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission','pages']"
|
|
/>
|
|
</FormSteps>
|
|
<FormElements>
|
|
<TextElement
|
|
:default="form.username"
|
|
name="username"
|
|
label="user name"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
/>
|
|
<TextElement
|
|
:default="form.role"
|
|
name="role"
|
|
label="Role Type"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
/>
|
|
|
|
|
|
<!-- <div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
|
|
<ListElement name="pages" :default="form.pages" class="mx-4" >
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index" class="px-3"> -->
|
|
<!-- <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
|
|
<!-- <pages name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
|
|
<!-- </ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
</div> -->
|
|
<menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: '',permission:[]}] " :typeForm = "'edit'" :menus="menu"/>
|
|
</FormElements>
|
|
|
|
<FormStepsControls />
|
|
</template>
|
|
</Vueform>
|
|
</template>
|