ui ขอโอน

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -11,13 +11,20 @@
       @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="row col-12 q-pa-md">
@@ -47,8 +54,18 @@
           <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
-              <q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
+                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>
@@ -62,7 +79,14 @@
     <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="row col-12 q-pa-md">
@@ -79,10 +103,8 @@
             <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">
@@ -90,24 +112,44 @@
       <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>
+      <q-table
-            <div class="col-12 text-detail">{{organization}}</div>
+        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>
-        </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>
-    
   </q-card>
 </template>
 <script setup lang="ts">
@@ -116,17 +158,52 @@ import { ref } from "vue";
 import { useRoute } from "vue-router";
 
 const router = useRouter();
-const name = ref<string>('นายสมคิด ยอดใจ')
+const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>('นักจัดการงานทั่วไป')
+const position = ref<string>("นักจัดการงานทั่วไป");
-const level = ref<string>('ชำนาญการพิเศษ')
+const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+const status = ref<string>("อยู่ระหว่างการทดลองงาน");
-const organization = ref<string>('ก.ก.')
+const organization = ref<string>("ก.ก.");
-const reason = ref<string>('เพราะxxx') 
+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 {
@@ -140,7 +217,6 @@ padding-bottom: 3px;
 }
 .text-detail {
   font-weight: 500;
-
 }
 .custom-header-table {
   max-height: 64vh;