แก้ bug เครื่องราช, เพิ่ม validate

src/modules/07_insignia/components/1_Proposals/listProposals.vue

@@ -49,8 +49,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "period_year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "period_start",
@@ -78,12 +76,10 @@ const columns = ref<QTableProps["columns"]>([
     name: "statusRoyal",
     align: "center",
     label: "สถานะราชกิจจานุเบกษา",
-    sortable: true,
+    sortable: false,
     field: "statusRoyal",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -54,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -765,6 +765,7 @@ const closeModalEdit = () => {
               </q-td>
 
               <q-td
+                v-close-popup
                 auto-width
                 v-if="
                   (DataStore.isLock == false &&
@@ -791,7 +792,6 @@ const closeModalEdit = () => {
                     <q-list dense style="min-width: 250px">
                       <q-item
                         clickable
-                        v-close-popup
                         @click.stop="clickmodalEdit(props.row)"
                       >
                         <q-item-section
@@ -808,7 +808,6 @@ const closeModalEdit = () => {
                       </q-item>
                       <q-item
                         clickable
-                        v-close-popup
                         @click.stop="clickReject(props.row.id)"
                       >
                         <q-item-section
@@ -827,7 +826,6 @@ const closeModalEdit = () => {
                       </q-item>
                       <q-item
                         clickable
-                        v-close-popup
                         @click.stop="clickDelete(props.row.id)"
                       >
                         <q-item-section

src/modules/07_insignia/components/2_Manage/Tab2.vue

@@ -45,7 +45,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/07_insignia/components/2_Manage/Tab3.vue

@@ -47,7 +47,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/07_insignia/components/2_Manage/Tab4.vue

@@ -27,7 +27,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/07_insignia/components/2_Manage/downloadFile.vue

@@ -37,7 +37,7 @@ const downloadDocument = async (type: string) => {
       })
       .then(async (res) => {
         if (download) {
-          downloadFile(res, `${titleReport.value}.${type}`);
+          downloadFile(res, `ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`);
         }
       })
       .catch((e) => {
@@ -91,6 +91,4 @@ const downloadFile = (response: any, filename: string) => {
       </q-list>
     </q-menu>
   </q-btn>
-</template>
+</template>
-
-<style scoped></style>

src/modules/07_insignia/components/3_result/DialogForm.vue

@@ -53,11 +53,22 @@ const paymentOp = [
   { label: "จัดส่งทางไปรษณี", value: "จัดส่งทางไปรษณี" },
   { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
 ];
-const clearDateExam = () => {
+
-  receivedate.value = null;
+// reset วันที่ประกาศราชกิจจานุเบกษา
+const clearAnnounceExam = () => {
   announceDate.value = null;
-  invoiceDate.value = null;
 };
+
+// reset วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์
+const clearDateReceivedate = () => {
+  receivedate.value = null;
+}
+
+// reset วันที่จ่ายใบกำกับ
+const clearDateInvoiceDate = () => {
+  invoiceDate.value = null;
+}
+
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -419,7 +430,7 @@ const searchcardid = () => {
                     "
                     :label="`${'วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์'}`"
                     clearable
-                    @clear="clearDateExam"
+                    @clear="clearDateReceivedate"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -511,7 +522,7 @@ const searchcardid = () => {
                     "
                     :label="`${'วันที่'}`"
                     clearable
-                    @clear="clearDateExam"
+                    @clear="clearAnnounceExam"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -614,7 +625,7 @@ const searchcardid = () => {
                     "
                     :label="`${'วันที่จ่ายใบกำกับ'}`"
                     clearable
-                    @clear="clearDateExam"
+                    @clear="clearDateInvoiceDate"
                   >
                     <template v-slot:prepend>
                       <q-icon

src/modules/07_insignia/components/3_result/fileUpload.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+import type { QTableProps, QForm } from "quasar";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@@ -12,6 +12,9 @@ const fileUpload = ref<any>(null);
 const reason = ref<string>("");
 const documentTitle = ref<string>("");
 const $q = useQuasar();
+
+const myForm = ref<any>();
+
 const filterKeyword = ref<string>("");
 const filterDoc = ref<any>(null);
 
@@ -21,13 +24,15 @@ const visibleColumnsReference = ref<String[]>([
   "annotation",
   "file",
 ]);
+
+// คอลัมน์ตาราง
 const colums2 = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     field: "no",
-    sortable: true,
+    sortable: false,
   },
   {
     name: "fileName",
@@ -48,9 +53,10 @@ const colums2 = ref<QTableProps["columns"]>([
     align: "left",
     label: "ไฟล์เอกสาร",
     field: "file",
-    sortable: true,
+    sortable: false,
   },
 ]);
+
 const rows2 = ref<any>([]);
 
 interface TypeData {
@@ -58,12 +64,18 @@ interface TypeData {
   reason: string;
   pathName: string;
 }
+
 const props = defineProps({
   roundId: {
     type: String,
   },
 });
 
+onMounted(async () => {
+  await getRequest();
+});
+
+// ดึงข้อมูลรายการเอกสารอ้างอิง
 const getRequest = async () => {
   showLoader();
   await http
@@ -87,6 +99,16 @@ const getRequest = async () => {
     });
 };
 
+// เช็คฟอร์มก่อนบันทึก
+const save = () => {
+  myForm.value.validate().then((result: boolean) => {
+    if (result) {
+      dialogConfirm($q, () => putRequest());
+    }
+  });
+};
+
+// บันทึกเอกสาร
 const putRequest = async () => {
   showLoader();
   const dataAppend = new FormData();
@@ -102,135 +124,82 @@ const putRequest = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      documentTitle.value = "";
+      documentTitle.value = ""
-      reason.value = "";
+      reason.value = ""
-      fileUpload.value = null;
+      fileUpload.value = null
+
+      // reset เพื่อไม่ให้ฟอร์มแจ้งเตือ validate หลังบันทึกเสร็จแล้วล้างค่าฟิลด์ต่างๆ
+      myForm.value.reset()
       getRequest();
       hideLoader();
     });
 };
-onMounted(async () => {
+
-  await getRequest();
-});
 const resetFilterRef = () => {
   filterKeyword.value = "";
   filterDoc.value.focus();
 };
+
 const pagination = ref({
   sortBy: "filename",
   descending: true,
   page: 1,
   rowsPerPage: 10,
 });
-const save = () => {
-  dialogConfirm($q, () => putRequest());
-};
 </script>
+
 <template>
   <Transition>
     <div class="rounded-borders q-pa-md q-mb-md">
       <div class="row col-12">
         <q-card bordered class="col-12 q-pa-md q-mb-sm">
-          <div class="row col-12 q-col-gutter-x-sm">
+          <q-form ref="myForm">
-            <div class="col-xs-6 col-md-3">
+            <div class="row col-12 q-col-gutter-x-sm">
-              <q-file
+              <div class="col-3">
-                class="bg-white"
+                <q-file class="bg-white" outlined dense v-model="fileUpload" label="ไฟล์เอกสาร" hide-bottom-space
-                outlined
+                  lazy-rules accept=".pdf" :rules="[(val) => !!val || `กรุณาเลือกไฟล์เอกสาร`]">
-                dense
+                  <template v-slot:prepend>
-                v-model="fileUpload"
+                    <q-icon name="attach_file" color="primary" />
-                label="ไฟล์เอกสาร"
+                  </template>
-                hide-bottom-space
+                </q-file>
-                lazy-rules
+              </div>
-                accept=".pdf"
+              <div class="col-3">
-              >
+                <q-input class="bg-white" outlined dense lazy-rules v-model="documentTitle" :label="`${'ชื่อเอกสาร'}`"
-                <template v-slot:prepend>
+                  hide-bottom-space :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]" />
-                  <q-icon name="attach_file" color="primary" />
+              </div>
-                </template>
+              <div class="col-6">
-              </q-file>
+                <q-input class="bg-white" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
+                  hide-bottom-space />
+              </div>
             </div>
-            <div class="col-xs-6 col-md-3">
+
-              <q-input
+            <div class="row col-12">
-                class="bg-white"
+              <q-separator/>
-                outlined
-                dense
-                lazy-rules
-                v-model="documentTitle"
-                :label="`${'ชื่อเอกสาร'}`"
-                hide-bottom-space
-              />
             </div>
-            <div class="col-xs-12 col-md-5">
+            <div class="row col-12 q-mt-xs">
-              <q-input
+              <q-space />
-                class="bg-white"
+              <q-btn unelevated dense class="q-px-md items-center" color="public" label="บันทึก" @click="save" />
-                outlined
-                dense
-                lazy-rules
-                v-model="reason"
-                :label="`${'หมายเหตุ'}`"
-                hide-bottom-space
-              />
             </div>
-            <div class="col-xs-12 col-sm-1 flex justify-end">
+
-              <q-btn
+          </q-form>
-                dense
-                class="full-width"
-                label="บันทึก"
-                @click="save"
-                color="public"
-              >
-                <q-tooltip>บันทึก</q-tooltip></q-btn
-              >
-            </div>
-          </div>
         </q-card>
         <div class="row col-12">
           <q-space />
-          <q-input
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterDoc" outlined
-            class="col-xs-12 col-sm-3 col-md-2"
+            debounce="300" placeholder="ค้นหา">
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterDoc"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilterRef" />
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilterRef"
-              />
             </template>
           </q-input>
 
-          <q-select
+          <q-select v-model="visibleColumnsReference" multiple outlined dense options-dense
-            v-model="visibleColumnsReference"
+            :display-value="$q.lang.table.columns" emit-value map-options :options="colums2" option-value="name"
-            multiple
+            options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
-            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
+          <d-table :columns="colums2" :rows="rows2" :filter="filterKeyword" row-key="fileName"
-            :columns="colums2"
+            :visible-columns="visibleColumnsReference" v-model:pagination="pagination">
-            :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">
@@ -253,17 +222,8 @@ const save = () => {
                   }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
+                  <q-btn type="a" :href="props.row.file" target="_blank" dense size="14px" flat round
-                    type="a"
+                    color="deep-orange-6" icon="picture_as_pdf">
-                    :href="props.row.file"
-                    target="_blank"
-                    dense
-                    size="14px"
-                    flat
-                    round
-                    color="deep-orange-6"
-                    icon="picture_as_pdf"
-                  >
                     <q-tooltip>ดาว์โหลด PDF</q-tooltip>
                   </q-btn>
                 </q-td>

src/modules/07_insignia/components/4_Allocate/Main.vue

@@ -11,7 +11,7 @@ import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.v
 
 import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
 import type { QTableProps, QInput } from "quasar";
-import {  useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 
 
 const DataStore = useAllocateDataStore();
@@ -124,7 +124,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -303,42 +303,16 @@ const resetFilter = () => {
   <div class="toptitle text-dark col-12 row items-center">
     จัดสรรเครื่องราชอิสริยาภรณ์
   </div>
-  <q-card
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders" v-if="loadView">
-    flat
-    bordered
-    class="col-12 q-my-md q-mt-sm rounded-borders"
-    v-if="loadView"
-  >
     <div class="bg-grey-1 col-12 row items-center">
       <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
-      <q-select
+      <q-select hide-bottom-space borderless dense lazy-rules emit-value map-options options-dense option-label="name"
-        hide-bottom-space
+        option-value="id" v-model="selectRound" :options="selectRoundOption" use-input input-debounce="0"
-        borderless
+        input-class="text-bold text-grey" @update:model-value="selectorRound(selectRound)">
-        dense
-        lazy-rules
-        emit-value
-        map-options
-        options-dense
-        option-label="name"
-        option-value="id"
-        v-model="selectRound"
-        :options="selectRoundOption"
-        use-input
-        input-debounce="0"
-        input-class="text-bold text-grey"
-        @update:model-value="selectorRound(selectRound)"
-      >
       </q-select>
     </div>
     <q-separator />
-    <q-tabs
+    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
-      dense
-      v-model="tab"
-      align="left"
-      class="bg-white text-grey"
-      active-color="primary"
-      indicator-color="primary"
-    >
       <div v-for="item in DataStore.insigniaType">
         <q-tab :name="item.name" :label="item.label" />
       </div>
@@ -346,105 +320,41 @@ const resetFilter = () => {
 
     <q-separator />
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel
+      <q-tab-panel v-for="item in DataStore.insigniaType" :key="item.name" :name="item.name" class="q-pa-none">
-        v-for="item in DataStore.insigniaType"
-        :key="item.name"
-        :name="item.name"
-        class="q-pa-none"
-      >
         <div class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
             <div>
-              <q-select
+              <q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
-                v-model="DataStore.insignia"
+                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="insigniaOp"
-                dense
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 200px" @update:model-value="
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'เครื่องราชฯ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="insigniaOp"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 200px"
-                @update:model-value="
                   DataStore.selectInsignia(DataStore.insignia)
-                "
+                  " />
-              />
             </div>
 
             <div>
-              <q-btn
+              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
                 <q-tooltip>เพิ่ม</q-tooltip>
               </q-btn>
             </div>
             <q-space />
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
-              <q-input
+              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                standout
+                style="max-width: 200px" class="q-ml-sm">
-                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
+                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
-              <q-select
+              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                v-model="visibleColumns"
+                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                :display-value="$q.lang.table.columns"
+                class="gt-xs q-ml-sm" />
-                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
+          <d-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filter" row-key="id" flat bordered
-            ref="table"
+            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-            :columns="columns"
+            :pagination-label="paginationLabel" v-model:pagination="pagination">
-            :rows="DataStore.rows"
-            :filter="filter"
-            row-key="id"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            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">
@@ -454,73 +364,38 @@ const resetFilter = () => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr
+              <q-tr :props="props" class="cursor-pointer">
-                :props="props"
+                <q-td key="no" :props="props" @click="redirectToPage(props.row.id, props.row.insignia)">
-                class="cursor-pointer"
-                @click="redirectToPage(props.row.id, props.row.insignia)"
-              >
-                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="year" :props="props">
+                <q-td key="year" :props="props" @click="redirectToPage(props.row.id, props.row.insignia)">
                   {{ props.row.year }}
                 </q-td>
-                <q-td key="insignia" :props="props">
+                <q-td key="insignia" :props="props" @click="redirectToPage(props.row.id, props.row.insignia)">
                   {{ props.row.insignia }}
                 </q-td>
-                <q-td key="total" :props="props">
+                <q-td key="total" :props="props" @click="redirectToPage(props.row.id, props.row.insignia)">
                   {{ props.row.total }}
                 </q-td>
-                <q-td key="allocate" :props="props">
+                <q-td key="allocate" :props="props" @click="redirectToPage(props.row.id, props.row.insignia)">
                   {{ props.row.allocate }}
                 </q-td>
-                <q-td key="remain" :props="props">
+                <q-td key="remain" :props="props" @click="redirectToPage(props.row.id, props.row.insignia)">
                   {{ props.row.remain }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
+                  <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense @click.stop>
-                    icon="mdi-dots-vertical"
+                    <q-menu transition-show="jump-down" transition-hide="jump-up">
-                    size="12px"
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                    @click.stop
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
                       <q-list dense style="min-width: auto">
-                        <q-item
+                        <q-item clickable @click.stop="clickEditrow(props.row)">
-                          clickable
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                          v-close-popup
-                          @click.stop="clickEditrow(props.row)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
                             <q-tooltip>แก้ไข</q-tooltip>
-                            <q-icon
+                            <q-icon color="primary" size="xs" name="mdi-pencil" />
-                              color="primary"
-                              size="xs"
-                              name="mdi-pencil"
-                            />
                           </q-item-section>
                           <q-item-section>แก้ไข</q-item-section>
                         </q-item>
-                        <q-item
+                        <q-item clickable v-close-popup @click.stop="clickDelete(props.row.id)">
-                          clickable
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                          v-close-popup
-                          @click.stop="clickDelete(props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
                             <q-tooltip>ลบ</q-tooltip>
                             <q-icon color="red" size="xs" name="mdi-delete" />
                           </q-item-section>
@@ -533,16 +408,8 @@ const resetFilter = () => {
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
-              <q-pagination
+              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                v-model="pagination.page"
+                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
             </template>
           </d-table>
         </div>
@@ -557,19 +424,8 @@ const resetFilter = () => {
     </div>
   </q-card>
 
-  <DialogForm
+  <DialogForm :modal="modal" :save="save" :close="close" :insignia-list="insigniaOp" />
-    :modal="modal"
-    :save="save"
-    :close="close"
-    :insignia-list="insigniaOp"
-  />
 
-  <DialogEdit
+  <DialogEdit :modal="modalEdit" :save="saveEdit" :close="close" :insigniadata="rowData" :actionType="actionType" />
-    :modal="modalEdit"
-    :save="saveEdit"
-    :close="close"
-    :insigniadata="rowData"
-    :actionType="actionType"
-  />
 </template>
 <style lang="scss" scoped></style>

src/modules/07_insignia/components/4_Allocate/OrgAdd.vue

@@ -1,305 +1,3 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายชื่อที่จัดสรรเครื่องราชอิสริยาภรณ์ {{ name }} {{ organization }}
-  </div>
-  <q-card bordered class="q-py-sm row col-12">
-    <div class="col-12 row bg-white">
-      <div class="fit q-px-md q-py-sm">
-        <div class="row col-12 q-col-gutter-md fit">
-          <cardTop
-            :amount="stat.total"
-            label="จำนวนเครื่องราช ฯ ทั้งหมด"
-            color="#016987"
-          />
-          <cardTop
-            :amount="stat.sendInsig"
-            label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
-            color="#02A998"
-          />
-          <cardTop
-            :amount="stat.remainInsig"
-            label="จำนวนเครื่องราช ฯ คงเหลือ"
-            color="#2EA0FF"
-          />
-        </div>
-      </div>
-    </div>
-  </q-card>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
-        <div>
-          <q-btn
-            @click="clickAdd()"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
-          </q-btn>
-        </div>
-        <q-space />
-
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          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="resetFilter"
-            />
-          </template>
-        </q-input>
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
-      </div>
-      <div class="col-12">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="id"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          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-th auto-width />
-              <q-th auto-width />
-            </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="citizenId" :props="props">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="name" :props="props">
-                {{ props.row.name }}
-              </q-td>
-              <q-td key="organization" :props="props">
-                {{ props.row.organization }}
-              </q-td>
-              <q-td key="positionType" :props="props">
-                {{ props.row.positionType }}
-              </q-td>
-              <q-td key="positionAdmin" :props="props">
-                {{ props.row.positionAdmin }}
-              </q-td>
-              <q-td key="positionLine" :props="props">
-                {{ props.row.positionLine }}
-              </q-td>
-              <q-td key="positionNum" :props="props">
-                {{ props.row.positionNum }}
-              </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="blue"
-                  icon="mdi-alert-circle-outline"
-                >
-                  <q-tooltip>หมายเหตุ</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-td>
-                <q-btn
-                  label="คืนแล้ว"
-                  @click="clickNote(props.row.id)"
-                  color="blue"
-                />
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
-      </div>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มรายชื่อ " :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input
-            class="col-12"
-            standout
-            dense
-            v-model="filterKeyword2"
-            ref="filterRef2"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword2 !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter2"
-              />
-            </template>
-          </q-input>
-          <div class="col-12">
-            <q-table
-              ref="table2"
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2"
-              row-key="Order"
-              flat
-              bordered
-              :paging="true"
-              dense
-              class="custom-header-table"
-              v-bind="attrs"
-              :visible-columns="visibleColumns2"
-              :pagination-label="paginationLabel"
-              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-th auto-width />
-                </q-tr>
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                  <q-td auto-width>
-                    <q-btn
-                      dense
-                      class="q-px-md"
-                      outline
-                      color="primary"
-                      v-close-popup
-                      label="เพิ่ม"
-                    >
-                    </q-btn>
-                  </q-td>
-                </q-tr>
-              </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
-            </q-table>
-          </div>
-        </q-card-section>
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <DialogPopupReason
-    :modal="addNote"
-    title="คืนเครื่องราชฯ"
-    label="กรอกเหตุผลที่ต้องการคืนเครื่องราชฯ"
-    :click-close="clickCloseNote"
-    :savaForm="saveNote"
-  />
-  <!-- <q-dialog v-model="addNote" persistent>
-    <q-card style="min-width: 350px">
-      <DialogHeader tittle="คืนเครื่องราชฯ  " :close="clickCloseNote" />
-
-      <q-card-section class="q-pt-none">
-        <q-input
-          dense
-          type="textarea"
-          v-model="Note"
-          label="กรอกเหตุผลที่ต้องการคืนเครื่องราชฯ "
-          autofocus
-          @keyup.enter="addNote = false"
-        />
-      </q-card-section>
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" @click="saveNote" color="public" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog> -->
-</template>
-
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { QTableProps } from "quasar";
@@ -309,19 +7,20 @@ import { useCounterMixin } from "@/stores/mixin";
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
 import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
-import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
 
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
+const { dialogMessage } =
   mixin;
 const name = ref<string>("");
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
 const saveWriteNote = ref<any[]>([]);
 const addNote = ref<boolean>(false);
+
 const clickNote = () => {
   addNote.value = true;
 };
+
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -635,6 +334,289 @@ const paginationLabel = (start: string, end: string, total: string) => {
 };
 </script>
 
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อที่จัดสรรเครื่องราชอิสริยาภรณ์ {{ name }}
+  </div>
+  <q-card bordered class="q-py-sm row col-12">
+    <div class="col-12 row bg-white">
+      <div class="fit q-px-md q-py-sm">
+        <div class="row col-12 q-col-gutter-md fit">
+          <cardTop
+            :amount="stat.total"
+            label="จำนวนเครื่องราช ฯ ทั้งหมด"
+            color="#016987"
+          />
+          <cardTop
+            :amount="stat.sendInsig"
+            label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
+            color="#02A998"
+          />
+          <cardTop
+            :amount="stat.remainInsig"
+            label="จำนวนเครื่องราช ฯ คงเหลือ"
+            color="#2EA0FF"
+          />
+        </div>
+      </div>
+    </div>
+  </q-card>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          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="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          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-th auto-width />
+              <q-th auto-width />
+            </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="citizenId" :props="props">
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="organization" :props="props">
+                {{ props.row.organization }}
+              </q-td>
+              <q-td key="positionType" :props="props">
+                {{ props.row.positionType }}
+              </q-td>
+              <q-td key="positionAdmin" :props="props">
+                {{ props.row.positionAdmin }}
+              </q-td>
+              <q-td key="positionLine" :props="props">
+                {{ props.row.positionLine }}
+              </q-td>
+              <q-td key="positionNum" :props="props">
+                {{ props.row.positionNum }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="blue"
+                  icon="mdi-alert-circle-outline"
+                >
+                  <q-tooltip>หมายเหตุ</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td>
+                <q-btn
+                  label="คืนแล้ว"
+                  @click="clickNote()"
+                  color="blue"
+                />
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เพิ่มรายชื่อ " :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-md q-col-gutter-sm">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
+            </template>
+          </q-input>
+          <div class="col-12">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :visible-columns="visibleColumns2"
+              :pagination-label="paginationLabel"
+              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-th auto-width />
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      v-close-popup
+                      label="เพิ่ม"
+                    >
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <DialogPopupReason
+    :modal="addNote"
+    title="คืนเครื่องราชฯ"
+    label="กรอกเหตุผลที่ต้องการคืนเครื่องราชฯ"
+    :click-close="clickCloseNote"
+    :savaForm="saveNote"
+  />
+</template>
+
 <style lang="scss" scope>
 .filter-card {
   background-color: #f1f1f1b0;

src/modules/07_insignia/components/4_Allocate/OrgList.vue

@@ -184,7 +184,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -380,19 +380,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.rowIndex + 1 }}
               </q-td>
               <q-td key="organization" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
                 {{ props.row.organization }}
               </q-td>
               <q-td key="total" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
                 {{ props.row.total }}
               </q-td>
               <q-td key="allocate" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
                 {{ props.row.allocate }}
               </q-td>
               <q-td key="remain" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
                 {{ props.row.remain }}
               </q-td>
               <q-td auto-width>

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -32,6 +32,7 @@ const listPerson = ref<any>([]);
 const OrgList = ref<DataOption[]>([]);
 const insigniaNoteProfileId = ref<string>("");
 
+// เคลียร์ข้อมูลในฟอร์ม
 const clearData = () => {
   receivedate.value = null;
   returndate.value = null;
@@ -75,17 +76,21 @@ const props = defineProps({
   },
 });
 
+// เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล
 watch(props, () => {
   if (props.modal == true && props.roundId != "all") {
     roundNo.value = props.roundId;
     fecthlistInsignia();
     fetchOrgList();
-    if (props.action == "editData") {
+
-      fetchData();
+    // ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
-    }
+    // if (props.action == "editData") {
+    //   fetchData();
+    // }
   }
 });
 
+// ดึงข้อมูลรายการเครื่องราช
 const fecthlistInsignia = async () => {
   showLoader();
   let data = {
@@ -111,6 +116,7 @@ const fecthlistInsignia = async () => {
     });
 };
 
+// ดึงข้อมูลรายการหน่วยงาน
 const fetchOrgList = async () => {
   showLoader();
   await http
@@ -141,21 +147,21 @@ const fetchOrgList = async () => {
     });
 };
 
-const fetchData = async () => {
+// ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
-  showLoader();
+// const fetchData = async () => {
-  await http
+//   showLoader();
-    .get(config.API.insigniaManageBorrowById(props.profileId))
+//   await http
-    .then(async (response: any) => {
+//     .get(config.API.insigniaManageBorrowById(props.profileId))
-      console.log(response);
+//     .catch((err) => {
-    })
+//       messageError($q, err);
-    .catch((err) => {
+//     })
-      messageError($q, err);
+//     .finally(() => {
-    })
+//       hideLoader();
-    .finally(() => {
+//     });
-      hideLoader();
+// };
-    });
-};
 
+
+// บันทึกข้อมูลการยืม-คืน
 const clickSave = async () => {
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
@@ -200,6 +206,7 @@ const clickSave = async () => {
   });
 };
 
+// ค้นหาคนจากเลขประจำตัวประชาชน
 const searchcardid = async () => {
   if (cardid.value.length === 13) {
     const node = await listPerson.value.find(
@@ -220,15 +227,26 @@ const searchcardid = async () => {
   }
 };
 
+// ปิด dialog
 const closeDialog = () => {
   clearData();
   props.close();
 };
+
+// reset วันที่ยืม
+const clearReceiveDate = () => {
+  receivedate.value = null;
+}
+
+// reset วันที่คืน
+const clearReturnDate = () => {
+  returndate.value = null;
+}
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 900px" class="q-pb-md">
+    <q-card style="min-width: 900px">
       <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
       <q-separator />
 
@@ -261,7 +279,7 @@ const closeDialog = () => {
                   @update:model-value="fecthlistInsignia()"
                 />
               </div>
-              <div class="col-12 text-weight-bold text-grey">ข้อมูลผู้ยืม</div>
+              <div class="col-12 q-mt-md text-weight-bold text-grey-7">ข้อมูลผู้ยืม</div>
               <div class="col-xs-12 col-sm-6">
                 <q-input
                   :disable="roundNo == ''"
@@ -272,7 +290,7 @@ const closeDialog = () => {
                   dense
                   lazy-rules
                   :rules="[
-                    (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                    (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
                     (val: string) =>
                       val.length >= 13 ||
                       `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
@@ -285,7 +303,7 @@ const closeDialog = () => {
               </div>
               <div class="col-xs-6 col-sm-6">
                 <q-input
-                  disable
+                  readonly
                   hide-bottom-space
                   outlined
                   dense
@@ -294,15 +312,16 @@ const closeDialog = () => {
                   borderless
                   v-model="fullName"
                   :label="`${'ชื่อ-นามสกุล'}`"
+                  :rules="[(val) => !!val || 'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง']"
                 />
               </div>
 
-              <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
-              <div class="col-12 text-weight-bold text-grey">
                 รายละเอียดการยืมเครื่องราชฯ
               </div>
               <div class="col-xs-12 col-sm-6">
                 <q-input
+                  :rules="[(val) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
                   v-model="brand"
                   disable
                   dense
@@ -341,6 +360,7 @@ const closeDialog = () => {
                       "
                       :label="`${'วันที่ยืม'}`"
                       clearable
+                      @clear="clearReceiveDate"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -369,6 +389,7 @@ const closeDialog = () => {
                   v-model="OrganazationId"
                   lazy-rules
                   :label="`เลือกหน่วยงาน`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
                 />
               </div>
             </div>
@@ -377,8 +398,8 @@ const closeDialog = () => {
               class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
               v-if="props.action === 'editData'"
             >
-              <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+
-              <div class="col-12 text-weight-bold text-grey">
+            <div class="col-12 text-weight-bold text-grey-7">
                 รายละเอียดการคืนเครื่องราชฯ
               </div>
               <div class="col-xs-12 col-sm-6">
@@ -403,13 +424,14 @@ const closeDialog = () => {
                       borderless
                       outlined
                       lazy-rules
-                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                       hide-bottom-space
                       :model-value="
                         returndate != null ? date2Thai(returndate) : undefined
                       "
                       :label="`${'วันที่คืน'}`"
                       clearable
+                      @clear="clearReturnDate"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -438,6 +460,7 @@ const closeDialog = () => {
                   outlined
                   v-model="OrganazationId"
                   :label="`เลือกหน่วยงานที่ส่งคืน`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
                 />
               </div>
 

src/modules/07_insignia/components/5_Borrow/Main.vue

@@ -137,9 +137,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ลำดับ",
     field: "no",
-    sortable: true,
+    sortable: false,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "citizenId",

src/modules/07_insignia/components/Coin.vue

@@ -1,506 +0,0 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
-  </div>
-  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
-    <q-tabs
-      v-model="tab"
-      align="left"
-      class="bg-white text-grey"
-      active-color="primary"
-      indicator-color="primary"
-    >
-      <q-tab name="yes" label="คนที่ยื่นขอ" />
-      <q-tab name="no" label="คนที่ไม่ยื่นขอ" />
-    </q-tabs>
-    <q-separator />
-    <div class="q-py-md q-px-lg">
-      <!-- <div>
-        <label class="q-mr-sm">รอบ</label>
-        <q-btn
-          flat
-          round
-          de
-          color="grey"
-          icon="mdi-menu-left"
-          :class="getArrow(arrow)"
-          @click="clickRound"
-        />
-      </div>
-      <Transition>
-        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
-          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
-            <div class="col-xs-6 col-md-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateGoverment"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker bg-white"
-                    :model-value="
-                      dateGoverment != null ? date2Thai(dateGoverment) : null
-                    "
-                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateReceiver"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker bg-white"
-                    :model-value="
-                      dateReceiver != null ? date2Thai(dateReceiver) : null
-                    "
-                    :label="`${'วันที่ได้รับ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="issue"
-                :label="`${'ฉบับ'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="book"
-                :label="`${'เล่มที่'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="volume"
-                :label="`${'เล่ม'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="section"
-                :label="`${'ตอนที่'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-md-6">
-              <q-file
-                class="bg-white"
-                outlined
-                dense
-                v-model="government"
-                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-12 col-md-6">
-              <q-file
-                class="bg-white"
-                outlined
-                dense
-                v-model="document"
-                label="เอกสารประกอบ"
-                hide-bottom-space
-                lazy-rules
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </div>
-      </Transition> -->
-      <div :class="marginTop(arrow)">
-        <div class="col-12 row q-pb-sm items-center">
-          <selector
-            outlined
-            dense
-            lazy-rules
-            v-model="capYears"
-            hide-bottom-space
-            :label="`${'ปีงบประมาณ'}`"
-            emit-value
-            map-options
-            option-label="name"
-            :options="capYearsOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-            @filter="(inputValue:string,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
-                        ) "
-          />
-          <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>
-                {{ props.value }}
-              </div>
-            </q-td>
-          </template>
-        </d-table>
-      </div>
-    </div>
-  </q-card>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-// import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-import type { QTableProps, QInput } from "quasar";
-
-// const router = useRouter();
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-
-const tab = ref<string>("yes");
-const arrow = ref<boolean>(false);
-
-// const dateGoverment = ref<Date>(new Date());
-// const dateReceiver = ref<Date>(new Date());
-// const issue = ref<string>("");
-// const book = ref<string>("");
-// const volume = ref<string>("");
-// const section = ref<string>("");
-// const government = ref<any>(null);
-// const document = ref<any>(null);
-
-const capYears = ref<string>("");
-const capYearsOption = ref<DataOption[]>([]);
-const capYearsOptionFilter = ref<DataOption[]>([]);
-
-const visibleColumns = ref<String[]>([
-  "no",
-  "cardid",
-  "name",
-  "position",
-  "range",
-  "salary",
-  "zone",
-  "school",
-  "date",
-]);
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "cardid",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "cardid",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    field: "position",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "range",
-    align: "left",
-    label: "อันดับ",
-    field: "range",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    field: "salary",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "zone",
-    align: "left",
-    label: "เขต",
-    field: "zone",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "school",
-    align: "left",
-    label: "โรงเรียน",
-    field: "school",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "date",
-    align: "left",
-    label: "วันที่ยื่นขอ",
-    field: "date",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<any>([
-  {
-    no: "1",
-    cardid: "1XXXXXXXXXXXX",
-    name: "นางสาวรัชภรณ์ ภักดี",
-    position: "กกก",
-    range: "1",
-    salary: "XXXXXX",
-    zone: "1",
-    school: "โรงเรียน",
-    date: date2Thai(new Date()),
-  },
-  {
-    no: "2",
-    cardid: "1XXXXXXXXXXXX",
-    name: "นางสาวรัชภรณ์ ภักดี",
-    position: "กกก",
-    range: "1",
-    salary: "XXXXXX",
-    zone: "1",
-    school: "โรงเรียน",
-    date: date2Thai(new Date()),
-  },
-  {
-    no: "3",
-    cardid: "1XXXXXXXXXXXX",
-    name: "นางสาวรัชภรณ์ ภักดี",
-    position: "กกก",
-    range: "1",
-    salary: "XXXXXX",
-    zone: "1",
-    school: "โรงเรียน",
-    date: date2Thai(new Date()),
-  },
-]);
-
-onMounted(() => {
-  const op2: DataOption[] = [
-    { id: "1", name: "2566" },
-    { id: "2", name: "2565" },
-    { id: "3", name: "2564" },
-  ];
-
-  capYearsOption.value = op2;
-  capYearsOptionFilter.value = op2;
-});
-
-const clickRound = () => {
-  arrow.value = !arrow.value;
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "capYearsOption":
-      update(() => {
-        capYearsOption.value = capYearsOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-// const getArrow = (val: boolean) => {
-//   return {
-//     "arrow cursor-pointer": !val,
-//     "arrow-active cursor-pointer": val,
-//   };
-// };
-
-const marginTop = (val: boolean) => {
-  return {
-    "": !val,
-    "q-mt-md": val,
-  };
-};
-</script>
-<style lang="scss" scoped>
-.arrow {
-  transition: transform 0.5s;
-}
-
-.arrow-active {
-  transition: transform 0.5s;
-  transform: rotate(-90deg);
-}
-
-.bg-base {
-  background-color: #efefef;
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>

src/modules/07_insignia/router.ts

@@ -12,11 +12,11 @@ const report_02 = () =>
 const RecordInsignia = () =>
   import("@/modules/07_insignia/views/ResultPage.vue");
 const insigniaProposals = () =>
-  import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
+  import("@/modules/07_insignia/components/1_Proposals/ListProposals.vue");
 const roundAdd = () =>
-  import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
+  import("@/modules/07_insignia/components/1_Proposals/AddProposals.vue");
 const listMange = () =>
-  import("@/modules/07_insignia/components/2_Manage/listManage.vue");
+  import("@/modules/07_insignia/components/2_Manage/ListManage.vue");
 const listAllocate = () =>
   import("@/modules/07_insignia/components/4_Allocate/Main.vue");
 const allocateOrdList = () =>

src/modules/07_insignia/views/ResultPage.vue

@@ -6,7 +6,7 @@ import config from "@/app.config";
 import { useResultDataStore } from "@/modules/07_insignia/storeResult";
 
 import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
-import fileUploadview from "../components/3_result/fileUpload.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";
@@ -34,9 +34,11 @@ const profileType = ref<string>("");
 const fileResult = ref<any>(null);
 const fileinvoice = ref<any>(null);
 const loadView = ref<boolean>(false);
+
 onMounted(async () => {
   await fecthRound();
 });
+
 // รอบการเสนอขอพระราชทานเครื่องราช
 const fecthRound = async () => {
   showLoader();
@@ -107,15 +109,14 @@ const visibleColumns = ref<String[]>([
   "address",
   "action",
 ]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     field: "no",
-    sortable: true,
+    sortable: false,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -270,10 +271,12 @@ watch(modal, () => {
     fecthlistInsignia();
   }
 });
+
 // เลือกประเภทเครื่องราช
 const selectorInsignia = () => {
   fecthlistInsignia();
 };
+
 // เลือกประเภทเครื่องราช
 const selectorRound = (round: string) => {
   if (round) {
@@ -281,6 +284,7 @@ const selectorRound = (round: string) => {
   }
   fecthlistInsignia();
 };
+
 // ราชชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
 const fecthlistInsignia = async () => {
   showLoader();
@@ -302,6 +306,7 @@ const fecthlistInsignia = async () => {
       hideLoader();
     });
 };
+
 const uploadFile = async (event: any, action: string) => {
   if (selectRound.value !== undefined) {
     let id = selectRound.value;