Merge branch 'develop' into devTee

src/modules/06_retirement/components/Discharged/DialogSendToCommand.vue

@@ -8,11 +8,13 @@ import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** use */
 const $q = useQuasar();
 const selected = ref<ResponseItems[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
+/** คอลัมน์ */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -70,6 +72,7 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** คอลัมน์ที่แสดง */
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
@@ -79,6 +82,7 @@ const visibleColumns2 = ref<string[]>([
   "statustext",
 ]);
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   modal: Boolean,
   closeModal: Function,
@@ -93,7 +97,7 @@ const checkSelected = computed(() => {
   }
 });
 
-//popup ยืนยันส่งัว
+//popup ยืนยันส่ง
 const saveOrder = () => {
   dialogConfirm(
     $q,
@@ -102,6 +106,7 @@ const saveOrder = () => {
     "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
   );
 };
+
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((r) => r.id);
@@ -128,6 +133,7 @@ const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
+
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
   emit("update:filterKeyword2", "");

src/modules/06_retirement/components/Discharged/dischargedMain.vue

@@ -10,11 +10,11 @@ import config from "@/app.config";
 import DialogSendToCommand from "@/modules/06_retirement/components/Discharged/DialogSendToCommand.vue";
 import type { ResponseData } from "@/modules/06_retirement/interface/response/discharged";
 
+/** use */
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const transferStore = useTransferDataStore();
-
 const {
   date2Thai,
   messageError,
@@ -26,6 +26,8 @@ const {
 const { statusText } = transferStore;
 
 const modal = ref<boolean>(false);
+
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -47,6 +49,7 @@ const visibleColumns2 = ref<string[]>([
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
+const filters = ref<ResponseData[]>([]);
 const filterRef = ref<any>(null);
 const resetFilter = () => {
   filterKeyword.value = "";
@@ -54,9 +57,11 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
+/** ข้อมูลตาราง (จำลอง)*/
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
-const filters = ref<ResponseData[]>([]);
+
+/** คอลัมน์ */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -125,6 +130,7 @@ const columns = ref<QTableProps["columns"]>([
 const openModal = () => (modal.value = true);
 const closeModal = () => (modal.value = false);
 
+/**  Hook */
 onMounted(async () => {
   await getData();
 });
@@ -147,6 +153,7 @@ const openModalOrder = () => {
   rows2.value = row;
 };
 
+/** Fnction เรียกข้อมูลจาก API  */
 const getData = async () => {
   showLoader();
   await http
@@ -189,6 +196,10 @@ const getData = async () => {
     });
 };
 
+/**
+ * ฟังก์ชั่นลบข้อมูล
+ * @param id ไอดีของข้อมูล
+ */
 const clickDelete = async (id: string) => {
   dialogMessage(
     $q,
@@ -201,7 +212,7 @@ const clickDelete = async (id: string) => {
     async () => await getData()
   );
 };
-
+//ฟังก์ชั่นลบของมูลโดยการส่ง Api
 const deleteData = async (id: string) => {
   await http
     .delete(config.API.dischargeByid(id))
@@ -216,6 +227,9 @@ const deleteData = async (id: string) => {
     });
 };
 
+/**
+ * Setting Pagination
+ */
 const pagination = ref({
   sortBy: "createdAt",
   descending: true,

src/modules/06_retirement/components/Discharged/dischargedRegistry.vue

@@ -8,15 +8,15 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-
+/**Import type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
 
+/** use */
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
 const dataId = route.params.id.toString();
 const {
   date2Thai,
@@ -31,6 +31,9 @@ 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>("");
@@ -39,7 +42,6 @@ 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: "",
@@ -57,6 +59,7 @@ const responseData = ref<ResponseDataDetail>({
   fullname: "",
 });
 
+/** Hook */
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
@@ -64,6 +67,7 @@ onMounted(async () => {
   await getData();
 });
 
+/** Fnction เรียกข้อมูลจาก API  */
 const getData = async () => {
   showLoader();
   await http
@@ -105,11 +109,17 @@ const getData = async () => {
     });
 };
 
+/**
+ * ฟังก์ชั่น Cancle
+ */
 const clickCancel = async () => {
   await getData();
   edit.value = false;
 };
 
+/**
+ * ฟังก์ชั่น Save
+ */
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -155,6 +165,10 @@ const saveData = async () => {
     });
 };
 
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,

src/modules/06_retirement/components/DismissOrder/DialogSendToCommand.vue

@@ -8,11 +8,13 @@ import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** use */
 const $q = useQuasar();
 const selected = ref<ResponseItems[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
+/** คอลัมน์ */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -70,6 +72,7 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** คอลัมน์ที่แสดง */
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
@@ -80,6 +83,7 @@ const visibleColumns2 = ref<string[]>([
   "statustext",
 ]);
 
+/** props*/
 const props = defineProps({
   modal: Boolean,
   closeModal: Function,
@@ -88,6 +92,9 @@ const props = defineProps({
   filterKeyword2: String,
 });
 
+/**
+ * ฟังก์ชั่นการ Selected Data
+ */
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -103,6 +110,7 @@ const saveOrder = () => {
     "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
   );
 };
+
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((r) => r.id);
@@ -129,6 +137,7 @@ const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
+
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
   emit("update:filterKeyword2", "");

src/modules/06_retirement/components/DismissOrder/DismissOrder.vue

@@ -10,11 +10,11 @@ import config from "@/app.config";
 import DialogSendToCommand from "@/modules/06_retirement/components/DismissOrder/DialogSendToCommand.vue";
 import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
 
+/** use */
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const transferStore = useTransferDataStore();
-
 const {
   date2Thai,
   messageError,
@@ -24,8 +24,9 @@ const {
   dialogMessage,
 } = mixin;
 const { statusText } = transferStore;
-
 const modal = ref<boolean>(false);
+
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -35,11 +36,13 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "statustext",
 ]);
+
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
 
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const filters = ref<ResponseData[]>([]);

src/modules/06_retirement/components/DismissOrder/outRegistry.vue

@@ -3,20 +3,20 @@ 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 */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
 
+/** use */
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
 const dataId = route.params.id.toString();
 const {
   date2Thai,
@@ -27,6 +27,9 @@ const {
   success,
 } = mixin;
 
+/**
+ * กำหนดค่าตัวแปร
+ */
 const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(false);
@@ -38,7 +41,6 @@ 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: "",
@@ -56,6 +58,7 @@ const responseData = ref<ResponseDataDetail>({
   fullname: "",
 });
 
+/** Hook */
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
@@ -63,7 +66,7 @@ onMounted(async () => {
   await getData();
 });
 
-//นำข้อมูลมาแสดง
+//นำข้อมูลจาก API มาแสดง
 const getData = async () => {
   showLoader();
   await http
@@ -106,11 +109,17 @@ const getData = async () => {
     });
 };
 
+/**
+ * ฟังก์ชั่น Cancle
+ */
 const clickCancel = async () => {
   await getData();
   edit.value = false;
 };
 
+/**
+ * ฟังก์ชั่น Save
+ */
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -130,6 +139,9 @@ const conditionSave = async () => {
   }
 };
 
+/**
+ * ฟังก์ชั่น Saveจาก API
+ */
 const saveData = async () => {
   const body = {
     organization: organization.value,
@@ -157,6 +169,10 @@ const saveData = async () => {
     });
 };
 
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,

src/modules/06_retirement/components/ExitInterview/EditQuestion.vue

@@ -3,7 +3,6 @@ import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 // import keycloak from "@/plugins/keycloak";
@@ -14,10 +13,12 @@ const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const { messageError, showLoader, hideLoader,dialogConfirm ,success} = mixin;
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
 
+/**
+ * ฟอร์มคำถาม
+ */
 const myForm = ref<QForm | null>(null);
-
 // set คำถามที่ 1
 const question1Desc = ref<string>(
   "เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)"
@@ -59,7 +60,6 @@ const question3Answer = ref<any>([
   "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
   "โอกาสความก้าวหน้า",
 ]);
-
 // set คำถามที่ 4
 const question4Desc = ref<string>(
   "อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)"
@@ -82,18 +82,17 @@ const question4Answer = ref<any>([
   "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
   "โอกาสความก้าวหน้า",
 ]);
-
 // set คำถามที่ 5
 const question5Desc = ref<string>(
   "โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?"
 );
-const question5Answer = ref<any>([])
+const question5Answer = ref<any>([]);
 const question5Score = ref<number>(0);
 // set คำถามที่ 6
 const question6Desc = ref<string>(
   "ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร"
 );
-const question6Answer = ref<any>([])
+const question6Answer = ref<any>([]);
 const question6Score = ref<number>(0);
 // set คำถามที่ 7
 const question7Desc = ref<string>(
@@ -101,14 +100,12 @@ const question7Desc = ref<string>(
 );
 const question7Score = ref<number>(0);
 const question7Answer = ref<any>(["มี (ระบุ)", "ไม่มี"]);
-
 // set คำถามที่ 8
 const question8Desc = ref<string>(
   "ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
 );
 const question8Score = ref<number>(0);
 const question8Answer = ref<any>(["แนะนำ", "ไม่แนะนำ (ระบุ)"]);
-
 // set คำถามที่ 9
 const question9Desc = ref<string>(
   "หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
@@ -117,9 +114,12 @@ const question9Score = ref<number>(0);
 const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
 // set คำถามที่ 10
 const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ");
-const question10Answer = ref<any>([])
+const question10Answer = ref<any>([]);
 const question10Score = ref<number>(0);
 
+/**
+ * ตัวเลือกแบบสอบถาม(จำลอง)
+ */
 const exitFactor = ref<any>([]);
 const reasonWork = ref<any>([]);
 const adjust = ref<any>([]);
@@ -166,6 +166,9 @@ const adjust_option = ref<any>([
   // { label: "อื่น ๆ (ระบุ)  ", value: 15 },
 ]);
 
+/**
+ * HOOK
+ */
 onMounted(async () => {
   await getData();
 });
@@ -187,26 +190,26 @@ const getData = async () => {
       question8Score.value = data.question8Score ?? 0;
       question9Score.value = data.question9Score ?? 0;
       question10Score.value = data.question10Score ?? 0;
-      question1Desc.value = data.question1Desc
+      question1Desc.value = data.question1Desc;
-      question1Answer.value = data.question1Answer
+      question1Answer.value = data.question1Answer;
-      question2Desc.value = data.question2Desc
+      question2Desc.value = data.question2Desc;
-      question2Answer.value = data.question2Answer
+      question2Answer.value = data.question2Answer;
-      question3Desc.value = data.question3Desc
+      question3Desc.value = data.question3Desc;
-      question3Answer.value = data.question3Answer
+      question3Answer.value = data.question3Answer;
-      question4Desc.value = data.question4Desc
+      question4Desc.value = data.question4Desc;
-      question4Answer.value = data.question4Answer
+      question4Answer.value = data.question4Answer;
-      question5Desc.value = data.question5Desc
+      question5Desc.value = data.question5Desc;
-      question5Answer.value = data.question5Answer
+      question5Answer.value = data.question5Answer;
-      question6Desc.value = data.question6Desc
+      question6Desc.value = data.question6Desc;
-      question6Answer.value = data.question6Answer
+      question6Answer.value = data.question6Answer;
-      question7Desc.value = data.question7Desc
+      question7Desc.value = data.question7Desc;
-      question7Answer.value = data.question7Answer
+      question7Answer.value = data.question7Answer;
-      question8Desc.value = data.question8Desc
+      question8Desc.value = data.question8Desc;
-      question8Answer.value = data.question8Answer
+      question8Answer.value = data.question8Answer;
-      question9Desc.value = data.question9Desc
+      question9Desc.value = data.question9Desc;
-      question9Answer.value = data.question9Answer
+      question9Answer.value = data.question9Answer;
-      question10Desc.value = data.question10Desc
+      question10Desc.value = data.question10Desc;
-      question10Answer.value = data.question10Answer
+      question10Answer.value = data.question10Answer;
     })
     .catch((e) => {
       messageError($q, e);
@@ -216,53 +219,53 @@ const getData = async () => {
     });
 };
 
-const confirmClick = () =>{
+/**
-  dialogConfirm($q,()=>putData())
+ * ฟังก์ชั่นเช็คข้อมูลก่อนคอนเฟริม
-}
+ */
+const confirmClick = () => {
+  dialogConfirm($q, () => putData());
+};
 const putData = () => {
   const body = {
-    question1Desc:question1Desc.value,
+    question1Desc: question1Desc.value,
-    question1Score:question1Score.value,
+    question1Score: question1Score.value,
-    question1Answer:question1Answer.value,
+    question1Answer: question1Answer.value,
 
-    question2Desc:question2Desc.value,
+    question2Desc: question2Desc.value,
-    question2Score:question2Score.value,
+    question2Score: question2Score.value,
-    question2Answer:question2Answer.value,
+    question2Answer: question2Answer.value,
 
-    question3Desc:question3Desc.value,
+    question3Desc: question3Desc.value,
-    question3Score:question3Score.value,
+    question3Score: question3Score.value,
-    question3Answer:question3Answer.value,
+    question3Answer: question3Answer.value,
 
-    question4Desc:question4Desc.value,
+    question4Desc: question4Desc.value,
-    question4Score:question4Score.value,
+    question4Score: question4Score.value,
-    question4Answer:question4Answer.value,
+    question4Answer: question4Answer.value,
 
-    question5Desc:question5Desc.value,
+    question5Desc: question5Desc.value,
-    question5Score:question5Score.value,
+    question5Score: question5Score.value,
-    question5Answer:question5Answer.value,
+    question5Answer: question5Answer.value,
 
-    question6Desc:question6Desc.value,
+    question6Desc: question6Desc.value,
-    question6Score:question6Score.value,
+    question6Score: question6Score.value,
-    question6Answer:question6Answer.value,
+    question6Answer: question6Answer.value,
 
-    question7Desc:question7Desc.value,
+    question7Desc: question7Desc.value,
-    question7Score:question7Score.value,
+    question7Score: question7Score.value,
-    question7Answer:question7Answer.value,
+    question7Answer: question7Answer.value,
-
-    question8Desc:question8Desc.value,
-    question8Score:question8Score.value,
-    question8Answer:question8Answer.value,
-
-    question9Desc:question9Desc.value,
-    question9Score:question9Score.value,
-    question9Answer:question9Answer.value,
-
-    question10Desc:question10Desc.value,
-    question10Score:question10Score.value,
-    question10Answer:question10Answer.value,
 
+    question8Desc: question8Desc.value,
+    question8Score: question8Score.value,
+    question8Answer: question8Answer.value,
 
+    question9Desc: question9Desc.value,
+    question9Score: question9Score.value,
+    question9Answer: question9Answer.value,
 
+    question10Desc: question10Desc.value,
+    question10Score: question10Score.value,
+    question10Answer: question10Answer.value,
   };
   showLoader();
   http
@@ -274,9 +277,9 @@ const putData = () => {
       messageError($q, e);
     })
     .finally(async () => {
-      router.push(`/exit-Interview`)
+      router.push(`/exit-Interview`);
     });
-}
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -926,7 +929,8 @@ const putData = () => {
 
       <q-card-actions class="text-primary q-pa-md">
         <q-space />
-        <q-btn unelevated label="บันทึก" color="public" @click="confirmClick"> </q-btn>
+        <q-btn unelevated label="บันทึก" color="public" @click="confirmClick">
+        </q-btn>
       </q-card-actions>
     </q-form>
   </q-card>

src/modules/06_retirement/components/ExitInterview/exitMain.vue

@@ -5,17 +5,18 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/**Import type */
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/exitInterview";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
+/** use */
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
-
 const myForm = ref<QForm>();
-
 const {
   messageError,
   date2Thai,
@@ -25,6 +26,7 @@ const {
   dialogConfirm,
 } = mixin;
 
+/** คอลัมน์ */
 const rows = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -139,8 +141,12 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([]);
 
+/**
+ * ตัวแปร
+ */
 const dateBreak = ref<Date | null>(null);
 const daterow = ref<string | null>("");
 const id = ref<string>("");
@@ -149,6 +155,7 @@ const modal = ref<boolean>(false);
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 
+/** HOOK */
 onMounted(async () => {
   await fecthlist();
   if (columns.value) {
@@ -222,6 +229,10 @@ const saveAppoint = async () => {
   });
 };
 
+/**
+ * ฟังก์ชั่น validate DATE ไทย
+ * @param thaiDate วันที่ไทย
+ */
 const validationDate = (thaiDate: string | null) => {
   if (thaiDate && daterow.value) {
     let a = convertThaiDateToNumeric(thaiDate);
@@ -255,6 +266,9 @@ const convertThaiDateToNumeric = (thaiDate: string) => {
   const numericDate = `${year}${monthMap[month]}${day}`;
   return numericDate;
 };
+/**
+ * modal Setting
+ */
 const openModal = () => (modal.value = true);
 const closeModal = () => (modal.value = false);
 const resetFilter = () => {
@@ -278,22 +292,59 @@ const openModalCalendar = (rows: any) => {
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
           <div>
-            <q-btn color="blue-9" icon="mdi-square-edit-outline" outline @click="$router.push('/exit-Interview/edit-question')"><span class="q-pl-sm">แก้ไขคำถาม</span></q-btn>
+            <q-btn
+              color="blue-9"
+              icon="mdi-square-edit-outline"
+              outline
+              @click="$router.push('/exit-Interview/edit-question')"
+              ><span class="q-pl-sm">แก้ไขคำถาม</span></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
+          <q-input
-            debounce="300" placeholder="ค้นหา">
+            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" />
+              <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"
+          <q-select
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+            v-model="visibleColumns"
-            class="col-xs-12 col-sm-3 col-md-2" />
+            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">
+          <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">
@@ -304,64 +355,112 @@ const openModalCalendar = (rows: any) => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="no"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="fullname" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="fullname"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="realReason" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="realReason"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.realReason }}
                 </q-td>
-                <q-td key="notExitFactor" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="notExitFactor"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.notExitFactor }}
                 </q-td>
-                <q-td key="futureWork" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="futureWork"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.futureWork ? "ใช่" : "ไม่" }}
                 </q-td>
-                <q-td key="futureWorkReason" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="futureWorkReason"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.futureWorkReason }}
                 </q-td>
-                <q-td key="havejob" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="havejob"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.havejob ? "ใช่" : "ไม่" }}
                 </q-td>
 
-                <q-td key="havejobReason" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="havejobReason"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   <div class="table_ellipsis">
                     {{ props.row.havejobReason }}
                   </div>
                 </q-td>
-                <q-td key="appointDate" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="appointDate"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{
                     props.row.appointDate == null ? "-" : props.row.appointDate
                   }}
                 </q-td>
-                <q-td key="datetext" :props="props" @click="
+                <q-td
-                  router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  key="datetext"
-                  ">
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
                   {{ props.row.datetext }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn v-if="props.row.appointDate == null" icon="mdi-calendar" size="12px" color="blue-7" flat round
+                  <q-btn
-                    dense @click="openModalCalendar(props.row)">
+                    v-if="props.row.appointDate == null"
+                    icon="mdi-calendar"
+                    size="12px"
+                    color="blue-7"
+                    flat
+                    round
+                    dense
+                    @click="openModalCalendar(props.row)"
+                  >
                     <q-tooltip>วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก</q-tooltip>
                   </q-btn>
                 </q-td>
@@ -377,26 +476,48 @@ const openModalCalendar = (rows: any) => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
-        <DialogHeader title="กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก" :close="closeModal" />
+        <DialogHeader
+          title="กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก"
+          :close="closeModal"
+        />
         <q-separator />
         <q-card-section class="q-p-sm q-gutter-md bg-grey-1">
           <div class="col-xs-12 col-sm-12 col-md-12">
-            <datepicker menu-class-name="modalfix" v-model="dateBreak" :locale="'th'" autoApply :enableTimePicker="false"
+            <datepicker
-              week-start="0">
+              menu-class-name="modalfix"
+              v-model="dateBreak"
+              :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 outlined dense lazy-rules :model-value="dateBreak !== null ? date2Thai(dateBreak) : null
+                <q-input
-                    " hide-bottom-space :label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`" :rules="[
+                  outlined
-      (val) => !!val || `${'กรุณาเลือกลงวันที่'}`,
+                  dense
-      (val) =>
+                  lazy-rules
-        validationDate(val) ||
+                  :model-value="
-        `${'วันที่นัดหมายต้องมากกว่าวันที่สร้าง'}`,
+                    dateBreak !== null ? date2Thai(dateBreak) : null
-    ]">
+                  "
+                  hide-bottom-space
+                  :label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกลงวันที่'}`,
+                    (val) =>
+                      validationDate(val) ||
+                      `${'วันที่นัดหมายต้องมากกว่าวันที่สร้าง'}`,
+                  ]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>

src/modules/06_retirement/components/ExitInterview/exitRegistry.vue

@@ -4,22 +4,22 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+/**
+ * import type
+ */
 import type {
   OptionQuestions,
   OptionQuestions2,
 } from "@/modules/06_retirement/interface/request/Main";
-
+import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-
+/** use */
-import type { QForm } from "quasar";
-
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
 const dataId = route.params.id.toString();
 const {
   messageError,
@@ -30,9 +30,11 @@ const {
   dialogMessageNotify,
 } = mixin;
 
+/**
+ * ตัวแปร
+ */
 const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
-
 const Org = ref<string>("");
 const PositionLevel = ref<string>("");
 const Position = ref<string>("");
@@ -63,83 +65,14 @@ const score = reactive([
   { no: 10, score: "" },
 ]);
 const scoreTotal = ref<number | string>("");
-
 const reasonWorkOther = ref("");
-// const reasonWork_option = ref<any>([
-//   { label: "ความมั่นคงในการทำงาน ", value: 0 },
-//   { label: "สิทธิประโยชน์/สวัสดิการ", value: 1 },
-//   { label: "อัตราเงินเดือน ", value: 2 },
-//   { label: "ลักษณะงาน ", value: 3 },
-//   { label: "วัฒนธรรมการทำงานของข้าราชการ ", value: 4 },
-//   { label: "นโยบายของหน่วยงาน ", value: 5 },
-//   { label: "ระบบการทำงาน", value: 6 },
-//   { label: "สมดุลชีวิตการทำงาน ", value: 7 },
-//   { label: "บรรยากาศในการทำงาน  ", value: 8 },
-//   { label: "การพัฒนาในสายอาชีพ  ", value: 9 },
-//   { label: "โอกาสความก้าวหน้า  ", value: 10 },
-//   { label: "การได้รับการยอมรับจากสังคม  ", value: 11 },
-//   { label: "อื่น ๆ (ระบุ)  ", value: 12 },
-// ]);
 const exitFactorOther = ref("");
-// const exitFactor_option = ref<any>([
-//   { label: "อัตราเงินเดือน ", value: 0 },
-//   { label: "สวัสดิการ", value: 1 },
-//   { label: "ลักษณะงาน ", value: 2 },
-//   { label: "ระบบการทำงาน ", value: 3 },
-//   { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
-//   { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
-//   { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
-//   { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
-//   { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
-//   { label: "บรรยากาศในการทำงาน  ", value: 9 },
-//   { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
-//   { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
-//   { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
-//   { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
-//   { label: "โอกาสความก้าวหน้า  ", value: 14 },
-//   { label: "อื่น ๆ (ระบุ)  ", value: 15 },
-// ]);
 const suggestFriendsReason = ref("");
-// const suggestFriends_option = ref<any>([
-//   { label: "แนะนำ  ", value: true },
-//   { label: "ไม่แนะนำ (ระบุ)", value: false },
-// ]);
-// const timeThink_option = ref<any>([
-//   { label: "น้อยกว่า 2 สัปดาห์ ", value: 0 },
-//   { label: "1 เดือน - 3 เดือน", value: 1 },
-//   { label: "3 เดือน - 6 เดือน  ", value: 2 },
-//   { label: "6 เดือนขึ้นไป  ", value: 3 },
-// ]);
 const haveJobReason = ref<any>("");
-// const haveJob_option = ref<any>([
-//   { label: "มี  (ระบุ) ", value: true },
-//   { label: "ไม่มี", value: false },
-// ]);
 const futureWorkReason = ref<any>("");
-// const futureWork_option = ref<any>([
-//   { label: "อยาก", value: true },
-//   { label: "ไม่อยาก (ระบุ)", value: false },
-// ]);
 const adjustOther = ref("");
-// const adjust_option = ref<any>([
-//   { label: "อัตราเงินเดือน ", value: 0 },
-//   { label: "สวัสดิการ", value: 1 },
-//   { label: "ลักษณะงาน ", value: 2 },
-//   { label: "ระบบการทำงาน ", value: 3 },
-//   { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
-//   { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
-//   { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
-//   { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
-//   { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
-//   { label: "บรรยากาศในการทำงาน  ", value: 9 },
-//   { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
-//   { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
-//   { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
-//   { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
-//   { label: "โอกาสความก้าวหน้า  ", value: 14 },
-//   { label: "อื่น ๆ (ระบุ)  ", value: 15 },
-// ]);
 
+/** HOOK */
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
@@ -280,12 +213,16 @@ async function fecthquestion() {
       messageError($q, err);
     });
 }
-
+//รวมคะเเนน
 watch(score, () => {
   scoreTotal.value = score.reduce((accumulator, object) => {
     return accumulator + Number(object.score);
   }, 0);
 });
+
+/**
+ * บันทึกให้คะเเนน
+ */
 const saveClick = () => {
   if (
     comment.value === "" ||
@@ -306,6 +243,10 @@ const saveClick = () => {
     dialogConfirm($q, () => putData());
   }
 };
+
+/**
+ * ส่งคะเเนนผ่าน API
+ */
 const putData = () => {
   const body = {
     score1: Number(score[0].score),

src/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue

@@ -8,11 +8,13 @@ import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** use */
 const $q = useQuasar();
 const selected = ref<ResponseItems[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
+/** คอลัมน์ */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -70,6 +72,7 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** คอลัมน์ที่แสดง */
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
@@ -79,6 +82,7 @@ const visibleColumns2 = ref<string[]>([
   "statustext",
 ]);
 
+/** props*/
 const props = defineProps({
   modal: Boolean,
   closeModal: Function,
@@ -87,6 +91,9 @@ const props = defineProps({
   filterKeyword2: String,
 });
 
+/**
+ * ฟังก์ชั่นการ Selected Data
+ */
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -102,6 +109,7 @@ const saveOrder = () => {
     "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
   );
 };
+
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((r) => r.id);

src/modules/09_leave/components/2_Leave/DetailLeave.vue

@@ -6,7 +6,8 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
-
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogReason1 from "@/components/Dialogs/PopupReason.vue";
 const APIDATA = useLeavelistDataStoreTest();
 
 /** importType */
@@ -35,6 +36,21 @@ const router = useRouter();
 const route = useRoute();
 const paramsId = route.params.id.toString();
 
+const modalApprove = ref(false);
+const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
+const dialogTitle = ref<string>("อนุมัติ");
+const closeDialog = () => {
+  modalApprove.value = false;
+};
+
+/** ฟังก์ชั่น อัปโหลด
+ * consolelog ไว้ก่อน
+ */
+const filesUpload = ref<any>(null);
+function upLoadFile() {
+  console.log("upload", filesUpload.value);
+}
+
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremData>({
   id: "", //Id การยื่นขอลา
@@ -212,61 +228,93 @@ function checkLeaveType(type: string) {
   }
 }
 
+/** Function dialog*/
+const openModal = async (data: string) => {
+  if (data === "approve") {
+    modalApprove.value = true;
+    dialogTitle.value = "อนุมัติ";
+  }
+  if (data === "UnApprove") {
+    modalApprove.value = true;
+    dialogTitle.value = "ไม่อนุมัติ";
+  }
+};
+
 /** Function Save*/
 function clickSave() {
-  dialogConfirm(
+  if (dialogTitle.value === "อนุมัติ") {
-    $q,
+    dialogConfirm(
-    () => console.log("save"),
+      $q,
-    "ยืนยันการอนุมัติ",
+      () => console.log("save1"),
-    "ต้องการยืนยันการอนุมัติใช่หรือไม่ ?"
+      "ยืนยันอนุมัติ",
-  );
+      "ต้องการยืนยันอนุมัติใช่หรือไม่ ?"
-}
+    );
-
+    modalApprove.value = false;
-/** Function Reject*/
+    console.log("Yes");
-function clickReject() {
+  }
-  dialogConfirm(
+  if (dialogTitle.value === "ไม่อนุมัติ") {
-    $q,
+    dialogConfirm(
-    () => console.log("reject"),
+      $q,
-    "ยืนยันการดำเนินการ",
+      () => console.log("save1"),
-    "ต้องการยืนยันการดำเนินการนี้ใช่หรือไม่ ?"
+      "ยืนยันไม่อนุมัติ",
-  );
+      "ต้องการยืนยันไม่อนุมัติใช่หรือไม่ ?"
+    );
+    modalApprove.value = false;
+    console.log("NOT");
+  }
 }
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <div class="q-mr-lg">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <q-btn
+      <div class="q-mr-lg">
-        icon="mdi-arrow-left"
+        <q-btn
-        unelevated
+          icon="mdi-arrow-left"
-        round
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/leave-list`)"
+        />
+        รายละเอียดการลาของ {{ formData.fullname }}
+      </div>
+      <div>
+        <q-btn
+          icon="mdi-download"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        >
+      </div>
+      <q-space />
+      <q-file
+        v-model="filesUpload"
         dense
-        flat
+        label="อัพโหลดไฟล์"
-        color="primary"
+        outlined
-        class="q-mr-sm"
+        class="col-xs-12 col-sm-3 col-md-2"
-        @click="router.push(`/leave-list`)"
+        bg-color="white"
-      />
+        multiple
-      รายละเอียดการลาของ {{ formData.fullname }}
+        accept="application/pdf"
-    </div>
-    <div>
-      <q-btn
-        icon="mdi-download"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
       >
+        <template v-slot:prepend>
+          <q-icon name="attach_file" color="primary" />
+        </template>
+      </q-file>
       <q-btn
-        icon="mdi-upload"
+        v-if="filesUpload"
-        unelevated
-        round
-        dense
         flat
-        color="blue-10"
+        round
-        class="q-mr-sm"
+        color="primary"
-        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+        icon="mdi-arrow-up-bold"
+        @click="upLoadFile"
+        ><q-tooltip>อัปโหลด</q-tooltip></q-btn
       >
     </div>
   </div>
@@ -416,14 +464,29 @@ function clickReject() {
     </div>
     <q-separator />
     <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ" @click="clickReject"
+      <q-btn
+        unelevated
+        color="orange-5"
+        label="ไม่อนุมัติ"
+        @click="openModal('UnApprove')"
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
-      <q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"
+      <q-btn
+        unelevated
+        color="primary"
+        label="อนุมัติ"
+        @click="openModal('approve')"
         ><q-tooltip>อนุมัติ</q-tooltip>
       </q-btn>
     </div>
   </q-card>
+  <DialogReason
+    :modal="modalApprove"
+    :title="dialogTitle"
+    :click-close="closeDialog"
+    label="เหตุผล"
+    :savaForm="clickSave"
+  />
 </template>
 
 <style lang="scss" scoped>

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -219,13 +219,14 @@ watch(
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะเข้างาน</p>
-            <div class="row justify-between q-my-sm items-start">
+            <div class="justify-between q-my-sm items-start">
               <q-select
                 ref="checkInStatusRef"
                 for="checkInStatus"
                 emit-value
                 map-options
                 outlined
+                full-width
                 dense
                 v-model="SpecialTimeStore.checkInStatus"
                 :options="SpecialTimeStore.optionStatus"
@@ -242,7 +243,10 @@ watch(
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะออกงาน</p>
-            <div class="row justify-between q-my-sm items-start">
+            <div
+              class="justify-between q-my-sm items-start"
+              style="width: 100%"
+            >
               <q-select
                 ref="checkOutStatusRef"
                 for="checkOutStatus"
@@ -250,6 +254,7 @@ watch(
                 map-options
                 outlined
                 dense
+                full-width
                 v-model="SpecialTimeStore.checkOutStatus"
                 :options="SpecialTimeStore.optionStatus"
                 option-value="id"

src/modules/09_leave/views/ChangeRoundMain.vue

@@ -80,7 +80,7 @@ onMounted(() => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-mb-sm">
-      <q-card flat bordered class="bg-grey-2 col-12 q-pa-lg">
+      <q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
         <div class="text-dark col-12 text-weight-bold text-subtitle1">
           ค้นหารายชื่อ
         </div>
@@ -89,7 +89,7 @@ onMounted(() => {
             v-model="formData.cardId"
             outlined
             label="เลขบัตรประชาชน"
-            class="col-6 col-md-4 inputgreen"
+            class="col-6 col-md-4 bg-white inputgreen"
             dense
             hide-bottom-space
             maxlength="13"
@@ -98,7 +98,7 @@ onMounted(() => {
             v-model="formData.firstName"
             outlined
             label="ชื่อ"
-            class="col-5 col-md-3 inputgreen"
+            class="col-5 col-md-3 bg-white inputgreen"
             dense
             hide-bottom-space
           />
@@ -106,7 +106,7 @@ onMounted(() => {
             v-model="formData.lastName"
             outlined
             label="นามสกุล"
-            class="col-6 col-md-3 inputgreen"
+            class="col-6 col-md-3 bg-white inputgreen"
             dense
             hide-bottom-space
           />