From 9db326570458b68ca1aa991b714dd3aaef822b64 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 27 Jul 2023 17:45:14 +0700
Subject: [PATCH 01/16] no message

---
 .../components/probation/FormAssign.vue       | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 6e899e2af..f1a0062d8 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -96,7 +96,7 @@
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          dateExam != null ? date2Thai(dateExam) : null
+                          date_start != null ? date2Thai(date_start) : null
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
@@ -129,7 +129,7 @@
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          dateExam2 != null ? date2Thai(dateExam2) : null
+                          date_finish != null ? date2Thai(date_finish) : null
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -1253,8 +1253,7 @@ const val1 = ref([
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, notifyError } = mixin;
-const dateExam = ref<Date | null>(null);
-const dateExam2 = ref<Date | null>(null);
+
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 
@@ -1263,8 +1262,8 @@ const personal_id = ref<string>();
 const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
-const date_start = ref<Date>();
-const date_finish = ref<Date>();
+const date_start = ref<Date | null>(null);
+const date_finish = ref<Date | null>(null);
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
@@ -1275,13 +1274,13 @@ const createdAt = ref<Date>();
 const updatedAt = ref<Date>();
 
 const clearDateExam = () => {
-  dateExam.value = null;
+  date_start.value = null;
 };
 const clearDateExam2 = () => {
-  dateExam2.value = null;
+  date_finish.value = null;
 };
 const isDatePicker2Readonly = computed(() => {
-  return dateExam.value === null;
+  return date_start.value === null;
 });
 const routeName = router.currentRoute.value.name;
 const name = ref<string>("");
@@ -1303,7 +1302,7 @@ const monthOp = [{ value: "6", label: "6 เดือน" }];
 const activityCount = ref<number>(2);
 const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
-
+  const activityDataArray = ref<any[]>([]);
 const addActivity = () => {
   activityCount.value++;
 };
@@ -1331,6 +1330,7 @@ const addKnowledge = () => {
     knowledgeCount.value++;
   }
 };
+
 const knowledgeArray = computed(() => {
   return Array(knowledgeCount.value).fill("");
 });
@@ -1551,7 +1551,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      // showLoader();
 
       // แสดงข้อมูลใน Console
 
@@ -1576,6 +1575,16 @@ const saveData = async () => {
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
+    // ลองดูlog
+      activityDataArray.value = activity_desc.value.map((activity, index) => ({
+        id: index + 1,
+        activity_desc: activity,
+        goal_desc: goal_desc.value[index],
+      }));
+      // showLoader();
+      console.log("activity_desc:", activity_desc.value);
+  console.log("goal_desc:", goal_desc.value);
+  console.log(activityDataArray.value);
       // Validation ไม่ผ่าน
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
@@ -1600,7 +1609,7 @@ const OPmain = [""];
 const group = ref<string>("");
 const group2 = ref<string>("");
 const group3 = ref<string>("");
-const OPgroup = [""];
+const OPgroup = ["test"];
 
 const Other = ref<string>("");
 

From b6bde021689e9cda44d005c9cd230eba4666c695 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 28 Jul 2023 09:09:47 +0700
Subject: [PATCH 02/16] no message

---
 .../components/probation/FormAssign.vue         | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index f1a0062d8..3146c96b2 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -71,7 +71,6 @@
                     v-model="monthSelect"
                     :label="`ระยะเวลากี่เดือน`"
                   />
-                  <div v-if="monthSelect !== null">{{ monthSelect }} เดือน</div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
@@ -1539,6 +1538,21 @@ interface CheckboxItem {
 // const caregiverRef2 = ref()
 
 // const workInfopRef = ref()
+const putData = () =>{
+  const data = {
+    fullname:fullname.value,
+    position:position.value,
+    monthSelect:monthSelect.value,
+    date_start:date_start.value,
+    date_finish:date_finish.value,
+    caretaker1:caretaker1.value,
+    caretaker2:caretaker2.value,
+    activity_desc:activity_desc.value,
+    goal_desc:goal_desc.value,
+    knowledge:knowledge.value,
+  }
+  console.log("test",data)
+}
 
 const saveData = async () => {
   // myForm.value.resetValidation();
@@ -1575,6 +1589,7 @@ const saveData = async () => {
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
+      putData()
     // ลองดูlog
       activityDataArray.value = activity_desc.value.map((activity, index) => ({
         id: index + 1,

From eb5f4d35f647db1958a97aa4dc179fbcaaed3517 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 09:42:50 +0700
Subject: [PATCH 03/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20router=20?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B9=84=E0=B8=9B=E0=B8=94=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=87=E0=B8=97=E0=B8=B5=E0=B9=88=20registry=20=E0=B8=81?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_registryEmployee/views/Main.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index edd6bba6f..7f1bba964 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1354,8 +1354,8 @@ const clickAdd = () => {
 };
 
 // ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (profileId?: string) => {
-  router.push(`/registryEmployee/edit/${profileId}`);
+const redirectToPage = (id?: string) => {
+  router.push(`/registry/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);

From 286236dc6c674b7dd7f862663f01388c5a6cfe39 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 10:08:17 +0700
Subject: [PATCH 04/16] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   | 560 +++++++-----------
 .../probation/FormEvaluation/Header.vue       |   8 +-
 .../FormEvaluation/Template2Format2.vue       |   4 +-
 .../probation/FormEvaluation/Template3.vue    |  14 +-
 4 files changed, 238 insertions(+), 348 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 15c6ee09e..6be0a8872 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -1,348 +1,248 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-import { useQuasar } from "quasar";
-import { useProbationDataStore } from "@/modules/05_placement/store";
+import { ref } from "vue";
+import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const Part2 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
-    )
-);
-const Part3 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
-    )
-);
-const Footer = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
-    )
-);
-
 const $q = useQuasar();
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-
+const myForm = ref<QForm>();
+const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
+const { date2Thai, notifyError } = mixin;
+const develop = ref<number>();
+const result = ref<number>();
+
+// part new
+const date_start = ref<Date>(new Date("10-10-2023"));
+const date_finish = ref<Date>();
+const reson = ref<string>("");
+
+const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
+const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+
+const director_id = ref<any>(null);
+const director_dated = ref<any>();
+const director_id2 = ref<any>(null);
+const director_dated2 = ref<any>();
+const director_id3 = ref<any>(null);
+const director_dated3 = ref<any>();
+const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+const savaForm = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      $q.dialog({
+        title: "ยืนยันการบันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          color: "negative",
+        },
+        persistent: true,
+      })
+        .onOk(async () => {
+          postData();
+
+        })
+        .onCancel(() => { })
+        .onDismiss(() => { });
+    }
+  });
+
+};
+
+const postData = async () => {
+  const data = await {
+    date_start: date_start.value,
+    date_finish: date_finish.value,
+    director_id: director_id.value,
+    director_dated: director_dated.value,
+    director_id2: director_id2.value,
+    director_dated2: director_dated2.value,
+    director_id3: director_id3.value,
+    director_dated3: director_dated3.value,
+  }
+
+  console.log("postData===>", data)
+};
 </script>
 
 <template>
-  <div class="row col-12 q-gutter-lg no-margin">
+  <div class="row col-12 q-mr-md">
+    <q-form ref="myForm">
 
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-        ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      <div class="row col-12">
+        <div class="col-12 row q-col-gutter-md">
+          <div class="col-xs-12 col-sm-6">
+            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
+              :enableTimePicker="false" week-start="0">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
+                  " :label="`${'ระหว่างวันที่'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
+  ]">
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
+              :enableTimePicker="false" week-start="0">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
+                  " :label="`${'ถึงวันที่'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
+  ]">
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
       </div>
-      <div class="col-12 text-top0 row items-center">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
-        ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-        ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+
+      <div class="col-12 row q-mt-xs">
+        <div class="col-xs-12 col-sm-6">
+          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+        </div>
       </div>
-      <div class="col-12 q-pt-md">
+      <div class="col-12 row q-mt-lg">
+        <div class="col-xs-12 col-sm-6">
+          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
+            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+
+        </div>
+      </div>
+
+      <div class="col-12 row q-mt-lg">
+        <div class="col-12">
+          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
+            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+        </div>
+      </div>
+
+      <div class="col-12 q-mt-lg">
         <q-separator size="3px" color="grey-2" />
       </div>
-    </div>
 
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      <div class="row col-12 q-gutter-lg q-mt-sm">
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            ประธานคณะกรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
+              label="เลือกประธานคณะกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="col-12 row no-margin">
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.1. ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.3. สมมรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section class="q-ml-md">
-              <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]" />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-    </div>
-
-    <!-- Part 2 -->
-    <Part2 />
-
-    <!-- Part 3 -->
-    <Part3 />
-
-    <!-- Footer -->
-    <Footer />
+      <q-toolbar class="text-primary">
+        <q-space />
+        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      </q-toolbar>
+    </q-form>
   </div>
 </template>
 
@@ -366,4 +266,4 @@ const period = ref<number>(1);
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 579b4e5c6..5e87f4d44 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -27,7 +27,7 @@ watch(tabHead, () => {
           indicator-color="grey-1"
           class="text-grey-7"
         >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-tab name="save1" label="ครั้งที่ 1" />
           <q-btn
             size="12px"
             flat
@@ -55,7 +55,7 @@ watch(tabHead, () => {
             </q-menu>
           </q-btn>
 
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-tab name="save2" label="ครั้งที่ 2" />
           <q-btn
             size="12px"
             flat
@@ -82,7 +82,7 @@ watch(tabHead, () => {
               </q-list>
             </q-menu>
           </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+          <!-- <q-tab name="save3" label="ครั้งที่ 3" />
             <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                 :color="tab !== 'save3' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
@@ -104,7 +104,7 @@ watch(tabHead, () => {
         </q-tabs>
         <div>
           <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+            <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 228f8de5a..3e5e91bdf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -21,9 +21,9 @@ const FormEvaluateScore = defineAsyncComponent(
         <FormEvaluateScore />
       </q-tab-panel>
 
-      <q-tab-panel name="save2">
+      <!-- <q-tab-panel name="save2">
         <FormEvaluateScore />
-      </q-tab-panel>
+      </q-tab-panel> -->
     </q-tab-panels>
   </q-page-container>
 </template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
index e0adc68a6..fb54fdd4d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
@@ -14,17 +14,7 @@ const FormReport = defineAsyncComponent(
 </script>
 
 <template>
-  <Header :change-tab="changeTab" />
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
+  <div class="col-12 q-ma-lg">
         <FormReport />
-      </q-tab-panel>
-
-      <q-tab-panel name="save2">
-        <FormReport />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
+  </div>
 </template>
\ No newline at end of file

From 05982c4346a350c3cf3a52c73648a43814a0b2df Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:22:26 +0700
Subject: [PATCH 05/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20Api=20delete=20//=20=E0=B9=80=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=20path=20=E0=B9=83=E0=B8=99=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=B9=E0=B8=A5=20=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A7=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.profile.ts                | 1 +
 src/modules/08_registryEmployee/views/Main.vue | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index 0e30e10d6..d3333d893 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -156,6 +156,7 @@ export default {
     `${profile}address/history/${profileId}`,
   searchProfileByOcId: (OcId: string, type: string) =>
     `${profile}search/new/oc/${OcId}/${type}`,
+  searchProfileTemp: (type: string) => `${profile}search/new/oc/${type}`,
 
   profileAvatarId: (profileId: string) => `${profile}avatar/${profileId}`,
   profileAvatarHistoryId: (profileId: string) =>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 7f1bba964..e343d616c 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -231,7 +231,7 @@
                     <q-item
                       clickable
                       v-close-popup
-                      @click="clickDelete('test')"
+                      @click="clickDelete(props.row.id)"
                     >
                       <q-item-section
                         style="min-width: 0px"
@@ -1429,7 +1429,7 @@ const showEmployeeTemp = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+    .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
     })
     .then((res) => {
@@ -1489,7 +1489,7 @@ const showEmployeeTempOrder = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+    .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
     })
     .then((res) => {

From c8eb67ee2cebba453eddec839e8c2dea355954e7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 14:42:43 +0700
Subject: [PATCH 06/16] FormEvaluateScore

---
 .../probation/FormEvaluation/FormEvaluate.vue |  15 +-
 .../FormEvaluation/FormEvaluateScore.vue      | 494 ++++++++++++++++--
 .../FormEvaluation/FormSaveResult.vue         |  15 +-
 3 files changed, 483 insertions(+), 41 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index b78d8d0bf..54a5edc4c 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -448,7 +448,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -658,7 +664,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 43a2e4262..1d30b7941 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -60,9 +60,6 @@ const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
 // part 1
-const knowledge_level = ref<number>(0);
-const skill_level = ref<number>(0);
-const competency_level = ref<number>(0);
 const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
@@ -74,39 +71,94 @@ const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>([{ text: "", level: 0 }]);
-const behavio_strength_desc = ref<string>("");
-const behavio_inprove_desc = ref<string>("");
+
 // part 3
-const orientation = ref<num>(null);
-const self_learning = ref<any>(null);
-const training_seminar = ref<any>(null);
-const other_training = ref<any>(null);
-//rules
-const behavio_strengthRef = ref<any>(null);
-const behavio_strengthRules = [
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
-];
-const behavio_inproveRef = ref<any>(null);
-const behavio_inproveRules = [
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
-];
+const orientation = ref<number>(null);
+const self_learning = ref<number>(null);
+const training_seminar = ref<number>(null);
+const other_training = ref<number>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+// score
+const score1 = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return (
+      learn_level.value +
+      apply_level.value +
+      success_level.value +
+      achievement_other.value.level
+    );
+  }
+  return learn_level.value + apply_level.value + success_level.value;
+});
+const score2 = computed(() => {
+  let sum_conduct = conduct_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_moral = moral_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_discipline = discipline_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return (
+      sum_conduct + sum_moral + sum_discipline + behavio_orther.value.level
+    );
+  } else return sum_conduct + sum_moral + sum_discipline;
+});
+const percent_score1: number = computed(() => {
+  let num = 0;
+  if (etc.value === true) {
+    num = 20;
+  } else num = 15;
+  let percent1 = (score1.value / num) * 100;
+  return percent1.toFixed(2);
+});
+const percent_score2: number = computed(() => {
+  let num = 0;
+  if (etc2.value === true) {
+    num = 65;
+  } else num = 60;
+  let percent2 = (score2.value / num) * 100;
+  return percent2.toFixed(2);
+});
+const percent_sum: any = computed(() => {
+  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
+  return sum.toFixed(2);
+});
+const score4 = computed(() => {
+  return (
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    Number(other_training.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
-  behavio_strengthRef.value.validate();
-  behavio_inproveRef.value.validate();
   if (
-    knowledge_level.value === 0 ||
-    skill_level.value === 0 ||
-    competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
     success_level.value === 0 ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
-    behavio_inprove_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -133,9 +185,6 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    knowledge_level: knowledge_level.value,
-    skill_level: skill_level.value,
-    competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
@@ -153,12 +202,12 @@ const putformData = () => {
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
-    behavio_inprove_desc: behavio_inprove_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    total_experiment: Number(score1.value),
+    total_behavior: Number(score2.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -331,7 +380,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.4 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -387,6 +442,24 @@ const putformData = () => {
           </q-item>
         </q-list>
       </q-card>
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> คะแนนรวมผลสัมฤทธิ์ของการทดลองฯ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-field dense>
+                <template v-slot:control>
+                  <div class="self-center full-width no-outline">
+                    {{ score1 }}
+                  </div>
+                </template>
+              </q-field>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
     </div>
 
     <!-- Part 2 -->
@@ -541,7 +614,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"
@@ -598,22 +676,195 @@ const putformData = () => {
           </q-list>
         </q-card>
       </div>
+      <div class="col-12 row">
+        <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label> คะแนนรวมพฤติกรรมการปฎิบัติราชการ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-field dense>
+                  <template v-slot:control>
+                    <div class="self-center full-width no-outline">
+                      {{ score2 }}
+                    </div>
+                  </template>
+                </q-field>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
     </div>
 
-    <!-- Part 3 -->
-    <!-- <Part3 /> -->
+    <!-- ผลการประเมิน -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row justify-center">
         <div class="col-12 text-top0 items-center">
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.1. ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 }}</div>
+                  <div class="col">{{ percent_score1 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score1 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.2. พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score2 }}</div>
+                  <div class="col">{{ percent_score2 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score2 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> ผลคะแนนรวม</q-item-label>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 + score2 }}</div>
+                  <div class="col">{{ percent_sum }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_sum > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <!-- Part 4 -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
           การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
         </div>
+        <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+          <div class="row q-gutter-md">
+            <div class="col-8"></div>
+            <div class="col">คะแนน</div>
+            <div class="col">ร้อยละ</div>
+          </div>
+        </div>
         <q-card
           flat
           bordered
           class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
         >
-          <q-list dense>
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input dense type="number" v-model="orientation" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input dense type="number" v-model="self_learning" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input dense type="number" v-model="training_seminar" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">
+              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="other_training" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <!-- <q-list dense>
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label>1. การปฐมนิเทศ</q-item-label>
@@ -711,13 +962,177 @@ const putformData = () => {
                 </div>
               </q-item-section>
             </q-item>
-          </q-list>
+          </q-list> -->
+        </q-card>
+        <q-card class="text-top0 col-12">
+          <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+            <div class="row q-gutter-md">
+              <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
+              <div class="col">{{ score4 }}</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </div>
 
     <!-- Footer -->
     <!-- <Footer /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          ผู้บังคับบัญชาผู้มอบหมายงาน
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <q-toolbar class="text-primary">
       <q-space />
       <q-btn label="บันทึก" color="secondary" @click="savaForm" />
@@ -726,6 +1141,11 @@ const putformData = () => {
 </template>
 
 <style lang="scss" scoped>
+.align-center {
+  display: flex;
+
+  align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
+}
 .text-top2 {
   font-weight: 500;
   padding-bottom: 8px;
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 767b28d88..fd763594d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -636,7 +636,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.8 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -887,7 +893,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"

From 3dd5e535975b82b4c1f5352b9d05184d706f7808 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 16:54:08 +0700
Subject: [PATCH 07/16] =?UTF-8?q?update=20type=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=81=E0=B8=B2=E0=B8=A8=E0=B9=80=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_retirement/views/Main.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 3fc975d5f..335f4f591 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -369,9 +369,9 @@ const clickAdd = () => {
       model: 'opt1',
       // inline: true
       items: [
-        { label: 'ประกาศแก้ไข (เพิ่มคนเกษียณ)', value: 'opt1'},
-        { label: 'ประกาศแก้ไข (เฉพาะราย)', value: 'opt2' },
-        { label: 'ประกาศยกเลิก', value: 'opt3' }
+        { label: 'ประกาศเพิ่มผู้เกษียณ', value: 'ADD'},
+        { label: 'ประกาศแก้ไขข้อมูลผู้เกษียน', value: 'EDIT' },
+        { label: 'ประกาศยกเลิกผู้เกษียณ', value: 'REMOVE' }
       ]
     },
     cancel: {
@@ -380,6 +380,7 @@ const clickAdd = () => {
     },
     persistent: true,
     }).onOk(data => {
+      console.log("option===>", data)
       router.push(`/retirement/list/${type.value}/${currentYear}`);
     }).onCancel(() => {
     }).onDismiss(() => {

From bc9a5fc6ef354dd4b898c172b314d0c618ab6573 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 16:55:51 +0700
Subject: [PATCH 08/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=20pop=20up=20=E0=B8=96=E0=B8=B6=E0=B8=87?=
 =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=88=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/Profile.vue        | 238 +++++++++++++++---
 1 file changed, 199 insertions(+), 39 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index c56a812f0..5a58aaa59 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -387,38 +387,100 @@
   </q-dialog>
   <!-- Dialog แนบใบมรณบัตร -->
   <q-dialog v-model="dialogPassaway" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
-      <q-card-section class="q-py-sm row">
-        <div class="text-h6">แนบใบมรณบัตร</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closePassaway"
-          style="color: #ff8080; background-color: #ffdede"
-        >
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
-        </q-btn>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-file
-          class="col-xs-12 col-sm-12"
-          outlined
-          dense
-          v-model="filePassaway"
-          label="แนบใบมรณบัตร"
-          hide-bottom-space
-          lazy-rules
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" />
-          </template>
-        </q-file>
-      </q-card-actions>
-    </q-card>
+    <div class="col-12">
+      <q-card style="width: 100vw; max-width: 60vw">
+        <q-form ref="myForm">
+          <q-card-section class="q-py-sm row">
+            <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
+            <q-file
+              class="col-5"
+              outlined
+              dense
+              v-model="filePassaway"
+              label="แนบใบมรณบัตร"
+              hide-bottom-space
+              lazy-rules
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+            </q-file>
+            <q-separator />
+            <q-input
+              class="col-7"
+              dense
+              outlined
+              v-model="deathCertificateNo"
+              label="เลขที่ใบมรณบัตร"
+            />
+            <q-separator />
+            <datepicker
+              class="col-5"
+              menu-class-name="modalfix"
+              v-model="dateDeath"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="dateDeath != null ? date2Thai(dateDeath) : null"
+                  :label="`${'วันที่เสียชีวิต'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              class="col-7"
+              dense
+              outlined
+              v-model="placeDeathCertificate"
+              label="สถานที่ออกใบมรณบัตร"
+            />
+            <q-separator />
+            <q-input
+              class="col-12"
+              dense
+              outlined
+              v-model="reasonDeath"
+              label="เหตุผลการเสีบชีวิต"
+              type="textarea"
+            />
+            <q-space />
+
+            <q-space />
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            :save="clickSave"
+            :validate="validateData"
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+          />
+        </q-form>
+      </q-card>
+    </div>
   </q-dialog>
   <!-- Dialog เลือก เกษียณ -->
   <q-dialog v-model="dialogLeave" persistent>
@@ -583,8 +645,10 @@ import { ref, onMounted } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import EducationVue from "@/modules/04_registry/components/Education.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
 import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
@@ -612,6 +676,9 @@ import config from "@/app.config";
 const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
+const reasonDeath = ref("");
+const deathCertificateNo = ref("");
+const placeDeathCertificate = ref("");
 const mixin = useCounterMixin();
 const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
 const route = useRoute();
@@ -620,12 +687,7 @@ const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
 const fullname = ref<string>("");
 const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
+const dateDeath = ref<Date>(new Date());
 const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
@@ -636,6 +698,11 @@ const statusEdit = ref<boolean>(false);
 const activeImage = ref<any | null>(null);
 const filePassaway = ref(null);
 const images = ref<any>([]);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const profileId = ref<string>(route.params.id.toString());
 const profileType = ref<string>("");
 const employeeClass = ref<string>("temp");
@@ -922,6 +989,99 @@ const clickKp7 = async () => {
   //     });
 };
 
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .put(config.API.getPositionMasterId(positionMasterId.value), {
+  //       positionMasterId: positionMasterId.value,
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .post(config.API.getPositionMaster, {
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       modal.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
 const downloadFilePDF = async (res: string, fileName: string) => {
   const link = document.createElement("a");
   //   link.href = window.URL.createObjectURL(new Blob([res]));

From 51c4c777e54ed39d7fcd515e94af027d82ddf730 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 16:57:00 +0700
Subject: [PATCH 09/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20path=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20=E0=B8=97=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_registryEmployee/router.ts     |    2 +-
 .../08_registryEmployee/views/EditDetail.vue  |    6 +-
 .../views/Information/Information.vue         | 1132 -----------------
 .../08_registryEmployee/views/Main.vue        |    2 +-
 4 files changed, 4 insertions(+), 1138 deletions(-)
 delete mode 100644 src/modules/08_registryEmployee/views/Information/Information.vue

diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index 67a4cc826..130b90438 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -47,7 +47,7 @@ export default [
     },
   },
   {
-    path: "/registryEmployee/edit/:Id",
+    path: "/registryEmployee/edit/:id",
     name: "registryEmployeeEdit",
     component: EditDetail,
     meta: {
diff --git a/src/modules/08_registryEmployee/views/EditDetail.vue b/src/modules/08_registryEmployee/views/EditDetail.vue
index 401ae0b9f..0a123b88d 100644
--- a/src/modules/08_registryEmployee/views/EditDetail.vue
+++ b/src/modules/08_registryEmployee/views/EditDetail.vue
@@ -137,11 +137,9 @@
         <div class="row items-center text-dark q-ml-md">
           <div class="column">
             <div class="text-bold q-pb-xs text-name">
-              {{ "แก้ไข้ข้อมูลทะเบียนประวัติลูกจ้างชั่วคราว" }}
-            </div>
-            <div class="text-bold q-pb-xs text-sub">
-              {{ "ลูกจ้างชั่วคราว" }}
+              {{ fullname }}{{ leaveReason }}
             </div>
+            <div>{{ position }}</div>
           </div>
         </div>
         <q-space />
diff --git a/src/modules/08_registryEmployee/views/Information/Information.vue b/src/modules/08_registryEmployee/views/Information/Information.vue
deleted file mode 100644
index ec7a1440b..000000000
--- a/src/modules/08_registryEmployee/views/Information/Information.vue
+++ /dev/null
@@ -1,1132 +0,0 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.cardid"
-            @update:model-value="changeCardID"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
-              (val:string) =>
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
-            ]"
-            label="เลขบัตรประจำตัวประชาชน"
-            maxlength="13"
-            mask="#############"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้าชื่อ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :model-value="informaData.age"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.genderId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.genderOps"
-            option-value="id"
-            :label="`${'เพศ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.statusId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.statusOps"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.ethnicity"
-            :label="`${'เชื้อชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.religionId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.religionOps"
-            option-value="id"
-            :label="`${'ศาสนา'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                      ) "
-            clearable
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            mask="##########"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                      ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            color="grey-9"
-            dense
-            :disable="!edit"
-          />
-        </div>
-        <div class="row col-12">
-          <OldName
-            v-if="same == '1'"
-            v-model:statusEdit="edit"
-            :fetchDataInformation="fetchDataComponent"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
-            :firstname="
-              informaData.firstname == null ? '' : informaData.firstname
-            "
-            :lastname="informaData.lastname == null ? '' : informaData.lastname"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar } from "quasar";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-import type {
-  RequestItemsHistoryObject,
-  Columns,
-} from "@/modules/04_registry/interface/request/Information";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import OldName from "@/modules/04_registry/components/Information/OldName.vue";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import HistoryTable from "@/components/TableHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
-import type { QTableColumn, QForm } from "quasar";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  fetchDataProfile: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
-const profileStore = useProfileDataStore();
-const { changeRetireText, changeBirth } = profileStore;
-const edit = ref<boolean>(false);
-const defaultCitizenData = ref<string | null>("");
-const informaData = ref<Information>(defaultInformation);
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const myform = ref<QForm | null>(null);
-const dateBefore = ref<Date>(new Date());
-const same = ref<string>("0");
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const columnsHistory = ref<QTableColumn[]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขบัตรประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "relationship",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "relationship",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bloodGroup",
-    align: "left",
-    label: "หมู่เลือด",
-    sortable: true,
-    field: "bloodGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "nationality",
-    align: "left",
-    label: "สัญชาติ",
-    sortable: true,
-    field: "nationality",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "race",
-    align: "left",
-    label: "เชื้อชาติ",
-    sortable: true,
-    field: "race",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "religion",
-    align: "left",
-    label: "ศาสนา",
-    sortable: true,
-    field: "religion",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "telephoneNumber",
-    align: "left",
-    label: "เบอร์โทร",
-    sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    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",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsHistory = ref<String[]>([
-  "citizenId",
-  "prefix",
-  "firstName",
-  "lastName",
-  "birthDate",
-  "gender",
-  "relationship",
-  "bloodGroup",
-  "nationality",
-  "race",
-  "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
-  "createdFullName",
-  "createdAt",
-]);
-
-onMounted(async () => {
-  await fetchPerson();
-  await fetchData();
-  emit("update:statusEdit", false);
-  defaultAdd();
-});
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    informaData.value = {
-      cardid: null,
-      age: null,
-      prefix: null,
-      prefixId: null,
-      firstname: null,
-      lastname: null,
-      birthDate: new Date(),
-      genderId: null,
-      bloodId: null,
-      nationality: null,
-      ethnicity: null,
-      statusId: null,
-      religionId: null,
-      tel: null,
-      employeeType: null,
-      employeeClass: null,
-      profileType: null,
-    };
-  }
-};
-
-const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
-};
-
-/**
- * get รายการ ข้อมูลเกี่ยวกับบุคคล
- */
-const fetchPerson = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.person)
-    .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      loaderPage(false);
-    });
-};
-
-const changeCardID = (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      dialogMessage(
-        $q,
-        "ข้อมูลมีการแก้ไข?",
-        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
-        "info",
-        "ยืนยัน",
-        "public",
-        async () => {
-          await checkCitizen(value);
-        },
-        async () => {
-          informaData.value.cardid = defaultCitizenData.value;
-        }
-      );
-    }
-  }
-};
-
-const checkCitizen = async (id: string) => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileCitizenId(id))
-    .then((res) => {
-      const data = res.data.result.citizen;
-
-      if (!data) {
-        dialogMessage(
-          $q,
-          "ข้อความแจ้งเตือน",
-          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
-          "warning",
-          undefined,
-          "orange",
-          undefined,
-          undefined,
-          true
-        );
-        informaData.value.cardid = defaultCitizenData.value;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  loaderPage(true);
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
-  await calRetire(modelData);
-};
-
-const fetchDataComponent = async (modelData: Date) => {
-  await props.fetchDataProfile();
-  await fetchData();
-};
-
-const calRetire = async (birth: Date) => {
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    loaderPage(true);
-    await http
-      .post(config.API.profileCalRetire, body)
-      .then((res: any) => {
-        const data = res.data.result;
-        informaData.value.age = data.age;
-        changeRetireText(data.retireDate);
-        dateBefore.value = birth;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        changeRetireText(date2Thai(retire));
-      })
-      .finally(() => {
-        loaderPage(false);
-      });
-  }
-};
-
-const fetchData = async () => {
-  if (route.params.id) {
-    loaderPage(true);
-    await http
-      .get(config.API.profileInforId(route.params.id.toString()))
-      .then(async (res: any) => {
-        const data: ResponseObject = res.data.result;
-        defaultCitizenData.value = data.citizenId;
-        informaData.value.cardid = data.citizenId;
-        informaData.value.prefix = "";
-        informaData.value.prefixId = data.prefixId;
-        informaData.value.firstname = data.firstName;
-        informaData.value.lastname = data.lastName;
-        informaData.value.birthDate = new Date(data.birthDate);
-        informaData.value.genderId = data.genderId;
-        informaData.value.bloodId = data.bloodGroupId;
-        informaData.value.nationality = data.nationality;
-        informaData.value.ethnicity = data.race;
-        informaData.value.statusId = data.relationshipId;
-        informaData.value.religionId = data.religionId;
-        informaData.value.tel = data.telephoneNumber;
-        informaData.value.age = data.age;
-        informaData.value.employeeType = data.employeeType;
-        informaData.value.employeeClass = data.employeeClass;
-        informaData.value.profileType = data.profileType;
-        dateBefore.value = new Date(data.birthDate);
-        same.value = data.changeName == true ? "1" : "0";
-        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-        if (
-          data.profileType == "officer" &&
-          columnsHistory.value.length >= 15
-        ) {
-          columnsHistory.value.splice(13, 1);
-          columnsHistory.value.splice(12, 1);
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        //   loaderPage(false);
-        await props.fetchDataProfile();
-      });
-  }
-};
-
-const editData = async () => {
-  const body: any = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
-  loaderPage(true);
-  await http
-    .put(config.API.profileInforId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-      await changeBirth(informaData.value.birthDate ?? new Date());
-    });
-};
-
-const addData = async () => {
-  //     loaderPage(true);
-  //   await http
-  //     .put(config.API.profileInforId(route.params.id.toString()), body)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       emit("update:statusEdit", false);
-  //       await fetchData();
-  //       await changeBirth(informaData.value.birthDate ?? new Date());
-  //     });
-};
-
-const saveData = async () => {
-  if (myform.value != null) {
-    await myform.value.validate().then(async (success: boolean) => {
-      if (success) {
-        if (props.statusAdd) {
-          await addData();
-        } else {
-          await editData();
-        }
-      } else {
-      }
-    });
-  }
-};
-
-const changeBtn = async () => {
-  if (edit.value == true) {
-    if (props.statusEdit === true) {
-      edit.value = false;
-    } else {
-      emit("update:statusEdit", true);
-    }
-  } else {
-    emit("update:statusEdit", false);
-  }
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index e343d616c..4e5908aea 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1355,7 +1355,7 @@ const clickAdd = () => {
 
 // ดูรายการแก้ไขรายชื่อ
 const redirectToPage = (id?: string) => {
-  router.push(`/registry/${id}`);
+  router.push(`/registryEmployee/edit/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);

From b6553b5fb17095fca29d0ea7123f3646dbe42812 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 17:05:09 +0700
Subject: [PATCH 10/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=80=E0=B8=95=E0=B8=A3=E0=B8=B5=E0=B8=A2=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  2 +
 .../components/PersonalList/OrgTree.vue       | 59 +++++++++++++++++--
 .../components/PersonalList/Table.vue         | 15 ++++-
 .../components/PersonalList/TableDetail.vue   | 42 ++++++-------
 4 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 4c1b74def..6be4c2dde 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -48,4 +48,6 @@ export default {
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
   putPosition: (id:any) => `${placement}/position/${id}`,
+  // clear Position
+  clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index ba0f63366..2197e30a8 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -95,6 +95,8 @@ const fetchplacementPosition = async () => {
   await http
     .get(config.API.placementPosition())
     .then((res: any) => {
+      console.log("1221111111");
+
       placementPosition.value = res.data.result;
     })
     .catch((e: any) => {
@@ -277,7 +279,7 @@ const positionLevelOptions = ref<Object[]>([
 ]);
 
 const selectedPosition = async (data: any) => {
-  console.log("selecteds", data);
+  // console.log("selecteds", data);
   if (data.name == null && selected.value != data.keyId) {
     // console.log("selecteds", data);
 
@@ -361,7 +363,7 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
-  console.log("dataForm", dataForm);
+  // console.log("dataForm", dataForm);
 };
 
 const checkPosition = (val: string) => {
@@ -374,6 +376,7 @@ const expanded = ref<string[]>([]);
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
+  fetchplacementPosition();
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
       personal.value = data;
@@ -382,15 +385,19 @@ watch(props, () => {
   }
   // console.log("draft===>", personal.value.draft);
 
-  if (personal.value && personal.value.draft === false) {
+  if (
+    personal.value &&
+    personal.value.draft === false &&
+    personal.value.positionNumber !== null
+  ) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
-      console.log(findData);
+      // console.log(findData);
 
       if (findData != null) {
-        console.log("findData===>", findData);
+        // console.log("findData===>", findData);
         selectedPosition(findData);
         for (let i = 3; i <= findData.keyId.length; i += 2) {
           expanded.value.push(findData.keyId.slice(0, i));
@@ -423,6 +430,34 @@ function findByPerson(element: any): any {
   }
   return null;
 }
+const clearPosition = () => {
+  console.log(personal.value);
+  $q.dialog({
+    title: "ยืนยันการคืนตำแหน่ง",
+    message: "ต้องการยืนยันการคืนตำแหน่งนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      const: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .post(config.API.clearPosition(personal.value.personalId), {})
+        .then((res: Object) => success($q, "คืนตำแหน่งสำเร็จ"))
+
+        .catch((e: Object) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          hideLoader();
+          await closeAndClear();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
@@ -707,6 +742,20 @@ function findByPerson(element: any): any {
                         map-options
                       />
                     </div>
+                    <div
+                      class="col-xs-12 col-sm-12 col-md-12 q-pa-lg"
+                      v-if="personal.positionNumber"
+                    >
+                      <div class="row">
+                        <div class="col-md-4 offset-md-4">
+                          <q-btn
+                            color="grey"
+                            label="คืนตำแหน่ง"
+                            @click="clearPosition"
+                          ></q-btn>
+                        </div>
+                      </div>
+                    </div>
                     <!-- <div class="col-sx-12 col-sm-12 col-md-12">
                       <q-separator inset size="2px" class="q-my-md" />
                     </div> -->
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index aff05ffc6..c72e71208 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive, computed } from "vue";
+import { ref, onMounted, watch, reactive, computed, watchEffect } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -209,7 +209,7 @@ const getTable = async () => {
   await http
     .get(config.API.personalList(examIdString))
     .then(async (res: any) => {
-      console.log(res);
+      // console.log(res);
       dataRes.value = res.data.result;
       rowsAll.value = [];
       (rowsFilter.value = []),
@@ -252,7 +252,9 @@ const getTable = async () => {
         ? rowsAll.value
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
-      rowsFilter.value = rows.value.filter((e: any) => e.draft == "รอส่งตัว");
+      rowsFilter.value = rows.value.filter(
+        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber == null
+      );
       console.log(rowsFilter.value);
     })
     .catch((e) => {
@@ -433,6 +435,7 @@ const openAppointModal = (pid: string) => {
 const clickCloseModalTree = async () => {
   await getTable();
   appointModal.value = false;
+  props.statCard();
 };
 
 const validateData = async () => {
@@ -492,6 +495,11 @@ onMounted(async () => {
   }
   await getTable();
 });
+watchEffect(() => {
+  if (getTable()) {
+    props.statCard();
+  }
+});
 
 const containStatus = ref<boolean>(false);
 watch(containStatus, () => {
@@ -532,6 +540,7 @@ const savelist = () => {
         })
         .finally(async () => {
           await getTable();
+
           hideLoader();
         });
     });
diff --git a/src/modules/05_placement/components/PersonalList/TableDetail.vue b/src/modules/05_placement/components/PersonalList/TableDetail.vue
index b21720df0..cdbea6068 100644
--- a/src/modules/05_placement/components/PersonalList/TableDetail.vue
+++ b/src/modules/05_placement/components/PersonalList/TableDetail.vue
@@ -93,6 +93,7 @@ watch(props, () => {
   }
 });
 
+
 const validateData = () => {
   const selectedIds = personalForm.value.isProperty;
 
@@ -105,24 +106,24 @@ const validateData = () => {
   );
 };
 
-const ClickSave = () => {
-  const isValid = validateData();
+// const ClickSave = () => {
+//   const isValid = validateData();
 
-  if (isValid) {
-    // props.close();
-    // props.validate();
-    // putpersonalForm();
-    modalConfirm(
-      $q,
-      "การยืนยัน",
-      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
-      putpersonalForm
-    );
-  } else {
-    success($q, "กรอกให้ครบ");
-    console.log();
-  }
-};
+//   if (isValid) {
+//     // props.close();
+//     // props.validate();
+//     // putpersonalForm();
+//     modalConfirm(
+//       $q,
+//       "การยืนยัน",
+//       "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+//       putpersonalForm
+//     );
+//   } else {
+//     success($q, "กรอกให้ครบ");
+//     console.log();
+//   }
+// };
 const fetchData = async () => {
   showLoader();
   await http
@@ -134,7 +135,7 @@ const fetchData = async () => {
           university: e.name,
           degree: e.degree,
           major: e.field,
-          graduation: e.finishDate,
+          graduation: date2Thai(e.finishDate),
         });
       });
     })
@@ -145,6 +146,7 @@ const fetchData = async () => {
       hideLoader();
     });
 };
+
 const formBmaofficer = (val: string) => {
   switch (val) {
     case "OFFICER":
@@ -345,7 +347,7 @@ const putpersonalForm = async () => {
             </q-card>
           </div>
         </div>
-        <q-separator />
+        <!-- <q-separator />
         <div>
           <DialogFooter
             @click="ClickSave"
@@ -353,7 +355,7 @@ const putpersonalForm = async () => {
             :editvisible="save"
             :validate="validateData"
           />
-        </div>
+        </div> -->
       </q-form>
     </q-card>
   </q-dialog>

From d1f1ba817cfaa8eb6d5e75427cb7c123ece530a6 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 17:25:26 +0700
Subject: [PATCH 11/16] =?UTF-8?q?popup=20=E0=B9=80=E0=B8=AB=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=9C=E0=B8=A5=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=80=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/TableList.vue   | 166 +++++-------------
 1 file changed, 43 insertions(+), 123 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 22704c6c7..33ef58904 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -34,15 +34,15 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
- /*  {
-    name: "fixname",
-    align: "left",
-    label: "คำนำหน้านาม",
-    title: "คำนำหน้านาม",
-    field: "fixname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }, */
+  /*  {
+     name: "fixname",
+     align: "left",
+     label: "คำนำหน้านาม",
+     title: "คำนำหน้านาม",
+     field: "fixname",
+     headerStyle: "font-size: 14px",
+     style: "font-size: 14px",
+   }, */
   {
     name: "name",
     align: "left",
@@ -253,8 +253,8 @@ const clickDelete = (prop: any) => {
           } else await fecthlist(retireld_params);
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 // note
 const fetchReason = async (prop: string) => {
@@ -269,6 +269,7 @@ const fetchReason = async (prop: string) => {
       messageError($q, e);
     });
 };
+
 const saveNote = () => {
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
@@ -297,8 +298,8 @@ const saveNote = () => {
           modalNote.value = false;
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
@@ -361,26 +362,13 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="backHistory"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
-        <AddList
-          :retireld="retireld"
-          :profile-id="profileId"
-          :UpdateListId="UpdateListId"
-        />
+        <AddList :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId" />
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -409,35 +397,15 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
         <q-space />
         <q-tabs shrink>
-          <q-input
-            borderless
-            outlined
-            dense
-            debounce="300"
-            v-model="filter"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
+          <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา" style="max-width: 200px"
+            class="q-ml-sm">
             <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          >
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+            class="gt-xs q-ml-sm">
             <!-- <template v-slot:option="{ opt }">
               <div>{{ opt.label }}</div>
               <div class="sublabel">{{ opt.sublabel }}</div>
@@ -447,20 +415,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </div>
 
       <div>
-        <q-table
-          flat
-          dense
-          bordered
-          :rows="rows"
-          :columns="columns"
-          row-key="order"
-          class="custom-header-table"
-          :filter="filter"
-          :visible-columns="visibleColumns"
-          no-data-label="ไม่มีข้อมูล"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
+          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -476,11 +433,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              :style="props.row.profileId === profileId && 'color: #26a69a;'"
-            >
+            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
+              @click="
+                fetchReason(props.row.id), (modalNote = true), (note = '')
+                ">
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
               <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
@@ -521,40 +477,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn
-                  flat
-                  round
-                  color="blue"
-                  dense
-                  icon="mdi-file-account"
-                  @click="router.push(`/registry/${props.row.profileId}`)"
-                >
+                <q-btn flat round color="blue" dense icon="mdi-file-account"
+                  @click="router.push(`/registry/${props.row.profileId}`)">
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
-                <q-btn
-                  flat
-                  round
-                  class="text-red-14"
-                  icon="mdi-delete"
-                  dense
-                  @click="clickDelete(props.row)"
-                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-                >
+                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
+                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+              boundary-links direction-links></q-pagination>
           </template>
         </q-table>
       </div>
@@ -566,38 +502,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card style="width: 700px; max-width: 80vw">
       <q-card-section class="q-pt-none">
         <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder"
-            >กรอกเหตุผล
+          <q-toolbar-title class="header-text text-weight-bolder">กรอกเหตุผล
           </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="modalNote = false"
-            style="color: #ff8080; background-color: #ffdede"
-          />
+          <q-btn icon="close" unelevated round dense @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede" />
         </q-toolbar>
       </q-card-section>
       <q-card-section class="q-pt-none">
-        <q-input
-          outlined
-          dense
-          lazy-rules
-          v-model="note"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-          :label="`${'กรอกเหตุผล'}`"
-          type="textarea"
-        />
+        <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`" type="textarea" />
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
-          label="บักทึก"
-          color="secondary"
-          @click="saveNote"
-          :disable="visibleNote"
-        />
+        <q-btn label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -623,13 +540,16 @@ const paginationLabel = (start: number, end: number, total: number) => {
     position: sticky;
     z-index: 1;
   }
+
   .q-table thead tr:last-child th {
     top: 48px;
   }
+
   .q-table thead tr:first-child th {
     top: 0;
   }
 }
+
 .q-btn-dropdown__arrow {
   display: none;
 }

From de0c00baca143175c3b9ff1eae035511c76e1d8d Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 17:29:47 +0700
Subject: [PATCH 12/16] =?UTF-8?q?Set=20Date=20=E0=B9=80=E0=B8=9B=E0=B9=87?=
 =?UTF-8?q?=E0=B8=99=20null=20=E0=B9=83=E0=B8=99=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/profileType.ts     |    4 +-
 .../views/Information/Information.vue         | 1132 +++++++++++++++++
 .../08_registryEmployee/views/information.vue |    8 +-
 3 files changed, 1140 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/08_registryEmployee/views/Information/Information.vue

diff --git a/src/modules/04_registry/components/profileType.ts b/src/modules/04_registry/components/profileType.ts
index e0cefd668..ab3b28b22 100644
--- a/src/modules/04_registry/components/profileType.ts
+++ b/src/modules/04_registry/components/profileType.ts
@@ -14,7 +14,7 @@ interface Information {
   prefixId: string | null;
   firstname: string | null;
   lastname: string | null;
-  birthDate: Date;
+  birthDate: Date | null;
   genderId: string | null;
   bloodId: string | null;
   nationality: string | null;
@@ -135,7 +135,7 @@ const defaultInformation: Information = {
   prefixId: null,
   firstname: null,
   lastname: null,
-  birthDate: new Date(),
+  birthDate: null,
   genderId: null,
   bloodId: null,
   nationality: null,
diff --git a/src/modules/08_registryEmployee/views/Information/Information.vue b/src/modules/08_registryEmployee/views/Information/Information.vue
new file mode 100644
index 000000000..ec7a1440b
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/Information/Information.vue
@@ -0,0 +1,1132 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(informaData.birthDate)"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) "
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+import type {
+  RequestItemsHistoryObject,
+  Columns,
+} from "@/modules/04_registry/interface/request/Information";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import type { QTableColumn, QForm } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
+const informaData = ref<Information>(defaultInformation);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    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",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    informaData.value = {
+      cardid: null,
+      age: null,
+      prefix: null,
+      prefixId: null,
+      firstname: null,
+      lastname: null,
+      birthDate: new Date(),
+      genderId: null,
+      bloodId: null,
+      nationality: null,
+      ethnicity: null,
+      statusId: null,
+      religionId: null,
+      tel: null,
+      employeeType: null,
+      employeeClass: null,
+      profileType: null,
+    };
+  }
+};
+
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      dialogMessage(
+        $q,
+        "ข้อมูลมีการแก้ไข?",
+        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
+        "info",
+        "ยืนยัน",
+        "public",
+        async () => {
+          await checkCitizen(value);
+        },
+        async () => {
+          informaData.value.cardid = defaultCitizenData.value;
+        }
+      );
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInforHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          birthDate: new Date(e.birthDate),
+          gender: e.gender,
+          relationship: e.relationship,
+          bloodGroup: e.bloodGroup,
+          nationality: e.nationality,
+          race: e.race,
+          religion: e.religion,
+          telephoneNumber: e.telephoneNumber,
+          employeeType:
+            e.employeeType == "gov"
+              ? "งบประมาณเงินอุดหนุนรัฐบาล"
+              : e.employeeType == "bkk"
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
+          employeeClass:
+            e.employeeClass == "perm"
+              ? "ลูกจ้างประจำ"
+              : e.employeeClass == "temp"
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId;
+        informaData.value.cardid = data.citizenId;
+        informaData.value.prefix = "";
+        informaData.value.prefixId = data.prefixId;
+        informaData.value.firstname = data.firstName;
+        informaData.value.lastname = data.lastName;
+        informaData.value.birthDate = new Date(data.birthDate);
+        informaData.value.genderId = data.genderId;
+        informaData.value.bloodId = data.bloodGroupId;
+        informaData.value.nationality = data.nationality;
+        informaData.value.ethnicity = data.race;
+        informaData.value.statusId = data.relationshipId;
+        informaData.value.religionId = data.religionId;
+        informaData.value.tel = data.telephoneNumber;
+        informaData.value.age = data.age;
+        informaData.value.employeeType = data.employeeType;
+        informaData.value.employeeClass = data.employeeClass;
+        informaData.value.profileType = data.profileType;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+        if (
+          data.profileType == "officer" &&
+          columnsHistory.value.length >= 15
+        ) {
+          columnsHistory.value.splice(13, 1);
+          columnsHistory.value.splice(12, 1);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   loaderPage(false);
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+const editData = async () => {
+  const body: any = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    createdAt: new Date(),
+    age: null,
+    employeeType: informaData.value.employeeType,
+    employeeClass: informaData.value.employeeClass,
+    profileType: informaData.value.profileType,
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  await http
+    .put(config.API.profileInforId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+      await changeBirth(informaData.value.birthDate ?? new Date());
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+        if (props.statusAdd) {
+          await addData();
+        } else {
+          await editData();
+        }
+      } else {
+      }
+    });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
index ade1f0cfd..6be674a11 100644
--- a/src/modules/08_registryEmployee/views/information.vue
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -117,7 +117,11 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
+                :model-value="
+                  informaData.birthDate == null
+                    ? null
+                    : date2Thai(informaData.birthDate)
+                "
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -692,7 +696,7 @@ const defaultAdd = () => {
     prefixId: null,
     firstname: null,
     lastname: null,
-    birthDate: new Date(),
+    birthDate: null,
     genderId: null,
     bloodId: null,
     nationality: null,

From 4f9bf01f95a80c728da48715ce32a2e0dc7d8fa7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 17:44:08 +0700
Subject: [PATCH 13/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=20filter=20=E0=B8=AA=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/PersonalList/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index c72e71208..f1bd72119 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -253,7 +253,7 @@ const getTable = async () => {
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
       rowsFilter.value = rows.value.filter(
-        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber == null
+        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber !== null
       );
       console.log(rowsFilter.value);
     })

From 5295fe241f66258cd6f68875a6dbb17458a247c5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 17:59:56 +0700
Subject: [PATCH 14/16] no message

---
 src/modules/05_placement/components/PersonalList/Table.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index f1bd72119..bb19d36fa 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -253,7 +253,10 @@ const getTable = async () => {
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
       rowsFilter.value = rows.value.filter(
-        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber !== null
+        (e: any) =>
+          e.draft == "รอส่งตัว" &&
+          e.positionNumber !== null &&
+          e.statusName == " เตรียมบรรจุ"
       );
       console.log(rowsFilter.value);
     })
@@ -703,7 +706,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-item
                     v-if="
                       (roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
-                      props.row.draft === 'รอส่งตัว'
+                      props.row.draft === 'รอส่งตัว' && props.row.statusId !== 'DISCLAIM'
                     "
                     clickable
                     v-close-popup

From fc5f715808ccf49d05dbf218df0a71a467d092d6 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 18:18:26 +0700
Subject: [PATCH 15/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20flexbox=20?=
 =?UTF-8?q?=E0=B8=96=E0=B8=B6=E0=B8=87=E0=B9=81=E0=B8=81=E0=B9=88=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/Profile.vue        | 154 +++++++++---------
 1 file changed, 79 insertions(+), 75 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 5a58aaa59..ee974426e 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -392,83 +392,87 @@
         <q-form ref="myForm">
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
-            <q-file
-              class="col-5"
-              outlined
-              dense
-              v-model="filePassaway"
-              label="แนบใบมรณบัตร"
-              hide-bottom-space
-              lazy-rules
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" />
-              </template>
-            </q-file>
-            <q-separator />
-            <q-input
-              class="col-7"
-              dense
-              outlined
-              v-model="deathCertificateNo"
-              label="เลขที่ใบมรณบัตร"
-            />
-            <q-separator />
-            <datepicker
-              class="col-5"
-              menu-class-name="modalfix"
-              v-model="dateDeath"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker"
-                  :model-value="dateDeath != null ? date2Thai(dateDeath) : null"
-                  :label="`${'วันที่เสียชีวิต'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-file
+                class="col-12 col-sm-6 col-md-5"
+                outlined
+                dense
+                v-model="filePassaway"
+                label="แนบใบมรณบัตร"
+                hide-bottom-space
+                lazy-rules
+              >
+                <q-separator />
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร"
+              />
 
-            <q-input
-              class="col-7"
-              dense
-              outlined
-              v-model="placeDeathCertificate"
-              label="สถานที่ออกใบมรณบัตร"
-            />
-            <q-separator />
-            <q-input
-              class="col-12"
-              dense
-              outlined
-              v-model="reasonDeath"
-              label="เหตุผลการเสีบชีวิต"
-              type="textarea"
-            />
-            <q-space />
+              <datepicker
+                class="col-12 col-sm-6 col-md-5"
+                menu-class-name="modalfix"
+                v-model="dateDeath"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      dateDeath != null ? date2Thai(dateDeath) : null
+                    "
+                    :label="`${'วันที่เสียชีวิต'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
 
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร"
+              />
+              <q-separator />
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                v-model="reasonDeath"
+                label="เหตุผลการเสีบชีวิต"
+                type="textarea"
+              />
+            </div>
             <q-space />
           </q-card-section>
           <q-separator />

From c46f453f34a3b786a88fbc4738d3a022f3482bae Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 3 Aug 2023 10:12:01 +0700
Subject: [PATCH 16/16] =?UTF-8?q?addlist=20=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainProbation.vue    | 707 ++++++++++--------
 1 file changed, 391 insertions(+), 316 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index ff6633ca4..f28af5a48 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,87 +1,96 @@
 <template>
-    <div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div>
-		<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-			<div class="row q-col-gutter-sm">
-				<div class="row col-12 q-col-gutter-sm">
-					<div>
-						<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
-							<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-						</q-btn>
-					</div>
-					<q-space />
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="modal = true"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
 
-					<q-input
-						class="col-xs-12 col-sm-3 col-md-2"
-						standout
-						dense
-						v-model="filterKeyword"
-						ref="filterRef"
-						outlined
-						debounce="300"
-						placeholder="ค้นหา"
-					>
-						<template v-slot:append>
-							<q-icon v-if="filterKeyword == ''" name="search" />
-							<q-icon
-								v-if="filterKeyword !== ''"
-								name="clear"
-								class="cursor-pointer"
-								@click="resetFilter"
-							/>
-						</template>
-					</q-input>
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
 
-					<q-select
-						v-model="visibleColumns"
-						multiple
-						outlined
-						dense
-						options-dense
-						:display-value="$q.lang.table.columns"
-						emit-value
-						map-options
-						:options="columns"
-						option-value="name"
-						options-cover
-						style="min-width: 150px"
-						class="col-xs-12 col-sm-3 col-md-2"
-					/>
-				</div>
-				<div class="col-12">
-					<q-table
-						ref="table"
-						:columns="columns"
-						:rows="rows"
-						:filter="filterKeyword"
-						row-key="Order"
-						flat
-						bordered
-						:paging="true"
-						dense
-						class="custom-header-table"
-						v-bind="attrs"
-						:visible-columns="visibleColumns"
-						:pagination-label="paginationLabel"
-						v-model:pagination="pagination"
-					>
-						<template v-slot:header="props">
-							<q-tr :props="props">
-								<q-th v-for="col in props.cols" :key="col.name" :props="props">
-									<span class="text-weight-medium">{{ col.label }}</span>
-								</q-th>
-							</q-tr>
-						</template>
-						<template v-slot:body="props">
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)">
-								<q-td
-									v-for="col in props.cols"
-									:key="col.name"
-									:props="props"
-								>
-									<div v-if="col.name == 'no'">
-										{{ props.rowIndex + 1 }}
-									</div>
-									<!-- <div v-else-if="col.name == 'status'">
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
+            >
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <!-- <div v-else-if="col.name == 'status'">
 										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
 											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
 										</q-icon>
@@ -92,136 +101,151 @@
 											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
 										</q-icon>
 									</div> -->
-									<div v-else>
-										{{ col.value }}
-									</div>
-								</q-td>
-							</q-tr>
-						</template>
-						<template v-slot:pagination="scope">
-							<q-pagination
-								v-model="pagination.page"
-								active-color="primary"
-								color="dark"
-								:max="scope.pagesNumber"
-								:max-pages="5"
-								size="sm"
-								boundary-links
-								direction-links
-							></q-pagination>
-						</template>
-					</q-table>
-				</div>
-			</div>
-    </q-card>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 
-		<q-dialog v-model="modal" persistent>
-			<q-card style="width: 900px; max-width: 80vw;">
-				<q-form ref="myForm">
-					<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
-					<q-separator />
-					<q-card-section class="q-pa-md q-col-gutter-sm">
-						<q-input
-							class="col-12"
-							standout
-							dense
-							v-model="filterKeyword2"
-							ref="filterRef2"
-							outlined
-							debounce="300"
-							placeholder="ค้นหา"
-						>
-							<template v-slot:append>
-								<q-icon v-if="filterKeyword2 == ''" name="search" />
-								<q-icon
-									v-if="filterKeyword2 !== ''"
-									name="clear"
-									class="cursor-pointer"
-									@click="resetFilter2"
-								/>
-							</template>
-						</q-input>
-						<div class="col-12">
-							<q-table
-								ref="table2"
-								:columns="columns2"
-								:rows="rows2"
-								:filter="filterKeyword2"
-								row-key="Order"
-								flat
-								bordered
-								:paging="true"
-								dense
-								class="custom-header-table"
-								v-bind="attrs"
-								:visible-columns="visibleColumns2"
-								:pagination-label="paginationLabel"
-								v-model:pagination="pagination"
-							>
-								<template v-slot:header="props">
-									<q-tr :props="props">
-										<q-th v-for="col in props.cols" :key="col.name" :props="props">
-											<span class="text-weight-medium">{{ col.label }}</span>
-										</q-th>
-										<q-th auto-width />
-									</q-tr>
-								</template>
-								<template v-slot:body="props">
-									<q-tr :props="props" class="cursor-pointer">
-										<q-td
-											v-for="col in props.cols"
-											:key="col.name"
-											:props="props"
-										>
-											<div v-if="col.name == 'no'">
-												{{ props.rowIndex + 1 }}
-											</div>
-											<div v-else>
-												{{ col.value }}
-											</div>
-										</q-td>
-										<q-td auto-width>
-											<q-btn
-												dense
-												class="q-px-md"
-												outline
-												color="primary"
-												v-close-popup
-												label="เพิ่ม"
-											>
-											</q-btn>
-										</q-td>
-									</q-tr>
-								</template>
-								<template v-slot:pagination="scope">
-									<q-pagination
-										v-model="pagination.page"
-										active-color="primary"
-										color="dark"
-										:max="scope.pagesNumber"
-										:max-pages="5"
-										size="sm"
-										boundary-links
-										direction-links
-									></q-pagination>
-								</template>
-							</q-table>
-						</div>
-					</q-card-section>        
-				</q-form>
-			</q-card>
-  	</q-dialog>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md q-col-gutter-sm">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
+            </template>
+          </q-input>
+          <div class="col-12">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+} from "@/modules/05_placement/interface/request/Main";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import router from "@/router";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
+
 const modal = ref<boolean>(false);
 const pagination = ref({
   sortBy: "desc",
@@ -233,7 +257,7 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-	"position",
+  "position",
   "level",
   "institution",
   "time",
@@ -261,7 +285,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -270,7 +294,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -279,7 +303,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "institution",
     align: "left",
     label: "สังกัด",
@@ -288,7 +312,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "time",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
@@ -297,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "orderNum",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
@@ -314,69 +338,61 @@ const columns = ref<QTableProps["columns"]>([
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormMainProbation[]>([
-	{
-		no:"1",
-		name: "นายสมคิด ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"2",
-		name: "นายเกียรติศักดิ์ บัณฑิต",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"3",
-		name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"4",
-		name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "ไม่ผ่านการทดลอง",
-		orderNum: "11/2566",
-	},
-	{
-		no:"5",
-		name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "ผ่านการทดลองงาน",
-		orderNum: "11/2566",
-	}
-]);
-
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "name",
-	"position",
-  "level",
-  "institution"
+  {
+    no: "1",
+    name: "นายสมคิด ยอดใจ ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "2",
+    name: "นายเกียรติศักดิ์ บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "3",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "4",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "ไม่ผ่านการทดลอง",
+    orderNum: "11/2566",
+  },
+  {
+    no: "5",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "ผ่านการทดลองงาน",
+    orderNum: "11/2566",
+  },
 ]);
 
 // หัวตาราง2
@@ -388,18 +404,18 @@ const columns2 = ref<QTableProps["columns"]>([
     sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px"
+    style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullname",
     align: "left",
     label: "ชื่อ-สกุล",
     sortable: true,
-    field: "name",
+    field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -408,7 +424,7 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -417,56 +433,104 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
-    name: "institution",
+  {
+    name: "organizationOrganization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows2 = ref<FormMainProbation2[]>([
-  {
-		no:"1",
-    name: "นายใจดี ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-	{
-		no:"2",
-    name: "นายจักกริน บัณฑิต",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-	{
-		no:"3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-	{
-		no:"4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-	{
-		no:"5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  }
+  //   {
+  //     no: "1",
+  //     name: "นายใจดี ยอดใจ ",
+  //     position: "นักวิชาการพัสดุ",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //   },
+  //   {
+  //     no: "2",
+  //     name: "นายจักกริน บัณฑิต",
+  //     position: "นักวิชาการพัสดุ",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //   },
+  //   {
+  //     no: "3",
+  //     name: "นางสาวกัณฐิมา กาฬสินธุ์",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
+  //   {
+  //     no: "4",
+  //     name: "นางสาวเมขลา กระจ่างมนตรี",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
+  //   {
+  //     no: "5",
+  //     name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
 ]);
 
+onMounted(async () => {});
+
+watch(modal, () => {
+  if (modal.value === true) {
+    fecthOrganiz();
+  }
+});
+
+const fecthOrganiz = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      console.log(res);
+      let id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [
+    { criteriaType: "is_retire", criteriaValue: "false" },
+    { criteriaType: "is_probation", criteriaValue: "true" },
+  ];
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, "all"), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log("res:", res);
+      rows2.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    });
+};
+
 const clickDelete = (id: string) => {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
@@ -476,17 +540,29 @@ const clickDelete = (id: string) => {
       color: "negative",
     },
     persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูล",
+    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
   })
     .onOk(async () => {
+      console.log("เพิ่ม:", id);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
 
-
-const clickAdd = () => {
-	modal.value = true
-};
 const clickClose = async () => {
   modal.value = false;
 };
@@ -513,7 +589,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-
 </script>
 
 <style lang="scss" scope>
@@ -563,4 +638,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>