comment code retirement

src/modules/06_retirement/components/resign/Resign.vue

@@ -10,6 +10,7 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
+/** use */
 const RetirementData = useRetirementDataStore();
 const { statusText } = RetirementData;
 const $q = useQuasar(); //ใช้ noti quasar
@@ -17,6 +18,7 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const { messageError, date2Thai, showLoader, hideLoader } = mixin;
 
+/** คอลัมน์ */
 const rows = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -120,6 +122,8 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "prefix",
@@ -148,12 +152,13 @@ const closeModal = () => {
   modal.value = false;
   filterKeyword2.value = "";
 };
-
+//reset filter
 const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
 };
 
+//เปิด Modal
 const openModalOrder = async () => {
   openModal();
   const row = await filters.value.filter(
@@ -170,6 +175,7 @@ const openModalOrder = async () => {
   rows2.value = row;
 };
 
+/**Hook */
 onMounted(async () => {
   await fecthlist();
 });
@@ -219,6 +225,8 @@ const fecthlist = async () => {
       hideLoader();
     });
 };
+
+/**Setting pagination */
 const pagination = ref({
   sortBy: "datetext",
   descending: true,
@@ -234,28 +242,66 @@ const pagination = ref({
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
           <div>
-            <q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+            <q-btn
+              @click="openModalOrder"
+              size="14px"
+              flat
+              round
+              color="add"
+              icon="mdi-account-arrow-right"
+            >
               <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="ค้นหา">
+          <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" />
+              <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" />
+          <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-pt-sm">
-          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" :visible-columns="visibleColumns"
-            v-model:pagination="pagination">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            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">
@@ -264,7 +310,11 @@ const pagination = ref({
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click="router.push(`/retirement/resign/${props.row.id}`)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="router.push(`/retirement/resign/${props.row.id}`)"
+              >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
@@ -303,7 +353,12 @@ const pagination = ref({
     </div>
   </q-card>
 
-  <DialogSendToCommand v-model:modal="modal" :closeModal="closeModal" :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2" :fecthlistRecevice="fecthlist" />
+  <DialogSendToCommand
+    v-model:modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :fecthlistRecevice="fecthlist"
+  />
 </template>
 <style scoped lang="scss"></style>