From 430f6a1074448092a9d442f9ac974c7a1ee55c06 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 17 Oct 2023 10:22:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=20>=20=E0=B8=9A=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/3_result/fileUpload.vue        |  16 +-
 .../07_insignia/components/5_Borrow/Main.vue  |   1 -
 src/modules/07_insignia/views/ResultPage.vue  | 353 +++++++++---------
 3 files changed, 180 insertions(+), 190 deletions(-)

diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index 14cfb4e48..eb7307d4f 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -152,7 +152,7 @@ const pagination = ref({
   <Transition>
     <div class="rounded-borders q-pa-md q-mb-md">
       <div class="row col-12">
-        <q-card bordered class="col-12 q-pa-md q-mb-sm">
+        <q-card bordered class="col-12 q-pa-sm q-mb-sm">
           <q-form ref="myForm">
             <div class="row col-12 q-col-gutter-x-sm">
               <div class="col-3">
@@ -167,20 +167,12 @@ const pagination = ref({
                 <q-input class="bg-white" outlined dense lazy-rules v-model="documentTitle" :label="`${'ชื่อเอกสาร'}`"
                   hide-bottom-space :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]" />
               </div>
-              <div class="col-6">
-                <q-input class="bg-white" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
+              <div class="col-6 row no-wrap">
+                <q-input class="bg-white full-width" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
                   hide-bottom-space />
+                <q-btn unelevated dense class="q-ml-sm q-px-md items-center" color="public" label="บันทึก" @click="save" />
               </div>
             </div>
-
-            <div class="row col-12">
-              <q-separator/>
-            </div>
-            <div class="row col-12 q-mt-xs">
-              <q-space />
-              <q-btn unelevated dense class="q-px-md items-center" color="public" label="บันทึก" @click="save" />
-            </div>
-
           </q-form>
         </q-card>
         <div class="row col-12">
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index f0930fed2..e3ce435a5 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -537,7 +537,6 @@ const clearInsigniaFilters = (name: string) => {
                 </template>
               </q-select>
 
-              <q-space />
               <div>
                 <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
                   <q-tooltip>เพิ่ม</q-tooltip>
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 79d622382..4f1f561f3 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -544,71 +544,72 @@ const clearInsigniaFilters = (name: string) => {
         class="q-pa-none"
       >
         <div class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs no-wrap">
-            <div>
-              <q-file
-                dense
-                clearable
-                outlined
-                v-model="fileResult"
-                label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
-                style="min-width: 350px"
-                accept=".xlsx"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <q-tooltip
-                  >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+          <q-card bordered class="col-12 q-mb-sm q-pa-sm">
+            <div class="row col-12 q-col-gutter-x-xs">
+              <div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
+                <q-file
+                  dense
+                  clearable
+                  outlined
+                  v-model="fileResult"
+                  label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
+                  accept=".xlsx"
+                  class=" full-width"
                 >
-              </q-file>
-            </div>
-            <div v-if="fileResult !== null">
-              <q-btn
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-upload"
-                @click="perviewfile(fileResult, 'receice')"
-              >
-                <q-tooltip
-                  >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <q-tooltip
+                    >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+                  >
+                </q-file>
+                <div v-if="fileResult !== null">
+                  <q-btn
+                    size="12px"
+                    flat
+                    class="bg-teal-1 fit"
+                    color="add"
+                    icon="mdi-upload"
+                    @click="perviewfile(fileResult, 'receice')"
+                  >
+                    <q-tooltip
+                      >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+                    >
+                  </q-btn>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
+                <q-file
+                  dense
+                  clearable
+                  outlined
+                  v-model="fileinvoice"
+                  label="บันทึกผลการจ่ายใบกำกับ"
+                  accept=".xlsx"
+                  class=" full-width"
                 >
-              </q-btn>
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary"/>
+                  </template>
+                  <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
+                </q-file>
+                <div v-if="fileinvoice !== null">
+                  <q-btn
+                    size="12px"
+                    flat
+                    color="add"
+                    class="bg-teal-1 fit"
+                    icon="mdi-upload"
+                    @click="perviewfile(fileinvoice, 'invoice')"
+                  >
+                    <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
             </div>
-            <div>
-              <q-file
-                dense
-                clearable
-                outlined
-                v-model="fileinvoice"
-                label="บันทึกผลการจ่ายใบกำกับ"
-                style="min-width: 350px"
-                accept=".xlsx"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
-              </q-file>
-            </div>
-            <div v-if="fileinvoice !== null">
-              <q-btn
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-upload"
-                @click="perviewfile(fileinvoice, 'invoice')"
-              >
-                <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
-              </q-btn>
-            </div>
-          </div>
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+          </q-card>
+          <div class="row col-12 q-pb-sm q-col-gutter-xs">
             <q-select
-              class="col-2"
               v-model="DataStore.insignia"
               dense
               outlined
@@ -623,7 +624,7 @@ const clearInsigniaFilters = (name: string) => {
               option-value="id"
               :readonly="false"
               :borderless="false"
-              style="min-width: 150px"
+              style="width: 280px"
               @update:model-value="selectorInsignia"
               @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaTypeFilter'
@@ -645,122 +646,8 @@ const clearInsigniaFilters = (name: string) => {
                   </q-item-section>
                 </q-item>
               </template>
-            </q-select>
-            <q-select
-              v-model="DataStore.invoiceType"
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              :label="`${'ใบกำกับ'}`"
-              emit-value
-              map-options
-              use-input
-              option-label="name"
-              :options="filterInvoice"
-              option-value="id"
-              :readonly="false"
-              :borderless="false"
-              style="min-width: 150px"
-              @update:model-value="
-                DataStore.searchData(
-                  DataStore.invoiceType,
-                  DataStore.employeeClass
-                )
-              "
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
-                      ) "
-            >
-              <template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    clearInsigniaFilters('filterInvoice'),
-                      DataStore.searchData(
-                        DataStore.invoiceType,
-                        DataStore.employeeClass
-                      )
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-            <div>
-              <q-select
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                map-options
-                use-input
-                option-label="name"
-                :options="filterEmployee"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchData(
-                    DataStore.invoiceType,
-                    DataStore.employeeClass
-                  )
-                "
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
-                      ) "
-              >
-                <template
-                  v-if="DataStore.employeeClass !== 'all'"
-                  v-slot:append
-                >
-                  <q-icon
-                    name="cancel"
-                    @click.stop.prevent="
-                      clearInsigniaFilters('filterEmployee'),
-                        DataStore.searchData(
-                          DataStore.invoiceType,
-                          DataStore.employeeClass
-                        )
-                    "
-                    class="cursor-pointer"
-                  />
-                </template>
-                <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-              </q-select>
-            </div>
-
-            <div>
-              <q-btn
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
-
+            </q-select> 
             <q-space />
-
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
               <q-input
@@ -800,6 +687,118 @@ const clearInsigniaFilters = (name: string) => {
                 class="gt-xs q-ml-sm"
               />
             </div>
+            
+          </div>
+          <div class="row col-12 q-mb-sm q-col-gutter-xs">
+            <q-select
+              v-model="DataStore.invoiceType"
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ใบกำกับ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="filterInvoice"
+              option-value="id"
+              :readonly="false"
+              :borderless="false"
+              style="width: 250px"
+              @update:model-value="
+                DataStore.searchData(
+                  DataStore.invoiceType,
+                  DataStore.employeeClass
+                )
+              "
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
+                      ) "
+            >
+              <template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    clearInsigniaFilters('filterInvoice'),
+                      DataStore.searchData(
+                        DataStore.invoiceType,
+                        DataStore.employeeClass
+                      )
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <q-select
+              v-model="DataStore.employeeClass"
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'สถานภาพ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="filterEmployee"
+              option-value="id"
+              :readonly="false"
+              :borderless="false"
+              style="width: 280px"
+              @update:model-value="
+                DataStore.searchData(
+                  DataStore.invoiceType,
+                  DataStore.employeeClass
+                )
+              "
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
+                    ) "
+            >
+              <template
+                v-if="DataStore.employeeClass !== 'all'"
+                v-slot:append
+              >
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    clearInsigniaFilters('filterEmployee'),
+                      DataStore.searchData(
+                        DataStore.invoiceType,
+                        DataStore.employeeClass
+                      )
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+              <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  ไม่มีข้อมูล
+                </q-item-section>
+              </q-item>
+            </template>
+            </q-select>
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
           </div>
           <d-table
             :rows="DataStore.rows"