hrms-admin/src/modules/02_users/views/permissionDetail.vue

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { FormRole } from "@/modules/02_users/interface/request/Main";

const attrPrivilege = ref<any[]>([]);
const attrPrivilegeOp = ref<any[]>([
  {
    id: "ROOT",
    name: "มีสิทธิเข้าถึงข้อมูลในทุกระดับ",
  },
  {
    id: "CHILD",
    name: "มีสิทธิเข้าถึงข้อมูลเฉพาะระดับชั้นปัจจุบันของตัวเอง",
  },
  {
    id: "NORMAL",
    name: "มีสิทธิเข้าถึงข้อมูลเฉพาะในระดับชั้นตัวเองเท่านั้น",
  },
  {
    id: "SPECIFIC",
    name: "มีสิทธิเข้าถึงข้อมูลเฉพาะเจาะจง",
  },
]);
const router = useRouter();
const formData = reactive<FormRole>({
  role: "",
  description: "",
});

const columns = ref<any>([]);

const systemLists = ref<any>([
  {
    key: "SYS_METADATA_KPI",
    name: "ข้อมูลการประเมิน",
    selected: true,
    attrOwnership: "",

    attrIsCreate: true,
    attrIsList: true,
    attrIsGet: true,
    attrIsUpdate: true,
    attrIsDelete: true,
    attrPrivilege: "",
    children: [
      {
        key: "INDICATOR",
        name: "ตัวชี้วัด",
        selected: true,
        attrOwnership: true,

        attrIsCreate: true,
        attrIsList: true,
        attrIsGet: true,
        attrIsUpdate: true,
        attrIsDelete: true,
        attrPrivilege: "",

        children: [
          {
            key: "INDICATOR_PLAN",
            name: "ตามแผน",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "INDICATOR_POSITION",
            name: "ตามตำแหน่ง",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "INDICATOR_SPECIAL",
            name: "งานที่ได้รับมอบหมาย",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
        ],
      },
      {
        key: "COMPETENCY",
        name: "สมรรถนะ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "STRATEGY",
        name: "ยุทธศาสตร์",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_ORG",
    name: "โครงสร้างอัตรากำลัง",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",
  },
  {
    key: "SYS_ORG_EMPLOYEE",
    name: "อัตรากำลังลูกจ้างประจำฯ",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",
  },
  {
    key: "SYS_REGISTRY",
    name: "ทะเบียนประวัติ",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",
  },
  {
    key: "COMMAND",
    name: "ออกคำสั่ง",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",
  },
  {
    key: "SYS_EXAM",
    name: "สรรหา",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",
    children: [
      {
        key: "SETTING_WEB_EXAM",
        name: "ตั้งค่าเว็บสรรหา",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "COMPETITIVE_EXAM",
        name: "สอบแข่งขัน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",

        children: [
          {
            key: "MANAGE_ROUND",
            name: "จัดการรอบสอบแข่งขัน",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "STAT_APPLY_EXAM",
            name: "สถิติสมัครสอบแข่งขัน",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
        ],
      },
      {
        key: "QUALIFY_EXAM",
        name: "คัดเลือก",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",

        children: [
          {
            key: "QUALIFY_MANAGE_ROUND",
            name: "จัดการรอบคัดเลือก",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "QUALIFY_ROUND_DISABLED",
            name: "จัดการรอบคัดเลือกคนพิการ",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "QUALIFY_MANAGE_LIST",
            name: "จัดการรายชื่อคัดเลือก",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "QUALIFY_APPLY_STAT",
            name: "สถิติสมัครคัดเลือก",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "QUALIFY_APPLY_STAT_DISABLED",
            name: "สถิติสมัครคัดเลือกคนพิการ",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
        ],
      },
    ],
  },
  {
    key: "SYS_PLACEMENT",
    name: "บรรจุ แต่งตั้ง ย้าย โอน",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "PLACEMENT_LIST",
        name: "รายชื่อผู้สอบผ่าน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_TRANSFER",
        name: "รายการขอโอน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_RECEIVE",
        name: "รายการรับโอน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_HELP_GOVERNMENT",
        name: "รายการช่วยราชการ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_REPATRIATE",
        name: "รายการส่งตัวกลับ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_APPOINT",
        name: "รายการแต่งตั้ง-เลื่อน-ย้าย",
        selected: false,
        attrOwnership: "",
        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_APPOINT_EMPLOYEE",
        name: "ปรับระดับชั้นงาน-ย้ายลูกจ้าง",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "PLACEMENT_OTHER",
        name: "รายการอื่นๆ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_PROBATION",
    name: "การทดลองปฏิบัติหน้าที่ราชการ",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",
  },
  {
    key: "SYS_RETIREMENT",
    name: "พ้นจากราชการ",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "RETIREMENT",
        name: "ประกาศเกษียณ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "RESIGN",
        name: "รายการลาออก",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "EXIT_INTERVIEW",
        name: "Exit interview",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DECEASED",
        name: "รายการบันทึกการถึงแก่กรรม",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISMISS",
        name: "รายการให้ออก",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_INSIGNIA",
    name: "เครื่องราชฯ",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "INSIGNIA_ROUND",
        name: "รอบการเสนอขอ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "INSIGNIA_MANAGE",
        name: "จัดการคำขอ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "INSIGNIA_RECORD",
        name: "บันทึกผลการเสนอขอ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "INSIGNIA_ALLOCATE",
        name: "จัดสรรเครื่องราชฯ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "INSIGNIA_BORROW",
        name: "ยืม-คืนเครื่องราชฯ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "INSIGNIA_REPORT",
        name: "รายงาน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_LEAVE",
    name: "การลา",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "LEAVE_ROUND",
        name: "รอบการปฏิบัติงาน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "CHANGE_LEAVE",
        name: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "WORKTIME_LIST",
        name: "รายการลงเวลาปฏิบัติงาน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "WORKTIME_SPECIAL",
        name: "ลงเวลากรณีพิเศษ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "LEAVE_LIST",
        name: "รายการลา",
        selected: false,
        attrOwnership: "",
        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "LEAVE_REPORT",
        name: "รายงานสถิติการลา",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_DISCIPLINE",
    name: "วินัย",
    selected: true,
    attrOwnership: "",
    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "DISCIPLINE_COMPLAINTS",
        name: "เรื่องร้องเรียน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_INVESTIGATE",
        name: "สืบสวนข้อเท็จจริง",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_DISCIPLINARY",
        name: "สอบสวนความผิดทางวินัย",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_RESULT",
        name: "สรุปผลการพิจารณาความผิดทางวินัย",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_SUSPEND",
        name: "รายชื่อผู้ถูกพักราชการ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_APPEAL",
        name: "อุทธรณ์/ร้องทุกข์",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_COMMAND",
        name: "ออกคำสั่งลงโทษทางวินัย",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DISCIPLINE_BASIC",
        name: "ข้อมูลพื้นฐาน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",

        children: [
          {
            key: "DISCIPLINE_DIRECTOR",
            name: "กรรมการ",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "DISCIPLINE_CHANNEL",
            name: "ช่องทางการร้องเรียน",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
        ],
      },
    ],
  },
  {
    key: "SYS_EVALUATE",
    name: "ประเมินบุคคล",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "EVALUATE_REQUEST",
        name: "คำขอประเมิน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "EVALUATE_DIRECTOR_METTING",
        name: "กรรมการและการประชุม",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",

        children: [
          {
            key: "EVALUATE_DIRECTOR",
            name: "กรรมการ",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
          {
            key: "EVALUATE_METTING",
            name: "การประชุม",
            selected: false,
            attrOwnership: "",

            attrIsCreate: false,
            attrIsList: false,
            attrIsGet: false,
            attrIsUpdate: false,
            attrIsDelete: false,
            attrPrivilege: "",
          },
        ],
      },
    ],
  },
  {
    key: "SYS_SALARY",
    name: "เงินเดือน/ค่าจ้าง",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "SALARY_CHART",
        name: "ผังบัญชีเงินเดือนข้าราชการ ฯ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "SALARY_EMPLOYEE_CHART",
        name: "ผังบัญชีค่าจ้างลูกจ้างประจำ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "SALARY_ROUND",
        name: "รอบการเลื่อนเงินเดือน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "SALARY_SLIP",
        name: "เลื่อนเงินเดือนข้าราชการ ฯ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "SALARY_EMPLOYEE_SLIP",
        name: "เลื่อนค่าจ้างลูกจ้างประจำ",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "SALARY_COMMAND",
        name: "ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_KPI",
    name: "ประเมินผลการปฏิบัติราชการระดับบุคคล",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "KPI_Round",
        name: "รอบการประเมิน",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "KPI_List",
        name: "รายการการประเมินผล",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
  {
    key: "SYS_DEVELOPMENT",
    name: "พัฒนาบุคลากร",
    selected: false,
    attrOwnership: "",

    attrIsCreate: false,
    attrIsList: false,
    attrIsGet: false,
    attrIsUpdate: false,
    attrIsDelete: false,
    attrPrivilege: "",

    children: [
      {
        key: "DEVELOPMENT_PROJECT",
        name: "โครงการ/หลักสูตรการฝึกอบรม",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DEVELOPMENT_HISTORY",
        name: "ประวัติฝึกอบรม/ดูงาน ขรก.",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DEVELOPMENT_HISTORY_EMPLOYEE",
        name: "ประวัติฝึกอบรม/ดูงานลูกจ้าง",
        selected: false,
        attrOwnership: "",

        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
      {
        key: "DEVELOPMENT_SCHOLARSHIP",
        name: "ทุนการศึกษา/ฝึกอบรม",
        selected: false,
        attrOwnership: "",
        attrIsCreate: false,
        attrIsList: false,
        attrIsGet: false,
        attrIsUpdate: false,
        attrIsDelete: false,
        attrPrivilege: "",
      },
    ],
  },
]);

function onSubmit() {
  console.log(systemLists.value);
}
</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>
      <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
                  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="3" style="font-size: 1rem"
                >ความเป็นเจ้าของ (Ownership)</q-th
              >
              <q-th colspan="5" style="text-align: center; font-size: 1rem"
                >สิทธิ์ดำเนินการ (Permission)</q-th
              >
              <q-th
                class="relative-position"
                colspan="2"
                rowspan="2"
                style="text-align: center; font-size: 1rem"
                >สิทธิการเข้าถึง<br />
                (Privilege)
                <q-btn
                  class="absolute-customH"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="12px"
                  ><q-tooltip class="text-body1">
                    <div class="column">
                      <div class="row no-wrap">
                        <strong>ROOT</strong>-มีสิทธิเข้าถึงข้อมูลในทุกระดับ
                        ตั้งแต่ระดับของตัวเองลงไปชั้นล่างสุด
                        และขึ้นไปถึงชั้นบนสุด
                      </div>
                      <div class="row no-wrap">
                        <strong>CHILD</strong
                        >-มีสิทธิเข้าถึงข้อมูลเฉพาะระดับชั้นปัจจุบันของตัวเอง
                        ลงไปถึงชั้นล่างสุด
                      </div>
                      <div class="row no-wrap">
                        <strong>NORMAL</strong
                        >-มีสิทธิเข้าถึงข้อมูลเฉพาะในระดับชั้นตัวเองเท่านั้น
                        ไม่สามารถขึ้นหรือลงได้
                      </div>
                      <div class="row no-wrap">
                        <strong>SPECIFIC</strong
                        >-มีสิทธิเข้าถึงข้อมูลเฉพาะเจาะจง ซึ่งจะต้องกำ หนด ID
                        ของข้อมูลที่ต้องการเข้าถึงด้วย
                      </div>
                    </div>
                  </q-tooltip></q-btn
                ></q-th
              >
            </q-tr>
            <q-tr>
              <q-th class="relative-position"
                >OWNER
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    เป็นเจ้าของระบบ มีสิทธิเต็มที่จะทำทุกอย่างในระบบนั้น ๆ
                    ได้ทั้งหมดทุกหน่วยงานโดยไม่สนใจสิทธิและลำดับชั้นการเข้าถึง
                  </q-tooltip></q-btn
                >
              </q-th>
              <q-th class="relative-position"
                >STAFF
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    เป็นเจ้าหน้าที่
                    ซึ่งอาจจะมีสิทธิในการเข้าใช้ระบบได้เพียงอย่างใดอย่างหนึ่งหรือทั้งหมด
                    ทั้งนี้ขึ้นกับสิทธิและลำดับชั้นการเข้าถึง
                  </q-tooltip></q-btn
                ></q-th
              >
              <q-th class="relative-position"
                >GUEST
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    เป็นผู้มาเยือน ใช้ในกรณีกำหนดบทบาทชั่วคราว และบทบาทเฉพาะกิจ
                  </q-tooltip></q-btn
                ></q-th
              >
              <q-th class="relative-position"
                >CREATE
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    มีสิทธิในการสร้างข้อมูล
                  </q-tooltip></q-btn
                ></q-th
              >
              <q-th class="relative-position"
                >LIST
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    มีสิทธิในการดูรายการข้อมูล
                  </q-tooltip></q-btn
                ></q-th
              >
              <q-th class="relative-position"
                >GET
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    มีสิทธิในการดูรายละเอียดข้อมูล
                  </q-tooltip></q-btn
                ></q-th
              >
              <q-th class="relative-position"
                >UPDATE
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    มีสิทธิในการแก้ไขข้อมูล
                  </q-tooltip></q-btn
                ></q-th
              >
              <q-th class="relative-position"
                >DELETE
                <q-btn
                  class="absolute-custom"
                  color="grey-4"
                  round
                  icon="info"
                  flat
                  size="10px"
                  ><q-tooltip class="text-body2">
                    มีสิทธิในการลบข้อมูล
                  </q-tooltip></q-btn
                ></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"
                  @update:model-value="
                    !props.row.selected && (props.row.attrOwnership = ''),
                      (props.row.attrIsCreate = false),
                      (props.row.attrIsList = false),
                      (props.row.attrIsGet = false),
                      (props.row.attrIsUpdate = false),
                      (props.row.attrIsDelete = false)
                  "
                />
                <strong>{{ props.row.name }}</strong>
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="props.row.attrOwnership"
                  val="OWNER"
                  @update:model-value="
                    props.row.attrOwnership === 'OWNER' &&
                      (props.row.attrIsCreate = true),
                      (props.row.attrIsList = true),
                      (props.row.attrIsGet = true),
                      (props.row.attrIsUpdate = true),
                      (props.row.attrIsDelete = true)
                  "
                  v-if="!props.row.children"
                  :disable="!props.row.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="props.row.attrOwnership"
                  val="STAFF"
                  v-if="!props.row.children"
                  :disable="!props.row.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="props.row.attrOwnership"
                  val="GUEST"
                  v-if="!props.row.children"
                  :disable="!props.row.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.attrIsCreate"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.attrIsList"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.attrIsGet"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.attrIsUpdate"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.attrIsDelete"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="min-width: 120px">
                <q-select
                  v-if="!props.row.children"
                  v-model="props.row.attrPrivilege"
                  :options="attrPrivilegeOp"
                  option-value="id"
                  option-label="id"
                  emit-value
                  map-options
                  dense
                  outlined
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.attrOwnership === 'OWNER')
                  "
                  label="สิทธิเข้าถึงข้อมูล"
                  style="min-width: 120px"
                >
                </q-select>
              </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"
                  @update:model-value="
                    !item.selected && (item.attrOwnership = ''),
                      (item.attrIsCreate = false),
                      (item.attrIsList = false),
                      (item.attrIsGet = false),
                      (item.attrIsUpdate = false),
                      (item.attrIsDelete = false)
                  "
                />
                {{ item.name }}
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="item.attrOwnership"
                  val="OWNER"
                  @update:model-value="
                    item.attrOwnership === 'OWNER' &&
                      (item.attrIsCreate = true),
                      (item.attrIsList = true),
                      (item.attrIsGet = true),
                      (item.attrIsUpdate = true),
                      (item.attrIsDelete = true)
                  "
                  :disable="!item.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="item.attrOwnership"
                  val="STAFF"
                  :disable="!item.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="item.attrOwnership"
                  val="GUEST"
                  :disable="!item.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.attrIsCreate"
                  :disable="
                    !item.selected ||
                    (item.selected && item.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.attrIsList"
                  :disable="
                    !item.selected ||
                    (item.selected && item.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.attrIsGet"
                  :disable="
                    !item.selected ||
                    (item.selected && item.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.attrIsUpdate"
                  :disable="
                    !item.selected ||
                    (item.selected && item.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.attrIsDelete"
                  :disable="
                    !item.selected ||
                    (item.selected && item.attrOwnership === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="min-width: 120px">
                <q-select
                  v-model="item.attrPrivilege"
                  :options="attrPrivilegeOp"
                  option-value="id"
                  option-label="id"
                  dense
                  outlined
                  emit-value
                  map-options
                  :disable="
                    !item.selected ||
                    (item.selected && item.attrOwnership === 'OWNER')
                  "
                  label="สิทธิเข้าถึงข้อมูล"
                  style="min-width: 120px"
                >
                </q-select
              ></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.attrOwnership" />
            </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.attrIsCreate" />
            </q-td>
            <q-td style="text-align: center">
              <q-checkbox v-model="item3.attrIsList" />
            </q-td>
            <q-td style="text-align: center">
              <q-checkbox v-model="item3.attrIsGet" />
            </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.attrIsDelete" />
            </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>
<style scoped>
.absolute-custom {
  position: absolute;
  top: -5px;
  right: -5px;
}
.absolute-customH {
  position: absolute;
  top: -2px;
  right: -2px;
}
</style>