From bdd75f789c018bb398346c791f30e14a1a40fdb9 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 22 Aug 2023 17:13:14 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=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=E0=B9=81=E0=B8=A5=E0=B8=B0=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   2 +-
 .../components/1_Proposals/listProposals.vue  |   2 +-
 .../components/2_Manage/StatCard.vue          |   2 +-
 .../07_insignia/components/2_Manage/Tab4.vue  |   1 +
 .../components/2_Manage/listManage.vue        |  17 +-
 .../components/report/ReportView.vue          |   6 +-
 .../components/report/Report_01.vue           |  10 +-
 src/modules/07_insignia/views/ResultPage.vue  | 500 ++++++++++--------
 8 files changed, 289 insertions(+), 251 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 36d485167..49a3c21c6 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -121,7 +121,7 @@ const menuList = readonly<any[]>([
   },
   {
     key: 10,
-    icon: "o_list",
+    icon: "mdi-file-certificate-outline",
     activeIcon: "order",
     label: "ออกคำสั่ง",
     path: "order",
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 74139883e..57207f646 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -426,7 +426,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   round
                   color="primary"
                   @click="clickListInsignia(props.row.id)"
-                  icon="mdi-account-star"
+                  icon="mdi-account-check"
                 >
                   <q-tooltip>ผู้ได้รับเครื่องราชฯ</q-tooltip>
                 </q-btn>
diff --git a/src/modules/07_insignia/components/2_Manage/StatCard.vue b/src/modules/07_insignia/components/2_Manage/StatCard.vue
index 67ddb48bc..c5c0e1e0b 100644
--- a/src/modules/07_insignia/components/2_Manage/StatCard.vue
+++ b/src/modules/07_insignia/components/2_Manage/StatCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const sizeCard = (val: number) => {
   if (val === 5) {
-    return "width:15%;";
+    return "width:20%;";
   }
 };
 const props = defineProps({
diff --git a/src/modules/07_insignia/components/2_Manage/Tab4.vue b/src/modules/07_insignia/components/2_Manage/Tab4.vue
index 42d619368..1fcb76eba 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab4.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab4.vue
@@ -296,6 +296,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :rows="rows"
           :filter="filterKeyword"
           row-key="name"
+          dense
           flat
           bordered
           :paging="true"
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index aae193506..aca594dbb 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -139,11 +139,11 @@ const fecthInsigniaByOc = async (
     รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชย์อิสริยาภรณ์
   </div>
   <q-card bordered class="row col-12 q-mt-sm">
-    <div class="bg-grey-2 col-12 row items-center">
-      <div class="q-pl-sm q-mr-md text-weight-bold text-grey">รอบ</div>
-
+    <div class="bg-grey-1 col-12 row items-center">
+      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
       <q-select
         borderless
+        dense
         v-model="round"
         :options="optionRound"
         map-options
@@ -153,9 +153,10 @@ const fecthInsigniaByOc = async (
         @update:model-value="changround"
       />
     </div>
+    <div class="col-12"><q-separator/></div>
     <div class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
-        <div class="row col-12 q-col-gutter-md fit">
+        <div class="row col-12 q-col-gutter-sm fit">
           <cardTop
             :amount="stat.orgAllCount"
             label="หน่วยงานทั้งหมด"
@@ -200,7 +201,7 @@ const fecthInsigniaByOc = async (
     </div>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="pending">
+      <q-tab-panel name="pending" class="q-pa-none">
         <tab1
           :tab="tab"
           :roundId="round"
@@ -208,7 +209,7 @@ const fecthInsigniaByOc = async (
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
-      <q-tab-panel name="reject">
+      <q-tab-panel name="reject" class="q-pa-none">
         <tab2
           :tab="tab"
           :roundId="round"
@@ -216,7 +217,7 @@ const fecthInsigniaByOc = async (
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
-      <q-tab-panel name="delete">
+      <q-tab-panel name="delete" class="q-pa-none">
         <tab3
           :tab="tab"
           :roundId="round"
@@ -224,7 +225,7 @@ const fecthInsigniaByOc = async (
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
-      <q-tab-panel name="organization">
+      <q-tab-panel name="organization" class="q-pa-none">
         <tab4 :tab="tab" :roundId="round" />
       </q-tab-panel>
     </q-tab-panels>
diff --git a/src/modules/07_insignia/components/report/ReportView.vue b/src/modules/07_insignia/components/report/ReportView.vue
index 07479b0a9..950f88bf8 100644
--- a/src/modules/07_insignia/components/report/ReportView.vue
+++ b/src/modules/07_insignia/components/report/ReportView.vue
@@ -40,6 +40,10 @@
 
 <style lang="scss" scope>
 .q-item.hover-green:hover {
-  background-color: #d5f1ee;
+  background-color: #d5f1ee57;
+  border-radius: 2px ;
+}
+.q-item.hover-green{
+  padding: 10px;
 }
 </style>
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
index 7f5505edf..77a935cca 100644
--- a/src/modules/07_insignia/components/report/Report_01.vue
+++ b/src/modules/07_insignia/components/report/Report_01.vue
@@ -63,7 +63,7 @@ const backHistory = () => {
   </div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="q-pa-md q-gutter-y-md">
+      <div class="q-pa-md q-gutter-y-sm">
         <q-toolbar style="padding: 0" >
           <q-select
             class="q-mr-sm"
@@ -87,11 +87,13 @@ const backHistory = () => {
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
             <q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
-            <q-btn icon="mdi-eye" color="primary" label="แสดงรางงาน" />
+            <q-btn unelevated icon="mdi-eye" color="primary" label="แสดงรางงาน" />
             <q-btn
-              color="primary"
+              unelevated
+              color="blue"
               icon="mdi-fullscreen"
               @click="dialog = true"
+              dense
             />
           </div>
         </q-toolbar>
@@ -107,7 +109,7 @@ const backHistory = () => {
           separator-class="bg-white disabled"
         >
           <template v-slot:before>
-            <div class="q-pa-md">
+            <div class="q-px-sm">
               <div class="row items-start items-center">
                 <div class="col">
                   <q-btn
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 05fa10027..393ff0a04 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -220,47 +220,64 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์/การจ่ายใบกำกับ
   </div>
   <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
-    <div class="q-pa-md row items-center">
-      <selector hide-bottom-space borderless dense lazy-rules emit-value map-options options-dense option-label="name"
-        option-value="id" v-model="selectRound" :options="selectRoundOption" use-input input-debounce="0"
-        input-class="text-bold text-grey">
-        <template v-slot:before><label class="text-bold text-grey" style="font-size: 16px">รอบ</label>
-        </template>
-      </selector>
+    <div class="bg-grey-1 col-12 row items-center">
+      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
+      <div>
+        <selector 
+          hide-bottom-space 
+          borderless 
+          dense 
+          lazy-rules 
+          emit-value 
+          map-options 
+          options-dense 
+          option-label="name"
+          option-value="id" 
+          v-model="selectRound" 
+          :options="selectRoundOption" 
+          use-input 
+          input-debounce="0"
+          input-class="text-bold text-grey">
+        </selector>
+      </div>
     </div>
     <q-separator />
-    <q-tabs v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
+    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
       <q-tab name="hight" label="ขั้นสายสะพาน" />
       <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
       <q-tab name="medal" label="เหรียญตรา" />
       <q-tab name="doc" label="เอกสารอ้างอิง" />
     </q-tabs>
     <q-separator />
-    <div class="q-py-md q-px-md">
+    <div>
 
-      <div v-if="tab=='hight'">
-        <div class="row col-12 q-pb-sm">
+      <div v-if="tab=='hight'" class="q-pa-md">
+        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
           <selector outlined dense lazy-rules v-model="selectType" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
             emit-value map-options option-label="name" :options="selectTypeOption" option-value="id" use-input
-            input-debounce="0" style="min-width: 150px" class="gt-xs q-ml-sm" @filter="(inputValue: string, doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption')" />
-          <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-          <q-btn flat round color="light-blue" icon="upload">
-            <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
+            input-debounce="0" style="min-width: 150px" @filter="(inputValue: string, doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption')" />
+          <div>  
+            <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div> 
+            <q-btn flat round color="light-blue" icon="upload">
+              <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
 
           <q-space />
 
@@ -309,31 +326,35 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         </d-table>
       </div>
 
-      <div v-else-if="tab=='low'">
-        <div class="row col-12 q-pb-sm">
+      <div v-else-if="tab=='low'" class="q-pa-md">
+        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
           <selector outlined dense lazy-rules v-model="selectType" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
             emit-value map-options option-label="name" :options="selectTypeOption" option-value="id" use-input
-            input-debounce="0" style="min-width: 150px" class="gt-xs q-ml-sm" @filter="(inputValue: string,
+            input-debounce="0" style="min-width: 150px" @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption'
               )" />
-          <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-          <q-btn flat round color="light-blue" icon="upload">
-            <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
+          <div>
+            <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div>
+            <q-btn flat round color="light-blue" icon="upload">
+              <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
 
           <q-space />
 
@@ -382,32 +403,35 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         </d-table>
       </div>
 
-      <div v-else-if="tab=='medal'">
-        <div class="row col-12 q-pb-sm">
+      <div v-else-if="tab=='medal'" class="q-pa-md">
+        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
           <selector outlined dense lazy-rules v-model="selectType" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
             emit-value map-options option-label="name" :options="selectTypeOption" option-value="id" use-input
-            input-debounce="0" style="min-width: 150px" class="gt-xs q-ml-sm" @filter="(inputValue: string,
+            input-debounce="0" style="min-width: 150px"  @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption'
               )" />
-          <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-          <q-btn flat round color="light-blue" icon="upload">
-            <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-
+          <div>
+            <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div>
+            <q-btn flat round color="light-blue" icon="upload">
+              <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
           <q-space />
 
           <div class="items-center" style="display: flex">
@@ -457,181 +481,187 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
       <div v-else-if="tab=='doc'">
         <Transition>
-        <div class="bg-base rounded-borders q-pa-md q-mb-md">
-          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
-            <!-- <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="issue"
-                :label="`${'ฉบับ'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="book"
-                :label="`${'เล่มที่'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="volume"
-                :label="`${'เล่ม'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="section"
-                :label="`${'ตอนที่'}`"
-                hide-bottom-space
-              />
-            </div> -->
-            <div class="col-xs-6 col-md-4">
-              <q-file
-                class="bg-white"
-                outlined
-                dense
-                v-model="fileUpload"
-                label="ไฟล์เอกสาร"
-                hide-bottom-space
-                lazy-rules
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-            <div class="col-xs-6 col-md-3">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="documentTitle"
-                :label="`${'ชื่อเอกสาร'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-md-5">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="reason"
-                :label="`${'หมายเหตุ'}`"
-                hide-bottom-space
-              />
-            </div>
-            <!-- <div class="col-xs-6 col-md-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateGoverment"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+          <div>
+            <div class="q-pa-md">
+              <div class="row col-12 q-col-gutter-sm">
+                <!-- <div class="col-xs-6 col-md-2">
                   <q-input
+                    class="bg-white"
                     outlined
                     dense
-                    class="full-width datepicker bg-white"
-                    :model-value="
-                      dateGoverment != null ? date2Thai(dateGoverment) : null
-                    "
-                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateReceiver"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+                    lazy-rules
+                    v-model="issue"
+                    :label="`${'ฉบับ'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-md-2">
                   <q-input
+                    class="bg-white"
                     outlined
                     dense
-                    class="full-width datepicker bg-white"
-                    :model-value="
-                      dateReceiver != null ? date2Thai(dateReceiver) : null
-                    "
-                    :label="`${'วันที่ได้รับ'}`"
+                    lazy-rules
+                    v-model="book"
+                    :label="`${'เล่มที่'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-md-2">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="volume"
+                    :label="`${'เล่ม'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-md-2">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="section"
+                    :label="`${'ตอนที่'}`"
+                    hide-bottom-space
+                  />
+                </div> -->
+                <div class="col-xs-6 col-md-4">
+                  <q-file
+                    class="bg-white"
+                    outlined
+                    dense
+                    v-model="fileUpload"
+                    label="ไฟล์เอกสาร"
+                    hide-bottom-space
+                    lazy-rules
                   >
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
+                      <q-icon name="attach_file" color="primary" />
                     </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div> -->
-            <div class="col-xs-12 col-md-9">
-              <!-- <p>
-                วันที่ประกาศราชกิจจานุเบกษา <b>{{ date2Thai(new Date()) }}</b>
-              </p> -->
+                  </q-file>
+                </div>
+                <div class="col-xs-6 col-md-3">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="documentTitle"
+                    :label="`${'ชื่อเอกสาร'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-12 col-md-5">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="reason"
+                    :label="`${'หมายเหตุ'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <!-- <div class="col-xs-6 col-md-2">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateGoverment"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        class="full-width datepicker bg-white"
+                        :model-value="
+                          dateGoverment != null ? date2Thai(dateGoverment) : null
+                        "
+                        :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateReceiver"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        class="full-width datepicker bg-white"
+                        :model-value="
+                          dateReceiver != null ? date2Thai(dateReceiver) : null
+                        "
+                        :label="`${'วันที่ได้รับ'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div> -->
+                <!--<div class="col-xs-12 col-md-9">
+                  <p>
+                    วันที่ประกาศราชกิจจานุเบกษา <b>{{ date2Thai(new Date()) }}</b>
+                  </p>
+                </div> -->
+                <!-- <div class="col-xs-6 col-md-3">
+                  <p>
+                    วันที่ได้รับ <b>{{ date2Thai(new Date()) }}</b>
+                  </p>
+                </div> -->
+              </div>
             </div>
-            <!-- <div class="col-xs-6 col-md-3">
-              <p>
-                วันที่ได้รับ <b>{{ date2Thai(new Date()) }}</b>
-              </p>
-            </div> -->
-            <div class="col-xs-12 col-md-3 flexsave">
+            <div class="col-12"><q-separator /></div>
+            <div class="col-12 flexsave q-pa-sm">
+              <q-space/>
               <q-btn label="บันทึก" @click="save" color="public" />
             </div>
           </div>
-        </div>
-      </Transition>
+            
+          
+        </Transition>
       </div>
 
     </div>