From 4c6f18176d77290854d9708def9363f3c161bd39 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:00:36 +0700
Subject: [PATCH 1/4] Currency input expulsion

---
 src/components/CurruncyInput.vue              | 27 +++++------
 .../components/CurrencyInput.vue              | 47 -------------------
 .../Expulsion/expulsionRegistry.vue           |  7 ++-
 3 files changed, 16 insertions(+), 65 deletions(-)
 delete mode 100644 src/modules/06_retirement/components/CurrencyInput.vue

diff --git a/src/components/CurruncyInput.vue b/src/components/CurruncyInput.vue
index 5dcdcc7ac..b92c8e38f 100644
--- a/src/components/CurruncyInput.vue
+++ b/src/components/CurruncyInput.vue
@@ -3,10 +3,15 @@
     ref="inputRef"
     v-model="formattedValue"
     :dense="dense"
-    :outlined="outlined"
-    :class="className"
-    :readonly="readonly"
-    :borderless="borderless"
+    :outlined="edit"
+    :class="
+      edit == true
+        ? 'full-width inputgreen cursor-pointer'
+        : 'full-width cursor-pointer'
+    "
+    :readonly="!edit"
+    :borderless="!edit"
+    hide-bottom-space
   >
     <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
@@ -24,21 +29,11 @@ const props = defineProps({
   modelValue: Number,
   dense: {
     type: Boolean,
-    default: false,
+    default: true,
   },
-  outlined: {
+  edit: {
     type: Boolean,
-    default: false,
   },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  borderless: {
-    type: Boolean,
-    default: false,
-  },
-  className: String,
 });
 
 const { inputRef, formattedValue, setValue } = useCurrencyInput({
diff --git a/src/modules/06_retirement/components/CurrencyInput.vue b/src/modules/06_retirement/components/CurrencyInput.vue
deleted file mode 100644
index 795796c78..000000000
--- a/src/modules/06_retirement/components/CurrencyInput.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <input
-    :class="
-      edit == true
-        ? 'full-width inputgreen cursor-pointer'
-        : 'full-width cursor-pointer'
-    "
-    :outlined="edit"
-    dense
-    ref="inputRef"
-    lazy-rules
-    :readonly="!edit"
-    :borderless="!edit"
-    v-model="test"
-    :label="`${'เงินเดือน'}`"
-    hide-bottom-space
-    type="text"
-    @update:modelValue="updateCoords(test)"
-  />
-  {{ salary }}
-</template>
-<script>
-import { useCurrencyInput } from "vue-currency-input";
-
-export default {
-  name: "CurrencyInput",
-  props: {
-    salary: String,
-    edit: Boolean,
-    modelValue: Number,
-    options: Object,
-  },
-  emits: ["update:salary"],
-  setup(props) {
-    const { inputRef } = useCurrencyInput(props.options);
-    const test = "";
-    return { inputRef };
-  },
-  methods: {
-    updateCoords(title) {
-      console.log("asd");
-      this.$emit("update:salary", title); // previously was `this.$emit('input', title)`
-    },
-  },
-  //   watch(){}
-};
-</script>
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index f99705f62..d54f422ca 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -198,7 +198,10 @@
               <CurrencyInput
                 v-model="salary"
                 :edit="edit"
-                :options="{ currency: 'THB' }"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -288,7 +291,7 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import CurrencyInput from "@/modules/06_retirement/components/CurrencyInput.vue";
+import CurrencyInput from "@/components/CurruncyInput.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";

From 20e8780d70189221a0e7b79b356bd49f68580a1c Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:33:53 +0700
Subject: [PATCH 2/4] Currency input

---
 .../components/AppointMent/Detail.vue         | 197 ++++++++++++++----
 .../components/Receive/receiveDetail2.vue     |  13 +-
 .../components/Relocation/RelocationbyId.vue  |  27 +--
 .../components/Repatriate/RepatriatebyId.vue  | 184 +++++++++++++---
 .../components/Transfer/transferRegistry.vue  |  11 +-
 .../Discharged/dischargedRegistry.vue         |  11 +-
 .../components/DismissOrder/outRegistry.vue   |  14 +-
 .../components/resign/ResignByid.vue          |  12 +-
 8 files changed, 380 insertions(+), 89 deletions(-)

diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index e95135d42..c369e1263 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import CurrencyInput from "@/components/CurruncyInput.vue";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 
@@ -133,7 +134,16 @@ const getClass = (val: boolean) => {
 </script>
 <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="router.go(-1)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -142,8 +152,15 @@ const getClass = (val: boolean) => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${profileId}`)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -190,12 +207,36 @@ const getClass = (val: boolean) => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
-          style="width: 80px" @click="edit = !edit" />
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="clickSave" />
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="edit = !edit" />
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="clickSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -205,9 +246,19 @@ const getClass = (val: boolean) => {
           <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
         </div>
         <div class="col-12">
-          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-            v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
-            :label="`${'วุฒิการศึกษา'}`" type="text" />
+          <q-input
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="educationOld"
+            :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+            hide-bottom-space
+            :label="`${'วุฒิการศึกษา'}`"
+            type="text"
+          />
         </div>
       </div>
       <div class="row col-12 q-pa-md">
@@ -220,38 +271,83 @@ const getClass = (val: boolean) => {
             </div>
 
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
 
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
                 v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" />
+                :label="`${'เงินเดือน'}`" type="number" /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
@@ -273,22 +369,41 @@ const getClass = (val: boolean) => {
           </div> -->
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
-                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`">
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="edit
-                          ? 'color: var(--q-primary)'
-                          : 'color: var(--q-grey)'
-                        ">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -297,9 +412,19 @@ const getClass = (val: boolean) => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index 8f3b77a44..8af8374f6 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -533,7 +533,7 @@
               />
             </div>
             <div class="col-xs-6 col-sm-3">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -545,6 +545,14 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
             <div class="col-xs-12">
@@ -574,8 +582,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
-import CurruncyInput from "@/components/CurruncyInput.vue";
-
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index 07bf9456e..db6d59657 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 // import type {
 //   TypeFile,
@@ -422,18 +422,13 @@ onMounted(async () => {
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
+              <CurrencyInput
                 v-model="amountOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
                 :label="`${'เงินเดือน'}`"
-                type="number"
               />
             </div>
           </div>
@@ -460,7 +455,7 @@ onMounted(async () => {
               เงินเดือนตำแหน่งและหน่วยงานที่รับย้าย
             </div>
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -472,6 +467,14 @@ onMounted(async () => {
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="amount"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index ece92154d..614b2a241 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,14 +1,30 @@
 <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="router.go(-1)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
     รายละเอียดการส่งตัวกลับ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -63,8 +79,24 @@
         /> -->
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="conditionSave" />
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -78,64 +110,138 @@
               </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
                 v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" />
+                :label="`${'เงินเดือน'}`" type="number" /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'โอนไปสังกัด'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ตั้งแต่วัน'}`">
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="edit
-                        ? 'color: var(--q-primary)'
-                        : 'color: var(--q-grey)'
-                        ">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -144,9 +250,19 @@
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
@@ -159,6 +275,8 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index b58a81fd6..d4b3442be 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -263,7 +263,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -275,6 +275,14 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -365,6 +373,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index 5c156480c..9942cdb89 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -181,7 +181,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -193,6 +193,14 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -283,6 +291,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index 33535a08b..6b2adfb13 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -181,7 +181,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -193,6 +193,15 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -283,6 +292,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
@@ -383,7 +393,7 @@ const getData = async () => {
     .get(config.API.outByid(dataId))
     .then((res: any) => {
       const data = res.data.result;
-      
+
       responseData.value.personId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 3428c5fb5..421356a08 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -241,7 +241,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -253,6 +253,15 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -463,6 +472,7 @@ import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRetirementDataStore } from "@/modules/06_retirement/store";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 

From 5ee5b30d2156368372ccede2bc2e8bdb10924a16 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 22 Aug 2023 15:22:23 +0700
Subject: [PATCH 3/4] =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=20exit?=
 =?UTF-8?q?=20interview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/06_retirement/api.retirement.ts       |   3 +
 src/interface/request/main/main.ts            |   2 +-
 .../components/ExitInterview/exitMain.vue     | 562 ++++++++++++++++++
 src/modules/06_retirement/router.ts           |  13 +
 4 files changed, 579 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/06_retirement/components/ExitInterview/exitMain.vue

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 8fff353c7..483541ec0 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -26,6 +26,9 @@ export default {
   resingByid: (id: string) => `${retirement}/resign/${id}`,
   resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
   resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
+  listExitInterview: () => `${retirement}/resign/questionnaire`,
+  ExitInterviewByid: (id: string) => `${retirement}/resign/questionnaire/${id}`,
+  ExitInterviewReport: `${retirement}/resign/questionnaire/report`,
   // ปลดออก
   retirementDischarge,
   listDischarge: () => `${retirement}/discharge`,
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index d02ebb6fb..198208c32 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -293,7 +293,7 @@ const menuList = readonly<any[]>([
       {
         key: 7.3,
         label: "Exit interview",
-        // path: "",
+        path: "exit-Interview",
         role: "retirement",
       },
       {
diff --git a/src/modules/06_retirement/components/ExitInterview/exitMain.vue b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
new file mode 100644
index 000000000..9ed9c22e6
--- /dev/null
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@@ -0,0 +1,562 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const router = useRouter();
+const mixin = useCounterMixin();
+const RetirementData = useRetirementDataStore();
+
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const { statusText } = RetirementData;
+
+const rows = ref<ResponseItems[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    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: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "prefix",
+  "fullname",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+const filters = ref<ResponseItems[]>([]);
+const rows2 = ref<ResponseItems[]>([]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    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: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "prefix",
+  "fullname",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+const modal = ref<boolean>(false);
+const filterKeyword2 = ref<string>("");
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const selected = ref<ResponseItems[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseItems) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
+onMounted(async () => {
+  await fecthlist();
+});
+
+const fecthlist = async () => {
+  showLoader();
+  await http
+    .get(config.API.listExitInterview())
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseItems[] = [];
+
+      data.map((r: ResponseItems) => {
+        list.push({
+          activeDate: new Date(),
+          createdAt: new Date(),
+          firstName: r.firstName ?? "",
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
+          location: r.location ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          prefix: r.prefix ?? "",
+          profileId: r.profileId ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
+          sendDate: new Date(),
+          status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
+        });
+      });
+
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.ExitInterviewReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthlist();
+      hideLoader();
+    });
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการ Exit interview
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12">
+        <div class="row col-12 q-col-gutter-sm">
+          <!-- <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
+          </q-btn> -->
+
+          <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-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-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <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(`/retirement/resign/${props.row.id}`)"
+              >
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="prefix" :props="props">
+                  {{ props.row.prefix }}
+                </q-td>
+                <q-td key="fullname" :props="props">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="positionTypeOld" :props="props">
+                  {{ props.row.positionTypeOld }}
+                </q-td>
+                <q-td key="positionLevelOld" :props="props">
+                  {{ props.row.positionLevelOld }}
+                </q-td>
+                <q-td key="positionNumberOld" :props="props">
+                  {{ props.row.positionNumberOld }}
+                </q-td>
+
+                <q-td key="organizationPositionOld" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                  </div>
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="prefix" :props="props">
+                {{ props.row.prefix }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="positionTypeOld" :props="props">
+                {{ props.row.positionTypeOld }}
+              </q-td>
+              <q-td key="positionLevelOld" :props="props">
+                {{ props.row.positionLevelOld }}
+              </q-td>
+              <q-td key="positionNumberOld" :props="props">
+                {{ props.row.positionNumberOld }}
+              </q-td>
+
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog> -->
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index 2a70e733f..b5c3cd4d8 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -31,6 +31,9 @@ const expulsionMain = () =>
 const expulsionDetails = () =>
   import("@/modules/06_retirement/components/Expulsion/expulsionRegistry.vue");
 
+const ExitInterviewMain = () =>
+  import("@/modules/06_retirement/components/ExitInterview/exitMain.vue");
+
 export default [
   {
     path: "/retirement",
@@ -42,6 +45,16 @@ export default [
       Role: "retirement",
     },
   },
+  {
+    path: "/exit-Interview",
+    name: "exit-Interview",
+    component: ExitInterviewMain,
+    meta: {
+      Auth: true,
+      Key: [7.3],
+      Role: "ExitInterviewMain",
+    },
+  },
   {
     path: "/retirement/:retirementId",
     name: "retirementid",

From 1dad8653968e0774e7fae1bb5b3ec43136c79835 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 22 Aug 2023 19:10:04 +0700
Subject: [PATCH 4/4] Create exitRegistry.vue

---
 .../components/ExitInterview/exitRegistry.vue | 492 ++++++++++++++++++
 1 file changed, 492 insertions(+)
 create mode 100644 src/modules/06_retirement/components/ExitInterview/exitRegistry.vue

diff --git a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
new file mode 100644
index 000000000..46c505dd4
--- /dev/null
+++ b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
@@ -0,0 +1,492 @@
+<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="router.go(-1)"
+    />
+    รายละเอียด Exit interview ของ {{ responseData.fullname }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ responseData.fullname }}
+      </div>
+      <q-space />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        ข้อมูลการตอบแบบสอบถาม
+      </div>
+      <q-space />
+      <!-- <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div> -->
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                แสดงข้อมูลแบบสอบถามเป็นคำถามเเละคำตอบ
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <!-- <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="salary"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  hide-bottom-space
+                  :label="`${'เงินเดือน'}`"
+                  type="number"
+                /> -->
+
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกการให้ออกสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'การให้ออกสังกัด'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :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>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import CurrencyInput from "@/components/CurruncyInput.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/06_retirement/interface/response/expulsion";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const dataId = route.params.id.toString();
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+
+const responseData = ref<ResponseDataDetail>({
+  personId: "",
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.ExitInterviewByid(dataId))
+    .then((res: any) => {
+      const data = res.data.result;
+
+      responseData.value.personId = data.profileId;
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.id = data.id ?? "";
+      responseData.value.organization = data.organization ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
+      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.posNo ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.ExitInterviewByid(dataId), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>