From bf1b13522f016f27679aef39041f69da76e912f9 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 3 Nov 2023 17:54:28 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20UI-=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=A3=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=8E=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=89=E0=B9=83=E0=B8=8A=E0=B9=89=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/2_Leave/DetailLeave.vue        | 75 +++++++++++-----
 .../09_leave/interface/request/changeRound.ts |  9 +-
 .../09_leave/interface/response/round.ts      |  1 +
 .../09_leave/stores/ChangeRoundStore.ts       | 56 ++++++------
 .../09_leave/views/ChangeRoundMain.vue        | 89 +++++++++++++------
 5 files changed, 155 insertions(+), 75 deletions(-)

diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 155ad2055..3131c66b8 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -1,9 +1,21 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
 const paramsId = route.params.id;
+
+function clickSave() {
+  dialogConfirm($q, () => saveData());
+}
+function saveData() {
+  console.log("save");
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -43,40 +55,63 @@ const paramsId = route.params.id;
       >
     </div>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm ">
-    <div class="col-12 row q-py-md q-pl-md ">
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="col-12 row q-py-md q-pl-md">
       <div class="col-12 q-col-gutter-md">
         <div class="row col-12">
           <q-card bordered class="bg-grey-1 q-pa-md col-12">
             <div class="row q-col-gutter-md col-12">
               <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
-                  <div class="col-12 row">
-                      <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                      <div class="col text-primary">ลาป่วย</div>
-                  </div>
-                  <div class="col-12 row">
-                      <div class="col-xs-5 col-sm-3 text-grey-8">ชื่อ - นามสกุล</div>
-                      <div class="col text-weight-medium">{{ paramsId }}</div>
+                <div class="col-12 row">
+                  <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
+                  <div class="col text-primary">ลาป่วย</div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-xs-5 col-sm-3 text-grey-8">
+                    ชื่อ - นามสกุล
                   </div>
+                  <div class="col text-weight-medium">{{ paramsId }}</div>
+                </div>
               </div>
               <div class="col-xs-12 col-sm-7 row">
                 <div class="row col-12 q-gutter-md">
                   <div class="col row">
-                    <q-card bordered class="col-12 items-center row q-px-md q-py-sm">
-                        <div class="text-h6 text-weight-bold text-blue-10">10</div>
-                        <div class="col-12 text-subtitle2  text-weight-regular">โควต้า<span class="gt-xs">ลาป่วย</span></div>
+                    <q-card
+                      bordered
+                      class="col-12 items-center row q-px-md q-py-sm"
+                    >
+                      <div class="text-h6 text-weight-bold text-blue-10">
+                        10
+                      </div>
+                      <div class="col-12 text-subtitle2 text-weight-regular">
+                        โควต้า<span class="gt-xs">ลาป่วย</span>
+                      </div>
                     </q-card>
                   </div>
                   <div class="col">
-                    <q-card bordered class="col-12 items-center row q-px-md q-py-sm">
-                        <div class="text-h6 text-weight-bold text-light-blue-6">8</div>
-                        <div class="col-12 text-subtitle2 text-weight-regular">ลา<span class="gt-xs">ป่วยไป</span>แล้ว</div>
+                    <q-card
+                      bordered
+                      class="col-12 items-center row q-px-md q-py-sm"
+                    >
+                      <div class="text-h6 text-weight-bold text-light-blue-6">
+                        8
+                      </div>
+                      <div class="col-12 text-subtitle2 text-weight-regular">
+                        ลา<span class="gt-xs">ป่วยไป</span>แล้ว
+                      </div>
                     </q-card>
                   </div>
                   <div class="col">
-                    <q-card bordered class="col-12 items-center row q-px-md q-py-sm">
-                        <div class="text-h6 text-weight-bold text-indigo-7">2</div>
-                        <div class="col-12 text-subtitle2 text-weight-regular">คงเหลือ<span class="gt-xs">โควต้า</span></div>
+                    <q-card
+                      bordered
+                      class="col-12 items-center row q-px-md q-py-sm"
+                    >
+                      <div class="text-h6 text-weight-bold text-indigo-7">
+                        2
+                      </div>
+                      <div class="col-12 text-subtitle2 text-weight-regular">
+                        คงเหลือ<span class="gt-xs">โควต้า</span>
+                      </div>
                     </q-card>
                   </div>
                 </div>
@@ -139,7 +174,7 @@ const paramsId = route.params.id;
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">เอกสารแบบ</div>
-                    <div class="col ">ไม่พบเอกสาร</div>
+                    <div class="col">ไม่พบเอกสาร</div>
                   </div>
                 </div>
               </q-card-section>
@@ -153,7 +188,7 @@ const paramsId = route.params.id;
       <q-btn unelevated color="orange-5" label="ไม่อนุมัติ"
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
-      <q-btn unelevated color="primary" label="อนุมัติ"
+      <q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"
         ><q-tooltip>อนุมัติ</q-tooltip>
       </q-btn>
     </div>
diff --git a/src/modules/09_leave/interface/request/changeRound.ts b/src/modules/09_leave/interface/request/changeRound.ts
index 2e7ab8869..dc904b4f8 100644
--- a/src/modules/09_leave/interface/request/changeRound.ts
+++ b/src/modules/09_leave/interface/request/changeRound.ts
@@ -14,8 +14,15 @@ interface MyObjectRoundChangeRef {
     effectiveDate: object | null
     [key: string]: any;
 }
+interface MyObjectRoundChangeMainRef {
+    cardId:object|null
+    firstName:object|null
+    lastName:object|null
+    [key: string]: any;
+}
 export type {
     dataPost,
     changeRoundEdit,
-    MyObjectRoundChangeRef
+    MyObjectRoundChangeRef,
+    MyObjectRoundChangeMainRef
 }
\ No newline at end of file
diff --git a/src/modules/09_leave/interface/response/round.ts b/src/modules/09_leave/interface/response/round.ts
index 402b5f92e..d1e80380e 100644
--- a/src/modules/09_leave/interface/response/round.ts
+++ b/src/modules/09_leave/interface/response/round.ts
@@ -9,6 +9,7 @@ interface dataRowRound {
     am: string
     amOut: string
     pm: string
+    note:string
     pmOut: string
     status: boolean
     isDefault: boolean
diff --git a/src/modules/09_leave/stores/ChangeRoundStore.ts b/src/modules/09_leave/stores/ChangeRoundStore.ts
index f6577f12a..78b433bf5 100644
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { ref, reactive } from "vue";
 import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
+import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -112,15 +113,6 @@ export const useChangeRoundDataStore = defineStore(
                 roundEnd: "11:00",
                 effectiveDate: new Date("2023-11-01T03:08:43.217"),
             },
-            {
-                cardId: '3514210651232',
-                prefix: "นางสาว",
-                firstName: "กัณฐิมา",
-                lastName: "กาฬสินธุ์",
-                roundStart: "13:00",
-                roundEnd: "16:00",
-                effectiveDate: new Date("2023-11-01T03:08:43.217"),
-            },
             {
                 cardId: '1231231231234',
                 prefix: "นายสาว",
@@ -148,27 +140,35 @@ export const useChangeRoundDataStore = defineStore(
             rowsHistory.value = datalistHistory;
         }
 
-        function fetchDataForCardId(cardId: string, check: string) {
-            if (cardId.length === 13) {
-                const data = dataList.filter((e) => e.cardId === cardId);
-                rows.value = data.map((e) => ({
-                    cardId: e.cardId,
-                    prefix: e.prefix,
-                    firstName: e.firstName,
-                    lastName: e.lastName,
-                    fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
-                    roundStart: e.roundStart,
-                    roundEnd: e.roundEnd,
-                    currentRound: `${e.roundStart}-${e.roundEnd}`,
-                    effectiveDate: date2Thai(e.effectiveDate),
+        function fetchDataForCardId(dataDetail: any, check: string) {
+            if (dataDetail) {
+              const filteredData = dataList.filter((e) => {
+                return (!dataDetail.cardId || e.cardId === dataDetail.cardId) &&
+                       (!dataDetail.firstName || e.firstName === dataDetail.firstName) &&
+                       (!dataDetail.lastName || e.lastName === dataDetail.lastName);
+              });
+          
+              if (filteredData.length > 0) {
+                checkCilck.value = false;
+                rows.value = filteredData.map((e) => ({
+                  cardId: e.cardId,
+                  prefix: e.prefix,
+                  firstName: e.firstName,
+                  lastName: e.lastName,
+                  fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
+                  roundStart: e.roundStart,
+                  roundEnd: e.roundEnd,
+                  currentRound: `${e.roundStart}-${e.roundEnd}`,
+                  effectiveDate: date2Thai(e.effectiveDate),
                 }));
-            } else if (cardId === 'null') {
-                rows.value = []
-                checkCilck.value = false
-            } else if (check === 'click') {
-                checkCilck.value = true
+              } else {
+                rows.value = [];
+                console.log(3);
+                checkCilck.value = true;
+              }
             }
-        }
+          }
+          
 
 
         return {
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index d77d5abbd..877e3adb7 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -6,6 +6,10 @@ import type { dataPost } from "@/modules/09_leave/interface/request/changeRound"
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
 import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
 import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+import { useCounterMixin } from "@/stores/mixin";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai ,dialogMessageNotify} = mixin;
 const dataStore = useChangeRoundDataStore();
 const modal = ref<boolean>(false);
 const editCheck = ref<string>("");
@@ -16,10 +20,7 @@ const formData = reactive<dataPost>({
   lastName: "",
 });
 
-
-
 function Openmodal(check: string, detail: any) {
-  console.log(detail);
   DataRow.value = detail;
   modal.value = true;
   editCheck.value = check;
@@ -27,15 +28,47 @@ function Openmodal(check: string, detail: any) {
 function closeDialog() {
   modal.value = false;
 }
-async function  searchcardid(){
-  const data = await dataStore.dataList.find((e) => e.cardId === formData.cardId)
-  if(data){
-    formData.firstName = data.firstName
-    formData.lastName = data.lastName
-  } else if(!data){
-    formData.firstName = ''
-    formData.lastName = ''
-    dataStore.fetchDataForCardId('null','notClick')
+async function searchcardid(type:string) {
+  // if (type === "card") {
+  //   // const data = await dataStore.dataList.find(
+  //   //   (e) => e.cardId === formData.cardId
+  //   // );
+  //   // if (data) {
+  //   //   formData.firstName = data.firstName;
+  //   //   formData.lastName = data.lastName;
+  //   // } else if (!data) {
+  //     formData.firstName = "";
+  //     formData.lastName = "";
+  //   // }
+  // } else if (type === "firstName") {
+  //   // const data = await dataStore.dataList.find(
+  //   //   (e) => e.firstName === formData.firstName
+  //   // );
+  //   // if (data) {
+  //   //   formData.cardId = data.cardId;
+  //   //   formData.lastName = data.lastName;
+  //   // } else if (!data) {
+  //     formData.cardId = "";
+  //     formData.lastName = "";
+  //   // }
+  // } else if (type === "lastName") {
+  //   // const data = await dataStore.dataList.find(
+  //   //   (e) => e.lastName === formData.lastName
+  //   // );
+  //   // if (data) {
+  //   //   formData.firstName = data.firstName;
+  //   //   formData.cardId = data.cardId;
+  //   // } else if (!data) {
+  //     formData.firstName = "";
+  //     formData.cardId = "";
+  //   // }
+  // }
+}
+function searchData(){
+  if(formData.cardId||formData.firstName||formData.lastName){
+    dataStore.fetchDataForCardId(formData, 'click')
+  }else{
+    dialogMessageNotify($q,'กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง')
   }
 }
 onMounted(() => {
@@ -72,44 +105,49 @@ onMounted(() => {
             v-model="formData.cardId"
             outlined
             label="เลขบัตรประชาชน"
-            class="bg-white col-6 col-md-4 inputgreen"
+            class=" col-6 col-md-4 inputgreen"
             dense
+            hide-bottom-space
             maxlength="13"
-            @keyup="searchcardid"
+            @keyup="searchcardid('card')"
           />
           <q-input
             v-model="formData.firstName"
             outlined
-            readonly
             label="ชื่อ"
-            class="bg-white col-5 col-md-3 inputgreen"
+            class=" col-5 col-md-3 inputgreen"
             dense
+            hide-bottom-space
+            @keyup="searchcardid('firstName')"
           />
           <q-input
             v-model="formData.lastName"
             outlined
-            readonly
             label="นามสกุล"
-            class="bg-white col-6 col-md-3 inputgreen"
+            class=" col-6 col-md-3 inputgreen"
             dense
+            hide-bottom-space
+            @keyup="searchcardid('lastName')"
           />
           <q-btn
-            @click="
-              dataStore.fetchDataForCardId(formData.cardId,'click')
-            "
+            @click="searchData"
             for="#search"
             dense
-            :disabled="!formData.cardId"
             unelevated
             color="primary"
             class="q-px-sm col-5 col-md-1"
-            >ค้นหา</q-btn
+            style="max-height: 40px;">ค้นหา</q-btn
           >
         </div>
       </q-card>
     </div>
-    <div v-if="formData.cardId && dataStore.checkCilck === true">
-      <q-card flat bordered class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold">ไม่พบข้อมูลบัตรประชาชนนี้</q-card>
+    <div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
+      <q-card
+        flat
+        bordered
+        class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
+        >ไม่พบข้อมูล</q-card
+      >
     </div>
     <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
       <d-table
@@ -123,7 +161,6 @@ onMounted(() => {
         dense
         class="custom-header-table"
         :visible-columns="dataStore.visibleColumns"
-
       >
         <template v-slot:header="props">
           <q-tr :props="props">