diff --git a/src/modules/02_users/router.ts b/src/modules/02_users/router.ts
index 14dd6f56..ee8b6812 100644
--- a/src/modules/02_users/router.ts
+++ b/src/modules/02_users/router.ts
@@ -3,10 +3,12 @@ const PageManagementRole = () =>
   import("@/modules/02_users/views/managementRoleUser.vue");
 
 const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue");
-const RoleDetail = () => import("@/modules/02_users/views/detailRoleView.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");
 
 export default [
   {
@@ -49,7 +51,7 @@ export default [
   {
     path: "/roles/:id",
     name: "manageRolesId",
-    component: RoleDetail,
+    component: ListsPage2Role,
     meta: {
       Auth: true,
       Key: [7],
diff --git a/src/modules/02_users/views/detailRoleView.vue b/src/modules/02_users/views/detailRoleView.vue
index 626323c6..62a501ca 100644
--- a/src/modules/02_users/views/detailRoleView.vue
+++ b/src/modules/02_users/views/detailRoleView.vue
@@ -1,12 +1,25 @@
+<<<<<<<< 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([
+const systemLists = ref<any>([
   {
     key: "SYS_METADATA_KPI",
     name: "ข้อมูลการประเมิน",
@@ -1050,6 +1063,8 @@ const systemLists = ref([
     ],
   },
 ]);
+
+function onSubmit() {}
 </script>
 
 <template>
@@ -1067,106 +1082,141 @@ const systemLists = ref([
     จัดการสิทธิ์บทบาท
   </div>
 
-  <q-card flast bordered class="">
-    <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-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-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
+              <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"
@@ -1198,8 +1248,15 @@ const systemLists = ref([
             <q-checkbox v-model="item3.delete" />
           </q-td>
         </q-tr> -->
-        </template>
-      </q-table>
-    </div>
-  </q-card>
+          </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
new file mode 100644
index 00000000..62a501ca
--- /dev/null
+++ b/src/modules/02_users/views/permissionDetail.vue
@@ -0,0 +1,1262 @@
+<<<<<<<< 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>