hrms-mgt/src/modules/05_placement/components/pass/Table.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import Table from "@/modules/05_placement/components/pass/TableView.vue";
import { useQuasar, QForm } from "quasar";
import type { TableName } from "@/modules/05_placement/interface/request/placement";
import { usePlacementDataStore } from "@/modules/05_placement/store";
import type { QTableProps } from "quasar";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const visibleColumns = ref<String[]>([]);
const store = usePlacementDataStore();
const filter = ref<string>("");
const { placementData } = store;
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const modal = ref<boolean>(false); //modal add detail
const modal_right = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const Name = ref<string>();
const positionMasterUserNote = ref<string>();
const $q = useQuasar(); // show dialog
const files = ref<File[]>([]);
const appointModal = ref<boolean>(false);
const appoint = ref<any>({
  Code: '',
  UnitName: '',
  PositionNo: '',
  PositionType: '',
  PositionManage: '',
  PositionTypeManage: '',
  PositionLine: '',
  Major: '',
  PositionLevel: ''
});

const information = reactive<any>({
  cardId: '',
  fullname: '',
  birthday: '',
  gender: '',
  address: '',
  school: '',
  degree: '',
  department: '',
  other: '',
  A1: null,
  A2: null,
  B1: null,
  B2: null,
  C1: null,
  C2: null,
  status: '',
  range: null,
  total: null
});

const saveAppoint = () => {
  console.log("save appoint===>", appoint.value);
}

const savePostpone = () => {
  const dataPost = { note: positionMasterUserNote.value, files: files }
  console.log("save postpone===>", dataPost);
  positionMasterUserNote.value = '';
  modal_right.value = false;
}

const saveDisclaim = () => {
  const dataPost = { note: positionMasterUserNote.value }
  console.log("save disclaim===>", dataPost);
  positionMasterUserNote.value = '';
  modal_right.value = false;
}

const clickEditRow = () => {
  editRow.value = true;
};
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
const selectData = (props: TableName) => {
  information.cardId = '4016500103241'
  information.fullname = props.Name
  information.birthday = '17 ก.พ. 2535'
  information.gender = 'หญิง'
  information.address = '200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170'
  information.school = 'มหาวิทยาลัยมหาสารคาม'
  information.degree = 'การศึกษาบัณฑิต'
  information.department = 'เทคโนโลยีสื่อสารการศึกษา'
  information.other = 'ใบอนุญาตประกอบวิชาชีพ'
  information.A1 = 200
  information.A2 = 133
  information.B1 = 200
  information.B2 = 149
  information.C1 = 100
  information.C2 = 382
  information.status = 'ผ่าน'
  information.range = 3
  information.total = 5
  Name.value = props.Name;
  modal.value = true;

  // if (editvisible.value == true) {
  //   // editRow.value = false;
  //   // modalEdit.value = true;
  //   modal.value = false;
  //   // edit.value = true;
  //   // position.value = props.position;
  //   Name.value = props.Name;
  //   // ExamOrder.value = props.ExamOrder;
  //   // Unit.value = props.Unit;
  //   // ReportingDate.value = props.ReportingDate;
  //   // BMAOfficer.value = props.BMAOfficer;
  //   // Status.value = props.Status;
  //   // checkList.value = props.checkList;
  // } else {
  //   // editRow.value = false;
  //   // modalEdit.value = true;
  //   modal.value = true;
  //   // edit.value = true;
  // }
};

const getNumFile = ref(0);
const editDetail = (props: TableName, action: "cancel" | "wait") => {

  if (action === "cancel") {
    getNumFile.value = 0;
    editRow.value = false;
    modalEdit.value = false;
    modal_right.value = true;
    edit.value = true;
    Name.value = props.Name;
  } else if (action === "wait") {
    getNumFile.value = 1;
    editRow.value = false;
    modalEdit.value = true;
    modal_right.value = true;
    edit.value = true;
    Name.value = props.Name;
  }

};
placementData.mappingPosition.columns.length == 0
  ? (visibleColumns.value = [
    "position",
    "Name",
    "ExamOrder",
    "Unit",
    "ReportingDate",
    "BMAOfficer",
    "Status",
    "checkList",
  ])
  : (visibleColumns.value = placementData.mappingPosition.columns);
const columns = ref<QTableProps["columns"]>([
  {
    name: "position",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Name",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "Name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "ExamOrder",
    align: "left",
    label: "ลำดับที่สอบได้",
    sortable: true,
    field: "ExamOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Unit",
    align: "left",
    label: "หน่วยงานที่รับการบรรจุ",
    sortable: true,
    field: "Unit",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "ReportingDate",
    align: "left",
    label: "วันที่รายงานตัว",
    sortable: true,
    field: "ReportingDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "BMAOfficer",
    align: "left",
    label: "ข้าราชการฯ กทม.",
    sortable: true,
    field: "BMAOfficer",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Status",
    align: "left",
    label: "สถานะการบรรจุ",
    sortable: true,
    field: "Status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const rows = ref<TableName[]>([
  {
    Id: "4016500103241",
    position: 1,
    Name: "นางสาวกัณฐิมา กาฬสินธุ์",
    ExamOrder: 1,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "-", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "สละสิทธิ์",
    checkList: null,
  },
  {
    Id: "4016500092355",
    position: 2,
    Name: "นางสาวรัชภรณ์ ภักดี",
    ExamOrder: 2,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "", //วันที่รายงานตัว
    BMAOfficer: false,
    Status: "ยังไม่บรรจุ",
    checkList: null,
  },
  {
    Id: "4016500086436",
    position: 3,
    Name: "นางสาวภาพรรณ ลออ",
    ExamOrder: 3,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "ยังไม่บรรจุ",
    checkList: null,
  },

  {
    Id: "4016500073585",
    position: 4,
    Name: "นางกติมา พนมเทียน",
    ExamOrder: 4,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.1)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
  },

  {
    Id: "4016500053234",
    position: 5,
    Name: "นางสาววิยฎา ทองเอียด",
    ExamOrder: 5,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.2)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
  },
  {
    Id: "4016500042345",
    position: 6,
    Name: "นายศรุณ เจริญเมือง",
    ExamOrder: 6,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.3)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
  },
  {
    Id: "401650002245",
    position: 7,
    Name: "นายอภินัน บอบู่",
    ExamOrder: 7,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.4)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "บรรจุเเล้ว",
    checkList: null,
  },
]);

const clickCancel = async () => {
  editvisible.value = false;
};

const openAppointModal = (value: any) => {
  appointModal.value = true
  editRow.value = true;
};

const clickClose = async () => {
  if (editRow.value == true) {
    $q.dialog({
      title: `ข้อมูลมีการแก้ไข`,
      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
      cancel: "ยกเลิก",
      ok: "ยืนยัน",
      persistent: true,
    }).onOk(async () => {
      modal_right.value = false;
      modal.value = false;
      appointModal.value = false;
    });
  } else {
    modal_right.value = false;
    modal.value = false;
    appointModal.value = false;
  }
};

const save = () => {
  console.log("rows===>", rows.value)
}

// modal detail 
interface CheckboxItem {
  value: number;
  label: string;
}

const selection = ref([]);
const checkboxItems: CheckboxItem[] = [
  { value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
  { value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
  { value: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
  { value: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
  { value: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
  { value: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
  { value: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
  { value: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
  { value: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
  { value: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
  { value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
];

const clickSave = async () => {
  console.log(selection.value)
};
</script>
<template>
            <q-form ref="myForm">
              <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
                v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
                :boss="true" :saveNoDraft="true" :add="save">
                <template #columns="props">
                  <q-tr :props="props">
                    <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>

                    <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
                      class="cursor-pointer">
                      <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
                        <div>
                          <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
                          <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
                        </div>
                      </div>
                      <div v-else-if="col.name == 'Name'" class="table_ellipsis">
                        {{ col.value }}
                        <p>{{ props.row.Id }}</p>
                      </div>
                      <div v-else-if="col.name == 'Unit'" class="table_ellipsis">

                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
                          <div @click="openAppointModal">
                            <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
                              <template v-slot:prepend>
                                <q-icon name="bookmark" color="primary" />
                              </template>
                            </q-input>
                          </div>
                        </div>
                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
                        <div v-else>
                          {{ props.row.UnitGroup }}
                          <p>{{ col.value }}</p>
                        </div>
                      </div>
                      <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
                          <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
                            v-model="props.row.ReportingDate">
                            <template #year="{ year }">
                              {{ year + 543 }}
                            </template>
                            <template #year-overlay-value="{ value }">
                              {{ parseInt(value + 543) }}
                            </template>
                            <template #trigger>
                              <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
                                <template v-slot:prepend>
                                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                                  </q-icon>
                                </template>
                              </q-input>
                            </template>
                          </datepicker>
                        </div>
                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
                        <div v-else>
                          {{ mixin.date2Thai(col.value) }}
                        </div>
                      </div>
                      <div v-else class="table_ellipsis">
                        {{ col.value }}
                      </div>
                    </q-td>
                    <q-td auto-width>
                      <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
                        <div></div>
                      </div>
                      <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
                        <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
                          @click="editDetail(props.row, 'wait')" />
                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
                          @click="editDetail(props.row, 'cancel')" />
                      </div>
                      <div v-else align="right">
                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
                          @click="editDetail(props.row, 'cancel')" />
                      </div>
                    </q-td>
                  </q-tr>
                </template>
              </Table>
            </q-form>

            <q-dialog v-model="appointModal" persistent>
              <q-card style="width: 800px">
                <q-form ref="myForm">
                  <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
                  <q-separator />
                  <q-card-section>

                    <div class="row q-col-gutter-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col-6">
                        <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
                      </div>
                    </div>

                  </q-card-section>

                  <q-separator />
                  <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
                </q-form>
              </q-card>
            </q-dialog>

            <q-dialog v-model="modal" full-height full-width>
              <q-card>
                <q-form ref="myForm">
                  <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
                  <DialogHeader 
                    :title="`รายละเอียดของ ${Name}`"
                    :close="clickClose"
                  />
                  <q-separator />
                    <q-card-section class="q-pa-sm">

                      <div class="q-card q-card--bordered q-card--flat q-pa-sm">
                        <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                          ข้อมูลทั่วไป
                        </div>
                        <div class="row">
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            เลขที่ประจำตัวประชาชน
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.cardId }}
                          </div>
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            ชื่อ-นามสกุล
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.fullname }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            วัน/เดือน/ปีเกิด
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.birthday }}
                          </div>
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            เพศ
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.gender }} 
                          </div>
                        </div>
                      </div>

                      <div class="q-card q-card--bordered q-card--flat q-pa-sm">
                        <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                          ภูมิลำนำ
                        </div>
                        <div class="row">
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            ที่อยู่
                          </div>
                          <div class="col q-pa-xs" style="color: gray; font-size: 18px;">
                            {{ information.address }}
                          </div>
                        </div>
                      </div>

                      <div class="q-card q-card--bordered q-card--flat q-pa-sm">
                        <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                          การศึกษา
                        </div>
                        <div class="row">
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            สถานศึกษา
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.school }}
                          </div>
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            วุฒิการศึกษา
                          </div>
                          <div class="col-3 q-pa-xs">
                            {{ information.deegree }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            สาขาวิชาเอก
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.department }}
                          </div>
                          <div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
                            อื่นๆ
                          </div>
                          <div class="col-3 q-pa-xs" style="font-size: 18px;">
                            {{ information.other }}
                          </div>
                        </div>
                      </div>
                      <!-- Bright -->
                      <div class="q-card q-card--bordered q-card--flat q-pa-sm">
                        <div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
                          การสอบ
                        </div>
                        <div class="row"> 
                          <!--  text-align: center; -->
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
                            ประเภท
                          </div>
                          <div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
                            คะแนนเต็ม
                          </div>
                          <div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
                            คะแนนที่ได้
                          </div>
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
                            ผลการสอบ
                          </div>
                          <div class="col-2 q-pa-xs">
                            {{ information.status }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
                            ภาค ก
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold; ">
                            {{ information.A1 }}
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.A2 }}
                          </div>
                          <div class="col-2 q-pa-xs" style="color: gray;  font-size: 19px;">
                            ลำดับที่สอบได้
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.range }}
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
                            ภาค ข
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.B1 }}
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.B2 }}
                          </div>
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
                            จำนวนครั้งที่สมัครสอบ
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.total }}
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
                            ภาค ค
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.C1 }}
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ information.C2 }}
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
                            รวมทั้งหมด
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ (information.A1 + information.B1 + information.C1) }}
                          </div>
                          <div class="col-2 q-pa-xs" style="font-weight: bold;">
                            {{ (information.A2 + information.B2 + information.C2) }}
                          </div>
                        </div>
                      </div>
                      <!-- Bright -->
                      <div class="q-card q-card--bordered q-card--flat q-pa-sm">
                        <div class="col-12 row items-center q-pa-sm" style="font-weight: bold; font-size: 18px;">
                          การคัดกรองคุณสมบัติ
                        </div>
                        <div >
                        <q-list >
                          <q-item>
                            <q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style="font-size: 18px;"/>
                          </q-item>
                          <q-separator spaced inset />
                        </q-list>
                        </div>
                      </div>

                    </q-card-section>
                  <DialogFooter
                    :save="clickSave"
                    v-model:editvisible="edit"
                    v-model:modalEdit="modalEdit"
                  />
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modal_right" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
              :borderless="!edit" v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`"
              @update:modelValue="clickEditRow" type="textarea" />
            <q-file v-if="getNumFile == 1" v-model="files" dense :label="'เลือกไฟล์เอกสารหลักฐาน'" outlined use-chips
              multiple class="q-py-sm">
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit"
          :save="modalEdit ? savePostpone : saveDisclaim" />
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.q-table p {
  margin-bottom: 0;
  color: #818181;
}
</style>