From 3ec0614e398984edf659639e88969e776580f4ac Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 17 Oct 2024 15:36:48 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=89=E0=B8=87=E0=B8=84=E0=B8=93=E0=B8=B0=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97?=
 =?UTF-8?q?=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |   3 +
 .../detail/PersonalInformation/01_Profile.vue |  17 +-
 .../probation/FormAppoint/FormAppoint.vue     | 630 ++++++++++++++++++
 .../components/probation/MainAppoint.vue      | 299 +++++++++
 .../components/probation/MainProbation.vue    |  98 ++-
 .../components/probation/MainTabs.vue         |  48 ++
 .../05_placement/interface/request/Main.ts    |  49 +-
 src/modules/05_placement/router.ts            |  34 +-
 src/modules/05_placement/store.ts             |   2 +
 9 files changed, 1150 insertions(+), 30 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
 create mode 100644 src/modules/05_placement/components/probation/MainAppoint.vue
 create mode 100644 src/modules/05_placement/components/probation/MainTabs.vue

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index a4b881bf2..bfcc9f546 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -4,6 +4,7 @@ const personal = `${env.API_PROBATION_URI}/personal`;
 const calculate = `${env.API_PROBATION_URI}/calculate`;
 const finish = `${env.API_PROBATION_URI}/assign`;
 const evaluate = `${env.API_PROBATION_URI}`;
+const appointMain = `${env.API_PROBATION_URI}/appoint`;
 const orgProfile = `${env.API_URI}/org`;
 
 export default {
@@ -83,4 +84,6 @@ export default {
   orgProfilePlacement: (id: string) => `${orgProfile}/profile/placement/${id}`,
   orgProfileStatus: (profileId: string) =>
     `${orgProfile}/profile/probation/${profileId}`,
+
+  appointMain
 };
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 467d5cb11..73c137d78 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -56,7 +56,6 @@ const empType = ref<string>(
     : "-employee"
 );
 
-const emailVerify = ref<boolean | null>(null);
 const id = ref<string>("");
 const modal = ref<boolean>(false); // แสดงฟอร์มแก้ไขประวัติส่วนตัว
 const informaData = ref<ResponseObject>(); // ข้อมูลส่วนคัว
@@ -79,7 +78,6 @@ const dataLabel = {
   religion: "ศาสนา",
   bloodGroup: "หมู่เลือด",
   phone: "เบอร์โทร",
-  email: "อีเมล",
   prefix: "คำนำหน้าชื่อ",
   rank: "ยศ",
   firstName: "ชื่อ",
@@ -292,9 +290,6 @@ async function getData() {
     .get(config.API.registryNewByProfileId(profileId.value, empType.value))
     .then((res) => {
       informaData.value = res.data.result;
-      emailVerify.value = res.data.result.email
-        ? res.data.result.emailVerify
-        : null;
       id.value = res.data.result.id;
 
       if (res.data.result.birthDate) {
@@ -516,17 +511,10 @@ onMounted(() => {
       <div class="col-md-5 col-12 row">
         <div class="col-5 col text-grey-6 text-weight-medium">
           <div
-            v-for="label in Object.keys(dataLabel).slice(6, 12)"
+            v-for="label in Object.keys(dataLabel).slice(6, 11)"
             class="q-py-xs"
           >
             {{ dataLabel[label as keyof typeof dataLabel] }}
-            <q-icon
-              v-if="label == 'email' && emailVerify == false"
-              name="mdi-alert-box"
-              size="sm"
-              color="warning"
-              ><q-tooltip>รอยืนยันอีเมล</q-tooltip></q-icon
-            >
           </div>
         </div>
         <!-- data -->
@@ -546,9 +534,6 @@ onMounted(() => {
           <div class="q-py-xs">
             {{ informaData.phone ? informaData.phone : "-" }}
           </div>
-          <div class="q-py-xs">
-            {{ informaData.email ? informaData.email : "-" }}
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue b/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
new file mode 100644
index 000000000..a3ad0be0b
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
@@ -0,0 +1,630 @@
+<script setup lang="ts">
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  FormAppointData,
+  OpfillterTypeSt,
+  MemBerType,
+  PersonsAppointData,
+} from "@/modules/05_placement/interface/request/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+} = mixin;
+const checkRoutePermisson = ref<boolean>(
+  route.name == "probationAppointDetail"
+);
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>("");
+const isSave = ref<boolean>(false);
+
+const topic = ref<string>("");
+const status = ref<string>("");
+
+const rows = ref<PersonsAppointData[]>([]);
+const modal = ref<boolean>(false);
+const member = ref<string>("");
+const selected = ref<MemBerType[]>([]);
+
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const optionsTypeMain = ref<OpfillterTypeSt[]>([]);
+const optionsType = ref<OpfillterTypeSt[]>([
+  { id: "chairman", value: "ประธาน" },
+  { id: "committee", value: "กรรมการ" },
+]);
+
+const commanderRows = ref<MemBerType[]>([]);
+const chairmanRows = ref<MemBerType[]>([]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "role",
+  "name",
+  "position",
+  "positionType",
+  "positionLevel",
+]);
+const visibleColumnsMember = ref<string[]>([
+  "no",
+  "name",
+  "position",
+  "posLevel",
+  "posType",
+]);
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "role",
+    align: "left",
+    label: "บทบาท",
+    sortable: true,
+    field: "role",
+    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",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsMember = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    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",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** เพิ่ม  ประธาน/กรรมการ */
+function onAdd() {
+  modal.value = true;
+}
+
+function close() {
+  modal.value = false;
+  member.value = "";
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function onAddPerson() {
+  changeFormData();
+  const data = selected.value.map((item: MemBerType) => ({
+    profileId: item.id,
+    name: `${item.prefix}${item.firstName} ${item.lastName}`,
+    citizenId: item.citizenId,
+    prefix: item.prefix,
+    firstName: item.firstName,
+    lastName: item.lastName,
+    position: item.position,
+    positionType: item.posType,
+    positionLevel: item.posLevel,
+    role: member.value == "chairman" ? "chairman" : "committee",
+  }));
+  rows.value = [...rows.value, ...data];
+  rows.value.sort((a, b) => (a.role === "chairman" ? -1 : 1));
+  close();
+}
+
+function getPerson() {
+  showLoader();
+  http
+    .get(config.API.orgProfilePlacement(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      commanderRows.value = data.commander.map((item: any) => ({
+        id: item.id,
+        prefix: item.prefix,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        citizenId: item.citizenId,
+        posLevel: item.posLevel,
+        posType: item.posType,
+        position: item.position,
+        isDirector: item.isDirector,
+      }));
+
+      chairmanRows.value = data.chairman.map((item: any) => ({
+        id: item.id,
+        prefix: item.prefix,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        citizenId: item.citizenId,
+        posLevel: item.posLevel,
+        posType: item.posType,
+        position: item.position,
+        isDirector: item.isDirector,
+      }));
+
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+function onChangeMember() {
+  selected.value = [];
+
+  commanderRows.value = commanderRows.value.filter(
+    (item: MemBerType) =>
+      !rows.value.some((i: PersonsAppointData) => i.profileId == item.id)
+  );
+
+  chairmanRows.value = chairmanRows.value.filter(
+    (item: MemBerType) =>
+      !rows.value.some((i: PersonsAppointData) => i.profileId == item.id)
+  );
+}
+
+function onDelete(id: string) {
+  changeFormData();
+  rows.value = rows.value.filter((row) => row.profileId !== id);
+}
+
+function convertText(val: string) {
+  switch (val) {
+    case "chairman":
+      return "ประธาน";
+    case "committee":
+      return "กรรมการ";
+    default:
+      "-";
+  }
+}
+
+// ตัวแปรสำหรับเก็บค่าก่อนหน้า
+const topicCheck = ref<string>(topic.value);
+const rowsCheck = ref<PersonsAppointData[]>(rows.value);
+function changeFormData() {
+  if (topic.value !== topicCheck.value || rows.value !== rowsCheck.value) {
+    isSave.value = true;
+  } else {
+    isSave.value = false;
+  }
+
+  topicCheck.value = topic.value;
+  rowsCheck.value = rows.value;
+}
+
+function onSubmit() {
+  const body = {
+    topic: topic.value,
+    persons: rows.value.map(
+      ({ prefix, firstName, lastName, citizenId, ...newData }) => newData
+    ),
+  };
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.appointMain + `/${id.value}`, body)
+      .then(async (res) => {
+        await getData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        isSave.value = false;
+        hideLoader();
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
+}
+
+/** ดึงข้อมูลหลัก */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.appointMain + `/${id.value}`)
+    .then(async (res) => {
+      const data = await res.data.data;
+      topic.value = data.topic;
+      status.value = data.status;
+      profileId.value = data.profileId;
+      rows.value = data.directors.map((item: any) => ({
+        profileId: item.profileId,
+        name: item.name,
+        citizenId: item.citizenId,
+        prefix: item.prefix,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        position: item.position,
+        positionType: item.positionType,
+        positionLevel: item.positionLevel,
+        role: item.role,
+      }));
+
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      optionsTypeMain.value = optionsType.value;
+      const optionData = optionsType.value;
+      optionsTypeMain.value = optionData.filter(
+        (item: OpfillterTypeSt) =>
+          !rows.value.some(
+            (i) => i.role === "chairman" && item.id === "chairman"
+          )
+      );
+      getPerson();
+    }
+  }
+);
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    {{
+      checkRoutePermisson ? "รายละเอียด" : ""
+    }}แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+  </div>
+  <q-card flat>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <div class="row q-col-gutter-sm q-pa-sm">
+        <div v-if="isSave" class="col-12 q-pt-none">
+          <q-banner
+            inline-actions
+            bordered
+            rounded
+            dense
+            class="bg-red-1 text-red border-orange"
+          >
+            <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+            ยังไม่ได้บันทึกข้อมูล
+          </q-banner>
+        </div>
+        <div class="col-12">
+          <q-input
+            dense
+            outlined
+            label="หัวข้อ"
+            :readonly="checkRoutePermisson"
+            v-model="topic"
+            class="inputgreen"
+            hide-bottom-space
+            @update:model-value="changeFormData"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อ'}`,]"
+          ></q-input>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div
+              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+            >
+              ประธาน/กรรมการ
+              <q-btn
+                v-if="!checkRoutePermisson"
+                size="12px"
+                flat
+                round
+                dense
+                color="add"
+                class="q-ml-sm"
+                @click="onAdd"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มประธาน/กรรมการ</q-tooltip>
+              </q-btn>
+            </div>
+            <q-separator />
+            <div class="q-pa-sm">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                row-key="profileId"
+                flat
+                :visible-columns="visibleColumns"
+                bordered
+                :paging="true"
+                dense
+                v-model:pagination="pagination"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props">
+                    <q-td auto-width>
+                      <q-btn
+                        v-if="!checkRoutePermisson"
+                        flat
+                        round
+                        dense
+                        icon="delete"
+                        color="red"
+                        @click="onDelete(props.row.profileId)"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+                      <div v-else-if="col.name == 'role'">
+                        {{ props.row.role ? convertText(props.row.role) : "-" }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </div>
+      <q-separator v-if="!checkRoutePermisson" />
+      <q-card-actions align="right" v-if="!checkRoutePermisson">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onAddPerson">
+        <DialogHeader tittle="เพิ่มประธาน/กรรมการ" :close="close" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-select
+                v-model="member"
+                outlined
+                dense
+                label="ประธาน/กรรมการ"
+                :options="optionsTypeMain"
+                option-value="id"
+                option-label="value"
+                map-options
+                emit-value
+                @update:model-value="onChangeMember()"
+              >
+              </q-select>
+            </div>
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columnsMember"
+                :rows="
+                  member == 'committee'
+                    ? commanderRows
+                    : member == 'chairman'
+                    ? chairmanRows
+                    : []
+                "
+                row-key="id"
+                flat
+                :visible-columns="visibleColumnsMember"
+                bordered
+                :paging="true"
+                dense
+                :selection="member == 'chairman' ? 'single' : 'multiple'"
+                v-model:selected="selected"
+                :rows-per-page-options="[10, 25, 50, 100]"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :disable="!member"
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props">
+                    <td class="text-center">
+                      <q-checkbox
+                        keep-color
+                        :disable="!member"
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+                      <div v-else-if="col.name == 'name'">
+                        {{
+                          props.row.firstName
+                            ? `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
+                            : "-"
+                        }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            label="เพิ่มรายชื่อประธาน/กรรมการ"
+            color="secondary"
+            type="submit"
+            :disable="selected.length == 0"
+            ><q-tooltip>เพิ่มรายชื่อประธาน/กรรมการ</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/05_placement/components/probation/MainAppoint.vue b/src/modules/05_placement/components/probation/MainAppoint.vue
new file mode 100644
index 000000000..03ceb932e
--- /dev/null
+++ b/src/modules/05_placement/components/probation/MainAppoint.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+
+import type { AppointMainRows } from "@/modules/05_placement/interface/request/Main";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { dialogRemove, showLoader, hideLoader, messageError, success } = mixin;
+const router = useRouter();
+
+const rows = ref<AppointMainRows[]>([]);
+const filterKeyword = ref<string>("");
+
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>(["no", "topic", "commandNo", "status"]);
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อ",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    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",
+  },
+]);
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+/** ดึงข้อมูลหลัก */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.appointMain)
+    .then(async (res) => {
+      const data = await res.data.data;
+      rows.value = data;
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+/** reset ฟิลเตอร์ */
+function resetFilter() {
+  filterKeyword.value = "";
+}
+
+/**
+ * เปิด หน้าราลละเอียด
+ * @param type แยก (false = รายละเอียด)/(true = แก้ไข)
+ */
+function onNextPage(id: string, type: boolean) {
+  router.push(`/probation${type ? "" : "-detail"}/assign/${id}`);
+}
+
+/** ลบข้อมูล
+ * @param id id row
+ */
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.appointMain + `/${id}`)
+      .then(async (res) => {
+        await getData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
+}
+
+/** แปลง EN to THAI */
+function convertText(val: string) {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "REPORT":
+      return "ส่งไปเเต่งตั้ง";
+    case "DONE":
+      return "เสร็จสิ้น";
+    default:
+      "-";
+  }
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getData();
+  }
+);
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <q-card flat>
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-gutter-x-sm">
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <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>
+
+          <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="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+      </div>
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          :visible-columns="visibleColumns"
+          bordered
+          :paging="true"
+          dense
+          v-model:pagination="pagination"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @update:pagination="updatePagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="onNextPage(props.row.id, false)"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    props.row.status == 'PENDING' &&
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="onNextPage(props.row.id, true)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    props.row.status == 'PENDING' &&
+                    checkPermission($route)?.attrIsDelete
+                  "
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="delete"
+                  @click="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{
+                    (pagination.page - 1) * pagination.rowsPerPage +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div v-else-if="col.name == 'status'">
+                  {{ props.row.status ? convertText(props.row.status) : "-" }}
+                </div>
+
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            ทั้งหมด {{ total }} รายการ
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="Number(totalList)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="getData"
+            ></q-pagination>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 1cb71ba72..44f30a717 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import router from "@/router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
@@ -22,6 +22,8 @@ import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder
 const $q = useQuasar(); //ใช้ noti quasar
 const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
+const route = useRoute();
+const router = useRouter();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
@@ -44,6 +46,12 @@ const Opfillter2 = ref<OpfillterTypeSt[]>([]);
 const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
 const maxPage = ref<number>(1);
 
+const modalAdd = ref<boolean>(false);
+const personId = ref<string>(""); //เก็บ id คน ตาม row
+const topic = ref<string>(
+  "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
+);
+
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -299,7 +307,7 @@ function clickAdd(data: any) {
     lastName: data.lastName,
     position: data.position,
     idcard: data.idcard,
-    order_number: data.refCommandNo ? data.refCommandNo:'',
+    order_number: data.refCommandNo ? data.refCommandNo : "",
     posLevelName: data.posLevelName,
     posTypeName: data.posTypeName,
     posNo: data.posNo,
@@ -324,7 +332,7 @@ function clickAdd(data: any) {
         .then(async () => {
           await http
             .get(config.API.orgProfileStatus(data.id))
-            .then(async(res) => {
+            .then(async (res) => {
               await getpersonalList();
               success($q, "เพิ่มข้อมูลสำเร็จ");
               clickClose();
@@ -397,6 +405,43 @@ function onCommand() {
   modalCommand.value = true;
 }
 
+function onSubmitAdd() {
+  dialogConfirm($q, () => {
+    const body = {
+      profileId: personId.value,
+      topic: topic.value,
+    };
+    showLoader();
+    http
+      .post(config.API.appointMain, body)
+      .then((res) => {
+        if (res) {
+          closeAdd();
+          hideLoader();
+          router.push(`/probation/assign/${res.data.data}`);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
+}
+
+/** แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ */
+function onAdd(id: string) {
+  modalAdd.value = true;
+  personId.value = id;
+}
+
+/** ปิด popup แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ */
+function closeAdd() {
+  modalAdd.value = false;
+  personId.value = "";
+  topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
+}
+
 watch([() => formProbation.page, () => formProbation.pageSize], () => {
   onclickAddProbation();
 });
@@ -415,11 +460,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
-  </div>
-
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+  <q-card flat>
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div class="row">
@@ -561,6 +602,19 @@ onMounted(async () => {
                 >
                   <q-tooltip>รายละเอียด</q-tooltip>
                 </q-btn>
+
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsCreate"
+                  @click="onAdd(props.row.personal_id)"
+                  flat
+                  round
+                  color="green"
+                  icon="mdi-check-decagram"
+                >
+                  <q-tooltip
+                    >แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ</q-tooltip
+                  >
+                </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
@@ -782,5 +836,33 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
+        <DialogHeader tittle="ฟอร์มเพิ่ม" :close="closeAdd" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                label="หัวข้อ"
+                v-model="topic"
+                class="inputgreen"
+              ></q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
   <DialogOrder v-model:modal="modalCommand" />
 </template>
diff --git a/src/modules/05_placement/components/probation/MainTabs.vue b/src/modules/05_placement/components/probation/MainTabs.vue
new file mode 100644
index 000000000..9d8419fe6
--- /dev/null
+++ b/src/modules/05_placement/components/probation/MainTabs.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+
+import type { ItemTabs } from "@/modules/05_placement/interface/request/Main";
+
+import AppointPage from "@/modules/05_placement/components/probation/MainAppoint.vue";
+import ProbationPage from "@/modules/05_placement/components/probation/MainProbation.vue";
+
+const store = usePlacementDataStore();
+
+const tabsManu = ref<ItemTabs[]>([
+  { label: "รายการผู้ทดลองปฏิบัติหน้าที่ราชการ", name: "probation" },
+  { label: "แต่งตั้งคณะกรรมการฯ", name: "appoint" },
+]);
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
+  </div>
+
+  <q-card flat bordered class="col-12">
+    <q-tabs
+      v-model="store.tabsMain"
+      inline-label
+      align="left"
+      indicator-color="primary"
+      active-color="primary bg-teal-1"
+    >
+      <q-tab
+        v-for="(tab, index) in tabsManu"
+        :key="index"
+        :name="tab.name"
+        :label="tab.label"
+      />
+    </q-tabs>
+    <q-separator />
+    <q-tab-panels v-model="store.tabsMain" animated>
+      <q-tab-panel name="probation" class="q-pa-sm">
+        <ProbationPage />
+      </q-tab-panel>
+      <q-tab-panel name="appoint">
+        <AppointPage />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index 40bbc1b88..44c60c3f1 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -12,6 +12,11 @@ interface FormPlacementMainData {
   isExpired?: boolean;
 }
 
+interface ItemTabs {
+  label: string;
+  name: string;
+}
+
 interface FormOrderPlacementMainData {
   Order: string;
   OrderNum: string;
@@ -85,6 +90,43 @@ interface CriteriaType {
   criteriaType: string;
   criteriaValue: string;
 }
+
+interface AppointMainRows {
+  id: string;
+  topic: string;
+  commandNo: string;
+  status: string;
+}
+
+interface FormAppointData {
+  topic: string;
+  persons: PersonsAppointData[];
+}
+
+interface PersonsAppointData {
+  profileId: string;
+  name?: string;
+  citizenId: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  positionType: string;
+  positionLevel: string;
+  role?: string;
+}
+
+interface MemBerType {
+  id: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posLevel: string;
+  posType: string;
+  isDirector?: boolean;
+}
 export type {
   FormPlacementMainData,
   FormOrderPlacementMainData,
@@ -95,5 +137,10 @@ export type {
   mapData,
   OpfillterType,
   CriteriaType,
-  OpfillterTypeSt
+  OpfillterTypeSt,
+  ItemTabs,
+  AppointMainRows,
+  FormAppointData,
+  MemBerType,
+  PersonsAppointData
 };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 9cae2c72c..73c3667dd 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -47,17 +47,18 @@ const AppointmentDetail = () =>
 const AppointEmployeeMain = () =>
   import("@/modules/05_placement/views/07_appointEmployeeMain.vue");
 const AppointEmployeeDetail = () =>
-  import("@/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue");
+  import(
+    "@/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue"
+  );
 
 //อื่นๆ
-const OtherMain = () =>
-  import("@/modules/05_placement/views/08_otherMain.vue");
+const OtherMain = () => import("@/modules/05_placement/views/08_otherMain.vue");
 const OthertDetail = () =>
   import("@/modules/05_placement/components/Other/OtherDetail.vue");
 
 // ระบบทดลองงาน
 const mainProbation = () =>
-  import("@/modules/05_placement/components/probation/MainProbation.vue");
+  import("@/modules/05_placement/components/probation/MainTabs.vue");
 const probationDetail = () =>
   import("@/modules/05_placement/components/probation/ProbationDetail.vue");
 const probationFormEvaluation = () =>
@@ -84,7 +85,10 @@ const FormSaveResultAddCommander = () =>
   import(
     "./components/probation/FormEvaluation/FormSaveResultAddCommander.vue"
   );
-
+const FormAppointPage = () =>
+  import("./components/probation/FormAppoint/FormAppoint.vue");
+const FormAppointPageDetail = () =>
+  import("./components/probation/FormAppoint/FormAppoint.vue");
 export default [
   {
     path: "/placement",
@@ -388,4 +392,24 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/probation-detail/assign/:id",
+    name: "probationAppointDetail",
+    component: FormAppointPageDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_PROBATION",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/probation/assign/:id",
+    name: "probationAppoint",
+    component: FormAppointPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_PROBATION",
+      Role: "STAFF",
+    },
+  },
 ];
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index b4b7cc84c..8b63d0a25 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -88,6 +88,7 @@ export const useProfileDataStore = defineStore("profilePlacenent", () => {
 });
 export const usePlacementDataStore = defineStore("placement", () => {
   const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+  const tabsMain = ref<string>("probation");
   const { hideLoader } = mixin;
   interface placement {
     mappingPosition: { columns: String[] };
@@ -208,6 +209,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
     DataMain,
     DataUpdateMain,
     checkLoad,
+    tabsMain
   };
 });
 export const useOrderPlacementDataStore = defineStore("placementOrder", () => {