From bdf1f7f0f73085ea1c343b8e21d3a592bc083c33 Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Tue, 13 Jun 2023 10:52:53 +0700
Subject: [PATCH] Edit dialog details

---
 .../05_placement/components/pass/Table.vue    | 107 +---
 .../components/pass/TableDetail.vue           | 498 ++++++++++--------
 2 files changed, 276 insertions(+), 329 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index e7bfa6b28..c7769c2a7 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -68,7 +68,7 @@ const getClass = (val: boolean) => {
   };
 };
 const selectData = (props: TableName) => {
-  itemtest.value = props
+  itemPopUp.value = props
   if (editvisible.value == true) {
     editRow.value = false;
     modalEdit.value = true;
@@ -424,7 +424,7 @@ const rows = ref<TableName[]>([
   },
 ]);
 
-const itemtest = ref<object>({});
+const itemPopUp = ref<object>({});
 
 const clickCancel = async () => {
   editvisible.value = false;
@@ -459,30 +459,6 @@ const save = () => {
   console.log("rows===>", rows.value)
 }
 
-// modal detail 
-interface CheckboxItem {
-  id: number;
-  label: string;
-}
-
-const selection = ref([]);
-const checkboxItems: CheckboxItem[] = [
-  { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
-  { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
-  { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-  { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
-  { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
-  { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
-  { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
-  { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
-  { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-  { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-  { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
-];
-
-const clickSave = async () => {
-  console.log(selection.value)
-};
 </script>
 <template>
   <q-form ref="myForm">
@@ -629,7 +605,7 @@ const clickSave = async () => {
   </q-dialog>
 
 
-  <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
+  <DialogCard v-model:Modal="modal" :getdetail="itemPopUp" :close="clickClose" />
 
 
   <q-dialog v-model="modal_right" persistent>
@@ -665,81 +641,4 @@ const clickSave = async () => {
   margin-bottom: 0;
   color: #818181;
 }
-
-.icon-officer {
-  color: #00AA86;
-  padding-left: 20px;
-}
-
-.check-officer {
-  font-size: 17px;
-  font-weight: 500;
-  line-height: 26px;
-  color: #00AA86;
-  padding-left: 20px;
-}
-
-.contanier-box-main {
-  padding: 10px 21px 10px 21px;
-}
-
-.contanier-box-mini {
-  padding: 10px 0px 10px 0px;
-}
-
-.card-panding {
-  padding: 15px 21px 15px 21px;
-}
-
-.header-text {
-  font-size: 18px;
-  font-weight: 600;
-  color: #4F4F4F;
-}
-
-.header-sub-text {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 150%;
-  color: #818181;
-}
-
-.sub-text {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  letter-spacing: 0.0025em;
-  color: #35373C;
-}
-
-.card-exam {
-  border-radius: 5px;
-  background: #FAFAFA;
-}
-
-.header-sub-text-exam {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 150%;
-  color: #818181;
-}
-
-.header-sub-text-exam-2 {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 150%;
-  color: #00AA86;
-}
-
-.sub-text-exam {
-  font-size: 15px;
-  font-weight: 500;
-  color: #000000;
-}
-
-.checkbox-group {
-  font-size: 16px;
-  font-weight: 400;
-  color: #35373C;
-}
 </style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index 8456a9728..1633a3a30 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,265 +1,313 @@
 <script setup lang="ts">
 
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 
-const save = ref<boolean>(true); 
+const save = ref<boolean>(true);
 const props = defineProps({
     Modal: Boolean,
     close: {
         type: Function,
         default: () => console.log("not function"),
     },
-    getdetail:{
+    getdetail: {
         type: Object,
         required: true
     }
 });
 
-const information = reactive<any>({
-    profileID: '',
-    fullName: '',
-    dateOfBirth: '',
-    gender: '',
-    address: '',
-    university: '',
-    degree: '',
-    major: '',
-    remark: '',
-    scoreAFull: null,
-    scoreA: null,
-    scoreBFull: null,
-    scoreB: null,
-    scoreCFull: null,
-    scoreC: null,
-    examResult: '',
-    examCount: null,
-    number: null,
-});
-
 interface CheckboxItem {
-  value: number;
-  label: string;
+    id: number;
+    label: string;
 }
 
 const selection = ref([]);
 const checkboxItems: CheckboxItem[] = [
-  { value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
-  { value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
-  { value: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-  { value: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
-  { value: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
-  { value: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
-  { value: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
-  { value: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
-  { value: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-  { value: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-  { value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
+    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
+    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
+    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
+    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
+    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
+    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
+    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
+    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
 ];
 
 const clickSave = async () => {
-  console.log(selection.value)
+    console.log(selection.value)
 };
 
 </script>
-
 <template>
-     
-    <q-dialog v-model="props.Modal" full-height full-width>
-        <q-card >
+    <q-dialog v-model="props.Modal">
+        <q-card style="max-width: 100%;width:80%;">
             <q-form ref="myForm">
-                <DialogHeader 
-                :title="`รายละเอียดของ ${ props.getdetail.fullName}`"
-                :close="close"
-                />
+                <div class="row">
+                    <DialogHeader :title="`รายละเอียดของ ${props.getdetail.fullName}`" :close="close" />
+                </div>
                 <q-separator />
-                <q-card-section class="q-pa-sm">
 
-                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
-                    <div class="col-12 row items-center q-pa-sm" style="font-weight: bold; ">
-                        ข้อมูลทั่วไป
+                <div class="contanier-box-main">
+                    <div class="contanier-box-mini">
+                        <q-card bordered class="card-panding">
+                            <div class="row items-center q-pa-xs header-text">
+                                ข้อมูลทั่วไป <span class="check-officer"><q-icon name="mdi-check" />
+                                    ข้าราชการฯ กทม</span>
+                            </div>
+                            <div class="row q-pa-xs">
+                                <div class="col-3 header-sub-text">
+                                    <div class="q-pb-md">
+                                        เลขที่ประจำตัวประชาชน
+                                    </div>
+                                    <div class="q-pb-md">
+                                        วัน/เดือน/ปีเกิด
+                                    </div>
+                                </div>
+                                <div class="col-4 sub-text">
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.profileID }}
+                                    </div>
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.dateOfBirth }}
+                                    </div>
+                                </div>
+                                <div class="col-2 header-sub-text">
+                                    <div class="q-pb-md">
+                                        ชื่อ-นามสกุล
+                                    </div>
+                                    <div class="q-pb-md">
+                                        เพศ
+                                    </div>
+                                </div>
+                                <div class="col-3 sub-text">
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.fullName }}
+                                    </div>
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.gender }}
+                                    </div>
+                                </div>
+                            </div>
+                        </q-card>
                     </div>
-                    <div class="row">
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        เลขที่ประจำตัวประชาชน
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.profileID }}
-                        </div>
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        ชื่อ-นามสกุล
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.fullName }}
-                        </div>
+                    <div class="contanier-box-mini">
+                        <q-card bordered class="card-panding">
+                            <div class="row items-center q-pa-xs header-text">
+                                ภูมิลำนำ
+                            </div>
+                            <div class="row q-pa-xs">
+                                <div class="col-3 header-sub-text">
+                                    ที่อยู่
+                                </div>
+                                <div class="col-9 header-sub-text">
+                                    {{ props.getdetail.address }}
+                                </div>
+                            </div>
+                        </q-card>
                     </div>
-                    <div class="row">
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        วัน/เดือน/ปีเกิด
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.dateOfBirth }}
-                        </div>
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        เพศ
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.gender }} 
-                        </div>
-                    </div>
-                    </div>
-                        
-                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
-                    <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
-                        ภูมิลำนำ
-                    </div>
-                    <div class="row">
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        ที่อยู่
-                        </div>
-                        <div class="col q-pa-xs" >
-                        {{ props.getdetail.address }}
-                        </div>
+                    <div class="contanier-box-mini">
+                        <q-card bordered class="card-panding">
+                            <div class="row items-center q-pa-xs header-text">
+                                การศึกษา
+                            </div>
+                            <div class="row q-pa-xs">
+                                <div class="col-3 header-sub-text">
+                                    <div class="q-pb-md">
+                                        สถานศึกษา
+                                    </div>
+                                    <div class="q-pb-md">
+                                        สาขาวิชาเอก
+                                    </div>
+                                </div>
+                                <div class="col-4 sub-text">
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.university }}
+                                    </div>
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.major }}
+                                    </div>
+                                </div>
+                                <div class="col-2 header-sub-text">
+                                    <div class="q-pb-md">
+                                        วุฒิการศึกษา
+                                    </div>
+                                    <div class="q-pb-md">
+                                        อื่นๆ
+                                    </div>
+                                </div>
+                                <div class="col-3 sub-text">
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.degree ? props.getdetail.degree : '-' }}
+                                    </div>
+                                    <div class="q-pb-md">
+                                        {{ props.getdetail.remark ? props.getdetail.remark : '-' }}
+                                    </div>
+                                </div>
+                            </div>
+                        </q-card>
                     </div>
+                    <div class="contanier-box-mini">
+                        <q-card bordered class="card-panding">
+                            <div class="row items-center q-pa-xs header-text">
+                                การสอบ
+                            </div>
+                            <div class="row q-pa-xs">
+                                <div class="col-6">
+                                    <q-card class="card-exam q-pa-sm">
+                                        <div class="row">
+                                            <div class="col-4 q-pa-xs header-sub-text-exam">
+                                                <div> ประเภท </div>
+                                                <div> ภาค ก </div>
+                                                <div> ภาค ข </div>
+                                                <div> ภาค ค </div>
+                                                <div> รวมทั้งหมด </div>
+                                            </div>
+                                            <div class="col-4 q-pa-xs">
+                                                <div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
+                                                <div class="sub-text-exam"> {{
+                                                    props.getdetail.scoreResult.scoreAFull }}</div>
+                                                <div class="sub-text-exam"> {{
+                                                    props.getdetail.scoreResult.scoreBFull }}</div>
+                                                <div class="sub-text-exam"> {{
+                                                    props.getdetail.scoreResult.scoreCFull }}</div>
+                                                <div class="sub-text-exam"> {{
+                                                    (props.getdetail.scoreResult.scoreSumFull) }}
+                                                </div>
+                                            </div>
+                                            <div class="col-4 q-pa-xs header-sub-text-exam-2">
+                                                <div class="header-sub-text-exam-2">ผลการสอบ</div>
+                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreA
+                                                }}</div>
+                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreB
+                                                }}</div>
+                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreC
+                                                }}</div>
+                                                <div class="sub-text-exam">{{
+                                                    (props.getdetail.scoreResult.scoreSum) }}</div>
+                                            </div>
+                                        </div>
+                                    </q-card>
+                                </div>
+                                <div class="col-1"></div>
+                                <div class="col-5 q-pt-sm q-pl-lg">
+                                    <div class="row">
+                                        <div class="col-7 header-sub-text">
+                                            <div class="q-pb-sm">ผลการสอบ</div>
+                                            <div class="q-pb-sm">ลำดับที่สอบได้</div>
+                                            <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
+                                        </div>
+                                        <div class="col-5 sub-text-exam">
+                                            <div class="q-pb-sm">{{ props.getdetail.scoreResult.examResult }}
+                                            </div>
+                                            <div class="q-pb-sm">{{ props.getdetail.number }}</div>
+                                            <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </q-card>
                     </div>
 
-                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
-                    <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
-                        การศึกษา
+                    <div class="contanier-box-mini">
+                        <q-card bordered class="card-panding">
+                            <div class="col-12 row items-center q-pa-sm header-text">
+                                การคัดกรองคุณสมบัติ
+                            </div>
+                            <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
+                                <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color
+                                    color="teal" class="checkbox-group" />
+                                <q-separator />
+                            </div>
+                        </q-card>
                     </div>
-                    <div class="row">
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        สถานศึกษา
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.university }}
-                        </div>
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        วุฒิการศึกษา
-                        </div>
-                        <div class="col-3 q-pa-xs">
-                        {{ props.getdetail.degree }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        สาขาวิชาเอก
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.major }}
-                        </div>
-                        <div class="col-3 q-pa-xs" style="color: gray; ">
-                        อื่นๆ
-                        </div>
-                        <div class="col-3 q-pa-xs" style="">
-                        {{ props.getdetail.remark }}
-                        </div>
-                    </div>
-                    </div>
-                    
-                    <div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
-                    <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
-                        การสอบ
-                    </div>
-                    <div class="row q-mx-md"> 
-                        <div class="col-2 q-pa-xs" 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">
-                        {{ props.getdetail.scoreResult.examResult }}
-                        </div>
-                    </div>
-                    <div class="row q-mx-md ">
-                        <div class="col-2 q-pa-xs" style="color: gray; ">
-                        ภาค ก
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold; ">
-                        {{ props.getdetail.scoreResult.scoreAFull }}
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.scoreResult.scoreA }}
-                        </div>
-                        <div class="col-2 q-pa-xs" style="color: gray;  ">
-                        ลำดับที่สอบได้
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.number }}
-                        </div>
-                    </div>
-
-                    <div class="row  q-mx-md">
-                        <div class="col-2 q-pa-xs" style="color: gray; ">
-                        ภาค ข
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.scoreResult.scoreBFull }}
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.scoreResult.scoreB }}
-                        </div>
-                        <div class="col-2 q-pa-xs" style="color: gray; ">
-                        จำนวนครั้งที่สมัครสอบ
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.examCount }}
-                        </div>
-                    </div>
-
-                    <div class="row  q-mx-md">
-                        <div class="col-2 q-pa-xs" style="color: gray; ">
-                        ภาค ค
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.scoreResult.scoreCFull }}
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ props.getdetail.scoreResult.scoreCFull }}
-                        </div>
-                    </div>
-
-                    <div class="row q-mx-md">
-                        <div class="col-2 q-pa-xs" style="color: gray; ">
-                        รวมทั้งหมด
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ (props.getdetail.scoreResult.scoreSumFull) }}
-                        </div>
-                        <div class="col-2 q-pa-xs" style="font-weight: bold;">
-                        {{ (props.getdetail.scoreResult.scoreSum) }}
-                        </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-sm" style="font-weight: bold; ">
-                        การคัดกรองคุณสมบัติ
-                    </div>
-                    <div >
-                    <q-list >
-                        <q-item>
-                        <q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style=""/>
-                        </q-item>
-                        <q-separator spaced inset />
-                    </q-list>
-                    </div>
-                    </div>
-
-                </q-card-section>
-                <DialogFooter
-                :save="clickSave"
-                v-model:editvisible="save"
-                />
+                </div>
+                <q-separator />
+                <div>
+                    <DialogFooter :save="clickSave" v-model:editvisible="save" />
+                </div>
             </q-form>
         </q-card>
     </q-dialog>
-</template>
\ No newline at end of file
+</template>
+<style lang="scss" scoped>
+.icon-officer {
+    color: #00AA86;
+    padding-left: 20px;
+}
+
+.check-officer {
+    font-size: 17px;
+    font-weight: 500;
+    line-height: 26px;
+    color: #00AA86;
+    padding-left: 20px;
+}
+
+.contanier-box-main {
+    padding: 10px 21px 10px 21px;
+}
+
+.contanier-box-mini {
+    padding: 10px 0px 10px 0px;
+}
+
+.card-panding {
+    padding: 15px 21px 15px 21px;
+}
+
+.header-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: #4F4F4F;
+}
+
+.header-sub-text {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 150%;
+    color: #818181;
+}
+
+.sub-text {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.0025em;
+    color: #35373C;
+}
+
+.card-exam {
+    border-radius: 5px;
+    background: #FAFAFA;
+}
+
+.header-sub-text-exam {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #818181;
+}
+
+.header-sub-text-exam-2 {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #00AA86;
+}
+
+.sub-text-exam {
+    font-size: 15px;
+    font-weight: 500;
+    color: #000000;
+}
+
+.checkbox-group {
+    font-size: 16px;
+    font-weight: 400;
+    color: #35373C;
+}
+</style>
\ No newline at end of file