From 8704c1ff3902c3ccdacf24148b2b71491b09b0fa Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Tue, 13 Jun 2023 01:15:17 +0700
Subject: [PATCH] dialog detail => Done

---
 .../components/pass/DialogFooter.vue          |  32 +-
 .../components/pass/DialogHeader.vue          |  35 +-
 .../05_placement/components/pass/Table.vue    | 742 ++++++++++--------
 3 files changed, 434 insertions(+), 375 deletions(-)

diff --git a/src/modules/05_placement/components/pass/DialogFooter.vue b/src/modules/05_placement/components/pass/DialogFooter.vue
index 8f99bc4e7..a5382c694 100644
--- a/src/modules/05_placement/components/pass/DialogFooter.vue
+++ b/src/modules/05_placement/components/pass/DialogFooter.vue
@@ -1,21 +1,4 @@
-<template>
-  <q-card-actions class="text-primary">
-    <q-space />
-    <q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
-      @click="edit" icon="mdi-pencil-outline">
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-    </q-btn>
-    <div v-else>
-
-      <q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
-        icon="mdi-content-save-outline">
-        <q-tooltip>บันทึก</q-tooltip>
-      </q-btn>
-    </div>
-  </q-card-actions>
-</template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
 
 const props = defineProps({
   editvisible: Boolean,
@@ -59,3 +42,18 @@ const checkSave = () => {
 
 };
 </script>
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit" icon="mdi-pencil-outline">
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+      <q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
+        icon="mdi-content-save-outline">
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
diff --git a/src/modules/05_placement/components/pass/DialogHeader.vue b/src/modules/05_placement/components/pass/DialogHeader.vue
index b02ec8f26..17140c5d5 100644
--- a/src/modules/05_placement/components/pass/DialogHeader.vue
+++ b/src/modules/05_placement/components/pass/DialogHeader.vue
@@ -1,19 +1,4 @@
-<template>
-  <q-toolbar>
-      <q-toolbar-title class="text-subtitle2 text-bold">{{ title }}</q-toolbar-title>
-    <q-btn
-    icon="close"
-    unelevated
-    round
-    dense
-    @click="close"
-    style="color: #ff8080; background-color: #ffdede"
-      />
-  </q-toolbar>
-</template>
 <script setup lang="ts">
-
-import { ref, useAttrs } from "vue";
 const props = defineProps({
   title: String,
   close: {
@@ -24,5 +9,23 @@ const props = defineProps({
 const close = async () => {
   props.close();
 };
-
 </script>
+<template>
+  <q-toolbar class="header-main">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+.header-main {
+  padding: 16px 0px 16px 27px;
+}
+
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373C;
+}
+</style>
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index d7a033d69..d5b660d67 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -12,7 +12,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const editvisible = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
+const edit = ref<boolean>(true);
 const visibleColumns = ref<String[]>([]);
 const store = usePlacementDataStore();
 const filter = ref<string>("");
@@ -365,23 +365,23 @@ const save = () => {
 
 // modal detail 
 interface CheckboxItem {
-  value: number;
+  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 () => {
@@ -389,345 +389,326 @@ const clickSave = async () => {
 };
 </script>
 <template>
-            <q-form ref="myForm">
-              <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
-                v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
-                :boss="true" :saveNoDraft="true" :add="save">
-                <template #columns="props">
-                  <q-tr :props="props">
-                    <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
+  <q-form ref="myForm">
+    <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
+      :boss="true" :saveNoDraft="true" :add="save">
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
 
-                    <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
-                      class="cursor-pointer">
-                      <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
-                        <div>
-                          <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
-                          <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-                        </div>
-                      </div>
-                      <div v-else-if="col.name == 'Name'" class="table_ellipsis">
-                        {{ col.value }}
-                        <p>{{ props.row.Id }}</p>
-                      </div>
-                      <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
+            class="cursor-pointer">
+            <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
+              <div>
+                <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
+                <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+              </div>
+            </div>
+            <div v-else-if="col.name == 'Name'" class="table_ellipsis">
+              {{ col.value }}
+              <p>{{ props.row.Id }}</p>
+            </div>
+            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
 
-                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                          <div @click="openAppointModal">
-                            <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
-                              <template v-slot:prepend>
-                                <q-icon name="bookmark" color="primary" />
-                              </template>
-                            </q-input>
-                          </div>
-                        </div>
-                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
-                        <div v-else>
-                          {{ props.row.UnitGroup }}
-                          <p>{{ col.value }}</p>
-                        </div>
-                      </div>
-                      <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
-                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                          <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
-                            v-model="props.row.ReportingDate">
-                            <template #year="{ year }">
-                              {{ year + 543 }}
-                            </template>
-                            <template #year-overlay-value="{ value }">
-                              {{ parseInt(value + 543) }}
-                            </template>
-                            <template #trigger>
-                              <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
-                                <template v-slot:prepend>
-                                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                                  </q-icon>
-                                </template>
-                              </q-input>
-                            </template>
-                          </datepicker>
-                        </div>
-                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
-                        <div v-else>
-                          {{ mixin.date2Thai(col.value) }}
-                        </div>
-                      </div>
-                      <div v-else class="table_ellipsis">
-                        {{ col.value }}
-                      </div>
-                    </q-td>
-                    <q-td auto-width>
-                      <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
-                        <div></div>
-                      </div>
-                      <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
-                        <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
-                          @click="editDetail(props.row, 'wait')" />
-                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
-                          @click="editDetail(props.row, 'cancel')" />
-                      </div>
-                      <div v-else align="right">
-                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
-                          @click="editDetail(props.row, 'cancel')" />
-                      </div>
-                    </q-td>
-                  </q-tr>
-                </template>
-              </Table>
-            </q-form>
+              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
+                <div @click="openAppointModal">
+                  <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
+                    <template v-slot:prepend>
+                      <q-icon name="bookmark" color="primary" />
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+              <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
+              <div v-else>
+                {{ props.row.UnitGroup }}
+                <p>{{ col.value }}</p>
+              </div>
+            </div>
+            <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
+              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
+                <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+                  v-model="props.row.ReportingDate">
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
+                      <template v-slot:prepend>
+                        <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
+              <div v-else>
+                {{ mixin.date2Thai(col.value) }}
+              </div>
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
+              <div></div>
+            </div>
+            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
+              <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
+                @click="editDetail(props.row, 'wait')" />
+              <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')" />
+            </div>
+            <div v-else align="right">
+              <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')" />
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
 
-            <q-dialog v-model="appointModal" persistent>
-              <q-card style="width: 800px">
-                <q-form ref="myForm">
-                  <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-                  <q-separator />
-                  <q-card-section>
+  <q-dialog v-model="appointModal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
 
-                    <div class="row q-col-gutter-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
+          <div class="row q-col-gutter-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col-6">
+              <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
+            </div>
+          </div>
+
+        </q-card-section>
+
+        <q-separator />
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="modal">
+    <q-card style="max-width: 100%;width:80%;">
+      <q-form ref="myForm">
+        <div class="row">
+          <DialogHeader :title="`รายละเอียดของ ${Name}`" :close="clickClose" />
+        </div>
+        <q-separator />
+
+        <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">
+                    {{ information.cardId }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ information.birthday }}
+                  </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">
+                    {{ information.fullname }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ information.gender }}
+                  </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-3 header-sub-text">
+                  ที่อยู่
+                </div>
+                <div class="col-9 header-sub-text">
+                  {{ information.address }}
+                </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-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">
+                    {{ information.school }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ information.department }}
+                  </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">
+                    {{ information.deegree ? information.deegree : '-' }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ information.other }}
+                  </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">
-                        <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
+                      <div class="col-4 q-pa-xs">
+                        <div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
+                        <div class="sub-text-exam"> {{ information.A1 }}</div>
+                        <div class="sub-text-exam"> {{ information.B1 }}</div>
+                        <div class="sub-text-exam"> {{ information.C1 }}</div>
+                        <div class="sub-text-exam"> {{ (information.A1 + information.B1 + information.C1) }}</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">{{ information.A2 }}</div>
+                        <div class="sub-text-exam">{{ information.B2 }}</div>
+                        <div class="sub-text-exam">{{ information.C2 }}</div>
+                        <div class="sub-text-exam"> {{ (information.A2 + information.B2 + information.C2) }}</div>
                       </div>
                     </div>
-
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
-                      </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="row q-col-gutter-xs q-pt-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
-                      </div>
+                    <div class="col-5 sub-text-exam">
+                      <div class="q-pb-sm">{{ information.status }}</div>
+                      <div class="q-pb-sm">{{ information.range }}</div>
+                      <div class="q-pb-sm">{{ information.total }}</div>
                     </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
 
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
-                      </div>
-                    </div>
-
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col-6">
-                        <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
-                      </div>
-                    </div>
-
-                  </q-card-section>
-
-                  <q-separator />
-                  <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
-                </q-form>
-              </q-card>
-            </q-dialog>
-
-            <q-dialog v-model="modal" full-height full-width>
-              <q-card>
-                <q-form ref="myForm">
-                  <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-                  <DialogHeader 
-                    :title="`รายละเอียดของ ${Name}`"
-                    :close="clickClose"
-                  />
-                  <q-separator />
-                    <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; font-size: 18px;">
-                          ข้อมูลทั่วไป
-                        </div>
-                        <div class="row">
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            เลขที่ประจำตัวประชาชน
-                          </div>
-                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
-                            {{ information.cardId }}
-                          </div>
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            ชื่อ-นามสกุล
-                          </div>
-                          <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; font-size: 18px;">
-                            วัน/เดือน/ปีเกิด
-                          </div>
-                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
-                            {{ information.birthday }}
-                          </div>
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            เพศ
-                          </div>
-                          <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; font-size: 18px;">
-                          ภูมิลำนำ
-                        </div>
-                        <div class="row">
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            ที่อยู่
-                          </div>
-                          <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; font-size: 18px;">
-                          การศึกษา
-                        </div>
-                        <div class="row">
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            สถานศึกษา
-                          </div>
-                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
-                            {{ information.school }}
-                          </div>
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            วุฒิการศึกษา
-                          </div>
-                          <div class="col-3 q-pa-xs">
-                            {{ information.deegree }}
-                          </div>
-                        </div>
-                        <div class="row">
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            สาขาวิชาเอก
-                          </div>
-                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
-                            {{ information.department }}
-                          </div>
-                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
-                            อื่นๆ
-                          </div>
-                          <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-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" keep-color color="green" type="checkbox" style="font-size: 18px;"/>
-                          </q-item>
-                          <q-separator spaced inset />
-                        </q-list>
-                        </div>
-                      </div>
-
-                    </q-card-section>
-                  <DialogFooter
-                    :save="clickSave"
-                    v-model:editvisible="edit"
-                    v-model:modalEdit="modalEdit"
-                  />
+          <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>
+        <q-separator />
+        <div>
+          <DialogFooter :save="clickSave" v-model:editvisible="edit" v-model:modalEdit="modalEdit" />
+        </div>
       </q-form>
     </q-card>
   </q-dialog>
@@ -765,4 +746,81 @@ 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