From 9fd73ec8dbc7a13cb9a9e022cf345df1e70b3f4a Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 29 Oct 2024 14:41:01 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20popup=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/requestEdit/02_TabIDP.vue      |  15 +-
 ...alog02_EditIDP.vue => requestEditPage.vue} | 486 +++++++++---------
 src/modules/04_registryPerson/router.ts       |  12 +
 src/modules/04_registryPerson/store.ts        |  12 +-
 .../views/requestEditView.vue                 |  15 +-
 5 files changed, 274 insertions(+), 266 deletions(-)
 rename src/modules/04_registryPerson/components/requestEdit/{Dialog02_EditIDP.vue => requestEditPage.vue} (53%)

diff --git a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
index 76cc47a86..c410baf09 100644
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -14,9 +15,8 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
 
-import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
-
 const $q = useQuasar();
+const router = useRouter();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
@@ -24,8 +24,6 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
 const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
-const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
-const requestId = ref<string>(""); //id รายการแก้ไข
 
 //Table
 const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
@@ -208,8 +206,7 @@ function updatePageSizePagination(newPagination: Pagination) {
  * @param id รายการคำร้อง
  */
 function onclickEdit(id: string) {
-  modalEdit.value = true;
-  requestId.value = id;
+  router.push(`/registry-officer/request-edit-page/${id}`);
 }
 
 /**
@@ -427,12 +424,6 @@ onMounted(() => {
       </d-table>
     </div>
   </q-card>
-
-  <DialogEditIDP
-    v-model:modal="modalEdit"
-    v-model:request-id="requestId"
-    :fetch-data-list="fetchData"
-  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue b/src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue
similarity index 53%
rename from src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
rename to src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue
index 81497849f..01582e86a 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
@@ -16,6 +17,8 @@ import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
 const store = useRequestEditStore();
 const {
   dialogConfirm,
@@ -26,14 +29,10 @@ const {
   date2Thai,
 } = useCounterMixin();
 
-const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
-const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
-const { fetchDataList } = defineProps({
-  fetchDataList: { type: Function, require: true },
-});
+const requestId = ref<string>(route.params.id as string);
 
 const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
-const isDone = ref<string>('')
+const isDone = ref<string>("");
 //ฟอร์มข้อมูลการพัฒนารายบุคคล
 const formData = reactive<FormDataIDP>({
   topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
@@ -162,7 +161,7 @@ function fetchDataByid(id: string) {
       formData.createdFullName = data.createdFullName;
       formData.createdAt = data.createdAt;
 
-      isDone.value = data.status
+      isDone.value = data.status;
     })
     .catch((err) => {
       messageError($q, err);
@@ -196,9 +195,8 @@ function onSubmit() {
         reason: formData.reason,
       })
       .then(async () => {
-        await fetchDataList?.();
+        router.push("/registry-officer/request-edit");
         success($q, "บันทึกข้อมูลสำเร็จ");
-        closeDialog();
       })
       .catch((err) => {
         messageError($q, err);
@@ -214,7 +212,6 @@ function onSubmit() {
  * และกำหนด formData เป็นค่า Defult
  */
 function closeDialog() {
-  modal.value = false;
   formData.topic = "";
   formData.developmentProjects = [];
   formData.reasonDevelopment70 = "";
@@ -244,251 +241,258 @@ function classInput(val: boolean) {
  * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
  * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
  */
-watch(modal, (val) => {
-  if (val) {
-    fetchDataByid(requestId.value);
-  }
+onMounted(() => {
+  fetchDataByid(requestId.value);
 });
 </script>
 
 <template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 65%">
-      <DialogHeader
-        :tittle="`${formData.createdFullName}
-        (ขอแก้ไขเมื่อ ${
-          formData.createdAt ? date2Thai(formData.createdAt, true, true) : ''
-        })`"
-        :close="closeDialog"
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
       />
-      <q-separator />
+      {{
+        `${formData.createdFullName}
+        (ขอแก้ไขเมื่อ ${
+          formData.createdAt ? date2Thai(formData.createdAt, true, true) : ""
+        })`
+      }}
+    </div>
+  </div>
 
-      <!-- สถานะคำร้อง -->
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-card-section v-if="isDone == 'PENDING'">
-          <q-card bordered class="col-12">
-            <div class="row q-pa-md q-col-gutter-sm">
-              <!-- สถานะ -->
-              <div class="col-4">
-                <q-select
-                  :class="classInput(isReadOnly)"
-                  v-model="formData.status"
-                  label="สถานะ"
-                  dense
-                  outlined
-                  emit-value
-                  map-options
-                  :options="statusOption"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                  use-input
-                  option-label="name"
-                  option-value="id"
-                  @filter="(inputValue:string,
+  <q-card flat>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section v-if="isDone == 'PENDING'">
+        <q-card bordered class="col-12">
+          <div class="row q-pa-md q-col-gutter-sm">
+            <!-- สถานะ -->
+            <div class="col-4">
+              <q-select
+                :class="classInput(isReadOnly)"
+                v-model="formData.status"
+                label="สถานะ"
+                dense
+                outlined
+                emit-value
+                map-options
+                :options="statusOption"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                lazy-rules
+                hide-bottom-space
+                use-input
+                option-label="name"
+                option-value="id"
+                @filter="(inputValue:string,
                         doneFn:Function) => filterOption(inputValue, doneFn
                         ) "
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-
-              <!-- หมายเหตุ -->
-              <div class="col-8">
-                <q-input
-                  :class="classInput(isReadOnly)"
-                  v-model="formData.reason"
-                  label="หมายเหตุ"
-                  dense
-                  outlined
-                  type="textarea"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-
-            <q-separator />
-
-            <q-card-actions align="right">
-              <q-btn label="บันทึก" color="secondary" type="submit"
-                ><q-tooltip>บันทึก</q-tooltip></q-btn
               >
-            </q-card-actions>
-          </q-card>
-        </q-card-section>
-      </q-form>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
 
-      <!-- รายละเอียด -->
-      <q-card-section class="q-pt-sm">
-        <q-card bordered class="col-12">
-          <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-            รายละเอียด
+            <!-- หมายเหตุ -->
+            <div class="col-8">
+              <q-input
+                :class="classInput(isReadOnly)"
+                v-model="formData.reason"
+                label="หมายเหตุ"
+                dense
+                outlined
+                type="textarea"
+                hide-bottom-space
+              />
+            </div>
           </div>
+
           <q-separator />
-          <div class="row q-col-gutter-sm q-pa-md">
-            <div class="col-12">
-              <q-input
-                readonly
-                outlined
-                v-model="formData.topic"
-                label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
-                dense
-              />
-            </div>
 
-            <div class="col-12">
-              <div class="q-mb-sm text-weight-medium text-body2">
-                วิธีการพัฒนา
-              </div>
-              <div class="row col-12 q-ml-md q-col-gutter-sm">
-                <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
-                <div class="col-4">
-                  <div class="q-mb-sm text-weight-medium text-body2">
-                    70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-                  </div>
-                  <q-option-group
-                    disable
-                    class="check_box q-mt-sm"
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="formData.developmentProjects"
-                    :options="itemsDevelopment70"
-                    type="checkbox"
-                  />
-
-                  <div
-                    class="row"
-                    v-if="formData.developmentProjects.includes('other1')"
-                  >
-                    <div class="col-8 q-mt-sm relative-position">
-                      <div class="other_custom_input">
-                        <q-input
-                          readonly
-                          v-model="formData.reasonDevelopment70"
-                          dense
-                          outlined
-                          label="กรุณาระบุ"
-                        ></q-input>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
-                <div class="col-4">
-                  <div class="q-mb-sm text-weight-medium text-body2">
-                    20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
-                  </div>
-                  <q-option-group
-                    disable
-                    class="check_box q-mt-sm"
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="formData.developmentProjects"
-                    :options="itemsDevelopment20"
-                    type="checkbox"
-                  />
-                  <div
-                    class="row"
-                    v-if="formData.developmentProjects.includes('other2')"
-                  >
-                    <div class="col-8 q-mt-sm relative-position">
-                      <div class="other_custom_input">
-                        <q-input
-                          readonly
-                          v-model="formData.reasonDevelopment20"
-                          dense
-                          outlined
-                          label="กรุณาระบุ"
-                        ></q-input>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 10 การฝึกอบรมอื่นๆ -->
-                <div class="col-4">
-                  <div class="q-mb-sm text-weight-medium text-body2">
-                    10 การฝึกอบรมอื่นๆ
-                  </div>
-                  <q-option-group
-                    disable
-                    class="check_box q-mt-sm"
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="formData.developmentProjects"
-                    :options="itemsDevelopment10"
-                    type="checkbox"
-                  />
-                  <div
-                    class="row"
-                    v-if="formData.developmentProjects.includes('other3')"
-                  >
-                    <div class="offset-4 col-8 q-mt-sm relative-position">
-                      <div class="other_custom_input">
-                        <q-input
-                          readonly
-                          v-model="formData.reasonDevelopment10"
-                          dense
-                          outlined
-                          label="กรุณาระบุ"
-                        ></q-input>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- เป้าหมายการนำไปพัฒนางาน -->
-            <div class="col-12">
-              <q-input
-                readonly
-                outlined
-                v-model="formData.developmentTarget"
-                label="เป้าหมายการนำไปพัฒนางาน"
-                dense
-                type="textarea"
-              />
-            </div>
-
-            <!-- วิธีการวัดผลการพัฒนา -->
-            <div class="col-12">
-              <q-input
-                readonly
-                outlined
-                v-model="formData.developmentResults"
-                label="วิธีการวัดผลการพัฒนา"
-                dense
-                type="textarea"
-              />
-            </div>
-
-            <!-- รายงานผลการพัฒนา -->
-            <div class="col-12">
-              <q-input
-                readonly
-                outlined
-                v-model="formData.developmentReport"
-                label="รายงานผลการพัฒนา"
-                dense
-                type="textarea"
-              />
-            </div>
-          </div>
+          <q-card-actions align="right">
+            <q-btn label="บันทึก" color="secondary" type="submit"
+              ><q-tooltip>บันทึก</q-tooltip></q-btn
+            >
+          </q-card-actions>
         </q-card>
       </q-card-section>
-    </q-card>
-  </q-dialog>
+    </q-form>
+
+    <!-- รายละเอียด -->
+    <q-card-section class="q-pt-sm">
+      <q-card bordered class="col-12">
+        <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+          รายละเอียด
+        </div>
+        <q-separator />
+        <div class="row q-col-gutter-sm q-pa-md">
+          <div class="col-12">
+            <q-input
+              readonly
+              outlined
+              v-model="formData.topic"
+              label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+              dense
+            />
+          </div>
+
+          <div class="col-12">
+            <div class="q-mb-sm text-weight-medium text-body2">
+              วิธีการพัฒนา
+            </div>
+            <div class="row col-12 q-ml-md q-col-gutter-sm">
+              <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
+              <div class="col-4">
+                <div class="q-mb-sm text-weight-medium text-body2">
+                  70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+                </div>
+                <q-option-group
+                  disable
+                  class="check_box q-mt-sm"
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="formData.developmentProjects"
+                  :options="itemsDevelopment70"
+                  type="checkbox"
+                />
+
+                <div
+                  class="row"
+                  v-if="formData.developmentProjects.includes('other1')"
+                >
+                  <div class="col-8 q-mt-sm relative-position">
+                    <div class="other_custom_input">
+                      <q-input
+                        readonly
+                        v-model="formData.reasonDevelopment70"
+                        dense
+                        outlined
+                        label="กรุณาระบุ"
+                      ></q-input>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
+              <div class="col-4">
+                <div class="q-mb-sm text-weight-medium text-body2">
+                  20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+                </div>
+                <q-option-group
+                  disable
+                  class="check_box q-mt-sm"
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="formData.developmentProjects"
+                  :options="itemsDevelopment20"
+                  type="checkbox"
+                />
+                <div
+                  class="row"
+                  v-if="formData.developmentProjects.includes('other2')"
+                >
+                  <div class="col-8 q-mt-sm relative-position">
+                    <div class="other_custom_input">
+                      <q-input
+                        readonly
+                        v-model="formData.reasonDevelopment20"
+                        dense
+                        outlined
+                        label="กรุณาระบุ"
+                      ></q-input>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 10 การฝึกอบรมอื่นๆ -->
+              <div class="col-4">
+                <div class="q-mb-sm text-weight-medium text-body2">
+                  10 การฝึกอบรมอื่นๆ
+                </div>
+                <q-option-group
+                  disable
+                  class="check_box q-mt-sm"
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="formData.developmentProjects"
+                  :options="itemsDevelopment10"
+                  type="checkbox"
+                />
+                <div
+                  class="row"
+                  v-if="formData.developmentProjects.includes('other3')"
+                >
+                  <div class="offset-4 col-8 q-mt-sm relative-position">
+                    <div class="other_custom_input">
+                      <q-input
+                        readonly
+                        v-model="formData.reasonDevelopment10"
+                        dense
+                        outlined
+                        label="กรุณาระบุ"
+                      ></q-input>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- เป้าหมายการนำไปพัฒนางาน -->
+          <div class="col-12">
+            <q-input
+              readonly
+              outlined
+              v-model="formData.developmentTarget"
+              label="เป้าหมายการนำไปพัฒนางาน"
+              dense
+              type="textarea"
+            />
+          </div>
+
+          <!-- วิธีการวัดผลการพัฒนา -->
+          <div class="col-12">
+            <q-input
+              readonly
+              outlined
+              v-model="formData.developmentResults"
+              label="วิธีการวัดผลการพัฒนา"
+              dense
+              type="textarea"
+            />
+          </div>
+
+          <!-- รายงานผลการพัฒนา -->
+          <div class="col-12">
+            <q-input
+              readonly
+              outlined
+              v-model="formData.developmentReport"
+              label="รายงานผลการพัฒนา"
+              dense
+              type="textarea"
+            />
+          </div>
+        </div>
+      </q-card>
+    </q-card-section>
+  </q-card>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/router.ts b/src/modules/04_registryPerson/router.ts
index 68da2a53a..d0a1e17ba 100644
--- a/src/modules/04_registryPerson/router.ts
+++ b/src/modules/04_registryPerson/router.ts
@@ -8,6 +8,8 @@ const detailPage = () =>
 // รายการคำร้องขอแก้ไขทะเบียนประวัติ
 const requestEdit = () =>
   import("@/modules/04_registryPerson/views/requestEditView.vue");
+const requestEditPage = () =>
+  import("@/modules/04_registryPerson/components/requestEdit/requestEditPage.vue");
 const Page01_Detail = () =>
   import(
     "@/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue"
@@ -64,6 +66,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/registry-officer/request-edit-page/:id",
+    name: "registryNewRequestEditPage",
+    component: requestEditPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_REGISTRY_OFFICER",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/registry-officer/request-edit/personal/:id",
     name: "registryNewRequestEdit/personal",
diff --git a/src/modules/04_registryPerson/store.ts b/src/modules/04_registryPerson/store.ts
index a8a8398ce..4483f3c4a 100644
--- a/src/modules/04_registryPerson/store.ts
+++ b/src/modules/04_registryPerson/store.ts
@@ -25,8 +25,12 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
   const posLevelOps = ref<DataOption[]>([]);
   const yearOps = ref<DataOption[]>([]);
   const mode = ref<string>("table");
-  const isLeave = ref<boolean>(false)
-
+  const isLeave = ref<boolean>(false);
+  const tabs = ref<string>("Main");
+  const tabsManu = ref<DataOption[]>([
+    { name: "ข้อมูลส่วนตัว", id: "Main" },
+    { name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
+  ]);
   function fetchType(data: DataType[]) {
     posTypeMain.value = data;
     const list: DataOption[] = data.map((e: DataType) => ({
@@ -88,6 +92,8 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     mode,
     formFilter,
     labelOption,
-    isLeave
+    isLeave,
+    tabs,
+    tabsManu,
   };
 });
diff --git a/src/modules/04_registryPerson/views/requestEditView.vue b/src/modules/04_registryPerson/views/requestEditView.vue
index 6166c5de2..59e17d30c 100644
--- a/src/modules/04_registryPerson/views/requestEditView.vue
+++ b/src/modules/04_registryPerson/views/requestEditView.vue
@@ -3,18 +3,13 @@ import { ref } from "vue";
 
 import { useRouter } from "vue-router";
 
-import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
 import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";
 
 const router = useRouter();
-
-const tabs = ref<string>("Main");
-const tabsManu = ref<DataOption[]>([
-  { name: "ข้อมูลส่วนตัว", id: "Main" },
-  { name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
-]);
+const store = useRegistryNewDataStore();
 </script>
 
 <template>
@@ -38,14 +33,14 @@ const tabsManu = ref<DataOption[]>([
     <q-card-section style="padding: 0px">
       <q-separator />
       <q-tabs
-        v-model="tabs"
+        v-model="store.tabs"
         inline-label
         align="left"
         indicator-color="primary"
         active-color="primary bg-teal-1"
       >
         <q-tab
-          v-for="(tab, index) in tabsManu"
+          v-for="(tab, index) in store.tabsManu"
           :key="index"
           :name="tab.id"
           :label="tab.name"
@@ -53,7 +48,7 @@ const tabsManu = ref<DataOption[]>([
       </q-tabs>
       <q-separator />
 
-      <q-tab-panels v-model="tabs" animated>
+      <q-tab-panels v-model="store.tabs" animated>
         <q-tab-panel style="padding: 0px" name="Main">
           <TabInformation />
         </q-tab-panel>