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

src/modules/01_metadataNew/components/personal/08ListProvince.vue

@@ -9,7 +9,7 @@ import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const router = useRouter()
+const router = useRouter();
 const store = usePersonalDataStore();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
@@ -17,7 +17,7 @@ const columns = [
   {
     name: "name",
     align: "left",
-    label: "ชื่อ",
+    label: "จังหวัด",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -109,7 +109,7 @@ async function addData() {
 
 async function editData(id: string) {
   await http
-    .put(config.API.orgProvince+`/${id}`, {
+    .put(config.API.orgProvince + `/${id}`, {
       name: province.value,
     })
     .then(() => {
@@ -126,7 +126,7 @@ async function editData(id: string) {
 
 async function deleteData(id: string) {
   await http
-    .delete(config.API.orgProvince+`/${id}`)
+    .delete(config.API.orgProvince + `/${id}`)
     .then(() => {
       fetchData();
       success($q, "ลบข้อมูลสำเร็จ");
@@ -139,8 +139,8 @@ async function deleteData(id: string) {
     });
 }
 
-function nextPage(id:string){
-  router.push(`/master-data/personal/district/${id}`)
+function nextPage(id: string) {
+  router.push(`/master-data/personal/district/${id}`);
 }
 
 onMounted(async () => {
@@ -208,7 +208,11 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.id" @click="nextPage(props.row.id)">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="nextPage(props.row.id)"
+        >
           <div>
             {{ col.value }}
           </div>

src/modules/01_metadataNew/components/personal/province/01_District.vue

@@ -21,7 +21,7 @@ const columns = [
   {
     name: "name",
     align: "left",
-    label: "ชื่อ",
+    label: "เขต/อำเภอ",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",

src/modules/01_metadataNew/components/personal/province/02_SubDistrict.vue

@@ -29,7 +29,7 @@ const columns = [
   {
     name: "name",
     align: "left",
-    label: "ชื่อ",
+    label: "แขวง/ตำบล",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -37,6 +37,17 @@ const columns = [
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "zipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์",
+    sortable: true,
+    field: "zipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdAt",
     align: "left",
@@ -83,6 +94,7 @@ const dialogStatus = ref<string>("");
 const personalName = ref<string>("แขวง/ตำบล");
 const visibleColumns = ref<string[]>([
   "name",
+  "zipCode",
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",

src/modules/01_metadataNew/stores/personalStore.ts

@@ -10,6 +10,7 @@ const { date2Thai } = useCounterMixin();
 
 export const usePersonalDataStore = defineStore("PersonalData", () => {
   const row = ref<DataRow[]>([]);
+  const currentTab = ref<string>("list_prefix");
 
   function save(data: DataResponse[]) {
     const list = data.map((e) => ({
@@ -22,5 +23,6 @@ export const usePersonalDataStore = defineStore("PersonalData", () => {
   return {
     save,
     row,
+    currentTab
   };
 });

src/modules/01_metadataNew/views/personal.vue

@@ -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>