From bdc7ab8df38f3104cc0c829acf4dec82c4c8e48f Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 6 Jul 2023 12:26:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=80=E0=B8=95=E0=B8=B4=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/views/03_editor/index.vue   |  4 +-
 .../components/OrderPlacement/step/step02.vue |  3 +-
 .../components/OrderPlacement/step/step03.vue |  4 +-
 .../components/OrderPlacement/step/step04.vue | 89 ++++++++++---------
 .../Information/Information.vue               |  4 +-
 5 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index f1d3a3915..0e91abb4e 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -455,8 +455,8 @@
             lazy-rules
             :readonly="!editvisible"
             :borderless="!editvisible"
-            :rules="[(val) => !!val || `${'กรุณากรอก ฃื่อ'}`]"
-            label="ฃื่อ"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            label="ชื่อ"
           />
           <q-input
             v-model="inputLink"
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index a8a6f79c1..afdb01b09 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="q-pa-sm" style="max-height: 68vh; overflow-y: scroll">
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
       <div class="col-12 row q-pb-sm items-center">
         <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
           <q-tooltip>อัปเดตข้อมูล</q-tooltip>
@@ -49,7 +49,6 @@
       <q-table
         flat
         bordered
-        dense
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 22e908679..96a1ec94d 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
       <div class="col-12 row q-py-sm items-center">
         <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
@@ -713,7 +713,7 @@ const deleteData = async (id: string) => {};
   color: #4154b3;
 }
 .custom-header-table {
-  max-height: 64vh;
+  height: auto;
   .q-table tr:nth-child(odd) td {
     background: white;
   }
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index e28ec4e50..7d9d21328 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -9,22 +9,24 @@
         <template v-slot:before>
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
-              <label>คำสั่ง</label>
+              <div class="q-pr-sm">คำสั่ง</div>
               <q-btn
                 size="12px"
                 flat
-                round
+                dense
                 icon="mdi-download"
                 :disable="tab !== 'main'"
                 :color="tab !== 'main' ? 'grey' : 'add'"
               >
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
-                  <q-list style="min-width: 100px">
+                  <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
+                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -32,38 +34,40 @@
               </q-btn>
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
-              <label>เอกสารแนบท้าย</label>
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
               <q-btn
                 size="12px"
                 flat
-                round
+                dense
                 :color="tab !== 'second' ? 'grey' : 'add'"
                 icon="mdi-download"
                 :disable="tab !== 'second'"
               >
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
-                  <q-list style="min-width: 100px">
+                  <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section>ไฟล์ .docx</q-item-section>
+                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                      <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
               </q-btn>
             </div>
           </div>
-          <div class="card-pdf q-ma-md q-pa-md">
-            <div class="q-pa-sm">
+          <q-separator style="margin-top: -1px; z-index: 1;" />
+          <q-card bordered class="card-pdf q-ma-md q-pa-md">
               <div
-                class="justify-between items-center align-center q-py-sm row"
+                class="justify-between items-center align-center q-pb-sm row"
               >
                 <q-btn
-                  class="text-grey"
-                  outline
-                  round
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
                   @click="page = page > 1 ? page - 1 : page"
                 >
                   <q-icon name="mdi-chevron-left" />
@@ -74,9 +78,9 @@
                 </span>
 
                 <q-btn
-                  class="text-grey"
-                  outline
-                  round
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
                   @click="page = page < numOfPages ? page + 1 : page"
                 >
                   <q-icon name="mdi-chevron-right" />
@@ -87,12 +91,12 @@
                 <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
               </div>
               <div
-                class="justify-between items-center align-center q-py-sm row"
+                class="justify-between items-center align-center q-pt-sm row"
               >
                 <q-btn
-                  class="text-grey"
-                  outline
-                  round
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
                   @click="page = page > 1 ? page - 1 : page"
                 >
                   <q-icon name="mdi-chevron-left" />
@@ -103,16 +107,15 @@
                 </span>
 
                 <q-btn
-                  class="text-grey"
-                  outline
-                  round
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
                   @click="page = page < numOfPages ? page + 1 : page"
                 >
                   <q-icon name="mdi-chevron-right" />
                 </q-btn>
               </div>
-            </div>
-          </div>
+          </q-card>
           <!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
             <pdf-viewer v-model:PDFV="vuePDFRef" />
           </div> -->
@@ -134,9 +137,9 @@
         <template v-slot:after>
           <q-form ref="myForm">
             <div class="q-pa-md q-gutter-y-md">
-              <fieldset class="border q-pa-lg">
-                <legend class="text-header">อัปโหลดไฟล์</legend>
-                <div class="q-gutter-y-lg">
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
+                <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">คำสั่ง</label>
                     <q-file
@@ -144,6 +147,7 @@
                       dense
                       v-model="fileOrder"
                       label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
                       lazy-rules
                       :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     >
@@ -152,7 +156,6 @@
                       </template>
                     </q-file>
                   </div>
-                  <!-- <div class="q-py-lg" /> -->
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
                     <q-file
@@ -160,6 +163,7 @@
                       dense
                       v-model="fileTailer"
                       label="เลือกไฟล์เอกสารแนบท้าย"
+                      hide-bottom-space
                       lazy-rules
                       :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     >
@@ -171,9 +175,9 @@
                 </div>
               </fieldset>
 
-              <fieldset class="border q-pa-lg">
-                <legend class="text-header">รายละเอียด</legend>
-                <div class="q-gutter-y-md">
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">รายละเอียด</legend>
+                <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">เลขที่คำสั่ง</label>
                     <q-input
@@ -249,6 +253,7 @@
                           outlined
                           dense
                           class="full-width datepicker"
+                          hide-bottom-space
                           :model-value="date != null ? date2Thai(date) : null"
                           :label="`${'วันที่มีผลออกคำสั่ง'}`"
                           :rules="[
@@ -414,24 +419,26 @@ const setTab = (val: string) => {
 }
 .text-header {
   color: #34373c;
-  font-size: 1.2rem;
-  font-weight: normal;
+  font-size: 1rem;
+  font-weight: 300;
 }
 
 .text-file {
+  padding-top: 5px;
   color: #34373c;
-  font-size: 1.1rem;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .space {
-  background-color: #e9eaec;
+  background-color: #e9eaec61;
   display: flex;
+  z-index: 3;
 }
 
 .card-header {
   margin-top: 5px;
-  background-color: #e9eaec;
+  background-color: transparent;
+  padding: 2px !important;
   border-radius: 10px 10px 0px 0px;
   width: 200px;
   display: flex;
@@ -442,21 +449,23 @@ const setTab = (val: string) => {
 
 .card-header-active {
   margin-top: 5px;
+  margin-left: -1px;
   background-color: white;
+  padding: 2px !important;
   border-radius: 10px 10px 0px 0px;
   border: 1px solid #e9eaec;
   width: 200px;
   display: flex;
   justify-content: center;
   border-bottom-style: none;
-  font-weight: bold;
+  font-weight: 600;
   align-items: center;
 }
 
 .card-pdf {
   border-radius: 10px;
   border: 1px solid #e9eaec;
-  background-color: #e9eaec;
+  background-color: #e9eaec61;
   //   height: 60vh;
 }
 </style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index 22ca82dca..a2e99b4a9 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -905,7 +905,7 @@ const getClass = (val: boolean) => {
           />
         </div> -->
         <div
-          class="col-xs-6 col-sm-3 col-md-3"
+          class="col-xs-6 col-sm-4 col-md-4"
           v-if="informaData.profileType == 'employee'"
         >
           <selector
@@ -933,7 +933,7 @@ const getClass = (val: boolean) => {
           />
         </div>
         <div
-          class="col-xs-6 col-sm-3 col-md-3"
+          class="col-xs-6 col-sm-2 col-md-2"
           v-if="informaData.profileType == 'employee'"
         >
           <selector