From ca633f848d9c51711f4e378163a0249bb4757c2c Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Thu, 8 Jun 2023 09:38:03 +0700
Subject: [PATCH 1/9] add v-model pagination

---
 src/modules/03_recruiting/views/01_compete/Detail.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index ce598de3f..5be19e731 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -48,6 +48,7 @@
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
+        v-model:pagination="pagination"
         :nornmalData="false"
         :conclude="true"
       >

From ccf9aa86ab6077d2fc7f3983de6722e6ff97925d Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Thu, 8 Jun 2023 14:31:25 +0700
Subject: [PATCH 2/9] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B9=81=E0=B8=82?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=B1=E0=B8=99=20/=20=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=94=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=20=3D>=20Done?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/interface/index/Main.ts      |   8 +-
 .../05_placement/interface/request/Main.ts    |  16 +-
 src/modules/05_placement/store.ts             |  15 +-
 src/modules/05_placement/views/Main.vue       | 193 +++++++++++++-----
 4 files changed, 177 insertions(+), 55 deletions(-)

diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index e4ea7770c..c28c2f576 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1 +1,7 @@
-export type {};
+interface DataOption {
+    id: number;
+    name: string;
+}
+
+
+export type { DataOption };
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index e4ea7770c..9690875aa 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -1 +1,15 @@
-export type {};
+// ข้อมูลรายการสอบแข่งขัน/คัดเลือก
+interface FormPlacementMainData {
+    id: number;
+    ExamRound: string;
+    ExamOrder: number;
+    FiscalYear: number;
+    NumberofCandidates: number;
+    ExamType: number;
+    AccountExpirationDate: string;
+    isExpired?: boolean;
+}
+
+
+
+export type { FormPlacementMainData };
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 5b83b8716..1769692af 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
-import { ref, computed } from "vue";
+import { ref } from "vue";
+import type { FormPlacementMainData } from  "@/modules/05_placement/interface/request/Main"
 export const useProfileDataStore = defineStore("placement", () => {
   return {};
 });
@@ -25,8 +26,20 @@ export const usePlacementDataStore = defineStore("placement", () => {
     );
   }
 
+  let DataMainOrig = ref<FormPlacementMainData[]>([]) // ข้อมูลหลัก
+  let DataMainUpdate = ref<FormPlacementMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
+  const DataMain = (val: any) => (DataMainOrig.value = val)
+  const DataUpdateMain = (val: any) => {
+    DataMainUpdate.value = [];
+    DataMainUpdate.value = val;
+  }
+
   return {
     placementData,
     changePlacementColumns,
+    DataMainOrig,
+    DataMainUpdate,
+    DataMain,
+    DataUpdateMain,
   };
 });
diff --git a/src/modules/05_placement/views/Main.vue b/src/modules/05_placement/views/Main.vue
index aac02886c..2455359b8 100644
--- a/src/modules/05_placement/views/Main.vue
+++ b/src/modules/05_placement/views/Main.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from 'vue';
+import { onMounted, reactive, ref, useAttrs } from 'vue';
 import type { QTableProps } from 'quasar';
+import type { FormPlacementMainData } from  "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from '@/router';
+
+const DataStore = usePlacementDataStore()
+
 const mixin = useCounterMixin();
 const { dateText } = mixin;
 
@@ -11,6 +17,7 @@ const textDate = (value: Date) => {
   return dateText(value);
 };
 
+// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "id",
@@ -85,53 +92,72 @@ const columns = ref<QTableProps["columns"]>([
   },
 
 ]);
-const rows = [{
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormPlacementMainData[]>([{
   id: 1,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 3,
-  FiscalYear: 2566,
+  FiscalYear: 2023,
   NumberofCandidates: 8,
-  ExamType: 0,
+  ExamType: 1,
   AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
 },
 {
   id: 2,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 2,
-  FiscalYear: 2566,
+  FiscalYear: 2023,
   NumberofCandidates: 12,
-  ExamType: 0,
+  ExamType: 1,
   AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
 },
 {
   id: 3,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 2,
-  FiscalYear: 2566,
+  FiscalYear: 2023,
   NumberofCandidates: 20,
-  ExamType: 0,
+  ExamType: 1,
   AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
 },
 {
   id: 4,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 2,
-  FiscalYear: 2566,
+  FiscalYear: 2022,
   NumberofCandidates: 16,
-  ExamType: 1,
+  ExamType: 2,
   AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
 },
 {
   id: 5,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 1,
-  FiscalYear: 2566,
+  FiscalYear: 2021,
   NumberofCandidates: 20,
-  ExamType: 1,
-  AccountExpirationDate: "2023-05-21T14:47:04.1785384Z",
+  ExamType: 2,
+  AccountExpirationDate: "2024-05-21T14:47:04.1785384Z",
 },
-];
+]);
 
+let OriginalData = ref<FormPlacementMainData[]>([]);
+let UpdataData = ref<FormPlacementMainData[]>([]);
+
+const OriginalDataFetch = async () => {
+  await DataStore.DataMain(rows.value)
+  OriginalData.value = await DataStore.DataMainOrig
+  UpdataData.value = OriginalData.value
+}
+
+onMounted( async () => {
+ await OriginalDataFetch()
+  fiscalyearfilter()
+  examTimefilter()
+  examTypefilter()
+})
+
+// ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (id:number) => {
   router.push({
       name: 'placementDetail',
@@ -141,54 +167,114 @@ const redirectToPage = (id:number) => {
     });
 };
 
-
-interface DataOption {
-  id: number;
-  name: string;
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
+  const addedFiscalYearValues: number[] = [];
+const fiscalyearfilter = async () => {
+  for (let data of OriginalData.value) {
+    const year = data.FiscalYear + 543;
+    if (fiscalyear.value == 0 && !addedFiscalYearValues.includes(1)) {
+        fiscalyearOP.push({ id: 0, name: "ทั้งหมด" });
+        addedFiscalYearValues.push(1);
+    } else if (!addedFiscalYearValues.includes(year)) {
+        fiscalyearOP.push({ id: year, name: year.toString() });
+        addedFiscalYearValues.push(year);
+    }
+  }
 }
 
-const fiscalyear = ref<string>(""); // เลือกปีงบประมาณ
-const fiscalyearOP = ref<DataOption[]>([
-  {id: 1, name: "2566"},
-  {id: 2, name: "2565"},
-  {id: 3, name: "2564"},
-]);
+// เลือกปีงบประมาณตาม API
 const searchFiscalyear = () => {
+  // API
   console.log('Input value changed:', fiscalyear.value);
 };
 
-
-const filterInput = ref<string>(""); // ค้นหา
+// ค้นหาในตาราง
+const filterKeyword = ref<string>(""); 
 const filterRef = ref<any>(null);
 const resetFilter = () => {
-  filterInput.value = "";
+  filterKeyword.value = "";
   filterRef.value.focus();
 };
 
 const attrs = ref<any>(useAttrs());
 const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
+// ครั้งที่สอบ
+const examTime = ref<number | null>(null);
+const examTimeOP = ref<number[]>([]);
+const examTimefilter = async () => {
+    for (let data of OriginalData.value) {
+      if (!examTimeOP.value.includes(data.ExamOrder)) {
+        examTimeOP.value.push(data.ExamOrder);
+      }
+  }
+  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+}
 
-const examTime = ref<string>(""); // ครั้งที่สอบ
-const examTimeOP = ref<DataOption[]>([]);
-examTimeOP.value = rows.map((item) => ({
-    id: item.id,
-    name: item.ExamOrder.toString(),
-}));
-examTimeOP.value.sort((a, b) => {
-  return parseInt(a.name) - parseInt(b.name);
-});
-// console.log(examTimeOP.value);
+// แสดงครั้งที่สอบตามที่เลือก
+const searchExamTime = async () => {
+  if (examTime.value !== null) {
+    const selectExamTime = OriginalData.value.filter((data: { ExamOrder: number | null; }) => data.ExamOrder === examTime.value);
+    await DataStore.DataUpdateMain(selectExamTime);
+    UpdataData.value = DataStore.DataMainUpdate
+  } else {
+    OriginalDataFetch();
+  }
+};
 
+// ประเภทการสอบ
+const examType = ref<number | null>(0); 
+const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedExamTypeValues: number[] = [];
+const examTypefilter = async () => {
+  for (let data of OriginalData.value) {
+    const examTypeValue = data.ExamType;
+    if (examTypeValue == 1 && !addedExamTypeValues.includes(1)) {
+      examTypeOP.push({ id: 1, name: "คัดเลือก" });
+      addedExamTypeValues.push(1);
+    } else if (examTypeValue == 2 && !addedExamTypeValues.includes(2)) {
+      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
+      addedExamTypeValues.push(2);
+    }
+  }
+}
 
-const examType = ref<string>(""); // ประเภทการสอบ
-const examTypeOP = ref<DataOption[]>([
-  {id: 0, name: "แข่งขัน"},
-  {id: 1, name: "คัดเลือก"},
-]);
+// แสดงประเภทการสอบตามที่เลือก
+const searchExamType = async () => {
+  if (examType.value !== null) {
+    const selectExamType = OriginalData.value.filter((data: { ExamType: number | null; }) => {
+      if (examType.value === 0) {
+        OriginalDataFetch();
+        return data.ExamType === 1 || data.ExamType === 2;
+      } else {
+        return data.ExamType === examType.value;
+      }
+    });
+    await DataStore.DataUpdateMain(selectExamType);
+    UpdataData.value = DataStore.DataMainUpdate
+  }
+};
 
+// บัญชีหมดอายุ
+const expiredAccount = ref<boolean>(false); 
+const searchExpiredAccount = async () => {
+  const currentDate = new Date();
+  const updatedRows = OriginalData.value.map((data) => {
+    let expirationDate = new Date(data.AccountExpirationDate);
+    let isExpired = expirationDate < currentDate;
 
-const expiredAccount = ref<boolean>(false); // บัญชีหมดอายุ
+    return { ...data, isExpired };
+  });
+  if (expiredAccount.value) {
+    const expiredRows = updatedRows.filter((data) => data.isExpired);
+    await DataStore.DataUpdateMain(expiredRows);
+    UpdataData.value = DataStore.DataMainUpdate
+  } else {
+    OriginalDataFetch();
+  }
+};
 
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
@@ -214,16 +300,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 clearable 
                 emit-value
                 map-options
-                option-label="name"
                 :options="fiscalyearOP"
                 option-value="id"
+                option-label="name"
                 lazy-rules
                 hide-bottom-space
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
                 :hide-dropdown-icon="false"
-                @change="searchFiscalyear"
+                @update:model-value="searchFiscalyear"
               />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-6"></div>
@@ -231,7 +317,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           <q-input
             standout
             dense
-            v-model="filterInput"
+            v-model="filterKeyword"
             ref="filterRef"
             outlined
             debounce="300"
@@ -239,9 +325,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
             class="q-ml-sm"
           >
             <template v-slot:append>
-              <q-icon v-if="filterInput == ''" name="search" />
+              <q-icon v-if="filterKeyword == ''" name="search" />
               <q-icon
-                v-if="filterInput !== ''"
+                v-if="filterKeyword !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
@@ -278,15 +364,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   clearable 
                   emit-value
                   map-options
-                  option-label="name"
                   :options="examTimeOP"
                   option-value="id"
+                  option-label="name"
                   lazy-rules
                   hide-bottom-space
                   :readonly="false"
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
+                  @update:model-value="searchExamTime"
                 />
             </div>
             <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
@@ -306,6 +393,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
+                  @update:model-value="searchExamType"
                 />
             </div>
             <div class="col-xs-12 col-sm-3 col-md-3">
@@ -314,6 +402,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 class="toggle-expired-account"
                 color="blue" 
                 label="แสดงบัญชีหมดอายุ"
+                @update:model-value="searchExpiredAccount"
               />
             </div>
           </div>
@@ -323,14 +412,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
         <q-table
           ref="table"
           :columns="columns" 
-          :rows="rows" 
+          :rows="UpdataData" 
+          :filter="filterKeyword"
           row-key="id"
           flat
           bordered
           dense
           class="custom-header-table"
           v-bind="attrs"
-          :filter="filterInput"
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
         >
@@ -346,7 +435,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.row.ExamOrder }}
             </q-td>
             <q-td key="FiscalYear" :props="props">
-                {{ props.row.FiscalYear }}
+                {{ props.row.FiscalYear + 543 }}
             </q-td>
             <q-td key="NumberofCandidates" :props="props">
                 {{ props.row.NumberofCandidates }}

From 00eae3b3e2368d440551967d0bf3f388d941299a Mon Sep 17 00:00:00 2001
From: "Harid Promsri (Bright)" <harid_pr61@live.rmutl.ac.th>
Date: Thu, 8 Jun 2023 14:43:48 +0700
Subject: [PATCH 3/9] placementTable page

---
 .../components/PlacementTable.vue             | 390 +++++++++++++-----
 1 file changed, 291 insertions(+), 99 deletions(-)

diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
index 19b3112cd..b782d670d 100644
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, defineComponent, h } from "vue";
 import Table from "@/modules/05_placement/components/PlacementTableView.vue";
-import { useQuasar, QForm } from "quasar";
+import { useQuasar, QForm, QCheckbox, QSlideItem } from "quasar";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
 import DialogHeader from "@/modules/05_placement/components/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/DialogFooter.vue";
+import TestView from "@/views/TestView.vue";
+import { aW } from "@fullcalendar/core/internal-common";
 const editvisible = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -16,7 +18,6 @@ const filter = ref<string>("");
 const { placementData } = store;
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modal = ref<boolean>(false); //modal add detail
-const modal_right = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const position = ref<number>();
 const Name = ref<string>();
@@ -26,18 +27,9 @@ const ReportingDate = ref<string>();
 const BMAOfficer = ref<boolean>();
 const Status = ref<string>();
 const checkList = ref<string>();
-const positionMasterUserNote = ref<string>();
-const $q = useQuasar(); // show dialog
-const files = ref<File[]>([]);
-const clickEditRow = () => {
-  editRow.value = true;
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
+
+  const $q = useQuasar(); // show dialog
+
 const selectData = (props: TableName) => {
   if (editvisible.value == true) {
     editRow.value = false;
@@ -52,7 +44,7 @@ const selectData = (props: TableName) => {
     BMAOfficer.value = props.BMAOfficer;
     Status.value = props.Status;
     checkList.value = props.checkList;
-  } else {
+  }else{
     editRow.value = false;
     modalEdit.value = true;
     modal.value = true;
@@ -60,26 +52,6 @@ const selectData = (props: TableName) => {
   }
 };
 
-const getNumFile = ref(0);
-const editDetail = (props: TableName, action: "cancel" | "wait") => {
- 
-  if (action === "cancel") {
-    getNumFile.value = 0;
-    editRow.value = false;
-    modalEdit.value = false;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.Name;
-  } else if (action === "wait") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.Name;
-  }
-
-};
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
       "position",
@@ -101,6 +73,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Name",
@@ -121,6 +95,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "ExamOrder",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Unit",
@@ -152,6 +128,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "BMAOfficer",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Status",
@@ -174,7 +152,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList: null,
+    checkList:null
   },
   {
     position: 1,
@@ -184,7 +162,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
-    checkList: null,
+    checkList:null
   },
   {
     position: 1,
@@ -194,7 +172,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList: null,
+    checkList:null
   },
 
   {
@@ -205,7 +183,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList: null,
+    checkList:null
   },
 
   {
@@ -216,7 +194,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList: null,
+    checkList:null
   },
   {
     position: 1,
@@ -226,7 +204,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList: null,
+    checkList:null
   },
 ]);
 const clickCancel = async () => {
@@ -241,15 +219,65 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      modal_right.value = false;
       modal.value = false;
     });
   } else {
-    modal_right.value = false;
     modal.value = false;
   }
 };
 
+//bright
+interface CheckboxItem {
+  id: number;
+  label: string;
+  selected: boolean;
+}
+const checkboxItems: CheckboxItem[] = [
+    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง', selected: false },
+    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.', selected: false },
+    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
+    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม', selected: false },
+    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง', selected: false },
+    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย', selected: false },
+    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ', selected: false },
+    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ', selected: false },
+    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
+    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
+    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ', selected: false },
+];
+
+const selectedItem = () => ({
+
+})
+
+const selection = ref ({
+
+});
+
+const handleCheckboxChange = async (item: any ) => {
+  await
+  console.log('.......')
+  if(item.selected){
+    console.log(item.id +' '+item.selected)
+    item.selected = false
+  }else{
+    console.log(item.id +' '+item.selected)
+    item.selected = true
+  }
+}
+
+const clickSave = async () => {
+  await save(false);
+};
+
+const save = async (publish: boolean) => {
+  console.log(checkboxItems[0])
+};
+
+const clickIsActive = async (val: string, status: boolean) => {
+
+};
+
 </script>
 <template>
   <q-form ref="myForm">
@@ -298,6 +326,15 @@ const clickClose = async () => {
                   class="text-h5"
                 />
               </div>
+              <q-toggle
+                v-else
+                v-model="props.row.isActive"
+                dense
+                color="green"
+                @update:model-value="
+                  clickIsActive(props.row.id, props.row.isActive)
+                "
+              />
             </div>
             <div v-else class="table_ellipsis">
               {{ col.value }}
@@ -315,7 +352,6 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-alert"
-                @click="editDetail(props.row, 'wait')"
               />
               <q-btn
                 color="red"
@@ -324,7 +360,6 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
               />
             </div>
             <div v-else align="right">
@@ -335,72 +370,229 @@ const clickClose = async () => {
                 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="modal" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader :tittle="`รายละเอียดของ${Name}`" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm"> text </q-card-section>
-        <q-separator />
-        <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">
+    </q-form>
+
+    <q-dialog v-model="modal" full-height full-width>
+    <q-card>
       <q-form ref="myForm">
         <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
         <DialogHeader
-          :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
+          :tittle="`รายละเอียดของ`"
           :close="clickClose"
         />
         <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile == 1"
-              v-model="files"
-              dense
-              :label="'เลือกไฟล์เอกสารหลักฐาน'"
-              outlined
-              use-chips
-              multiple
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-          </div>
-        </q-card-section>
-        <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;">
+                ข้อมูลทั่วไป
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  เลขที่ประจำตัวประชาชน
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  ชื่อ-นามสกุล
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  วัน/เดือน/ปีเกิด
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs">
+                  เพศ
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+            </div>
+
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                ภูมิลำนำ
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  ที่อยู่
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}}
+                </div>
+              </div>
+            </div>
+
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                การศึกษา
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  สถานศึกษา
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  วุฒิการศึกษา
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  สาขาวิชาเอก
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  อื่นๆ
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+            </div>
+
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                การสอบ
+              </div>
+              <div class="row"> 
+                <!--  text-align: center; -->
+                <div class="col-2 q-pa-md" style="color: gray;">
+                  ประเภท
+                </div>
+                <div class="col-2 q-pa-xs" style="color: #259E75;">
+                  คะแนนเต็ม
+                </div>
+                <div class="col-2 q-pa-xs" style="color: #259E75;">
+                  คะแนนที่ได้
+                </div>
+                <div class="col-2 q-pa-xs" style="color: gray;">
+                  ผลการสอบ
+                </div>
+                <div class="col-2 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  ภาค ก
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  ภาค ข
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  ภาค ค
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  รวมทั้งหมด
+                </div>
+              </div>
+            </div>
+            <!-- Bright -->
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-sm" style="font-weight: bold;">
+                การคัดกรองคุณสมบัติ
+              </div>
+              <div >
+              <q-list >
+                <q-item 
+                  v-for="item in checkboxItems" 
+                  :key="item.id" 
+                  @click="item.selected = !item.selected" clickable>
+                  <q-item-section>
+                    <q-checkbox v-model="item.selected" color="green" keep-color :label="item.label" @click="selectedItem"/>
+                  </q-item-section>
+
+                  
+                </q-item>
+                <q-separator spaced inset />
+                <!-- @click="check(item.id, item.selected)" -->
+                <!-- <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ." color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+               
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นบุคคลล้มละลาย" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+               
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+               
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ" color="green"/>
+                </q-item> -->
+
+              </q-list>
+              </div>
+            </div>
+
+          </q-card-section>
         <DialogFooter
           :save="clickSave"
           v-model:editvisible="edit"

From 46ce39d4aca376e1287d3dda69432fcf6cd6694f Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Thu, 8 Jun 2023 15:05:21 +0700
Subject: [PATCH 4/9] checkbox D

---
 .../components/PlacementTable.vue             | 44 +++++++------------
 1 file changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
index b782d670d..737c639dd 100644
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -228,31 +228,26 @@ const clickClose = async () => {
 
 //bright
 interface CheckboxItem {
-  id: number;
+  value: number;
   label: string;
-  selected: boolean;
 }
+const selection = ref ([]);
+
 const checkboxItems: CheckboxItem[] = [
-    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง', selected: false },
-    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.', selected: false },
-    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
-    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม', selected: false },
-    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง', selected: false },
-    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย', selected: false },
-    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ', selected: false },
-    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ', selected: false },
-    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
-    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
-    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ', selected: false },
+    { 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 selectedItem = () => ({
 
-})
-
-const selection = ref ({
-
-});
 
 const handleCheckboxChange = async (item: any ) => {
   await
@@ -527,15 +522,8 @@ const clickIsActive = async (val: string, status: boolean) => {
               </div>
               <div >
               <q-list >
-                <q-item 
-                  v-for="item in checkboxItems" 
-                  :key="item.id" 
-                  @click="item.selected = !item.selected" clickable>
-                  <q-item-section>
-                    <q-checkbox v-model="item.selected" color="green" keep-color :label="item.label" @click="selectedItem"/>
-                  </q-item-section>
-
-                  
+                <q-item>
+                    <q-option-group v-model="selection" :options="checkboxItems" color="green" type="checkbox" />
                 </q-item>
                 <q-separator spaced inset />
                 <!-- @click="check(item.id, item.selected)" -->

From 04c0f681345984d99979517e3a9f6c5edd20cc2e Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Thu, 8 Jun 2023 15:58:33 +0700
Subject: [PATCH 5/9] =?UTF-8?q?add=20router=20=E0=B8=81=E0=B8=81.=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=20=3D>Done?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/router.ts            |  21 +
 src/modules/05_placement/views/Domination.vue | 496 ++++++++++++++++++
 src/modules/05_placement/views/Main.vue       |   5 +-
 3 files changed, 518 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/05_placement/views/Domination.vue

diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 1a67682e0..a5ef2e57f 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -4,6 +4,7 @@
 
 const Main = () => import("@/modules/05_placement/views/Main.vue");
 const Detail = () => import("@/modules/05_placement/components/PlacementDetail.vue");
+const Domination = () => import("@/modules/05_placement/views/Domination.vue");
 
 export default [
   {
@@ -26,5 +27,25 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/placement/detail",
+    name: "placementDetail",
+    component: Detail,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/domination",
+    name: "domination",
+    component: Domination,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
 ];
 
diff --git a/src/modules/05_placement/views/Domination.vue b/src/modules/05_placement/views/Domination.vue
new file mode 100644
index 000000000..fe6d18914
--- /dev/null
+++ b/src/modules/05_placement/views/Domination.vue
@@ -0,0 +1,496 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, useAttrs } from 'vue';
+import type { QTableProps } from 'quasar';
+import type { FormPlacementMainData } from  "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+import router from '@/router';
+
+const DataStore = usePlacementDataStore()
+
+const mixin = useCounterMixin();
+const { dateText } = mixin;
+
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "id",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "id",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "ExamRound",
+    align: "left",
+    label: "รอบการสอบ",
+    sortable: true,
+    field: "ExamRound",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamOrder",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "ExamOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "FiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "FiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "NumberofCandidates",
+    align: "left",
+    label: "จำนวนผู้สอบได้",
+    sortable: false,
+    field: "NumberofCandidates",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamType",
+    align: "left",
+    label: "ประเภทการสอบ",
+    sortable: false,
+    field: "ExamType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "AccountExpirationDate",
+    align: "left",
+    label: "วันที่บัญชีหมดอายุ",
+    sortable: true,
+    field: "AccountExpirationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormPlacementMainData[]>([{
+  id: 1,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 3,
+  FiscalYear: 2023,
+  NumberofCandidates: 8,
+  ExamType: 1,
+  AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
+},
+{
+  id: 2,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2023,
+  NumberofCandidates: 12,
+  ExamType: 1,
+  AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
+},
+{
+  id: 3,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2023,
+  NumberofCandidates: 20,
+  ExamType: 1,
+  AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
+},
+{
+  id: 4,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2022,
+  NumberofCandidates: 16,
+  ExamType: 2,
+  AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
+},
+{
+  id: 5,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 1,
+  FiscalYear: 2021,
+  NumberofCandidates: 20,
+  ExamType: 2,
+  AccountExpirationDate: "2024-05-21T14:47:04.1785384Z",
+},
+]);
+
+let OriginalData = ref<FormPlacementMainData[]>([]);
+let UpdataData = ref<FormPlacementMainData[]>([]);
+
+const OriginalDataFetch = async () => {
+  await DataStore.DataMain(rows.value)
+  OriginalData.value = await DataStore.DataMainOrig
+  UpdataData.value = OriginalData.value
+}
+
+onMounted( async () => {
+ await OriginalDataFetch()
+  fiscalyearfilter()
+  examTimefilter()
+  examTypefilter()
+})
+
+// ดูรายการสอบแข่งขัน หน้าต่อไป
+const redirectToPage = (id:number) => {
+  router.push({
+      name: 'placementDetail',
+      params: {
+        id: id 
+      }
+    });
+};
+
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
+  const addedFiscalYearValues: number[] = [];
+const fiscalyearfilter = async () => {
+  for (let data of OriginalData.value) {
+    const year = data.FiscalYear + 543;
+    if (!addedFiscalYearValues.includes(year)) {
+        fiscalyearOP.push({ id: year, name: year.toString() });
+        addedFiscalYearValues.push(year);
+    }
+  }
+}
+
+// เลือกปีงบประมาณตาม API
+const searchFiscalyear = () => {
+  // API
+  console.log('Input value changed:', fiscalyear.value);
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>(""); 
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// ครั้งที่สอบ
+const examTime = ref<number | null>(null);
+const examTimeOP = ref<number[]>([]);
+const examTimefilter = async () => {
+    for (let data of OriginalData.value) {
+      if (!examTimeOP.value.includes(data.ExamOrder)) {
+        examTimeOP.value.push(data.ExamOrder);
+      }
+  }
+  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+}
+
+// แสดงครั้งที่สอบตามที่เลือก
+const searchExamTime = async () => {
+  if (examTime.value !== null) {
+    const selectExamTime = OriginalData.value.filter((data: { ExamOrder: number | null; }) => data.ExamOrder === examTime.value);
+    await DataStore.DataUpdateMain(selectExamTime);
+    UpdataData.value = DataStore.DataMainUpdate
+  } else {
+    OriginalDataFetch();
+  }
+};
+
+// ประเภทการสอบ
+const examType = ref<number | null>(0); 
+const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedExamTypeValues: number[] = [];
+const examTypefilter = async () => {
+  for (let data of OriginalData.value) {
+    const examTypeValue = data.ExamType;
+    if (examTypeValue == 1 && !addedExamTypeValues.includes(1)) {
+      examTypeOP.push({ id: 1, name: "คัดเลือก" });
+      addedExamTypeValues.push(1);
+    } else if (examTypeValue == 2 && !addedExamTypeValues.includes(2)) {
+      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
+      addedExamTypeValues.push(2);
+    }
+  }
+}
+
+// แสดงประเภทการสอบตามที่เลือก
+const searchExamType = async () => {
+  if (examType.value !== null) {
+    const selectExamType = OriginalData.value.filter((data: { ExamType: number | null; }) => {
+      if (examType.value === 0) {
+        OriginalDataFetch();
+        return data.ExamType === 1 || data.ExamType === 2;
+      } else {
+        return data.ExamType === examType.value;
+      }
+    });
+    await DataStore.DataUpdateMain(selectExamType);
+    UpdataData.value = DataStore.DataMainUpdate
+  }
+};
+
+// บัญชีหมดอายุ
+const expiredAccount = ref<boolean>(false); 
+const searchExpiredAccount = async () => {
+  const currentDate = new Date();
+  const updatedRows = OriginalData.value.map((data) => {
+    let expirationDate = new Date(data.AccountExpirationDate);
+    let isExpired = expirationDate < currentDate;
+
+    return { ...data, isExpired };
+  });
+  if (expiredAccount.value) {
+    const expiredRows = updatedRows.filter((data) => data.isExpired);
+    await DataStore.DataUpdateMain(expiredRows);
+    UpdataData.value = DataStore.DataMainUpdate
+  } else {
+    OriginalDataFetch();
+  }
+};
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+    if (paging.value == true)
+      return " " + start + "-" + end + " ใน " + total;
+    else return start + "-" + end + " ใน " + total;
+  };
+
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการสอบแข่งขัน / คัดเลือก
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm"> 
+      <div class="row q-pa-md" >
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-select
+                v-model="fiscalyear"
+                label="ปีงบประมาณ"
+                dense
+                clearable 
+                emit-value
+                map-options
+                :options="fiscalyearOP"
+                option-value="id"
+                option-label="name"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFiscalyear"
+              />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-6"></div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-card bordered class="col-12 filter-card">
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
+              <q-select
+                  v-model="examTime"
+                  label="ครั้งที่"
+                  dense
+                  clearable 
+                  emit-value
+                  map-options
+                  :options="examTimeOP"
+                  option-value="id"
+                  option-label="name"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchExamTime"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
+              <q-select
+                  v-model="examType"
+                  label="ประเภทการสอบ"
+                  dense
+                  clearable 
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="examTypeOP"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchExamType"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+              <q-toggle
+                v-model="expiredAccount"
+                class="toggle-expired-account"
+                color="blue" 
+                label="แสดงบัญชีหมดอายุ"
+                @update:model-value="searchExpiredAccount"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-table
+          ref="table"
+          :columns="columns" 
+          :rows="UpdataData" 
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+        >
+        <template v-slot:body="props" >
+          <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
+            <q-td key="id" :props="props">
+                {{ props.row.id }}
+            </q-td>
+            <q-td key="ExamRound" :props="props">
+                {{ props.row.ExamRound }}
+            </q-td>
+            <q-td key="ExamOrder" :props="props">
+                {{ props.row.ExamOrder }}
+            </q-td>
+            <q-td key="FiscalYear" :props="props">
+                {{ props.row.FiscalYear + 543 }}
+            </q-td>
+            <q-td key="NumberofCandidates" :props="props">
+                {{ props.row.NumberofCandidates }}
+            </q-td>
+            <q-td key="ExamType" :props="props">
+                {{ props.row.ExamType == 1 ? 'สอบแข่งขัน' : 'คัดเลือก' }}
+            </q-td>
+            <q-td key="AccountExpirationDate" :props="props">
+                {{ textDate(props.row.AccountExpirationDate) }}
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #EDEDED;
+}
+
+.toggle-expired-account{
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373C;
+}
+
+.icon-color {
+    color: #4154b3;
+  }
+  .custom-header-table {
+    max-height: 64vh;
+    .q-table tr:nth-child(odd) td {
+      background: white;
+    }
+    .q-table tr:nth-child(even) td {
+      background: #f8f8f8;
+    }
+  
+    .q-table thead tr {
+      background: #ecebeb;
+    }
+  
+    .q-table thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+    /* this will be the loading indicator */
+    .q-table thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+    .q-table thead tr:first-child th {
+      top: 0;
+    }
+  }
+</style>
diff --git a/src/modules/05_placement/views/Main.vue b/src/modules/05_placement/views/Main.vue
index 2455359b8..fe6d18914 100644
--- a/src/modules/05_placement/views/Main.vue
+++ b/src/modules/05_placement/views/Main.vue
@@ -174,10 +174,7 @@ const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหม
 const fiscalyearfilter = async () => {
   for (let data of OriginalData.value) {
     const year = data.FiscalYear + 543;
-    if (fiscalyear.value == 0 && !addedFiscalYearValues.includes(1)) {
-        fiscalyearOP.push({ id: 0, name: "ทั้งหมด" });
-        addedFiscalYearValues.push(1);
-    } else if (!addedFiscalYearValues.includes(year)) {
+    if (!addedFiscalYearValues.includes(year)) {
         fiscalyearOP.push({ id: year, name: year.toString() });
         addedFiscalYearValues.push(year);
     }

From 73bcd275b011a4d5ac6faccae3c7542140d2f3ab Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Thu, 8 Jun 2023 17:39:46 +0700
Subject: [PATCH 6/9] edit condition show props.row.ExamType == 1

---
 src/modules/05_placement/views/Domination.vue | 2 +-
 src/modules/05_placement/views/Main.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/views/Domination.vue b/src/modules/05_placement/views/Domination.vue
index fe6d18914..ce8b41705 100644
--- a/src/modules/05_placement/views/Domination.vue
+++ b/src/modules/05_placement/views/Domination.vue
@@ -438,7 +438,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.row.NumberofCandidates }}
             </q-td>
             <q-td key="ExamType" :props="props">
-                {{ props.row.ExamType == 1 ? 'สอบแข่งขัน' : 'คัดเลือก' }}
+                {{ props.row.ExamType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
             </q-td>
             <q-td key="AccountExpirationDate" :props="props">
                 {{ textDate(props.row.AccountExpirationDate) }}
diff --git a/src/modules/05_placement/views/Main.vue b/src/modules/05_placement/views/Main.vue
index fe6d18914..ce8b41705 100644
--- a/src/modules/05_placement/views/Main.vue
+++ b/src/modules/05_placement/views/Main.vue
@@ -438,7 +438,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.row.NumberofCandidates }}
             </q-td>
             <q-td key="ExamType" :props="props">
-                {{ props.row.ExamType == 1 ? 'สอบแข่งขัน' : 'คัดเลือก' }}
+                {{ props.row.ExamType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
             </q-td>
             <q-td key="AccountExpirationDate" :props="props">
                 {{ textDate(props.row.AccountExpirationDate) }}

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

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

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

From 312642f8f68ccff119c3e17f95c86bb049a2e524 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 8 Jun 2023 18:24:09 +0700
Subject: [PATCH 8/9] =?UTF-8?q?update=20UI=20-=20=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=84=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=94=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81/?=
 =?UTF-8?q?=E0=B9=81=E0=B8=82=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=83=E0=B8=99=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=84=E0=B8=A3=E0=B8=9A=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=20design=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B9=80=E0=B8=9B=E0=B9=87?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=9F=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=81=E0=B8=A3=E0=B8=93=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A2=E0=B8=B9=E0=B9=88=E0=B9=83=E0=B8=99=E0=B9=82?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B8=94=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=B0=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=20Action=20=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=96=E0=B8=81?=
 =?UTF-8?q?=E0=B8=95=E0=B9=89=E0=B8=AD=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PlacementTable.vue             | 412 --------------
 .../{PlacementDetail.vue => pass/Detail.vue}  |  46 +-
 .../components/pass/DialogAppoint.vue         |   0
 .../components/{ => pass}/DialogFooter.vue    |  21 +-
 .../components/{ => pass}/DialogHeader.vue    |   4 +-
 .../05_placement/components/pass/Table.vue    | 514 ++++++++++++++++++
 .../TableView.vue}                            | 139 +----
 .../interface/request/placement.ts            |  10 +-
 src/modules/05_placement/router.ts            |   5 +-
 9 files changed, 576 insertions(+), 575 deletions(-)
 delete mode 100644 src/modules/05_placement/components/PlacementTable.vue
 rename src/modules/05_placement/components/{PlacementDetail.vue => pass/Detail.vue} (56%)
 create mode 100644 src/modules/05_placement/components/pass/DialogAppoint.vue
 rename src/modules/05_placement/components/{ => pass}/DialogFooter.vue (73%)
 rename src/modules/05_placement/components/{ => pass}/DialogHeader.vue (80%)
 create mode 100644 src/modules/05_placement/components/pass/Table.vue
 rename src/modules/05_placement/components/{PlacementTableView.vue => pass/TableView.vue} (70%)

diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
deleted file mode 100644
index 19b3112cd..000000000
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<script setup lang="ts">
-import { ref, defineComponent, h } from "vue";
-import Table from "@/modules/05_placement/components/PlacementTableView.vue";
-import { useQuasar, QForm } from "quasar";
-import type { TableName } from "@/modules/05_placement/interface/request/placement";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/modules/05_placement/components/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/DialogFooter.vue";
-const editvisible = ref<boolean>(false);
-const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
-const visibleColumns = ref<String[]>([]);
-const store = usePlacementDataStore();
-const filter = ref<string>("");
-const { placementData } = store;
-const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
-const modal = ref<boolean>(false); //modal add detail
-const modal_right = ref<boolean>(false); //modal add detail
-const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
-const position = ref<number>();
-const Name = ref<string>();
-const ExamOrder = ref<number>();
-const Unit = ref<string>();
-const ReportingDate = ref<string>();
-const BMAOfficer = ref<boolean>();
-const Status = ref<string>();
-const checkList = ref<string>();
-const positionMasterUserNote = ref<string>();
-const $q = useQuasar(); // show dialog
-const files = ref<File[]>([]);
-const clickEditRow = () => {
-  editRow.value = true;
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-const selectData = (props: TableName) => {
-  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);
-const editDetail = (props: TableName, action: "cancel" | "wait") => {
- 
-  if (action === "cancel") {
-    getNumFile.value = 0;
-    editRow.value = false;
-    modalEdit.value = false;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.Name;
-  } else if (action === "wait") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.Name;
-  }
-
-};
-placementData.mappingPosition.columns.length == 0
-  ? (visibleColumns.value = [
-      "position",
-      "Name",
-      "ExamOrder",
-      "Unit",
-      "ReportingDate",
-      "BMAOfficer",
-      "Status",
-      "checkList",
-    ])
-  : (visibleColumns.value = placementData.mappingPosition.columns);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "position",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "Name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    sortable: true,
-    field: "Name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "ExamOrder",
-    align: "left",
-    label: "ลำดับที่สอบได้",
-    sortable: true,
-    field: "ExamOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "Unit",
-    align: "left",
-    label: "หน่วยงานที่รับการบรรจุ",
-    sortable: true,
-    field: "Unit",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "ReportingDate",
-    align: "left",
-    label: "วันที่รายงานตัว",
-    sortable: true,
-    field: "ReportingDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "BMAOfficer",
-    align: "left",
-    label: "ข้าราชการฯ กทม.",
-    sortable: true,
-    field: "BMAOfficer",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "Status",
-    align: "left",
-    label: "สถานะการบรรจุ",
-    sortable: true,
-    field: "Status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<TableName[]>([
-  {
-    position: 1,
-    Name: "setthawut",
-    ExamOrder: 1,
-    Unit: "chamomind",
-    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-    BMAOfficer: true,
-    Status: "บรรจุเเล้ว",
-    checkList: null,
-  },
-  {
-    position: 1,
-    Name: "setthawut",
-    ExamOrder: 1,
-    Unit: "chamomind",
-    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-    BMAOfficer: true,
-    Status: "ยังไม่บรรจุ",
-    checkList: null,
-  },
-  {
-    position: 1,
-    Name: "setthawut",
-    ExamOrder: 1,
-    Unit: "chamomind",
-    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-    BMAOfficer: true,
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-  },
-
-  {
-    position: 1,
-    Name: "setthawut",
-    ExamOrder: 1,
-    Unit: "chamomind",
-    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-    BMAOfficer: true,
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-  },
-
-  {
-    position: 1,
-    Name: "tee",
-    ExamOrder: 1,
-    Unit: "chamomind",
-    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-    BMAOfficer: true,
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-  },
-  {
-    position: 1,
-    Name: "setthawut",
-    ExamOrder: 1,
-    Unit: "chamomind",
-    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-    BMAOfficer: true,
-    Status: "บรรจุเเล้ว",
-    checkList: null,
-  },
-]);
-const clickCancel = async () => {
-  editvisible.value = false;
-};
-const clickClose = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal_right.value = false;
-      modal.value = false;
-    });
-  } else {
-    modal_right.value = false;
-    modal.value = false;
-  }
-};
-
-</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"
-    >
-      <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 == 'isActive'" class="table_ellipsis">
-              <div v-if="!editvisible">
-                <q-icon
-                  v-if="col.value == false"
-                  name="mdi-close"
-                  color="red"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </div>
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <div v-if="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="modal" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader :tittle="`รายละเอียดของ${Name}`" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm"> text </q-card-section>
-        <q-separator />
-        <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">
-      <q-form ref="myForm">
-        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader
-          :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile == 1"
-              v-model="files"
-              dense
-              :label="'เลือกไฟล์เอกสารหลักฐาน'"
-              outlined
-              use-chips
-              multiple
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :save="clickSave"
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/05_placement/components/PlacementDetail.vue b/src/modules/05_placement/components/pass/Detail.vue
similarity index 56%
rename from src/modules/05_placement/components/PlacementDetail.vue
rename to src/modules/05_placement/components/pass/Detail.vue
index e7b877482..825fa12a1 100644
--- a/src/modules/05_placement/components/PlacementDetail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 
 import { defineAsyncComponent } from "@vue/runtime-core";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const year = ref<string>("2566");
+const round = ref<string>("1");
+const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
 
 const itemTop = reactive([
   {
@@ -12,60 +18,52 @@ const itemTop = reactive([
   },
   {
     id: 2,
-    num: 3,
+    num: 1,
     title: "ยังไม่บรรจุ",
     color: "#02A998",
   },
   {
     id: 3,
-    num: 3,
+    num: 5,
     title: "เตรียมบรรจุ",
     color: "#2EA0FF",
   },
   {
     id: 4,
-    num: 3,
+    num: 1,
     title: "บรรจุเเล้ว",
     color: "#4154B3",
   },
   {
     id: 5,
-    num: 3,
+    num: 0,
     title: "สละสิทธิ์",
     color: "#FF5C5F",
   },
 ]);
 const AddTablePosition = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/PlacementTable.vue")
+  () => import("@/modules/05_placement/components/pass/Table.vue")
 );
 </script>
 
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
+    <div class="toptitle">
+      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+      รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
+    </div>
+    <q-space />
+
     <div class="q-py-md row col-12 no-wrap">
-      <hr
-        class="q-separator q-separator--vertical gt-sm"
-        aria-orientation="vertical"
-        style="width: 2px"
-      />
+      <hr class="q-separator q-separator--vertical gt-sm" aria-orientation="vertical" style="width: 2px" />
 
       <div class="col-12 row bg-white">
         <div class="fit q-pa-md">
           <div class="row col-12 q-col-gutter-md fit">
-            <div
-              class=""
-              v-for="item in itemTop"
-              :key="item.id"
-              style="width: 15%"
-            >
-              <div
-                class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm"
-              >
+            <div class="" v-for="item in itemTop" :key="item.id" style="width: 15%">
+              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
                 <div class="col-12 row items-center q-pa-sm">
-                  <div
-                    class="col-12 text-h5 text-weight-bold"
-                    :style="{ color: item.color }"
-                  >
+                  <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
                     {{ item.num }}
                   </div>
                   <div class="col-12 text-dark ellipsis">
diff --git a/src/modules/05_placement/components/pass/DialogAppoint.vue b/src/modules/05_placement/components/pass/DialogAppoint.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/05_placement/components/DialogFooter.vue b/src/modules/05_placement/components/pass/DialogFooter.vue
similarity index 73%
rename from src/modules/05_placement/components/DialogFooter.vue
rename to src/modules/05_placement/components/pass/DialogFooter.vue
index 3520adbd4..8f99bc4e7 100644
--- a/src/modules/05_placement/components/DialogFooter.vue
+++ b/src/modules/05_placement/components/pass/DialogFooter.vue
@@ -1,27 +1,14 @@
 <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-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-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
+        icon="mdi-content-save-outline">
         <q-tooltip>บันทึก</q-tooltip>
       </q-btn>
     </div>
diff --git a/src/modules/05_placement/components/DialogHeader.vue b/src/modules/05_placement/components/pass/DialogHeader.vue
similarity index 80%
rename from src/modules/05_placement/components/DialogHeader.vue
rename to src/modules/05_placement/components/pass/DialogHeader.vue
index f3af6c6c0..b02ec8f26 100644
--- a/src/modules/05_placement/components/DialogHeader.vue
+++ b/src/modules/05_placement/components/pass/DialogHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <q-toolbar>
-    <q-toolbar-title class="text-subtitle2 text-bold">{{ tittle }}</q-toolbar-title>
+      <q-toolbar-title class="text-subtitle2 text-bold">{{ title }}</q-toolbar-title>
     <q-btn
     icon="close"
     unelevated
@@ -15,7 +15,7 @@
 
 import { ref, useAttrs } from "vue";
 const props = defineProps({
-  tittle: String,
+  title: String,
   close: {
     type: Function,
     default: () => console.log("not function"),
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
new file mode 100644
index 000000000..322e2acdd
--- /dev/null
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Table from "@/modules/05_placement/components/pass/TableView.vue";
+import { useQuasar, QForm } from "quasar";
+import type { TableName } from "@/modules/05_placement/interface/request/placement";
+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 { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const editvisible = ref<boolean>(false);
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const visibleColumns = ref<String[]>([]);
+const store = usePlacementDataStore();
+const filter = ref<string>("");
+const { placementData } = store;
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //modal add detail
+const modal_right = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const Name = ref<string>();
+const positionMasterUserNote = ref<string>();
+const $q = useQuasar(); // show dialog
+const files = ref<File[]>([]);
+const appointModal = ref<boolean>(false);
+const appoint = ref<any>({
+  Code: '',
+  UnitName: '',
+  PositionNo: '',
+  PositionType: '',
+  PositionManage: '',
+  PositionTypeManage: '',
+  PositionLine: '',
+  Major: '',
+  PositionLevel: ''
+});
+
+const saveAppoint = () => {
+  console.log("save appoint===>", appoint.value);
+}
+
+const savePostpone = () => {
+  const dataPost = { note: positionMasterUserNote.value, files: files }
+  console.log("save postpone===>", dataPost);
+  positionMasterUserNote.value = '';
+  modal_right.value = false;
+}
+
+const saveDisclaim = () => {
+  const dataPost = { note: positionMasterUserNote.value }
+  console.log("save disclaim===>", dataPost);
+  positionMasterUserNote.value = '';
+  modal_right.value = false;
+}
+
+const clickEditRow = () => {
+  editRow.value = true;
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const selectData = (props: TableName) => {
+  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);
+const editDetail = (props: TableName, action: "cancel" | "wait") => {
+
+  if (action === "cancel") {
+    getNumFile.value = 0;
+    editRow.value = false;
+    modalEdit.value = false;
+    modal_right.value = true;
+    edit.value = true;
+    Name.value = props.Name;
+  } else if (action === "wait") {
+    getNumFile.value = 1;
+    editRow.value = false;
+    modalEdit.value = true;
+    modal_right.value = true;
+    edit.value = true;
+    Name.value = props.Name;
+  }
+
+};
+placementData.mappingPosition.columns.length == 0
+  ? (visibleColumns.value = [
+    "position",
+    "Name",
+    "ExamOrder",
+    "Unit",
+    "ReportingDate",
+    "BMAOfficer",
+    "Status",
+    "checkList",
+  ])
+  : (visibleColumns.value = placementData.mappingPosition.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "position",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "Name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "Name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamOrder",
+    align: "left",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "ExamOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "Unit",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "Unit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ReportingDate",
+    align: "left",
+    label: "วันที่รายงานตัว",
+    sortable: true,
+    field: "ReportingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "BMAOfficer",
+    align: "left",
+    label: "ข้าราชการฯ กทม.",
+    sortable: true,
+    field: "BMAOfficer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "Status",
+    align: "left",
+    label: "สถานะการบรรจุ",
+    sortable: true,
+    field: "Status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<TableName[]>([
+  {
+    Id: "4016500103241",
+    position: 1,
+    Name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    ExamOrder: 1,
+    unitId: "",
+    UnitGroup: "",
+    Unit: "",
+    ReportingDate: "-", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "สละสิทธิ์",
+    checkList: null,
+  },
+  {
+    Id: "4016500092355",
+    position: 2,
+    Name: "นางสาวรัชภรณ์ ภักดี",
+    ExamOrder: 2,
+    unitId: "",
+    UnitGroup: "",
+    Unit: "",
+    ReportingDate: "", //วันที่รายงานตัว
+    BMAOfficer: false,
+    Status: "ยังไม่บรรจุ",
+    checkList: null,
+  },
+  {
+    Id: "4016500086436",
+    position: 3,
+    Name: "นางสาวภาพรรณ ลออ",
+    ExamOrder: 3,
+    unitId: "",
+    UnitGroup: "",
+    Unit: "",
+    ReportingDate: "", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "ยังไม่บรรจุ",
+    checkList: null,
+  },
+
+  {
+    Id: "4016500073585",
+    position: 4,
+    Name: "นางกติมา พนมเทียน",
+    ExamOrder: 4,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.1)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+    checkList: null,
+  },
+
+  {
+    Id: "4016500053234",
+    position: 5,
+    Name: "นางสาววิยฎา ทองเอียด",
+    ExamOrder: 5,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.2)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+    checkList: null,
+  },
+  {
+    Id: "4016500042345",
+    position: 6,
+    Name: "นายศรุณ เจริญเมือง",
+    ExamOrder: 6,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.3)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+    checkList: null,
+  },
+  {
+    Id: "401650002245",
+    position: 7,
+    Name: "นายอภินัน บอบู่",
+    ExamOrder: 7,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.4)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "บรรจุเเล้ว",
+    checkList: null,
+  },
+]);
+
+const clickCancel = async () => {
+  editvisible.value = false;
+};
+
+const openAppointModal = (value: any) => {
+  appointModal.value = true
+  editRow.value = true;
+};
+
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal_right.value = false;
+      modal.value = false;
+      appointModal.value = false;
+    });
+  } else {
+    modal_right.value = false;
+    modal.value = false;
+    appointModal.value = false;
+  }
+};
+
+const save = () => {
+  console.log("rows===>", rows.value)
+}
+</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-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>
+
+  <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>
+            <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" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader :title="`รายละเอียดของ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm"> text 5 </q-card-section>
+        <q-separator />
+        <DialogFooter 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">
+      <q-form ref="myForm">
+        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+              :borderless="!edit" v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`"
+              @update:modelValue="clickEditRow" type="textarea" />
+            <q-file v-if="getNumFile == 1" v-model="files" dense :label="'เลือกไฟล์เอกสารหลักฐาน'" outlined use-chips
+              multiple class="q-py-sm">
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit"
+          :save="modalEdit ? savePostpone : saveDisclaim" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.q-table p {
+  margin-bottom: 0;
+  color: #818181;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/PlacementTableView.vue b/src/modules/05_placement/components/pass/TableView.vue
similarity index 70%
rename from src/modules/05_placement/components/PlacementTableView.vue
rename to src/modules/05_placement/components/pass/TableView.vue
index f8efb9b9d..695d46c98 100644
--- a/src/modules/05_placement/components/PlacementTableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,89 +1,36 @@
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-      <q-btn
-        size="12px"
-        v-if="!editvisible"
-        flat
-        round
-        :disabled="editvisible"
-        :color="editvisible ? 'grey-7' : 'primary'"
-        @click="clickEdit"
-        icon="mdi-pencil-outline"
-      >
+      <q-btn size="12px" v-if="!editvisible" flat round :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'" @click="clickEdit" icon="mdi-pencil-outline">
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="editvisible"
-        :disabled="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="clickCancel"
-        icon="mdi-undo"
-      >
+      <q-btn size="12px" flat round v-if="editvisible" :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'red'"
+        @click="clickCancel" icon="mdi-undo">
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn>
       <div class="q-px-sm">
-        <q-btn
-          flat
-          round
-          :disabled="editvisible == false"
-          :color="editvisible == false ? 'grey-7' : 'public'"
-          @click="add"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn flat round :disabled="editvisible == false" :color="editvisible == false ? 'grey-7' : 'public'"
+          @click="add" icon="mdi-content-save-outline">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
       </div>
 
       <q-space />
       <div class="items-center" style="display: flex">
-        <div
-          class="row items-center"
-          style="display: flex"
-          v-if="publicData == false && publicNoBtn == false"
-        ></div>
+        <div class="row items-center" style="display: flex" v-if="publicData == false && publicNoBtn == false"></div>
 
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
+        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
+          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
+        <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
+          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+          style="min-width: 150px" class="gt-xs q-ml-sm" />
       </div>
     </div>
 
@@ -93,59 +40,22 @@
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
+        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
+          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
+        <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
+          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+          style="min-width: 150px" class="gt-xs q-ml-sm" />
       </div>
     </div>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="[0]"
-    >
+    <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
+      :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" :pagination="initialPagination"
+      :rows-per-page-options="[0]">
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -369,11 +279,14 @@ const resetFilter = () => {
 .icon-color {
   color: #4154b3;
 }
+
 .custom-header-table {
   max-height: 64vh;
+
   .q-table tr:nth-child(odd) td {
     background: white;
   }
+
   .q-table tr:nth-child(even) td {
     background: #f8f8f8;
   }
@@ -386,11 +299,13 @@ const resetFilter = () => {
     position: sticky;
     z-index: 1;
   }
+
   /* this will be the loading indicator */
   .q-table thead tr:last-child th {
     /* height of all previous header rows */
     top: 48px;
   }
+
   .q-table thead tr:first-child th {
     top: 0;
   }
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index ceaa2bb80..504a4556b 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -1,17 +1,15 @@
 interface TableName {
+  Id: string;
   position: number;
   Name: string;
   ExamOrder: number;
+  unitId: string;
+  UnitGroup: string;
   Unit: string;
   ReportingDate: string; //วันที่รายงานตัว
   BMAOfficer: boolean;
   Status: string;
   checkList: any;
-
 }
 
-
-export type {
-  TableName,
-
-};
\ No newline at end of file
+export type { TableName };
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 1a67682e0..acc8d617e 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -3,7 +3,8 @@
  */
 
 const Main = () => import("@/modules/05_placement/views/Main.vue");
-const Detail = () => import("@/modules/05_placement/components/PlacementDetail.vue");
+const PlacementDetail = () =>
+  import("@/modules/05_placement/components/pass/Detail.vue");
 
 export default [
   {
@@ -19,7 +20,7 @@ export default [
   {
     path: "/placement/detail",
     name: "placementDetail",
-    component: Detail,
+    component: PlacementDetail,
     meta: {
       Auth: true,
       Key: [7],

From e07e7ddf38076b3c057bebb82355d6e45d788e99 Mon Sep 17 00:00:00 2001
From: watcharanondh <champion460@gmail.com>
Date: Fri, 9 Jun 2023 09:17:41 +0700
Subject: [PATCH 9/9] clean code

---
 src/modules/05_placement/views/Domination.vue | 2 +-
 src/modules/05_placement/views/Main.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/views/Domination.vue b/src/modules/05_placement/views/Domination.vue
index ce8b41705..0db669f8d 100644
--- a/src/modules/05_placement/views/Domination.vue
+++ b/src/modules/05_placement/views/Domination.vue
@@ -170,7 +170,7 @@ const redirectToPage = (id:number) => {
 // เลือกปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
 const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
-  const addedFiscalYearValues: number[] = [];
+const addedFiscalYearValues: number[] = [];
 const fiscalyearfilter = async () => {
   for (let data of OriginalData.value) {
     const year = data.FiscalYear + 543;
diff --git a/src/modules/05_placement/views/Main.vue b/src/modules/05_placement/views/Main.vue
index ce8b41705..0db669f8d 100644
--- a/src/modules/05_placement/views/Main.vue
+++ b/src/modules/05_placement/views/Main.vue
@@ -170,7 +170,7 @@ const redirectToPage = (id:number) => {
 // เลือกปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
 const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
-  const addedFiscalYearValues: number[] = [];
+const addedFiscalYearValues: number[] = [];
 const fiscalyearfilter = async () => {
   for (let data of OriginalData.value) {
     const year = data.FiscalYear + 543;