From 4c47b6cbab6e430a8211b02b8ef7ed4f69099e22 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Wed, 18 Oct 2023 12:26:05 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ExitInterview/exitMain.vue     |  2 +-
 .../components/1_Work/DialogDetail.vue        | 56 ++++++++-----------
 src/modules/09_leave/views/LeaveListMain.vue  | 25 ++++-----
 3 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/src/modules/06_retirement/components/ExitInterview/exitMain.vue b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
index bb2a74ce4..a5f1c42aa 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitMain.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@@ -278,7 +278,7 @@ const openModalCalendar = (rows: any) => {
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
           <div>
-            <q-btn color="info" @click="$router.push('/exit-Interview/edit-question')">แก้ไขคำถาม</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
diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index 7d866964e..b851b4476 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@@ -42,9 +42,8 @@ function colsePopup() {
 <template>
   <q-dialog v-model="props.modal">
     <q-card style="width: 950px; max-width: 80vw">
-      <q-card-section>
         <q-toolbar>
-          <q-toolbar-title>
+          <q-toolbar-title class="text-subtitle1 text-weight-bold">
             <span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
             <span class="text-primary">{{ titlename }}</span>
           </q-toolbar-title>
@@ -57,22 +56,19 @@ function colsePopup() {
             @click="colsePopup"
           />
         </q-toolbar>
-      </q-card-section>
       <q-separator />
-      <q-card-section class="q-pt-none">
+      <q-card-section class="q-pa-none">
         <div class="q-pa-md">
-          <q-banner
-            inline-actions
-            rounded
-            class="bg-grey-2"
-            style="border: 2px solid rgb(239, 236, 236)"
+          <q-card
+            bordered
+            class="q-pa-sm bg-grey-1"
           >
             <div class="row">
               <div class="col-4">
                 <q-list>
                   <q-item>
                     <q-item-section>
-                      <q-item-label class="text-grey-5"
+                      <q-item-label class="text-grey-8"
                         >ชื่อ-นามสกุล</q-item-label
                       >
                       <q-item-label>{{ titlename }}</q-item-label>
@@ -83,7 +79,7 @@ function colsePopup() {
               <div class="col-4">
                 <q-item>
                   <q-item-section>
-                    <q-item-label class="text-grey-5">
+                    <q-item-label class="text-grey-8">
                       วันที่เข้างาน</q-item-label
                     >
                     <q-item-label>05 ต.ค. 56</q-item-label>
@@ -93,12 +89,12 @@ function colsePopup() {
               <div class="col-3">
                 <q-item>
                   <q-item-section>
-                    <q-item-label class="text-grey-5">สถานะ</q-item-label>
+                    <q-item-label class="text-grey-8">สถานะ</q-item-label>
                     <q-item-label>{{ status }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </div>
-              <div class="col">
+              <div class="col row items-center">
                 <q-btn
                   v-if="!statusEdit"
                   dense
@@ -106,8 +102,7 @@ function colsePopup() {
                   round
                   color="primary"
                   icon="mdi-pencil"
-                  size="sm"
-                  class="q-mt-lg"
+                  size="12px"
                   @click="statusEdit = true"
                 >
                   <q-tooltip>แก้ไข</q-tooltip>
@@ -119,8 +114,7 @@ function colsePopup() {
                     round
                     color="red"
                     icon="mdi-undo"
-                    size="sm"
-                    class="q-mt-lg"
+                    size="12px"
                     @click="statusEdit = false"
                   >
                     <q-tooltip>ยกเลิก</q-tooltip>
@@ -131,30 +125,29 @@ function colsePopup() {
                     round
                     color="secondary"
                     icon="save"
-                    size="sm"
-                    class="q-mt-lg"
+                    size="12px"
+                    class="q-ml-sm"
                   >
                     <q-tooltip>บันทึกข้อมูล</q-tooltip>
                   </q-btn>
                 </div>
               </div>
             </div>
-          </q-banner>
-          <div class="row q-gutter-md q-mt-md">
+          </q-card>
+          <div class="row q-gutter-md q-pt-md">
             <div class="col">
               <q-card flat bordered>
-                <q-card-section>
                   <div class="q-pa-md q-gutter-md">
                     <div class="row">
-                      <div class="col text-grey-6">เวลาเข้างาน</div>
+                      <div class="col text-grey-8">เวลาเข้างาน</div>
                       <div class="col">{{ timeIn }}</div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">พิกัด</div>
+                      <div class="col text-grey-8">พิกัด</div>
                       <div class="col">{{ coordinatesIn }}</div>
                     </div>
                     <div class="row">
-                      <div class="col-6 text-grey-6">รูปภาพ</div>
+                      <div class="col-6 text-grey-8">รูปภาพ</div>
                       <div class="col-5">
                         <q-img
                           style="
@@ -167,27 +160,25 @@ function colsePopup() {
                       </div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">หมายเหตุ</div>
+                      <div class="col text-grey-8">หมายเหตุ</div>
                       <div class="col">-</div>
                     </div>
                   </div>
-                </q-card-section>
               </q-card>
             </div>
             <div class="col">
               <q-card flat bordered>
-                <q-card-section>
                   <div class="q-pa-md q-gutter-md">
                     <div class="row">
-                      <div class="col text-grey-6">เวลาออกงาน</div>
+                      <div class="col text-grey-8">เวลาออกงาน</div>
                       <div class="col">{{ timeOut }}</div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">พิกัด</div>
+                      <div class="col text-grey-8">พิกัด</div>
                       <div class="col">{{ coordinatesOut }}</div>
                     </div>
                     <div class="row">
-                      <div class="col-6 text-grey-6">รูปภาพ</div>
+                      <div class="col-6 text-grey-8">รูปภาพ</div>
                       <div class="col-5">
                         <q-img
                           style="
@@ -200,11 +191,10 @@ function colsePopup() {
                       </div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">หมายเหตุ</div>
+                      <div class="col text-grey-8">หมายเหตุ</div>
                       <div class="col">-</div>
                     </div>
                   </div>
-                </q-card-section>
               </q-card>
             </div>
           </div>
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index c184af5e1..17dda82c2 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -51,28 +51,28 @@ function changTab() {
   <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
   <div>
     <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
-    <div class="q-pa-md">
+    <q-card bordered flat >
       <q-tabs
         v-model="leaveStore.tab"
         dense
         align="left"
         inline-label
-        class="bg-grey-4 rounded-borders"
-        indicator-color="white"
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
       >
         <q-tab
           @click="changTab"
           name="1"
           label="รายการลาที่อยู่ระหว่างดำเนิดการ"
-          :class="
-            leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders	' : ''
-          "
+          
         >
           <q-badge
             color="grey-4"
             :class="
               leaveStore.tab == '1'
-                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
                 : 'q-px-sm text-weight-medium text-black q-ml-xl'
             "
             :label="leaveStore.amounttab1"
@@ -83,17 +83,13 @@ function changTab() {
           @click="changTab"
           name="2"
           label="รายการลาทั้งหมด"
-          :class="
-            leaveStore.tab == '2'
-              ? 'bg-white text-primary rounded rounded-borders	'
-              : ''
-          "
+          
         >
           <q-badge
             color="grey-4"
             :class="
               leaveStore.tab == '2'
-                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
                 : 'q-px-sm text-weight-medium text-black q-ml-xl'
             "
             :label="leaveStore.amounttab2"
@@ -101,6 +97,7 @@ function changTab() {
           />
         </q-tab>
       </q-tabs>
+      <q-separator />
 
       <q-tab-panels v-model="leaveStore.tab" animated>
         <q-tab-panel name="1">
@@ -113,8 +110,8 @@ function changTab() {
           <TableList />
         </q-tab-panel>
       </q-tab-panels>
-    </div>
     <!-- </q-card> -->
+    </q-card>
   </div>
 </template>