71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
|
|
import { usePositionDataStore } from "../stores/positionListStore";
|
|
|
|
import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";
|
|
|
|
import ListPosition from "@/modules/01_metadata/components/position/01_Position.vue"; //ตำแหน่ง
|
|
import ListType from "@/modules/01_metadata/components/position/02_Type.vue"; // รายการประเภทตำแหน่ง
|
|
import ListExecutive from "@/modules/01_metadata/components/position/03_Executive.vue"; // ตำแหน่งทางการบริหาร
|
|
|
|
const store = usePositionDataStore();
|
|
|
|
const tabs = ref<Array<MainTabs>>([]); // รายการ Tab
|
|
|
|
/**
|
|
* hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
|
|
*/
|
|
onMounted(() => {
|
|
const tabsPerson = [
|
|
{ label: "ตำแหน่ง", value: "list_position" },
|
|
{ label: "รายการประเภทตำแหน่ง", value: "list_type" },
|
|
{ label: "ตำแหน่งทางการบริหาร", value: "list_executive" },
|
|
];
|
|
tabs.value = tabsPerson;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">
|
|
ข้อมูลตำแหน่งข้าราชการ ฯ
|
|
</div>
|
|
|
|
<q-card flat bordered>
|
|
<q-tabs
|
|
dense
|
|
v-model="store.pathLocation"
|
|
align="left"
|
|
indicator-color="primary"
|
|
active-color="primary bg-teal-1"
|
|
inline-label
|
|
class="text-body2 text-grey-7"
|
|
>
|
|
<q-tab
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
v-on:click="store.pathLocation = tab.value"
|
|
:label="tab.label"
|
|
:name="tab.value"
|
|
class="q-py-xs"
|
|
/>
|
|
</q-tabs>
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="store.pathLocation" animated>
|
|
<q-tab-panel name="list_position">
|
|
<ListPosition v-if="store.pathLocation == 'list_position'" />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="list_type">
|
|
<ListType v-if="store.pathLocation == 'list_type'" />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="list_executive">
|
|
<ListExecutive v-if="store.pathLocation == 'list_executive'" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|