no message

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) => {

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 () => {
+// const clickClose = async () => {
-  modal.value = false;
+//   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;

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>

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"
+  "action",
-]);
-const visibleColumnsReference = ref<String[]>([
-  "no",
-  "fileName",
-  "annotation",
-  "file",
 ]);
+
 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;
   // }
@@ -301,12 +246,20 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
           :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="`${'เครื่องราชฯ'}`"
+          <selector
-            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
             outlined
             dense
-            options-dense
+            lazy-rules
-            :display-value="$q.lang.table.columns"
+            v-model="selectType"
+            hide-bottom-space
+            :label="`${'เครื่องราชฯ'}`"
             emit-value
             map-options
-            :options="colums2"
+            option-label="name"
-            option-value="name"
+            :options="selectTypeOption"
-            options-cover
+            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>
+          <div>
-            <div class="col-12 q-pt-sm">
+            <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>
 
-          <d-table
+          <q-space />
-            :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">
+          <div class="items-center" style="display: flex">
-              <q-tr :props="props" class="cursor-pointer">
+            <!-- ค้นหาข้อความใน table -->
-                <q-td key="no" :props="props" >
+            <q-input
-                  {{ props.rowIndex + 1 }}
+              standout
-                </q-td>
+              dense
-                <q-td key="fileName" :props="props">
+              v-model="filter"
-                  {{ props.row.fileName }}
+              ref="filterRef"
-                </q-td>
+              outlined
-                <q-td key="annotation" :props="props">
+              debounce="300"
-                  {{ props.row.annotation }}
+              placeholder="ค้นหา"
-                </q-td>
+              style="max-width: 200px"
-                <q-td auto-width>
+              class="q-ml-sm"
-                  <q-btn
+            >
-                  dense
+              <template v-slot:append>
-                  size="14px"
+                <q-icon v-if="filter == ''" name="search" />
-                  flat
+                <q-icon
-                  round
+                  v-if="filter !== ''"
-                  color="deep-orange-6"
+                  name="clear"
-                  @click="editData(props.row.no)"
+                  class="cursor-pointer"
-                  icon="picture_as_pdf"
+                  @click="resetFilter"
-                >
+                />
-                  <q-tooltip>ดาว์โหลด PDF</q-tooltip>
+              </template>
-                </q-btn>
+            </q-input>
-                </q-td>
+            <!-- แสดงคอลัมน์ใน table -->
-
+            <q-select
-              </q-tr>
+              v-model="visibleColumns"
-            </template>
+              :display-value="$q.lang.table.columns"
-          </d-table>
+              multiple
-        </div>
+              outlined
-            <div class="col-xs-12 col-md-9">
+              dense
-            </div>
+              :options="columns"
-
+              options-dense
-            <div class="col-xs-12 col-md-3 flexsave">
+              option-value="name"
-              <q-btn label="บันทึก" @click="save" color="public" />
+              map-options
-            </div>
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
           </div>
         </div>
 
-        </Transition>
+        <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'">
+        <fileUploadview />
+      </div>
     </div>
 
-    <DialogForm :modal="modal" :save="save" :close="close"/>
+    <DialogForm :modal="modal" :save="save" :close="close" />
   </q-card>
 </template>
 <style lang="scss" scoped>