From c3191c2fb42ab0a8d142bdcfe1a614b031d1feb6 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Wed, 17 Jan 2024 09:27:57 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B9=88=E0=B8=87=20Layout?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5=E0=B9=83?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EvaluateStepMain.vue           | 333 ++++++------
 .../components/PopupCheckFeatures.vue         |   2 +-
 .../06_evaluate/components/step/step1.vue     | 264 ++++-----
 .../06_evaluate/components/step/step4.vue     |  20 +-
 .../components/viewstep/popupHistory.vue      |   2 +-
 .../components/viewstep/viewStep1.vue         | 500 +++++++++---------
 .../components/viewstep/viewStep3.vue         |   7 +-
 7 files changed, 553 insertions(+), 575 deletions(-)

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 81cca57..4586298 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -559,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="toptitle2 text-white col-12 row items-center">
+      <div class="toptitle text-white col-12 row items-center">
         <q-btn
           icon="mdi-arrow-left"
           unelevated
@@ -577,23 +577,19 @@ onMounted(async () => {
     <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-splitter
-            v-model="splitterModel"
-            :style="$q.screen.lt.sm ? 'height: 74vh;' : 'height: auto;'"
-            :horizontal="$q.screen.lt.sm"
-          >
-
-            <template v-slot:before>
+          <div class="col-xs-12 col-sm-3">
+            <div class="col-12 row no-wrap">
               <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="col-12 row items-center no-wrap">
                   <div class="toptitle2">
                     {{
                       route.params.type === "expert"
                         ? "ประเมินชำนาญการ"
                         : "ประเมินชำนาญการพิเศษ"
                     }}
-                    </div>
-                    <q-space />
+                  </div>
+                  <q-space/>
+                  <div>
                     <q-btn
                       flat
                       round
@@ -601,188 +597,165 @@ onMounted(async () => {
                       color="primary"
                       icon="history"
                       @click="onClickPopupHistory"
-                    >
+                      >
                       <q-tooltip>ประวัติการประเมิน</q-tooltip>
                     </q-btn>
                   </div>
-                  <div class="col-12 row">
-                    <Stepper />
-                  </div>
+                </div>
+                <div>
+                  <Stepper />
+                </div>
               </div>
-            </template>
+              <div class="col-12 row">
+                <q-separator vertical/>
+              </div>
+            </div>
+          </div>
 
-            <template v-slot:after>
-              <div class="col-12 row q-pa-md" >
-                <div class="col-12 row" v-if="showLoadStatus">
-                    <div class="toptitle2 q-pt-xs items-center">
-                      {{ 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 class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
+            <div class="col-12 row items-center">
+              <div class="col-9">
+                <div class="toptitle2">
+                  {{ store.step }}.{{ store.title[store.step - 1] }}
                 </div>
-                <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
-                         v-if="store.step === 1"
-                          @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
-                          v-if="store.step === 2"
-                          @update:form="updateformCommand"
-                        />
-                      </q-card>
-                      <q-card 
-                        v-if="store.step === 3" flat bordered class="col-12 shadow-0">
-                        <Step3
-                          v-if="store.step === 3"
-                          @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 shadow-0"
-                        bordered
-                        flat
-                        v-if="store.step === 1"
-                      >
-                          <ViewStep1
-                            v-if="store.step === 1"
-                            @update:formDeital="updateFormDetail"
-                            :data="formDataStep1"
-                          />
-                      </q-card>
-                      <q-card v-if="store.step === 3 && pdfSrc" class="row shadow-0" bordered flat >
-                          <ViewStep3
-                            v-if="store.step === 3 && pdfSrc"
-                            :pdfSrc="pdfSrc"
-                            :urlDownloadFile="urlDownloadFile"
-                          />
-                      </q-card>
-                      <q-card v-if="store.step === 7 && pdfSrc" class="row  shadow-0" bordered flat >
-                          <ViewStep7
-                            v-if="store.step === 7 && pdfSrc"
-                            :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()"
+              </div>
+              <div class="col-3 text-right">
+                <q-btn
+                  v-if="store.step === 1"
+                  :href="externalLink"
+                  target="_blank"
+                  outline
+                  color="blue"
+                  dense
+                  class="q-px-md"
+                  no-caps
+                >
+                  ตรวจสอบคุณสมบัติกับ ก.พ.
+                </q-btn>
+              </div>
+            </div>
+            <div class="row q-col-gutter-md col-12 q-pt-sm">
+              <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 shadow-0">
+                    <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>
+              </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"
                   />
-
-                  <q-btn
-                    v-else-if="
-                      store.step >= store.currentStep &&
-                      (store.step == 3 || store.step == 7)
-                    "
-                    unelevated
-                    label="ยื่นเอกสาร"
-                    color="public"
-                    @click="onCilckNextStep()"
+                  <ViewStep3
+                    v-if="store.step === 3 && 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()"
+                  <ViewStep7
+                    v-if="store.step === 7 && pdfSrc"
+                    :pdfSrc="pdfSrc"
+                    :urlDownloadFile="urlDownloadFile"
                   />
                 </div>
               </div>
-            </template>
+            </div>
+            <div class="q-pt-sm 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()"
+              />
 
-          </q-splitter>
-          
+              <q-btn
+                v-else-if="
+                  store.step >= store.currentStep &&
+                  (store.step == 3 || store.step == 7)
+                "
+                unelevated
+                label="ยื่นเอกสาร"
+                color="public"
+                @click="onCilckNextStep()"
+              />
 
-          
+              <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>
diff --git a/src/modules/06_evaluate/components/PopupCheckFeatures.vue b/src/modules/06_evaluate/components/PopupCheckFeatures.vue
index 11b37e7..28da026 100644
--- a/src/modules/06_evaluate/components/PopupCheckFeatures.vue
+++ b/src/modules/06_evaluate/components/PopupCheckFeatures.vue
@@ -148,7 +148,7 @@ watch(props, () => {
     <q-card style="width: 40vw">
       <DialogHeader :tittle="props.title" :close="props.closeModal" />
       <q-separator />
-      <q-card-section class="q-pa-sm bg-grey-1">
+      <q-card-section class="q-px-sm q-pt-none q-pb-sm bg-grey-1">
         <Table
           style="max-height: 80vh"
           :view-mode="false"
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index 5ec8041..bf022d6 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -84,139 +84,141 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-list dense>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isEducationalQft"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          >คุณวุฒิการศึกษา
-          <q-btn
-            flat
-            round
-            dense
-            color="info"
-            icon="info"
-            @click="openModal(false)"
+  <div class="q-pa-md">
+    <q-list dense>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isEducationalQft"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label
+            >คุณวุฒิการศึกษา
+            <q-btn
+              flat
+              round
+              dense
+              color="info"
+              icon="info"
+              @click="openModal(false)"
+            >
+              <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isGovermantServiceHtr"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>ประวัติการรับราชการ </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isOperatingExp"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isMinPeriodOfTenure"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label
+            >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
+            <q-btn
+              flat
+              round
+              dense
+              color="info"
+              icon="info"
+              @click="openModal(true)"
+            >
+              <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
+            </q-btn></q-item-label
           >
-            <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
-          </q-btn>
-        </q-item-label>
-      </q-item-section>
-    </q-item>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isGovermantServiceHtr"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label>ประวัติการรับราชการ </q-item-label>
-      </q-item-section>
-    </q-item>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isOperatingExp"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
-      </q-item-section>
-    </q-item>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isMinPeriodOfTenure"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-          <q-btn
-            flat
-            round
-            dense
-            color="info"
-            icon="info"
-            @click="openModal(true)"
+        </q-item-section>
+      </q-item>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isHaveSpecificQft"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label
+            >มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
+            ในมาตรฐานกำหนดตำแหน่ง</q-item-label
           >
-            <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
-          </q-btn></q-item-label
-        >
-      </q-item-section>
-    </q-item>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isHaveSpecificQft"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          >มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
-          ในมาตรฐานกำหนดตำแหน่ง</q-item-label
-        >
-      </q-item-section>
-    </q-item>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isHaveProLicense"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          >มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
-          คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล วิศวกรโยธา
-          สถาปนิก ฯลฯ)</q-item-label
-        >
-      </q-item-section>
-    </q-item>
-    <q-item v-ripple class="listItem">
-      <q-item-section avatar>
-        <q-checkbox
-          :disable="store.currentStep > 1"
-          keep-color
-          color="primary"
-          v-model="formData.isHaveMinPeriodOrHoldPos"
-          @update:model-value="updateValue"
-        />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          >มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
-        >
-      </q-item-section>
-    </q-item>
-  </q-list>
+        </q-item-section>
+      </q-item>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isHaveProLicense"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label
+            >มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
+            คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล วิศวกรโยธา
+            สถาปนิก ฯลฯ)</q-item-label
+          >
+        </q-item-section>
+      </q-item>
+      <q-item v-ripple class="listItem">
+        <q-item-section avatar>
+          <q-checkbox
+            :disable="store.currentStep > 1"
+            keep-color
+            color="primary"
+            v-model="formData.isHaveMinPeriodOrHoldPos"
+            @update:model-value="updateValue"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label
+            >มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
+          >
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
 
   <PopupCheckFeatures
     :modal="modal"
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index d5522c0..c60fc18 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -5,17 +5,15 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 text-center">
-      <q-badge
-        v-if="status == 'WAIT_CHECK_DOC_V1'"
-        outline
-        color="orange-5"
-        label="รอตรวจสอบคุณสมบัติ"
-        class="q-pa-sm"
-        style="font-size: 16px"
-      />
-    </div>
+  <div class="col-12 row justify-center">
+    <q-badge
+      v-if="status == 'WAIT_CHECK_DOC_V1'"
+      outline
+      color="orange-5"
+      label="รอตรวจสอบคุณสมบัติ"
+      class="q-pa-sm"
+      style="font-size: 16px"
+    />
   </div>
 </template>
 
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index 0bd2c01..f4c10a3 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -125,7 +125,7 @@ watch(
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
-          <div class="col-12 q-mt-sm">
+          <div class="col-12">
             <q-table
               ref="table"
               flat
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index b37835a..081650c 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -213,268 +213,270 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="col-12 row  q-pa-md" :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>
+  <q-card bordered class="col-12 row shadow-0 q-pa-md" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
+    <div class="row col-12">
+      <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">
-        <div class="row q-col-gutter-sm">
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.prefix"
-              label="คำนำหน้าชื่อ"
-            ></q-input>
+        <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
+                readonly
+                :model-value="formDetail.prefix"
+                label="คำนำหน้าชื่อ"
+              ></q-input>
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.fullName"
+                label="ชื่อ - นามสกุล"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="formDetail.birthDate"
+                readonly
+                label="วันเดือนปีเกิด"
+              >
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.position"
+                label="ตำแหน่ง"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.posNo"
+                label="ตำแหน่งเลขที่"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.salary"
+                label="เงินเดือน"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.positionLevel"
+                label="ระดับปัจจุบัน"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.positionLevel"
+                label="ระดับที่ประเมิน"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.govAge"
+                label="อายุราชการ"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-9">
+              <q-input
+                borderless
+                readonly
+                :model-value="formDetail.oc"
+                label="สังกัด"
+              />
+            </div>
           </div>
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.fullName"
-              label="ชื่อ - นามสกุล"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              :model-value="formDetail.birthDate"
-              readonly
-              label="วันเดือนปีเกิด"
+        </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="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
+            <div
+              class="row q-col-gutter-sm"
+              v-for="(education, index) in formDetail.educations"
+              :key="index"
             >
-            </q-input>
-          </div>
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.position"
-              label="ตำแหน่ง"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.posNo"
-              label="ตำแหน่งเลขที่"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.salary"
-              label="เงินเดือน"
-            />
-          </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.educationLevel"
+                  label="ระดับศึกษา"
+                />
+              </div>
 
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.positionLevel"
-              label="ระดับปัจจุบัน"
-            />
-          </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.institute"
+                  label="สถานศึกษา"
+                />
+              </div>
 
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.positionLevel"
-              label="ระดับที่ประเมิน"
-            />
-          </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  :model-value="date2Thai(education.startDate)"
+                  readonly
+                  label="ตั้งแต่"
+                >
+                </q-input>
+              </div>
 
-          <div class="col-xs-6 col-sm-4 col-md-3">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.govAge"
-              label="อายุราชการ"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-9">
-            <q-input
-              borderless
-              readonly
-              :model-value="formDetail.oc"
-              label="สังกัด"
-            />
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  :model-value="date2Thai(education.endDate)"
+                  readonly
+                  label="ถึง"
+                >
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  :model-value="date2Thai(education.finishDate)"
+                  readonly
+                  label="วันที่สำเร็จการศึกษา"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
+                  label="วุฒิการศึกษาในตําแหน่ง"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.degree"
+                  label="วุฒิการศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.field"
+                  label="สาขาวิชา/ทาง"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.fundName"
+                  label="ทุน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.gpa"
+                  label="เกรดเฉลี่ย"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-6">
+                <q-input
+                  borderless
+                  readonly
+                  :model-value="education.country"
+                  label="ประเทศ"
+                />
+              </div>
           </div>
         </div>
-      </div>
-    </q-card>
+        <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</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="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
-          <div
-            class="row q-col-gutter-sm"
-            v-for="(education, index) in formDetail.educations"
-            :key="index"
-          >
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.educationLevel"
-                label="ระดับศึกษา"
-              />
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.institute"
-                label="สถานศึกษา"
-              />
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                :model-value="date2Thai(education.startDate)"
-                readonly
-                label="ตั้งแต่"
-              >
-              </q-input>
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                :model-value="date2Thai(education.endDate)"
-                readonly
-                label="ถึง"
-              >
-              </q-input>
-            </div>
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                :model-value="date2Thai(education.finishDate)"
-                readonly
-                label="วันที่สำเร็จการศึกษา"
-              >
-              </q-input>
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
-                label="วุฒิการศึกษาในตําแหน่ง"
-              />
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.degree"
-                label="วุฒิการศึกษา"
-              />
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.field"
-                label="สาขาวิชา/ทาง"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.fundName"
-                label="ทุน"
-              />
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-3">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.gpa"
-                label="เกรดเฉลี่ย"
-              />
-            </div>
-
-            <div class="col-xs-6 col-sm-4 col-md-6">
-              <q-input
-                borderless
-                readonly
-                :model-value="education.country"
-                label="ประเทศ"
-              />
-            </div>
+      <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>
-      <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
-    </q-card>
+        <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>
-      <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-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-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>
+      <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>
+  </q-card>
 </template>
 
 <style >
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep3.vue b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
index 33694f6..03cb466 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep3.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
@@ -20,7 +20,7 @@ const tabPanels = store.tabPanels
 </script>
 
 <template>
-  <div class="col-12 row">
+  <q-card bordered class="col-12 row shadow-0">
     <div class="col-12 row items-center q-px-sm q-py-xs">
       <div class="q-pl-sm text-weight-medium" >เอกสารที่อัปโหลด</div>
       <q-space />
@@ -29,6 +29,7 @@ const tabPanels = store.tabPanels
         color="primary"
         icon="download"
         target="_blank"
+        dense
         :href="props.urlDownloadFile"
       >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
@@ -37,6 +38,8 @@ const tabPanels = store.tabPanels
         flat
         color="primary"
         icon="mdi-fullscreen"
+        dense
+        class="q-ml-sm"
         @click="modalPerview = true"
         ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
       >
@@ -66,7 +69,7 @@ const tabPanels = store.tabPanels
         <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
       </q-tab-panel>
     </q-tab-panels>
-  </div>
+  </q-card>
 
   <q-dialog v-model="modalPerview" full-width fullHeight>
     <q-card>