From b7ec4ea3368fe3ae2b2f3053881b7e385f367eee Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 23 Aug 2023 14:27:36 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AF?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=99=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B8=9C=E0=B8=A5=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/3_result/DialogForm.vue        | 438 +++++++++++++++++-
 src/modules/07_insignia/views/ResultPage.vue  | 284 ++++++------
 2 files changed, 585 insertions(+), 137 deletions(-)

diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 4eb5b965a..e88727359 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -1,4 +1,78 @@
+div
 <script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const Advertise = ref<string>("");
+const brand = ref<string>("");
+const cardid = ref<string>("");
+const prefixId = ref<string>("");
+const fullName = ref<string>("");
+const volume = ref<string>("");
+const episode = ref<string>("");
+const duty = ref<string>("");
+const announced = ref<string>("");
+const firstname = ref<string>("");
+const lastname = ref<string>("");
+const position = ref<string>("");
+const invoice = ref<string>("");
+const payment = ref<string>("");
+const addressPayment = ref<string>("");
+const affiliationRequest = ref<string>("");
+const affiliationReceived = ref<string>("");
+const receivedate = ref<Date>();
+const announceDate = ref<Date>();
+const invoiceDate = ref<Date>();
+const mixin = useCounterMixin();
+
+const { date2Thai } = mixin;
+const paymentOp = [
+  { label: "จัดส่งทางไปรษณี", value: "xx1" },
+  { label: "มารับด้วยตัวเอง", value: "xx2" },
+];
+const volumeOp = [
+  { label: "เล่มที่", value: "xx1" },
+  { label: "เล่มที่2", value: "xx2" },
+  { label: "เล่มที่3", value: "xx3" },
+];
+const episodeOp = [
+  { label: "ตอนที่1", value: "xx1" },
+  { label: "ตอนที่2", value: "xx2" },
+  { label: "ตอนที่3", value: "xx3" },
+];
+const dutyOp = [
+  { label: "หน้าที่1", value: "xx1" },
+  { label: "หน้าที่2", value: "xx2" },
+  { label: "หน้าที่3", value: "xx3" },
+];
+const announcedOp = [
+  { label: "ลำดับที่1", value: "xx1" },
+  { label: "ลำดับที่2", value: "xx2" },
+  { label: "ลำดับที่3", value: "xx3" },
+];
+const affiliationRequestOp = [
+  { label: "สังกัด1", value: "xx1" },
+  { label: "สังกัด2", value: "xx2" },
+  { label: "สังกัด3", value: "xx3" },
+];
+const affiliationReceivedOp = [
+  { label: "สังกัด4", value: "xx4" },
+  { label: "สังกัด5", value: "xx5" },
+  { label: "สังกัด6", value: "xx6" },
+];
+const prefixOp = [
+  { label: "นาย", value: "mr" },
+  { label: "นางสาว", value: "miss" },
+  { label: "นาง", value: "mrs" },
+];
+const positionOp = [
+  { label: "ตำแหน่ง1", value: "xxx1" },
+  { label: "ตำแหน่ง2", value: "xxx2" },
+  { label: "ตำแหน่ง3", value: "xxx3" },
+];
+const clearDateExam = () => {
+  receivedate.value = undefined;
+};
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -17,10 +91,9 @@ const close = async () => {
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 800px;" class="q-pb-md">
+    <q-card style="min-width: 900px" class="q-pb-md">
       <q-toolbar class="q-py-md">
-        <q-toolbar-title class="text-h6">บันทึกผล
-        </q-toolbar-title>
+        <q-toolbar-title class="text-h6">บันทึกผล </q-toolbar-title>
         <q-btn
           icon="close"
           unelevated
@@ -33,12 +106,363 @@ const close = async () => {
       <q-separator />
 
       <div class="q-pa-md">
-        <div class="row q-col-gutter-sm">
-          <div class="col-12">
-            
+        <div
+          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+        >
+          <div class="col-xs-12 col-sm-6">
+            <q-input
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              hide-bottom-space
+              dense
+              borderless
+              outlined
+              v-model="Advertise"
+              label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-input
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              hide-bottom-space
+              dense
+              borderless
+              outlined
+              v-model="brand"
+              label="ชั้นตราเครื่องราชอิสริยาภรณ์"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-input
+              hide-bottom-space
+              outlined
+              v-model="cardid"
+              dense
+              lazy-rules
+              :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+              label="เลขบัตรประจำตัวประชาชน"
+              maxlength="13"
+              mask="#############"
+            />
+            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+          </div>
+          <div class="col-6"></div>
+          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+          <div class="col-12 text-weight-bold text-grey">ชื่อ-สกุล</div>
+          <div class="col-xs-12 col-sm-3">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="prefixOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="prefixId"
+              :label="`คำนำหน้าชื่อ`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-9">
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              borderless
+              v-model="fullName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ-นามสกุล'}`"
+            />
+          </div>
+          <!-- <div class="col-xs-6 col-sm-3 col-md-5">
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              borderless
+              v-model="lastname"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div> -->
+          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+          <div class="col-12 text-weight-bold text-grey">
+            รายละเอียดตำเเหน่ง
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="positionOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="position"
+              :label="`ตำเเหน่ง`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="receivedate"
+              :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
+                  dense
+                  borderless
+                  outlined
+                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                  hide-bottom-space
+                  :model-value="
+                    receivedate != null ? date2Thai(receivedate) : undefined
+                  "
+                  :label="`${'วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
+              hide-bottom-space
+              :options="affiliationRequestOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="affiliationRequest"
+              :label="`สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
+              hide-bottom-space
+              :options="affiliationReceivedOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="affiliationReceived"
+              :label="`สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์`"
+            />
+          </div>
+          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+          <div class="col-12 text-weight-bold text-grey">
+            ประกาศราชกิจจานุเบกษา
+          </div>
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="announceDate"
+              :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
+                  dense
+                  borderless
+                  outlined
+                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                  hide-bottom-space
+                  :model-value="
+                    announceDate != null ? date2Thai(announceDate) : undefined
+                  "
+                  :label="`${'วันที่'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-4">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="volumeOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="volume"
+              :label="`เล่มที่`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-4">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="episodeOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="episode"
+              :label="`ตอนที่`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="dutyOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="duty"
+              :label="`หน้าที่`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="announcedOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="announced"
+              :label="`ลำดับที่`"
+            />
+          </div>
+          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+          <div class="col-12 text-weight-bold text-grey">ผลการจ่ายใบกำกับ</div>
+          <div class="col-xs-12 col-sm-4">
+            <q-input
+              :rules="[(val) => !!val || 'หมายเลขใบกํากับ']"
+              hide-bottom-space
+              dense
+              borderless
+              outlined
+              v-model="invoice"
+              label="หมายเลขใบกํากับ"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="invoiceDate"
+              :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
+                  dense
+                  borderless
+                  outlined
+                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                  hide-bottom-space
+                  :model-value="
+                    invoiceDate != null ? date2Thai(invoiceDate) : undefined
+                  "
+                  :label="`${'วันที่จ่ายใบกำกับ'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-4">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="paymentOp"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              emit-value
+              map-options
+              v-model="payment"
+              :label="`เลือกรูปแบบการจ่าย`"
+            />
+          </div>
+          <div v-if="payment === 'xx1'" class="col-12">
+            <q-input
+              label="ที่อยู่ที่จ่าย"
+              class="bg-white"
+              dense
+              borderless
+              outlined
+              v-model="addressPayment"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
+
       <q-separator />
       <div class="q-pa-md">
         <div class="row justify-end">
@@ -47,4 +471,4 @@ const close = async () => {
       </div>
     </q-card>
   </q-dialog>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 05fa10027..0b08c25b6 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -25,7 +25,18 @@ const selectRound = ref<string>("1");
 const selectRoundOption = ref<OptionData[]>([
   { id: "1", name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี 2566" },
 ]);
-
+const filterKeyword = ref<string>("");
+const filterDoc = ref<any>(null);
+const resetFilterRef = () => {
+  filterKeyword.value = "";
+  filterDoc.value.focus();
+};
+const pagination = ref({
+  sortBy: "filename",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 const visibleColumns = ref<String[]>([
   "no",
   "status",
@@ -39,6 +50,12 @@ const visibleColumns = ref<String[]>([
   "address",
   "action"
 ]);
+const visibleColumnsReference = ref<String[]>([
+  "no",
+  "fileName",
+  "annotation",
+  "file",
+]);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
@@ -139,6 +156,53 @@ const columns = ref<QTableProps["columns"]>([
     field: "",
   },
 ]);
+const colums2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อเอกสาร",
+    field: "fileName",
+    sortable: true,
+
+  },
+  {
+    name: "annotation",
+    align: "left",
+    label: "หมายเหตุ",
+    field: "annotation",
+    sortable: true,
+
+  },
+  {
+    name: "file",
+    align: "left",
+    label: "ไฟล์เอกสาร",
+    field: "file",
+    sortable: true,
+  },
+]);
+const rows2 = ref<any>([
+  {
+    no:"1",
+    fileName:"test1",
+    annotation:"ทดสอบ",
+    file:""
+  },
+  {
+    no:"2",
+    fileName:"test2",
+    annotation:"ทดสอบ",
+    file:""
+  }
+])
 const rows = ref<any>([
   {
     no: "1",
@@ -459,50 +523,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         <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"
@@ -540,92 +561,95 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
                 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="row col-12">
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterDoc"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilterRef"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumnsReference"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="colums2"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+            <div class="col-12 q-pt-sm">
+              
+          <d-table
+            :columns="colums2"
+            :rows="rows2"
+            :filter="filterKeyword"
+            row-key="fileName"
+            :visible-columns="visibleColumnsReference"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td key="no" :props="props" >
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="fileName" :props="props">
+                  {{ props.row.fileName }}
+                </q-td>
+                <q-td key="annotation" :props="props">
+                  {{ props.row.annotation }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                  dense
+                  size="14px"
+                  flat
+                  round
+                  color="deep-orange-6"
+                  @click="editData(props.row.no)"
+                  icon="picture_as_pdf"
+                >
+                  <q-tooltip>ดาว์โหลด PDF</q-tooltip>
+                </q-btn>
+                </q-td>
+
+              </q-tr>
+            </template>
+          </d-table>
+        </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 class="col-xs-12 col-md-3 flexsave">
               <q-btn label="บันทึก" @click="save" color="public" />
             </div>
@@ -650,7 +674,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 }
 
 .bg-base {
-  background-color: #efefef;
+  background-color: #f3f3f398;
 }
 
 .v-enter-active,