From 572ef1890956d6c0a334ef5dabf9f709f0aac2b6 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 23 Sep 2024 13:40:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableView.vue                  |   6 +-
 .../03_recruiting/components/Table1.vue       |   3 +
 src/modules/03_recruiting/components/top1.vue |  14 +-
 src/modules/03_recruiting/router.ts           |  12 ++
 .../03_recruiting/views/01_compete/Period.vue | 114 +++++++++------
 .../views/02_qualify/DisablePeriod.vue        | 110 ++++++++------
 .../03_recruiting/views/02_qualify/Manage.vue |  23 ++-
 .../03_recruiting/views/02_qualify/Period.vue |  45 ++++--
 .../views/02_qualify/PeriodAdd.vue            | 134 +++++++++---------
 .../03_recruiting/views/03_editor/index.vue   |  54 +++----
 .../components/3_WorkTime/DialogForm.vue      |   2 +-
 .../4_specialTime/DialogApprove.vue           |   2 +-
 12 files changed, 310 insertions(+), 209 deletions(-)

diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 9b7aa4804..59f84c485 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -6,8 +6,8 @@
         v-if="!editvisible == true && publicNoBtn == false"
         flat
         round
-        :disabled="editvisible == true"
-        :color="editvisible == true ? 'grey-7' : 'primary'"
+        :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'"
         @click="edit"
         icon="mdi-pencil-outline"
       >
@@ -234,6 +234,7 @@
       <!-- :rows-per-page-options="[0]" -->
       <template v-slot:header="props">
         <q-tr :props="props">
+          <q-th auto-width v-if="name == 'qualify'" />
           <q-th auto-width v-if="boss == true" />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
@@ -362,6 +363,7 @@ const props = defineProps({
   inputvisible: Array,
   inputvisibleFilter: String,
   editvisible: Boolean,
+  name: String,
   titleText: String,
   optionsFilter: {
     type: Array,
diff --git a/src/modules/03_recruiting/components/Table1.vue b/src/modules/03_recruiting/components/Table1.vue
index 7ebbd1d92..be2919217 100644
--- a/src/modules/03_recruiting/components/Table1.vue
+++ b/src/modules/03_recruiting/components/Table1.vue
@@ -158,12 +158,15 @@ const resetFilter = () => {
   >
     <template v-slot:header="props">
       <q-tr :props="props">
+        <q-th auto-width v-if="name === 'หน่วยงาน'" />
+        <q-th auto-width v-if="name === 'ส่วนราชการ'" />
         <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
         <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
         <q-th auto-width v-if="iconLeft == true" />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
+        <q-th auto-width v-if="name === 'วิธีการชำระ'" />
         <q-th auto-width v-if="name === 'ประวัติการเปลี่ยนชื่อ-นามสกุล'" />
       </q-tr>
     </template>
diff --git a/src/modules/03_recruiting/components/top1.vue b/src/modules/03_recruiting/components/top1.vue
index 1b8f8346a..269e887b5 100644
--- a/src/modules/03_recruiting/components/top1.vue
+++ b/src/modules/03_recruiting/components/top1.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { checkPermission } from "@/utils/permissions";
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute()
+const checkRoutePermisson = ref<boolean>(
+  route.name == "qualifyPeriodEditDetail"
+);
 const props = defineProps({
   header: {
     type: String,
@@ -127,7 +134,7 @@ const addleave = () => {
         :disabled="disable"
         :color="edit ? 'grey-7' : 'primary'"
         @click="ClickEdit"
-        icon="mdi-pencil-outline"
+        icon="mdi-pencil"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
@@ -172,14 +179,11 @@ const addleave = () => {
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-      <!-- <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
-        <q-tooltip>สรุปวันลา</q-tooltip>
-      </q-btn> -->
     </div>
 
     <div class="q-pl-sm" v-else>
       <q-btn
-        v-if="checkPermission($route)?.attrIsUpdate"
+        v-if="checkPermission($route)?.attrIsUpdate && !checkRoutePermisson"
         size="12px"
         flat
         round
diff --git a/src/modules/03_recruiting/router.ts b/src/modules/03_recruiting/router.ts
index d172e55c6..ca802c4ad 100644
--- a/src/modules/03_recruiting/router.ts
+++ b/src/modules/03_recruiting/router.ts
@@ -18,6 +18,8 @@ const QualifyPeriod = () =>
   import("@/modules/03_recruiting/views/02_qualify/Period.vue");
 const QualifyPeriodAdd = () =>
   import("@/modules/03_recruiting/views/02_qualify/PeriodAdd.vue");
+const QualifyPeriodAddDetail = () =>
+  import("@/modules/03_recruiting/views/02_qualify/PeriodAdd.vue");
 const QualifyPeriodStat = () =>
   import("@/modules/03_recruiting/views/02_qualify/PeriodStat.vue");
 const QualifyPeriodStatDisable = () =>
@@ -132,6 +134,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/qualify/period-detail/:id",
+    name: "qualifyPeriodEditDetail",
+    component: QualifyPeriodAddDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_EXAM_SELECT",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/qualify/period/add",
     name: "qualifyPeriodAdd",
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index 92e1d26e6..3e7a0d246 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -431,59 +431,81 @@ onMounted(async () => {
         :titleText="''"
       >
         <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td>
+          <q-tr :props="props">
+            <q-td auto-width>
               <q-btn
+                icon="mdi-dots-horizontal-circle-outline"
+                color="secondary"
+                flat
+                round
+                dense
                 v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
+                  checkPermission($route)?.attrIsCreate ||
+                  checkPermission($route)?.attrIsDelete ||
+                  checkPermission($route)?.attrIsGet ||
+                  checkPermission($route)?.attrIsUpdate
                 "
-                dense
-                size="12px"
-                flat
-                round
-                color="primary"
-                @click="clickEditPeriod(props.row.id)"
-                icon="mdi-pencil-outline"
               >
-                <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)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 100px">
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsGet"
+                      clickable
+                      v-close-popup
+                      @click="clickDetail(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="info" size="xs" name="mdi-eye" />
+                      </q-item-section>
+                      <q-item-section>รายละเอียด</q-item-section>
+                    </q-item>
 
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                color="info"
-                flat
-                dense
-                round
-                size="12px"
-                icon="mdi-history"
-                @click="clickHistory(props.row.id)"
-              >
-                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+                    <q-item
+                      v-if="
+                        checkPermission($route)?.attrIsUpdate &&
+                        checkPermission($route)?.attrIsGet
+                      "
+                      clickable
+                      v-close-popup
+                      @click="clickEditPeriod(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="edit" size="xs" name="mdi-pencil" />
+                      </q-item-section>
+                      <q-item-section>แก้ไขข้อมูล</q-item-section>
+                    </q-item>
+
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsDelete"
+                      clickable
+                      v-close-popup
+                      @click="clickDelete(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบข้อมูล</q-item-section>
+                    </q-item>
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsGet"
+                      clickable
+                      v-close-popup
+                      @click="clickHistory(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon
+                          color="deep-purple"
+                          size="xs"
+                          name="mdi-history"
+                        />
+                      </q-item-section>
+                      <q-item-section>แสดงประวัติการทำงาน</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="
-                checkPermission($route)?.attrIsGet
-                  ? clickDetail(props.row.id)
-                  : undefined
-              "
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index 85dd38dc7..1b5a7f7bd 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -398,57 +398,81 @@ onMounted(async () => {
         :titleText="''"
       >
         <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td>
               <q-btn
+                icon="mdi-dots-horizontal-circle-outline"
+                color="secondary"
+                flat
+                round
+                dense
                 v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
+                  checkPermission($route)?.attrIsCreate ||
+                  checkPermission($route)?.attrIsDelete ||
+                  checkPermission($route)?.attrIsGet ||
+                  checkPermission($route)?.attrIsUpdate
                 "
-                dense
-                size="12px"
-                flat
-                round
-                color="primary"
-                @click="clickEditPeriod(props.row.id)"
-                icon="mdi-pencil-outline"
               >
-                <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)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 100px">
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsGet"
+                      clickable
+                      v-close-popup
+                      @click="clickDetail(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="info" size="xs" name="mdi-eye" />
+                      </q-item-section>
+                      <q-item-section>รายละเอียด</q-item-section>
+                    </q-item>
 
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                color="info"
-                flat
-                dense
-                round
-                size="12px"
-                icon="mdi-history"
-                @click="clickHistory(props.row.id)"
-              >
-                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+                    <q-item
+                      v-if="
+                        checkPermission($route)?.attrIsUpdate &&
+                        checkPermission($route)?.attrIsGet
+                      "
+                      clickable
+                      v-close-popup
+                      @click="clickEditPeriod(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="edit" size="xs" name="mdi-pencil" />
+                      </q-item-section>
+                      <q-item-section>แก้ไขข้อมูล</q-item-section>
+                    </q-item>
+
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsDelete"
+                      clickable
+                      v-close-popup
+                      @click="clickDelete(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบข้อมูล</q-item-section>
+                    </q-item>
+                    <q-item
+                      v-if="checkPermission($route)?.attrIsGet"
+                      clickable
+                      v-close-popup
+                      @click="clickHistory(props.row.id)"
+                    >
+                      <q-item-section style="min-width: 0px" avatar>
+                        <q-icon
+                          color="deep-purple"
+                          size="xs"
+                          name="mdi-history"
+                        />
+                      </q-item-section>
+                      <q-item-section>แสดงประวัติการทำงาน</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="
-                checkPermission($route)?.attrIsGet && clickDetail(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>
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index 97acc01a0..7cf1b9d20 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -215,15 +215,24 @@ onMounted(async () => {
       :pagination="initialPagination"
       :nornmalData="true"
       :paging="true"
+      name="qualify"
     >
       <template #columns="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
-          >
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsGet"
+              flat
+              dense
+              round
+              color="info"
+              icon="mdi-eye"
+              @click="viewDetail(props.row)"
+            >
+              <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'">
               {{ props.rowIndex + 1 }}
             </div>
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index 4d6139a4f..20553f9c1 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -276,6 +276,10 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+function openDetail(col: ResponsePeriodExam) {
+  router.push(`/qualify/period-detail/${col.id}`);
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -302,8 +306,34 @@ onMounted(async () => {
         :titleText="''"
       >
         <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td>
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click="openDetail(props.row)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click="clickEdit(props.row)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+
               <q-btn
                 v-if="checkPermission($route)?.attrIsDelete"
                 dense
@@ -317,16 +347,7 @@ onMounted(async () => {
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="
-                checkPermission($route)?.attrIsGet
-                  ? clickEdit(props.row)
-                  : undefined
-              "
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'" class="table_ellipsis2">
                 {{ props.rowIndex + 1 }}
               </div>
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index e712e3953..6626eefae 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -31,6 +31,9 @@ const route = useRoute();
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
 
+const checkRoutePermisson = ref<boolean>(
+  route.name == "qualifyPeriodEditDetail"
+); //เช็คชื่อ route
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -378,7 +381,7 @@ function filterSelector(val: any, update: Function, refData: string) {
 
 /**
  * update ปี
- * @param e ปี 
+ * @param e ปี
  */
 async function updateYear(e: number) {
   yearly.value = e;
@@ -517,7 +520,7 @@ async function fileUploadDoc(files: any) {
 }
 
 /**
- * ลบไฟล์จาก array 
+ * ลบไฟล์จาก array
  * @param files ไฟล์
  */
 async function fileRemoveDoc(files: any) {
@@ -562,7 +565,7 @@ async function fileUploadImg(files: any) {
 }
 
 /**
- * ลบไฟล์รูปจาก array 
+ * ลบไฟล์รูปจาก array
  * @param files รูป
  */
 async function fileRemoveImg(files: any) {
@@ -734,7 +737,13 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="clickBack"
     />
-    {{ edit ? `แก้ไขรอบ` : "เพิ่มรอบคัดเลือก" }}
+    {{
+      checkRoutePermisson
+        ? "รายละเอียด"
+        : edit
+        ? `แก้ไขรอบ`
+        : "เพิ่มรอบคัดเลือก"
+    }}
     {{
       edit && announcementExam
         ? `${name} ครั้งที่ ${roundRaw}/${
@@ -763,6 +772,7 @@ onMounted(async () => {
               v-model="name"
               label="ชื่อรอบคัดเลือก/ชื่อประกาศ"
               dense
+              :readonly="checkRoutePermisson"
               lazy-rules
               :rules="[
                 (val) => !!val || `${'กรุณากรอกชื่อรอบคัดเลือก/ชื่อประกาศ'}`,
@@ -773,6 +783,7 @@ onMounted(async () => {
             <q-input
               outlined
               v-model="round"
+              :readonly="checkRoutePermisson"
               type="number"
               label="รอบการสอบ(ครั้ง)"
               dense
@@ -784,6 +795,7 @@ onMounted(async () => {
             <q-input
               outlined
               v-model="fee"
+              :readonly="checkRoutePermisson"
               type="number"
               label="ค่าธรรมเนียม"
               dense
@@ -799,6 +811,7 @@ onMounted(async () => {
               menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
+              :readonly="checkRoutePermisson"
               autoApply
               year-picker
               :enableTimePicker="false"
@@ -812,6 +825,7 @@ onMounted(async () => {
                 <q-input
                   dense
                   outlined
+                  :readonly="checkRoutePermisson"
                   :model-value="yearly + 543"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                   :label="`${'ปีงบประมาณ'}`"
@@ -827,6 +841,7 @@ onMounted(async () => {
               :locale="'th'"
               autoApply
               borderless
+              :readonly="checkRoutePermisson"
               :enableTimePicker="false"
               week-start="0"
             >
@@ -840,6 +855,7 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
+                  :readonly="checkRoutePermisson"
                   class="full-width datepicker q-mb-md"
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
@@ -863,6 +879,7 @@ onMounted(async () => {
               menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
+              :readonly="checkRoutePermisson"
               autoApply
               borderless
               range
@@ -879,6 +896,7 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
+                  :readonly="checkRoutePermisson"
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
@@ -903,6 +921,7 @@ onMounted(async () => {
               :locale="'th'"
               autoApply
               clearValue
+              :readonly="checkRoutePermisson"
               borderless
               range
               :enableTimePicker="false"
@@ -918,6 +937,7 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
+                  :readonly="checkRoutePermisson"
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
@@ -943,6 +963,7 @@ onMounted(async () => {
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
+              :readonly="checkRoutePermisson"
               :locale="'th'"
               autoApply
               borderless
@@ -958,6 +979,7 @@ onMounted(async () => {
               </template>
               <template #trigger>
                 <q-input
+                  :readonly="checkRoutePermisson"
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
@@ -984,6 +1006,7 @@ onMounted(async () => {
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply
+              :readonly="checkRoutePermisson"
               borderless
               :enableTimePicker="false"
               week-start="0"
@@ -997,6 +1020,7 @@ onMounted(async () => {
               <template #trigger>
                 <q-input
                   outlined
+                  :readonly="checkRoutePermisson"
                   dense
                   class="full-width datepicker q-mb-md"
                   :model-value="
@@ -1018,55 +1042,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-          <!-- <div class="col-xs-12 col-sm-3 col-md-3">
-            <selector
-              outlined
-              v-model="category"
-              :options="categoryOptions"
-              label="สังกัด"
-              clearable
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-              dense
-              lazy-rules
-              :rules="[(val:any) => !!val || `${'กรุณาเลือกสังกัด'}`]"
-            ></selector>
-          </div> -->
           <div class="col-12" v-if="announcementExam">
-            <!-- <div class="row q-col-gutter-x-sm">
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  outlined
-                  v-model="organizationShortName"
-                  :options="governmentCodeOption"
-                  label="รหัสส่วนราชการ"
-                  clearable
-                  option-value="id"
-                  option-label="name"
-                  dense
-                  lazy-rules
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
-                  @update:model-value="(value:any) => selectGovernmentCode(value)"
-                ></selector>
-              </div>
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  outlined
-                  v-model="organizationName"
-                  :options="organizationNameOptions"
-                  label="หน่วยงาน"
-                  clearable
-                  option-value="id"
-                  option-label="name"
-                  dense
-                  lazy-rules
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                  @update:model-value="(value:any) => selectOrganization(value)"
-                ></selector>
-              </div>
-            </div> -->
             <div class="col-12 q-mb-sm">
               <q-separator size="5px" color="grey-2" />
             </div>
@@ -1091,6 +1067,7 @@ onMounted(async () => {
                       <q-btn
                         color="red"
                         flat
+                        v-if="!checkRoutePermisson"
                         dense
                         round
                         size="14px"
@@ -1102,6 +1079,7 @@ onMounted(async () => {
                       <q-input
                         outlined
                         dense
+                        :readonly="checkRoutePermisson"
                         lazy-rules
                         v-model="props.row.code"
                         :rules="[
@@ -1119,6 +1097,7 @@ onMounted(async () => {
                       <selector
                         class=""
                         outlined
+                        :readonly="checkRoutePermisson"
                         use-input
                         v-model="props.row.position"
                         :options="positionPathOptions"
@@ -1158,6 +1137,7 @@ onMounted(async () => {
                         outlined
                         use-input
                         v-model="props.row.level"
+                        :readonly="checkRoutePermisson"
                         :options="positionLevelOptions"
                         option-value="id"
                         option-label="name"
@@ -1194,12 +1174,14 @@ onMounted(async () => {
                         v-model="props.row.highDegree"
                         label="ประเภททั่วไป"
                         color="teal"
+                        :disable="checkRoutePermisson"
                         val="0"
                       />
                       <q-radio
                         v-model="props.row.highDegree"
                         label="ประเภทวิชาการ"
                         color="teal"
+                        :disable="checkRoutePermisson"
                         val="1"
                       />
                     </q-td>
@@ -1209,6 +1191,7 @@ onMounted(async () => {
                         outlined
                         v-model="props.row.type"
                         :options="examTypeOptions"
+                        :readonly="checkRoutePermisson"
                         option-value="id"
                         option-label="name"
                         dense
@@ -1237,7 +1220,7 @@ onMounted(async () => {
                     val="payment1"
                     color="blue"
                     class="q-mr-md"
-                    :disable="fee <= 0"
+                    :disable="fee <= 0 || checkRoutePermisson"
                   />
                   <q-item-section avatar>
                     <q-avatar size="28px">
@@ -1259,7 +1242,7 @@ onMounted(async () => {
                     val="payment2"
                     color="blue"
                     class="q-mr-md"
-                    :disable="fee <= 0"
+                    :disable="fee <= 0 || checkRoutePermisson"
                   />
                   <q-item-section avatar>
                     <q-icon name="mdi-cash" color="positive" size="33px" />
@@ -1281,7 +1264,7 @@ onMounted(async () => {
                         v-model:inputfilter="filterPayment"
                         v-model:inputvisible="visibleColumnsPayment"
                         :add="clickAddPayment"
-                        name=""
+                        name="วิธีการชำระ"
                         icon=""
                         :statusEdit="false"
                         :headerShow="false"
@@ -1293,6 +1276,7 @@ onMounted(async () => {
                                 class=""
                                 outlined
                                 hide-bottom-space
+                                :readonly="checkRoutePermisson"
                                 v-model="props.row.accountNumber"
                                 dense
                                 lazy-rules
@@ -1309,6 +1293,7 @@ onMounted(async () => {
                                 class=""
                                 outlined
                                 hide-bottom-space
+                                :readonly="checkRoutePermisson"
                                 v-model="props.row.bankName"
                                 dense
                                 lazy-rules
@@ -1323,6 +1308,7 @@ onMounted(async () => {
                               <q-input
                                 class=""
                                 outlined
+                                :readonly="checkRoutePermisson"
                                 hide-bottom-space
                                 v-model="props.row.accountName"
                                 dense
@@ -1336,6 +1322,7 @@ onMounted(async () => {
                             </q-td>
                             <q-td auto-width>
                               <q-btn
+                                v-if="!checkRoutePermisson"
                                 color="red"
                                 flat
                                 dense
@@ -1365,6 +1352,7 @@ onMounted(async () => {
                   color="gray"
                   type="file"
                   flat
+                  :readonly="checkRoutePermisson"
                   ref="uploader"
                   class="full-width"
                   text-color="dark"
@@ -1381,7 +1369,9 @@ onMounted(async () => {
                       class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                     >
                       <q-btn
-                        v-if="scope.queuedFiles.length > 0"
+                        v-if="
+                          scope.queuedFiles.length > 0 && !checkRoutePermisson
+                        "
                         icon="clear_all"
                         @click="scope.removeQueuedFiles"
                         round
@@ -1391,7 +1381,9 @@ onMounted(async () => {
                         <q-tooltip>ลบทั้งหมด</q-tooltip>
                       </q-btn>
                       <q-btn
-                        v-if="scope.uploadedFiles.length > 0"
+                        v-if="
+                          scope.uploadedFiles.length > 0 && !checkRoutePermisson
+                        "
                         icon="done_all"
                         @click="scope.removeUploadedFiles"
                         round
@@ -1417,7 +1409,7 @@ onMounted(async () => {
                         </div>
                       </div>
                       <q-btn
-                        v-if="scope.canAddFiles"
+                        v-if="scope.canAddFiles && !checkRoutePermisson"
                         type="a"
                         icon="add_box"
                         @click="scope.pickFiles"
@@ -1429,7 +1421,7 @@ onMounted(async () => {
                         <q-tooltip>เลือกไฟล์</q-tooltip>
                       </q-btn>
                       <q-btn
-                        v-if="scope.isUploading"
+                        v-if="scope.isUploading && !checkRoutePermisson"
                         icon="clear"
                         @click="scope.abort"
                         round
@@ -1484,7 +1476,7 @@ onMounted(async () => {
                           round
                           color="red"
                           icon="mdi-delete-outline"
-                          v-if="edit"
+                          v-if="edit && !checkRoutePermisson"
                           @click="deleteDocData(file.id)"
                         >
                           <q-tooltip>ลบไฟล์</q-tooltip>
@@ -1504,6 +1496,7 @@ onMounted(async () => {
                   flat
                   ref="uploader"
                   class="full-width"
+                  :readonly="checkRoutePermisson"
                   text-color="dark"
                   :max-size="10000000"
                   accept=".jpg,.png,.pdf,.csv,.doc,.docx"
@@ -1518,7 +1511,9 @@ onMounted(async () => {
                       class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                     >
                       <q-btn
-                        v-if="scope.queuedFiles.length > 0"
+                        v-if="
+                          scope.queuedFiles.length > 0 && !checkRoutePermisson
+                        "
                         icon="clear_all"
                         @click="scope.removeQueuedFiles"
                         round
@@ -1528,7 +1523,9 @@ onMounted(async () => {
                         <q-tooltip>ลบทั้งหมด</q-tooltip>
                       </q-btn>
                       <q-btn
-                        v-if="scope.uploadedFiles.length > 0"
+                        v-if="
+                          scope.uploadedFiles.length > 0 && !checkRoutePermisson
+                        "
                         icon="done_all"
                         @click="scope.removeUploadedFiles"
                         round
@@ -1554,7 +1551,7 @@ onMounted(async () => {
                         </div>
                       </div>
                       <q-btn
-                        v-if="scope.canAddFiles"
+                        v-if="scope.canAddFiles && !checkRoutePermisson"
                         type="a"
                         icon="add_box"
                         @click="scope.pickFiles"
@@ -1566,7 +1563,7 @@ onMounted(async () => {
                         <q-tooltip>เลือกไฟล์</q-tooltip>
                       </q-btn>
                       <q-btn
-                        v-if="scope.isUploading"
+                        v-if="scope.isUploading && !checkRoutePermisson"
                         icon="clear"
                         @click="scope.abort"
                         round
@@ -1621,7 +1618,7 @@ onMounted(async () => {
                           round
                           color="red"
                           icon="mdi-delete-outline"
-                          v-if="edit"
+                          v-if="edit && !checkRoutePermisson"
                           @click="deleteDocData(file.id)"
                         >
                           <q-tooltip>ลบไฟล์</q-tooltip>
@@ -1643,6 +1640,7 @@ onMounted(async () => {
               :dense="$q.screen.lt.md"
               toolbar-text-color="blue-grey-10"
               toolbar-bg="blue-grey-2"
+              :readonly="checkRoutePermisson"
               toolbar-toggle-color="blue-grey-8"
               class="editor"
               :toolbar="[
@@ -1701,6 +1699,7 @@ onMounted(async () => {
           <div class="col-12 q-mt-md">
             <q-input
               outlined
+              :readonly="checkRoutePermisson"
               v-model="note"
               label="หมายเหตุ"
               dense
@@ -1720,6 +1719,7 @@ onMounted(async () => {
               :dense="$q.screen.lt.md"
               toolbar-text-color="blue-grey-10"
               toolbar-bg="blue-grey-2"
+              :readonly="checkRoutePermisson"
               toolbar-toggle-color="blue-grey-8"
               class="editor"
               :toolbar="[
@@ -1784,6 +1784,7 @@ onMounted(async () => {
               v-model="editorConfirm"
               :dense="$q.screen.lt.md"
               toolbar-text-color="blue-grey-10"
+              :readonly="checkRoutePermisson"
               toolbar-bg="blue-grey-2"
               toolbar-toggle-color="blue-grey-8"
               class="editor"
@@ -1842,10 +1843,11 @@ onMounted(async () => {
           </div>
         </div>
       </q-card-section>
-      <q-separator />
+      <q-separator v-if="!checkRoutePermisson" />
       <q-card-actions class="text-primary q-py-sm">
         <q-space />
         <q-btn
+          v-if="!checkRoutePermisson"
           flat
           round
           color="public"
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index aace821a4..810433e08 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -360,9 +360,6 @@ async function saveDataAgency(data: DataLink[], del: string) {
 async function saveDataGoverment(data: DataLink[], del: string) {
   dialogform.value?.validate().then(async (result: boolean) => {
     if (result) {
-      //   if (data.length === 0) {
-      //     dialogMessageNotify($q, "ลบข้อมูลต้องมี 2 ลิ้งอย่างน้อย 2 ลิ้ง");
-      //   } else
       if (del) {
         dialogRemove($q, () => dataPost(data));
       } else {
@@ -853,7 +850,6 @@ onMounted(async () => {
               :disable="statusHeader()"
               class="q-pt-sm"
             />
-            <!-- :disable="true" -->
             <q-input
               v-model="web.thai"
               :class="getClass(enable.web)"
@@ -1116,17 +1112,20 @@ onMounted(async () => {
           >
             <template #columns="props">
               <q-tr :props="props">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  @click="
-                    checkPermission($route)?.attrIsUpdate
-                      ? selectData(props.row.id, false)
-                      : undefined
-                  "
-                  class="cursor-pointer"
-                >
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsUpdate"
+                    @click="selectData(props.row.id, false)"
+                    flat
+                    dense
+                    round
+                    color="primary"
+                    icon="edit"
+                  >
+                    <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 == 'createdAt'" class="">
                     {{ date2Thai(col.value) }}
                   </div>
@@ -1159,17 +1158,20 @@ onMounted(async () => {
           >
             <template #columns="props">
               <q-tr :props="props">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  @click="
-                    checkPermission($route)?.attrIsUpdate
-                      ? selectData(props.row.id, true)
-                      : undefined
-                  "
-                  class="cursor-pointer"
-                >
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsUpdate"
+                    @click="selectData(props.row.id, true)"
+                    flat
+                    dense
+                    round
+                    color="primary"
+                    icon="edit"
+                  >
+                    <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 == 'createdAt'" class="">
                     {{ date2Thai(col.value) }}
                   </div>
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index ef074db24..fb6789972 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -433,7 +433,7 @@ $toggle-control-ease: ease-in;
 
 // These are our computed variables
 // change at your own risk.
-$toggle-radius: $toggle-height / 2;
+$toggle-radius: ($toggle-height / 2);
 $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
 
 .toggle-control {
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 1ad16911c..18b7d9ac3 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -365,7 +365,7 @@ $toggle-control-ease: ease-in;
 
 // These are our computed variables
 // change at your own risk.
-$toggle-radius: $toggle-height / 2;
+$toggle-radius: ($toggle-height / 2);
 $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
 
 .toggle-control {