From c86a0938ad2b360432d4925bd31ca6cdcf790a8c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 29 Oct 2024 12:16:48 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5=E0=B9=80=E0=B8=95=E0=B8=AD=E0=B8=A3=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=89=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainProbation.vue    | 60 +++++++++++++------
 .../components/1_Complaint/MainPage.vue       |  1 +
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 45638a2ee..b0861850f 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -34,14 +34,17 @@ const paging = ref<boolean>(true);
 const filterRef2 = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging2 = ref<boolean>(true);
+const fillterStatus = ref<any>([]);
 const fillter = ref<any>("");
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const rows = ref<FormMainProbation[]>([]);
 const rows2 = ref<FormMainProbation2[]>([]);
+const dataUpdate = ref<FormMainProbation[]>([]);
 const Opfillter = ref<OpfillterTypeSt[]>([]);
 const Opfillter2 = ref<OpfillterTypeSt[]>([]);
 const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
+const formMain = reactive({ keyword: "", pageSize: 10, page: 1 });
 const maxPage = ref<number>(1);
 
 const modalAdd = ref<boolean>(false);
@@ -237,22 +240,22 @@ const columns2 = ref<QTableProps["columns"]>([
 
 /** get ข้อมูล */
 async function getpersonalList() {
-  rows.value = [];
   showLoader();
   await http
     .get(
       config.API.probationPersonalList() +
         `?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}`
     )
-    .then((res) => {
-      rows.value = res.data.data.data;
+    .then(async (res) => {
+      const data = await res.data.data.data;
+      const resTotal = await res.data.data.total;
+      rows.value = data;
+      fillterStatus.value = data;
+      dataUpdate.value = rows.value;
       Opfillter.value = storeFn.optionStatusProbation;
       Opfillter2.value = storeFn.optionStatusProbation;
-
-      totalList.value = Math.ceil(
-        res.data.data.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.data.total;
+      totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
+      total.value = resTotal;
       hideLoader();
     })
     .catch((e) => {
@@ -288,6 +291,15 @@ function updatePagination(newPagination: any) {
   formProbation.pageSize = newPagination.rowsPerPage;
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePaginationMain(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
 async function filterKeyword2Fn(page: number) {
   page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
 }
@@ -366,6 +378,7 @@ async function clickClose() {
 function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
+  getSearchMain()
 }
 
 /** reset ฟิลเตอร์ ใน dialog */
@@ -374,6 +387,11 @@ function resetFilter2() {
   filterRef2.value.focus();
 }
 
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
 function paginationLabel2(start: string, end: string, total: string) {
   if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -441,14 +459,19 @@ function closeAdd() {
   topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
 }
 
-function getSearch() {
-  pagination.value.page = 1;
-  getpersonalList();
+function getSearchMain(){
+  pagination.value.page = 1
+  getpersonalList()
 }
+
+watch([() => formProbation.page, () => formProbation.pageSize], () => {
+  onclickAddProbation();
+});
+
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    getSearch();
+  async () => {
+    getSearchMain()
   }
 );
 
@@ -478,7 +501,7 @@ onMounted(async () => {
             :borderless="false"
             :outlined="true"
             :hide-dropdown-icon="false"
-            @update:model-value="getpersonalList()"
+            @update:model-value="getSearchMain()"
             @filter="filterFn"
             use-input
             behavior="menu"
@@ -530,7 +553,7 @@ onMounted(async () => {
           outlined
           debounce="300"
           placeholder="ค้นหา"
-          @keydown.enter.prevent="getSearch"
+          @keydown.enter.prevent="getSearchMain()"
         >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
@@ -563,14 +586,15 @@ onMounted(async () => {
         <d-table
           :columns="columns"
           :rows="rows"
+          row-key="personal_id"
           flat
           bordered
+          :paging="true"
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-          :rows-per-page-options="[1, 25, 50, 100]"
-          @update:pagination="updatePagination"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @update:pagination="updatePaginationMain"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index ba40b5e61..d0d591645 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -74,6 +74,7 @@ function redirectToPageadd() {
 /** ล้างค่าใน input */
 function resetFilter() {
   filterKeyword.value = "";
+  page.value = 1
   if (filterRef.value) {
     filterRef.value.focus();
     getList();

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 2/3] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20popup=20?=
 =?UTF-8?q?=E0=B9=80=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>

From 6dd5ed62dfae41477a608aca223953636c755501 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 29 Oct 2024 14:51:20 +0700
Subject: [PATCH 3/3] fixing code assign

---
 src/modules/13_salary/views/04_salaryLists.vue         | 2 +-
 src/modules/13_salary/views/05_salaryListsEmployee.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/13_salary/views/04_salaryLists.vue b/src/modules/13_salary/views/04_salaryLists.vue
index f7ad08113..a7d39c714 100644
--- a/src/modules/13_salary/views/04_salaryLists.vue
+++ b/src/modules/13_salary/views/04_salaryLists.vue
@@ -365,7 +365,7 @@ function filterSelector(val: string, update: Function, refData: string) {
 
 async function fetchCheckisOfficer() {
   http
-    .get(config.API.workflowKeycloakSystem(`SALARY_OFFICER`))
+    .get(config.API.workflowKeycloakSystem(`SYS_SALARY_OFFICER`))
     .then((res) => {
       const data = res.data.result;
       isOfficer.value = data.isOfficer;
diff --git a/src/modules/13_salary/views/05_salaryListsEmployee.vue b/src/modules/13_salary/views/05_salaryListsEmployee.vue
index 8ca8c19c3..f18d03b44 100644
--- a/src/modules/13_salary/views/05_salaryListsEmployee.vue
+++ b/src/modules/13_salary/views/05_salaryListsEmployee.vue
@@ -363,7 +363,7 @@ function filterSelector(val: string, update: Function, refData: string) {
 
 async function fetchCheckisOfficer() {
   http
-    .get(config.API.workflowKeycloakSystem(`SALARY_EMP`))
+    .get(config.API.workflowKeycloakSystem(`SYS_WAGE`))
     .then((res) => {
       const data = res.data.result;
       isOfficer.value = data.isOfficer;