diff --git a/src/modules/02_users/router.ts b/src/modules/02_users/router.ts
index ee8b6812..2673c623 100644
--- a/src/modules/02_users/router.ts
+++ b/src/modules/02_users/router.ts
@@ -1,15 +1,17 @@
+/** user*/
 const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue");
 const PageManagementRole = () =>
   import("@/modules/02_users/views/managementRoleUser.vue");
 
+/** role*/
 const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
-// const RoleDetail = () => import("@/modules/02_users/views/detailRoleView.vue");
-
-const PermissionPsge = () =>
-  import("@/modules/02_users/views/permissionsView.vue");
 const ListsPage2Role = () =>
   import("@/modules/02_users/views/permissionDetail.vue");
 
+/** PermissionPage*/
+const PermissionPage = () =>
+  import("@/modules/02_users/views/permissionsView.vue");
+
 export default [
   {
     path: "/users",
@@ -62,7 +64,7 @@ export default [
   {
     path: "/permission",
     name: "managePermission",
-    component: PermissionPsge,
+    component: PermissionPage,
     meta: {
       Auth: true,
       Key: [7],
diff --git a/src/modules/02_users/views/detailRoleView.vue b/src/modules/02_users/views/detailRoleView.vue
deleted file mode 100644
index 62a501ca..00000000
--- a/src/modules/02_users/views/detailRoleView.vue
+++ /dev/null
@@ -1,1262 +0,0 @@
-<<<<<<<< HEAD:src/modules/02_users/views/detailRoleView.vue
-<script setup>
-========
-<script setup lang="ts">
->>>>>>>> fc575094eec541671db6fffe19e04350fdb0ff54:src/modules/02_users/views/permissionDetail.vue
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
-import type { FormRole } from "@/modules/02_users/interface/request/Main";
-
-const router = useRouter();
-const formData = reactive<FormRole>({
-  role: "",
-  description: "",
-});
-
-<<<<<<<< HEAD:src/modules/02_users/views/detailRoleView.vue
-const columns = ref([]);
-========
-const columns = ref<any>([]);
->>>>>>>> fc575094eec541671db6fffe19e04350fdb0ff54:src/modules/02_users/views/permissionDetail.vue
-
-const systemLists = ref<any>([
-  {
-    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,
-      },
-    ],
-  },
-]);
-
-function onSubmit() {}
-</script>
-
-<template>
-  <div class="toptitle col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    จัดการสิทธิ์บทบาท
-  </div>
-
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <q-card flast bordered class="">
-      <div class="col-12">
-        <q-card>
-          <q-card-section>
-            <div class="row q-col-gutter-md">
-              <div class="col-4">
-                <q-input
-                  v-model="formData.role"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  label="ชื่อบทบาท"
-                />
-              </div>
-              <div class="col-8">
-                <q-input
-                  v-model="formData.description"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  label="คำอิบาย"
-                  type="textarea"
-                />
-              </div>
-            </div>
-          </q-card-section>
-        </q-card>
-      </div>
-
-      <div class="col-12">
-        <q-table
-          flat
-          bordered
-          :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>
-
-      <!-- <q-card-actions align="right">
-        <q-btn label="บันทึก" color="secondary" type="submit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions> -->
-    </q-card>
-  </q-form>
-</template>
diff --git a/src/modules/02_users/views/permissionDetail.vue b/src/modules/02_users/views/permissionDetail.vue
index 62a501ca..41b02d56 100644
--- a/src/modules/02_users/views/permissionDetail.vue
+++ b/src/modules/02_users/views/permissionDetail.vue
@@ -1,8 +1,4 @@
-<<<<<<<< HEAD:src/modules/02_users/views/detailRoleView.vue
-<script setup>
-========
 <script setup lang="ts">
->>>>>>>> fc575094eec541671db6fffe19e04350fdb0ff54:src/modules/02_users/views/permissionDetail.vue
 import { reactive, ref } from "vue";
 import { useRouter } from "vue-router";
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
@@ -13,11 +9,7 @@ const formData = reactive<FormRole>({
   description: "",
 });
 
-<<<<<<<< HEAD:src/modules/02_users/views/detailRoleView.vue
-const columns = ref([]);
-========
 const columns = ref<any>([]);
->>>>>>>> fc575094eec541671db6fffe19e04350fdb0ff54:src/modules/02_users/views/permissionDetail.vue
 
 const systemLists = ref<any>([
   {
diff --git a/src/modules/02_users/views/permissionsView.vue b/src/modules/02_users/views/permissionsView.vue
index c08ac527..dac3eebe 100644
--- a/src/modules/02_users/views/permissionsView.vue
+++ b/src/modules/02_users/views/permissionsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -23,14 +23,16 @@ const expanded = ref<string[]>([]);
 const nodeId = ref<string>("");
 
 /** Table*/
-/** columns*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: "no",
+    field: (row) =>
+      (reqMaster.page - 1) * reqMaster.pageSize +
+      posMaster.value.indexOf(row) +
+      1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -39,7 +41,11 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "เลขที่ตำแหน่ง",
     sortable: false,
-    field: "posMasterNo",
+    field: (row) =>
+      row.orgShortname +
+      (row.posMasterNoPrefix ? row.posMasterNoPrefix : "") +
+      (row.posMasterNo ? row.posMasterNo : "") +
+      (row.posMasterNoSuffix ? row.posMasterNoSuffix : ""),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -47,7 +53,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "positionName",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    field: "positionName",
+    field: (row) => (row.isSit ? row.profilePosition : row.positionName),
     sortable: false,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -57,7 +63,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ประเภทตำแหน่ง",
     sortable: false,
-    field: "posTypeName",
+    field: (row) => (row.isSit ? row.profilePostype : row.posTypeName),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -66,7 +72,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: false,
-    field: "posLevelName",
+    field: (row) => (row.isSit ? row.profilePoslevel : row.posLevelName),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -75,12 +81,17 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "คนครอง",
     sortable: false,
-    field: "positionIsSelected",
+    field: (row) =>
+      store.typeOrganizational === "draft" && row.fullNameNextHolder !== null
+        ? row.fullNameNextHolder
+        : store.typeOrganizational !== "draft" &&
+          row.fullNameCurrentHolder !== null
+        ? row.fullNameCurrentHolder
+        : "ว่าง",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-
 const columnsExpand = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -155,6 +166,18 @@ const columnsExpand = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const reqMaster = reactive<any>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: "",
+});
+const maxPage = ref<number>(0);
+const totalRow = ref<number>(0);
+const posMaster = ref<any[]>([]);
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchOrganizationActive() {
@@ -202,11 +225,86 @@ async function fetchDataTree(id: string) {
     });
 }
 
-function updateSelected(data: any) {
-  console.log(data);
-  nodeId.value = data.orgTreeId;
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, revisionId: string, level: number) {
+  showLoader();
+  reqMaster.id = id;
+  reqMaster.revisionId = revisionId;
+  reqMaster.type = level;
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then(async (res) => {
+      posMaster.value = [];
+      const dataMain: any = [];
+      maxPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      totalRow.value = res.data.result.total;
+
+      res.data.result.data.forEach((e: any) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: any) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+        }
+      });
+      posMaster.value = dataMain;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+function updateSelected(data: any) {
+  nodeId.value = data.orgTreeId;
+  fetchDataTable(data.orgTreeId, data.orgRevisionId, data.orgLevel);
+}
+
+const pagination = ref({
+  page: reqMaster.page,
+  rowsPerPage: reqMaster.pageSize,
+});
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  reqMaster.pageSize = newPagination.rowsPerPage;
+  reqMaster.page = 1;
+}
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+watch([() => reqMaster.pageSize], () => {
+  fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
+});
+
+watch(
+  () => store.typeOrganizational,
+  () => {
+    const id =
+      store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    fetchDataTree(id);
+    posMaster.value = []
+  }
+);
+
+watch(
+  () => reqMaster.isAll,
+  () => {
+    reqMaster.page = 1;
+    fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
+  }
+);
+
 onMounted(() => {
   fetchOrganizationActive();
 });
@@ -318,284 +416,207 @@ onMounted(() => {
           </div>
 
           <div class="col-xs-12 col-sm-9 q-pa-md row">
-            <div class="col-12 row">
-              <!-- TABLE -->
-              <div class="col-12">
-                <d-table
-                  ref="table"
-                  :columns="columns"
-                  :rows="posMaster"
-                  :paging="true"
-                  row-key="id"
-                  flat
-                  bordered
-                  dense
-                  :rows-per-page-options="[10, 25, 50, 100]"
-                  @update:pagination="updatePagination"
-                  v-model:pagination="pagination"
-                >
-                  <template v-slot:header="props">
-                    <q-tr :props="props">
-                      <q-th auto-width></q-th>
-                      <q-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
+            <div class="col-12">
+              <!-- TOOLBAR -->
+              <q-toolbar style="padding: 0">
+                <q-space />
+                <div class="row q-gutter-md">
+                  <div>
+                    <q-checkbox
+                      keep-color
+                      v-model="reqMaster.isAll"
+                      label="แสดงตำแหน่งทั้งหมด"
+                      color="primary"
+                    >
+                      <q-tooltip
+                        >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
                       >
-                        <span class="text-weight-medium">{{ col.label }}</span>
-                      </q-th>
-                      <q-th auto-width></q-th>
-                    </q-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <q-td>
-                        <q-btn
+                    </q-checkbox>
+                  </div>
+                  <div>
+                    <q-input
+                      outlined
+                      dense
+                      v-model="reqMaster.keyword"
+                      label="ค้นหา"
+                      @keydown.enter.prevent="
+                        (reqMaster.page = 1),
+                          fetchDataTable(
+                            reqMaster.id,
+                            reqMaster.revisionId,
+                            reqMaster.type
+                          )
+                      "
+                    >
+                      <template v-slot:append>
+                        <q-icon name="search" color="grey-5" />
+                      </template>
+                    </q-input>
+                  </div>
+                </div>
+              </q-toolbar>
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="posMaster"
+                :paging="true"
+                row-key="id"
+                flat
+                bordered
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
+                v-model:pagination="pagination"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <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></q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <q-btn
+                        flat
+                        size="14px"
+                        color="primary"
+                        round
+                        dense
+                        @click="props.expand = !props.expand"
+                        :icon="
+                          props.expand ? 'mdi-menu-down' : 'mdi-menu-right'
+                        "
+                      />
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <!-- <div v-else-if="col.name === 'posMasterNo'">
+                            {{
+                              props.row.isSit
+                                ? col.value + " " + "(ทับที่)"
+                                : col.value
+                            }}
+                          </div>
+                          <div v-else-if="col.name === 'posLevelName'">
+                            {{
+                              props.row.posLevelName
+                                ? props.row.isSpecial == true
+                                  ? `${props.row.posLevelName} (ฉ)`
+                                  : props.row.posLevelName
+                                : "-"
+                            }}
+                          </div> -->
+                      <div>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                    <q-td> </q-td>
+                  </q-tr>
+
+                  <q-tr v-show="props.expand" :props="props">
+                    <q-td colspan="100%" class="bg-grey-1">
+                      <q-card flat bordered class="text-left q-ma-sm">
+                        <d-table
                           flat
-                          size="14px"
-                          color="primary"
-                          round
+                          :columns="columnsExpand"
+                          :rows="props.row.positions"
+                          table-class="text-grey-9"
+                          row-key="id"
                           dense
-                          @click="props.expand = !props.expand"
-                          :icon="
-                            props.expand ? 'mdi-menu-down' : 'mdi-menu-right'
-                          "
-                        />
-                      </q-td>
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{
-                            (reqMaster.page - 1) * Number(reqMaster.pageSize) +
-                            props.rowIndex +
-                            1
-                          }}
-                        </div>
-                        <div v-else-if="col.name === 'posMasterNo'">
-                          {{
-                            props.row.isSit
-                              ? col.value + " " + "(ทับที่)"
-                              : col.value
-                          }}
-                        </div>
-                        <div v-else-if="col.name === 'posLevelName'">
-                          {{
-                            props.row.posLevelName
-                              ? props.row.isSpecial == true
-                                ? `${props.row.posLevelName} (ฉ)`
-                                : props.row.posLevelName
-                              : "-"
-                          }}
-                        </div>
-                        <div v-else>
-                          {{ col.value ? col.value : "-" }}
-                        </div>
-                      </q-td>
-                      <q-td>
-                        <q-btn
-                          flat
-                          dense
-                          icon="mdi-dots-vertical"
-                          class="q-pa-none q-ml-xs"
-                          color="grey-13"
-                          size="12px"
+                          hide-bottom
+                          bordered
+                          separator="vertical"
+                          class="custom-header-table-expand"
                         >
-                          <q-menu>
-                            <q-list dense style="min-width: 150px">
-                              <!-- เลือกคนครอง -->
-                              <q-item
-                                v-if="
-                                  props.row.positionIsSelected == 'ว่าง' &&
-                                  store.typeOrganizational === 'draft'
-                                "
-                                clickable
-                                v-close-popup
-                                @click="openSelectPerson(props.row)"
+                          <template v-slot:header="props">
+                            <q-tr :props="props" class="bg-grey-2">
+                              <q-th
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
                               >
-                                <q-item-section>
-                                  <div class="row items-center">
-                                    <q-icon
-                                      color="secondary"
-                                      size="17px"
-                                      name="mdi-account"
-                                    />
-                                    <div class="q-pl-md">เลือกคนครอง</div>
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                              <q-item
-                                v-else-if="
-                                  props.row.positionIsSelected != 'ว่าง' &&
-                                  store.typeOrganizational === 'draft'
-                                "
-                                clickable
-                                v-close-popup
-                                @click="removePerson(props.row.id)"
+                                <span class="q-px-sm text-body2 text-black">{{
+                                  col.label
+                                }}</span>
+                              </q-th>
+                            </q-tr>
+                          </template>
+                          <template v-slot:body="props">
+                            <q-tr :props="props" class="cursor-pointer">
+                              <q-td
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
                               >
-                                <q-item-section>
-                                  <div class="row items-center">
-                                    <q-icon
-                                      color="red"
-                                      size="17px"
-                                      name="mdi-account-remove"
-                                    />
-                                    <div class="q-pl-md">ลบคนครอง</div>
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                              <q-item
-                                v-for="(
-                                  item, index
-                                ) in store.typeOrganizational === 'draft'
-                                  ? listMenu
-                                  : listMenu.filter(
-                                      (e) => e.type === 'HISTORY'
-                                    )"
-                                :key="index"
-                                clickable
-                                v-close-popup
-                                @click="
-                                  item.type === 'EDIT'
-                                    ? onClickPosition('EDIT', props.row.id)
-                                    : item.type === 'DEL'
-                                    ? onClickDelete(props.row.id)
-                                    : item.type === 'MOVE'
-                                    ? onClickMovePos(props.row.id, 'SINGER')
-                                    : item.type === 'HISTORY'
-                                    ? onClickHistoryPos(props.row.id)
-                                    : item.type === 'INHERIT'
-                                    ? onClickInherit(props.row.id)
-                                    : item.type === 'COPY'
-                                    ? onClickCopyPosition('COPY', props.row.id)
-                                    : null
-                                "
-                              >
-                                <q-item-section>
-                                  <div class="row items-center">
-                                    <q-icon
-                                      :color="item.color"
-                                      size="17px"
-                                      :name="item.icon"
-                                    />
-                                    <div class="q-pl-md">{{ item.label }}</div>
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                              <q-item
-                                v-if="props.row.positionIsSelected != 'ว่าง'"
-                                clickable
-                                v-close-popup
-                                @click="onClickViewDetail(props.row)"
-                              >
-                                <q-item-section>
-                                  <div class="row items-center">
-                                    <q-icon
-                                      color="blue"
-                                      size="17px"
-                                      name="mdi-eye"
-                                    />
-                                    <div class="q-pl-md">ดูรายละเอียด</div>
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                            </q-list>
-                          </q-menu>
-                        </q-btn>
-                      </q-td>
-                    </q-tr>
-
-                    <q-tr v-show="props.expand" :props="props">
-                      <q-td colspan="100%" class="bg-grey-1">
-                        <q-card flat bordered class="text-left q-ma-sm">
-                          <d-table
-                            flat
-                            :columns="columnsExpand"
-                            :rows="props.row.positions"
-                            table-class="text-grey-9"
-                            row-key="id"
-                            dense
-                            hide-bottom
-                            bordered
-                            separator="vertical"
-                            class="custom-header-table-expand"
-                          >
-                            <template v-slot:header="props">
-                              <q-tr :props="props" class="bg-grey-2">
-                                <q-th
-                                  v-for="col in props.cols"
-                                  :key="col.name"
-                                  :props="props"
+                                <div v-if="col.name == 'no'" class="text-body2">
+                                  {{ props.rowIndex + 1 }}
+                                </div>
+                                <div
+                                  v-else-if="col.name === 'posExecutiveName'"
+                                  class="text-body2"
                                 >
-                                  <span class="q-px-sm text-body2 text-black">{{
-                                    col.label
-                                  }}</span>
-                                </q-th>
-                              </q-tr>
-                            </template>
-                            <template v-slot:body="props">
-                              <q-tr :props="props" class="cursor-pointer">
-                                <q-td
-                                  v-for="col in props.cols"
-                                  :key="col.name"
-                                  :props="props"
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
+
+                                <div
+                                  v-else-if="
+                                    col.name === 'positionExecutiveField'
+                                  "
+                                  class="text-body2"
                                 >
-                                  <div
-                                    v-if="col.name == 'no'"
-                                    class="text-body2"
-                                  >
-                                    {{ props.rowIndex + 1 }}
-                                  </div>
-                                  <div
-                                    v-else-if="col.name === 'posExecutiveName'"
-                                    class="text-body2"
-                                  >
-                                    {{ col.value ? col.value : "-" }}
-                                  </div>
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
 
-                                  <div
-                                    v-else-if="
-                                      col.name === 'positionExecutiveField'
-                                    "
-                                    class="text-body2"
-                                  >
-                                    {{ col.value ? col.value : "-" }}
-                                  </div>
+                                <div
+                                  v-else-if="col.name === 'positionArea'"
+                                  class="text-body2"
+                                >
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
 
-                                  <div
-                                    v-else-if="col.name === 'positionArea'"
-                                    class="text-body2"
-                                  >
-                                    {{ col.value ? col.value : "-" }}
-                                  </div>
-
-                                  <div v-else class="text-body2">
-                                    {{ col.value }}
-                                  </div>
-                                </q-td>
-                              </q-tr>
-                            </template>
-                          </d-table>
-                        </q-card>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                  <!-- <template v-slot:pagination="scope">
-                    <q-pagination
-                      v-model="reqMaster.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="totalPage"
-                      :max-pages="5"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                    ></q-pagination>
-                  </template> -->
-                </d-table>
-              </div>
+                                <div v-else class="text-body2">
+                                  {{ col.value }}
+                                </div>
+                              </q-td>
+                            </q-tr>
+                          </template>
+                        </d-table>
+                      </q-card>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ totalRow }} รายการ
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="maxPage"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    @update:model-value="
+                      fetchDataTable(
+                        reqMaster.id,
+                        reqMaster.revisionId,
+                        reqMaster.type
+                      )
+                    "
+                  ></q-pagination>
+                </template>
+              </d-table>
             </div>
           </div>
         </q-card>