ปรับข้อความและ layout หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ

src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue

@@ -12,7 +12,7 @@ function closeDialog() {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" full-width>
       <Header
         tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
         :close="closeDialog"
@@ -20,15 +20,18 @@ function closeDialog() {
       <q-separator />
       <q-card-section>
         <div class="q-pa-md">
-          <q-markup-table :separator="separator" flat bordered>
+          <q-markup-table
+            :separator="separator"
+            flat
+            bordered
+            class="custom-header-table"
+          >
             <thead>
               <tr>
-                <th class="text-center w-25 fw-head">
-                  หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ
-                </th>
-                <th class="text-center w-25 fw-head">หนึ่งขั้น</th>
-                <th class="text-center w-25 fw-head">ครึ่งขั้น</th>
-                <th class="text-center w-25 fw-head">ไม่ได้รับการเลื่อนขั้น</th>
+                <th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
+                <th class="text-center">หนึ่งขั้น</th>
+                <th class="text-center">ครึ่งขั้น</th>
+                <th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
               </tr>
             </thead>
             <tbody>
@@ -36,13 +39,13 @@ function closeDialog() {
               <tr>
                 <td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
                 <td class="text-center">
-                  <span>ผลการประเมินผลในระดับดีเด่น<br />(90-100%)</span>
+                  ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
                 </td>
                 <td class="text-center">
-                  <span>ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)</span>
+                  ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
                 </td>
                 <td class="text-center">
-                  <span>ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)</span>
+                  ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
                 </td>
               </tr>
 
@@ -54,10 +57,7 @@ function closeDialog() {
                 <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
                 <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
                 <td class="text-center">
-                  <span
-                    >น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา
-                    ฝึกอบรมดูงาน)</span
-                  >
+                  น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
                 </td>
               </tr>
 
@@ -65,13 +65,13 @@ function closeDialog() {
               <tr>
                 <td class="text-left">3. การลงโทษทางวินัย</td>
                 <td class="text-center">
-                  <span>ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์</span>
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
                 </td>
                 <td class="text-center">
-                  <span>ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์</span>
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
                 </td>
                 <td class="text-center">
-                  <span>ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์</span>
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
                 </td>
               </tr>
 
@@ -80,10 +80,10 @@ function closeDialog() {
                 <td class="text-left">4. พักราชการ</td>
                 <td class="text-center">ไม่ถูกสั่งพักราชการ</td>
                 <td class="text-center">
-                  <span>ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน</span>
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
                 </td>
                 <td class="text-center">
-                  <span>ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน</span>
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
                 </td>
               </tr>
 
@@ -97,54 +97,48 @@ function closeDialog() {
 
               <!-- ข้อ6 -->
               <tr class="vertical-top">
-                <td class="text-left ">6. วันลา</td>
+                <td class="text-left">6. วันลา</td>
                 <td class="text-left">
-                  <span class="txt-under"
-                    >ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5</span
-                  >
-                  <br />
-                  <span>(นับเฉพาะการลาป่วยลากิจ)</span>
-                  <br />
-                  <span class="text-bold">ยกเว้น</span>
-                  <span>
-                    <br/>
+                  <p class="q-mb-none txt-under">
+                    ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
                     - ลาอุปสมบท
-                    <br/>
+                    <br />
                     - ลาคลอดบุคร (ไม่เกิน 90 วัน)
-                    <br/>
-                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br/>ไม่ว่าคราวเดียวหรือหลายคราว รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
-                  </span>
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
                 </td>
                 <td class="text-left">
-                  <span class="txt-under"
-                    >ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5</span
-                  >
-                  <br />
-                  <span>(นับเฉพาะการลาป่วยลากิจ)</span>
-                  <br />
-                  <span class="text-bold">ยกเว้น</span>
-                  <span>
-                    <br/>
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
                     - ลาอุปสมบท
-                    <br/>
+                    <br />
                     - ลาคลอดบุคร (ไม่เกิน 90 วัน)
-                    <br/>
-                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br/>ไม่ว่าคราวเดียวหรือหลายคราว รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
-                  </span>
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
                 </td>
                 <td class="text-left">
-                  <span class="txt-under"
-                    >ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23</span
-                  >
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p>(นับเฉพาะการลาป่วยลากิจ)</p>
                   <br />
-                  <span>(นับเฉพาะการลาป่วยลากิจ)</span>
-                  <span>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <br/>
-                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br/>ไม่ว่าคราวเดียวหรือหลายคราว รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
-                  </span>
+                  <br />
+                  <p class="q-mb-none">
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
                 </td>
               </tr>
             </tbody>
@@ -156,15 +150,11 @@ function closeDialog() {
 </template>
 
 <style lang="scss" scoped>
-.w-25 {
-  width: 25%;
-}
-
-.fw-head {
-  font-size: 16px;
-}
-
 .txt-under {
   text-decoration: underline;
 }
+
+.q-table th {
+  font-size: 14px !important;
+}
 </style>