From 0bc64c763c27ad7bf898371a4067ed4bcc4d46ba Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Sat, 29 Jun 2024 16:40:58 +0700
Subject: [PATCH] =?UTF-8?q?=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=20=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A2=20layout=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=81?=
 =?UTF-8?q?=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

---
 .../05_leave/components/DialogDetail.vue      | 214 +++++++++---------
 1 file changed, 111 insertions(+), 103 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 350e67a..acb3c49 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -431,7 +431,10 @@ watch(
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card v-if="props.leaveStatus != 'DELETE'">
+    <q-card
+      v-if="props.leaveStatus != 'DELETE'"
+      style="width: 900px; max-width: 80vw"
+    >
       <DialogHeader
         :tittle="`${titleMain} ${titleName}`"
         :close="props.onClickClose"
@@ -439,117 +442,122 @@ watch(
 
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div
-          flat
-          :class="
-            props.leaveStatus === 'CANCEL' ? 'col-xs-12 col-sm-6' : 'col-12'
-          "
-        >
-          <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-          <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
-
-          <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-          <FormChildbirth
-            v-else-if="checkForm === 'FormChildbirth'"
-            :data="formData"
-          />
-
-          <!-- ลาพักผ่อน -->
-          <FormHoliday
-            v-else-if="checkForm === 'FormHoliday'"
-            :data="formData"
-          />
-
-          <!-- ลาอุปสมบท -->
-          <FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
-
-          <!-- ลาประกอบพิธีฮัจญ์ -->
-          <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
-
-          <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-          <FormCheckSelect
-            v-else-if="checkForm === 'FormCheckSelect'"
-            :data="formData"
-          />
-
-          <!-- ลาไปศึกษา -->
-          <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
-
-          <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-          <FormLeaveToTraining
-            v-else-if="checkForm === 'FormLeaveToTraining'"
-            :data="formData"
-          />
-
-          <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-          <FormLeaveToWorkInternational
-            v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-            :data="formData"
-          />
-
-          <!-- ลาติดตามคู่สมรส -->
-          <FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
-
-          <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-          <FormVocationalRehabilitation
-            v-else-if="checkForm === 'FormVocationalRehabilitation'"
-            :data="formData"
-          />
-        </div>
-
-        <div
-          flat
-          class="col-xs-12 col-sm-6 q-pa-sm q-gutter-sm"
-          v-if="props.leaveStatus === 'CANCEL'"
-        >
-          <q-input
-            ref="writeAtRef"
-            v-model="formDelete.writeAt"
-            label="เขียนที่"
-            :rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
-            lazy-rules
-            hide-bottom-space
-            outlined
-            dense
-          />
-          <q-input
-            ref="reasonRef"
-            v-model="formDelete.reason"
-            type="textarea"
-            label="กรอกเหตุผล"
-            :rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
-            hide-bottom-space
-            lazy-rules
-            outlined
-            dense
-          />
-          <q-file
-            ref="docRef"
-            outlined
-            v-model="formDelete.doc"
-            label="เลือกไฟล์เอกสารหลักฐาน"
-            :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
-            hide-bottom-space
-            lazy-rules
-            use-chips
-            dense
+      <q-card-section>
+        <div class="row">
+          <div
+            flat
+            :class="
+              props.leaveStatus === 'CANCEL' ? 'col-xs-12 col-sm-6' : 'col-12'
+            "
           >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" />
-            </template>
-          </q-file>
+            <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+            <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+
+            <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+            <FormChildbirth
+              v-else-if="checkForm === 'FormChildbirth'"
+              :data="formData"
+            />
+
+            <!-- ลาพักผ่อน -->
+            <FormHoliday
+              v-else-if="checkForm === 'FormHoliday'"
+              :data="formData"
+            />
+
+            <!-- ลาอุปสมบท -->
+            <FormUpasom
+              v-else-if="checkForm === 'FormUpasom'"
+              :data="formData"
+            />
+
+            <!-- ลาประกอบพิธีฮัจญ์ -->
+            <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+
+            <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+            <FormCheckSelect
+              v-else-if="checkForm === 'FormCheckSelect'"
+              :data="formData"
+            />
+
+            <!-- ลาไปศึกษา -->
+            <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
+
+            <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+            <FormLeaveToTraining
+              v-else-if="checkForm === 'FormLeaveToTraining'"
+              :data="formData"
+            />
+
+            <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+            <FormLeaveToWorkInternational
+              v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+              :data="formData"
+            />
+
+            <!-- ลาติดตามคู่สมรส -->
+            <FormSpouse
+              v-else-if="checkForm === 'FormSpouse'"
+              :data="formData"
+            />
+
+            <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+            <FormVocationalRehabilitation
+              v-else-if="checkForm === 'FormVocationalRehabilitation'"
+              :data="formData"
+            />
+          </div>
+
+          <div
+            flat
+            class="col-xs-12 col-sm-6 q-pa-sm q-gutter-sm"
+            v-if="props.leaveStatus === 'CANCEL'"
+          >
+            <q-input
+              ref="writeAtRef"
+              v-model="formDelete.writeAt"
+              label="เขียนที่"
+              :rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
+              lazy-rules
+              hide-bottom-space
+              outlined
+              dense
+            />
+            <q-input
+              ref="reasonRef"
+              v-model="formDelete.reason"
+              type="textarea"
+              label="กรอกเหตุผล"
+              :rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
+              hide-bottom-space
+              lazy-rules
+              outlined
+              dense
+            />
+            <q-file
+              ref="docRef"
+              outlined
+              v-model="formDelete.doc"
+              label="เลือกไฟล์เอกสารหลักฐาน"
+              :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+              hide-bottom-space
+              lazy-rules
+              use-chips
+              dense
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+            </q-file>
+          </div>
         </div>
       </q-card-section>
       <q-separator />
       <q-card-section v-if="props.leaveStatus === 'CANCEL'" align="right">
-        <q-space />
         <q-btn
           label="ยืนยัน"
           unelevated
           color="secondary"
-          dense
-          class="q-px-md"
           @click="onClickSave"
         />
       </q-card-section>