ย้าย tab ไว้ใน store เเก้ column

This commit is contained in:
STW_TTTY\stwtt 2024-05-15 13:06:22 +07:00
parent df0d9f9131
commit bc7fa07f1f
5 changed files with 40 additions and 21 deletions

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePersonalDataStore } from '@/modules/01_metadataNew/stores/personalStore'
import ListPrefix from "@/modules/01_metadataNew/components/personal/01ListPrefix.vue";
import ListRank from "@/modules/01_metadataNew/components/personal/02ListRank.vue";
import ListBloodGroup from "@/modules/01_metadataNew/components/personal/03ListBloodGroup.vue";
@ -9,7 +10,7 @@ import ListRelationship from "@/modules/01_metadataNew/components/personal/06Lis
import ListEducation from "@/modules/01_metadataNew/components/personal/07ListEducationLevel.vue";
import ListProvince from "@/modules/01_metadataNew/components/personal/08ListProvince.vue";
const currentTab = ref<string>("list_prefix");
const store = usePersonalDataStore()
const tabs = ref<Array<any>>([]);
onMounted(() => {
@ -36,7 +37,7 @@ onMounted(() => {
<div class="text-subtitle1 text-grey-9">
<q-tabs
dense
v-model="currentTab"
v-model="store.currentTab"
align="left"
indicator-color="primary"
active-color="primary bg-teal-1"
@ -46,7 +47,7 @@ onMounted(() => {
<q-tab
v-for="tab in tabs"
:key="tab.value"
v-on:click="currentTab = tab.value"
v-on:click="store.currentTab = tab.value"
:label="tab.label"
:name="tab.value"
class="q-py-xs"
@ -55,30 +56,30 @@ onMounted(() => {
<q-separator />
<!-- person -->
<q-tab-panels v-model="currentTab" animated>
<q-tab-panels v-model="store.currentTab" animated>
<q-tab-panel name="list_prefix">
<ListPrefix v-if="currentTab == 'list_prefix'" />
<ListPrefix v-if="store.currentTab == 'list_prefix'" />
</q-tab-panel>
<q-tab-panel name="list_rank">
<ListRank v-if="currentTab == 'list_rank'" />
<ListRank v-if="store.currentTab == 'list_rank'" />
</q-tab-panel>
<q-tab-panel name="list_gender">
<ListGender v-if="currentTab == 'list_gender'" />
<ListGender v-if="store.currentTab == 'list_gender'" />
</q-tab-panel>
<q-tab-panel name="list_relationship">
<ListRelationship v-if="currentTab == 'list_relationship'" />
<ListRelationship v-if="store.currentTab == 'list_relationship'" />
</q-tab-panel>
<q-tab-panel name="list_bloodGroup">
<ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
<ListBloodGroup v-if="store.currentTab == 'list_bloodGroup'" />
</q-tab-panel>
<q-tab-panel name="list_religion">
<ListReligion v-if="currentTab == 'list_religion'" />
<ListReligion v-if="store.currentTab == 'list_religion'" />
</q-tab-panel>
<q-tab-panel name="list_province">
<ListProvince v-if="currentTab == 'list_province'" />
<ListProvince v-if="store.currentTab == 'list_province'" />
</q-tab-panel>
<q-tab-panel name="list_education">
<ListEducation v-if="currentTab == 'list_education'" />
<ListEducation v-if="store.currentTab == 'list_education'" />
</q-tab-panel>
</q-tab-panels>
</div>