diff --git a/src/modules/12_evaluatePersonal/components/Director/AddPage.vue b/src/modules/12_evaluatePersonal/components/Director/AddPage.vue
index 61988a8d5..d386ceead 100644
--- a/src/modules/12_evaluatePersonal/components/Director/AddPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/AddPage.vue
@@ -55,7 +55,7 @@ function addData(formData: DataForm) {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="$router.push(`/evaluate/director`)"
+        @click="$router.go(-1)"
       />
       เพิ่มรายชื่อกรรมการ
     </div>
diff --git a/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue b/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue
new file mode 100644
index 000000000..0ef78ff81
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { reactive, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormData } from "@/modules/11_discipline/interface/request/director";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const directorId = defineModel<string>("directorId", { required: true });
+const actionType = defineModel<string>("actionType", { required: true });
+const props = defineProps({
+  fetchDataList: { type: Function, required: true },
+});
+
+const title = computed(() =>
+  actionType.value === "VIEW" ? "รายละเอียด" : "แก้ไขรายชื่อกรรมการ"
+);
+
+/**
+ * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+ */
+const dataDettail = reactive<FormData>({
+  personalId: "",
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  email: "",
+  qualification: "",
+});
+
+/**
+ * ดึงค่าจาก api
+ */
+function fetchData() {
+  showLoader();
+  http
+    .get(config.API.evaluateDirectorById(directorId.value))
+    .then((res) => {
+      const data = res.data.result;
+      dataDettail.personalId = data.Id;
+      dataDettail.prefix = data.prefix;
+      dataDettail.firstname = data.firstName;
+      dataDettail.lastname = data.lastName;
+      dataDettail.position = data.position;
+      dataDettail.phone = data.phone;
+      dataDettail.email = data.email;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+function onSubmit(formData: FormData) {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.evaluateDirectorById(directorId.value), {
+        prefix: formData.prefix,
+        firstName: formData.firstname,
+        lastName: formData.lastname,
+        position: formData.position,
+        email: formData.email,
+        phone: formData.phone,
+      })
+      .then(() => {
+        props.fetchDataList?.();
+        onCloseDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onCloseDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchData();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 450px">
+      <DialogHeader :tittle="title" :close="onCloseDialog" />
+      <Form
+        :on-submit="onSubmit"
+        :data="dataDettail"
+        :actionType="actionType"
+      />
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
index 89565c6f4..1444e76c7 100644
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -37,6 +37,7 @@ const {
 /**
  * รับ props มาจาก page หลัก
  */
+const actionType = defineModel<string>("actionType", { default: "" });
 const props = defineProps({
   data: {
     type: Object,
@@ -47,8 +48,10 @@ const props = defineProps({
     default: () => "",
   },
 });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+// const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
+const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
+
 /**
  * ข้อมูลเลขประจำตัวประชาชน
  */
@@ -143,15 +146,15 @@ const columnsRespondent = ref<QTableProps["columns"]>([
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง 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;
-});
+// 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;
+// });
 
 /**
  * ตรวจสอบข้อมูลก่อนส่งไปยัง api
@@ -280,12 +283,31 @@ watch(
     await searchInput();
   }
 );
+
+function fetchForm(data: any) {
+  formData.prefix = data.prefix;
+  formData.firstname = data.firstname;
+  formData.lastname = data.lastname;
+  formData.position = data.position;
+  formData.phone = data.phone;
+  formData.email = data.email;
+}
+
+onMounted(() => {
+  if (props.data) {
+    showLoader();
+    setTimeout(async () => {
+      await fetchForm(props.data);
+      await hideLoader();
+    }, 1000);
+  }
+});
 </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 q-col-gutter-md">
           <div class="col-12 q-gutter-y-sm" v-if="data === null">
             <div class="row q-col-gutter-md items-start">
               <div class="col-12 col-sm-6 col-md-3">
@@ -411,10 +433,10 @@ watch(
               </d-table>
             </div>
           </div>
-
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.prefix"
@@ -426,9 +448,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.firstname"
@@ -440,9 +463,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.lastname"
@@ -454,9 +478,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.position"
@@ -468,9 +493,10 @@ watch(
               lazy-rules
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.phone"
@@ -482,9 +508,10 @@ watch(
               hide-bottom-space
             />
           </div>
-          <div class="col-3">
+          <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
+              :readonly="isReadonly"
               dense
               outlined
               v-model="formData.email"
@@ -496,8 +523,8 @@ watch(
           </div>
         </div>
       </div>
-      <q-separator />
-      <div class="row col-12 q-pa-sm">
+      <q-separator v-if="!isReadonly" />
+      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
         <q-space />
         <q-btn
           for="ButtonOnSubmit"
diff --git a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
index 37572663e..68150bff9 100644
--- a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
@@ -1,22 +1,33 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import router from "@/router";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
-import { useEvaluateDirectorDataStore } from "@/modules/12_evaluatePersonal/store/DirectorStore";
-
+import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importComponents
+ */
+import DialogDetail from "@/modules/12_evaluatePersonal/components/Director/DialogDetail.vue";
+
+/**
+ * importStore
+ */
+import { useEvaluateDirectorDataStore } from "@/modules/12_evaluatePersonal/store/DirectorStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
 const $q = useQuasar();
 const dataStore = useEvaluateDirectorDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
-// const currentPage = ref<number>(1);
-// const maxPage = ref<number>(1);
-// const page = ref<number>(1);
-// const rowsPerPage = ref<number>(10);
+const modalDetail = ref<boolean>(false);
+const directorId = ref<string>("");
+const actionType = ref<string>("");
 
 /**
  *pagination ของตาราง
@@ -27,23 +38,6 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getList();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getList();
-//   }
-// );
-
 function getList() {
   showLoader();
   http
@@ -72,21 +66,28 @@ function clickDelete(id: string) {
  * ลบข้อมูล
  * @param id type
  */
-async function deleteData(id: string) {
+function deleteData(id: string) {
   showLoader();
-  await http
+  http
     .delete(config.API.evaluateDirectorById(id))
-    .then(() => {
+    .then(async () => {
+      getList();
       success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
-      await getList();
+    .finally(() => {
+      hideLoader();
     });
 }
 
+function onOpenDetail(id: string, type: string) {
+  directorId.value = id;
+  actionType.value = type;
+  modalDetail.value = true;
+}
+
 /**
  * ค้นหาในตาราง
  */
@@ -114,10 +115,9 @@ onMounted(() => {
   </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>
+      <div v-if="checkPermission($route)?.attrIsCreate">
         <q-btn
           @click="router.push(`/evaluate/director/add`)"
-          size="12px"
           flat
           round
           color="add"
@@ -180,17 +180,6 @@ onMounted(() => {
         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 auto-width />
@@ -200,26 +189,46 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.pervent="onOpenDetail(props.row.id, 'VIEW')"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsGet &&
+                  checkPermission($route)?.attrIsUpdate
+                "
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click.pervent="onOpenDetail(props.row.id, 'EDIT')"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
-                size="12px"
                 flat
                 round
                 color="red"
-                @click="clickDelete(props.row.id)"
+                @click.pervent="clickDelete(props.row.id)"
                 icon="mdi-delete"
               >
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="router.push(`/evaluate/director/${props.row.id}`)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -227,10 +236,17 @@ onMounted(() => {
                 {{ col.value }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
     </div>
   </q-card>
+
+  <!-- รายละเอียด -->
+  <DialogDetail
+    v-model:modal="modalDetail"
+    :directorId="directorId"
+    :actionType="actionType"
+    :fetchDataList="getList"
+  />
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
index a8dafe684..59dacac1d 100644
--- a/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/AddPage.vue
@@ -1,45 +1,57 @@
 <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 { useQuasar } from "quasar";
+import { 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 ระบุ บุคคล
+ * importType
  */
-function onSubmit(formData: FormDataPost) {
-  dialogConfirm($q, () => addData(formData));
-}
+import type { FormData } from "@/modules/12_evaluatePersonal/interface/index/meeting";
 
-function addData(formData: any) {
-  showLoader();
-  http
-    .post(config.API.meeting(), {
-      round: formData.rounded ?? "",
-      title: formData.title,
-      dateEnd: formData.dateMeetingEnd,
-      dateStart: formData.dateMeetingStart,
-      result: formData.consider,
-      duration: formData.period,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/evaluate/meeting`);
-    });
+/**
+ * importComponents
+ */
+import Form from "@/modules/12_evaluatePersonal/components/Meeting/Form.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const router = useRouter();
+const { messageError, showLoader, dialogConfirm, success, hideLoader } =
+  useCounterMixin();
+
+/**
+ * บันทึกข้อมูลการประชุม
+ * @param formData ข้อมูลการประชุม
+ */
+function onSubmit(formData: FormData) {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.meeting(), {
+        round: formData.rounded ?? "",
+        title: formData.title,
+        dateEnd: formData.dateMeetingEnd,
+        dateStart: formData.dateMeetingStart,
+        result: formData.consider,
+        duration: formData.period,
+      })
+      .then(() => {
+        router.push(`/evaluate/meeting`);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      });
+  });
 }
 </script>
 <template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
index 7f15c42e9..fe893970e 100644
--- a/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/EditPage.vue
@@ -1,42 +1,50 @@
 <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/12_evaluatePersonal/interface/index/meeting";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { formData } from "@/modules/09_leave/interface/request/workTime";
 
+/**
+ * importTyep
+ */
+import type { FormData } from "@/modules/12_evaluatePersonal/interface/index/meeting";
+
+/**
+ * importComponents
+ */
+import Form from "@/modules/12_evaluatePersonal/components/Meeting/Form.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
 const route = useRoute();
-const personalId = ref<string>(route.params.id as string);
-console.log(personalId.value);
-
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const {
   messageError,
   showLoader,
   hideLoader,
   dialogConfirm,
   success,
-  date2Thai,
   dateToISO,
-} = mixin;
+} = useCounterMixin();
 
-/**เมื่อเริ่มโหลดหน้า
- * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
- */
-onMounted(() => {
-  fetchData();
-});
+const personalId = ref<string>(route.params.id as string);
+const routeName = ref<string>(route.name as string);
+const title = computed(() =>
+  routeName.value === "evaluateMeetingdetail"
+    ? "รายละเอียดการประชุม"
+    : "แก้ไขการประชุม"
+);
 
-/**
- * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
- */
-const data = reactive<any>({
+//ข้อมูลการประชุม
+const data = reactive({
   rounded: "",
   dateMeeting: "",
   dateMeetingStart: Date,
@@ -48,11 +56,11 @@ const data = reactive<any>({
 });
 
 /**
- * ดึงค่าจาก api
+ * function fetch ข้อมูลการประชุม
  */
-const fetchData = async () => {
+function fetchData() {
   showLoader();
-  await http
+  http
     .get(config.API.meetingById(personalId.value))
     .then((res) => {
       const dataApi = res.data.result;
@@ -68,41 +76,48 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
-};
+}
 
 /**
  * บันทึกข้อมูลที่เเก้ไข
- * @param id ระบุ บุคคล
+ * @param formData ข้อมูลการประชุม
  */
 function onSubmit(formData: FormData) {
-  dialogConfirm($q, () => putData(formData));
-  console.log(personalId.value);
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.meetingById(personalId.value), {
+        round: formData.rounded ?? "",
+        title: formData.title,
+        dateStart: formData.dateMeetingStart
+          ? dateToISO(formData.dateMeetingStart)
+          : null,
+        dateEnd: formData.dateMeetingEnd
+          ? dateToISO(formData.dateMeetingEnd)
+          : null,
+        result: formData.consider,
+        duration: formData.period,
+      })
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        router.push(`/evaluate/meeting`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
-function putData(formData: any) {
-  showLoader();
-  http
-    .put(config.API.meetingById(personalId.value), {
-      round: formData.rounded ?? "",
-      title: formData.title,
-      dateStart: dateToISO(formData.dateMeetingStart),
-      dateEnd: dateToISO(formData.dateMeetingEnd),
-      result: formData.consider,
-      duration: formData.period,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      router.push(`/evaluate/meeting`);
-    });
-}
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -117,7 +132,7 @@ function putData(formData: any) {
         class="q-mr-sm"
         @click="router.push(`/evaluate/meeting`)"
       />
-      แก้ไขการประชุม
+      {{ title }}
     </div>
 
     <Form :on-submit="onSubmit" :data="data" />
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/Form.vue b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
index 1eae2c43c..08182192c 100644
--- a/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
@@ -1,30 +1,32 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import axios from "axios";
-import type {
-  FormData,
-  FormRef,
-  FileOj,
-} from "@/modules/12_evaluatePersonal/interface/index/meeting";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/**
+ * importRtpe
+ */
+import type { FormData } from "@/modules/12_evaluatePersonal/interface/index/meeting";
+
+/**
+ * use
+ */
+
 const route = useRoute();
-const id = ref<string>(route.params.id as string);
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const {
   messageError,
   showLoader,
-  dialogMessageNotify,
-  dialogConfirm,
   success,
   date2Thai,
   hideLoader,
   dialogRemove,
-} = mixin;
+} = useCounterMixin();
+
 /**
  * รับ props มาจาก page หลัก
  */
@@ -38,15 +40,13 @@ const props = defineProps({
     default: () => "",
   },
 });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
-/**
- * ข้อมูลเลขประจำตัวประชาชน
- */
-//
-const idCard = ref<string>("");
-const file = ref<any>();
-const fileOj = reactive<FileOj[]>([]);
+
+const id = ref<string>(route.params.id as string);
+const routeName = ref<string>(route.name as string);
+const isReadonly = computed(() =>
+  routeName.value === "evaluateMeetingdetail" ? true : false
+);
 
 const formData = reactive<FormData>({
   id: "",
@@ -57,94 +57,41 @@ const formData = reactive<FormData>({
   consider: "",
   period: "",
   title: "",
-  // file: fileOj,
 });
+const file = ref<any>();
+const fileData = ref<any>([]);
+const fileDataDownload = ref<any>([]);
 
-/**
- * เช็คข้อมูลจาก props
- * เมื่อมีข้อมูล
- * เก็บข้อมูลลง formData
- */
-watch(props.data, async () => {
-  // console.log("data==>", props.data)
-  formData.id = props.data.id;
-  formData.rounded = props.data.rounded;
-  formData.dateMeetingStart = props.data.dateMeetingStart;
-  formData.dateMeetingEnd = props.data.dateMeetingEnd;
-  formData.consider = props.data.consider;
-  formData.period = props.data.period;
-  formData.title = props.data.title;
-});
-
-/**
- * ตรวจสอบข้อมูลก่อนส่งไปยัง api
- */
-const roundedRef = ref<object | null>(null);
-const dateMeetingStartRef = ref<object | null>(null);
-const dateMeetingEndRef = ref<object | null>(null);
-const considerRef = ref<object | null>(null);
-const periodRef = ref<object | null>(null);
-const titleRef = ref<object | null>(null);
-
-const formRef: FormRef = {
-  rounded: roundedRef,
-  dateMeetingStartRef: dateMeetingStartRef,
-  dateMeetingEndRef: dateMeetingEndRef,
-  consider: considerRef,
-  period: periodRef,
-  title: titleRef,
-};
-
-/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-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 submit() {
+  props.onSubmit(formData);
 }
 
-const fileData = ref<any>([]);
 /**
- * ดึงค่าจาก api
+ * function fetch ข้อมูลไฟล์เอกสารหลักฐาน
  */
-const fetchDataFile = async () => {
+function fetchDataFile() {
   if (id.value != undefined) {
     showLoader();
-    await http
+    http
       .get(config.API.meetingFilebyId("การประชุม", id.value))
       .then((res) => {
         const dataFile = res.data;
-        // const dataFile = res.data.result;
         fileData.value = dataFile;
       })
-      .catch((e) => {
-        // messageError($q, e);
-      })
       .finally(() => {
         hideLoader();
       });
   }
-};
+}
 
 /**
- * function download
+ * function ดาวน์โหลดไฟล์เอกสารหลักฐาน
  */
-const fileDataDownload = ref<any>([]);
-const fetchDataFileDownload = async (pathName: string) => {
-  console.log(fileData.value[0].fileName);
+function fetchDataFileDownload(pathName: string) {
   if (id.value !== undefined) {
     showLoader();
-    console.log(fileData.value[0].fileName);
-    await http
+    http
       .get(config.API.meetingFileDowloadbyId("การประชุม", id.value, pathName))
       .then((res) => {
         const dataFile = res.data;
@@ -158,13 +105,12 @@ const fetchDataFileDownload = async (pathName: string) => {
         hideLoader();
       });
   }
-};
+}
 
 /**
- * addFiles
+ * function สร้างลิงค์อัปโหลดไฟล์เอกสารหลักฐาน
  */
 function uploadFile() {
-  // fetchDataFile();
   if (file) {
     const fileList = [
       {
@@ -191,64 +137,56 @@ function uploadFile() {
       })
       .catch((e) => {
         messageError($q, e);
-      })
-      .finally(async () => {
-        file.value = null;
-        // hideLoader();
+        hideLoader();
       });
   }
 }
 
-async function uploadfileURL(uploadUrl: string, file: any) {
-  await axios
+/**
+ * function อัปโหลดไฟล์เอกสารหลักฐาน
+ */
+function uploadfileURL(uploadUrl: string, file: any) {
+  axios
     .put(uploadUrl, file, {
       headers: {
         "Content-Type": file.type,
       },
     })
     .then(() => {
-      success($q, "อัปโหลไฟล์สำเร็จ");
+      setTimeout(async () => {
+        await fetchDataFile();
+        await success($q, "อัปโหลไฟล์สำเร็จ");
+        file.value = null;
+      }, 500);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(async () => {
-      await setTimeout(() => fetchDataFile(), 500);
+      hideLoader();
     });
 }
 
-function deleteFile(id: string) {
-  dialogRemove($q, () => confirmDelete(id));
-}
-
 /**
- * ยืนยัน ลบ ไฟล์
- * @param id id file
+ * function ยืนยันการลบไฟล์เอกสารหลักฐาน
+ * @param fileName  file
  */
-function confirmDelete(fileName: string) {
-  showLoader();
-  http
-    .delete(config.API.meetingFileDowloadbyId("การประชุม", id.value, fileName))
-    .then((res) => {
-      success($q, `ลบไฟล์สำเร็จ`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => fetchDataFile(), 1000);
-    });
-}
-
-//checkDate
-function checkDate() {
-  if (formData.dateMeetingEnd !== null && formData.dateMeetingStart !== null) {
-    if (formData.dateMeetingEnd <= formData.dateMeetingStart) {
-      formData.dateMeetingEnd = null;
-    }
-  } else {
-    console.log("One or both dates are null");
-  }
+function deleteFile(fileName: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(
+        config.API.meetingFileDowloadbyId("การประชุม", id.value, fileName)
+      )
+      .then(() => {
+        setTimeout(async () => {
+          await fetchDataFile();
+          await success($q, `ลบไฟล์สำเร็จ`);
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      });
+  });
 }
 
 function inputEdit(val: boolean) {
@@ -260,22 +198,32 @@ function inputEdit(val: boolean) {
 
 /**Hook */
 onMounted(() => {
-  setTimeout(() => fetchDataFile(), 500);
-  // fetchDataFileDownload();
+  setTimeout(() => {
+    fetchDataFile();
+    if (props.data) {
+      formData.id = props.data.id;
+      formData.rounded = props.data.rounded;
+      formData.dateMeetingStart = props.data.dateMeetingStart;
+      formData.dateMeetingEnd = props.data.dateMeetingEnd;
+      formData.consider = props.data.consider;
+      formData.period = props.data.period;
+      formData.title = props.data.title;
+    }
+  }, 1000);
 });
 </script>
 <template>
-  <form @submit.prevent.stop="onValidate">
+  <q-form greedy @submit.prevent @validation-success="submit">
     <q-card bordered>
       <div class="col-12 row q-pa-md q-col-gutter-md">
         <div class="col-3">
           <q-input
             :class="inputEdit(isReadonly)"
+            :readonly="isReadonly"
             dense
             outlined
             v-model="formData.rounded"
             label="ครั้งที่"
-            ref="roundedRef"
             for="roundedRef"
             hide-bottom-space
             :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกครั้งที่'}`]"
@@ -283,13 +231,15 @@ onMounted(() => {
         </div>
         <div class="col-3">
           <datepicker
+            :readonly="isReadonly"
             menu-class-name="modalfix"
             v-model="formData.dateMeetingStart"
             :locale="'th'"
             autoApply
             :enableTimePicker="true"
             week-start="0"
-            @update:model-value="checkDate"
+            :class="inputEdit(isReadonly)"
+            :max-date="formData.dateMeetingEnd"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -297,8 +247,8 @@ onMounted(() => {
             }}</template>
             <template #trigger>
               <q-input
+                :readonly="isReadonly"
                 for="selectDate"
-                ref="dateMeetingStartRef"
                 dense
                 outlined
                 :model-value="
@@ -327,6 +277,8 @@ onMounted(() => {
             :enableTimePicker="true"
             week-start="0"
             :min-date="formData.dateMeetingStart"
+            :class="inputEdit(isReadonly)"
+            :readonly="isReadonly"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -334,8 +286,8 @@ onMounted(() => {
             }}</template>
             <template #trigger>
               <q-input
+                :readonly="isReadonly"
                 for="selectDate"
-                ref="dateMeetingEndRef"
                 dense
                 outlined
                 :model-value="
@@ -358,11 +310,11 @@ onMounted(() => {
         <div class="col-6">
           <q-input
             :class="inputEdit(isReadonly)"
+            :readonly="isReadonly"
             dense
             outlined
             v-model="formData.title"
             label="หัวข้อการประชุม"
-            ref="titleRef"
             for="titleRef"
             hide-bottom-space
             :rules="[(val: string) => !!val || `${'กรุณากรอกหัวข้อการประชุม'}`]"
@@ -371,11 +323,11 @@ onMounted(() => {
         <div class="col-12">
           <q-input
             :class="inputEdit(isReadonly)"
+            :readonly="isReadonly"
             dense
             outlined
             v-model="formData.consider"
             label="ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ"
-            ref="considerRef"
             for="considerRef"
             hide-bottom-space
             type="textarea"
@@ -385,11 +337,11 @@ onMounted(() => {
         <div class="col-12">
           <q-input
             :class="inputEdit(isReadonly)"
+            :readonly="isReadonly"
             dense
             outlined
             v-model="formData.period"
             label="ระยะเวลาในการแก้ไขผลงาน"
-            ref="periodRef"
             for="periodRef"
             hide-bottom-space
             type="textarea"
@@ -404,6 +356,7 @@ onMounted(() => {
             <div class="col-12"><q-separator /></div>
             <div class="col-12 q-pa-sm row">
               <q-file
+                :readonly="isReadonly"
                 for="inputFiles"
                 class="col-11"
                 outlined
@@ -434,7 +387,6 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12 q-pa-sm row" v-if="fileData.length > 0">
-              <!-- v-if="file.length > 0" v-else -->
               <q-list
                 v-for="data in fileData"
                 :key="data.id"
@@ -446,7 +398,6 @@ onMounted(() => {
                   <q-item-section>{{ data.fileName }}</q-item-section>
                   <q-space />
                   <q-btn
-                    size="12px"
                     flat
                     round
                     dense
@@ -456,7 +407,7 @@ onMounted(() => {
                     ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                   >
                   <q-btn
-                    size="12px"
+                    v-if="!isReadonly"
                     flat
                     round
                     dense
@@ -476,8 +427,8 @@ onMounted(() => {
         </div>
       </div>
 
-      <q-separator />
-      <div class="row col-12 q-pa-sm">
+      <q-separator v-if="!isReadonly" />
+      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
         <q-space />
         <q-btn
           for="ButtonOnSubmit"
@@ -489,5 +440,5 @@ onMounted(() => {
         >
       </div>
     </q-card>
-  </form>
+  </q-form>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
index ee8d0ada6..aacfec62a 100644
--- a/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
@@ -1,68 +1,30 @@
 <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 { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
-import { useEvaluateMeetingDataStore } from "@/modules/12_evaluatePersonal/store/MeetingStore";
+import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateMeetingDataStore } from "@/modules/12_evaluatePersonal/store/MeetingStore";
+
 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);
+const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
 /**
- *pagination ของตาราง
+ * function fetch ข้อมูลรายการการประชุม
  */
-const pagination = ref({
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-// 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() {
+function getList() {
   showLoader();
-  await http
-    .get(
-      config.API
-        .meeting
-        // currentPage.value,
-        // rowsPerPage.value,
-        // filterKeyword.value
-        ()
-    )
+  http
+    .get(config.API.meeting())
     .then((res) => {
-      // maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = res.data.result;
       dataStore.fetchData(data);
     })
@@ -75,31 +37,23 @@ async function getList() {
 }
 
 /**
- * ลบข้อมูล
- * @param id ไอดีของข้อมูล
+ * ลบรายการการประชุม
+ * @param id รายการการประชุม
  */
 function clickDelete(id: string) {
-  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
-}
-
-/**
- * ลบข้อมูล
- * @param id type
- */
-async function deleteData(id: string) {
-  console.log(id);
-  showLoader();
-  await http
-    .delete(config.API.meetingById(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getList();
-    });
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.meetingById(id))
+      .then(async () => {
+        await getList();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+        showLoader();
+      });
+  });
 }
 
 /**เมื่อเริ่มโหลดหน้า
@@ -107,7 +61,6 @@ async function deleteData(id: string) {
  */
 onMounted(() => {
   getList();
-  // get ข้อมูลแล้วโยนใส่ store
 });
 
 /**
@@ -122,19 +75,22 @@ function resetFilter() {
   }
 }
 
-function filterFn() {
-  getList();
-  console.log("enter", filterKeyword.value);
-}
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 </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>
+      <div v-if="checkPermission($route)?.attrIsCreate">
         <q-btn
           @click="router.push(`/evaluate/meeting/add`)"
-          size="12px"
           flat
           round
           color="add"
@@ -154,7 +110,6 @@ function filterFn() {
         outlined
         debounce="300"
         placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -197,17 +152,6 @@ function filterFn() {
         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 auto-width />
@@ -217,26 +161,50 @@ function filterFn() {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.pervent="
+                  router.push(`/evaluate/meeting-detail/${props.row.id}`)
+                "
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsGet &&
+                  checkPermission($route)?.attrIsUpdate
+                "
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click.pervent="
+                  router.push(`/evaluate/meeting/${props.row.id}`)
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
-                size="12px"
                 flat
                 round
                 color="red"
-                @click="clickDelete(props.row.id)"
+                @click.pervent="clickDelete(props.row.id)"
                 icon="mdi-delete"
               >
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="router.push(`/evaluate/meeting/${props.row.id}`)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -244,7 +212,6 @@ function filterFn() {
                 {{ col.value }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
diff --git a/src/modules/12_evaluatePersonal/router.ts b/src/modules/12_evaluatePersonal/router.ts
index d6e28b61f..3345bd2f1 100644
--- a/src/modules/12_evaluatePersonal/router.ts
+++ b/src/modules/12_evaluatePersonal/router.ts
@@ -7,8 +7,8 @@ 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 directorEditPage = () =>
+//   import("@/modules/12_evaluatePersonal/components/Director/EditPage.vue");
 
 const meetingPage = () =>
   import("@/modules/12_evaluatePersonal/components/Meeting/MainPage.vue");
@@ -58,16 +58,16 @@ export default [
       Role: "STAFF",
     },
   },
-  {
-    path: "/evaluate/director/:id",
-    name: "evaluateDirectorEdit",
-    component: directorEditPage,
-    meta: {
-      Auth: true,
-      Key: "SYS_EVA_INFO",
-      Role: "STAFF",
-    },
-  },
+  // {
+  //   path: "/evaluate/director/:id",
+  //   name: "evaluateDirectorEdit",
+  //   component: directorEditPage,
+  //   meta: {
+  //     Auth: true,
+  //     Key: "SYS_EVA_INFO",
+  //     Role: "STAFF",
+  //   },
+  // },
   {
     path: "/evaluate/meeting",
     name: "evaluateMeeting",
@@ -98,4 +98,14 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/evaluate/meeting-detail/:id",
+    name: "evaluateMeetingdetail",
+    component: meetingEditPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INFO",
+      Role: "STAFF",
+    },
+  },
 ];
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index a9cc7255d..19a94e769 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -249,19 +250,28 @@ onMounted(async () => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width />
             <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"
-              @click="Detailpage(props.row.id)"
-            >
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.stop.prevent="Detailpage(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ (page - 1) * pageSize + props.rowIndex + 1 }}
               </div>