64 lines
2 KiB
Vue
64 lines
2 KiB
Vue
div
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import ListPosition from "@/modules/01_masterdata/components/position/01ListPosition.vue";
|
|
import ListType from "@/modules/01_masterdata/components/position/02ListType.vue";
|
|
import ListExecutive from "@/modules/01_masterdata/components/position/04ListExecutive.vue";
|
|
import { usePositionDataStore } from "../stores/positionListStore";
|
|
// const store.pathLocation = ref<string>("list_position");
|
|
const tabs = ref<Array<any>>([]);
|
|
const store = usePositionDataStore();
|
|
|
|
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>
|