ย้าย tab ไว้ใน store เเก้ column
This commit is contained in:
parent
df0d9f9131
commit
bc7fa07f1f
5 changed files with 40 additions and 21 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue