From 7f0d20f29b01ec8c7a9cf25ea723bf8bf24464c4 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Wed, 25 Oct 2023 10:38:26 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/2_Leave/DetailLeave.vue        | 204 +++++++++---------
 .../components/5_Report/MainPage.vue          |   8 +-
 2 files changed, 100 insertions(+), 112 deletions(-)

diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 92921248b..155ad2055 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -7,7 +7,7 @@ const paramsId = route.params.id;
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <div class="q-mr-xl">
+    <div class="q-mr-lg">
       <q-btn
         icon="mdi-arrow-left"
         unelevated
@@ -43,127 +43,117 @@ const paramsId = route.params.id;
       >
     </div>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="q-pa-md">
-      <q-banner inline-actions rounded class="bg-grey-2">
-        <div class="row q-gutter-md">
-          <div class="col">
-            <div class="column justify-center" style="height: 80px">
-              <div class="col-4">
-                <div class="row">
-                  <div class="col-2 text-grey-5">ประเภทการลา</div>
-                  <div class="col text-primary">ลาป่วย</div>
-                </div>
+  <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>
               </div>
-              <div class="col-4">
-                <div class="row">
-                  <div class="col-2 text-grey-5">ชื่อ - นามสกุล</div>
-                  <div class="col">{{ paramsId }}</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>
+                  </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>
+                  </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>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="col">
-            <div class="row q-gutter-md">
-              <div class="col">
-                <q-card>
-                  <q-card-section>
-                    <div class="text-h6 text-weight-bold text-blue-10">10</div>
-                    <div class="text-subtitle2">โควต้าลาป่วย</div>
-                  </q-card-section>
-                </q-card>
-              </div>
-              <div class="col">
-                <q-card>
-                  <q-card-section>
-                    <div class="text-h6 text-weight-bold text-light-blue-6">
-                      8
-                    </div>
-                    <div class="text-subtitle2">ลาป่วยไปแล้ว</div>
-                  </q-card-section>
-                </q-card>
-              </div>
-              <div class="col">
-                <q-card>
-                  <q-card-section>
-                    <div class="text-h6 text-weight-bold text-indigo-7">2</div>
-                    <div class="text-subtitle2">คงเหลือโควต้าลาป่วย</div>
-                  </q-card-section>
-                </q-card>
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-banner>
-      <div class="row q-gutter-md q-mt-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-5">เขียนที่</div>
-                  <div class="col">บ้าน</div>
-                </div>
-                <div class="row">
-                  <div class="col text-grey-5">รับเงินเดือน</div>
-                  <div class="col">รับเงินเดือน</div>
-                </div>
-                <div class="row">
-                  <div class="col text-grey-5">เขียนที่</div>
-                  <div class="col">บ้าน</div>
-                </div>
-                <div class="row">
-                  <div class="col text-grey-5">รับเงินเดือน</div>
-                  <div class="col">รับเงินเดือน</div>
-                </div>
-                <div class="row">
-                  <div class="col text-grey-5">วัน เดือน ปีเริ่มต้น</div>
-                  <div class="col">14 ก.ค. 2556</div>
-                </div>
-                <div class="row">
-                  <div class="col text-grey-5">วัน เดือน ปีเริ่มสิ้นสุด</div>
-                  <div class="col">15 ก.ค. 2556</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-5">จำนวนวันที่ลา</div>
-                  <div class="col">1</div>
+        <div class="row q-col-gutter-md col-12">
+          <div class="col-xs-12 col-sm-6 row">
+            <q-card flat bordered class="col-12">
+              <q-card-section>
+                <div class="q-pa-md q-gutter-md">
+                  <div class="row">
+                    <div class="col text-grey-8">เขียนที่</div>
+                    <div class="col">บ้าน</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">รับเงินเดือน</div>
+                    <div class="col">รับเงินเดือน</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">เขียนที่</div>
+                    <div class="col">บ้าน</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">รับเงินเดือน</div>
+                    <div class="col">รับเงินเดือน</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">วัน เดือน ปีเริ่มต้น</div>
+                    <div class="col">14 ก.ค. 2556</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">วัน เดือน ปีเริ่มสิ้นสุด</div>
+                    <div class="col">15 ก.ค. 2556</div>
+                  </div>
                 </div>
-                <div class="row">
-                  <div class="col text-grey-5">สถานที่ติดต่อขณะลา</div>
-                  <div class="col">สถานที่ติดต่อขณะลา</div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-6 row">
+            <q-card flat bordered class="col-12">
+              <q-card-section>
+                <div class="q-pa-md q-gutter-md">
+                  <div class="row">
+                    <div class="col text-grey-8">จำนวนวันที่ลา</div>
+                    <div class="col">1</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">สถานที่ติดต่อขณะลา</div>
+                    <div class="col">สถานที่ติดต่อขณะลา</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+                    <div class="col">095-123467</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">สถานะการพิจารณา</div>
+                    <div class="col">ขอยกเลิก</div>
+                  </div>
+                  <div class="row">
+                    <div class="col text-grey-8">เอกสารแบบ</div>
+                    <div class="col ">ไม่พบเอกสาร</div>
+                  </div>
                 </div>
-                <div class="row">
-                  <div class="col text-grey-5">หมายเลขที่ติดต่อขณะลา</div>
-                  <div class="col">095-123467</div>
-                </div>
-                <div class="row">
-                  <div class="col text-grey-5">สถานะการพิจารณา</div>
-                  <div class="col">ขอยกเลิก</div>
-                </div>
-                <div class="row">
-                  <div class="col-12 font-size">เอกสารแบบ</div>
-                  <div class="col-12 q-mt-sm text-grey-5">ไม่พบเอกสาร</div>
-                </div>
-              </div>
-            </q-card-section>
-          </q-card>
+              </q-card-section>
+            </q-card>
+          </div>
         </div>
       </div>
     </div>
     <q-separator />
     <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn color="orange-5" label="ไม่อนุมัติ"
+      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ"
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
-      <q-btn color="primary" label="อนุมัติ"
+      <q-btn unelevated color="primary" label="อนุมัติ"
         ><q-tooltip>อนุมัติ</q-tooltip>
       </q-btn>
     </div>
diff --git a/src/modules/11_discipline/components/5_Report/MainPage.vue b/src/modules/11_discipline/components/5_Report/MainPage.vue
index 142233bc7..6fbf0a194 100644
--- a/src/modules/11_discipline/components/5_Report/MainPage.vue
+++ b/src/modules/11_discipline/components/5_Report/MainPage.vue
@@ -11,13 +11,12 @@ const nextPage = (type: string, title: string) => {
 
 <template>
   <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 " >
-        <div class="q-px-lg q-py-sm" style="border: 1px solid #e6e6e6; border-radius: 5px;">
-          <q-item
+      <div class="q-pa-md">
+        <q-item
           clickable
           @click="
             nextPage(
@@ -130,7 +129,6 @@ const nextPage = (type: string, title: string) => {
             รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง
           </q-item-section>
         </q-item>
-        </div>
        
       </div>
     </q-card>