re-structure folder & route ในส่วนของบรรจุ

src/modules/05_placement/components/PersonalDetail/Detail.vue

@@ -2,22 +2,25 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { useDataStore } from "@/stores/data";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 const router = useRouter();
-import Informationvue from "@/modules/05_placement/components/exams_other/Information/layout.vue";
+import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
-import EducationVue from "@/modules/05_placement/components/exams_other/Education.vue";
+import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
-import Certicate from "@/modules/05_placement/components/exams_other/Information/Certicate.vue";
+import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
-import InsigniaVue from "@/modules/05_placement/components/exams_other/Insignia.vue";
+import InsigniaVue from "@/modules/05_placement/components/PersonalDetail/Insignia.vue";
-import ExamResult from "@/modules/05_placement/components/exams_other/ExamResult.vue";
+import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
-import Qualification from "@/modules/05_placement/components/exams_other/Qualification.vue";
+import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
 
 const store = useDataStore();
 const { changeTab } = store;
 const statusEdit = ref<boolean>(false);
 const profileType = ref<string>("");
 
+const route = useRoute();
+const examId = ref<string>(route.params.personalId.toString());
+
 const FormData = reactive<any>({
-    fullName: "นาย กอ กอกอก",
+    fullName: examId,
 });
 
 onMounted(async () => {

src/modules/05_placement/components/PersonalDetail/Education.vue

@@ -4,9 +4,9 @@ import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import ProfileTable from "@/modules/05_placement/components/exams_other/Table.vue";
+import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
   RequestItemsObject,

src/modules/05_placement/components/PersonalDetail/Information/Address.vue

@@ -10,9 +10,9 @@ import type {
   Address,
   DataOption,
   zipCodeOption,
-} from "@/modules/05_placement/components/exams_other/profileType";
+} from "@/modules/05_placement/components/PersonalDetail/profileType";
-import { defaultAddress } from "@/modules/05_placement/components/exams_other/profileType";
+import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 import type { RequestItemsHistoryObject } from "@/modules//05_placement/interface/request/Address";
 import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
 import HistoryTable from "@/components/TableHistory.vue";

src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue

@@ -5,9 +5,9 @@ import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import ProfileTable from "@/modules/05_placement/components/exams_other/Table.vue";
+import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
   RequestItemsObject,

src/modules/05_placement/components/PersonalDetail/Information/Information.vue

@@ -7,15 +7,15 @@ import { useQuasar } from "quasar";
 import type {
   Information,
   DataOption,
-} from "@/modules/05_placement/components/exams_other/profileType";
+} from "@/modules/05_placement/components/PersonalDetail/profileType";
-import { defaultInformation } from "@/modules/05_placement/components/exams_other/profileType";
+import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import type {
   RequestItemsHistoryObject,
   Columns,
 } from "@/modules/05_placement/interface/request/Information";
 import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
 import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";

src/modules/05_placement/components/PersonalDetail/Information/layout.vue

@@ -1,8 +1,8 @@
 <!-- card รวม ข้อมูลส่วนตัว กับ ที่อยู่ -->
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import Information from "@/modules/05_placement/components/exams_other/Information/Information.vue";
+import Information from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
-import Address from "@/modules/05_placement/components/exams_other/Information/Address.vue";
+import Address from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const props = defineProps({

src/modules/05_placement/components/PersonalDetail/Insignia.vue

@@ -4,9 +4,9 @@ import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import ProfileTable from "@/modules/05_placement/components/exams_other/Table.vue";
+import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
   RequestItemsObject,

src/modules/05_placement/components/PersonalDetail/Qualification.vue

@@ -4,7 +4,7 @@ import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import type { QForm } from 'quasar';
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());

src/modules/05_placement/components/exams_other/Main.vue

@@ -1,421 +0,0 @@
-<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 () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  await DataStore.DataMain(rows.value)
-  OriginalData.value = await DataStore.DataMainOrig
-  UpdataData.value = OriginalData.value
-}
-
-onMounted(async () => {
-  await OriginalDataFetch()
-  fiscalYearFilter()
-  examTimeFilter()
-  examTypeFilter()
-  await expiredAccountFilter()
-  searchFilterTable()
-})
-
-// ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (id?: number) => {
-  router.push(`/placement2/detail`);
-};
-
-// เลือกปีงบประมาณ
-const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: 'ทั้งหมด' }]);
-const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear + 543;
-
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
-
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
-}
-
-// เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log('Input value changed:', fiscalyear.value);
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-};
-
-// ค้นหาในตาราง
-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 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 searchFilterTable = async () => {
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateMain(examTime.value, examType.value, expiredAccount.value);
-  UpdataData.value = DataStore.DataMainUpdate
-};
-
-// บัญชีหมดอายุ
-const expiredAccount = ref<boolean>(false);
-const expiredAccountFilter = async () => {
-  const currentDate = new Date();
-  const updatedRows = OriginalData.value.map((data) => {
-    let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate 
-
-    return { ...data, isExpired };
-  });
-  await DataStore.DataMain(updatedRows);
-};
-
-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="searchFilterTable" />
-            </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="searchFilterTable" />
-            </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="searchFilterTable" />
-            </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: #f1f1f1b0;
-}
-
-.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>

src/modules/05_placement/interface/index/Main.ts

@@ -1,4 +1,4 @@
-import type { zipCodeOption } from "../../components/exams_other/profileType";
+import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
   id: number | string;
   name: string;
@@ -16,7 +16,6 @@ interface EduOps {
   positionPathOptions: DataOption[];
 }
 
-
 interface InformationOps {
   prefixOps: DataOption[];
   genderOps: DataOption[];
@@ -63,5 +62,5 @@ export type {
   Pagination,
   EduOps,
   InsigniaOps,
-  CheckboxItem
+  CheckboxItem,
 };

src/modules/05_placement/router.ts

@@ -2,14 +2,12 @@
  * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
  */
 
-const MainSorkorcho = () =>
+const PlacementMain = () =>
-  import("@/modules/05_placement/components/exams_sorkorcho/Main.vue");
+  import("@/modules/05_placement/components/Main.vue");
 const PlacementDetail = () =>
   import("@/modules/05_placement/components/pass/Detail.vue");
-const MainOther = () =>
+const PlacementPersonalDetail = () =>
-  import("@/modules/05_placement/components/exams_other/Main.vue");
+  import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
-const Placement2Detail = () =>
-  import("@/modules/05_placement/components/exams_other/Detail.vue");
 const addOrderPlacement = () =>
   import(
     "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
@@ -25,9 +23,29 @@ const detailOrderReplace = () =>
 
 export default [
   {
-    path: "/placement/Sorkorcho",
+    path: "/placement",
     name: "placement",
-    component: MainSorkorcho,
+    component: PlacementMain,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/placement/detail",
+    name: "placement-detail",
+    component: PlacementDetail,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/placement/detail/:personalId",
+    name: "placement-personal-detail",
+    component: PlacementPersonalDetail,
     meta: {
       Auth: true,
       Key: [7],
@@ -54,36 +72,6 @@ export default [
       Role: "placement",
     },
   },
-  {
-    path: "/placement/detail",
-    name: "placementDetail",
-    component: PlacementDetail,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement2",
-    name: "placement2",
-    component: MainOther,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement2/detail",
-    name: "placement2Detail",
-    component: Placement2Detail,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "placement",
-    },
-  },
   {
     path: "/placement/addOrderPlacement",
     name: "addOrderPlacement",