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 router = useRouter();
const formData = reactive<FormRole>({
  role: "",
  description: "",
});

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

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

    create: true,
    list: true,
    get: true,
    update: true,
    delete: true,
    children: [
      {
        key: "INDICATOR",
        name: "ตัวชี้วัด",
        selected: true,
        owner: true,

        create: true,
        list: true,
        get: true,
        update: true,
        delete: true,

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

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "INDICATOR_POSITION",
            name: "ตามตำแหน่ง",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "INDICATOR_SPECIAL",
            name: "งานที่ได้รับมอบหมาย",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
        ],
      },
      {
        key: "COMPETENCY",
        name: "สมรรถนะ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "STRATEGY",
        name: "ยุทธศาสตร์",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_ORG",
    name: "โครงสร้างอัตรากำลัง",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,
  },
  {
    key: "SYS_ORG_EMPLOYEE",
    name: "อัตรากำลังลูกจ้างประจำฯ",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,
  },
  {
    key: "SYS_REGISTRY",
    name: "ทะเบียนประวัติ",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,
  },
  {
    key: "COMMAND",
    name: "ออกคำสั่ง",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,
  },
  {
    key: "SYS_EXAM",
    name: "สรรหา",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,
    children: [
      {
        key: "SETTING_WEB_EXAM",
        name: "ตั้งค่าเว็บสรรหา",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "COMPETITIVE_EXAM",
        name: "สอบแข่งขัน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,

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

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "STAT_APPLY_EXAM",
            name: "สถิติสมัครสอบแข่งขัน",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
        ],
      },
      {
        key: "QUALIFY_EXAM",
        name: "คัดเลือก",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,

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

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "QUALIFY_ROUND_DISABLED",
            name: "จัดการรอบคัดเลือกคนพิการ",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "QUALIFY_MANAGE_LIST",
            name: "จัดการรายชื่อคัดเลือก",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "QUALIFY_APPLY_STAT",
            name: "สถิติสมัครคัดเลือก",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "QUALIFY_APPLY_STAT_DISABLED",
            name: "สถิติสมัครคัดเลือกคนพิการ",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
        ],
      },
    ],
  },
  {
    key: "SYS_PLACEMENT",
    name: "บรรจุ แต่งตั้ง ย้าย โอน",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_TRANSFER",
        name: "รายการขอโอน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_RECEIVE",
        name: "รายการรับโอน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_HELP_GOVERNMENT",
        name: "รายการช่วยราชการ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_REPATRIATE",
        name: "รายการส่งตัวกลับ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_APPOINT",
        name: "รายการแต่งตั้ง-เลื่อน-ย้าย",
        selected: false,
        owner: "",
        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_APPOINT_EMPLOYEE",
        name: "ปรับระดับชั้นงาน-ย้ายลูกจ้าง",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "PLACEMENT_OTHER",
        name: "รายการอื่นๆ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_PROBATION",
    name: "การทดลองปฏิบัติหน้าที่ราชการ",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,
  },
  {
    key: "SYS_RETIREMENT",
    name: "พ้นจากราชการ",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "RESIGN",
        name: "รายการลาออก",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "EXIT_INTERVIEW",
        name: "Exit interview",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DECEASED",
        name: "รายการบันทึกการถึงแก่กรรม",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISMISS",
        name: "รายการให้ออก",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_INSIGNIA",
    name: "เครื่องราชฯ",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "INSIGNIA_MANAGE",
        name: "จัดการคำขอ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "INSIGNIA_RECORD",
        name: "บันทึกผลการเสนอขอ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "INSIGNIA_ALLOCATE",
        name: "จัดสรรเครื่องราชฯ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "INSIGNIA_BORROW",
        name: "ยืม-คืนเครื่องราชฯ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "INSIGNIA_REPORT",
        name: "รายงาน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_LEAVE",
    name: "การลา",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "CHANGE_LEAVE",
        name: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "WORKTIME_LIST",
        name: "รายการลงเวลาปฏิบัติงาน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "WORKTIME_SPECIAL",
        name: "ลงเวลากรณีพิเศษ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "LEAVE_LIST",
        name: "รายการลา",
        selected: false,
        owner: "",
        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "LEAVE_REPORT",
        name: "รายงานสถิติการลา",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_DISCIPLINE",
    name: "วินัย",
    selected: true,
    owner: "",
    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_INVESTIGATE",
        name: "สืบสวนข้อเท็จจริง",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_DISCIPLINARY",
        name: "สอบสวนความผิดทางวินัย",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_RESULT",
        name: "สรุปผลการพิจารณาความผิดทางวินัย",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_SUSPEND",
        name: "รายชื่อผู้ถูกพักราชการ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_APPEAL",
        name: "อุทธรณ์/ร้องทุกข์",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_COMMAND",
        name: "ออกคำสั่งลงโทษทางวินัย",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DISCIPLINE_BASIC",
        name: "ข้อมูลพื้นฐาน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,

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

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "DISCIPLINE_CHANNEL",
            name: "ช่องทางการร้องเรียน",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
        ],
      },
    ],
  },
  {
    key: "SYS_EVALUATE",
    name: "ประเมินบุคคล",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "EVALUATE_DIRECTOR_METTING",
        name: "กรรมการและการประชุม",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,

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

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
          {
            key: "EVALUATE_METTING",
            name: "การประชุม",
            selected: false,
            owner: "",

            create: false,
            list: false,
            get: false,
            update: false,
            delete: false,
          },
        ],
      },
    ],
  },
  {
    key: "SYS_SALARY",
    name: "เงินเดือน/ค่าจ้าง",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "SALARY_EMPLOYEE_CHART",
        name: "ผังบัญชีค่าจ้างลูกจ้างประจำ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "SALARY_ROUND",
        name: "รอบการเลื่อนเงินเดือน",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "SALARY_SLIP",
        name: "เลื่อนเงินเดือนข้าราชการ ฯ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "SALARY_EMPLOYEE_SLIP",
        name: "เลื่อนค่าจ้างลูกจ้างประจำ",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "SALARY_COMMAND",
        name: "ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_KPI",
    name: "ประเมินผลการปฏิบัติราชการระดับบุคคล",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "KPI_List",
        name: "รายการการประเมินผล",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
    ],
  },
  {
    key: "SYS_DEVELOPMENT",
    name: "พัฒนาบุคลากร",
    selected: false,
    owner: "",

    create: false,
    list: false,
    get: false,
    update: false,
    delete: false,

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

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DEVELOPMENT_HISTORY",
        name: "ประวัติฝึกอบรม/ดูงาน ขรก.",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DEVELOPMENT_HISTORY_EMPLOYEE",
        name: "ประวัติฝึกอบรม/ดูงานลูกจ้าง",
        selected: false,
        owner: "",

        create: false,
        list: false,
        get: false,
        update: false,
        delete: false,
      },
      {
        key: "DEVELOPMENT_SCHOLARSHIP",
        name: "ทุนการศึกษา/ฝึกอบรม",
        selected: false,
        owner: "",
        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>
      <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="3" style="font-size: 1rem"
                >ความเป็นเจ้าของ (Ownership)</q-th
              >
              <q-th colspan="5" style="text-align: center; font-size: 1rem"
                >สิทธิ์ดำเนินการ (Permission)</q-th
              >
            </q-tr>
            <q-tr>
              <q-th
                >OWNER<br />
                เจ้าของระบบ</q-th
              >
              <q-th>STAFF <br />(การเจ้าหน้าที่)</q-th>
              <q-th>GUEST <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"
                  @update:model-value="
                    !props.row.selected && (props.row.owner = ''),
                      (props.row.create = false),
                      (props.row.list = false),
                      (props.row.get = false),
                      (props.row.update = false),
                      (props.row.delete = false)
                  "
                />
                <strong>{{ props.row.name }}</strong>
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="props.row.owner"
                  val="OWNER"
                  @update:model-value="
                    props.row.owner === 'OWNER' && (props.row.create = true),
                      (props.row.list = true),
                      (props.row.get = true),
                      (props.row.update = true),
                      (props.row.delete = true)
                  "
                  v-if="!props.row.children"
                  :disable="!props.row.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="props.row.owner"
                  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.owner"
                  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.create"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.list"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.get"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.update"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="props.row.delete"
                  v-if="!props.row.children"
                  :disable="
                    !props.row.selected ||
                    (props.row.selected && props.row.owner === 'OWNER')
                  "
                />
              </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.owner = ''),
                      (item.create = false),
                      (item.list = false),
                      (item.get = false),
                      (item.update = false),
                      (item.delete = false)
                  "
                />
                {{ item.name }}
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="item.owner"
                  val="OWNER"
                  @update:model-value="
                    item.owner === 'OWNER' && (item.create = true),
                      (item.list = true),
                      (item.get = true),
                      (item.update = true),
                      (item.delete = true)
                  "
                  :disable="!item.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="item.owner"
                  val="STAFF"
                  :disable="!item.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-radio
                  v-model="item.owner"
                  val="GUEST"
                  :disable="!item.selected"
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.create"
                  :disable="
                    !item.selected || (item.selected && item.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.list"
                  :disable="
                    !item.selected || (item.selected && item.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.get"
                  :disable="
                    !item.selected || (item.selected && item.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.update"
                  :disable="
                    !item.selected || (item.selected && item.owner === 'OWNER')
                  "
                />
              </q-td>
              <q-td style="text-align: center">
                <q-checkbox
                  v-model="item.delete"
                  :disable="
                    !item.selected || (item.selected && item.owner === 'OWNER')
                  "
                />
              </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>