From d1f1ba817cfaa8eb6d5e75427cb7c123ece530a6 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 17:25:26 +0700
Subject: [PATCH] =?UTF-8?q?popup=20=E0=B9=80=E0=B8=AB=E0=B8=95=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=A5=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B9=80=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/TableList.vue   | 166 +++++-------------
 1 file changed, 43 insertions(+), 123 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 22704c6c7..33ef58904 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -34,15 +34,15 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
- /*  {
-    name: "fixname",
-    align: "left",
-    label: "คำนำหน้านาม",
-    title: "คำนำหน้านาม",
-    field: "fixname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }, */
+  /*  {
+     name: "fixname",
+     align: "left",
+     label: "คำนำหน้านาม",
+     title: "คำนำหน้านาม",
+     field: "fixname",
+     headerStyle: "font-size: 14px",
+     style: "font-size: 14px",
+   }, */
   {
     name: "name",
     align: "left",
@@ -253,8 +253,8 @@ const clickDelete = (prop: any) => {
           } else await fecthlist(retireld_params);
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 // note
 const fetchReason = async (prop: string) => {
@@ -269,6 +269,7 @@ const fetchReason = async (prop: string) => {
       messageError($q, e);
     });
 };
+
 const saveNote = () => {
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
@@ -297,8 +298,8 @@ const saveNote = () => {
           modalNote.value = false;
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
@@ -361,26 +362,13 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="backHistory"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
-        <AddList
-          :retireld="retireld"
-          :profile-id="profileId"
-          :UpdateListId="UpdateListId"
-        />
+        <AddList :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId" />
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -409,35 +397,15 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
         <q-space />
         <q-tabs shrink>
-          <q-input
-            borderless
-            outlined
-            dense
-            debounce="300"
-            v-model="filter"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
+          <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา" style="max-width: 200px"
+            class="q-ml-sm">
             <template v-slot:append>
               <q-icon name="search" />
             </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="gt-xs q-ml-sm"
-          >
+          <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="gt-xs q-ml-sm">
             <!-- <template v-slot:option="{ opt }">
               <div>{{ opt.label }}</div>
               <div class="sublabel">{{ opt.sublabel }}</div>
@@ -447,20 +415,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </div>
 
       <div>
-        <q-table
-          flat
-          dense
-          bordered
-          :rows="rows"
-          :columns="columns"
-          row-key="order"
-          class="custom-header-table"
-          :filter="filter"
-          :visible-columns="visibleColumns"
-          no-data-label="ไม่มีข้อมูล"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
+          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
+          :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">
@@ -476,11 +433,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              :style="props.row.profileId === profileId && 'color: #26a69a;'"
-            >
+            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
+              @click="
+                fetchReason(props.row.id), (modalNote = true), (note = '')
+                ">
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
               <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
@@ -521,40 +477,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn
-                  flat
-                  round
-                  color="blue"
-                  dense
-                  icon="mdi-file-account"
-                  @click="router.push(`/registry/${props.row.profileId}`)"
-                >
+                <q-btn flat round color="blue" dense icon="mdi-file-account"
+                  @click="router.push(`/registry/${props.row.profileId}`)">
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
-                <q-btn
-                  flat
-                  round
-                  class="text-red-14"
-                  icon="mdi-delete"
-                  dense
-                  @click="clickDelete(props.row)"
-                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-                >
+                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
+                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+              boundary-links direction-links></q-pagination>
           </template>
         </q-table>
       </div>
@@ -566,38 +502,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card style="width: 700px; max-width: 80vw">
       <q-card-section class="q-pt-none">
         <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder"
-            >กรอกเหตุผล
+          <q-toolbar-title class="header-text text-weight-bolder">กรอกเหตุผล
           </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="modalNote = false"
-            style="color: #ff8080; background-color: #ffdede"
-          />
+          <q-btn icon="close" unelevated round dense @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede" />
         </q-toolbar>
       </q-card-section>
       <q-card-section class="q-pt-none">
-        <q-input
-          outlined
-          dense
-          lazy-rules
-          v-model="note"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-          :label="`${'กรอกเหตุผล'}`"
-          type="textarea"
-        />
+        <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`" type="textarea" />
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
-          label="บักทึก"
-          color="secondary"
-          @click="saveNote"
-          :disable="visibleNote"
-        />
+        <q-btn label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -623,13 +540,16 @@ const paginationLabel = (start: number, end: number, total: number) => {
     position: sticky;
     z-index: 1;
   }
+
   .q-table thead tr:last-child th {
     top: 48px;
   }
+
   .q-table thead tr:first-child th {
     top: 0;
   }
 }
+
 .q-btn-dropdown__arrow {
   display: none;
 }