From c11ff006ebb2fbbc12a47715d149955692c6fdba Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 9 Sep 2024 14:59:32 +0700
Subject: [PATCH] Refactoring code module 02_users

---
 .../components/Permissions/DialogAdd.vue      |    5 +-
 .../components/Roles/DialogAddRole.vue        |   29 +-
 .../{DialogAddUser.vue => DialogFormUser.vue} |   86 +-
 .../components/Users/DialogRoleUser.vue       |   42 +-
 src/modules/02_users/router.ts                |   12 +-
 .../views/{listsUser.vue => 01_user.vue}      |   90 +-
 ...stsRole.vue => 02_rolesAndPermissions.vue} |   50 +-
 ...issionsView.vue => 03_permissionsView.vue} |   66 +-
 ...ganization.vue => 04_roleOrganization.vue} |    0
 ...User.vue => page01_ManagementRoleUser.vue} |   41 +-
 ...e => page02_rolesAndPermissionsDetail.vue} |   57 +-
 src/modules/02_users/views/roleExample.vue    | 1186 -----------------
 12 files changed, 301 insertions(+), 1363 deletions(-)
 rename src/modules/02_users/components/Users/{DialogAddUser.vue => DialogFormUser.vue} (84%)
 rename src/modules/02_users/views/{listsUser.vue => 01_user.vue} (76%)
 rename src/modules/02_users/views/{listsRole.vue => 02_rolesAndPermissions.vue} (84%)
 rename src/modules/02_users/views/{permissionsView.vue => 03_permissionsView.vue} (94%)
 rename src/modules/02_users/views/{roleOrganization.vue => 04_roleOrganization.vue} (100%)
 rename src/modules/02_users/views/{managementRoleUser.vue => page01_ManagementRoleUser.vue} (80%)
 rename src/modules/02_users/views/{permissionDetail.vue => page02_rolesAndPermissionsDetail.vue} (95%)
 delete mode 100644 src/modules/02_users/views/roleExample.vue

diff --git a/src/modules/02_users/components/Permissions/DialogAdd.vue b/src/modules/02_users/components/Permissions/DialogAdd.vue
index 21cc041e..7496099d 100644
--- a/src/modules/02_users/components/Permissions/DialogAdd.vue
+++ b/src/modules/02_users/components/Permissions/DialogAdd.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -12,9 +14,6 @@ import type { QTableProps } from "quasar";
 import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
 import type { Roles } from "@/modules/02_users/interface/response/Main";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const {
diff --git a/src/modules/02_users/components/Roles/DialogAddRole.vue b/src/modules/02_users/components/Roles/DialogAddRole.vue
index 246e3929..28b09c3a 100644
--- a/src/modules/02_users/components/Roles/DialogAddRole.vue
+++ b/src/modules/02_users/components/Roles/DialogAddRole.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { reactive } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -22,21 +20,24 @@ const { showLoader, hideLoader, dialogConfirm, messageError, success } =
 
 /**  props*/
 const modal = defineModel<boolean>("modal", { required: true });
-
+// ฟอร์มบทบาท
 const formData = reactive<FormRole>({
-  roleName: "",
-  roleDescription: "",
+  roleName: "", // ขื่อบทบาท
+  roleDescription: "", // คำอธิบาย
 });
 
-/** function บันทึกข้อมูลผู้ใช้งาน*/
+/**
+ * function บันทึกข้อมูลผู้ใช้งาน
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .post(config.API.managementAuth, formData)
       .then((res) => {
-        closeDialog();
         router.push(`/roles/${res.data.result}`);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
       })
       .catch((e) => {
         messageError($q, e);
@@ -47,7 +48,9 @@ function onSubmit() {
   });
 }
 
-/** function ปิด Dialog */
+/**
+ * function ปิด Dialog
+ */
 function closeDialog() {
   modal.value = false;
   formData.roleName = "";
diff --git a/src/modules/02_users/components/Users/DialogAddUser.vue b/src/modules/02_users/components/Users/DialogFormUser.vue
similarity index 84%
rename from src/modules/02_users/components/Users/DialogAddUser.vue
rename to src/modules/02_users/components/Users/DialogFormUser.vue
index f08eeb19..e5e02a85 100644
--- a/src/modules/02_users/components/Users/DialogAddUser.vue
+++ b/src/modules/02_users/components/Users/DialogFormUser.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -18,9 +20,6 @@ import type { Profile } from "@/modules/02_users/interface/response/Main";
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, dialogConfirm, messageError, success } =
@@ -37,8 +36,7 @@ const props = defineProps({
   },
 });
 
-/** Table*/
-const rows = ref<Profile[]>([]);
+// Table
 const columns = ref<QTableProps["columns"]>([
   {
     name: "citizenId",
@@ -101,34 +99,40 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const selected = ref<Profile[]>([]);
-const searchType = ref<string>("citizenId");
-const keyword = ref<string>("");
+const rows = ref<Profile[]>([]); //ข้อมูลรายชื่อ
+const selected = ref<Profile[]>([]); // รายชื่อที่เลือก
+const searchType = ref<string>("citizenId"); // ประเภทค้นหา
+const keyword = ref<string>(""); //คำค้นหา
+// ตัวเลือกประเภทค้นหา
 const searchTypeOption = ref<DataOption[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
 const query = reactive({
-  page: 1,
-  pageSize: 10,
+  page: 1, // หน้า
+  pageSize: 10, // จำนวนข้อมูลต่อหน้า
 });
-const total = ref<number>(0);
-const maxPage = ref<number>(1);
+const total = ref<number>(0); // จำนวนรายการ
+const maxPage = ref<number>(1); // จำนวนหน้า
 
-const isPwd = ref<boolean>(true);
-const roles = ref<Roles[]>([]);
+const isPwd = ref<boolean>(true); // แสเดงรหัสผู้ใช้งาน
+const roles = ref<Roles[]>([]); // รายการบทบาท
+// ฟอร์มเพิ่มผู้ใช้งาน
 const formData = reactive<FormUser>({
-  profileId: "",
-  username: "",
-  password: "",
-  firstName: "",
-  lastName: "",
-  email: "",
-  roles: [],
+  profileId: "", // id รายชื่อ
+  username: "", // ชื่อผู้มใช้งาน
+  password: "", // รหัสผู้ใช้งาน
+  firstName: "", // ชื่อผู้มช้งาน
+  lastName: "", // นามสกุล
+  email: "", // เมล
+  roles: [], // บทบาท
 });
-const roleOptions = ref([]);
+const roleOptions = ref([]); // รายการบทบาท;
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อ
+ */
 function fetchListUser() {
   showLoader();
   const body = {
@@ -141,8 +145,8 @@ function fetchListUser() {
         `?page=${query.page}&pageSize=${query.pageSize}`,
       body
     )
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       maxPage.value = Math.ceil(data.total / query.pageSize);
       total.value = data.total;
       rows.value = data.data;
@@ -156,8 +160,10 @@ function fetchListUser() {
 }
 
 /**
- * function fetch ข้อมูลผู้ใช้งาน
+ * ฟังก์ชันดึงข้อมูลผู้ใช้งานตาม ID  ผู้ใช้งาน
  * @param id ผู้ใช้งาน
+ *
+ * และกำหนดฟอร์มเพิ่มผู้ใช้งานจาก respone
  */
 function fetchUserDetail(id: string) {
   showLoader();
@@ -179,7 +185,11 @@ function fetchUserDetail(id: string) {
     });
 }
 
-/** function fetc รายการ role*/
+/**
+ * ดึงข้อมูลรายการบทบาท
+ *
+ * บันทึกใน roleOptions
+ */
 function fetchlistRole() {
   http
     .get(config.API.managementRole)
@@ -197,7 +207,9 @@ function fetchlistRole() {
     });
 }
 
-/** function บันทึกข้อมูลผู้ใช้งาน*/
+/**
+ *  ฟังก์ชันยืนยันการบันทึกข้อมูลผู้ใช้งาน
+ */
 function onSubmit() {
   formData.roles = !isStatusEdit.value
     ? roles.value.map((e: { id: string }) => e.id)
@@ -225,7 +237,9 @@ function onSubmit() {
   });
 }
 
-/** function ปิด Dialog */
+/**
+ * ฟังก์ชัน ปิด Dialog และกำหนด ตัวแปรไปเป็นค่า defult
+ */
 function closeDialog() {
   modal.value = false;
   formData.profileId = "";
@@ -251,6 +265,11 @@ async function updatePagination(initialPagination: Pagination) {
   query.pageSize = initialPagination.rowsPerPage;
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
+ *
+ * ดึงข้อมูลรายชื่อตามจำนวนข้อมูลต่อหน้า
+ */
 watch(
   () => query.pageSize,
   () => {
@@ -258,6 +277,11 @@ watch(
   }
 );
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ุ isStatusEdit เป็น true  ดึงข้อมูลของผู้ใช้งาน
+ */
 watch(
   () => modal.value,
   () => {
@@ -269,6 +293,11 @@ watch(
   }
 );
 
+/**
+ * ดูการเปลี่ยนแปลงของการเลือกรายชื่อ
+ *
+ * ุ กำหนด ฟอร์มเพิ่มข้อผู้ใช้งานตามราชชื่อที่เลือก
+ */
 watch(
   () => selected.value,
   () => {
@@ -279,7 +308,6 @@ watch(
       formData.lastName = data.lastName;
       formData.email = data.email;
       formData.username = data.citizenId;
-      // formData.password = "54321";
     }
   }
 );
diff --git a/src/modules/02_users/components/Users/DialogRoleUser.vue b/src/modules/02_users/components/Users/DialogRoleUser.vue
index 34c7e14e..7741d049 100644
--- a/src/modules/02_users/components/Users/DialogRoleUser.vue
+++ b/src/modules/02_users/components/Users/DialogRoleUser.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
 import type { Roles } from "@/modules/02_users/interface/request/Main";
@@ -10,9 +12,6 @@ import type { Roles } from "@/modules/02_users/interface/request/Main";
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const {
@@ -27,8 +26,7 @@ const {
 /**  props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const userId = defineModel<string>("userId", { required: true });
-const roles = defineModel<any[]>("roles", {});
-
+const roles = defineModel<any[]>("roles");
 const props = defineProps({
   fetchlist: {
     type: Function,
@@ -36,7 +34,8 @@ const props = defineProps({
   },
 });
 
-const rows = ref<Roles[]>([]);
+// Table
+const rows = ref<Roles[]>([]); // รายการสิทธิ์
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -59,9 +58,11 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["name", "description"]);
 
-const selected = ref<Roles[]>([]);
+const selected = ref<Roles[]>([]); // รายการสิทธิ์ที่เลือก
 
-/** function fetc รายการ role*/
+/**
+ * ฟังก์ชันดึงข้อมูลรายการสิทธิ์ทั้งหมด
+ */
 function fetchlistRole() {
   showLoader();
   http
@@ -85,19 +86,27 @@ function fetchlistRole() {
     });
 }
 
+/**
+ * ฟังก์ชันยืนยันการบันทึกการเพิ่มสิทธิ์
+ *
+ * เมื่อเสร็จจะโหลดข้อมูลรายการสิทธิ์ที่มีใหม่
+ */
 function onSubmit() {
+  // เช็ครายการสิทธิ์ที่เลือก
   if (selected.value.length === 0) {
+    // ไม่มีแสดงข้อคาวมเตือน
     dialogMessageNotify($q, "กรุณาเลือก role อย่างน้อง 1 role");
   } else {
-    dialogConfirm($q, () => {
+    // ยืนยันการบันทึกการเพิ่มสิทธิ์
+    dialogConfirm($q, async () => {
       showLoader();
       const body = { role: selected.value.map((e: { id: string }) => e.id) };
       http
         .post(config.API.management + `/${userId.value}/role`, body)
-        .then(() => {
-          props.fetchlist?.();
-          closeDialog();
+        .then(async () => {
+          await props.fetchlist?.();
           success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
         })
         .catch((err) => {
           messageError($q, err);
@@ -109,12 +118,17 @@ function onSubmit() {
   }
 }
 
-/** function ปิด Dialog */
+/**
+ * ฟังก์ชัน ปิด Dialog  และกำหนดให้รายการสิทธิ์ที่เลือกเป็นค่าว่าง
+ */
 function closeDialog() {
   modal.value = false;
   selected.value = [];
 }
 
+/**
+ * ดู modal เมื่อ modal เป็น true ทำการโหลข้อมูลรายการสิทธิ์ทั้งหมด
+ */
 watch(
   () => modal.value,
   () => {
diff --git a/src/modules/02_users/router.ts b/src/modules/02_users/router.ts
index b92b7397..bea6e038 100644
--- a/src/modules/02_users/router.ts
+++ b/src/modules/02_users/router.ts
@@ -1,20 +1,20 @@
 /** user*/
-const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue");
+const ListsPageUser = () => import("@/modules/02_users/views/01_user.vue");
 const PageManagementRole = () =>
-  import("@/modules/02_users/views/managementRoleUser.vue");
+  import("@/modules/02_users/views/page01_ManagementRoleUser.vue");
 
 /** role*/
-const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
+const ListsPageRole = () => import("@/modules/02_users/views/02_rolesAndPermissions.vue");
 const ListsPage2Role = () =>
-  import("@/modules/02_users/views/permissionDetail.vue");
+  import("@/modules/02_users/views/page02_rolesAndPermissionsDetail.vue");
 
 /** PermissionPage*/
 const PermissionPage = () =>
-  import("@/modules/02_users/views/permissionsView.vue");
+  import("@/modules/02_users/views/03_permissionsView.vue");
 
 /** roleOrganization */
 const roleOrgview = () =>
-  import("@/modules/02_users/views/roleOrganization.vue");
+  import("@/modules/02_users/views/04_roleOrganization.vue");
 
 export default [
   {
diff --git a/src/modules/02_users/views/listsUser.vue b/src/modules/02_users/views/01_user.vue
similarity index 76%
rename from src/modules/02_users/views/listsUser.vue
rename to src/modules/02_users/views/01_user.vue
index 12157767..d0524c3c 100644
--- a/src/modules/02_users/views/listsUser.vue
+++ b/src/modules/02_users/views/01_user.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -14,11 +16,7 @@ import type {
 import type { Users, Roles } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
-import DialogAddUser from "@/modules/02_users/components/Users/DialogAddUser.vue";
-// import DialogManagementRole from "@/modules/02_users/components/Users/DialogManagementRole.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
+import DialogAddUser from "@/modules/02_users/components/Users/DialogFormUser.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -33,11 +31,12 @@ const {
 } = useCounterMixin();
 
 /** Table*/
-const rows = ref<Users[]>([]);
-const total = ref<number>(0);
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(0);
-const pageSize = ref<number>(10);
+const keyword = ref<string>(""); // คำค้นหา
+const rows = ref<Users[]>([]); // ข้อมูลรายาการผู้ใช้งาน
+const currentPage = ref<number>(1); // หน้า
+const total = ref<number>(0); // จำนวนรายการ
+const maxPage = ref<number>(0); // จำนวนหน้า
+const pageSize = ref<number>(10); // จำนวนข้อมูลต่อหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -116,21 +115,14 @@ const visibleColumns = ref<string[]>([
   "role",
   "enabled",
 ]);
-const keyword = ref<string>("");
 
-/** addUser*/
-const modalDialogAdd = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const userId = ref<string>("");
+/** เพิ่มข้อมูลผู้ใช้งาน*/
+const modalDialogAdd = ref<boolean>(false); // เปิด ปิด popup
+const isStatusEdit = ref<boolean>(false); // สถานะการแก้ไข
+const userId = ref<string>(""); // id ผู้ใช้งานที่ต้องการแก้ไข
 
-/** List Mune*/
+// รายการตัวเลือก
 const itemMenu = ref<ItemsMenu[]>([
-  // {
-  //   label: "แก้ไข",
-  //   icon: "edit",
-  //   color: "edit",
-  //   type: "edit",
-  // },
   {
     label: "ระงับการใช้งาน",
     icon: "mdi-lock-outline",
@@ -157,18 +149,20 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-/** function fetch รายชื่อผู้ใช้งาน*/
-function fetchListUsers() {
+/**
+ * ฟังก์ชันดึงข้อมูลรายชื่อผู้ใช้งาน
+ */
+async function fetchListUsers() {
   let max = pageSize.value;
   let first = (currentPage.value - 1) * pageSize.value;
   showLoader();
-  http
+  await http
     .get(
       config.API.managementUser +
         `?max=${max}&first=${first}&search=${keyword.value}`
     )
-    .then((res) => {
-      const data = res.data.data;
+    .then(async (res) => {
+      const data = await res.data.data;
 
       total.value = res.data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
@@ -194,25 +188,35 @@ function fetchListUsers() {
 }
 
 /**
- *
- * @param type ประเภท
+ * ฟังก์ชันจัดการการกระทำต่าง ๆ กับข้อมูลผู้ใช้งาน
+ * @param type ประเภทตัวเลือก
  * @param data ข้อมูลรายการผู้ใช้งาน
  */
 function onClickAction(type: string, data: Users) {
+  // ตรวจสอบประเภทของการกระทำ
   if (type === "edit") {
+    // แก้ไข
     modalDialogAdd.value = true;
     isStatusEdit.value = true;
     userId.value = data.id;
   } else if (type === "delete") {
+    // เรียกใช้ฟังก์ชันสำหรับลบข้อมูลผู้ใช้งาน
     onDeleteUser(data.id);
   } else if (type === "managementRole") {
+    // ไปยังหน้าจัดการสิทธิ์ของผู้ใช้งาน
     data && router.push(`/users/roles/${data.id}`);
   } else if (type === "open" || type === "close") {
+    // เปลี่ยนสถานะเปิด/ปิดของผู้ใช้งาน
     const status = type === "open" ? true : false;
     onLockUser(data.id, status);
   }
 }
 
+/**
+ * ฟังก์ชันเปิด popup สำหรับเพิ่มข้อมูลผู้ใช้งาน
+ *
+ * กำหนดสถานะการแก้ไขเป็น false และ id ผู้ใช้งานที่ต้องการแก้ไขเป็นค่าว่าง
+ */
 function openDialog() {
   modalDialogAdd.value = true;
   isStatusEdit.value = false;
@@ -222,15 +226,17 @@ function openDialog() {
 /**
  * function ยืนยันการลบข้อมูลรายการผู้ใช้งาน
  * @param id รายการผู้ใช้งาน
+ *
+ * ลบข้อมูลรายชื่อเสร็จแล้วทำการดึงข้อมูลรายชื่อผู้ใช้งานใหม่
  */
 function onDeleteUser(id: string) {
   dialogRemove($q, () => {
     showLoader();
     http
       .delete(config.API.managementUser + `/${id}`)
-      .then(() => {
+      .then(async () => {
+        await fetchListUsers();
         success($q, "ลบข้อมูลสำเร็จ");
-        fetchListUsers();
       })
       .catch((err) => {
         messageError($q, err);
@@ -242,9 +248,11 @@ function onDeleteUser(id: string) {
 }
 
 /**
- * function ระงับการใช้งาน
+ * ฟังก์ชันระงับการใช้งานผู้ใช้งาน
  * @param id ผู้ใช้งาน
  * @param type  เปิดใช้งาน,ระงับการใช้งาน
+ *
+ * เสร็จแล้วทำการดึงข้อมูลรายชื่อผู้ใช้งานใหม่
  */
 function onLockUser(id: string, type: boolean) {
   dialogConfirm(
@@ -255,7 +263,7 @@ function onLockUser(id: string, type: boolean) {
         .put(config.API.managementUser + `/${id}/enableStatus/${type}`)
         .then(async () => {
           await fetchListUsers();
-          await success($q, type ? "เปิดใช้งานสำเร็จ" : "ระงับการใช้งานสำเร็จ");
+          success($q, type ? "เปิดใช้งานสำเร็จ" : "ระงับการใช้งานสำเร็จ");
         })
         .catch((err) => {
           messageError($q, err);
@@ -272,12 +280,19 @@ function onLockUser(id: string, type: boolean) {
 /**
  * function อัปเดท paging
  * @param initialPagination ข้อมูล pagination
+ *
+ * กำหนดหน้าไปยังหน้าแรก
  */
 function updatePagination(initialPagination: Pagination) {
   currentPage.value = 1;
   pageSize.value = initialPagination.rowsPerPage;
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
+ *
+ * ดึงข้อมูลรายชื่อผู้ใช้งานตามจำนวนข้อมูลต่อหน้า
+ */
 watch(
   () => pageSize.value,
   () => {
@@ -285,8 +300,13 @@ watch(
   }
 );
 
-onMounted(() => {
-  fetchListUsers();
+/**
+ * hook ทำงานเมื่อมีการเรียกใช้งาน Components
+ *
+ * ดึงข้อมูลรายชื่อผู้ใช้งาน
+ */
+onMounted(async () => {
+  await fetchListUsers();
 });
 </script>
 
diff --git a/src/modules/02_users/views/listsRole.vue b/src/modules/02_users/views/02_rolesAndPermissions.vue
similarity index 84%
rename from src/modules/02_users/views/listsRole.vue
rename to src/modules/02_users/views/02_rolesAndPermissions.vue
index 2a2d38dd..972eba46 100644
--- a/src/modules/02_users/views/listsRole.vue
+++ b/src/modules/02_users/views/02_rolesAndPermissions.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -13,9 +15,6 @@ import type { Roles } from "@/modules/02_users/interface/response/Main";
 /** importComponents*/
 import DialogAddRole from "@/modules/02_users/components/Roles/DialogAddRole.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -23,7 +22,8 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** Table*/
-const rows = ref<Roles[]>([]);
+const rows = ref<Roles[]>([]); // รายการบทบาท
+const keyword = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -54,11 +54,10 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]);
-const keyword = ref<string>("");
 
-const modalDialogAdd = ref<boolean>(false);
+const modalDialogAdd = ref<boolean>(false); // เพิ่มบทบาท
 
-/** List Mune*/
+// รายการตัวเลือก
 const itemMenu = ref<ItemsMenu[]>([
   {
     label: "แก้ไข",
@@ -74,13 +73,17 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-/** function fetch รายการบทบาท*/
-function fetchListRole() {
+/**
+ * function fetch รายการบทบาท
+ *
+ * และบันทึกใน rows
+ */
+async function fetchListRole() {
   showLoader();
-  http
+  await http
     .get(config.API.managementAuth + `/list`)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       rows.value = data;
     })
     .catch((err) => {
@@ -92,18 +95,24 @@ function fetchListRole() {
 }
 
 /**
- *
+ *  ฟังก์ชันจัดการการกระทำต่าง ๆ กับข้อมูลบทบาท
  * @param type ประเภท
- * @param data ข้อมูลรายการผู้ใช้งาน
+ * @param data ข้อมูลรายการบทบาท
  */
 function onClickAction(type: string, data: Roles) {
+  // เช็คการกระทำ
   if (type === "edit") {
+    // ไปหน้าจัดการสิทธิ์
     router.push(`/roles/${data.id}`);
   } else if (type === "delete") {
+    // ลบรายการยบทบาท
     onDeleteRole(data.id);
   }
 }
 
+/**
+ * เปิด  popup เพิ่มบทบาท
+ */
 function openDialog() {
   modalDialogAdd.value = true;
 }
@@ -113,13 +122,13 @@ function openDialog() {
  * @param id รายการบทบาท
  */
 function onDeleteRole(id: string) {
-  dialogRemove($q, () => {
+  dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.managementAuth + `/${id}`)
-      .then(() => {
+      .then(async () => {
+        await fetchListRole();
         success($q, "ลบข้อมูลสำเร็จ");
-        fetchListRole();
       })
       .catch((err) => {
         messageError($q, err);
@@ -130,6 +139,11 @@ function onDeleteRole(id: string) {
   });
 }
 
+/**
+ * hook ทำงานเมื่อมีการเรียกใช้งาน Components
+ *
+ * ดึงข้อมูลบทบาท
+ */
 onMounted(() => {
   fetchListRole();
 });
diff --git a/src/modules/02_users/views/permissionsView.vue b/src/modules/02_users/views/03_permissionsView.vue
similarity index 94%
rename from src/modules/02_users/views/permissionsView.vue
rename to src/modules/02_users/views/03_permissionsView.vue
index ef500ae1..b4afc58a 100644
--- a/src/modules/02_users/views/permissionsView.vue
+++ b/src/modules/02_users/views/03_permissionsView.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-/** importComponents*/
-import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
+import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -17,21 +17,23 @@ import type {
   Position,
 } from "@/modules/02_users/interface/response/Main";
 
-/** importStore*/
-import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
 
+/**
+ * use
+ */
 const $q = useQuasar();
 const store = usePermissionsStore();
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
 
 /** Tree*/
-const filter = ref<string>("");
-const nodes = ref<Array<NodeTree[]>>([]);
+const filter = ref<string>(""); // ค้นหาข้อมูลโครงาสร้าง
+const nodes = ref<Array<NodeTree[]>>([]); // ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
-const expanded = ref<string[]>([]);
-const nodeId = ref<string>("");
+const expanded = ref<string[]>([]); // แสดงข้อมูลในโหนดที่เลือก
+const nodeId = ref<string>(""); // id โหนด
 
 /** Table*/
 const columns = ref<QTableProps["columns"]>([
@@ -187,6 +189,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+// ฟอร์มค้นหาตำแหน่ง
 const reqMaster = reactive<FilterReqMaster>({
   id: "",
   type: 0,
@@ -198,21 +201,23 @@ const reqMaster = reactive<FilterReqMaster>({
 });
 const maxPage = ref<number>(0);
 const totalRow = ref<number>(0);
-const posMaster = ref<PosMaster[]>([]);
-const dataPosMaster = ref<PosMaster>();
+const posMaster = ref<PosMaster[]>([]); // ข้อมูลรายการตำแหน่ง
+const dataPosMaster = ref<PosMaster>(); // ข้อมูลตำแหน่ง
 const pagination = ref<Pagination>({
   page: reqMaster.page,
   rowsPerPage: reqMaster.pageSize,
 });
 
-/** Dialog*/
-const modalDialogAdd = ref<boolean>(false);
+const modalDialogAdd = ref<boolean>(false); // popup จัดการสิทธิ์
 
-/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
-function fetchOrganizationActive() {
-  http
+/**
+ *  function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
+ */
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
     .get(config.API.activeOrganization)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       if (data) {
         store.activeId = data.activeId;
@@ -222,11 +227,14 @@ function fetchOrganizationActive() {
           store.typeOrganizational === "current"
             ? store.activeId
             : store.draftId;
-        fetchDataTree(id);
+        await fetchDataTree(id);
       }
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -234,12 +242,12 @@ function fetchOrganizationActive() {
  * function fetch ข้อมูลของ Tree
  * @param id id โครงสร้าง
  */
-function fetchDataTree(id: string) {
+async function fetchDataTree(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.orgByid(id.toString()))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       nodes.value = data;
     })
     .catch((err) => {
@@ -255,12 +263,12 @@ function fetchDataTree(id: string) {
  * @param id  idTree
  * @param level  levelTree
  */
-function fetchDataTable(id: string, revisionId: string, level: number) {
+async function fetchDataTable(id: string, revisionId: string, level: number) {
   showLoader();
   reqMaster.id = id;
   reqMaster.revisionId = revisionId;
   reqMaster.type = level;
-  http
+  await http
     .post(config.API.orgPosMasterList, reqMaster)
     .then(async (res) => {
       posMaster.value = [];
@@ -268,7 +276,7 @@ function fetchDataTable(id: string, revisionId: string, level: number) {
       maxPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
       totalRow.value = res.data.result.total;
 
-      res.data.result.data.forEach((e: PosMaster) => {
+      await res.data.result.data.forEach((e: PosMaster) => {
         const p = e.positions;
         if (p.length !== 0) {
           const a = p.find((el: Position) => el.positionIsSelected === true);
@@ -311,6 +319,10 @@ function onClickAddRole(data: PosMaster) {
   dataPosMaster.value = data;
 }
 
+/**
+ * ยืนยันการลบสิทธิ์
+ * @param id ตำแหน่ง
+ */
 function onDeleteRole(id: string) {
   dialogRemove(
     $q,
@@ -327,7 +339,7 @@ function onDeleteRole(id: string) {
             reqMaster.revisionId,
             reqMaster.type
           );
-          await success($q, "ลบข้อมูลสำเร็จ");
+          success($q, "ลบข้อมูลสำเร็จ");
         })
         .catch((err) => {
           messageError($q, err);
diff --git a/src/modules/02_users/views/roleOrganization.vue b/src/modules/02_users/views/04_roleOrganization.vue
similarity index 100%
rename from src/modules/02_users/views/roleOrganization.vue
rename to src/modules/02_users/views/04_roleOrganization.vue
diff --git a/src/modules/02_users/views/managementRoleUser.vue b/src/modules/02_users/views/page01_ManagementRoleUser.vue
similarity index 80%
rename from src/modules/02_users/views/managementRoleUser.vue
rename to src/modules/02_users/views/page01_ManagementRoleUser.vue
index 7a26082a..eb35288a 100644
--- a/src/modules/02_users/views/managementRoleUser.vue
+++ b/src/modules/02_users/views/page01_ManagementRoleUser.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -12,9 +14,6 @@ import type { Roles } from "@/modules/02_users/interface/response/Main";
 /** importComponents*/
 import DialogAddRoleUser from "@/modules/02_users/components/Users/DialogRoleUser.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -22,9 +21,10 @@ const route = useRoute();
 const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
-const userId = ref<string>(route.params.id.toString());
+const userId = ref<string>(route.params.id.toString()); // id ผู้ใช้งาน
 
-const rows = ref<Roles[]>([]);
+// Table
+const rows = ref<Roles[]>([]); //ข้อมูลรายการสิทธิ์
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -56,14 +56,17 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["no", "name", "description"]);
 
-const modalDialogAdd = ref<boolean>(false);
+const modalDialogAdd = ref<boolean>(false); // เพิ่มสิทธิ์
 
-function fetchListRoleUser() {
+/**
+ * ฟังก์ชันดึงข้อมูลรายการสิทธิ์ที่มีตามผู้ใช้งาน
+ */
+async function fetchListRoleUser() {
   showLoader();
   http
     .get(config.API.managementUser + `/role/${userId.value}`)
-    .then((res) => {
-      rows.value = res.data.filter(
+    .then(async (res) => {
+      rows.value = await res.data.filter(
         (e: Roles) =>
           e.name === "STAFF" ||
           e.name === "SUPER_ADMIN" ||
@@ -79,13 +82,19 @@ function fetchListRoleUser() {
     });
 }
 
+/**
+ * ฟังก์ชันลบข้อมูลสิทธิ์ออกจากผู้ใช้งาน
+ * @param id สิทธิ์
+ *
+ * ลบข้อมูลเสร็จโหลดข้อมูลรายการสิทธิ์ที่ใหม่
+ */
 function onDelete(id: string) {
   dialogRemove($q, () => {
     showLoader();
     http
       .delete(config.API.management + `/${userId.value}/role/${id}`)
-      .then(() => {
-        fetchListRoleUser();
+      .then(async () => {
+        await fetchListRoleUser();
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
@@ -97,10 +106,18 @@ function onDelete(id: string) {
   });
 }
 
+/**
+ * ฟังก์เพิ่มสิทธิ์
+ */
 function openDialog() {
   modalDialogAdd.value = true;
 }
 
+/**
+ * hook ทำงานเมื่อมีการเรียกใช้ components
+ *
+ * โหลดข้อมูลรายการสิทธิ์ที่มี
+ */
 onMounted(() => {
   fetchListRoleUser();
 });
diff --git a/src/modules/02_users/views/permissionDetail.vue b/src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
similarity index 95%
rename from src/modules/02_users/views/permissionDetail.vue
rename to src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
index 9640ad87..12260682 100644
--- a/src/modules/02_users/views/permissionDetail.vue
+++ b/src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
-import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   DataOption,
@@ -13,14 +15,15 @@ import type {
 import type { SysList } from "@/modules/02_users/interface/response/Main";
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
+const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const { dialogConfirm, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
+const roleId = ref<string>(route.params.id.toString()); // id บทบาท
+// รายการสิทธิ์การเข้าถึง
 const attrPrivilegeOp = ref<DataOption[]>([
   {
     id: "ROOT",
@@ -39,25 +42,26 @@ const attrPrivilegeOp = ref<DataOption[]>([
     name: "มีสิทธิ์เข้าถึงข้อมูลเฉพาะเจาะจง",
   },
 ]);
-const router = useRouter();
-const route = useRoute();
 
-const roleId = ref<string>(route.params.id.toString());
+// ฟอร์มบทบาท
 const formData = reactive<FormRole>({
-  roleName: "",
-  roleDescription: "",
+  roleName: "", // ชื่อบทบาม
+  roleDescription: "", // คำอธิบาย
 });
 
 const sysListMain = ref<SysList[]>([]);
 const systemLists = ref<SystemList[]>([]);
 
-function fetchSys() {
+/**
+ * ดึงข้อมูลรายการระบบทั้หมด
+ */
+async function fetchSys() {
   showLoader();
-  http
+  await http
     .get(config.API.managementSysList)
-    .then((res) => {
-      sysListMain.value = res.data.result;
-      fetchDataRole();
+    .then(async (res) => {
+      sysListMain.value = await res.data.result;
+      await fetchDataRole();
     })
     .catch((err) => {
       messageError($q, err);
@@ -67,12 +71,17 @@ function fetchSys() {
     });
 }
 
-function fetchDataRole() {
+/**
+ * ดึงข้อมูลบทบาทและสิทธิ์
+ *
+ * บันทึกข้อมูลสิทธิ์เข้ากับรายการระบบ
+ */
+async function fetchDataRole() {
   showLoader();
-  http
+  await http
     .get(config.API.managementAuth + `/${roleId.value}`)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       const sysList = data.roleAttributes;
       formData.roleName = data.roleName;
       formData.roleDescription = data.roleDescription;
@@ -144,6 +153,9 @@ function fetchDataRole() {
     });
 }
 
+/**
+ * ยืนยันการบันทึกการบทบาทและสิทธิ์
+ */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -189,9 +201,9 @@ function onSubmit() {
     };
     http
       .patch(config.API.managementAuth + `/${roleId.value}`, body)
-      .then(() => {
+      .then(async () => {
+        await fetchDataRole();
         success($q, "บันทึกข้อมูลสำเร็จ");
-        fetchDataRole();
       })
       .catch((err) => {
         messageError($q, err);
@@ -202,6 +214,11 @@ function onSubmit() {
   });
 }
 
+/**
+ * hook ทำงานเมื่อมีการเรียกใช้ components
+ *
+ * โหลดข้อมูลรายการระบบทั้งหมด
+ */
 onMounted(() => {
   fetchSys();
 });
diff --git a/src/modules/02_users/views/roleExample.vue b/src/modules/02_users/views/roleExample.vue
deleted file mode 100644
index 788a40ed..00000000
--- a/src/modules/02_users/views/roleExample.vue
+++ /dev/null
@@ -1,1186 +0,0 @@
-<template>
-  <div class="q-pa-md">
-    <q-table
-      :rows="systemLists"
-      :columns="columns"
-      separator="cell"
-      :pagination="{
-        page: 1,
-        rowsPerPage: 100,
-      }"
-      hide-bottom
-    >
-      <template v-slot:header>
-        <q-tr>
-          <q-th rowspan="2" colspan="3" style="font-size: 1rem"
-            >รายการระบบ</q-th
-          >
-          <q-th colspan="2" style="font-size: 1rem"
-            >สิทธิ์การเข้าถึงข้อมูล</q-th
-          >
-          <q-th colspan="5" style="text-align: center; font-size: 1rem"
-            >สิทธิ์การใช้งาน</q-th
-          >
-        </q-tr>
-        <q-tr>
-          <q-th
-            >OWNER<br />
-            เจ้าของระบบ</q-th
-          >
-          <q-th>OFFICER <br />(การเจ้าหน้าที่)</q-th>
-          <q-th>CREATE <br />(มีสิทธิในการสร้างข้อมูล)</q-th>
-          <q-th>LIST<br />(มีสิทธิในการดูรายการข้อมูล)</q-th>
-          <q-th>GET<br />(มีสิทธิในการดูรายละเอียดข้อมูล)</q-th>
-          <q-th>UPDATE<br />(มีสิทธิในการแก้ไขข้อมูล)</q-th>
-          <q-th>DELETE<br />(มีสิทธิในการลบข้อมูล)</q-th>
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr>
-          <q-td auto-width colspan="3">
-            <q-checkbox v-model="props.row.selected" />
-            <strong>{{ props.row.name }}</strong>
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.owner" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.officer" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.create" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.list" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.get" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.update" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="props.row.delete" />
-          </q-td>
-        </q-tr>
-        <q-tr
-          v-if="props.row.selected && props.row.children"
-          v-for="(item, index) in props.row.children"
-          :key="index"
-        >
-          <q-td></q-td>
-          <q-td auto-width colspan="2">
-            <q-checkbox v-model="item.selected" />
-            {{ item.name }}
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.owner" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.officer" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.create" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.list" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.get" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.update" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item.delete" />
-          </q-td>
-        </q-tr>
-        <!-- <q-tr
-          v-if="item.children"
-          v-for="(item3, index) in item.children"
-          :key="index"
-        >
-          <q-td></q-td>
-          <q-td auto-width colspan="2">
-            <q-checkbox v-model="item3.selected" />
-            {{ item3.name }}
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.owner" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.officer" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.create" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.list" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.get" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.update" />
-          </q-td>
-          <q-td style="text-align: center">
-            <q-checkbox v-model="item3.delete" />
-          </q-td>
-        </q-tr> -->
-      </template>
-    </q-table>
-  </div>
-</template>
-
-<script setup>
-import { id } from "date-fns/locale";
-import { off } from "process";
-import { reactive, ref } from "vue";
-
-const columns = [];
-
-const systemLists = ref([
-  {
-    key: "SYS_METADATA_KPI",
-    name: "ข้อมูลการประเมิน",
-    selected: true,
-    owner: true,
-    officer: false,
-    create: true,
-    list: true,
-    get: true,
-    update: true,
-    delete: true,
-    children: [
-      {
-        key: "INDICATOR",
-        name: "ตัวชี้วัด",
-        selected: true,
-        owner: true,
-        officer: false,
-        create: true,
-        list: true,
-        get: true,
-        update: true,
-        delete: true,
-
-        children: [
-          {
-            key: "INDICATOR_PLAN",
-            name: "ตามแผน",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "INDICATOR_POSITION",
-            name: "ตามตำแหน่ง",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "INDICATOR_SPECIAL",
-            name: "งานที่ได้รับมอบหมาย",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-        ],
-      },
-      {
-        key: "COMPETENCY",
-        name: "สมรรถนะ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "STRATEGY",
-        name: "ยุทธศาสตร์",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_ORG",
-    name: "โครงสร้างอัตรากำลัง",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-  },
-  {
-    key: "SYS_ORG_EMPLOYEE",
-    name: "อัตรากำลังลูกจ้างประจำฯ",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-  },
-  {
-    key: "SYS_REGISTRY",
-    name: "ทะเบียนประวัติ",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-  },
-  {
-    key: "COMMAND",
-    name: "ออกคำสั่ง",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-  },
-  {
-    key: "SYS_EXAM",
-    name: "สรรหา",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-    children: [
-      {
-        key: "SETTING_WEB_EXAM",
-        name: "ตั้งค่าเว็บสรรหา",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "COMPETITIVE_EXAM",
-        name: "สอบแข่งขัน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-
-        children: [
-          {
-            key: "MANAGE_ROUND",
-            name: "จัดการรอบสอบแข่งขัน",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "STAT_APPLY_EXAM",
-            name: "สถิติสมัครสอบแข่งขัน",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-        ],
-      },
-      {
-        key: "QUALIFY_EXAM",
-        name: "คัดเลือก",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-
-        children: [
-          {
-            key: "QUALIFY_MANAGE_ROUND",
-            name: "จัดการรอบคัดเลือก",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "QUALIFY_ROUND_DISABLED",
-            name: "จัดการรอบคัดเลือกคนพิการ",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "QUALIFY_MANAGE_LIST",
-            name: "จัดการรายชื่อคัดเลือก",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "QUALIFY_APPLY_STAT",
-            name: "สถิติสมัครคัดเลือก",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "QUALIFY_APPLY_STAT_DISABLED",
-            name: "สถิติสมัครคัดเลือกคนพิการ",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: "SYS_PLACEMENT",
-    name: "บรรจุ แต่งตั้ง ย้าย โอน",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "PLACEMENT_LIST",
-        name: "รายชื่อผู้สอบผ่าน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_TRANSFER",
-        name: "รายการขอโอน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_RECEIVE",
-        name: "รายการรับโอน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_HELP_GOVERNMENT",
-        name: "รายการช่วยราชการ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_REPATRIATE",
-        name: "รายการส่งตัวกลับ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_APPOINT",
-        name: "รายการแต่งตั้ง-เลื่อน-ย้าย",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_APPOINT_EMPLOYEE",
-        name: "ปรับระดับชั้นงาน-ย้ายลูกจ้าง",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "PLACEMENT_OTHER",
-        name: "รายการอื่นๆ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_PROBATION",
-    name: "การทดลองปฏิบัติหน้าที่ราชการ",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-  },
-  {
-    key: "SYS_RETIREMENT",
-    name: "พ้นจากราชการ",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "RETIREMENT",
-        name: "ประกาศเกษียณ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "RESIGN",
-        name: "รายการลาออก",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "EXIT_INTERVIEW",
-        name: "Exit interview",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DECEASED",
-        name: "รายการบันทึกการถึงแก่กรรม",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISMISS",
-        name: "รายการให้ออก",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_INSIGNIA",
-    name: "เครื่องราชฯ",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "INSIGNIA_ROUND",
-        name: "รอบการเสนอขอ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "INSIGNIA_MANAGE",
-        name: "จัดการคำขอ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "INSIGNIA_RECORD",
-        name: "บันทึกผลการเสนอขอ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "INSIGNIA_ALLOCATE",
-        name: "จัดสรรเครื่องราชฯ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "INSIGNIA_BORROW",
-        name: "ยืม-คืนเครื่องราชฯ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "INSIGNIA_REPORT",
-        name: "รายงาน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_LEAVE",
-    name: "การลา",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "LEAVE_ROUND",
-        name: "รอบการปฏิบัติงาน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "CHANGE_LEAVE",
-        name: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "WORKTIME_LIST",
-        name: "รายการลงเวลาปฏิบัติงาน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "WORKTIME_SPECIAL",
-        name: "ลงเวลากรณีพิเศษ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "LEAVE_LIST",
-        name: "รายการลา",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "LEAVE_REPORT",
-        name: "รายงานสถิติการลา",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_DISCIPLINE",
-    name: "วินัย",
-    selected: true,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "DISCIPLINE_COMPLAINTS",
-        name: "เรื่องร้องเรียน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_INVESTIGATE",
-        name: "สืบสวนข้อเท็จจริง",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_DISCIPLINARY",
-        name: "สอบสวนความผิดทางวินัย",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_RESULT",
-        name: "สรุปผลการพิจารณาความผิดทางวินัย",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_SUSPEND",
-        name: "รายชื่อผู้ถูกพักราชการ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_APPEAL",
-        name: "อุทธรณ์/ร้องทุกข์",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_COMMAND",
-        name: "ออกคำสั่งลงโทษทางวินัย",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DISCIPLINE_BASIC",
-        name: "ข้อมูลพื้นฐาน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-
-        children: [
-          {
-            key: "DISCIPLINE_DIRECTOR",
-            name: "กรรมการ",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "DISCIPLINE_CHANNEL",
-            name: "ช่องทางการร้องเรียน",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: "SYS_EVALUATE",
-    name: "ประเมินบุคคล",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "EVALUATE_REQUEST",
-        name: "คำขอประเมิน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "EVALUATE_DIRECTOR_METTING",
-        name: "กรรมการและการประชุม",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-
-        children: [
-          {
-            key: "EVALUATE_DIRECTOR",
-            name: "กรรมการ",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-          {
-            key: "EVALUATE_METTING",
-            name: "การประชุม",
-            selected: false,
-            owner: false,
-            officer: false,
-            create: false,
-            list: false,
-            get: false,
-            update: false,
-            delete: false,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: "SYS_SALARY",
-    name: "เงินเดือน/ค่าจ้าง",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "SALARY_CHART",
-        name: "ผังบัญชีเงินเดือนข้าราชการ ฯ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "SALARY_EMPLOYEE_CHART",
-        name: "ผังบัญชีค่าจ้างลูกจ้างประจำ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "SALARY_ROUND",
-        name: "รอบการเลื่อนเงินเดือน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "SALARY_SLIP",
-        name: "เลื่อนเงินเดือนข้าราชการ ฯ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "SALARY_EMPLOYEE_SLIP",
-        name: "เลื่อนค่าจ้างลูกจ้างประจำ",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "SALARY_COMMAND",
-        name: "ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_KPI",
-    name: "ประเมินผลการปฏิบัติราชการระดับบุคคล",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "KPI_Round",
-        name: "รอบการประเมิน",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "KPI_List",
-        name: "รายการการประเมินผล",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-  {
-    key: "SYS_DEVELOPMENT",
-    name: "พัฒนาบุคลากร",
-    selected: false,
-    owner: false,
-    officer: false,
-    create: false,
-    list: false,
-    get: false,
-    update: false,
-    delete: false,
-
-    children: [
-      {
-        key: "DEVELOPMENT_PROJECT",
-        name: "โครงการ/หลักสูตรการฝึกอบรม",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DEVELOPMENT_HISTORY",
-        name: "ประวัติฝึกอบรม/ดูงาน ขรก.",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DEVELOPMENT_HISTORY_EMPLOYEE",
-        name: "ประวัติฝึกอบรม/ดูงานลูกจ้าง",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-      {
-        key: "DEVELOPMENT_SCHOLARSHIP",
-        name: "ทุนการศึกษา/ฝึกอบรม",
-        selected: false,
-        owner: false,
-        officer: false,
-        create: false,
-        list: false,
-        get: false,
-        update: false,
-        delete: false,
-      },
-    ],
-  },
-]);
-</script>