From 8b660c63f89f39fca2993276131c013210ed763f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 18 Dec 2023 13:24:07 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=20tab=20=E0=B8=81=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/Tab2.vue                |  41 +--
 .../Detail/viewTab2/CardDirector.vue          | 222 +++++++++++++++
 .../components/Detail/viewTab2/CardMeet.vue   | 163 +++++++++++
 .../Detail/viewTab2/DialogDirector.vue        | 253 ++++++++++++++++++
 .../components/Detail/viewTab2/DialogMeet.vue | 252 +++++++++++++++++
 5 files changed, 898 insertions(+), 33 deletions(-)
 create mode 100644 src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
 create mode 100644 src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
 create mode 100644 src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
 create mode 100644 src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue

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..6a4d178bf
--- /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>