From 200881c0c75326bb349eed4de0bf32ba804f9648 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 16 Jan 2024 19:55:28 +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=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=20step=201-3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EvaluateStepMain.vue           |  364 +++---
 .../06_evaluate/components/Stepper.vue        |   22 +-
 .../06_evaluate/components/step/step1.vue     |   22 +-
 .../06_evaluate/components/step/step2.vue     | 1022 ++++++++---------
 .../06_evaluate/components/step/step3.vue     |    6 +
 .../components/viewstep/tableStep1.vue        |   34 +-
 .../components/viewstep/viewPDF.vue           |   27 +-
 .../components/viewstep/viewStep1.vue         |  188 ++-
 .../components/viewstep/viewStep3.vue         |   88 +-
 9 files changed, 907 insertions(+), 866 deletions(-)

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index ba2ac7b..1181aec 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -39,6 +39,7 @@ const route = useRoute();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const $q = useQuasar();
+const splitterModel = 20;
 
 const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
 
@@ -558,7 +559,7 @@ onMounted(async () => {
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
+      <div class="toptitle2 text-white col-12 row items-center">
         <q-btn
           icon="mdi-arrow-left"
           unelevated
@@ -573,174 +574,214 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md q-mt-xs">
+    <div class="col-xs-12 col-sm-12 col-md-11 row">
       <div class="col-12 row">
-        <q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
-          <div class="col-xs-12 col-sm-3">
-            <div class="toptitle">
-              {{
-                route.params.type === "expert"
-                  ? "ประเมินชำนาญการ"
-                  : "ประเมินชำนาญการพิเศษ"
-              }}
-              <q-btn
-                flat
-                round
-                dense
-                color="primary"
-                icon="history"
-                @click="onClickPopupHistory"
-              >
-                <q-tooltip>ประวัติการประเมิน</q-tooltip>
-              </q-btn>
-            </div>
-            <Stepper />
-          </div>
+        <q-card bordered class="col-12 row caedNone">
+          <q-splitter
+            v-model="splitterModel"
+            :style="$q.screen.lt.sm ? 'height: 74vh;' : 'height: auto;'"
+            :horizontal="$q.screen.lt.sm"
+          >
 
-          <div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
-            <div class="col-12 row">
-              <div class="col-9">
-                <div class="toptitle">
-                  {{ store.step }}.{{ store.title[store.step - 1] }}
+            <template v-slot:before>
+              <div class="col-12 row q-py-md q-px-lg" >
+                <div class="col-12 row items-center q-pa-none no-wrap">
+                  <div class="toptitle2">
+                    {{
+                      route.params.type === "expert"
+                        ? "ประเมินชำนาญการ"
+                        : "ประเมินชำนาญการพิเศษ"
+                    }}
+                    </div>
+                    <q-space />
+                    <q-btn
+                      flat
+                      round
+                      dense
+                      color="primary"
+                      icon="history"
+                      @click="onClickPopupHistory"
+                    >
+                      <q-tooltip>ประวัติการประเมิน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12 row">
+                    <Stepper />
+                  </div>
+              </div>
+            </template>
+
+            <template v-slot:after>
+              <div class="col-12 row q-pa-md" v-if="showLoadStatus">
+                <div class="col-12 row">
+                    <div class="toptitle2 q-pt-xs">
+                      {{ store.step }}.{{ store.title[store.step - 1] }}
+                    </div>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        v-if="store.step === 1"
+                        :href="externalLink"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        no-caps
+                        dense 
+                        class="q-px-sm"
+                      >
+                        ตรวจสอบคุณสมบัติกับ ก.พ.
+                      </q-btn>
+                    </div>
                 </div>
-              </div>
-              <div class="col-3 text-right">
-                <q-btn
-                  v-if="store.step === 1"
-                  :href="externalLink"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  no-caps
-                >
-                  ตรวจสอบคุณสมบัติกับ ก.พ.
-                </q-btn>
-              </div>
-            </div>
-            <div class="row q-col-gutter-md col-12">
-              <div
-                :class="
-                  store.step === 2 ||
-                  store.step === 4 ||
-                  store.step === 5 ||
-                  store.step === 6 ||
-                  store.step === 8 ||
-                  store.step === 9
-                    ? 'col-xs-12 col-sm-12 row'
-                    : 'col-xs-12 col-sm-5 row'
-                "
-              >
-                <q-card flat bordered class="col-12 q-pa-md">
-                  <q-card-section>
-                    <Step1
-                      v-if="store.step === 1"
-                      @update:spec="updateCheckSpec"
-                      :data="formDataStep1"
-                      :educations="formDetail?.educations"
-                    />
-                    <Step2
-                      v-if="store.step === 2"
-                      @update:form="updateformCommand"
-                    />
-                    <Step3
-                      v-if="store.step === 3"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step4 v-if="store.step === 4" />
-                    <Step5 v-if="store.step === 5" />
-                    <Step6
-                      v-if="store.step === 6"
-                      @update:form="updateformCommand"
-                    />
-                    <Step7
-                      v-if="store.step === 7"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step8 v-if="store.step === 8" />
-                    <Step9 v-if="store.step === 9" />
-                  </q-card-section>
-                </q-card>
-              </div>
-              <div
-                class="col-xs-12 col-sm-7 row"
-                v-if="store.step === 1 || store.step === 3 || store.step === 7"
-              >
-                <div class="col-12 ">
-                  <ViewStep1
-                    v-if="store.step === 1"
-                    @update:formDeital="updateFormDetail"
-                    :data="formDataStep1"
+                <div class="col-12 q-pt-xs">
+                  <div class="row q-col-gutter-md">
+                    <div
+                      :class="
+                        store.step === 2 ||
+                        store.step === 4 ||
+                        store.step === 5 ||
+                        store.step === 6 ||
+                        store.step === 8 ||
+                        store.step === 9
+                          ? 'col-xs-12 col-sm-12 row'
+                          : 'col-xs-12 col-sm-5 row'
+                      "
+                    >
+                      <q-card v-if="store.step === 1" flat bordered class="col-12 q-pa-md shadow-0">
+                        <Step1
+                          
+                          @update:spec="updateCheckSpec"
+                          :data="formDataStep1"
+                          :educations="formDetail?.educations"
+                        />
+                      </q-card>
+                      <q-card v-if="store.step === 2" flat bordered class="col-12 shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
+                        <Step2
+                          
+                          @update:form="updateformCommand"
+                        />
+                      </q-card>
+                      <q-card 
+                        v-if="store.step === 3" flat bordered class="col-12 shadow-0">
+                        <Step3
+                          
+                          @update:file="updateFilePDF"
+                        />
+                      </q-card>
+                      <q-card 
+                        v-if=" store.step === 4 || 
+                              store.step === 5 || store.step === 6 || 
+                              store.step === 7 || store.step === 8 || 
+                              store.step === 9 
+                              " flat bordered class="col-12 q-pa-md shadow-0">
+                        <Step4 v-if="store.step === 4" />
+                        <Step5 v-if="store.step === 5" />
+                        <Step6
+                          v-if="store.step === 6"
+                          @update:form="updateformCommand"
+                        />
+                        <Step7
+                          v-if="store.step === 7"
+                          @update:file="updateFilePDF"
+                        />
+                        <Step8 v-if="store.step === 8" />
+                        <Step9 v-if="store.step === 9" />
+                      </q-card>
+                    </div>
+
+                    <div class="col-xs-12 col-sm-7" v-if="store.step === 1 || store.step === 3 || store.step === 7">
+                      <q-card
+                        class=" row q-pa-md  shadow-0"
+                        bordered
+                        flat
+                        v-if="store.step === 1"
+                      >
+                        <div class="col-12 row">
+                          <ViewStep1
+                            @update:formDeital="updateFormDetail"
+                            :data="formDataStep1"
+                          />
+                        </div>
+                      </q-card>
+                      <q-card v-if="store.step === 3 && pdfSrc" class="row shadow-0" bordered flat >
+                          <ViewStep3
+                            :pdfSrc="pdfSrc"
+                            :urlDownloadFile="urlDownloadFile"
+                          />
+                      </q-card>
+                      <q-card v-if="store.step === 7 && pdfSrc" class="row  shadow-0" bordered flat >
+                          <ViewStep7
+                            :pdfSrc="pdfSrc"
+                            :urlDownloadFile="urlDownloadFile"
+                          />
+                      </q-card>
+                    </div>
+                  </div>
+                </div>
+                <div class="row col-12 q-pt-sm">
+                  <q-space />
+                  <q-btn
+                    v-if="
+                      store.step >= store.currentStep &&
+                      store.statusUpload === false &&
+                      store.step !== 3 &&
+                      store.step !== 4 &&
+                      store.step !== 5 &&
+                      store.step !== 7 &&
+                      store.step !== 8 &&
+                      store.step !== 9
+                    "
+                    unelevated
+                    :label="
+                      store.step === 2 || store.step === 6
+                        ? 'บันทึกข้อมูล'
+                        : 'ดำเนินการต่อ'
+                    "
+                    color="public"
+                    @click="onCilckNextStep()"
                   />
-                  <ViewStep3
-                    v-if="store.step === 3 && pdfSrc"
-                    :pdfSrc="pdfSrc"
-                    :urlDownloadFile="urlDownloadFile"
+
+                  <q-btn
+                    v-else-if="
+                      store.step >= store.currentStep &&
+                      (store.step == 3 || store.step == 7)
+                    "
+                    unelevated
+                    label="ยื่นเอกสาร"
+                    color="public"
+                    @click="onCilckNextStep()"
                   />
-                  <ViewStep7
-                    v-if="store.step === 7 && pdfSrc"
-                    :pdfSrc="pdfSrc"
-                    :urlDownloadFile="urlDownloadFile"
+
+                  <q-btn
+                    v-if="
+                      store.step >= store.currentStep &&
+                      store.step == 2 &&
+                      store.statusUpload
+                    "
+                    unelevated
+                    label="ดำเนินการต่อ"
+                    color="public"
+                    @click="onCilckNextStep()"
+                  />
+                  <q-btn
+                    v-if="
+                      store.step >= store.currentStep &&
+                      store.step == 6 &&
+                      store.statusUpload
+                    "
+                    unelevated
+                    label="ดำเนินการต่อ"
+                    color="public"
+                    @click="onCilckNextStep()"
                   />
                 </div>
               </div>
-            </div>
-            <div class="q-mt-md q-gutter-md" align="right">
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.statusUpload === false &&
-                  store.step !== 3 &&
-                  store.step !== 4 &&
-                  store.step !== 5 &&
-                  store.step !== 7 &&
-                  store.step !== 8 &&
-                  store.step !== 9
-                "
-                unelevated
-                :label="
-                  store.step === 2 || store.step === 6
-                    ? 'บันทึกข้อมูล'
-                    : 'ดำเนินการต่อ'
-                "
-                color="public"
-                @click="onCilckNextStep()"
-              />
+            </template>
 
-              <q-btn
-                v-else-if="
-                  store.step >= store.currentStep &&
-                  (store.step == 3 || store.step == 7)
-                "
-                unelevated
-                label="ยื่นเอกสาร"
-                color="public"
-                @click="onCilckNextStep()"
-              />
+          </q-splitter>
+          
 
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 2 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 6 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-            </div>
-          </div>
+          
         </q-card>
       </div>
     </div>
@@ -756,4 +797,9 @@ onMounted(async () => {
 .q-stepper--vertical .q-stepper__step-inner {
   padding: 0;
 }
+.toptitle2 {
+  font-size: 1rem;
+  font-weight: bold;
+  margin-bottom: 1.2%;
+}
 </style>
diff --git a/src/modules/06_evaluate/components/Stepper.vue b/src/modules/06_evaluate/components/Stepper.vue
index abba6bb..e5eebfa 100644
--- a/src/modules/06_evaluate/components/Stepper.vue
+++ b/src/modules/06_evaluate/components/Stepper.vue
@@ -8,12 +8,12 @@ const store = useEvaluateStore();
 <template>
   <q-stepper
     v-model="store.step"
+    dense
     vertical
     animated
     flat
     ref="stepper"
-    :bordered="false"
-    header-nav
+    class="stepEva"
   >
     <q-step
       keep-alive
@@ -22,6 +22,7 @@ const store = useEvaluateStore();
       title="ตรวจสอบคุณสมบัติ"
       :done="store.currentStep >= 1"
       :disable="store.currentStep < 1"
+      class="subStep"
     >
     </q-step>
 
@@ -31,6 +32,7 @@ const store = useEvaluateStore();
       title="จัดเตรียมเอกสารเล่ม 1"
       :done="store.currentStep >= 2"
       :disable="store.currentStep < 2"
+      class="subStep"
     >
     </q-step>
 
@@ -40,6 +42,7 @@ const store = useEvaluateStore();
       title="ตรวจสอบเอกสารเล่ม 1"
       :done="store.currentStep >= 3"
       :disable="store.currentStep < 3"
+      class="subStep"
     >
     </q-step>
 
@@ -49,6 +52,7 @@ const store = useEvaluateStore();
       title="รอตรวจสอบคุณสมบัติ"
       :done="store.currentStep >= 4"
       :disable="store.currentStep < 4"
+      class="subStep"
     >
     </q-step>
 
@@ -58,6 +62,7 @@ const store = useEvaluateStore();
       title="ประกาศบนเว็บไซต์"
       :done="store.currentStep >= 5"
       :disable="store.currentStep < 5"
+      class="subStep"
     >
     </q-step>
 
@@ -67,6 +72,7 @@ const store = useEvaluateStore();
       title="จัดเตรียมเอกสารเล่ม 2"
       :done="store.currentStep >= 6"
       :disable="store.currentStep < 6"
+      class="subStep"
     >
     </q-step>
 
@@ -76,6 +82,7 @@ const store = useEvaluateStore();
       title="รอพิจารณาผลการประเมิน 2"
       :done="store.currentStep >= 7"
       :disable="store.currentStep < 7"
+      class="subStep"
     >
     </q-step>
 
@@ -85,6 +92,7 @@ const store = useEvaluateStore();
       title="ตรวจสอบความถูกต้องของเอกสารเล่ม 2"
       :done="store.currentStep >= 8"
       :disable="store.currentStep < 8"
+      class="subStep"
     >
     </q-step>
 
@@ -94,9 +102,17 @@ const store = useEvaluateStore();
       title="เสร็จสิ้น"
       :done="store.currentStep >= 9"
       :disable="store.currentStep < 9"
+      class="subStep"
     >
     </q-step>
   </q-stepper>
 </template>
 
-<style scoped></style>
+<style>
+.stepEva{
+  padding: 0px !important;
+}
+.subStep .q-stepper__tab{
+  padding: 12px 0px !important;
+}
+</style>
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index 1503727..5ec8041 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -84,8 +84,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-list>
-    <q-item v-ripple>
+  <q-list dense>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -111,7 +111,7 @@ onMounted(() => {
         </q-item-label>
       </q-item-section>
     </q-item>
-    <q-item v-ripple>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -125,7 +125,7 @@ onMounted(() => {
         <q-item-label>ประวัติการรับราชการ </q-item-label>
       </q-item-section>
     </q-item>
-    <q-item v-ripple>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -139,7 +139,7 @@ onMounted(() => {
         <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
       </q-item-section>
     </q-item>
-    <q-item v-ripple>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -165,7 +165,7 @@ onMounted(() => {
         >
       </q-item-section>
     </q-item>
-    <q-item v-ripple>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -182,7 +182,7 @@ onMounted(() => {
         >
       </q-item-section>
     </q-item>
-    <q-item v-ripple>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -200,7 +200,7 @@ onMounted(() => {
         >
       </q-item-section>
     </q-item>
-    <q-item v-ripple>
+    <q-item v-ripple class="listItem">
       <q-item-section avatar>
         <q-checkbox
           :disable="store.currentStep > 1"
@@ -226,4 +226,8 @@ onMounted(() => {
   />
 </template>
 
-<style scoped></style>
+<style >
+.listItem{
+  padding: 5px 0px !important;
+}
+</style>
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index d45c8f4..7b9bb25 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -450,127 +450,124 @@ watch(
 </script>
 
 <template>
-  <div class="row q-col-gutter-md">
+  <div class="row q-col-gutter-sm  q-pa-md">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-card bordered style="border: 1px solid #d6dee1">
+      <q-card bordered class="cardSp1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
         <div class="col-12"><q-separator /></div>
-        <div class="row">
           <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-12 row">
-                <!-- <div class="text-weight-medium q-py-sm">
-                  ผู้บังคับบัญชาชั้นต้น
-                </div> -->
+            <div class="row q-col-gutter-sm">
+              <!-- <div class="text-weight-medium q-py-sm">
+                ผู้บังคับบัญชาชั้นต้น
+              </div> -->
 
-                <div class="row col-12 q-col-gutter-md q-pa-sm">
-                  <q-input
-                    :readonly="store.currentStep != 2 || store.statusUpload"
-                    ref="performanceRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อผลงาน"
-                    v-model="formCommand.subject"
-                    @update:model-value="updateInput(formCommand)"
-                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                    lazy-rules
-                  />
-                  <q-input
-                    :readonly="store.currentStep != 2 || store.statusUpload"
-                    ref="performanceOwnerRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.author"
-                    @update:model-value="updateInput(formCommand)"
-                    label="เจ้าของผลงาน"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-                    lazy-rules
-                  />
-                </div>
-              </div>
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  ref="performanceRef"
+                  dense
+                  class="col-xs-12 col-sm-6"
+                  outlined
+                  label="ชื่อผลงาน"
+                  v-model="formCommand.subject"
+                  @update:model-value="updateInput(formCommand)"
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  ref="performanceOwnerRef"
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  v-model="formCommand.author"
+                  @update:model-value="updateInput(formCommand)"
+                  label="เจ้าของผลงาน"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
             </div>
           </div>
-        </div>
       </q-card>
     </div>
 
     <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
-      <q-card bordered style="border: 1px solid #d6dee1">
+      <q-card bordered class="cardSp1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกผู้เซ็นเอกสาร
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-12 row">
-                <div class="text-weight-medium q-py-sm">
-                  ผู้บังคับบัญชาชั้นต้น
-                </div>
-                <div class="row col-12 q-col-gutter-md q-pa-sm">
-                  <q-input
-                    :readonly="store.currentStep != 2 || store.statusUpload"
-                    ref="commanderFullnameRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อ-นามสกุล"
-                    v-model="formCommand.commanderFullname"
-                    @update:model-value="updateInput(formCommand)"
-                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                    lazy-rules
-                  />
-                  <q-input
-                    :readonly="store.currentStep != 2 || store.statusUpload"
-                    ref="commanderPositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.commanderPosition"
-                    @update:model-value="updateInput(formCommand)"
-                    label="ตำแหน่ง"
-                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    lazy-rules
-                  />
-                </div>
+        <div class="col-12 q-pa-sm">
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-12 row">
+              <div class="text-weight-medium q-pt-xs q-pl-sm">
+                ผู้บังคับบัญชาชั้นต้น
+              </div>
+              <div class="row col-12 q-col-gutter-md q-pa-sm">
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  ref="commanderFullnameRef"
+                  dense
+                  class="col-xs-12 col-sm-6"
+                  outlined
+                  label="ชื่อ-นามสกุล"
+                  v-model="formCommand.commanderFullname"
+                  @update:model-value="updateInput(formCommand)"
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  ref="commanderPositionRef"
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  v-model="formCommand.commanderPosition"
+                  @update:model-value="updateInput(formCommand)"
+                  label="ตำแหน่ง"
+                  :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
               </div>
             </div>
-
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-12 row">
-                <div class="text-weight-medium q-py-sm">
-                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-                </div>
-                <div class="row col-12 q-col-gutter-md q-pa-sm">
-                  <q-input
-                    :readonly="store.currentStep != 2 || store.statusUpload"
-                    ref="commanderAboveFullnameRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    v-model="formCommand.commanderAboveFullname"
-                    label="ชื่อ-นามสกุล"
-                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                    lazy-rules
-                    @update:model-value="updateInput(formCommand)"
-                  />
-                  <q-input
-                    :readonly="store.currentStep != 2 || store.statusUpload"
-                    ref="commanderAbovePositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.commanderAbovePosition"
-                    label="ตำแหน่ง"
-                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    lazy-rules
-                    @update:model-value="updateInput(formCommand)"
-                  />
-                </div>
+          </div>
+          <div class="row q-col-gutter-md col-12">
+            <div class="col-xs-12 col-sm-12 row">
+              <div class="text-weight-medium q-pl-sm q-pt-sm">
+                ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+              </div>
+              <div class="row col-12 q-col-gutter-md q-pa-sm">
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  ref="commanderAboveFullnameRef"
+                  dense
+                  class="col-xs-12 col-sm-6"
+                  outlined
+                  v-model="formCommand.commanderAboveFullname"
+                  label="ชื่อ-นามสกุล"
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                  lazy-rules
+                  @update:model-value="updateInput(formCommand)"
+                  hide-bottom-space
+                />
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  ref="commanderAbovePositionRef"
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  v-model="formCommand.commanderAbovePosition"
+                  label="ตำแหน่ง"
+                  :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                  @update:model-value="updateInput(formCommand)"
+                />
               </div>
             </div>
           </div>
@@ -582,86 +579,85 @@ watch(
     <div class="row q-col-gutter-sm">
       <!-- แบบพิจารณาคุณสมบัติบุคคล -->
       <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            แบบพิจารณาคุณสมบัติบุคคล
+        <q-card bordered class="cardSp1">
+          <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            <div>แบบพิจารณาคุณสมบัติบุคคล</div>
+            <q-space />
+            <div>
+              <q-btn
+                flat
+                dense
+                icon="download"
+                color="primary"
+                @click="
+                  onClickDowloadFile(
+                    'EV1_005',
+                    'template-1',
+                    'แบบพิจารณาคุณสมบัติบุคคล'
+                  )
+                "
+              >
+                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+            </div>
+            <div>
+              <q-btn
+                v-if="downloadFile1 != ''"
+                :href="downloadFile1"
+                target="_blank"
+                class="q-ml-sm"
+                color="blue"
+                flat
+                dense
+                icon="visibility"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row">
             <div class="col-12 q-pa-sm">
               <div class="row q-col-gutter-md col-12">
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    class="col-12"
-                    outline
-                    icon="download"
-                    label="ดาวน์โหลดต้นแบบ"
-                    color="primary"
-                    @click="
-                      onClickDowloadFile(
-                        'EV1_005',
-                        'template-1',
-                        'แบบพิจารณาคุณสมบัติบุคคล'
-                      )
-                    "
-                  >
-                    <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    v-if="downloadFile1 != ''"
-                    :href="downloadFile1"
-                    target="_blank"
-                    class="col-12"
-                    outline
-                    icon="visibility"
-                    label="ดูไฟล์เอกสาร"
-                    color="primary"
-                  >
-                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-10 row">
-                  <q-file
-                    ref="fileEvaluation1Ref"
-                    v-model="fileEvaluation1"
-                    :disable="!store.statusUpload"
-                    class="col-xs-12 col-sm-12"
-                    outlined
-                    dense
-                    lazy-rules
-                    accept=".pdf"
-                    :rules="
-                      downloadFile1 === ''
-                        ? [(val) => !!val || 'กรุณาเลือกไฟล์']
-                        : []
-                    "
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                </div>
-                <div class="col-2 self-center text-center q-pl-none">
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '1-แบบพิจารณาคุณสมบัติบุคคล',
-                        fileEvaluation1
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </div>
+                <q-file
+                  ref="fileEvaluation1Ref"
+                  v-model="fileEvaluation1"
+                  :disable="!store.statusUpload"
+                  class="col-xs-12 col-sm-12"
+                  outlined
+                  dense
+                  lazy-rules
+                  hide-bottom-space
+                  accept=".pdf"
+                  :rules="
+                    downloadFile1 === ''
+                      ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                      : []
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      :disable="!store.statusUpload"
+                      flat
+                      round
+                      dense
+                      color="primary"
+                      icon="mdi-upload"
+                      @click="
+                        fetchPathUpload(
+                          'เล่ม 1',
+                          evaluateId,
+                          '1-แบบพิจารณาคุณสมบัติบุคคล',
+                          fileEvaluation1
+                        )
+                      "
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
               </div>
             </div>
           </div>
@@ -670,47 +666,46 @@ watch(
 
       <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
       <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            แบบแสดงรายละเอียดการเสนอผลงาน
+        <q-card bordered class="cardSp1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md col-12 row items-center">
+            <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
+            <q-space />
+            <div>
+                <q-btn
+                flat
+                dense
+                icon="download"
+                color="primary"
+                @click="
+                  onClickDowloadFile(
+                    'EV1_006',
+                    'template-2',
+                    'แบบแสดงรายละเอียดการเสนอผลงาน'
+                  )
+                "
+              >
+                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+              </div>
+              <div>
+                <q-btn
+                v-if="downloadFile2 != ''"
+                :href="downloadFile2"
+                target="_blank"
+                class="q-ml-sm"
+                color="blue"
+                flat
+                dense
+                icon="visibility"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row">
             <div class="col-12 q-pa-sm">
               <div class="row q-col-gutter-md col-12">
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    class="col-12"
-                    outline
-                    icon="download"
-                    label="ดาวน์โหลดต้นแบบ"
-                    color="primary"
-                    @click="
-                      onClickDowloadFile(
-                        'EV1_006',
-                        'template-2',
-                        'แบบแสดงรายละเอียดการเสนอผลงาน'
-                      )
-                    "
-                  >
-                    <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    v-if="downloadFile2 != ''"
-                    :href="downloadFile2"
-                    target="_blank"
-                    class="col-12"
-                    outline
-                    icon="visibility"
-                    label="ดูไฟล์เอกสาร"
-                    color="primary"
-                  >
-                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-10 row">
                   <q-file
                     ref="fileEvaluation2Ref"
                     v-model="fileEvaluation2"
@@ -720,6 +715,7 @@ watch(
                     dense
                     lazy-rules
                     accept=".pdf"
+                    hide-bottom-space
                     :rules="
                       downloadFile2 === ''
                         ? [(val) => !!val || 'กรุณาเลือกไฟล์']
@@ -729,27 +725,26 @@ watch(
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
                     </template>
+                    <template v-slot:after>
+                      <q-btn
+                        :disable="!store.statusUpload"
+                        flat
+                        round
+                        dense
+                        color="primary"
+                        icon="mdi-upload"
+                        @click="
+                          fetchPathUpload(
+                            'เล่ม 1',
+                            evaluateId,
+                            '2-แบบแสดงรายละเอียดการเสนอผลงาน',
+                            fileEvaluation2
+                          )
+                        "
+                        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                      >
+                    </template>
                   </q-file>
-                </div>
-                <div class="col-2 self-center text-center q-pl-none">
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '2-แบบแสดงรายละเอียดการเสนอผลงาน',
-                        fileEvaluation2
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </div>
               </div>
             </div>
           </div>
@@ -758,244 +753,149 @@ watch(
 
       <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
       <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+        <q-card bordered class="cardSp1">
+          <div class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-px-md no-wrap">
+            <div>แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
             (เอกสารแบบ ก.)
+            </div>
+            <q-space />
+            <div >
+              <q-btn
+                  flat
+                  dense
+                  icon="download"
+                  color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_007',
+                      'template-3',
+                      'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
+                    )
+                  "
+                >
+                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                >
+            </div>
+            <div v-if="downloadFile3 != ''">
+              <q-btn
+                  :href="downloadFile3"
+                  target="_blank"
+                  flat
+                  dense
+                  icon="visibility"
+                  class="q-ml-sm"
+                  color="blue"
+                >
+                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                >
+            </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row">
             <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <div class="col-xs-12 col-sm-6 row">
+              <q-file
+                  ref="fileEvaluation3Ref"
+                  v-model="fileEvaluation3"
+                  :disable="!store.statusUpload"
+                  class="col-12"
+                  outlined
+                  dense
+                  lazy-rules
+                  hide-bottom-space
+                  accept=".pdf"
+                  :rules="
+                    downloadFile3 === ''
+                      ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                      : []
+                  "
+                >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
                   <q-btn
-                    class="col-12"
-                    outline
-                    icon="download"
-                    label="ดาวน์โหลดต้นแบบ"
-                    color="primary"
-                    @click="
-                      onClickDowloadFile(
-                        'EV1_007',
-                        'template-3',
-                        'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
-                      )
-                    "
-                  >
-                    <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    v-if="downloadFile3 != ''"
-                    :href="downloadFile3"
-                    target="_blank"
-                    class="col-12"
-                    outline
-                    icon="visibility"
-                    label="ดูไฟล์เอกสาร"
-                    color="primary"
-                  >
-                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-10 row">
-                  <q-file
-                    ref="fileEvaluation3Ref"
-                    v-model="fileEvaluation3"
-                    :disable="!store.statusUpload"
-                    class="col-12"
-                    outlined
-                    dense
-                    lazy-rules
-                    accept=".pdf"
-                    :rules="
-                      downloadFile3 === ''
-                        ? [(val) => !!val || 'กรุณาเลือกไฟล์']
-                        : []
-                    "
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                </div>
-                <div class="col-2 self-center text-center q-pl-none">
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
-                        fileEvaluation3
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
+                  :disable="!store.statusUpload"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      evaluateId,
+                      '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
+                      fileEvaluation3
+                    )
+                  "
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                </template>
+              </q-file>
             </div>
           </div>
         </q-card>
-      </div>
-
-      <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            แบบประเมินคุณลักษณะบุคคล
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    class="col-12"
-                    outline
-                    icon="download"
-                    label="ดาวน์โหลดต้นแบบ"
-                    color="primary"
-                    @click="
-                      onClickDowloadFile(
-                        'EV1_008',
-                        'template-4',
-                        'แบบประเมินคุณลักษณะบุคคล'
-                      )
-                    "
-                  >
-                    <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    v-if="downloadFile4 != ''"
-                    :href="downloadFile4"
-                    target="_blank"
-                    class="col-12"
-                    outline
-                    icon="visibility"
-                    label="ดูไฟล์เอกสาร"
-                    color="primary"
-                  >
-                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-10 row">
-                  <q-file
-                    ref="fileEvaluation4Ref"
-                    v-model="fileEvaluation4"
-                    :disable="!store.statusUpload"
-                    class="col-12"
-                    outlined
-                    dense
-                    lazy-rules
-                    accept=".pdf"
-                    :rules="
-                      downloadFile4 === ''
-                        ? [(val) => !!val || 'กรุณาเลือกไฟล์']
-                        : []
-                    "
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                </div>
-                <div class="col-2 self-center text-center q-pl-none">
-                  <q-btn
-                    flat
-                    round
-                    dense
-                    :disable="!store.statusUpload"
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '4-แบบประเมินคุณลักษณะบุคคล',
-                        fileEvaluation4
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
-
+      </div> 
+      
       <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
       <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
+        <q-card bordered class="cardSp1">
+          <div class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-px-md no-wrap">
+            <div class="col-7">แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)</div>
+            <q-space />
+            <div>
+              <q-btn
+                flat
+                dense
+                icon="download"
+                color="primary"
+                @click="
+                  onClickDowloadFile(
+                    'EV1_009',
+                    'template-5',
+                    'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
+                  )
+                "
+                ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+            </div>
+            <div>
+              <q-btn
+                v-if="downloadFile5 != ''"
+                :href="downloadFile5"
+                target="_blank"
+                flat
+                dense
+                icon="visibility"
+                class="q-ml-sm"
+                color="blue"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row">
             <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    class="col-12"
-                    outline
-                    icon="download"
-                    label="ดาวน์โหลดต้นแบบ"
-                    color="primary"
-                    @click="
-                      onClickDowloadFile(
-                        'EV1_009',
-                        'template-5',
-                        'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
-                      )
-                    "
-                    ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    v-if="downloadFile5 != ''"
-                    :href="downloadFile5"
-                    target="_blank"
-                    class="col-12"
-                    outline
-                    icon="visibility"
-                    label="ดูไฟล์เอกสาร"
-                    color="primary"
-                  >
-                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-10 row">
-                  <q-file
-                    ref="fileEvaluation5Ref"
-                    v-model="fileEvaluation5"
-                    :disable="!store.statusUpload"
-                    class="col-12"
-                    outlined
-                    dense
-                    lazy-rules
-                    accept=".pdf"
-                    :rules="
-                      downloadFile5 === ''
-                        ? [(val) => !!val || 'กรุณาเลือกไฟล์']
-                        : []
-                    "
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                </div>
-                <div class="col-2 self-center text-center q-pl-none">
+              <q-file
+                ref="fileEvaluation5Ref"
+                v-model="fileEvaluation5"
+                :disable="!store.statusUpload"
+                class="col-12"
+                outlined
+                dense
+                lazy-rules
+                accept=".pdf"
+                hide-bottom-space
+                :rules="
+                  downloadFile5 === ''
+                    ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                    : []
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
                   <q-btn
                     :disable="!store.statusUpload"
                     flat
@@ -1013,77 +913,160 @@ watch(
                     "
                     ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                   >
-                </div>
-              </div>
+                </template>
+              </q-file>
             </div>
           </div>
         </q-card>
       </div>
 
-      <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
+
+      <!-- แบบประเมินคุณลักษณะบุคคล -->
       <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered style="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)
+        <q-card bordered class="cardSp1">
+          <div class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            <div>แบบประเมินคุณลักษณะบุคคล</div>
+            <q-space />
+            <div>
+              <q-btn
+                flat
+                dense
+                icon="download"
+                color="primary"
+                @click="
+                  onClickDowloadFile(
+                    'EV1_008',
+                    'template-4',
+                    'แบบประเมินคุณลักษณะบุคคล'
+                  )
+                "
+              >
+                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+            </div>
+            <div>
+              <q-btn
+                v-if="downloadFile4 != ''"
+                :href="downloadFile4"
+                target="_blank"
+                flat
+                dense
+                icon="visibility"
+                class="q-ml-sm"
+                color="blue"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row">
             <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <div class="col-xs-12 col-sm-6 row">
+              <q-file
+                ref="fileEvaluation4Ref"
+                v-model="fileEvaluation4"
+                :disable="!store.statusUpload"
+                class="col-12"
+                outlined
+                dense
+                lazy-rules
+                hide-bottom-space
+                accept=".pdf"
+                :rules="
+                  downloadFile4 === ''
+                    ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                    : []
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
                   <q-btn
-                    class="col-12"
-                    outline
-                    icon="download"
-                    label="ดาวน์โหลดต้นแบบ"
-                    color="primary"
-                    @click="
-                      onClickDowloadFile(
-                        'EV1_010',
-                        'template-6',
-                        'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
-                      )
-                    "
-                  >
-                    <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-6 row">
-                  <q-btn
-                    v-if="downloadFile6 != ''"
-                    :href="downloadFile6"
-                    target="_blank"
-                    class="col-12"
-                    outline
-                    icon="visibility"
-                    label="ดูไฟล์เอกสาร"
-                    color="primary"
-                  >
-                    <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                  >
-                </div>
-                <div class="col-xs-12 col-sm-10 row">
-                  <q-file
-                    ref="fileEvaluation6Ref"
-                    v-model="fileEvaluation6"
-                    :disable="!store.statusUpload"
-                    class="col-12"
-                    outlined
-                    dense
-                    lazy-rules
-                    accept=".pdf"
-                    :rules="
-                      downloadFile6 === ''
-                        ? [(val) => !!val || 'กรุณาเลือกไฟล์']
-                        : []
-                    "
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                </div>
-                <div class="col-2 self-center text-center q-pl-none">
+                  flat
+                  round
+                  dense
+                  :disable="!store.statusUpload"
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      evaluateId,
+                      '4-แบบประเมินคุณลักษณะบุคคล',
+                      fileEvaluation4
+                    )
+                  "
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+     
+      <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
+      <div class="col-6" v-if="store.currentStep === 2">
+        <q-card bordered class="cardSp1">
+          <div class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
+            <q-space />
+            <div>
+              <q-btn
+                flat
+                dense
+                icon="download"
+                color="primary"
+                @click="
+                  onClickDowloadFile(
+                    'EV1_010',
+                    'template-6',
+                    'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
+                  )
+                "
+              >
+                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+            </div>
+            <div>
+              <q-btn
+                v-if="downloadFile6 != ''"
+                :href="downloadFile6"
+                target="_blank"
+                flat
+                dense
+                icon="visibility"
+                class="q-ml-sm"
+                color="blue"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row">
+            <div class="col-12 q-pa-sm">
+              <q-file
+                ref="fileEvaluation6Ref"
+                v-model="fileEvaluation6"
+                :disable="!store.statusUpload"
+                class="col-12"
+                outlined
+                hide-bottom-space
+                dense
+                lazy-rules
+                accept=".pdf"
+                :rules="
+                  downloadFile6 === ''
+                    ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                    : []
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
                   <q-btn
                     :disable="!store.statusUpload"
                     flat
@@ -1099,10 +1082,9 @@ watch(
                         fileEvaluation6
                       )
                     "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                </template>
+              </q-file>
             </div>
           </div>
         </q-card>
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index ba186bb..55cdac2 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -103,6 +103,7 @@ onMounted(async () => {
       :active="selectedItem === 1 ? true : false"
       active-class="text-primary"
       @click="handleItemClick(1)"
+      class=" cursor-pointer"
     >
       <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
     </q-item>
@@ -112,6 +113,7 @@ onMounted(async () => {
       :active="selectedItem === 2 ? true : false"
       active-class="text-primary"
       @click="handleItemClick(2)"
+      class=" cursor-pointer"
     >
       <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
     </q-item>
@@ -121,6 +123,7 @@ onMounted(async () => {
       :active="selectedItem === 3 ? true : false"
       active-class="text-primary"
       @click="handleItemClick(3)"
+      class=" cursor-pointer"
     >
       <q-item-section
         >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
@@ -133,6 +136,7 @@ onMounted(async () => {
       :active="selectedItem === 4 ? true : false"
       active-class="text-primary"
       @click="handleItemClick(4)"
+      class=" cursor-pointer"
     >
       <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
     </q-item>
@@ -142,6 +146,7 @@ onMounted(async () => {
       :active="selectedItem === 5 ? true : false"
       active-class="text-primary"
       @click="handleItemClick(5)"
+      class=" cursor-pointer"
     >
       <q-item-section>
         แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
@@ -153,6 +158,7 @@ onMounted(async () => {
       :active="selectedItem === 6 ? true : false"
       active-class="text-primary"
       @click="handleItemClick(6)"
+      class=" cursor-pointer"
     >
       <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
     </q-item>
diff --git a/src/modules/06_evaluate/components/viewstep/tableStep1.vue b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
index 5b8b0ed..8bbd1e5 100644
--- a/src/modules/06_evaluate/components/viewstep/tableStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
@@ -12,25 +12,21 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-table
-    ref="table"
-    flat
-    bordered
-    class="custom-header-table"
-    :columns="props.columns"
-    :rows="props.row"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    virtual-scroll
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-  </q-table>
+  <div class="q-pa-sm row col-12">
+    <q-table
+      ref="table"
+      flat
+      bordered
+      :columns="props.columns"
+      :rows="props.row"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      virtual-scroll
+      class="row col-12"
+      :style="$q.screen.lt.sm ? 'width: 70vw' : 'width: 50vw;'"
+    >
+    </q-table>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/06_evaluate/components/viewstep/viewPDF.vue b/src/modules/06_evaluate/components/viewstep/viewPDF.vue
index 0a8c2a3..93ef29c 100644
--- a/src/modules/06_evaluate/components/viewstep/viewPDF.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewPDF.vue
@@ -62,23 +62,25 @@ function backPage() {
   <q-splitter
     v-model="splitterModel"
     horizontal
+    class="bg-grey-1 q-px-sm"
     :style="
       props.type !== 'popup'
-        ? 'height: 50vh; border: 1px solid rgb(210, 210, 210);border-radius: 5px;'
+        ? 'height: 50vh; border-radius: 5px;'
         : 'border: 1px solid rgb(210, 210, 210);border-radius: 5px;'
     "
     before-class="overflow-hidden disable"
     separator-class="bg-white disabled"
   >
     <template v-slot:before>
-      <div class="q-px-sm">
+      <div class="q-py-sm">
         <div class="row items-start items-center">
           <div class="col">
             <q-btn
               padding="xs"
               icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
+              color="grey-4"
+              unelevated
+              text-color="grey-8"
               size="md"
               class="my-auto"
               @click="backPage"
@@ -94,8 +96,9 @@ function backPage() {
             <q-btn
               padding="xs"
               icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
+              color="grey-4"
+              unelevated
+              text-color="grey-8"
               size="md"
               @click="nextPage"
               :disable="page === numOfPages"
@@ -123,14 +126,15 @@ function backPage() {
       </div>
     </template>
     <template v-slot:default>
-      <div class="q-pa-md">
+      <div class="q-py-sm">
         <div class="row items-start items-center">
           <div class="col">
             <q-btn
               padding="xs"
               icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
+              color="grey-4"
+              unelevated
+              text-color="grey-8"
               size="md"
               class="my-auto"
               @click="backPage"
@@ -147,8 +151,9 @@ function backPage() {
             <q-btn
               padding="xs"
               icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
+              color="grey-4"
+              unelevated
+              text-color="grey-8"
               size="md"
               @click="nextPage"
               :disable="page === numOfPages"
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 1827a58..8e0fd68 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -213,15 +213,15 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-scroll-area style="height: 500px">
-    <q-card class="q-gutter-md" style="width: 690px;">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
-        </div>
-        <q-separator />
+  <div class="col-12 row" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
+    <q-card class="col-12  cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+      </div>
+      <div class="col-12"><q-separator /></div>
 
-        <div class="row q-pa-sm">
+      <div class="row col-12 q-pa-sm">
+        <div class="row q-col-gutter-sm">
           <div class="col-xs-6 col-sm-4 col-md-3">
             <q-input
               borderless
@@ -245,9 +245,6 @@ onMounted(async () => {
               readonly
               label="วันเดือนปีเกิด"
             >
-              <template v-slot:prepend>
-                <q-icon class="size-icon" name="o_calendar_today" />
-              </template>
             </q-input>
           </div>
           <div class="col-xs-6 col-sm-4 col-md-3">
@@ -266,14 +263,6 @@ onMounted(async () => {
               label="ตำแหน่งเลขที่"
             />
           </div>
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.oc"
-              label="สังกัด"
-            />
-          </div>
           <div class="col-xs-6 col-sm-4 col-md-3">
             <q-input
               borderless
@@ -309,17 +298,26 @@ onMounted(async () => {
               label="อายุราชการ"
             />
           </div>
+          <div class="col-xs-12 col-sm-9">
+            <q-input
+              borderless
+              readonly
+              :model-value="formDetail.oc"
+              label="สังกัด"
+            />
+          </div>
         </div>
-      </q-card>
+      </div>
+    </q-card>
 
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
-        </div>
-        <q-separator />
-        <div v-if="formDetail.educations && formDetail.educations.length > 0">
+    <q-card class="col-12  cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
           <div
-            class="row q-pa-sm"
+            class="row q-col-gutter-sm"
             v-for="(education, index) in formDetail.educations"
             :key="index"
           >
@@ -348,9 +346,6 @@ onMounted(async () => {
                 readonly
                 label="ตั้งแต่"
               >
-                <template v-slot:prepend>
-                  <q-icon class="size-icon" name="o_calendar_today" />
-                </template>
               </q-input>
             </div>
 
@@ -361,9 +356,6 @@ onMounted(async () => {
                 readonly
                 label="ถึง"
               >
-                <template v-slot:prepend>
-                  <q-icon class="size-icon" name="o_calendar_today" />
-                </template>
               </q-input>
             </div>
             <div class="col-xs-6 col-sm-4 col-md-3">
@@ -373,9 +365,6 @@ onMounted(async () => {
                 readonly
                 label="วันที่สำเร็จการศึกษา"
               >
-                <template v-slot:prepend>
-                  <q-icon class="size-icon" name="o_calendar_today" />
-                </template>
               </q-input>
             </div>
 
@@ -431,74 +420,67 @@ onMounted(async () => {
                 label="ประเทศ"
               />
             </div>
-          </div>
         </div>
-        <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
-        <q-separator />
-      </q-card>
-
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
-        </div>
-        <q-separator />
-        <div class="row q-pa-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <TableData
-              :columns="columnsCertificates"
-              :row="formDetail.certificates"
-            />
-          </div>
-        </div>
-      </q-card>
-
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
-        </div>
-        <q-separator />
-        <div class="row q-pa-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <TableData :columns="columnSalaries" :row="formDetail.salaries" />
-          </div>
-        </div>
-      </q-card>
-
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
-        </div>
-        <q-separator />
-        <div class="row q-pa-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <TableData :columns="columnTraining" :row="formDetail.trainings" />
-          </div>
-        </div>
-      </q-card>
-
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
-        </div>
-        <q-separator />
-        <div class="row q-pa-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">-</div>
-        </div>
-      </q-card>
-
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-bold row items-center bg-grey-2">
-          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
-        </div>
-        <q-separator />
-        <div class="row q-pa-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <TableData :columns="columnProjectsProposed" />
-          </div>
-        </div>
-      </q-card>
+      </div>
+      <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
     </q-card>
-  </q-scroll-area>
+
+    <q-card class="col-12  cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <TableData
+        class="col-12"
+        :columns="columnsCertificates"
+        :row="formDetail.certificates"
+      />
+    </q-card>
+
+    <q-card class="col-12  cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-10">
+        <TableData :columns="columnSalaries" :row="formDetail.salaries" />
+      </div>
+    </q-card>
+    
+    <q-card class="col-12 cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/>
+    </q-card>
+
+    <q-card class="col-12  cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-12 q-pa-sm">
+        -
+      </div>
+    </q-card>
+
+    <q-card class="col-12  cardSp1" bordered>
+      <div class="text-weight-bold row items-center bg-grey-2 col-12">
+        <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="col-10">
+        <TableData :columns="columnProjectsProposed" />
+      </div>
+    </q-card>
+  </div>
 </template>
 
-<style scoped></style>
+<style >
+.cardSp1{
+  border: 1px solid #d6dee1;
+  margin-bottom: 10px ;
+  box-shadow: none !important;
+}
+</style>
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep3.vue b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
index 11a6fc3..33694f6 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep3.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
@@ -16,54 +16,58 @@ const props = defineProps({
 const modalPerview = ref<boolean>(false);
 
 const store = useEvaluateStore();
+const tabPanels = store.tabPanels
 </script>
 
 <template>
   <div class="col-12 row">
-    <q-space />
-    <q-btn
-      flat
-      round
-      color="primary"
-      icon="download"
-      target="_blank"
-      :href="props.urlDownloadFile"
-    >
-      <q-tooltip>ดาวน์โหลด</q-tooltip>
-    </q-btn>
-    <q-btn
-      flat
-      round
-      color="primary"
-      icon="mdi-fullscreen"
-      @click="modalPerview = true"
-      ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
-    >
+    <div class="col-12 row items-center q-px-sm q-py-xs">
+      <div class="q-pl-sm text-weight-medium" >เอกสารที่อัปโหลด</div>
+      <q-space />
+      <q-btn
+        flat
+        color="primary"
+        icon="download"
+        target="_blank"
+        :href="props.urlDownloadFile"
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        color="primary"
+        icon="mdi-fullscreen"
+        @click="modalPerview = true"
+        ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
+      >
+    </div>
+   
+    
+
+    <q-tab-panels v-model="store.tabPanels" animated swipeable vertical class="col-12">
+      <q-tab-panel name="1">
+        <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
+      </q-tab-panel>
+
+      <q-tab-panel name="2">
+        <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
+      </q-tab-panel>
+
+      <q-tab-panel name="3">
+        <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
+      </q-tab-panel>
+      <q-tab-panel name="4">
+        <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
+      </q-tab-panel>
+      <q-tab-panel name="5">
+        <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
+      </q-tab-panel>
+      <q-tab-panel name="6">
+        <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
+      </q-tab-panel>
+    </q-tab-panels>
   </div>
 
-  <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
-    <q-tab-panel name="1">
-      <ViewPDF :pdfSrc="props.pdfSrc" />
-    </q-tab-panel>
-
-    <q-tab-panel name="2">
-      <ViewPDF :pdfSrc="props.pdfSrc" />
-    </q-tab-panel>
-
-    <q-tab-panel name="3">
-      <ViewPDF :pdfSrc="props.pdfSrc" />
-    </q-tab-panel>
-    <q-tab-panel name="4">
-      <ViewPDF :pdfSrc="props.pdfSrc" />
-    </q-tab-panel>
-    <q-tab-panel name="5">
-      <ViewPDF :pdfSrc="props.pdfSrc" />
-    </q-tab-panel>
-    <q-tab-panel name="6">
-      <ViewPDF :pdfSrc="props.pdfSrc" />
-    </q-tab-panel>
-  </q-tab-panels>
-
   <q-dialog v-model="modalPerview" full-width fullHeight>
     <q-card>
       <q-card-section>