plament detail page

src/modules/05_placement/components/pass/Table.vue

@@ -7,6 +7,7 @@ import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -38,26 +39,6 @@ const appoint = ref<any>({
   PositionLevel: ''
 });
 
-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
-});
 
 const saveAppoint = () => {
   console.log("save appoint===>", appoint.value);
@@ -87,46 +68,18 @@ const getClass = (val: boolean) => {
   };
 };
 const selectData = (props: TableName) => {
-  information.cardId = '4016500103241'
+  itemtest.value = props
-  information.fullname = props.Name
+  if (editvisible.value == true) {
-  information.birthday = '17 ก.พ. 2535'
+    editRow.value = false;
-  information.gender = 'หญิง'
+    modalEdit.value = true;
-  information.address = '200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170'
+    modal.value = false;
-  information.school = 'มหาวิทยาลัยมหาสารคาม'
+    edit.value = true;
-  information.degree = 'การศึกษาบัณฑิต'
+  } else {
-  information.department = 'เทคโนโลยีสื่อสารการศึกษา'
+    editRow.value = false;
-  information.other = 'ใบอนุญาตประกอบวิชาชีพ'
+    modalEdit.value = true;
-  information.A1 = 200
+    modal.value = true;
-  information.A2 = 133
+    edit.value = true;
-  information.B1 = 200
+  }
-  information.B2 = 149
-  information.C1 = 100
-  information.C2 = 382
-  information.status = 'ผ่าน'
-  information.range = 3
-  information.total = 5
-  Name.value = props.Name;
-  modal.value = true;
-
-  // if (editvisible.value == true) {
-  //   // editRow.value = false;
-  //   // modalEdit.value = true;
-  //   modal.value = false;
-  //   // edit.value = true;
-  //   // position.value = props.position;
-  //   Name.value = props.Name;
-  //   // ExamOrder.value = props.ExamOrder;
-  //   // Unit.value = props.Unit;
-  //   // ReportingDate.value = props.ReportingDate;
-  //   // BMAOfficer.value = props.BMAOfficer;
-  //   // Status.value = props.Status;
-  //   // checkList.value = props.checkList;
-  // } else {
-  //   // editRow.value = false;
-  //   // modalEdit.value = true;
-  //   modal.value = true;
-  //   // edit.value = true;
-  // }
 };
 
 const getNumFile = ref(0);
@@ -138,14 +91,14 @@ const editDetail = (props: TableName, action: "cancel" | "wait") => {
     modalEdit.value = false;
     modal_right.value = true;
     edit.value = true;
-    Name.value = props.Name;
+    Name.value = props.fullName;
   } else if (action === "wait") {
     getNumFile.value = 1;
     editRow.value = false;
     modalEdit.value = true;
     modal_right.value = true;
     edit.value = true;
-    Name.value = props.Name;
+    Name.value = props.fullName;
   }
 
 };
@@ -234,11 +187,14 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
 const rows = ref<TableName[]>([
   {
-    Id: "4016500103241",
+    profileID: "4016500103241",
     position: 1,
-    Name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "หญิง",
     ExamOrder: 1,
     unitId: "",
     UnitGroup: "",
@@ -247,11 +203,31 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "สละสิทธิ์",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
   {
-    Id: "4016500092355",
+    profileID: "4016500092355",
     position: 2,
-    Name: "นางสาวรัชภรณ์ ภักดี",
+    fullName: "นางสาวรัชภรณ์ ภักดี",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "หญิง",
     ExamOrder: 2,
     unitId: "",
     UnitGroup: "",
@@ -260,11 +236,31 @@ const rows = ref<TableName[]>([
     BMAOfficer: false,
     Status: "ยังไม่บรรจุ",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
   {
-    Id: "4016500086436",
+    profileID: "4016500086436",
     position: 3,
-    Name: "นางสาวภาพรรณ ลออ",
+    fullName: "นางสาวภาพรรณ ลออ",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "หญิง",
     ExamOrder: 3,
     unitId: "",
     UnitGroup: "",
@@ -273,12 +269,32 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
 
   {
-    Id: "4016500073585",
+    profileID: "4016500073585",
     position: 4,
-    Name: "นางกติมา พนมเทียน",
+    fullName: "นางกติมา พนมเทียน",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "หญิง",
     ExamOrder: 4,
     unitId: "",
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
@@ -287,12 +303,32 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
 
   {
-    Id: "4016500053234",
+    profileID: "4016500053234",
     position: 5,
-    Name: "นางสาววิยฎา ทองเอียด",
+    fullName: "นางสาววิยฎา ทองเอียด",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "หญิง",
     ExamOrder: 5,
     unitId: "",
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
@@ -301,11 +337,31 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
   {
-    Id: "4016500042345",
+    profileID: "4016500042345",
     position: 6,
-    Name: "นายศรุณ เจริญเมือง",
+    fullName: "นายศรุณ เจริญเมือง",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "ชาย",
     ExamOrder: 6,
     unitId: "",
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
@@ -314,11 +370,31 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
   {
-    Id: "401650002245",
+    profileID: "401650002245",
     position: 7,
-    Name: "นายอภินัน บอบู่",
+    fullName: "นายอภินัน บอบู่",
+    dateOfBirth: "17 ก.พ. 2535",
+    gender: "ชาย",
     ExamOrder: 7,
     unitId: "",
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
@@ -327,9 +403,29 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
     checkList: null,
+    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    university: "มหาวิทยาลัยบูรพา",
+    degree: "การศึกษาบัณฑิต",
+    major: "เทคโนโลยีการศึกษา",
+    remark: "-",
+    number: 3,
+    examCount: 5,
+    scoreResult: {
+        scoreAFull: 200,
+        scoreA: 133,
+        scoreBFull: 200,
+        scoreB: 149,
+        scoreCFull: 100,
+        scoreC: 0,
+        scoreSumFull: 500,
+        scoreSum: 282,
+        examResult: "ผ่าน"
+    },
   },
 ]);
 
+const itemtest = ref<object>({});
+
 const clickCancel = async () => {
   editvisible.value = false;
 };
@@ -363,30 +459,6 @@ const save = () => {
   console.log("rows===>", rows.value)
 }
 
-// modal detail 
-interface CheckboxItem {
-  value: 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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
-];
-
-const clickSave = async () => {
-  console.log(selection.value)
-};
 </script>
 <template>
             <q-form ref="myForm">
@@ -407,7 +479,7 @@ const clickSave = async () => {
                       </div>
                       <div v-else-if="col.name == 'Name'" class="table_ellipsis">
                         {{ col.value }}
-                        <p>{{ props.row.Id }}</p>
+                        <p>{{ props.row.fullName }}</p>
                       </div>
                       <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
 
@@ -422,7 +494,7 @@ const clickSave = async () => {
                         </div>
                         <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
                         <div v-else>
-                          {{ props.row.UnitGroup }}
+                          {{ props.row.examResult }}
                           <p>{{ col.value }}</p>
                         </div>
                       </div>
@@ -532,205 +604,7 @@ const clickSave = async () => {
               </q-card>
             </q-dialog>
 
-            <q-dialog v-model="modal" full-height full-width>
+            <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose"/>
-              <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"
-                  />
-      </q-form>
-    </q-card>
-  </q-dialog>
 
   <q-dialog v-model="modal_right" persistent>
     <q-card style="width: 800px">

src/modules/05_placement/components/pass/TableDetail.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+
+import { ref, reactive } 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 props = defineProps({
+    Modal: Boolean,
+    close: {
+        type: Function,
+        default: () => console.log("not function"),
+    },
+    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;
+}
+
+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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
+];
+
+const clickSave = async () => {
+  console.log(selection.value)
+};
+
+</script>
+
+<template>
+     
+    <q-dialog v-model="props.Modal" full-height full-width>
+        <q-card >
+            <q-form ref="myForm">
+                <DialogHeader 
+                :title="`รายละเอียดของ ${ props.getdetail.fullName}`"
+                :close="close"
+                />
+                <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>
+                    <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>
+                    <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>
+                    </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-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"
+                />
+            </q-form>
+        </q-card>
+    </q-dialog>
+</template>

src/modules/05_placement/interface/request/placement.ts

@@ -1,7 +1,9 @@
 interface TableName {
-  Id: string;
+  profileID: string;
   position: number;
-  Name: string;
+  fullName: string;
+  dateOfBirth: string;
+  gender: string;
   ExamOrder: number;
   unitId: string;
   UnitGroup: string;
@@ -10,6 +12,24 @@ interface TableName {
   BMAOfficer: boolean;
   Status: string;
   checkList: any;
-}
+  address: string;
+  university: string;
+  degree: string;
+  major: string;
+  remark: string;
+  number: number;
+  examCount: number;
+  scoreResult: {
+      scoreAFull:number
+      scoreA: number;
+      scoreBFull: number;
+      scoreB: number;
+      scoreCFull: number;
+      scoreC: number;
+      scoreSumFull: number;
+      scoreSum: number;
+      examResult: string;
+  };
+} 
 
 export type { TableName };