ปรับ css stepper และ ui step ภขุ

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

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>

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>