From 0df46c7866370a6f9fc2662426d6cd00a501e630 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 25 Jul 2023 17:24:35 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Transfer/transferRegistry.vue  | 250 ++++++++++++------
 1 file changed, 163 insertions(+), 87 deletions(-)

diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 674f8d9a5..5c884ef06 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -1,54 +1,71 @@
 <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="router.go(-1)"
-      />
-      รายละเอียดการขอโอนของ {{ name }}
-      
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการขอโอนของ {{ name }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${personId}`)"/>
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
     </div>
-    <div class="col-12"><q-separator/></div>
+    <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
       <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-3 col-sm-2 col-md-1 row ">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
           <q-img src="@/assets/avatar_user.jpg" />
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">{{position}}</div>
+            <div class="col-12 text-detail">{{ position }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{level}}</div>
+            <div class="col-12 text-detail">{{ level }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">{{institution}}</div>
+            <div class="col-12 text-detail">{{ institution }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สถานะการทดลองงาน</div>
             <div class="col-12 text-detail">
-              <q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
-              <q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
+              <q-icon
+                size="20px"
+                v-if="status == 'อยู่ระหว่างการทดลองงาน'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="status == 'ไม่ผ่านการทดลอง'"
+                name="mdi-close"
+                color="red"
+              />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
               {{ status }}
             </div>
@@ -58,56 +75,81 @@
     </div>
   </q-card>
 
-<q-card bordered class="row col-12 text-dark q-mt-sm">
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
       <q-space />
-        <q-btn outline color="primary" dense icon-right="arrow_forward" class="q-px-sm" label="ส่งคำร้องไปยัง สกจ." />
+      <q-btn
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+      />
     </div>
-    <div class="col-12"><q-separator/></div>
+    <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 ">
+          <div class="col-12">
             <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
-            <div class="col-12 text-detail">{{organization}}</div>
+            <div class="col-12 text-detail">{{ organization }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
-            <div class="col-12 text-detail">{{reason}}</div>
+            <div class="col-12 text-detail">{{ reason }}</div>
           </div>
         </div>
-
       </div>
     </div>
-    
   </q-card>
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
     </div>
-    <div class="col-12"><q-separator/></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 ">
-            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
-            <div class="col-12 text-detail">{{organization}}</div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
-            <div class="col-12 text-detail">{{reason}}</div>
-          </div>
-        </div>
-
-      </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <q-table
+        flat
+        bordered
+        :rows="rows"
+        :columns="columns"
+        row-key="name"
+        hide-header
+        hide-bottom
+      >
+        <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="noteTitle" :props="props">
+              {{ props.row.noteTitle }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn flat
+								dense
+								round
+                color="red" 
+                icon="picture_as_pdf">
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+              <q-btn flat
+								dense
+								round
+                color="blue" 
+                icon="mdi-file-word">
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </div>
-    
   </q-card>
 </template>
 <script setup lang="ts">
@@ -116,60 +158,94 @@ import { ref } from "vue";
 import { useRoute } from "vue-router";
 
 const router = useRouter();
-const name = ref<string>('นายสมคิด ยอดใจ')
-const position = ref<string>('นักจัดการงานทั่วไป')
-const level = ref<string>('ชำนาญการพิเศษ')
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการทดลองงาน')
-const organization = ref<string>('ก.ก.')
-const reason = ref<string>('เพราะxxx') 
+const name = ref<string>("นายสมคิด ยอดใจ");
+const position = ref<string>("นักจัดการงานทั่วไป");
+const level = ref<string>("ชำนาญการพิเศษ");
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+const status = ref<string>("อยู่ระหว่างการทดลองงาน");
+const organization = ref<string>("ก.ก.");
+const reason = ref<string>("เพราะxxx");
 const route = useRoute();
 const personId = route.params.id;
-
-
+const rows = [
+  {
+    noteTitle: "ชื่อเอกสาร",
+  },
+  {
+    noteTitle: "ชื่อเอกสาร",
+  },
+];
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "noteTitle",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "noteTitle",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+];
 </script>
 <style lang="scss" scope>
 .q-img {
-border-radius: 5px;
-height: 70px;
+  border-radius: 5px;
+  height: 70px;
 }
-.text-top{
-color: gray;
-font-weight: 400;
-padding-bottom: 3px;
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
 }
-.text-detail{
-font-weight: 500;
-
+.text-detail {
+  font-weight: 500;
 }
 .custom-header-table {
-max-height: 64vh;
+  max-height: 64vh;
 
-.q-table tr:nth-child(odd) td {
-  background: white;
-}
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
 
-.q-table tr:nth-child(even) td {
-  background: #f8f8f8;
-}
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
 
-.q-table thead tr {
-  background: #ecebeb;
-}
+  .q-table thead tr {
+    background: #ecebeb;
+  }
 
-.q-table thead tr th {
-  position: sticky;
-  z-index: 1;
-}
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
 
-/* this will be the loading indicator */
-.q-table thead tr:last-child th {
-  /* height of all previous header rows */
-  top: 48px;
-}
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
 
-.q-table thead tr:first-child th {
-  top: 0;
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
 }
-}
-</style>
\ No newline at end of file
+</style>