diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
index 13f0e362d..455b700c0 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
@@ -2,20 +2,8 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
-import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
-import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
-import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
-import Step3 from "@/modules/12_evaluatePersonal/components/Detail/step/step3.vue";
-import Step4 from "@/modules/12_evaluatePersonal/components/Detail/step/step4.vue";
-import Step5 from "@/modules/12_evaluatePersonal/components/Detail/step/step5.vue";
-import Step6 from "@/modules/12_evaluatePersonal/components/Detail/step/step6.vue";
-import Step7 from "@/modules/12_evaluatePersonal/components/Detail/step/step7.vue";
-import Step8 from "@/modules/12_evaluatePersonal/components/Detail/step/step8.vue";
-import Step9 from "@/modules/12_evaluatePersonal/components/Detail/step/step9.vue";
-
-import ViewStep1 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue";
-import ViewStep3 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue";
-import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue";
+import CardDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue";
+import CardMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue";
 
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import { useCounterMixin } from "@/stores/mixin";
@@ -26,31 +14,18 @@ const { dialogConfirm } = mixin;
 
 const $q = useQuasar();
 
-function onCilckNextStep() {
-  store.step < 9 &&
-    dialogConfirm($q, () => {
-      store.step++;
-    });
-}
-
-function onCilckprPeviousStep() {
-  store.step > 1 &&
-    dialogConfirm($q, () => {
-      store.step--;
-    });
-}
-
-onMounted(() => {
-  store.step = 1;
-});
+// onMounted(() => {
+//   store.step = 1;
+// });
 </script>
 
 <template>
   <div class="row col-12">
     <div class="toptitle">กรรมการและการประชุม</div>
 
-    <div class="row col-12">
-      <q-card> xx </q-card>
+    <div class="row col-12 q-gutter-md">
+      <CardDirector />
+      <CardMeet />
     </div>
   </div>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
new file mode 100644
index 000000000..40f0b69fe
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type { Director } from "@/modules/11_discipline/interface/request/disciplinary";
+import type {
+  responseType,
+  directorType,
+} from "@/modules/11_discipline/interface/index/Main";
+
+import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";
+
+/** import store*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError } = mixin;
+
+const columns = 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: "duty",
+    align: "left",
+    label: "หน้าที่",
+    sortable: true,
+    field: "duty",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "email",
+    align: "left",
+    label: "อีเมล",
+    sortable: true,
+    field: "email",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "phone",
+    align: "left",
+    label: "เบอร์โทรศัพท์",
+    sortable: true,
+    field: "phone",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<Director[]>([]);
+
+const modalAddDirector = ref<boolean>(false);
+const filter = ref<string>("");
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+const maxPage = ref<number>(1);
+const listDirector = ref<any>([]);
+
+async function onClickAdd() {
+  modalAddDirector.value = true;
+}
+
+function onClickClose() {
+  modalAddDirector.value = false;
+}
+
+/** function เรียกรายชื่อกรรมการ*/
+async function fetchDListDirector() {
+  // showLoader();
+  // await http
+  //   .get(config.API.directorList(page.value, rowsPerPage.value, filter.value))
+  //   .then((res) => {
+  //     maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+  //     const data = res.data.result.data;
+  //     let datalistDirector: responseType[] = data.map((e: directorType) => ({
+  //       id: e.id,
+  //       directorId: e.directorId,
+  //       name: `${e.prefix}${e.firstName} ${e.lastName}`,
+  //       prefix: e.prefix,
+  //       firstName: e.firstName,
+  //       lastName: e.lastName,
+  //       position: e.position,
+  //       email: e.email,
+  //       phone: e.phone,
+  //       total: e.total,
+  //       duty: e.duty,
+  //     }));
+  //     // /** หารานชื่อกรรมการที่ไม่ซ้ำ*/
+  //     listDirector.value = datalistDirector.filter(
+  //       (i) => !rows.value.some((e) => e.directorId === i.id)
+  //     );
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+/**
+ * function อัดเดท Paging กรรมการ
+ * @param rpp ต่อหน้า
+ * @param p หน้า
+ */
+async function updatePaging(rpp: number, p: number) {
+  page.value = p;
+  rowsPerPage.value = rpp;
+}
+
+/**
+ * function return รายชื่อกรรมการที่เลือก
+ * @param data รายชื่อกรรมการที่เลือก
+ */
+function returnDirector(data: any) {
+  const dataList = data.map((item: any) => item.id);
+  rows.value = data;
+  onClickClose();
+}
+</script>
+
+<template>
+  <q-card bordered class="row col-12" 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
+        size="12px"
+        flat
+        round
+        dense
+        color="add"
+        class="q-ml-sm"
+        icon="mdi-plus"
+        @click="onClickAdd"
+      >
+        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12 q-pa-sm row">
+      <d-table
+        ref="table"
+        flat
+        bordered
+        dense
+        class="col-12"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :paging="true"
+      >
+        <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-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogDirector
+    v-model:Modal="modalAddDirector"
+    :clickClose="onClickClose"
+    :rows2="listDirector"
+    v-model:filterKeyword2="filter"
+    :get-list="fetchDListDirector"
+    :rowsPerPage="rowsPerPage"
+    :page="page"
+    :maxPage="maxPage"
+    :selected-row="rows"
+    @update:pagination="updatePaging"
+    @returnDirector="returnDirector"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
new file mode 100644
index 000000000..7f55144bc
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+
+import DialogMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue";
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateMeeting",
+    align: "left",
+    label: "วันเวลาในการประชุม",
+    sortable: true,
+    field: "dateMeeting",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "results",
+    align: "left",
+    label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
+    sortable: true,
+    field: "results",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "timePeriod",
+    align: "left",
+    label: "ระยะเวลาในการแก้ไขผลงาน",
+    sortable: true,
+    field: "timePeriod",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any[]>([]);
+
+const modalAdd = ref<boolean>(false);
+const filter = ref<string>("");
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+const maxPage = ref<number>(1);
+const listMeet = ref<any>([]);
+
+function onClickAdd() {
+  modalAdd.value = true;
+}
+
+function onClickClose() {
+  modalAdd.value = false;
+}
+
+async function fetchListMeet() {}
+
+/**
+ * function อัดเดท Paging กรรมการ
+ * @param rpp ต่อหน้า
+ * @param p หน้า
+ */
+async function updatePaging(rpp: number, p: number) {
+  page.value = p;
+  rowsPerPage.value = rpp;
+}
+
+/**
+ * function return รายชื่อกรรมการที่เลือก
+ * @param data รายชื่อกรรมการที่เลือก
+ */
+function returnData(data: any) {
+  const dataList = data.map((item: any) => item.id);
+  rows.value = data;
+  onClickClose();
+}
+</script>
+<template>
+  <q-card bordered class="row col-12" 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
+        size="12px"
+        flat
+        round
+        dense
+        color="add"
+        class="q-ml-sm"
+        icon="mdi-plus"
+        @click="onClickAdd"
+      >
+        <q-tooltip>เพิ่มการประชุม </q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-xs-12 q-pa-sm row">
+      <d-table
+        ref="table"
+        flat
+        bordered
+        dense
+        class="col-12"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :paging="true"
+      >
+        <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-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogMeet
+    v-model:Modal="modalAdd"
+    :clickClose="onClickClose"
+    :rows2="listMeet"
+    v-model:filterKeyword2="filter"
+    :get-list="fetchListMeet"
+    :rowsPerPage="rowsPerPage"
+    :page="page"
+    :maxPage="maxPage"
+    :selected-row="rows"
+    @update:pagination="updatePaging"
+    @returnDirector="returnData"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
new file mode 100644
index 000000000..8580dbf48
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { directorType } from "@/modules/11_discipline/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const selected = ref<directorType[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+const currentPage = ref<number>(1);
+/** ค้นหาคอลัม */
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "dateMeeting",
+  "results",
+  "timePeriod",
+  "email",
+  "phone",
+  "role",
+]);
+
+/**ข้อมูลหัว ตาราง*/
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateMeeting",
+    align: "left",
+    label: "วันเวลาในการประชุม",
+    sortable: true,
+    field: "dateMeeting",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "results",
+    align: "left",
+    label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
+    sortable: true,
+    field: "results",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "timePeriod",
+    align: "left",
+    label: "ระยะเวลาในการแก้ไขผลงาน",
+    sortable: true,
+    field: "timePeriod",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2: String,
+  filterTable: {
+    type: String,
+    default: "",
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  getList: {
+    type: Function,
+    default: () => "",
+  },
+  selectedRow: {
+    type: Array as PropType<directorType[]>,
+    required: true,
+  },
+});
+
+/** แสดงจำนวนในตาราง */
+const pagination = ref({
+  descending: true,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+  "update:pagination",
+  "returnDirector",
+]);
+
+/** เลือกกรรมการ */
+async function directorSave() {
+  emit("returnDirector", selected.value);
+}
+
+function updateInput(value: any) {
+  emit("update:filterKeyword2", value);
+}
+
+/**รีเซ็ตค่าในช่องค้นหา */
+function Reset() {
+  emit("update:filterKeyword2", "");
+}
+
+function updateProp(newPagination: any, page: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+}
+
+/** เช็คค่า props.Modal === true */
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = props.selectedRow;
+    props.getList();
+  }
+});
+
+watch(
+  () => currentPage.value,
+  () => {
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.Modal" persistent>
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
+      <q-separator />
+      <q-card-section>
+        <q-input
+          borderless
+          outlined
+          dense
+          class="col-12 q-mb-sm"
+          debounce="300"
+          :model-value="filterKeyword2"
+          @update:model-value="updateInput"
+          placeholder="ค้นหารายชื่อ"
+          style="max-width: 100%"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword2 == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword2 !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="Reset"
+            />
+          </template>
+        </q-input>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="เพิ่มรายชื่อกรรมการ"
+          @click="directorSave"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
new file mode 100644
index 000000000..6a2d008f1
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, watch, type PropType } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { directorType } from "@/modules/11_discipline/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const selected = ref<directorType[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+const currentPage = ref<number>(1);
+/** ค้นหาคอลัม */
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+  "position",
+  "duty",
+  "email",
+  "phone",
+  "role",
+]);
+
+/**ข้อมูลหัว ตาราง*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateMeeting",
+    align: "left",
+    label: "วันเวลาในการประชุม",
+    sortable: true,
+    field: "dateMeeting",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "results",
+    align: "left",
+    label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
+    sortable: true,
+    field: "results",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "timePeriod",
+    align: "left",
+    label: "ระยะเวลาในการแก้ไขผลงาน",
+    sortable: true,
+    field: "timePeriod",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2: String,
+  filterTable: {
+    type: String,
+    default: "",
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  getList: {
+    type: Function,
+    default: () => "",
+  },
+  selectedRow: {
+    type: Array as PropType<directorType[]>,
+    required: true,
+  },
+});
+
+/** แสดงจำนวนในตาราง */
+const pagination = ref({
+  descending: true,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+  "update:pagination",
+  "returnDirector",
+]);
+
+/** เลือกกรรมการ */
+async function onClickAddMeet() {
+  emit("returnDirector", selected.value);
+}
+
+function updateInput(value: any) {
+  emit("update:filterKeyword2", value);
+}
+
+/**รีเซ็ตค่าในช่องค้นหา */
+function Reset() {
+  emit("update:filterKeyword2", "");
+}
+
+function updateProp(newPagination: any, page: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+}
+
+/** เช็คค่า props.Modal === true */
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = props.selectedRow;
+    props.getList();
+  }
+});
+
+watch(
+  () => currentPage.value,
+  () => {
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.Modal" persistent>
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
+      <q-separator />
+      <q-card-section>
+        <q-input
+          borderless
+          outlined
+          dense
+          class="col-12 q-mb-sm"
+          debounce="300"
+          :model-value="filterKeyword2"
+          @update:model-value="updateInput"
+          placeholder="ค้นหารายชื่อ"
+          style="max-width: 100%"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword2 == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword2 !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="Reset"
+            />
+          </template>
+        </q-input>
+
+        <d-table
+          :columns="columns"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          selection="multiple"
+          v-model:selected="selected"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="เพิ่มการประชุมเหมือนกรรมการ "
+          @click="onClickAddMeet"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Director/AddPage.vue b/src/modules/12_evaluatePersonal/components/Director/AddPage.vue
new file mode 100644
index 000000000..4abd3a368
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Director/AddPage.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import type { FormDataPost } from "@/modules/11_discipline/interface/request/director";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+const router = useRouter();
+
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+ function onSubmit(formData:FormDataPost) {
+  dialogConfirm($q, () => addData(formData));
+}
+
+function addData(formData: FormDataPost) {
+  showLoader();
+  http
+    .post(config.API.director(), {
+      personalId:formData.personalId ?? '',
+      prefix: formData.prefix,
+      firstName: formData.firstname,
+      lastName: formData.lastname,
+      position: formData.position,
+      email: formData.email,
+      phone: formData.phone,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      router.push(`/discipline/director`);
+    });
+}
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/evaluate/director`)"
+      />
+      เพิ่มรายชื่อกรรมการ
+    </div>
+
+    <Form :on-submit="onSubmit" />
+  </div>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Director/EditPage.vue b/src/modules/12_evaluatePersonal/components/Director/EditPage.vue
new file mode 100644
index 000000000..98692b300
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Director/EditPage.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/director";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const route = useRoute();
+const personalId = ref<string>(route.params.id.toString());
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
+ */
+onMounted(() => {
+  fetchData();
+});
+
+/**
+ * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+ */
+const data = reactive<FormData>({
+  personalId: "",
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  email: "",
+});
+
+/**
+ * ดึงค่าจาก api
+ */
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.directorbyId(personalId.value))
+    .then((res) => {
+      const dataApi = res.data.result;
+      personalId.value = dataApi.id;
+      data.prefix = dataApi.prefix;
+      data.firstname = dataApi.firstName;
+      data.lastname = dataApi.lastName;
+      data.position = dataApi.position;
+      data.phone = dataApi.phone;
+      data.email = dataApi.email;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+function onSubmit(formData: FormData) {
+  dialogConfirm($q, () => putData(formData));
+}
+
+function putData(formData: FormData) {
+  showLoader();
+  http
+    .put(config.API.directorbyId(personalId.value), {
+      prefix: formData.prefix,
+      firstName: formData.firstname,
+      lastName: formData.lastname,
+      position: formData.position,
+      email: formData.email,
+      phone: formData.phone,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      router.push(`/discipline/director`);
+    });
+}
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/evaluate/director`)"
+      />
+      แก้ไขรายชื่อกรรมการ
+    </div>
+
+    <Form :on-submit="onSubmit" :data="data" />
+  </div>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
new file mode 100644
index 000000000..351cf92bf
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/11_discipline/interface/request/director";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  dialogMessageNotify,
+  dialogConfirm,
+  success,
+  hideLoader,
+} = mixin;
+/**
+ * รับ props มาจาก page หลัก
+ */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const emit = defineEmits(["formDataReturn"]);
+/**
+ * ข้อมูลรหัสบัตรประชาชน
+ */
+//
+const idCard = ref<string>("");
+const idCardRef = ref<any>(null);
+
+/**
+ * ข้อมูลทั้งก้อน form
+ */
+const formData = reactive<FormData>({
+  personalId: "",
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  email: "",
+});
+
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
+watch(props.data, async () => {
+  // console.log("data==>", props.data)
+  formData.prefix = props.data.prefix;
+  formData.firstname = props.data.firstname;
+  formData.lastname = props.data.lastname;
+  formData.position = props.data.position;
+  formData.phone = props.data.phone;
+  formData.email = props.data.email;
+
+});
+
+/**
+ * เพิ่มบุคลากร
+ */
+function addEmployee() {
+  if (idCard.value.length === 13) {
+    console.log("idCard===>", idCard.value);
+    showLoader();
+    http
+      .post(config.API.profileSearchPersonal(), {
+        fieldName: "idcard",
+        keyword: idCard.value,
+      })
+      .then((res) => {
+        const dataApi = res.data.result;
+        if (dataApi.length > 0) {
+          const dataList = dataApi[0];
+          formData.prefix = dataList.prefix;
+          formData.firstname = dataList.firstName;
+          formData.lastname = dataList.lastName;
+          formData.position = dataList.position;
+          formData.phone = dataList.phone;
+          formData.email = dataList.email;
+        } else {
+          dialogMessageNotify($q, "ไม่มีข้อมูลบุคคลากรที่ต้องการค้นหา");
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+  if (idCard.value.length !== 13) {
+    hideLoader();
+    dialogMessageNotify($q, "กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก");
+  } else {
+    console.log("nodata");
+  }
+}
+
+/**
+ * ตรวจสอบข้อมูลก่อนส่งไปยัง api
+ */
+const prefixRef = ref<object | null>(null);
+const firstnameRef = ref<object | null>(null);
+const lastnameRef = ref<object | null>(null);
+const positionRef = ref<object | null>(null);
+const phoneRef = ref<object | null>(null);
+const emailRef = ref<object | null>(null);
+const formRef: FormRef = {
+  prefix: prefixRef,
+  firstname: firstnameRef,
+  lastname: lastnameRef,
+  position: positionRef,
+  phone: phoneRef,
+  email: emailRef,
+};
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    props.onSubmit(formData);
+  }
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+<template>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered>
+      <div class="col-12 row q-pa-md">
+        <div class="row q-col-gutter-md">
+          <div class="row col-12" v-if="data === null">
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              >
+                ค้นหาบุคคลากรที่อยู่ในระบบ
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-xs-12 q-pa-sm row">
+                <div class="col-6">
+                  <q-input
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    outlined
+                    v-model="idCard"
+                    label="รหัสบัตรประชาชน"
+                    ref="idCardRef"
+                    for="idCardRef"
+                    hide-bottom-space
+                    :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-btn
+                    unelevated
+                    dense
+                    color="primary"
+                    class="q-px-md q-py-sm q-ml-sm"
+                    @click="addEmployee"
+                    label="เพิ่มบุคลากร"
+                    id="addCustomer"
+                  />
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col-3">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              dense
+              outlined
+              v-model="formData.prefix"
+              label="คำนำหน้า"
+              ref="prefixRef"
+              for="prefixRef"
+              hide-bottom-space
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              dense
+              outlined
+              v-model="formData.firstname"
+              label="ชื่อ"
+              ref="firstnameRef"
+              for="firstnameRef"
+              hide-bottom-space
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              dense
+              outlined
+              v-model="formData.lastname"
+              label="นามสกุล"
+              ref="lastnameRef"
+              for="lastnameRef"
+              hide-bottom-space
+              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              dense
+              outlined
+              v-model="formData.position"
+              label="ตำแหน่ง"
+              ref="positionRef"
+              for="positionRef"
+              hide-bottom-space
+              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              dense
+              outlined
+              v-model="formData.phone"
+              label="เบอร์โทร"
+              ref="phoneRef"
+              for="phoneRef"
+              type="tel"
+              mask="##########"
+              hide-bottom-space
+              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              dense
+              outlined
+              v-model="formData.email"
+              label="อีเมล"
+              ref="emailRef"
+              hide-bottom-space
+              for="emailRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
+            />
+          </div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="row col-12 q-pa-sm">
+        <q-space />
+        <q-btn
+          for="ButtonOnSubmit"
+          id="formSubmit"
+          color="secondary"
+          label="บันทึก"
+          type="submit"
+          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+        >
+      </div>
+    </q-card>
+  </form>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
new file mode 100644
index 000000000..d3e648423
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { ref, useAttrs, onMounted, watch } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const dataStore = useDisciplineDirectorDataStore();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  success,
+} = mixin;
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+watch(() => currentPage.value,() => {
+  rowsPerPage.value = pagination.value.rowsPerPage;
+  getList();
+});
+
+watch(()=>pagination.value.rowsPerPage,()=>{
+  rowsPerPage.value = pagination.value.rowsPerPage;
+  currentPage.value = 1
+  getList();
+})
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.directorList(
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result.data
+      dataStore.fetchData(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบข้อมูล
+ * @param id ไอดีของข้อมูล
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
+}
+
+/**
+ * ลบข้อมูล
+ * @param id type
+ */
+async function deleteData(id: string) {
+  showLoader();
+  await http
+    .delete(config.API.directorbyId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getList();
+    });
+}
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(() => {
+  getList();
+  // get ข้อมูลแล้วโยนใส่ store
+});
+
+/**
+ * ค้นหาในตาราง
+ */
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+function resetFilter() {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+}
+
+function filterFn(){
+  getList()
+  console.log('enter',filterKeyword.value)
+}
+</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">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div>
+        <q-btn
+          @click="router.push(`/evaluate/director/add`)"
+          size="12px"
+          flat
+          round
+          color="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+        </q-btn>
+      </div>
+      <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="ค้นหา"
+        @keydown.enter.prevent="filterFn"
+      >
+        <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="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+
+    <div class="col-12">
+      <d-table
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        :filter="filterKeyword"
+        row-key="tb-list"
+        flat
+        bordered
+        :paging="true"
+        dense
+        v-model:pagination="pagination"
+        :visible-columns="dataStore.visibleColumns"
+      >
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            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 />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="router.push(`/evaluate/director/${props.row.id}`)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
new file mode 100644
index 000000000..183dfd9c0
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Form from "@/modules/12_evaluatePersonal/components/Meeting/Form.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import type { FormDataPost } from "@/modules/11_discipline/interface/request/director";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+const router = useRouter();
+
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+ function onSubmit(formData:FormDataPost) {
+  dialogConfirm($q, () => addData(formData));
+}
+
+function addData(formData: FormDataPost) {
+  showLoader();
+  http
+    .post(config.API.director(), {
+      personalId:formData.personalId ?? '',
+      prefix: formData.prefix,
+      firstName: formData.firstname,
+      lastName: formData.lastname,
+      position: formData.position,
+      email: formData.email,
+      phone: formData.phone,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      router.push(`/discipline/meeting`);
+    });
+}
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-12">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/evaluate/meeting`)"
+      />
+      เพิ่มรายการการประชุม
+    </div>
+
+    <Form :on-submit="onSubmit" />
+  </div>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
new file mode 100644
index 000000000..27c50fba8
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import Form from "@/modules/12_evaluatePersonal/components/Meeting/Form.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/director";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const route = useRoute();
+const personalId = ref<string>(route.params.id.toString());
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
+ */
+onMounted(() => {
+  fetchData();
+});
+
+/**
+ * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+ */
+const data = reactive<FormData>({
+  personalId: "",
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  email: "",
+});
+
+/**
+ * ดึงค่าจาก api
+ */
+const fetchData = async () => {
+  // showLoader();
+  // await http
+  //   .get(config.API.directorbyId(personalId.value))
+  //   .then((res) => {
+  //     const dataApi = res.data.result;
+  //     personalId.value = dataApi.id;
+  //     data.prefix = dataApi.prefix;
+  //     data.firstname = dataApi.firstName;
+  //     data.lastname = dataApi.lastName;
+  //     data.position = dataApi.position;
+  //     data.phone = dataApi.phone;
+  //     data.email = dataApi.email;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+function onSubmit(formData: FormData) {
+  dialogConfirm($q, () => putData(formData));
+}
+
+function putData(formData: FormData) {
+  showLoader();
+  http
+    .put(config.API.directorbyId(personalId.value), {
+      prefix: formData.prefix,
+      firstName: formData.firstname,
+      lastName: formData.lastname,
+      position: formData.position,
+      email: formData.email,
+      phone: formData.phone,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      router.push(`/discipline/meeting`);
+    });
+}
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/evaluate/meeting`)"
+      />
+      แก้ไขการประชุม
+    </div>
+
+    <Form :on-submit="onSubmit" :data="data" />
+  </div>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/Form.vue b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
new file mode 100644
index 000000000..e40f3a613
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type {
+  FormData,
+  FormRef,
+  FileOj,
+} from "@/modules/12_evaluatePersonal/interface/index/meeting";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  dialogMessageNotify,
+  dialogConfirm,
+  success,
+  hideLoader,
+  dialogRemove
+} = mixin;
+/**
+ * รับ props มาจาก page หลัก
+ */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const emit = defineEmits(["formDataReturn"]);
+/**
+ * ข้อมูลรหัสบัตรประชาชน
+ */
+//
+const idCard = ref<string>("");
+const idCardRef = ref<any>(null);
+
+const fileOj = reactive<FileOj[]>([]);
+
+const formData = reactive<FormData>({
+  rounded: "",
+  dateMeeting: "",
+  consider: "",
+  period: "",
+  file: fileOj,
+});
+
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
+watch(props.data, async () => {
+  // console.log("data==>", props.data)
+  formData.rounded = props.data.rounded;
+  formData.dateMeeting = props.data.dateMeeting;
+  formData.consider = props.data.consider;
+  formData.period = props.data.period;
+});
+
+/**
+ * เพิ่มบุคลากร
+ */
+function addEmployee() {
+  if (idCard.value.length === 13) {
+    console.log("idCard===>", idCard.value);
+    showLoader();
+    http
+      .post(config.API.profileSearchPersonal(), {
+        fieldName: "idcard",
+        keyword: idCard.value,
+      })
+      .then((res) => {
+        const dataApi = res.data.result;
+        if (dataApi.length > 0) {
+          const dataList = dataApi[0];
+          formData.rounded = dataList.rounded;
+          formData.dateMeeting = dataList.dateMeeting;
+          formData.consider = dataList.consider;
+          formData.period = dataList.period;
+        } else {
+          dialogMessageNotify($q, "ไม่มีข้อมูลบุคคลากรที่ต้องการค้นหา");
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+  if (idCard.value.length !== 13) {
+    hideLoader();
+    dialogMessageNotify($q, "กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก");
+  } else {
+    console.log("nodata");
+  }
+}
+
+/**
+ * ตรวจสอบข้อมูลก่อนส่งไปยัง api
+ */
+const roundedRef = ref<object | null>(null);
+const dateMeetingRef = ref<object | null>(null);
+const considerRef = ref<object | null>(null);
+const periodRef = ref<object | null>(null);
+
+const formRef: FormRef = {
+  rounded: roundedRef,
+  dateMeeting: dateMeetingRef,
+  consider: considerRef,
+  period: periodRef,
+};
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    props.onSubmit(formData);
+  }
+}
+
+function uploadFile() {
+  // const Data = new FormData();
+  // Data.append("file", formData.file);
+  // showLoader();
+  // http
+  //   .put(config.API.appealUpLoadFile(formData.id), Data)
+  //   .then((res) => {
+  //     console.log(res);
+  //     success($q, "อัปโหลดไฟล์สำเร็จ");
+  //     props.getData();
+  //     // router.push(`/discipline/complaints`);
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //     formData.file = null;
+  //   });
+}
+
+function downloadFile(link: string) {
+  window.open(link, "_blank");
+}
+
+function deleteFile(id: string) {
+  dialogRemove($q, () => confirmDelete(id));
+}
+
+/**
+ * ยืนยัน ลบ ไฟล์
+ * @param id id file
+ */
+function confirmDelete(id: string) {
+  // showLoader();
+  // http
+  //   .delete(config.API.appealDeleteFile(formData.id, id))
+  //   .then((res) => {
+  //     success($q, `ลบไฟล์สำเร็จ`);
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     props.getData();
+  //   });
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+<template>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered>
+      <div class="col-12 row q-pa-md q-col-gutter-md">
+        <div class="col-3">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            dense
+            outlined
+            v-model="formData.rounded"
+            label="ครั้งที่"
+            ref="roundedRef"
+            for="roundedRef"
+            hide-bottom-space
+            :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกครั้งที่'}`]"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            dense
+            outlined
+            v-model="formData.dateMeeting"
+            label="วันเวลาในการประชุม"
+            ref="dateMeetingRef"
+            for="dateMeetingRef"
+            hide-bottom-space
+            :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกวันเวลาในการประชุม'}`]"
+          />
+        </div>
+        <div class="col-12">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            dense
+            outlined
+            v-model="formData.consider"
+            label="ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ"
+            ref="considerRef"
+            for="considerRef"
+            hide-bottom-space
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ'}`]"
+          />
+        </div>
+        <div class="col-12">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            dense
+            outlined
+            v-model="formData.period"
+            label="ระยะเวลาในการแก้ไขผลงาน"
+            ref="periodRef"
+            for="periodRef"
+            hide-bottom-space
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกระยะเวลาในการแก้ไขผลงาน'}`]"
+          />
+        </div>
+        <div class="col-sm-12 col-md-12">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              อัปโหลดไฟล์เอกสารหลักฐาน
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-12 q-pa-sm row">
+              <q-file
+                for="inputFiles"
+                class="col-11"
+                outlined
+                dense
+                v-model="formData.file"
+                @added="uploadFile"
+                label="ไฟล์เอกสารหลักฐาน"
+                hide-bottom-space
+                lazy-rules
+                accept=".pdf,.xlsx,.doc"
+                clearable
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+
+              <div class="col-1 self-center text-center">
+                <q-btn
+                  v-if="formData.file && isReadonly"
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  icon="mdi-upload"
+                  @click="uploadFile"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+
+            <div v-if="formData.file.length > 0" class="col-12 q-pa-sm row">
+              <q-list
+                v-for="data in formData.file"
+                :key="data.id"
+                class="full-width"
+                bordered
+                separator
+              >
+                <q-item clickable v-ripple>
+                  <q-item-section>{{ data.fileName }}</q-item-section>
+                  <q-space />
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="blue"
+                    icon="mdi-download"
+                    @click="downloadFile(data.pathName)"
+                    ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                  >
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="red"
+                    class="q-ml-sm"
+                    icon="mdi-delete-outline"
+                    @click="deleteFile(data.id)"
+                    ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                  >
+                </q-item>
+              </q-list>
+            </div>
+            <div class="col-12 q-pa-sm" v-else>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+            </div>
+          </q-card>
+        </div>
+      </div>
+
+      <q-separator />
+      <div class="row col-12 q-pa-sm">
+        <q-space />
+        <q-btn
+          for="ButtonOnSubmit"
+          id="formSubmit"
+          color="secondary"
+          label="บันทึก"
+          type="submit"
+          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+        >
+      </div>
+    </q-card>
+  </form>
+</template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
new file mode 100644
index 000000000..7d49ce0a3
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { ref, useAttrs, onMounted, watch } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useEvaluateMeetingDataStore } from "@/modules/12_evaluatePersonal/store/MeetingStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const dataStore = useEvaluateMeetingDataStore();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  success,
+} = mixin;
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+async function getList() {
+  // showLoader();
+  // await http
+  //   .get(
+  //     config.API.directorList(
+  //       currentPage.value,
+  //       rowsPerPage.value,
+  //       filterKeyword.value
+  //     )
+  //   )
+  //   .then((res) => {
+  //     maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+  //     const data = res.data.result.data
+  //     dataStore.fetchData(data);
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+
+  /** จำลองข้อมูล */
+  const data = [
+    {
+      id: "08dbf276-47d1-446b-8c0a-c109030dd457",
+      rounded:'1',
+      title:'ประชุม 1',
+      dateStart:new Date('2023-12-18T10:12:29.362007'),
+      dateEnd:new Date('2023-12-18T10:12:29.362007'),
+    },
+    {
+      id: "08dbf633-a4e4-49f6-8278-7105ce82e158",
+      rounded:'2',
+      title:'ประชุม 2',
+      dateStart:new Date('2023-12-18T10:12:29.362007'),
+      dateEnd:new Date('2023-12-18T10:12:29.362007'),
+    },
+    {
+      id: "08dbf67d-ebfa-4216-8bdb-4668351513b8",
+      rounded:'3',
+      title:'ประชุม 3',
+      dateStart:new Date('2023-12-18T10:12:29.362007'),
+      dateEnd:new Date('2023-12-18T10:12:29.362007'),
+    },
+    {
+      id: "08dbf6dd-7cff-4dd1-89d3-4fe0533ee186",
+      rounded:'4',
+      title:'ประชุม 4',
+      dateStart:new Date('2023-12-18T10:12:29.362007'),
+      dateEnd:new Date('2023-12-18T10:12:29.362007'),
+    },
+    {
+      id: "08dbfd41-0567-447f-8d3f-3254166c815d",
+      rounded:'5',
+      title:'ประชุม 5',
+      dateStart:new Date('2023-12-18T10:12:29.362007'),
+      dateEnd:new Date('2023-12-18T10:12:29.362007'),
+    },
+  ];
+  dataStore.fetchData(data);
+}
+
+/**
+ * ลบข้อมูล
+ * @param id ไอดีของข้อมูล
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
+}
+
+/**
+ * ลบข้อมูล
+ * @param id type
+ */
+async function deleteData(id: string) {
+  alert('ลบ')
+  // showLoader();
+  // await http
+  //   .delete(config.API.directorbyId(id))
+  //   .then((res) => {
+  //     success($q, "ลบข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await getList();
+  //   });
+}
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(() => {
+  getList();
+  // get ข้อมูลแล้วโยนใส่ store
+});
+
+/**
+ * ค้นหาในตาราง
+ */
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+function resetFilter() {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+}
+
+function filterFn() {
+  getList();
+  console.log("enter", filterKeyword.value);
+}
+</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">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div>
+        <q-btn
+          @click="router.push(`/evaluate/meeting/add`)"
+          size="12px"
+          flat
+          round
+          color="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+        </q-btn>
+      </div>
+      <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="ค้นหา"
+        @keydown.enter.prevent="filterFn"
+      >
+        <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="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+
+    <div class="col-12">
+      <d-table
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        :filter="filterKeyword"
+        row-key="tb-list"
+        flat
+        bordered
+        :paging="true"
+        dense
+        v-model:pagination="pagination"
+        :visible-columns="dataStore.visibleColumns"
+      >
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            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 />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="router.push(`/evaluate/meeting/${props.row.id}`)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/12_evaluatePersonal/interface/index/meeting.ts b/src/modules/12_evaluatePersonal/interface/index/meeting.ts
new file mode 100644
index 000000000..0099dad4b
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/interface/index/meeting.ts
@@ -0,0 +1,43 @@
+interface DataResponseList {
+    id: string
+    rounded: string
+    title: string
+    dateStart: Date
+    dateEnd: Date
+}
+
+interface MainList {
+    id: string
+    rounded: string
+    title: string
+    date: string
+}
+
+interface FormData {
+    rounded: string
+    dateMeeting: string
+    consider: string
+    period: string
+    file: FileOj[]
+}
+
+interface FileOj{
+    id:string
+    pathName:string
+    fileName:string
+}
+
+interface FormRef {
+    rounded: object | null;
+    dateMeeting: object | null;
+    consider: object | null;
+    period: object | null;
+    [key: string]: any;
+}
+export type {
+    DataResponseList,
+    MainList,
+    FormData,
+    FormRef,
+    FileOj
+}
\ No newline at end of file
diff --git a/src/modules/12_evaluatePersonal/router.ts b/src/modules/12_evaluatePersonal/router.ts
index ae43d644e..26881fe1c 100644
--- a/src/modules/12_evaluatePersonal/router.ts
+++ b/src/modules/12_evaluatePersonal/router.ts
@@ -1,6 +1,13 @@
 const mainPage = () => import("@/modules/12_evaluatePersonal/views/MainPage.vue");
-const detailPage = () =>
-  import("@/modules/12_evaluatePersonal/views/DetailPage.vue");
+const detailPage = () => import("@/modules/12_evaluatePersonal/views/DetailPage.vue");
+
+const directorPage = () => import("@/modules/12_evaluatePersonal/components/Director/MainPage.vue");
+const directorAddPage = () => import("@/modules/12_evaluatePersonal/components/Director/AddPage.vue");
+const directorEditPage = () => import("@/modules/12_evaluatePersonal/components/Director/EditPage.vue");
+
+const meetingPage = () => import("@/modules/12_evaluatePersonal/components/Meeting/MainPage.vue");
+const meetingAddPage = () => import("@/modules/12_evaluatePersonal/components/Meeting/AddPage.vue");
+const meetingEditPage = () => import("@/modules/12_evaluatePersonal/components/Meeting/EditPage.vue");
 
 export default [
   {
@@ -23,4 +30,64 @@ export default [
       Role: "evaluate",
     },
   },
+  {
+    path: "/evaluate/director",
+    name: "evaluateDirector",
+    component: directorPage,
+    meta: {
+      Auth: true,
+      Key: [12.2],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/evaluate/director/add",
+    name: "evaluateDirectorAdd",
+    component: directorAddPage,
+    meta: {
+      Auth: true,
+      Key: [12.2],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/evaluate/director/:id",
+    name: "evaluateDirectorEdit",
+    component: directorEditPage,
+    meta: {
+      Auth: true,
+      Key: [12.2],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/evaluate/meeting",
+    name: "evaluateMeeting",
+    component: meetingPage,
+    meta: {
+      Auth: true,
+      Key: [12.2],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/evaluate/meeting/add",
+    name: "evaluateMeetingAdd",
+    component: meetingAddPage,
+    meta: {
+      Auth: true,
+      Key: [12.2],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/evaluate/meeting/:id",
+    name: "evaluateMeetingEdit",
+    component: meetingEditPage,
+    meta: {
+      Auth: true,
+      Key: [12.2],
+      Role: "discipline",
+    },
+  },
 ];
\ No newline at end of file
diff --git a/src/modules/12_evaluatePersonal/store/MeetingStore.ts b/src/modules/12_evaluatePersonal/store/MeetingStore.ts
new file mode 100644
index 000000000..cf675888d
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/store/MeetingStore.ts
@@ -0,0 +1,80 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { DataResponseList, MainList } from "@/modules/12_evaluatePersonal/interface/index/meeting";
+import type { QTableProps } from "quasar";
+
+// store ระบบวินัย >> ข้อมูลพื้นฐาน >> กรรมการ
+export const useEvaluateMeetingDataStore = defineStore(
+    "evaluateMeeting",
+    () => {
+        const mixin = useCounterMixin()
+        const { date2Thai } = mixin
+        //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+        const visibleColumns = ref<string[]>([
+            "no",
+            "rounded",
+            "title",
+            "date",
+        ]);
+
+        // หัวตาราง
+        const columns = ref<QTableProps["columns"]>([
+            {
+                name: "no",
+                align: "left",
+                label: "ลำดับ",
+                sortable: false,
+                field: "no",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "rounded",
+                align: "left",
+                label: "ครั้งที่",
+                sortable: true,
+                field: "rounded",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "title",
+                align: "left",
+                label: "เรื่อง",
+                sortable: true,
+                field: "title",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "date",
+                align: "left",
+                label: "วันเวลาในการประชุม",
+                sortable: true,
+                field: "date",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+        ]);
+
+        // ข้อมูลในตาราง
+        const rows = ref<MainList[]>([]);
+        function fetchData(data: DataResponseList[]) {
+            const dataList: MainList[] = data.map((item: DataResponseList) => ({
+                id: item.id,
+                rounded: item.rounded,
+                title: item.title,
+                date: `${date2Thai(item.dateStart as Date)} - ${date2Thai(item.dateEnd as Date)}`
+            }))
+            rows.value = dataList
+        }
+
+        return {
+            visibleColumns,
+            columns,
+            rows,
+            fetchData
+        };
+    }
+);