Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

# Conflicts: # src/api/05_placement/api.placement.ts # src/api/index.ts
2023-07-13 16:17:57 +07:00 · 2023-07-13 16:17:57 +07:00 · 79d864bc01
commit 79d864bc01
parent b29c6ca262 aec3cb49de
17 changed files with 315 additions and 486 deletions
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@ -15,72 +15,72 @@ env:
  COMPOSE_PATH: /home/frappet/docker/bma-ehr
  TOKEN_LINE: uxuK5hDzS2DsoC5piJBrWRLiz8GgY7iMZZldOWsDDF0
 jobs:
-  # # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd
-  # release-test:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v3
-  #     # skip Set up QEMU because it fail on act and container
-  #     # Gen Version try to get version from tag or inut
-  #     - name: Gen Version
-  #       id: gen_ver
-  #       run: |
-  #         if [[ $GITHUB_REF == 'refs/tags/'* ]]; then
-  #           IMAGE_VER='${GITHUB_REF/refs\/tags\//}'
-  #         else
-  #           IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
-  #         fi
-  #         if [[ $IMAGE_VER == '' ]]; then
-  #           IMAGE_VER='test-vBeta'
-  #         fi
-  #         echo '::set-output name=image_ver::'$IMAGE_VER
-  #     - name: Check Version
-  #       run: |
-  #         echo $GITHUB_REF
-  #         echo ${{ steps.gen_ver.outputs.image_ver }}
+  # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd
+  release-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # skip Set up QEMU because it fail on act and container
+      # Gen Version try to get version from tag or inut
+      - name: Gen Version
+        id: gen_ver
+        run: |
+          if [[ $GITHUB_REF == 'refs/tags/'* ]]; then
+            IMAGE_VER='${GITHUB_REF/refs\/tags\//}'
+          else
+            IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
+          fi
+          if [[ $IMAGE_VER == '' ]]; then
+            IMAGE_VER='test-vBeta'
+          fi
+          echo '::set-output name=image_ver::'$IMAGE_VER
+      - name: Check Version
+        run: |
+          echo $GITHUB_REF
+          echo ${{ steps.gen_ver.outputs.image_ver }}

-  #     - name: Set up Docker Buildx
-  #       uses: docker/setup-buildx-action@v2
-  #     - name: Login in to registry
-  #       uses: docker/login-action@v2
-  #       with:
-  #         registry: ${{env.REGISTRY}}
-  #         username: ${{secrets.DOCKER_USER}}
-  #         password: ${{secrets.DOCKER_PASS}}
-  #     - name: Build and push docker image
-  #       uses: docker/build-push-action@v3
-  #       with:
-  #         context: .
-  #         platforms: linux/amd64
-  #         push: true
-  #         tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
-  #     - name: Remote Deployment
-  #       uses: appleboy/ssh-action@v0.1.8
-  #       with:
-  #         host: ${{env.DEPLOY_HOST}}
-  #         username: frappet
-  #         password: ${{ secrets.SSH_PASSWORD }}
-  #         port: 22
-  #         script: |
-  #           cd "${{env.COMPOSE_PATH}}"
-  #           docker-compose pull
-  #           docker-compose up -d
-  #           echo "${{ steps.gen_ver.outputs.image_ver }}"> success
-  #     - uses: snow-actions/line-notify@v1.1.0
-  #       if: success()
-  #       with:
-  #         access_token: ${{ env.TOKEN_LINE }}
-  #         message: |
-  #           -Success✅✅✅
-  #           Image: ${{env.IMAGE_NAME}}
-  #           Version: ${{ github.event.inputs.IMAGE_VER }}
-  #           By: ${{secrets.DOCKER_USER}}
-  #     - uses: snow-actions/line-notify@v1.1.0
-  #       if: failure()
-  #       with:
-  #         access_token: ${{ env.TOKEN_LINE }}
-  #         message: |
-  #           -Failure❌❌❌
-  #           Image: ${{env.IMAGE_NAME}}
-  #           Version: ${{ github.event.inputs.IMAGE_VER }}
-  #           By: ${{secrets.DOCKER_USER}}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login in to registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{env.REGISTRY}}
+          username: ${{secrets.DOCKER_USER}}
+          password: ${{secrets.DOCKER_PASS}}
+      - name: Build and push docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
+      - name: Remote Deployment
+        uses: appleboy/ssh-action@v0.1.8
+        with:
+          host: ${{env.DEPLOY_HOST}}
+          username: frappet
+          password: ${{ secrets.SSH_PASSWORD }}
+          port: 22
+          script: |
+            cd "${{env.COMPOSE_PATH}}"
+            docker-compose pull
+            docker-compose up -d
+            echo "${{ steps.gen_ver.outputs.image_ver }}"> success
+      - uses: snow-actions/line-notify@v1.1.0
+        if: success()
+        with:
+          access_token: ${{ env.TOKEN_LINE }}
+          message: |
+            -Success✅✅✅
+            Image: ${{env.IMAGE_NAME}}
+            Version: ${{ github.event.inputs.IMAGE_VER }}
+            By: ${{secrets.DOCKER_USER}}
+      - uses: snow-actions/line-notify@v1.1.0
+        if: failure()
+        with:
+          access_token: ${{ env.TOKEN_LINE }}
+          message: |
+            -Failure❌❌❌
+            Image: ${{env.IMAGE_NAME}}
+            Version: ${{ github.event.inputs.IMAGE_VER }}
+            By: ${{secrets.DOCKER_USER}}
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@ -1,12 +1,11 @@
 import env from "../index";
-// const placement = `${env.API_PLACEMENT_URI}/placement`;
-const placement = `${env.API_URI}/placement`;
+const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;

 export default {
  MainDetail: (year: number) => `${placement}/exam/${year}`,
  yearOptions: () => `${placement}/fiscal`,
-  redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
+  personalList: (examId: string) => `${placement}/pass/${examId}`,
  disclaimF: () => `${placement}/pass/disclaim`,
  deferment: () => `${placement}/pass/deferment`,
  getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -12,15 +12,16 @@ const config = ref<any>({
    API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
    // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
    API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
-    API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
-    // API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
+    // API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
+    API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
    // API_URI_PROFILE_SERVICE: "https://localhost:7159/api/v1",
    API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
    // API_CANDIDATE_URI: "https://localhost:7007/api/v1",
    API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1",
    // API_REPORT_URI: "https://localhost:7187/api/v1",
    API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    API_PLACEMENT_URI: "https://localhost:7260/api/v1",
+    // API_PLACEMENT_URI: "https://localhost:7260/api",
+    API_PLACEMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
    API_URI_ORG_TREE:
      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
    MEET_URI: "meet.frappet.com",
--- a/src/api/manage/api.positionEmployee.ts
+++ b/src/api/manage/api.positionEmployee.ts
@ -12,6 +12,7 @@ const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`
 const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;

 export default {
+  positionEmployeeStatus: `${positionEmployeeStatus}`,
  positionEmployee: `${positionEmployee}positionEmployee`,
  /**
   * api ตำแหน่ง
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@ -128,14 +128,15 @@ const fetchPlacementData = async (val: number) => {
  rows.value = [];
  http
    .get(config.API.MainDetail(val))
-    .then((res) => {
+    .then(async (res) => {
      dataPlacement.value = res.data.result;
      DataStore.DataMainOrig = dataPlacement.value;
      console.log(DataStore.DataMainOrig);

      // rows.value = DataStore.DataMainOrig;
-      DataStore.DataMainOrig.map((e: any) => {
-        rows.value.push({
+      const dataArr: any = [];
+      await DataStore.DataMainOrig.map((e: any) => {
+        dataArr.push({
          id: e.id,
          examRound: e.examRound,
          examOrder: e.examOrder,
@ -149,6 +150,8 @@ const fetchPlacementData = async (val: number) => {
        });
      });

+      rows.value = dataArr;
+
      examTypeFilter();
      examTimeFilter();
      expiredAccountFilter();
@ -160,6 +163,7 @@ const fetchPlacementData = async (val: number) => {
      hideLoader();
    });
 };
+
 const fetchYearOptions = async () => {
  http
    .get(config.API.yearOptions())
@ -185,7 +189,7 @@ const filterYear = () => {

 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
-  router.push(`/placement/pass/${examId}`);
+  router.push(`/placement/personal-list/${examId}`);
 };

 //-------------------|ค้นหาในตาราง|-----------------//
@ -243,9 +247,10 @@ const searchFilterTable = async () => {
      examType.value,
      expiredAccount.value
    );
-    // rows.value = DataStore.DataMainUpdate;
-    DataStore.DataMainUpdate.map((e: any) => {
-      rows.value.push({
+
+    const dataArr: any = [];
+    await DataStore.DataMainUpdate.map((e: any) => {
+      dataArr.push({
        id: e.id,
        examRound: e.examRound,
        examOrder: e.examOrder,
@ -258,6 +263,7 @@ const searchFilterTable = async () => {
        numberOfCandidates: e.numberOfCandidates,
      });
    });
+    rows.value = dataArr;
  }
 };

@ -278,7 +284,7 @@ const expiredAccountFilter = async () => {
 const paging = ref<boolean>(true);
 const pagination = ref({
  sortBy: "accountStartDate",
-  descending: false,
+  descending: true,
  page: 1,
  rowsPerPage: 10,
 });
--- a/src/modules/05_placement/components/PersonalList/Detail.vue
+++ b/src/modules/05_placement/components/PersonalList/Detail.vue
@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
-import { useRouter ,useRoute} from "vue-router";
-import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
+import { useRouter, useRoute } from "vue-router";
+import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
@ -14,7 +14,7 @@ const DataStore = usePlacementDataStore();

 const $q = useQuasar
 const mixin = useCounterMixin()
-const { messageError } = mixin
+const { messageError, showLoader, hideLoader } = mixin
 let roleAdmin = ref<boolean>(false);
 const router = useRouter();
 const route = useRoute();
@ -24,7 +24,7 @@ const round = ref<string>("");
 const title = ref<string>("");
 const examData = ref<any>();
 const AddTablePosition = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/pass/Table.vue")
+  () => import("@/modules/05_placement/components/PersonalList/Table.vue")
 );
 const stat = ref<any>({
  total: 0,
@ -37,71 +37,82 @@ const stat = ref<any>({
 const getStat = async () => {
  const examIdString = Array.isArray(examId) ? examId[0] : examId;
  await http
-  .get(config.API.getStatCard(examIdString))
-  .then((res) =>{
-    const statCard = res.data.result;
-    // อัปเดตค่าในตัวแปร stat
-    stat.value = {
-      total: statCard.total,
-      unContain: statCard.unContain,
-      prepareContain: statCard.prepareContain,
-      contain: statCard.contain,
-      disclaim: statCard.disclaim,
-    };
-    
+    .get(config.API.getStatCard(examIdString))
+    .then((res) => {
+      const statCard = res.data.result;
+      // อัปเดตค่าในตัวแปร stat
+      stat.value = {
+        total: statCard.total,
+        unContain: statCard.unContain,
+        prepareContain: statCard.prepareContain,
+        contain: statCard.contain,
+        disclaim: statCard.disclaim,
+      };
+
      console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
-  })
-  .catch((e) => {
-    messageError($q, e);
-  })
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
 };

 onMounted(async () => {
+  if (DataStore.DataMainOrig.length == 0) {
+    await fetchPlacementData();
+  }
+
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  }
+
+  await getStat()
+
  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
-  // console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
+
  title.value = examData.value.examRound;
  round.value = examData.value.examOrder;
  year.value = examData.value.fiscalYear;

-  await getStat()
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-  }
 });

+const fetchPlacementData = async () => {
+  showLoader();
+  http
+    .get(config.API.MainDetail(0))
+    .then(async (res) => {
+      DataStore.DataMainOrig = res.data.result;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </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)"
-      />
+      <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-card bordered class="q-py-sm row col-12">
      <div class="col-12 row bg-white">
        <div class="fit q-px-md q-py-sm">
          <div class="row col-12 q-col-gutter-md fit">
-          <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
-          <cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
-          <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
-          <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
-          <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
+            <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
+            <cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
+            <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
+            <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
+            <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
+          </div>
        </div>
      </div>
-      </div>
    </q-card>
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
    <div>
-        <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
+      <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
    </div>
  </q-card>
 </template>
--- a/src/modules/05_placement/components/PersonalList/DialogFooter.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogFooter.vue
--- a/src/modules/05_placement/components/PersonalList/DialogHeader.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogHeader.vue
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useQuasar, QForm } from "quasar";
 import { onMounted, reactive, ref } from "vue";
-import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
--- a/src/modules/05_placement/components/PersonalList/StatCard.vue
+++ b/src/modules/05_placement/components/PersonalList/StatCard.vue
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@ -3,12 +3,12 @@ import { ref, onMounted, watch, reactive } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import Table from "@/modules/05_placement/components/pass/TableView.vue";
-import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
-import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
-import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
+import DialogCard from "@/modules/05_placement/components/PersonalList/TableDetail.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
-import DialogOrgTree from "@/modules/05_placement/components/pass/OrgTree.vue";
+import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTree.vue";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@ -35,6 +35,7 @@ const modalwaitInfo = ref<boolean>(false); //modal add detail
 const userNote = ref<string>("");
 const filter = ref<string>("");
 const Name = ref<string>();
+const rowsAll = ref<any>([]);
 const rows = ref<any>([]);
 const myForm = ref<any>();
 const files = ref<any>(null);
@ -135,11 +136,10 @@ const columns = ref<QTableProps["columns"]>([
 const getTable = async () => {
  showLoader();
  await http
-    .get(config.API.redirectToPage(examIdString))
-    .then((res: any) => {
-      const dataArray: PartialTableName[] = res.data.result;
-      rows.value = [];
-      dataArray.map((data) => {
+    .get(config.API.personalList(examIdString))
+    .then(async (res: any) => {
+      rowsAll.value = [];
+      res.data.result.map((data: any) => {
        const rowData = {
          personalId: data.personalId,
          idCard: data.idCard,
@ -157,28 +157,30 @@ const getTable = async () => {
            data.bmaOfficer == "OFFICER"
              ? "ขรก.กทม. สามัญ"
              : data.bmaOfficer == "EMPLOYEE_PERM"
-              ? "ลูกจ้างประจำ"
-              : data.bmaOfficer == "EMPLOYEE_TEMP"
-              ? "ลูกจ้างชั่วคราว"
-              : data.bmaOfficer == null
-              ? "บุคคลภายนอก"
-              : "-",
+                ? "ลูกจ้างประจำ"
+                : data.bmaOfficer == "EMPLOYEE_TEMP"
+                  ? "ลูกจ้างชั่วคราว"
+                  : data.bmaOfficer == null
+                    ? "บุคคลภายนอก"
+                    : "-",
          statusId: data.statusId,
          statusName:
            data.statusId == "UN-CONTAIN"
              ? "ยังไม่บรรจุ"
              : data.statusId == "PREPARE-CONTAIN"
-              ? "เตรียมบรรจุ"
-              : data.statusId == "CONTAIN"
-              ? "บรรจุแล้ว"
-              : data.statusId == "DISCLAIM"
-              ? "สละสิทธิ์"
-              : "-",
+                ? "เตรียมบรรจุ"
+                : data.statusId == "CONTAIN"
+                  ? "บรรจุแล้ว"
+                  : data.statusId == "DISCLAIM"
+                    ? "สละสิทธิ์"
+                    : "-",
          deferment: data.deferment,
        };

-        rows.value.push(rowData);
+        rowsAll.value.push(rowData);
      });
+
+      rows.value = roleAdmin ? rowsAll.value : rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
    })
    .catch((e) => {
      messageError($q, e);
@ -370,101 +372,74 @@ onMounted(async () => {
  await getTable();
 });

-const expiredAccount = ref<boolean>(false);
-
-watch(expiredAccount, () => {
-  console.log("expiredAccount===>", expiredAccount.value);
+const containStatus = ref<boolean>(false);
+watch(containStatus, () => {
+  // console.log("containStatus===>", containStatus.value);
+  if (containStatus.value) {
+    rows.value = rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
+  } else {
+    rows.value = rowsAll.value.filter((x: any) => x.statusId == 'CONTAIN');
+  }
 });

-const pagination = ref({
-  sortBy: "number",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 </script>

 <template>
  <q-form ref="myForm">
-    <Table
-      :expired-account="expiredAccount"
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="editvisible"
-      v-model:expiredaccountfilter="expiredAccount"
-      :history="true"
-      :boss="true"
-      :saveNoDraft="true"
-      :role-admin="roleAdmin"
-    >
+    <Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
+      :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+      v-model:editvisible="editvisible" v-model:containfilter="containStatus" :history="true" :boss="true"
+      :saveNoDraft="true" :role-admin="roleAdmin">
      <template #columns="props">
        <q-tr :props="props">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props.row.personalId)"
-            class="cursor-pointer"
-          >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
+            class="cursor-pointer">
            <template v-if="col.name === 'position'">
              {{ props.rowIndex + 1 }}
            </template>
-            <template
-              v-else-if="col.name === 'fullName'"
-              class="table_ellipsis"
-            >
+            <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
              <div class="row col-12 text-no-wrap items-center">
-                <img
-                  v-if="props.row.avatar == null"
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                />
+                <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
                <img v-else :src="props.row.avatar" class="col-4 img-info" />
                <div class="col-4">
-                        <div class="text-weight-medium">{{ props.row.name }}</div>
-                    <div class="text-weight-light">{{ props.row.idCard }}</div>
-                  </div>
+                  <div class="text-weight-medium">{{ props.row.name }}</div>
+                  <div class="text-weight-light">{{ props.row.idCard }}</div>
                </div>
-              </template>
-              <template v-else-if="col.name === 'number'">
-                <div class="text-weight-medium">
-                  {{ props.row.number !== null ? props.row.number : "-" }}
-                </div>
-              </template>
+              </div>
+            </template>
+            <template v-else-if="col.name === 'number'">
+              <div class="text-weight-medium">
+                {{ props.row.number !== null ? props.row.number : "-" }}
+              </div>
+            </template>

-              <template v-else-if="col.name === 'organizationName'">
-                <div
-                  v-if="props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                    "
-                >
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{
-                        props.row.orgName !== null
-                        ? props.row.orgName
-                                              : "-"
+            <template v-else-if="col.name === 'organizationName'">
+              <div v-if="props.row.orgName !== null ||
+                props.row.positionPath !== null
+                ">
+                <div class="col-4">
+                  <div class="text-weight-medium">
+                    {{
+                      props.row.orgName !== null
+                      ? props.row.orgName
+                      : "-"
                    }}
                    {{
                      props.row.organizationShortName !== null
-                        ? `(${props.row.organizationShortName})`
-                        : ""
+                      ? `(${props.row.organizationShortName})`
+                      : ""
                    }}
                  </div>
                  <div class="text-weight-light">
                    {{
                      props.row.positionPath !== null
-                        ? props.row.positionPath
-                        : "-"
+                      ? props.row.positionPath
+                      : "-"
                    }}
                    {{
                      props.row.positionNumber !== null
-                        ? `(${props.row.positionNumber})`
-                        : ""
+                      ? `(${props.row.positionNumber})`
+                      : ""
                    }}
                  </div>
                </div>
@ -475,9 +450,7 @@ const pagination = ref({
                </div>
              </div>
            </template>
-            <template
-              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
-            >
+            <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
              <div class="text-weight-medium">
                {{ props.row.reportingDate }}
              </div>
@ -494,116 +467,45 @@ const pagination = ref({
            </template>
          </q-td>
          <q-td auto-width>
-            <q-btn
-              icon="mdi-dots-vertical"
-              size="12px"
-              color="grey-7"
-              flat
-              round
-              dense
-            >
+            <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
              <q-menu transition-show="jump-down" transition-hide="jump-up">
                <q-list dense style="min-width: 100px">
-                  <q-item
-                    v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
-                    clickable
-                    v-close-popup
-                    @click="openAppointModal(props.row.personalId)"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="primary"
-                        size="xs"
-                        name="mdi-bookmark-outline"
-                      />
+                  <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                    @click="openAppointModal(props.row.personalId)">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
                    </q-item-section>
                    <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
                  </q-item>
                  <q-separator />
-                  <q-item
-                    v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'deferment')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-alert-outline"
-                      />
+                  <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                    @click="editDetail(props.row, 'deferment')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
                    </q-item-section>
                    <q-item-section>ขอผ่อนผัน</q-item-section>
                  </q-item>
-                  <q-item
-                    v-else-if="
-                      props.row.deferment === true &&
-                      props.row.statusId != 'DISCLAIM'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'defermentInfo')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-details-outline"
-                      />
+                  <q-item v-else-if="props.row.deferment === true &&
+                    props.row.statusId != 'DISCLAIM'
+                    " clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
                    </q-item-section>
                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
                  </q-item>
                  <q-separator />
-                  <q-item
-                    v-if="
-                      props.row.statusId === 'UN-CONTAIN' ||
-                      props.row.statusId === 'PREPARE-CONTAIN'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'disclaim')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
+                  <q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
+                    props.row.statusId === 'PREPARE-CONTAIN'
+                    " clickable v-close-popup @click="editDetail(props.row, 'disclaim')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
                    </q-item-section>
                    <q-item-section>สละสิทธิ์</q-item-section>
                  </q-item>
-                  <q-item
-                    v-else-if="props.row.statusId === 'DISCLAIM'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'disclaimInfo')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
+                  <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
+                    @click="editDetail(props.row, 'disclaimInfo')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
                    </q-item-section>
                    <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
                  </q-item>
@ -617,57 +519,25 @@ const pagination = ref({
  </q-form>

  <!-- เลือกหน่วยงานที่บรรจุ -->
-  <DialogOrgTree
-    v-model:modal="appointModal"
-    :personalId="personalId"
-    :close="clickCloseModalTree"
-  />
+  <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />

  <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
  <q-form ref="myForm">
-    <DialogCard
-      v-model:Modal="modal"
-      :personal-id="personalId"
-      :close="clickClose"
-      :validate="validateData"
-    />
+    <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
  </q-form>
  <q-dialog v-model="modalDefermentDisclaim" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
+        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${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
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="userNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:model-value="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile === 1"
-              v-model="files"
-              dense
-              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
-              outlined
-              use-chips
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-              multiple
-              @update:model-value="clickEditRow"
-              class="q-py-sm"
-            >
+            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
+              :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
+            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
+              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
+              @update:model-value="clickEditRow" class="q-py-sm">
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
@ -675,11 +545,7 @@ const pagination = ref({
          </div>
        </q-card-section>
        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="modalDisclaim ? saveDisclaim : saveDeferment"
-        />
+        <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
      </q-form>
    </q-card>
  </q-dialog>
@ -688,10 +554,7 @@ const pagination = ref({
  <q-dialog v-model="modalwaitInfo" persistent>
    <q-card style="width: 500px; max-width: 500px">
      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
+        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="row">
@ -701,17 +564,8 @@ const pagination = ref({
          <div v-if="!modalDisclaim" class="row q-pt-md">
            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
            <div class="col-2 q-mt-sm">
-              <q-btn
-                type="a"
-                :href="dataInfo.reliefDoc"
-                color="primary"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-download"
-                target="_blank"
-              />
+              <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
+                target="_blank" />
            </div>
          </div>
        </q-card-section>
--- a/src/modules/05_placement/components/PersonalList/TableDetail.vue
+++ b/src/modules/05_placement/components/PersonalList/TableDetail.vue
@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useQuasar } from "quasar";
-import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@ -28,7 +28,7 @@ const props = defineProps({
 });

 const rows = ref<any[]>([
-  ]);
+]);
 //--------------------(แปลงวันที่เป็นไทย)------------------------------------//
 // const graduationDate = new Date(graduationExample);
 // rows.value[0].graduation = date2Thai(graduationDate, false, false);
@ -190,10 +190,7 @@ const putpersonalForm = async () => {
    <q-card style="max-width: 100%; width: 80%">
      <q-form ref="myForm">
        <div class="row">
-          <DialogHeader
-            :title="`รายละเอียดของ ${personalForm.fullName}`"
-            @click="close"
-          />
+          <DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
        </div>
        <q-separator />

@ -202,12 +199,8 @@ const putpersonalForm = async () => {
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">
                ข้อมูลทั่วไป
-                <span class="check-officer"
-                  ><q-icon
-                    name="mdi-check"
-                    v-if="personalForm.bmaofficer !== null && ''"
-                  />{{ formBmaofficer(personalForm.bmaofficer) }}</span
-                >
+                <span class="check-officer"><q-icon name="mdi-check" v-if="personalForm.bmaofficer !== null && ''" />{{
+                  formBmaofficer(personalForm.bmaofficer) }}</span>
              </div>
              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">
@ -251,18 +244,8 @@ const putpersonalForm = async () => {
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การศึกษา</div>
-              <q-table
-                ref="table"
-                :rows="rows"
-                :columns="columns"
-                flat
-                bordered
-                class="custom-header-table"
-                virtual-scroll
-                :virtual-scroll-sticky-size-start="48"
-                dense
-                hide-bottom
-              >
+              <q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
+                virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
              </q-table>
            </q-card>
          </div>
@ -339,21 +322,9 @@ const putpersonalForm = async () => {
              <div class="col-12 row items-center q-pa-sm header-text">
                การคัดกรองคุณสมบัติ
              </div>
-              <div
-                v-for="(item, index) of personalForm.isProperty"
-                :key="index"
-                class="q-pa-sm"
-              >
-                <q-checkbox
-                  size="xs"
-                  v-model="item.value"
-                  :val="item.value"
-                  :label="item.name"
-                  keep-color
-                  color="teal"
-                  :rules="[isRequired]"
-                  class="checkbox-group"
-                />
+              <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
+                <q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
+                  :rules="[isRequired]" class="checkbox-group" />
                <q-separator />
              </div>
            </q-card>
@ -361,12 +332,7 @@ const putpersonalForm = async () => {
        </div>
        <q-separator />
        <div>
-          <DialogFooter
-            @click="ClickSave"
-            :model="props.Modal"
-            :editvisible="save"
-            :validate="validateData"
-          />
+          <DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
        </div>
      </q-form>
    </q-card>
@ -410,6 +376,7 @@ const putpersonalForm = async () => {
  line-height: 150%;
  color: #818181;
 }
+
 .sub-text {
  font-weight: 400;
  font-size: 16px;
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@ -1,44 +1,44 @@
 <template>
  <div class="q-px-md q-pb-md">
    <div class="col-12 row q-py-sm">
-      <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
-        :model-value="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ" @update:model-value="updateExpiredAccount" />
+            <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+                                      :model-value="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />

-      <q-space />
-      <div class="items-center" style="display: flex">
-        <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" />
-          </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" />
-      </div>
-    </div>
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <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" />
+                    </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" />
+                </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" v-model:pagination="pagination">
-      <template v-slot:pagination="scope">
-        <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-          boundary-links direction-links></q-pagination>
-      </template>
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width v-if="history == true" />
-        </q-tr>
-      </template>
-      <template #body="props">
-        <slot v-bind="props" name="columns"></slot>
-      </template>
-    </q-table>
-  </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" v-model:pagination="pagination">
+                <template v-slot:pagination="scope">
+                  <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+                    boundary-links direction-links></q-pagination>
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                    <q-th auto-width v-if="history == true" />
+                  </q-tr>
+                </template>
+                <template #body="props">
+                  <slot v-bind="props" name="columns"></slot>
+                </template>
+              </q-table>
+            </div>
 </template>

 <script setup lang="ts">
@ -133,12 +133,12 @@ const props = defineProps({
    type: Function,
    default: () => console.log("not function"),
  },
-  expiredAccount: Boolean,
+  containStatus: Boolean,
  roleAdmin: Boolean
 });
 const pagination = ref({
  sortBy: "number",
-  descending: true,
+  descending: false,
  page: 1,
  rowsPerPage: 10,
 });
@ -158,7 +158,7 @@ const emit = defineEmits([
  "update:editvisible",
  "update:titleText",
  "update:inputvisibleFilter",
-  "update:expiredaccountfilter"
+  "update:containfilter"
 ]);

 const updateInput = (value: any) => {
@ -167,23 +167,9 @@ const updateInput = (value: any) => {
 const updateVisible = (value: any) => {
  emit("update:inputvisible", value);
 };
-const updateVisibleFilter = (value: any) => {
-  emit("update:inputvisibleFilter", value);
-};

-const updateExpiredAccount = (value: any) => {
-  emit("update:expiredaccountfilter", value);
-};
-
-const checkSave = () => {
-  props.validate();
-  props.save();
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate().then((success) => {
-  //       if (success) {
-  //       }
-  //     });
-  //   }
+const updateContain = (value: any) => {
+  emit("update:containfilter", value);
 };

 const resetFilter = () => {
--- a/src/modules/05_placement/components/probation/AddWork.vue
+++ b/src/modules/05_placement/components/probation/AddWork.vue
@ -839,10 +839,11 @@ s											borderless
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-const router = useRouter();
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QForm } from "quasar";
+// import type { QForm } from "quasar";
+
+const router = useRouter();

 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
--- a/src/modules/05_placement/components/probation/form.vue
+++ b/src/modules/05_placement/components/probation/form.vue
@ -910,6 +910,8 @@ const radio_2 = ref<any>(null);
 const radio_3 = ref<any>(null);
 const radio_4 = ref<any>(null);
 const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const text2_1 = ref<string>('');
+const text2_2 = ref<string>('');

 const onSubmit = () => {
  $q.notify({
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@ -5,7 +5,7 @@
 const PlacementMain = () =>
  import("@/modules/05_placement/components/Main.vue");
 const PlacementDetail = () =>
-  import("@/modules/05_placement/components/pass/Detail.vue");
+  import("@/modules/05_placement/components/PersonalList/Detail.vue");
 const PlacementPersonalDetail = () =>
  import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
 const addOrderPlacement = () =>
@ -29,8 +29,8 @@ const probationDetail = () =>
 const probationForm = () =>
  import("@/modules/05_placement/components/probation/form.vue");

-  const probationWorkAdd = () =>
-import("@/modules/05_placement/components/probation/AddWork.vue");
+const probationWorkAdd = () =>
+  import("@/modules/05_placement/components/probation/AddWork.vue");
 export default [
  {
    path: "/placement",
@ -43,7 +43,7 @@ export default [
    },
  },
  {
-    path: "/placement/pass/:examId",
+    path: "/placement/personal-list/:examId",
    name: "placementDetail",
    component: PlacementDetail,
    meta: {
@ -53,7 +53,7 @@ export default [
    },
  },
  {
-    path: "/placement/detail/:personalId",
+    path: "/placement/personal-detail/:personalId",
    name: "PlacementPersonalDetail",
    component: PlacementPersonalDetail,
    meta: {
@ -130,7 +130,7 @@ export default [
      Auth: true,
      Key: [6.3],
      Role: "placement",
-    }
+    },
  },
  {
    path: "/probation/work/:id",
@ -141,5 +141,5 @@ export default [
      Key: [6.3],
      Role: "placement",
    },
-  }
+  },
 ];
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@ -127,7 +127,7 @@
                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
                    </q-item>
                    <q-separator />
-                    <q-item clickable v-close-popup @click="clickDelete">
+                        <q-item clickable v-close-popup @click="clickDelete('test')">
                      <q-item-section
                        style="min-width: 0px"
                        avatar
@ -168,6 +168,7 @@ import type { QInput, QForm, QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";

 const props = defineProps({
  next: {