From 0a0a21e707ae8f7f1362eb5fc4ee6af010f9b924 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Wed, 17 Jan 2024 10:37:30 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20st?=
 =?UTF-8?q?epper=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20ui=20step=20=E0=B8=A0?=
 =?UTF-8?q?=E0=B8=82=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/DialogMain.vue     |   2 +-
 .../components/EvaluateStepMain.vue           | 315 +++++++++---------
 .../06_evaluate/components/Stepper.vue        | 131 ++------
 .../06_evaluate/components/step/step4.vue     |   2 +-
 .../06_evaluate/components/step/step5.vue     | 154 ++++-----
 .../06_evaluate/components/step/step6.vue     | 257 +++++++-------
 .../components/viewstep/viewStep3.vue         |   2 +-
 7 files changed, 399 insertions(+), 464 deletions(-)

diff --git a/src/modules/06_evaluate/components/DialogMain.vue b/src/modules/06_evaluate/components/DialogMain.vue
index 068212a..d645c61 100644
--- a/src/modules/06_evaluate/components/DialogMain.vue
+++ b/src/modules/06_evaluate/components/DialogMain.vue
@@ -51,7 +51,7 @@ watch(props, () => {
 
 <template>
   <q-dialog v-model="props.modal">
-    <q-card style="width: 800px; max-width: 90vw; border-radius: 20px">
+    <q-card style="width: 800px; max-width: 90vw; border-radius: 8px">
       <DialogHeader
         class="text-center text-edit"
         :tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 4586298..651119f 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -577,34 +577,36 @@ 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">
-          <div class="col-xs-12 col-sm-3">
+          <div class="col-xs-12 col-sm-3 row">
             <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 no-wrap">
-                  <div class="toptitle2">
-                    {{
-                      route.params.type === "expert"
-                        ? "ประเมินชำนาญการ"
-                        : "ประเมินชำนาญการพิเศษ"
-                    }}
+                <div class="col-12">
+                  <div class="col-12 row items-center no-wrap">
+                    <div class="toptitle2">
+                      {{
+                        route.params.type === "expert"
+                          ? "ประเมินชำนาญการ"
+                          : "ประเมินชำนาญการพิเศษ"
+                      }}
+                    </div>
+                    <q-space/>
+                    <div>
+                      <q-btn
+                        flat
+                        round
+                        dense
+                        color="primary"
+                        icon="history"
+                        @click="onClickPopupHistory"
+                        >
+                        <q-tooltip>ประวัติการประเมิน</q-tooltip>
+                      </q-btn>
+                    </div>
                   </div>
-                  <q-space/>
                   <div>
-                    <q-btn
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="history"
-                      @click="onClickPopupHistory"
-                      >
-                      <q-tooltip>ประวัติการประเมิน</q-tooltip>
-                    </q-btn>
+                    <Stepper />
                   </div>
                 </div>
-                <div>
-                  <Stepper />
-                </div>
               </div>
               <div class="col-12 row">
                 <q-separator vertical/>
@@ -612,148 +614,149 @@ onMounted(async () => {
             </div>
           </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="col-xs-12 col-sm-9 q-pa-md row" v-if="showLoadStatus">
+            <div class="col-12">
+              <div class="col-12 row items-center">
                 <div class="toptitle2">
                   {{ store.step }}.{{ store.title[store.step - 1] }}
                 </div>
-              </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
+                <q-space/>
+                <div>
+                  <q-btn
                     v-if="store.step === 1"
-                    @update:formDeital="updateFormDetail"
-                    :data="formDataStep1"
-                  />
-                  <ViewStep3
-                    v-if="store.step === 3 && pdfSrc"
-                    :pdfSrc="pdfSrc"
-                    :urlDownloadFile="urlDownloadFile"
-                  />
-                  <ViewStep7
-                    v-if="store.step === 7 && pdfSrc"
-                    :pdfSrc="pdfSrc"
-                    :urlDownloadFile="urlDownloadFile"
-                  />
+                    :href="externalLink"
+                    target="_blank"
+                    outline
+                    color="blue"
+                    dense
+                    class="q-px-md"
+                    no-caps
+                  >
+                    ตรวจสอบคุณสมบัติกับ ก.พ.
+                  </q-btn>
                 </div>
               </div>
-            </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()"
-              />
+              <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"
+                    />
+                    <ViewStep3
+                      v-if="store.step === 3 && pdfSrc"
+                      :pdfSrc="pdfSrc"
+                      :urlDownloadFile="urlDownloadFile"
+                    />
+                    <ViewStep7
+                      v-if="store.step === 7 && pdfSrc"
+                      :pdfSrc="pdfSrc"
+                      :urlDownloadFile="urlDownloadFile"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="q-pt-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()"
+                />
 
-              <q-btn
-                v-else-if="
-                  store.step >= store.currentStep &&
-                  (store.step == 3 || store.step == 7)
-                "
-                unelevated
-                label="ยื่นเอกสาร"
-                color="public"
-                @click="onCilckNextStep()"
-              />
+                <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()"
-              />
+                <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>
         </q-card>
diff --git a/src/modules/06_evaluate/components/Stepper.vue b/src/modules/06_evaluate/components/Stepper.vue
index f00c3d3..51a35bd 100644
--- a/src/modules/06_evaluate/components/Stepper.vue
+++ b/src/modules/06_evaluate/components/Stepper.vue
@@ -15,7 +15,7 @@ const store = useEvaluateStore();
     :bordered="false"
     header-nav
     dense
-    class="stepEva"
+    class="stepEva text-grey-8"
   >
     <q-step
       keep-alive
@@ -108,106 +108,6 @@ const store = useEvaluateStore();
     >
     </q-step>
   </q-stepper>
-  <!-- <q-stepper
-    v-model="store.step"
-    dense
-    vertical
-    animated
-    flat
-    ref="stepper"
-    class="stepEva"
-  >
-    <q-step
-      keep-alive
-      :name="1"
-      prefix="1"
-      title="ตรวจสอบคุณสมบัติ"
-      :done="store.currentStep >= 1"
-      :disable="store.currentStep < 1"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="2"
-      prefix="2"
-      title="จัดเตรียมเอกสารเล่ม 1"
-      :done="store.currentStep >= 2"
-      :disable="store.currentStep < 2"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="3"
-      prefix="3"
-      title="ตรวจสอบเอกสารเล่ม 1"
-      :done="store.currentStep >= 3"
-      :disable="store.currentStep < 3"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="4"
-      prefix="4"
-      title="รอตรวจสอบคุณสมบัติ"
-      :done="store.currentStep >= 4"
-      :disable="store.currentStep < 4"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="5"
-      prefix="5"
-      title="ประกาศบนเว็บไซต์"
-      :done="store.currentStep >= 5"
-      :disable="store.currentStep < 5"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="6"
-      prefix="6"
-      title="จัดเตรียมเอกสารเล่ม 2"
-      :done="store.currentStep >= 6"
-      :disable="store.currentStep < 6"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="7"
-      prefix="7"
-      title="รอพิจารณาผลการประเมิน 2"
-      :done="store.currentStep >= 7"
-      :disable="store.currentStep < 7"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="8"
-      prefix="8"
-      title="ตรวจสอบความถูกต้องของเอกสารเล่ม 2"
-      :done="store.currentStep >= 8"
-      :disable="store.currentStep < 8"
-      class="subStep"
-    >
-    </q-step>
-
-    <q-step
-      :name="9"
-      prefix="9"
-      title="เสร็จสิ้น"
-      :done="store.currentStep >= 9"
-      :disable="store.currentStep < 9"
-      class="subStep"
-    >
-    </q-step>
-  </q-stepper> -->
 </template>
 
 <style>
@@ -219,4 +119,33 @@ const store = useEvaluateStore();
   border-radius: 8px;
   font-size: 0.9rem;
 }
+
+/* steppe active */
+.stepEva .q-stepper__tab--active .q-stepper__title{
+  color: #34373C !important;
+  font-weight: 500 !important;
+}
+.stepEva .q-stepper__tab--active .q-stepper__dot{
+  color: white  !important;
+  border: 1.5px solid #02A998;
+}
+
+.stepEva .q-stepper__tab--active .q-stepper__dot span{
+  color: #02A998;
+}
+
+/* steppe done */
+.stepEva .q-stepper__tab--done .q-stepper__dot{
+  color: #02A998 ;
+}
+
+.stepEva.q-stepper--vertical .q-stepper__dot:before, .stepEva.q-stepper--vertical .q-stepper__dot:after {
+  width: 1px;
+  background: #C8D3DB;
+}
+.stepEva .q-stepper__tab .q-stepper__title {
+  color: #9a9a9a;
+  font-weight: 400;
+}
+
 </style>
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index c60fc18..d4ed7b9 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -5,7 +5,7 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
+  <div class="col-12 row q-pa-md justify-center">
     <q-badge
       v-if="status == 'WAIT_CHECK_DOC_V1'"
       outline
diff --git a/src/modules/06_evaluate/components/step/step5.vue b/src/modules/06_evaluate/components/step/step5.vue
index 507bc99..7cdb85e 100644
--- a/src/modules/06_evaluate/components/step/step5.vue
+++ b/src/modules/06_evaluate/components/step/step5.vue
@@ -80,85 +80,87 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="row q-gutter-md">
-    <div class="col-12 text-center">
-      <q-banner class="text-weight-bold text-red-14 bg-red-2">
-        <div class="text-weight-bold">
-          <q-icon name="info_outline" color="red-14" size="24px" />
-          ประกาศเมื่อวันที่ {{ dateStartAnnounce }} ถึง {{ dateEndAnnounce }}
-        </div>
-      </q-banner>
-    </div>
-
-    <!-- เอกสารประกาศผลการคัดเลือกบุคคล -->
-    <div class="col-12">
-      <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 q-pa-md">
-          <div class="col-12">
-            <q-list>
-              <q-item v-for="(item, index) in items" :key="index">
-                <q-item-section>
-                  <q-item-label>{{ item.label }}</q-item-label>
-                </q-item-section>
-
-                <q-item-section side top>
-                  <q-btn
-                    flat
-                    round
-                    color="primary"
-                    icon="mdi-clipboard-outline"
-                    @click="onClickfetchDocument(item.fileName, 'COPPY')"
-                  >
-                    <q-tooltip>คัดลอกลิงก์</q-tooltip>
-                  </q-btn>
-                </q-item-section>
-              </q-item>
-            </q-list>
+  <div class="row col-12 q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 text-center">
+        <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
+          <div class="text-weight-bold">
+            <q-icon name="info_outline" color="red-14" size="24px" />
+            ประกาศเมื่อวันที่ {{ dateStartAnnounce }} ถึง {{ dateEndAnnounce }}
           </div>
-        </div>
-      </q-card>
-    </div>
+        </q-banner>
+      </div>
 
-    <!-- บันทึกแจ้งผลการประกาศคัดเลือก -->
-    <div class="col-12" v-if="statusFile">
-      <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 q-pa-md">
-          <div class="col-12">
-            <q-list>
-              <q-item>
-                <q-item-section>
-                  <q-item-label>บันทึกแจ้งผลการประกาศคัดเลือก</q-item-label>
-                </q-item-section>
-
-                <q-item-section side top>
-                  <q-btn
-                    flat
-                    round
-                    color="primary"
-                    icon="mdi-clipboard-outline"
-                    @click="
-                      onClickfetchDocument(
-                        'บันทึกแจ้งผลการประกาศคัดเลือก',
-                        'COPPY'
-                      )
-                    "
-                  >
-                    <q-tooltip>คัดลอกลิงก์</q-tooltip>
-                  </q-btn>
-                </q-item-section>
-              </q-item>
-            </q-list>
+      <!-- เอกสารประกาศผลการคัดเลือกบุคคล -->
+      <div class="col-12">
+        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            เอกสารประกาศผลการคัดเลือกบุคคล
           </div>
-        </div>
-      </q-card>
+          <div class="col-12"><q-separator /></div>
+          <div class="row q-pa-sm">
+            <div class="col-12">
+              <q-list>
+                <q-item v-for="(item, index) in items" :key="index">
+                  <q-item-section>
+                    <q-item-label>{{ item.label }}</q-item-label>
+                  </q-item-section>
+
+                  <q-item-section side top>
+                    <q-btn
+                      flat
+                      round
+                      color="primary"
+                      icon="mdi-clipboard-outline"
+                      @click="onClickfetchDocument(item.fileName, 'COPPY')"
+                    >
+                      <q-tooltip>คัดลอกลิงก์</q-tooltip>
+                    </q-btn>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <!-- บันทึกแจ้งผลการประกาศคัดเลือก -->
+      <div class="col-12" v-if="statusFile">
+        <q-card bordered class="shadow-0" 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 q-pa-sm">
+            <div class="col-12">
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>บันทึกแจ้งผลการประกาศคัดเลือก</q-item-label>
+                  </q-item-section>
+
+                  <q-item-section side top>
+                    <q-btn
+                      flat
+                      round
+                      color="primary"
+                      icon="mdi-clipboard-outline"
+                      @click="
+                        onClickfetchDocument(
+                          'บันทึกแจ้งผลการประกาศคัดเลือก',
+                          'COPPY'
+                        )
+                      "
+                    >
+                      <q-tooltip>คัดลอกลิงก์</q-tooltip>
+                    </q-btn>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+          </div>
+        </q-card>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index b26e2e8..864a511 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -241,23 +241,23 @@ watch(
 </script>
 
 <template>
-  <div class="row q-col-gutter-md">
-    <div class="col-12 text-center">
-      <q-banner class="text-weight-bold text-red-14 bg-red-2">
-        <div class="text-weight-bold">
-          <q-icon name="info_outline" color="red-14" size="24px" />
-          วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
-        </div>
-      </q-banner>
-    </div>
+  <div class="row col-12 q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 text-center">
+          <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
+          <div class="text-weight-bold">
+            <q-icon name="info_outline" color="red-14" size="24px" />
+            วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
+          </div>
+        </q-banner>
+      </div>
 
-    <!-- ผลงาน -->
-    <div class="col-12">
-      <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="col-12">
+        <q-card bordered class="shadow-0" 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="col-12">
             <div class="row q-col-gutter-md col-12">
               <div class="col-xs-12 col-sm-12 row">
                 <div class="row col-12 q-col-gutter-md q-pa-sm">
@@ -271,6 +271,7 @@ watch(
                     v-model="formCommand.subject"
                     @update:model-value="updateInput(formCommand)"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                    hide-bottom-space
                     lazy-rules
                   />
                   <q-input
@@ -282,6 +283,7 @@ watch(
                     v-model="formCommand.author"
                     @update:model-value="updateInput(formCommand)"
                     label="เจ้าของผลงาน"
+                    hide-bottom-space
                     :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                     lazy-rules
                   />
@@ -294,6 +296,7 @@ watch(
                     v-model="formCommand.assignedPosition"
                     @update:model-value="updateInput(formCommand)"
                     label="ตำแหน่งที่ได้รับ"
+                    hide-bottom-space
                     :rules="[
                       (val) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
                     ]"
@@ -303,52 +306,50 @@ watch(
               </div>
             </div>
           </div>
-        </div>
-      </q-card>
-    </div>
+        </q-card>
+      </div>
 
-    <!-- เลือกผู้เซ็นเอกสาร -->
-    <div class="col-12">
-      <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-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 != 6"
-                    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 != 6"
-                    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 class="col-12">
+        <q-card bordered class="shadow-0" 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="col-12">
+              <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 != 6"
+                      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 != 6"
+                      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>
               </div>
-            </div>
 
             <div class="row q-col-gutter-md col-12">
               <div class="col-xs-12 col-sm-12 row">
@@ -384,80 +385,80 @@ watch(
               </div>
             </div>
           </div>
-        </div>
-      </q-card>
-    </div>
+        </q-card>
+      </div>
 
-    <!-- อัปไฟล์ -->
-    <div class="col-6" v-if="store.currentStep === 6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          เอกสารเล่ม 2
-        </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
-                  v-if="downloadUrl"
-                  :href="downloadUrl"
-                  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">
-                <!-- :rules="[(val) => !!val || 'เลือกไฟล']" -->
+      <!-- อัปไฟล์ -->
+      <div class="col-12" v-if="store.currentStep === 6">
+        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            เอกสารเล่ม 2
+          </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
+                    v-if="downloadUrl"
+                    :href="downloadUrl"
+                    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">
+                  <!-- :rules="[(val) => !!val || 'เลือกไฟล']" -->
 
-                <q-file
-                  :disable="!store.statusUpload"
-                  ref="fileEvaluation1Ref"
-                  v-model="fileEvaluation1"
-                  class="col-12"
-                  outlined
-                  dense
-                  lazy-rules
-                  accept=".pdf"
-                  :rules="
-                    downloadUrl === ''
-                      ? [(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(
-                      'เล่ม 2',
-                      evaluateId,
-                      '1-เอกสารเล่ม 2',
-                      fileEvaluation1
-                    )
-                  "
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
+                  <q-file
+                    :disable="!store.statusUpload"
+                    ref="fileEvaluation1Ref"
+                    v-model="fileEvaluation1"
+                    class="col-12"
+                    outlined
+                    dense
+                    lazy-rules
+                    accept=".pdf"
+                    :rules="
+                      downloadUrl === ''
+                        ? [(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(
+                        'เล่ม 2',
+                        evaluateId,
+                        '1-เอกสารเล่ม 2',
+                        fileEvaluation1
+                      )
+                    "
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </q-card>
+        </q-card>
+      </div>
     </div>
   </div>
 
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep3.vue b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
index 757af7d..39055d2 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep3.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
@@ -21,7 +21,7 @@ const tabPanels = store.tabPanels
 
 <template>
   <q-card bordered class="col-12 row shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
-    <div class="col-12 row items-center q-px-sm q-py-xs">
+    <div class="col-12 row items-center q-px-sm q-pb-xs">
       <div class="q-pl-sm text-weight-medium" >เอกสารที่อัปโหลด</div>
       <q-space />
       <q-btn