From d3b138254b3c3ec775fab42103873727379135e5 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 18 Jan 2024 13:51:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20step?=
 =?UTF-8?q?=20=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B9=80=E0=B8=AB=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/step/step4.vue          |   4 +-
 .../components/Detail/step/step5.vue          |  72 +-
 .../components/Detail/step/step8.vue          | 969 +++++++++---------
 3 files changed, 499 insertions(+), 546 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index a9b9fbfe1..b8655c9f6 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -433,7 +433,7 @@ onMounted(async () => {
           <div v-if="store.currentStep == 4" >
             <q-btn
               icon="download"
-              color="primary"
+              color="indigo"
               flat
               dense
               round
@@ -455,7 +455,7 @@ onMounted(async () => {
               target="_blank"
               class="col-12"
               icon="visibility"
-              color="primary"
+              color="blue"
               flat
               dense
               round
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
index 253d6e7c0..6b961b1f6 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@@ -315,7 +315,7 @@ onMounted(async () => {
               target="_blank"
               class="col-12"
               icon="visibility"
-              color="primary"
+              color="blue"
               flat
               dense
               round
@@ -325,44 +325,38 @@ onMounted(async () => {
           </div>
         </div>
         <div class="col-12" v-if="store.currentStep == 5"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm" v-if="store.currentStep == 5">
-            <div class="row col-12">
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  ref="fileEvaluation5Ref"
-                  v-model="fileEvaluation5"
-                  class="col-12"
-                  outlined
-                  dense
-                  label="อัปโหลดไฟล์"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                  :rules="
-                    download10Url === ''
-                      ? [(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
-                  color="primary"
-                  icon="mdi-upload"
-                  @click="upLoadFile(fileEvaluation5)"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
+        <div class="col-12 q-pa-sm" v-if="store.currentStep == 5">
+          <q-file
+            ref="fileEvaluation5Ref"
+            v-model="fileEvaluation5"
+            class="col-12"
+            outlined
+            dense
+            label="อัปโหลดไฟล์"
+            hide-bottom-space
+            lazy-rules
+            accept=".pdf"
+            :rules="
+              download10Url === ''
+                ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                : []
+            "
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+            <template v-slot:after>
+              <q-btn
+                flat
+                round
+                dense
+                color="primary"
+                icon="mdi-upload"
+                @click="upLoadFile(fileEvaluation5)"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </template>
+          </q-file>
         </div>
       </q-card>
     </div>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
index ee6284365..41381fc50 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@@ -360,85 +360,80 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row q-col-gutter-sm q-pa-sm">
     <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-6">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
-                    (เอกสารแบบ ค)
+        <div class="col-12 q-pa-sm">
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-6">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
+                  <div class="col-xs-12 col-sm-9">
+                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
+                  (เอกสารแบบ ค)
                   </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
-                          v-if="store.currentStep == 8"
-                          class="col-xs-12 col-sm-6 row"
+                  <q-space/>
+                  <div class="col-xs-12 col-sm-3 row justify-end">
+                    <div v-if="store.currentStep == 8">
+                      <q-btn
+                        class="col-12"
+                        flat dense
+                        icon="download"
+                        color="indigo"
+                        @click="
+                          onClickDowloadFile(
+                            'เอกสารแบบ ค',
+                            'template-4',
+                            'เอกสารแบบ ค'
+                          )
+                        "
+                      >
+                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                      >
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="downloadFile1"
+                        :href="downloadFile1"
+                        target="_blank"
+                        class="col-12"
+                        flat
+                        dense
+                        icon="visibility"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="row col-12 q-pa-sm">
+                    <div v-if="store.currentStep == 8" class="row col-12">
+                        <q-file
+                          ref="fileEvaluation81Ref"
+                          v-model="fileEvaluation81"
+                          outlined
+                          hide-bottom-space
+                          lazy-rules
+                          label="อัปโหลดไฟล์"
+                          class="col-12"
+                          dense
+                          accept=".pdf"
+                          :rules="
+                            downloadFile1 === ''
+                              ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                              : []
+                          "
                         >
-                          <q-btn
-                            class="col-12"
-                            outline
-                            icon="download"
-                            label="ดาวน์โหลดต้นแบบ"
-                            color="primary"
-                            @click="
-                              onClickDowloadFile(
-                                'เอกสารแบบ ค',
-                                'template-4',
-                                'เอกสารแบบ ค'
-                              )
-                            "
-                          >
-                            <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 v-if="store.currentStep == 8" class="row col-12">
-                          <div class="col-xs-12 col-sm-10 row">
-                            <q-file
-                              ref="fileEvaluation81Ref"
-                              v-model="fileEvaluation81"
-                              class="col-12"
-                              outlined
-                              dense
-                              hide-bottom-space
-                              lazy-rules
-                              label="อัปโหลดไฟล์"
-                              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">
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
                             <q-btn
                               flat
                               round
@@ -453,82 +448,78 @@ onMounted(async () => {
                               "
                               ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                             >
-                          </div>
-                        </div>
-                      </div>
+
+                          </template>
+                        </q-file>
+                    </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-6">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
+                  <div class="col-xs-12 col-sm-9">
+                     บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
+                  </div>
+                  <q-space/>
+                  <div class="col-xs-12 col-sm-3 row justify-end">
+                    <div
+                      v-if="store.currentStep == 8"
+                    >
+                      <q-btn
+                        class="col-12"
+                        flat dense
+                        icon="download"
+                        color="indigo"
+                        @click="
+                          onClickDowloadFile(
+                            'เอกสารหมายเลข 15',
+                            'template-4',
+                            'เอกสารหมายเลข 15'
+                          )
+                        "
+                      >
+                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                      >
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="downloadFile2"
+                        :href="downloadFile2"
+                        target="_blank"
+                        class="col-12"
+                        flat dense
+                        icon="visibility"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
                     </div>
                   </div>
-                </q-card>
-              </div>
-              <div class="col-6">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
-                  </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
-                          v-if="store.currentStep == 8"
-                          class="col-xs-12 col-sm-6 row"
-                        >
-                          <q-btn
-                            class="col-12"
-                            outline
-                            icon="download"
-                            label="ดาวน์โหลดต้นแบบ"
-                            color="primary"
-                            @click="
-                              onClickDowloadFile(
-                                'เอกสารหมายเลข 15',
-                                'template-4',
-                                'เอกสารหมายเลข 15'
-                              )
-                            "
-                          >
-                            <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 v-if="store.currentStep == 8" class="row col-12">
-                          <div class="col-xs-12 col-sm-10 row">
-                            <q-file
-                              ref="fileEvaluation82Ref"
-                              v-model="fileEvaluation82"
-                              class="col-12"
-                              outlined
-                              dense
-                              hide-bottom-space
-                              lazy-rules
-                              label="อัปโหลดไฟล์"
-                              accept=".pdf"
-                              :rules="
-                                downloadFile2 === ''
-                                  ? [(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">
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                    <div v-if="store.currentStep == 8" class="row col-12">
+                      <q-file
+                        ref="fileEvaluation82Ref"
+                        v-model="fileEvaluation82"
+                        class="col-12"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        label="อัปโหลดไฟล์"
+                        accept=".pdf"
+                        :rules="
+                          downloadFile2 === ''
+                            ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                            : []
+                        "
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                        <template v-slot:after>
                             <q-btn
                               flat
                               round
@@ -543,262 +534,247 @@ onMounted(async () => {
                               "
                               ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                             >
-                          </div>
-                        </div>
-                      </div>
+                        </template>
+                      </q-file>
                     </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-6">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
+                  <div class="col-xs-12 col-sm-9">
+                      แบบประเมินผลงาน (เอกสารหมายเลข 16)
                   </div>
-                </q-card>
-              </div>
-              <div class="col-6">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    แบบประเมินผลงาน (เอกสารหมายเลข 16)
-                  </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
-                          v-if="store.currentStep == 8"
-                          class="col-xs-12 col-sm-6 row"
+                  <q-space/>
+                  <div class="col-xs-12 col-sm-3 row justify-end">
+                    <div v-if="store.currentStep == 8">
+                        <q-btn
+                          class="col-12"
+                          dense
+                          flat
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'เอกสารหมายเลข 16',
+                              'template-4',
+                              'เอกสารหมายเลข 16'
+                            )
+                          "
                         >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div>
+                        <q-btn
+                          v-if="downloadFile3"
+                          :href="downloadFile3"
+                          target="_blank"
+                          class="col-12"
+                          flat dense
+                          icon="visibility"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                  </div>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div v-if="store.currentStep == 8" class="row col-12">
+                    <q-file
+                      ref="fileEvaluation83Ref"
+                      v-model="fileEvaluation83"
+                      class="col-12"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      lazy-rules
+                      label="อัปโหลดไฟล์"
+                      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="ดาวน์โหลดต้นแบบ"
+                            flat
+                            round
+                            dense
                             color="primary"
+                            icon="mdi-upload"
                             @click="
-                              onClickDowloadFile(
-                                'เอกสารหมายเลข 16',
-                                'template-4',
-                                'เอกสารหมายเลข 16'
+                              upLoadFile(
+                                'แบบประเมินผลงาน (เอกสารหมายเลข 16)',
+                                fileEvaluation83
                               )
                             "
+                            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                           >
-                            <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 v-if="store.currentStep == 8" class="row col-12">
-                          <div class="col-xs-12 col-sm-10 row">
-                            <q-file
-                              ref="fileEvaluation83Ref"
-                              v-model="fileEvaluation83"
-                              class="col-12"
-                              outlined
-                              dense
-                              hide-bottom-space
-                              lazy-rules
-                              label="อัปโหลดไฟล์"
-                              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
-                              flat
-                              round
-                              dense
-                              color="primary"
-                              icon="mdi-upload"
-                              @click="
-                                upLoadFile(
-                                  'แบบประเมินผลงาน (เอกสารหมายเลข 16)',
-                                  fileEvaluation83
-                                )
-                              "
-                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
+                      </template>
+                    </q-file>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-6">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
+                  <div class="col-xs-12 col-sm-9">
+                     แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
+                  </div>
+                  <q-space/>
+                  <div class="col-xs-12 col-sm-3 row justify-end">
+                    <div
+                        v-if="store.currentStep == 8"
+                      >
+                        <q-btn
+                          class="col-12"
+                          flat dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'เอกสารหมายเลข 17',
+                              'template-4',
+                              'เอกสารหมายเลข 17'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
+                      <div>
+                        <q-btn
+                          v-if="downloadFile4"
+                          :href="downloadFile4"
+                          target="_blank"
+                          class="col-12"
+                          flat dense
+                          icon="visibility"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                  </div>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div v-if="store.currentStep == 8" class="row col-12">
+                    <q-file
+                      ref="fileEvaluation84Ref"
+                      v-model="fileEvaluation84"
+                      class="col-12"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      lazy-rules
+                      label="อัปโหลดไฟล์"
+                      accept=".pdf"
+                      :rules="
+                        downloadFile4 === ''
+                          ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                          : []
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                      <template v-slot:after>
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          color="primary"
+                          icon="mdi-upload"
+                          @click="
+                            upLoadFile(
+                              'แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)',
+                              fileEvaluation84
+                            )
+                          "
+                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                        >
+                      </template>
+                    </q-file>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-6">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
+                  <div class="col-xs-12 col-sm-9">
+                     แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
+                  </div>
+                  <q-space/>
+                  <div class="col-xs-12 col-sm-3 row justify-end">
+                    <div
+                      v-if="store.currentStep == 8"
+                    >
+                      <q-btn
+                        class="col-12"
+                        flat dense
+                        icon="download"
+                        color="indigo"
+                        @click="
+                          onClickDowloadFile(
+                            'เอกสารหมายเลข 18',
+                            'template-4',
+                            'เอกสารหมายเลข 18'
+                          )
+                        "
+                      >
+                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                      >
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="downloadFile5"
+                        :href="downloadFile5"
+                        target="_blank"
+                        class="col-12"
+                        flat dense
+                        icon="visibility"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
                     </div>
                   </div>
-                </q-card>
-              </div>
-              <div class="col-6">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
-                  </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
-                          v-if="store.currentStep == 8"
-                          class="col-xs-12 col-sm-6 row"
-                        >
-                          <q-btn
-                            class="col-12"
-                            outline
-                            icon="download"
-                            label="ดาวน์โหลดต้นแบบ"
-                            color="primary"
-                            @click="
-                              onClickDowloadFile(
-                                'เอกสารหมายเลข 17',
-                                'template-4',
-                                'เอกสารหมายเลข 17'
-                              )
-                            "
-                          >
-                            <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 v-if="store.currentStep == 8" class="row col-12">
-                          <div class="col-xs-12 col-sm-10 row">
-                            <q-file
-                              ref="fileEvaluation84Ref"
-                              v-model="fileEvaluation84"
-                              class="col-12"
-                              outlined
-                              dense
-                              hide-bottom-space
-                              lazy-rules
-                              label="อัปโหลดไฟล์"
-                              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
-                              color="primary"
-                              icon="mdi-upload"
-                              @click="
-                                upLoadFile(
-                                  'แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)',
-                                  fileEvaluation84
-                                )
-                              "
-                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-              <div class="col-6">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
-                  </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
-                          v-if="store.currentStep == 8"
-                          class="col-xs-12 col-sm-6 row"
-                        >
-                          <q-btn
-                            class="col-12"
-                            outline
-                            icon="download"
-                            label="ดาวน์โหลดต้นแบบ"
-                            color="primary"
-                            @click="
-                              onClickDowloadFile(
-                                'เอกสารหมายเลข 18',
-                                'template-4',
-                                'เอกสารหมายเลข 18'
-                              )
-                            "
-                          >
-                            <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 v-if="store.currentStep == 8" class="row col-12">
-                          <div class="col-xs-12 col-sm-10 row">
-                            <q-file
-                              ref="fileEvaluation85Ref"
-                              v-model="fileEvaluation85"
-                              class="col-12"
-                              outlined
-                              dense
-                              hide-bottom-space
-                              lazy-rules
-                              label="อัปโหลดไฟล์"
-                              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">
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-md col-12">
+                    <div v-if="store.currentStep == 8" class="row col-12">
+                      <q-file
+                        ref="fileEvaluation85Ref"
+                        v-model="fileEvaluation85"
+                        class="col-12"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        label="อัปโหลดไฟล์"
+                        accept=".pdf"
+                        :rules="
+                          downloadFile5 === ''
+                            ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                            : []
+                        "
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                        <template v-slot:after>
                             <q-btn
                               flat
                               round
@@ -813,103 +789,94 @@ onMounted(async () => {
                               "
                               ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                             >
-                          </div>
-                        </div>
-                      </div>
+                        </template>
+                      </q-file>
                     </div>
                   </div>
-                </q-card>
-              </div>
-              <div class="col-6">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    แบบสรุปผลการประเมิน (เอกสารแบบ ง)
+                </div>
+              </q-card>
+            </div>
+            <div class="col-6">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
+                  <div class="col-xs-12 col-sm-9">
+                     แบบสรุปผลการประเมิน (เอกสารแบบ ง)
                   </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
-                          v-if="store.currentStep == 8"
-                          class="col-xs-12 col-sm-6 row"
+                  <q-space/>
+                  <div class="col-xs-12 col-sm-3 row justify-end">
+                    <div v-if="store.currentStep == 8">
+                      <q-btn
+                        flat dense
+                        icon="download"
+                        color="indigo"
+                        @click="
+                          onClickDowloadFile(
+                            'เอกสารแบบ ง',
+                            'template-4',
+                            'เอกสารแบบ ง'
+                          )
+                        "
+                      >
+                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                      >
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="downloadFile6"
+                        :href="downloadFile6"
+                        target="_blank"
+                        class="col-12"
+                        flat dense
+                        icon="visibility"
+                        color="blue"
+                      >
+                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">                     
+                  <div v-if="store.currentStep == 8" class="row col-12">
+                    <q-file
+                      ref="fileEvaluation86Ref"
+                      v-model="fileEvaluation86"
+                      class="col-12"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      lazy-rules
+                      label="อัปโหลดไฟล์"
+                      accept=".pdf"
+                      :rules="
+                        downloadFile6 === ''
+                          ? [(val) => !!val || 'กรุณาเลือกไฟล์']
+                          : []
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                      <template v-slot:after>
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          color="primary"
+                          icon="mdi-upload"
+                          @click="
+                            upLoadFile(
+                              'แบบสรุปผลการประเมิน (เอกสารแบบ ง)',
+                              fileEvaluation86
+                            )
+                          "
+                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                         >
-                          <q-btn
-                            class="col-12"
-                            outline
-                            icon="download"
-                            label="ดาวน์โหลดต้นแบบ"
-                            color="primary"
-                            @click="
-                              onClickDowloadFile(
-                                'เอกสารแบบ ง',
-                                'template-4',
-                                'เอกสารแบบ ง'
-                              )
-                            "
-                          >
-                            <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 v-if="store.currentStep == 8" class="row col-12">
-                          <div class="col-xs-12 col-sm-10 row">
-                            <q-file
-                              ref="fileEvaluation86Ref"
-                              v-model="fileEvaluation86"
-                              class="col-12"
-                              outlined
-                              dense
-                              hide-bottom-space
-                              lazy-rules
-                              label="อัปโหลดไฟล์"
-                              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">
-                            <q-btn
-                              flat
-                              round
-                              dense
-                              color="primary"
-                              icon="mdi-upload"
-                              @click="
-                                upLoadFile(
-                                  'แบบสรุปผลการประเมิน (เอกสารแบบ ง)',
-                                  fileEvaluation86
-                                )
-                              "
-                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                            >
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      </template>
+                    </q-file>
                   </div>
-                </q-card>
-              </div>
+                </div>
+              </q-card>
             </div>
           </div>
         </div>
@@ -917,36 +884,28 @@ onMounted(async () => {
     </div>
     <div v-if="downloadDocEditUrl != ''" 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">
-          เอกสารเล่ม 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
-                v-if="store.currentStep == 8"
-                class="col-xs-12 col-sm-12 row"
-              >
-                <q-btn
-                  :href="downloadDocEditUrl"
-                  target="_blank"
-                  class="col-12"
-                  icon="download"
-                  label="ดาวน์โหลด"
-                  color="primary"
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-            </div>
+        <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
+          <q-space/>
+          <div v-if="store.currentStep == 8">
+            <q-btn
+              :href="downloadDocEditUrl"
+              target="_blank"
+              class="col-12"
+              icon="download"
+              color="indigo"
+              flat
+              dense
+            >
+              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+            >
           </div>
         </div>
       </q-card>
     </div>
 
     <div v-if="store.currentStep == 8" class="col-12">
-      <div class="q-mt-xs q-gutter-md" align="right">
+      <div align="right">
         <q-btn
           unelevated
           label="ยืนยันผลการพิจารณา"