From 1dcefbd40a93202f28c132f7b7d1736d9d37a601 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 9 Aug 2024 11:07:14 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
 =?UTF-8?q?=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B7=E0=B9=89=E0=B8=99=E0=B8=90=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B8=B4=E0=B8=97=E0=B8=98=E0=B8=B4=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../6_BasicInformation/Channel/AddPage.vue    |  72 ------
 .../6_BasicInformation/Channel/EditPage.vue   |  64 -----
 .../6_BasicInformation/Channel/Form.vue       |  85 -------
 .../6_BasicInformation/Channel/MainPage.vue   | 149 ++++++++++-
 .../Director/DialogEdit.vue                   | 237 ++++++++++++++++++
 .../6_BasicInformation/Director/MainPage.vue  |  90 +++++--
 6 files changed, 446 insertions(+), 251 deletions(-)
 delete mode 100644 src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
 delete mode 100644 src/modules/11_discipline/components/6_BasicInformation/Channel/EditPage.vue
 delete mode 100644 src/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue
 create mode 100644 src/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue

diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
deleted file mode 100644
index f7ccfbf1b..000000000
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import Form from '@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue'
-
-/**
- * รวมตัวแปร
- */
-const $q = useQuasar()
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  dialogConfirm,
-  success,
-} = mixin;
-
-const router = useRouter();
-const route = useRoute();
-const edit = ref<boolean>(false);
-
-/* บันทึกข้อมูล**/
-function onSubmit(channelReturn:string){
-  dialogConfirm($q,()=>saveData(channelReturn))
-}
-
-function saveData(channelReturn:string){
-  showLoader()
-  http
-  .post(config.API.complaintChannel(),{
-    name:channelReturn
-  })
-  .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/discipline/channel`);
-    });
-};
-
-/**
- * ย้อนกลับหน้ารายการ
- */
-function clickBack(){
-  router.push(`/discipline/channel`);
-};
-</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="clickBack"
-      />
-      {{ edit ? "ช่องทางการร้องเรียน" : "เพิ่มช่องทางการร้องเรียน" }}
-    </div>
-    <Form :on-submit="onSubmit" />
-  </div>
-</template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/EditPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/EditPage.vue
deleted file mode 100644
index 45e3650c2..000000000
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/EditPage.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import Form from "@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue";
-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 typeId = ref<string>(route.params.id.toString());
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, showLoader, dialogConfirm, success } = mixin;
-
-/**
- * บันทึกข้อมูลที่เเก้ไข
- * @param id ระบุ บุคคล
- */
-function onSubmit(type:string) {
-  dialogConfirm($q, () => putData(type));
-}
-
-/**
- * อัปเดตข้อมูล
- * @param type ช่องทางการร้องเรียน
- */
-function putData(type: string) {
-  showLoader();
-  http
-    .put(config.API.complaintChannelbyId(typeId.value), {
-      name:type
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/discipline/channel`);
-    });
-}
-</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(`/discipline/channel`)"
-      />
-      แก้ไขช่องทางการร้องเรียน
-    </div>
-
-    <Form :on-submit="onSubmit"/>
-  </div>
-</template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue
deleted file mode 100644
index 2526d688c..000000000
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
-
-const dataStore = useDisciplineChannelDataStore();
-const channel = ref<string>(dataStore.type);
-const channelRef = ref<any>();
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-/**
- * รับ props มาจาก page หลัก
- */
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
-
-/**
- * เช็คข้อมูลจาก props
- * เมื่อมีข้อมูล
- * เก็บข้อมูลลง formData
- */
-
-/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function save() {
-  channelRef.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (channel.value) {
-        props.onSubmit(channel.value);
-      }
-    }
-  });
-}
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-</script>
-<template>
-  <q-form ref="channelRef">
-    <div class="col-12">
-      <q-card bordered>
-        <div class="col-12 row q-col-gutter-md q-pa-md">
-          <div class="col-xs-12 col-sm-12 row">
-            <q-separator />
-            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-input
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                v-model="channel"
-                for="channel"
-                hide-bottom-space
-                label="ชื่อช่องทาง"
-                lazy-rules
-                :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"
-            label="บันทึก"
-            color="public"
-            @click="save"
-          >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </div>
-      </q-card>
-    </div>
-  </q-form>
-</template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index cc92edf38..bf6c8b280 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -9,6 +9,14 @@ import http from "@/plugins/http";
 import type { typeItem } from "@/modules/11_discipline/interface/response/channel";
 
 import { checkPermission } from "@/utils/permissions";
+import Header from "@/components/DialogHeader.vue";
+
+const modal = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const isRead = ref<boolean>(false);
+const isId = ref<string>("");
+const channel = ref<string>("");
+
 const dataStore = useDisciplineChannelDataStore();
 const mixin = useCounterMixin();
 const { dialogRemove, showLoader, messageError, hideLoader, success } = mixin;
@@ -39,9 +47,27 @@ const pagination = ref({
 /**
  * clickไปหน้าเพิ่มchanel
  */
-function clickAdd() {
-  dataStore.getType("");
-  router.push(`/discipline/channel/add`);
+function clickAdd(check: boolean) {
+  modal.value = true;
+  isEdit.value = check;
+}
+/**
+ * clickไปหน้าเพิ่มchanel
+ */
+function clickEdit(check: boolean, id: string, name: string) {
+  modal.value = true;
+  isEdit.value = check;
+  isId.value = id;
+  channel.value = name;
+}
+/**
+ * clickไปหน้าเพิ่มchanel
+ */
+function clickRead(check: boolean, name: string) {
+  modal.value = true;
+  isEdit.value = check;
+  isRead.value = true;
+  channel.value = name;
 }
 
 /** get data */
@@ -96,6 +122,42 @@ function editPage(data: typeItem) {
   dataStore.getType(data.name);
   router.push(`/discipline/channel/${data.id}`);
 }
+
+function closeDialog() {
+  modal.value = false;
+  channel.value = "";
+  isId.value = "";
+  isRead.value = false;
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function onSubmit() {
+  const url = isEdit.value
+    ? config.API.complaintChannelbyId(isId.value)
+    : config.API.complaintChannel();
+  showLoader();
+  http[isEdit.value ? "put" : "post"](url, {
+    name: channel.value,
+  })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getComplaintChanal();
+      closeDialog();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**เมื่อเริ่มโหลดหน้า เรียกใช้ฟังชั่น*/
 onMounted(() => {
   getComplaintChanal();
@@ -109,9 +171,9 @@ onMounted(() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
-        v-if="checkPermission($route)?.attrIsCreate"
-          @click="clickAdd()"
-          size="12px"
+          v-if="checkPermission($route)?.attrIsCreate"
+          @click="clickAdd(false)"
+          dense
           flat
           round
           color="add"
@@ -172,18 +234,43 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width v-if="checkPermission($route)?.attrIsDelete"/>
+            <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-if="checkPermission($route)?.attrIsDelete">
+          <q-tr :props="props">
+            <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                dense
+                flat
+                round
+                color="info"
+                @click="clickRead(true, props.row.name)"
+                icon="mdi-eye"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsGet &&
+                  checkPermission($route)?.attrIsUpdate
+                "
+                dense
+                flat
+                round
+                color="edit"
+                @click="clickEdit(true, props.row.id, props.row.name)"
+                icon="edit"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
-                size="12px"
                 flat
                 round
                 color="red"
@@ -197,7 +284,6 @@ onMounted(() => {
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="checkPermission($route)?.attrIsUpdate ? editPage(props.row):''"
             >
               <div v-if="col.name === 'no'">
                 {{ props.rowIndex + 1 }}
@@ -206,12 +292,51 @@ onMounted(() => {
                 {{ col.value ?? "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
     </div>
   </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 50%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="
+            isRead
+              ? 'รายละเอียดช่องทางการร้องเรียน'
+              : isEdit
+              ? 'แก้ไขช่องทางการร้องเรียน'
+              : 'เพิ่มช่องทางการร้องเรียน'
+          "
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <q-input
+            :class="inputEdit(false)"
+            dense
+            outlined
+            :readonly="isRead"
+            v-model="channel"
+            for="channel"
+            hide-bottom-space
+            label="ชื่อช่องทาง"
+            lazy-rules
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
+          />
+        </q-card-section>
+        <q-separator v-if="!isRead" />
+
+        <q-card-actions align="right" v-if="!isRead">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue
new file mode 100644
index 000000000..c1217765b
--- /dev/null
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { FormData } from "@/modules/11_discipline/interface/request/director";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import Header from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
+const isReadonly = ref<boolean>(false);
+
+const modal = defineModel<boolean>("modal", { required: true });
+const personalId = defineModel<string>("personalId", { required: true });
+const isEdit = defineModel<boolean>("isEdit", { required: true });
+
+const props = defineProps({
+  getList: Function,
+});
+const data = reactive<FormData>({
+  personalId: "",
+  prefix: "",
+  firstname: "",
+  lastname: "",
+  position: "",
+  phone: "",
+  email: "",
+  qualification: "",
+});
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function closeDialog() {
+  modal.value = false;
+  personalId.value = "";
+  data.personalId = "";
+  data.prefix = "";
+  data.firstname = "";
+  data.lastname = "";
+  data.position = "";
+  data.email = "";
+  data.phone = "";
+  data.qualification = "";
+}
+
+function onSubmit() {
+  showLoader();
+  http
+    .put(config.API.directorbyId(personalId.value), {
+      prefix: data.prefix,
+      firstName: data.firstname,
+      lastName: data.lastname,
+      position: data.position,
+      email: data.email,
+      phone: data.phone,
+      qualification: data.qualification,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.getList?.()
+      closeDialog();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดึงค่าจาก api
+ */
+async function fetchData() {
+  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;
+      data.qualification = dataApi.qualification;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
+ */
+watch(
+  () => modal.value,
+  (n) => {
+    if (n) {
+      fetchData();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="`${isEdit ? 'แก้ไข' : 'รายละเอียด'}รายชื่อกรรมการ`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-3">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                :readonly="!isEdit"
+                v-model="data.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
+                :readonly="!isEdit"
+                v-model="data.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
+                :readonly="!isEdit"
+                v-model="data.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
+                :readonly="!isEdit"
+                v-model="data.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
+                :readonly="!isEdit"
+                v-model="data.phone"
+                label="เบอร์โทร"
+                ref="phoneRef"
+                for="phoneRef"
+                type="tel"
+                mask="##########"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                v-model="data.email"
+                :readonly="!isEdit"
+                label="อีเมล"
+                ref="emailRef"
+                hide-bottom-space
+                for="emailRef"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                label="คุณวุฒิ"
+                type="textarea"
+                dense
+                :readonly="!isEdit"
+                outlined
+                v-model="data.qualification"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator v-if="isEdit" />
+
+        <q-card-actions align="right" v-if="isEdit">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 7dafa4016..5baaf3e31 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -9,12 +9,15 @@ import DialogTotal from "@/modules/11_discipline/components/6_BasicInformation/D
 import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
 
 import { checkPermission } from "@/utils/permissions";
+import DialogEdit from "@/modules/11_discipline/components/6_BasicInformation/Director/DialogEdit.vue";
+
 const $q = useQuasar();
 const dataStore = useDisciplineDirectorDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
 const titleInvestigate = ref<string>("");
+const personalId = ref<string>("");
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
@@ -22,6 +25,8 @@ const rowsPerPage = ref<number>(10);
 const totalList = ref<number>(0);
 
 const modalDetail = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const modalEdit = ref<boolean>(false);
 const type = ref<string>("");
 const dataPopUp = ref<DirectorRowsResponse>();
 /**
@@ -132,6 +137,13 @@ function openDetail(data: DirectorRowsResponse, typeChange: string) {
 function closeDetail() {
   modalDetail.value = false;
 }
+
+function onEdit(id: string, check: boolean) {
+  modalEdit.value = true;
+  personalId.value = id;
+  isEdit.value = check;
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -148,10 +160,10 @@ onMounted(() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
-        v-if="checkPermission($route)?.attrIsCreate"
+          v-if="checkPermission($route)?.attrIsCreate"
           @click="$router.push(`/discipline/director/add`)"
-          size="12px"
           flat
+          dense
           round
           color="add"
           icon="mdi-plus"
@@ -225,18 +237,43 @@ onMounted(() => {
         </template>
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width v-if="checkPermission($route)?.attrIsDelete"/>
+            <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 auto-width v-if="checkPermission($route)?.attrIsDelete">
+          <q-tr :props="props">
+            <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                dense
+                flat
+                round
+                color="info"
+                @click="onEdit(props.row.id, false)"
+                icon="mdi-eye"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                dense
+                flat
+                round
+                color="edit"
+                @click="onEdit(props.row.id, true)"
+                icon="edit"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
-                size="12px"
                 flat
                 round
                 color="red"
@@ -247,10 +284,7 @@ onMounted(() => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div
-                v-if="col.name == 'no'"
-                @click="$router.push(`/discipline/director/${props.row.id}`)"
-              >
+              <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
               <div
@@ -258,8 +292,16 @@ onMounted(() => {
                   col.name == 'totalInvestigate' &&
                   props.row.totalInvestigate > 0
                 "
-                class="text-blue"
-                @click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'investigate'):''"
+                :class="
+                  checkPermission($route)?.attrIsGet
+                    ? 'text-blue cursor-pointer'
+                    : ''
+                "
+                @click="
+                  checkPermission($route)?.attrIsGet
+                    ? openDetail(props.row, 'investigate')
+                    : ''
+                "
               >
                 {{ props.row.totalInvestigate }}
               </div>
@@ -268,15 +310,20 @@ onMounted(() => {
                   col.name == 'totalDisciplinary' &&
                   props.row.totalDisciplinary > 0
                 "
-                class="text-blue"
-                @click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'disciplinary'):''"
+                :class="
+                  checkPermission($route)?.attrIsGet
+                    ? 'text-blue cursor-pointer'
+                    : ''
+                "
+                @click="
+                  checkPermission($route)?.attrIsGet
+                    ? openDetail(props.row, 'disciplinary')
+                    : ''
+                "
               >
                 {{ props.row.totalDisciplinary }}
               </div>
-              <div
-                v-else
-                @click="checkPermission($route)?.attrIsUpdate ? $router.push(`/discipline/director/${props.row.id}`):''"
-              >
+              <div v-else>
                 {{ col.value ?? "-" }}
               </div>
             </q-td>
@@ -293,4 +340,11 @@ onMounted(() => {
     :type="type"
     :data-list="dataPopUp"
   />
+
+  <DialogEdit
+    v-model:modal="modalEdit"
+    v-model:personalId="personalId"
+    :isEdit="isEdit"
+    :getList="getList"
+  />
 </template>