data dari api

components/Master/formDetail.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import typeUser from "@/data/dummy/keuangan.type_user.json";
+import role_menu from "@/data/dummy/keuangan.role_menu.json";
+import menu from "@/data/dummy/keuangan.menu.json";
+
+import {useRoleMode} from "@/stores/api/roleMenu"
+import {useMenu} from "@/stores/api/menu"
+import {useTypeUser} from "@/stores/api/typeUser"
+
+const {getMenu} = useMenu()
+const {getTypeUser} = useTypeUser()
+
+const {roleMenuById} = storeToRefs(useRoleMode())
+const {listMenu} = storeToRefs(useMenu())
+const {listTypeUser} = storeToRefs(useTypeUser())
+const data = ref<any>([])
+
+const dataMenu = async() => {
+    await getMenu()
+    await getTypeUser()
+    // console.log('ini semua tipe:',listTypeUser.value);
+    return roleMenuById.value.data.map((role_menu: any) => {
+        const menuItem = listMenu.value.find((menu:any) => menu._id == role_menu.menu_id)
+        const type_user= listTypeUser.value.find((type_user:any) => type_user._id == role_menu.type_user_id)
+        // console.log("ini menunya:",menuItem);
+    return {
+      _id: role_menu._id,
+      menu: menuItem?.display || '-',
+      type_user: type_user?.display || '-',
+      accessAdd: role_menu.access?.[0]?.add || 0,
+      accessUpdate: role_menu.access?.[1]?.update || 0,
+      accessRead: role_menu.access?.[2]?.read || 0,  
+      accessDelete: role_menu.access?.[3]?.delete || 0
+    }
+  });
+//   console.log(data)
+};
+
+const onSubmit = async() => {
+    // console.log("ini disimpan:",data.value?.data.typeUser);
+    // console.log("ini disimpan:",data.value?.form$.data);
+    // await getTypeUser(data.value?.form$.data)
+}
+onMounted(async () => {
+//   console.log(roleMenuById.value.data);
+  data.value = await dataMenu()
+  console.log(data.value);
+})
+
+const columns=ref([
+    {label:'Nama Menu',key:'menu'},
+    {label:'Tambah',key:'accessAdd'},
+    {label:'Ubah',key:'accessUpdate'},
+    {label:'Baca',key:'accessRead'},
+    {label:'Hapus',key:'accessDelete'},
+    {label:'Aksi',key:'actions'},
+])
+</script>
+
+<template>
+  <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
+    <!-- {{roleMenuById.data}} -->
+     <!-- {{dataMenu}} -->
+     <!-- {{data}} -->
+    <MasterTable :columns="columns" :data="data"/>
+  </div>
+</template>