From 9e2ccfd6f9f0715c21eb3ce90dbec64c57c24bbc Mon Sep 17 00:00:00 2001
From: "Harid Promsri (Bright)" <harid_pr61@live.rmutl.ac.th>
Date: Thu, 8 Jun 2023 18:06:32 +0700
Subject: [PATCH] placementtable page (detail)

---
 .../components/PlacementTable.vue             | 323 +++++++++---------
 1 file changed, 162 insertions(+), 161 deletions(-)

diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
index 737c639dd..a26c13ffc 100644
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineComponent, h } from "vue";
+import { ref, defineComponent, h ,reactive } from "vue";
 import Table from "@/modules/05_placement/components/PlacementTableView.vue";
 import { useQuasar, QForm, QCheckbox, QSlideItem } from "quasar";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
@@ -28,16 +28,35 @@ const BMAOfficer = ref<boolean>();
 const Status = ref<string>();
 const checkList = ref<string>();
 
-  const $q = useQuasar(); // show dialog
-
+const $q = useQuasar(); // show dialog
+//bright
 const selectData = (props: TableName) => {
+  information.cardId = '4016500103241'
+  information.fullname = props.Name
+  information.birthday= '17 ก.พ. 2535'
+  information.gender= 'หญิง'
+  information.address= '200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170'
+  information.school= 'มหาวิทยาลัยมหาสารคาม'
+  information.degree= 'การศึกษาบัณฑิต'
+  information.department= 'เทคโนโลยีสื่อสารการศึกษา'
+  information.other= 'ใบอนุญาตประกอบวิชาชีพ'
+  information.A1= 200
+  information.A2= 133
+  information.B1= 200
+  information.B2= 149
+  information.C1= 100
+  information.C2= 382
+  information.status= 'ผ่าน'
+  information.range= 3
+  information.total=5
+
   if (editvisible.value == true) {
     editRow.value = false;
     modalEdit.value = true;
     modal.value = false;
     edit.value = true;
     position.value = props.position;
-    Name.value = props.Name;
+    // Name.value = props.Name;
     ExamOrder.value = props.ExamOrder;
     Unit.value = props.Unit;
     ReportingDate.value = props.ReportingDate;
@@ -207,6 +226,7 @@ const rows = ref<TableName[]>([
     checkList:null
   },
 ]);
+
 const clickCancel = async () => {
   editvisible.value = false;
 };
@@ -225,14 +245,34 @@ const clickClose = async () => {
     modal.value = false;
   }
 };
-
 //bright
+const information = reactive<any>({
+  cardId: '',
+  fullname: '',
+  birthday: '',
+  gender: '',
+  address: '',
+  school: '',
+  degree: '',
+  department: '',
+  other: '',
+  A1: null,
+  A2: null,
+  B1: null,
+  B2: null,
+  C1: null,
+  C2: null,
+  status: '',
+  range: null,
+  total:null
+});
+
+
 interface CheckboxItem {
   value: number;
   label: string;
 }
 const selection = ref ([]);
-
 const checkboxItems: CheckboxItem[] = [
     { value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
     { value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
@@ -247,30 +287,8 @@ const checkboxItems: CheckboxItem[] = [
     { value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
 ];
 
-
-
-const handleCheckboxChange = async (item: any ) => {
-  await
-  console.log('.......')
-  if(item.selected){
-    console.log(item.id +' '+item.selected)
-    item.selected = false
-  }else{
-    console.log(item.id +' '+item.selected)
-    item.selected = true
-  }
-}
-
 const clickSave = async () => {
-  await save(false);
-};
-
-const save = async (publish: boolean) => {
-  console.log(checkboxItems[0])
-};
-
-const clickIsActive = async (val: string, status: boolean) => {
-
+  console.log(selection.value)
 };
 
 </script>
@@ -377,7 +395,7 @@ const clickIsActive = async (val: string, status: boolean) => {
     <q-card>
       <q-form ref="myForm">
         <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader
+        <DialogHeader 
           :tittle="`รายละเอียดของ`"
           :close="clickClose"
         />
@@ -385,197 +403,180 @@ const clickIsActive = async (val: string, status: boolean) => {
           <q-card-section class="q-pa-sm">
 
             <div class="q-card q-card--bordered q-card--flat q-pa-sm">
-              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                 ข้อมูลทั่วไป
               </div>
               <div class="row">
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   เลขที่ประจำตัวประชาชน
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"xxxxxxxxxxxxx"}}
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.cardId}}
                 </div>
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   ชื่อ-นามสกุล
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"XXXXXXXXXXXXXXXXX"}}
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.fullname}}
                 </div>
               </div>
               <div class="row">
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   วัน/เดือน/ปีเกิด
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"xxxxxxxxxxxxx"}}
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.birthday}}
                 </div>
-                <div class="col-3 q-pa-xs">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   เพศ
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"XXXXXXXXXXXXXXXXX"}}
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.gender}} 
                 </div>
               </div>
             </div>
 
-
             <div class="q-card q-card--bordered q-card--flat q-pa-sm">
-              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                 ภูมิลำนำ
               </div>
               <div class="row">
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   ที่อยู่
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}}
+                <div class="col q-pa-xs" style="color: gray; font-size: 18px;">
+                  {{information.address}}
                 </div>
               </div>
             </div>
 
-
             <div class="q-card q-card--bordered q-card--flat q-pa-sm">
-              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                 การศึกษา
               </div>
               <div class="row">
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   สถานศึกษา
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"xxxxxxxxxxxxx"}}
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.school}}
                 </div>
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   วุฒิการศึกษา
                 </div>
                 <div class="col-3 q-pa-xs">
-                  {{"XXXXXXXXXXXXXXXXX"}}
+                  {{information.deegree}}
                 </div>
               </div>
               <div class="row">
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   สาขาวิชาเอก
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"xxxxxxxxxxxxx"}}
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.department}}
                 </div>
-                <div class="col-3 q-pa-xs" style="color: gray;">
+                <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                   อื่นๆ
                 </div>
-                <div class="col-3 q-pa-xs">
-                  {{"XXXXXXXXXXXXXXXXX"}}
-                </div>
-              </div>
-            </div>
-
-
-            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
-              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
-                การสอบ
-              </div>
-              <div class="row"> 
-                <!--  text-align: center; -->
-                <div class="col-2 q-pa-md" style="color: gray;">
-                  ประเภท
-                </div>
-                <div class="col-2 q-pa-xs" style="color: #259E75;">
-                  คะแนนเต็ม
-                </div>
-                <div class="col-2 q-pa-xs" style="color: #259E75;">
-                  คะแนนที่ได้
-                </div>
-                <div class="col-2 q-pa-xs" style="color: gray;">
-                  ผลการสอบ
-                </div>
-                <div class="col-2 q-pa-xs">
-                  {{"XXXXXXXXXXXXXXXXX"}}
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-2 q-pa-xs" style="color: gray; ">
-                  ภาค ก
-                </div>
-              </div>
-
-              <div class="row">
-                <div class="col-2 q-pa-xs" style="color: gray; ">
-                  ภาค ข
-                </div>
-              </div>
-
-              <div class="row">
-                <div class="col-2 q-pa-xs" style="color: gray; ">
-                  ภาค ค
-                </div>
-              </div>
-
-              <div class="row">
-                <div class="col-2 q-pa-xs" style="color: gray; ">
-                  รวมทั้งหมด
+                <div class="col-3 q-pa-xs" style="font-size: 18px;">
+                  {{information.other}}
                 </div>
               </div>
             </div>
             <!-- Bright -->
             <div class="q-card q-card--bordered q-card--flat q-pa-sm">
-              <div class="col-12 row items-center q-pa-sm" style="font-weight: bold;">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
+                การสอบ
+              </div>
+              <div class="row"> 
+                <!--  text-align: center; -->
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
+                  ประเภท
+                </div>
+                <div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
+                  คะแนนเต็ม
+                </div>
+                <div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
+                  คะแนนที่ได้
+                </div>
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
+                  ผลการสอบ
+                </div>
+                <div class="col-2 q-pa-xs">
+                  {{information.status}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
+                  ภาค ก
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold; ">
+                  {{information.A1}}
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.A2}}
+                </div>
+                <div class="col-2 q-pa-xs" style="color: gray;  font-size: 19px;">
+                  ลำดับที่สอบได้
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.range}}
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
+                  ภาค ข
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.B1}}
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.B2}}
+                </div>
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
+                  จำนวนครั้งที่สมัครสอบ
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.total}}
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
+                  ภาค ค
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.C1}}
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{information.C2}}
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
+                  รวมทั้งหมด
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{(information.A1+information.B1+information.C1)}}
+                </div>
+                <div class="col-2 q-pa-xs" style="font-weight: bold;">
+                  {{(information.A2+information.B2+information.C2)}}
+                </div>
+              </div>
+            </div>
+            <!-- Bright -->
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-sm" style="font-weight: bold; font-size: 18px;">
                 การคัดกรองคุณสมบัติ
               </div>
               <div >
               <q-list >
                 <q-item>
-                    <q-option-group v-model="selection" :options="checkboxItems" color="green" type="checkbox" />
+                  <q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style="font-size: 18px;"/>
                 </q-item>
                 <q-separator spaced inset />
-                <!-- @click="check(item.id, item.selected)" -->
-                <!-- <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ." color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-                
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-                
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-                
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-               
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นบุคคลล้มละลาย" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-               
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-                
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-               
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-                
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
-                </q-item>
-                <q-separator spaced inset />
-                
-                <q-item>
-                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ" color="green"/>
-                </q-item> -->
-
               </q-list>
               </div>
             </div>