- แก้ไข focus style icon ของเพิ่มคนในทดลองงาน + ลาออก

- fix code error (type script)

src/modules/05_placement/components/probation/MainProbation.vue

@@ -222,7 +222,7 @@ const getpersonalList = async () => {
       dataUpdate.value = rows.value;
       ProbationMainFilter();
     })
-    .catch(() => {})
+    .catch(() => { })
     .finally(() => {
       hideLoader();
     });
@@ -241,7 +241,7 @@ const fecthlistPersonal = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => { });
 };
 const fecthlistProbation = async (id: string, data: any) => {
   try {
@@ -390,90 +390,33 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
       <div class="row col-12 q-col-gutter-sm">
         <div class="col-6">
           <div class="row">
-            <q-select
+            <q-select class="col-5 q-mr-sm" v-model="fillter" label="สถานะ" dense map-options option-label="value"
-              class="col-5 q-mr-sm"
+              :options="Opfillter" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-              v-model="fillter"
+              :outlined="true" :hide-dropdown-icon="false" @update:model-value="updateRows(fillter)" />
-              label="สถานะ"
+            <div>
-              dense
+              <q-btn @click="fecthlistPersonal" size="12px" flat round color="add" icon="mdi-plus">
-              map-options
+                <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-              option-label="value"
+              </q-btn>
-              :options="Opfillter"
+            </div>
-              option-value="id"
-              lazy-rules
-              hide-bottom-space
-              :readonly="false"
-              :borderless="false"
-              :outlined="true"
-              :hide-dropdown-icon="false"
-              @update:model-value="updateRows(fillter)"
-            />
-            <q-btn
-              @click="fecthlistPersonal"
-              size="12px"
-              flat
-              round
-              color="add"
-              icon="mdi-plus"
-            >
-              <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-            </q-btn>
           </div>
         </div>
         <q-space />
-        <q-input
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-          class="col-xs-12 col-sm-3 col-md-2"
+          debounce="300" placeholder="ค้นหา">
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          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="resetFilter" />
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
           </template>
         </q-input>
 
-        <q-select
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-          v-model="visibleColumns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-          multiple
+          class="col-xs-12 col-sm-3 col-md-2" />
-          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
+        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" 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="rows"
-          :filter="filterKeyword"
-          row-key="Order"
-          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">
@@ -482,11 +425,8 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
+            <q-tr :props="props" class="cursor-pointer"
-              :props="props"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
-              class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
-            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -535,16 +475,8 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </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>
         </q-table>
       </div>
@@ -554,55 +486,23 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader
+        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
-          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
-          :close="clickClose"
-        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input
+          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
-            class="col-12"
+            placeholder="ค้นหา">
-            standout
-            dense
-            v-model="filterKeyword2"
-            ref="filterRef2"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon
+              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
-                v-if="filterKeyword2 !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter2"
-              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table
+            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
-              ref="table2"
+              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel2"
-              :columns="columns2"
+              v-model:pagination="pagination2">
-              :rows="rows2"
-              :filter="filterKeyword2"
-              row-key="Order"
-              flat
-              bordered
-              :paging="true"
-              dense
-              class="custom-header-table"
-              v-bind="attrs"
-              :pagination-label="paginationLabel2"
-              v-model:pagination="pagination2"
-            >
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th
+                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                    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 />
@@ -610,50 +510,26 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td
+                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
                     <div v-else-if="col.name == 'status'" class="text-center">
-                      <q-icon
+                      <q-icon v-if="col.value === true" name="mdi-check" color="positive" size="sm" />
-                        v-if="col.value === true"
-                        name="mdi-check"
-                        color="positive"
-                        size="sm"
-                      />
                     </div>
                     <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn
+                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
-                      dense
-                      class="q-px-md"
-                      outline
-                      color="primary"
-                      label="เพิ่ม"
-                      @click="clickAdd(props.row.id)"
-                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination
+                <q-pagination v-model="pagination2.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                  v-model="pagination2.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>
             </q-table>
           </div>

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

@@ -389,6 +389,13 @@ const status = (val: string) => {
       return "-";
   }
 };
+
+const pagination = ref({
+  sortBy: "datetext",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -397,9 +404,11 @@ const status = (val: string) => {
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
-          <q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+          <div>
-            <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
+            <q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right">
-          </q-btn>
+              <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
+            </q-btn>
+          </div>
 
           <q-space />
 
@@ -416,7 +425,8 @@ const status = (val: string) => {
             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">
+          <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">
@@ -491,7 +501,8 @@ const status = (val: string) => {
         </div>
 
         <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="id"
-          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected">
+          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected"
+          v-model:pagination="pagination">
           <template v-slot:header-selection="scope">
             <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
           </template>

src/modules/06_retirement/interface/response/out.ts

@@ -1,5 +1,5 @@
 interface ResponseData {
-  createdAt: Date;
+  createdAt: any;
   date: Date;
   firstName: string;
   id: string;