ปรับการแสดง reason ของการจัดการคำขอ

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

@@ -195,47 +195,112 @@ const dialogNote = ref<boolean>(false);
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
 const showReson = (name: string, requestNote: string) => {
-  dialogTitle.value = 'หมายเหตุของ' + name;
+  dialogTitle.value = "หมายเหตุของ" + name;
   dialogDesc.value = requestNote;
   dialogNote.value = true;
-}
+};
 
 const closeReson = () => {
   dialogNote.value = false;
-}
+};
-
 </script>
 <template>
   <div class="col-12 row q-pa-md">
     <div class="row col-12">
       <!-- {{ DataStore.typeinsigniaOptions }} -->
       <div class="row col-12 q-col-gutter-sm">
-        <q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
+        <q-select
-          :options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          v-if="props.roleUser == 'admin'"
-          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
+          v-model="organization"
-          @update:model-value="changtypeOc" />
+          label="หน่วยงาน"
-        <q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
+          dense
-          :options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          emit-value
-          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
+          map-options
-          @update:model-value="DataStore.searchFilterTable" />
+          :options="organizationOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="changtypeOc"
+        />
+        <q-select
+          v-model="DataStore.typeinsignia"
+          label="ปรเภทเครื่องราชฯ"
+          dense
+          emit-value
+          map-options
+          :options="DataStore.typeinsigniaOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="DataStore.searchFilterTable"
+        />
         <q-space />
 
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+        <q-input
-          debounce="300" placeholder="ค้นหา">
+          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" />
+            <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"
+        <q-select
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          v-model="visibleColumns"
-          class="col-xs-12 col-sm-3 col-md-2" />
+          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-pt-sm">
-        <q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
+        <q-table
-          bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
+          ref="table"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          :columns="columns"
+          :rows="DataStore.rows"
+          :filter="filterKeyword"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :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">
@@ -245,7 +310,11 @@ const closeReson = () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" @click="nextPage(props.row.profileId)">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="nextPage(props.row.profileId)"
+            >
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
@@ -274,21 +343,42 @@ const closeReson = () => {
               <q-td key="insigniaLevel" :props="props">
                 {{ props.row.insigniaLevel }}
               </q-td>
-              <q-td v-if="props.row.requestNote != ''" auto-width>
+              <q-td v-if="props.row.requestNote != null" auto-width>
-                <q-btn dense size="12px" flat round color="blue" @click.stop
+                <q-btn
-                  @click="showReson(props.row.name, props.row.requestNote)" icon="mdi-information-outline">
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="blue"
+                  @click.stop
+                  @click="showReson(props.row.name, props.row.requestNote)"
+                  icon="mdi-information-outline"
+                >
                   <q-tooltip>เหตุผลการไม่ยื่นขอ</q-tooltip>
                 </q-btn>
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="primary" :max="scope.pagesNumber"
+            <q-pagination
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+              v-model="pagination.page"
+              active-color="primary"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
 
-        <DialogInformation :modal="dialogNote" :title="dialogTitle" :desc="dialogDesc" :click-close="closeReson" />
+        <DialogInformation
+          :modal="dialogNote"
+          :title="dialogTitle"
+          :desc="dialogDesc"
+          :click-close="closeReson"
+        />
       </div>
     </div>
   </div>

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

@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import { useRouter } from "vue-router";
+import DialogInformation from "@/components/Dialogs/Information.vue";
 
 const router = useRouter();
 const DataStore = useInsigniaDataStore();
@@ -185,9 +186,16 @@ const paginationLabel = (start: number, end: number, total: number) => {
 };
 
 const dialogNote = ref<boolean>(false);
-const showNote = (requestNote: string) => {
+const note = ref<string>("");
+const noteTitle = ref<string>("");
+const showNote = (row: any) => {
+  note.value = row.requestNote;
+  noteTitle.value = "เหตุผลกรลบออกของ" + " " + row.name;
   dialogNote.value = true;
 };
+const closeReson = () => {
+  dialogNote.value = false;
+};
 </script>
 <template>
   <div class="col-12 row q-pa-md">
@@ -327,7 +335,7 @@ const showNote = (requestNote: string) => {
               <q-td key="insigniaLevel" :props="props">
                 {{ props.row.insigniaLevel }}
               </q-td>
-              <q-td v-if="props.row.requestNote != ''" auto-width>
+              <q-td v-if="props.row.requestNote != null" auto-width>
                 <q-btn
                   dense
                   size="12px"
@@ -335,7 +343,7 @@ const showNote = (requestNote: string) => {
                   round
                   color="blue"
                   @click.stop
-                  @click="showNote(props.row.requestNote)"
+                  @click="showNote(props.row)"
                   icon="mdi-information-outline"
                 >
                   <q-tooltip>เหตุผลการลบ</q-tooltip>
@@ -359,4 +367,10 @@ const showNote = (requestNote: string) => {
       </div>
     </div>
   </div>
+  <DialogInformation
+    :modal="dialogNote"
+    :title="noteTitle"
+    :desc="note"
+    :click-close="closeReson"
+  />
 </template>