From aeb6a64829d2929028444e0903d3662f1ccad0ba Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 23 Aug 2023 15:34:03 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
 =?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        | 187 +++++++++---------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index e88727359..6a18795e0 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -1,4 +1,4 @@
-div
+
 <script setup lang="ts">
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -15,14 +15,14 @@ const announced = ref<string>("");
 const firstname = ref<string>("");
 const lastname = ref<string>("");
 const position = ref<string>("");
-const invoice = ref<string>("");
+const invoice = ref<string|null>(null);
 const payment = ref<string>("");
-const addressPayment = ref<string>("");
+const addressPayment = ref<string|null>(null);
 const affiliationRequest = ref<string>("");
 const affiliationReceived = ref<string>("");
-const receivedate = ref<Date>();
-const announceDate = ref<Date>();
-const invoiceDate = ref<Date>();
+const receivedate = ref<Date|null>();
+const announceDate = ref<Date|null>();
+const invoiceDate = ref<Date|null>(null);
 const mixin = useCounterMixin();
 
 const { date2Thai } = mixin;
@@ -71,7 +71,9 @@ const positionOp = [
   { label: "ตำแหน่ง3", value: "xxx3" },
 ];
 const clearDateExam = () => {
-  receivedate.value = undefined;
+  receivedate.value = null;
+  announceDate.value = null;
+  invoiceDate.value = null;
 };
 const props = defineProps({
   modal: Boolean,
@@ -109,6 +111,91 @@ const close = async () => {
         <div
           class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
         >
+          <div class="col-12 text-weight-bold text-grey">รายละเอียดข้อมูล</div>
+        <div class="col-xs-12 col-sm-4">
+            <q-input
+              hide-bottom-space
+              outlined
+              class="inputgreen"
+              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-xs-12 col-sm-4">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="prefixOp"
+              class="col-xs-12 col-sm-6 inputgreen"
+              dense
+              borderless
+              
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="prefixId"
+              :label="`คำนำหน้าชื่อ`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-4">
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              class="inputgreen"
+              borderless
+              v-model="fullName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ-นามสกุล'}`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-12">
+            <q-select
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              hide-bottom-space
+              :options="positionOp"
+              class="col-xs-12 col-sm-6 inputgreen"
+              dense
+              borderless
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="position"
+              :label="`ตำเเหน่ง`"
+            />
+          </div>
+
+          <div class="col-6"></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-input
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@@ -131,86 +218,7 @@ const close = async () => {
               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"
@@ -385,8 +393,6 @@ const close = async () => {
           <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
@@ -415,7 +421,6 @@ const close = async () => {
                   dense
                   borderless
                   outlined
-                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                   hide-bottom-space
                   :model-value="
                     invoiceDate != null ? date2Thai(invoiceDate) : undefined
@@ -434,7 +439,7 @@ const close = async () => {
           </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"

From ff0be12f28207fedf30a1164cae01a274611a601 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 23 Aug 2023 15:55:11 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Other/Main.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 5e1cd20eb..f48d15a60 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -395,7 +395,7 @@ const pagination = ref({
             color="add"
             icon="mdi-account-arrow-right"
           >
-            <q-tooltip>ประเภทคำสั่งรายการอื่นๆ</q-tooltip>
+            <q-tooltip>ส่งไปออกคำสั่งรายการอื่นๆ</q-tooltip>
           </q-btn>
 
           <q-space />
@@ -520,7 +520,7 @@ const pagination = ref({
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ประเภทคำสั่งอื่นๆ" :close="clickClose" />
+      <DialogHeader title="ส่งไปออกคำสั่งอื่นๆ" :close="clickClose" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-between">
@@ -531,7 +531,7 @@ const pagination = ref({
                 dense
                 v-model="type"
                 :options="optionsType"
-                label="คำสั่งแต่งตั่ง - เลื่อน"
+                label="ประเภทคำสั่ง"
                 style="width: 400px; max-width: auto"
                 emit-value
                 map-options

From 8c9760bb83dff3457ea8d75f0bb86eeabe14c34c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 23 Aug 2023 16:00:32 +0700
Subject: [PATCH 3/4] no message

---
 .../components/ListRetirement/TableList.vue   |   7 +-
 src/modules/06_retirement/views/Main.vue      |  13 +-
 .../components/3_result/fileUpload.vue        | 204 +++++
 src/modules/07_insignia/views/ResultPage.vue  | 861 +++++++++---------
 4 files changed, 641 insertions(+), 444 deletions(-)
 create mode 100644 src/modules/07_insignia/components/3_result/fileUpload.vue

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index cb95fe3bd..04910a2a1 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -149,13 +149,10 @@ const visibleColumns = ref<string[]>([
 
 const action = ref<string>("");
 const fileUpload = ref<any>(null);
-const fileInputRef = ref<any>(null);
 
 onMounted(() => {
   retireld.value = retireld_params.toString();
-  console.log(retireld_params);
   fecthlistprofile(retireld.value);
-  fecthCheck(retireld.value);
 });
 const round = ref<number>();
 const typeReport = ref<string>("");
@@ -188,6 +185,9 @@ const fecthlistprofile = async (id: string) => {
         remove: e.remove,
       }));
       console.log(statusReport.value);
+      if (statusReport.value == false) {
+        fecthCheck(retireld.value);
+      } else statusUpload.value = true;
     })
     .catch((e) => {
       messageError($q, e);
@@ -200,7 +200,6 @@ const fecthCheck = async (id: string) => {
   await http
     .get(config.API.checkfileupload(id))
     .then((res) => {
-      console.log(res);
       statusUpload.value = res.data.result;
     })
     .catch((err) => {
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index dbb9e41e6..95b5bbd0e 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -380,6 +380,7 @@ const fetchRetirement = async (type: string, year: any) => {
         round: items.round,
         typeReport: typeReportChangeName(items.typeReport),
         json: items.json,
+        document: items.document,
       }));
       actionOption.value = rows.value;
       rows.value.sort((a, b) => a.round - b.round);
@@ -569,13 +570,17 @@ const clickSelect = async (action: string) => {
     .onDismiss(() => {});
 };
 
-const clickClose = async () => {
-  modal.value = false;
-};
+// const clickClose = async () => {
+//   modal.value = false;
+// };
 const checkjson = ref<boolean>();
 
 const checkststus = (data: any) => {
-  let jsonfasle = rows.value.find((e: any) => e.json == false);
+ 
+  
+  let jsonfasle = data.find((e: any) => e.document == false);
+  // console.log(jsonfasle)
+
   if (jsonfasle) {
     checkjson.value = true;
   } else checkjson.value = false;
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
new file mode 100644
index 000000000..d68ac7412
--- /dev/null
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+
+const fileUpload = ref<any>(null);
+const reason = ref<string>("");
+const documentTitle = ref<string>("");
+
+const filterKeyword = ref<string>("");
+const filterDoc = ref<any>(null);
+
+const visibleColumnsReference = ref<String[]>([
+  "no",
+  "fileName",
+  "annotation",
+  "file",
+]);
+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 resetFilterRef = () => {
+  filterKeyword.value = "";
+  filterDoc.value.focus();
+};
+const pagination = ref({
+  sortBy: "filename",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+<template>
+  <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-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="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"
+                    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"></div>
+        <div class="col-xs-12 col-md-3 flexsave"></div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 74a90045a..119f024f4 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -4,6 +4,8 @@ import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
+import fileUploadview from "../components/3_result/fileUpload.vue";
+
 import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 import type { QTableProps, QInput } from "quasar";
 import { useQuasar } from "quasar";
@@ -14,23 +16,18 @@ const { date2Thai, dialogConfirm } = mixin;
 const $q = useQuasar();
 const tab = ref<string>("hight");
 
-const fileUpload = ref<any>("");
-const reason = ref<string>("");
-const documentTitle = ref<string>("");
-
 const selectType = ref<string>("1");
-const selectTypeOption = ref<OptionData[]>([{id: "1", name: "เบญจมาภรณ์มงกุฎไทย"}]);
+const selectTypeOption = ref<OptionData[]>([
+  { id: "1", name: "เบญจมาภรณ์มงกุฎไทย" },
+]);
 
 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,
@@ -48,14 +45,9 @@ const visibleColumns = ref<String[]>([
   "datepay",
   "typepay",
   "address",
-  "action"
-]);
-const visibleColumnsReference = ref<String[]>([
-  "no",
-  "fileName",
-  "annotation",
-  "file",
+  "action",
 ]);
+
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
@@ -156,53 +148,7 @@ 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",
@@ -234,21 +180,21 @@ const modal = ref<boolean>(false);
 
 const close = () => {
   modal.value = false;
-}
+};
 
 const addData = () => {
   modal.value = true;
-  console.log("addData")
+  console.log("addData");
 };
 
 const editData = (id: string) => {
   modal.value = true;
-  console.log("editData", id)
+  console.log("editData", id);
 };
 
 const save = () => {
-  console.log("save function")
-}
+  console.log("save function");
+};
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@@ -272,7 +218,6 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
   //       );
   //     });
   //     break;
-
   //   default:
   //     break;
   // }
@@ -287,26 +232,34 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     <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 
+        <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 
+          option-value="id"
+          v-model="selectRound"
+          :options="selectRoundOption"
+          use-input
           input-debounce="0"
-          input-class="text-bold text-grey">
+          input-class="text-bold text-grey"
+        >
         </selector>
       </div>
     </div>
     <q-separator />
-    <q-tabs dense 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="เหรียญตรา" />
@@ -314,378 +267,414 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     </q-tabs>
     <q-separator />
     <div>
-
-      <div v-if="tab=='hight'" class="q-pa-md">
+      <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" @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 />
-
-          <div class="items-center" style="display: flex">
-            <!-- ค้นหาข้อความใน table -->
-            <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-              style="max-width: 200px" class="q-ml-sm">
-              <template v-slot:append>
-                <q-icon v-if="filter == ''" name="search" />
-                <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-              </template>
-            </q-input>
-            <!-- แสดงคอลัมน์ใน table -->
-            <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-              :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-              class="gt-xs q-ml-sm" />
-          </div>
-        </div>
-        
-        <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-          <template v-slot:body-cell="props">
-            <q-td :props="props">
-              <div v-if="props.col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-
-              <div v-else-if="props.col.name == 'action'">
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="primary"
-                  @click="editData(props.row.no)"
-                  icon="mdi-pencil-outline"
-                >
-                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                </q-btn>
-              </div>
-
-              <div v-else>
-                {{ props.value }}
-              </div>
-            </q-td>
-          </template>
-        </d-table>
-      </div>
-
-      <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" @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 />
-
-          <div class="items-center" style="display: flex">
-            <!-- ค้นหาข้อความใน table -->
-            <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-              style="max-width: 200px" class="q-ml-sm">
-              <template v-slot:append>
-                <q-icon v-if="filter == ''" name="search" />
-                <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-              </template>
-            </q-input>
-            <!-- แสดงคอลัมน์ใน table -->
-            <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-              :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-              class="gt-xs q-ml-sm" />
-          </div>
-        </div>
-        
-        <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-          <template v-slot:body-cell="props">
-            <q-td :props="props">
-              <div v-if="props.col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-
-              <div v-else-if="props.col.name == 'action'">
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="primary"
-                  @click="editData(props.row.no)"
-                  icon="mdi-pencil-outline"
-                >
-                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                </q-btn>
-              </div>
-
-              <div v-else>
-                {{ props.value }}
-              </div>
-            </q-td>
-          </template>
-        </d-table>
-      </div>
-
-      <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"  @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 />
-
-          <div class="items-center" style="display: flex">
-            <!-- ค้นหาข้อความใน table -->
-            <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-              style="max-width: 200px" class="q-ml-sm">
-              <template v-slot:append>
-                <q-icon v-if="filter == ''" name="search" />
-                <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-              </template>
-            </q-input>
-            <!-- แสดงคอลัมน์ใน table -->
-            <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-              :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-              class="gt-xs q-ml-sm" />
-          </div>
-        </div>
-        
-        <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-          <template v-slot:body-cell="props">
-            <q-td :props="props">
-              <div v-if="props.col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-
-              <div v-else-if="props.col.name == 'action'">
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="primary"
-                  @click="editData(props.row.no)"
-                  icon="mdi-pencil-outline"
-                >
-                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                </q-btn>
-              </div>
-
-              <div v-else>
-                {{ props.value }}
-              </div>
-            </q-td>
-          </template>
-        </d-table>
-      </div>
-
-      <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-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="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
+          <selector
             outlined
             dense
-            options-dense
-            :display-value="$q.lang.table.columns"
+            lazy-rules
+            v-model="selectType"
+            hide-bottom-space
+            :label="`${'เครื่องราชฯ'}`"
             emit-value
             map-options
-            :options="colums2"
-            option-value="name"
-            options-cover
+            option-label="name"
+            :options="selectTypeOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
             style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+            @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 />
+
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
         </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
+
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else-if="props.col.name == 'action'">
+                <q-btn
                   dense
-                  size="14px"
+                  size="12px"
                   flat
                   round
-                  color="deep-orange-6"
+                  color="primary"
                   @click="editData(props.row.no)"
-                  icon="picture_as_pdf"
+                  icon="mdi-pencil-outline"
                 >
-                  <q-tooltip>ดาว์โหลด PDF</q-tooltip>
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                 </q-btn>
-                </q-td>
+              </div>
 
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-            <div class="col-xs-12 col-md-9">
-            </div>
-
-            <div class="col-xs-12 col-md-3 flexsave">
-              <q-btn label="บันทึก" @click="save" color="public" />
-            </div>
-          </div>
-        </div>   
-          
-        </Transition>
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
       </div>
 
+      <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"
+            @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 />
+
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else-if="props.col.name == 'action'">
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="primary"
+                  @click="editData(props.row.no)"
+                  icon="mdi-pencil-outline"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+
+      <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"
+            @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 />
+
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else-if="props.col.name == 'action'">
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="primary"
+                  @click="editData(props.row.no)"
+                  icon="mdi-pencil-outline"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+
+      <div v-else-if="tab == 'doc'">
+        <fileUploadview />
+      </div>
     </div>
 
-    <DialogForm :modal="modal" :save="save" :close="close"/>
+    <DialogForm :modal="modal" :save="save" :close="close" />
   </q-card>
 </template>
 <style lang="scss" scoped>

From 5c50705f720e03d20b6d86115d5f06752b13249d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 23 Aug 2023 16:17:17 +0700
Subject: [PATCH 4/4] props roundId

---
 src/api/07_insignia/api.insignia.ts           |  3 +++
 .../07_insignia/components/2_Manage/Tab1.vue  |  3 ---
 .../components/3_result/fileUpload.vue        | 10 ++++++-
 src/modules/07_insignia/views/ResultPage.vue  | 27 ++++++++++++++-----
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 3ccc46095..ae391cfb6 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -24,5 +24,8 @@ export default {
   insigniaNosend: (insigniaPeriodId: any) => `${insignia}/request/org/no-send/${insigniaPeriodId}`,
   insigniaAgency: () => `${insignia}/request/agency`,
   insigniaDashboard: (insigniaPeriodId: string) => `${insignia}/request/dashboard/${insigniaPeriodId}`,
+  // record
+  noteround: () => `${insignia}/request/note`,
+
 
 };
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 4d190c950..55f687b51 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -173,9 +173,6 @@ const columns2 = ref<QTableProps["columns"]>([
 
 const rows2 = ref<any[]>([]);
 
-const Note = ref<string>("");
-const titleModal = ref<string>("");
-const actionModal = ref<string>("");
 const person = ref<any>([]);
 const props = defineProps({
   tab: {
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index d68ac7412..b6edfdbad 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 
 const fileUpload = ref<any>(null);
@@ -59,6 +59,14 @@ const rows2 = ref<any>([
     file: "",
   },
 ]);
+const props = defineProps({
+  roundId: {
+    type: String,
+  },
+});
+onMounted(() => {
+  console.log(props.roundId);
+});
 const resetFilterRef = () => {
   filterKeyword.value = "";
   filterDoc.value.focus();
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 119f024f4..f994d8b32 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -2,6 +2,8 @@
 import { ref, onMounted } from "vue";
 // import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
 import fileUploadview from "../components/3_result/fileUpload.vue";
@@ -21,12 +23,25 @@ const selectTypeOption = ref<OptionData[]>([
   { id: "1", name: "เบญจมาภรณ์มงกุฎไทย" },
 ]);
 
-const selectRound = ref<string>("1");
-const selectRoundOption = ref<OptionData[]>([
-  { id: "1", name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี 2566" },
-]);
-const filterKeyword = ref<string>("");
+const selectRound = ref<string>();
+const selectRoundOption = ref<OptionData[]>([]);
+onMounted(async () => {
+  await fecthRound();
+});
+const fecthRound = async () => {
+  await http
+    .get(config.API.noteround())
+    .then((res) => {
+      let data = res.data.result;
+      selectRoundOption.value = data;
+      selectRound.value = data[0].id;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
 
+const filterKeyword = ref<string>("");
 
 const pagination = ref({
   sortBy: "filename",
@@ -670,7 +685,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
       </div>
 
       <div v-else-if="tab == 'doc'">
-        <fileUploadview />
+        <fileUploadview :roundId="selectRound" />
       </div>
     </div>