แก้ popup เป็น page

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;
+  router.push(`/registry-officer/request-edit-page/${id}`);
-  requestId.value = 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>

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 = ref<string>(route.params.id as string);
-const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
-const { fetchDataList } = defineProps({
-  fetchDataList: { type: Function, require: true },
-});
 
 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,26 +241,34 @@ function classInput(val: boolean) {
  * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
  * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
  */
-watch(modal, (val) => {
+onMounted(() => {
-  if (val) {
   fetchDataByid(requestId.value);
-  }
 });
 </script>
 
 <template>
-  <q-dialog v-model="modal" persistent>
+  <div class="row items-center">
-    <q-card style="min-width: 65%">
+    <div class="toptitle text-dark row items-center q-py-xs">
-      <DialogHeader
+      <q-btn
-        :tittle="`${formData.createdFullName}
+        icon="mdi-arrow-left"
-        (ขอแก้ไขเมื่อ ${
+        unelevated
-          formData.createdAt ? date2Thai(formData.createdAt, true, true) : ''
+        round
-        })`"
+        dense
-        :close="closeDialog"
+        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-card flat>
     <q-form greedy @submit.prevent @validation-success="onSubmit">
       <q-card-section v-if="isDone == 'PENDING'">
         <q-card bordered class="col-12">
@@ -488,7 +493,6 @@ watch(modal, (val) => {
       </q-card>
     </q-card-section>
   </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>

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",

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,
   };
 });

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 store = useRegistryNewDataStore();
-const tabs = ref<string>("Main");
-const tabsManu = ref<DataOption[]>([
-  { name: "ข้อมูลส่วนตัว", id: "Main" },
-  { name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
-]);
 </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>