hrms-mgt/src/modules/03_recruiting/views/01_compete/Period.vue

<!-- page:จัดการรอบการสอบ สรรหา -->
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import genReport from "@/plugins/genreport";

import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";

import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import type {
  ResponseRecruitPeriod,
  ResponseHistoryObject,
} from "@/modules/03_recruiting/interface/response/Period";

import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import HistoryTable from "@/components/TableHistory.vue";
import DialogHeadTemplate from "@/modules/03_recruiting/components/DialogHeadTemplate.vue";

const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const {
  success,
  dateText,
  showLoader,
  hideLoader,
  messageError,
  onSearchDataTable,
  dialogRemove,
} = mixin;

const router = useRouter();
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
const order = ref<number>(1);

const files = ref<any>(null);
const files_score = ref<any>(null);
const files_candidate = ref<any>(null);
const files_result = ref<any>(null);
const modalAdd = ref<boolean>(false);
const modalScore = ref<boolean>(false);
const modalCandidate = ref<boolean>(false);
const modalResult = ref<boolean>(false);
const selected_row_id = ref<string>("");
const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
const modalErrorTittle = ref<string>(""); // tittle modal error
const modalErrorDetail = ref<string>(""); // detail modal error
const statusCode = ref<number>();
const filter = ref<string>(""); //search data table
const textTittle = ref<string>("");
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const textTittleResult = ref<string>("");
const rows = ref<ResponseRecruitPeriod[]>([]);
const rowsData = ref<ResponseRecruitPeriod[]>([]);
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
  sortBy: "year",
});
const visibleColumns = ref<String[]>([
  "no",
  "name",
  "order",
  "year",
  "examCount",
  "scoreCount",
  "result",
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    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",
  },
  {
    name: "order",
    align: "left",
    label: "ครั้งที่",
    sortable: true,
    field: "order",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "year",
    align: "left",
    label: "ปีงบประมาณ",
    sortable: true,
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: number, b: number) => b - a,
  },
  {
    name: "examCount",
    label: "ข้อมูลผู้สมัครสอบ",
    align: "right",
    field: "examCount",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "scoreCount",
    label: "บัญชีรวมคะแนน",
    align: "right",
    field: "scoreCount",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "result",
    label: "ผลการสอบ",
    align: "right",
    field: "result",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const columnsHistory = ref<QTableProps["columns"]>([
  {
    name: "description",
    align: "left",
    label: "รายละเอียด",
    sortable: true,
    field: "description",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "createdAt",
    align: "center",
    label: "วันที่ดำเนินการ",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "createdFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "createdFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const visibleColumnsHistory = ref<String[]>([
  "description",
  "createdAt",
  "createdFullName",
]);

/**
 * ฟังก์ชันแปลง date เป็นภาษาไทย
 * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
 */
function textDate(value: Date) {
  return dateText(value);
}

/** ดึงข้อมูล รอบสอบแข่งขัน  */
async function fetchData(actionType?: string) {
  showLoader();
  await http
    .get(config.API.getCandidates)
    .then((res) => {
      const data = res.data.result;
      let result: ResponseRecruitPeriod[] = [];
      if (data.length > 0) {
        data.map((r: ResponseRecruitPeriod) => {
          if (r.score != null) {
            r.scoreCount = r.score.scoreCount;
            r.scoreImportDate = r.score.importDate;
          }
          result.push(r);
        });
      }

      rows.value = result;
      rowsData.value = result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
      if (actionType == "delete") {
        success($q, "ลบข้อมูลสำเร็จ");
      }
    });
}

/**
 * ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้
 * @param id รอบสอบเเข่งขัน
 */
async function clickPassExam(id: string) {
  showLoader();
  await http
    .get(config.API.exportPassExamList(id))
    .then(async (res) => {
      const data = res.data.result;
      data.reportName = `CandidateList`;
      await genReport(data, data.reportName, "pdf");
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ
 * @param id รอบสอบเเข่งขัน
 */
async function clickCandidateList(id: string) {
  showLoader();
  await http
    .get(config.API.exportCandidateListNew(id))
    .then(async (res) => {
      const data = res.data.result;
      data.reportName = `CandidateList`;
      await genReport(data, data.reportName, "pdf");
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * รายละเอียด รอบสอบเเข่งขัน
 * @param id รอบสอบเเข่งขัน
 */
function clickDetail(id: string) {
  router.push(`/compete/import/${id}`);
}

/**
 * นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง
 * @param id รอบสอบเเข่งขัน
 */
async function clickUpload(id: string) {
  modalCandidate.value = true;
  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
  selected_row_id.value = id;
}

/**
 * นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง
 * @param id รอบสอบเเข่งขัน
 */
async function clickEdit(id: string) {
  modalScore.value = true;
  textTittleScore.value = "นำเข้าบัญชีรวมคะแนนทั้งหมด (เรียงตามเลขประจำตัวสอบ)";
  selected_row_id.value = id;
}

/**
 * นำเข้าไฟล์ลำดับ
 * @param id รอบสอบเเข่งขัน
 */
async function clickResult(id: string) {
  modalResult.value = true;
  textTittleResult.value = "นำเข้าไฟล์ผลการสอบแข่งขันฯ (บัญชีรายชื่อ)";
  selected_row_id.value = id;
}

/**
 * แก้ไขรอบสอบแข่งขัน
 * @param id รอบสอบเเข่งขัน
 */
function clickEditPeriod(id: string) {
  router.push(`/compete/period/${id}`);
}

/**
 * ประวัติ
 * @param id รอบสอบเเข่งขัน
 */
async function clickHistory(id: string) {
  modalHistory.value = true;
  showLoader();
  await http
    .get(config.API.getImportHistory(id))
    .then((res) => {
      const data = res.data.result;
      rowsHistory.value = [];
      if (data.length > 0) {
        data.map((i: ResponseHistoryObject) => {
          rowsHistory.value.push({
            createdAt: i.createdAt,
            createdFullName: i.createdFullName,
            createdUserId: i.createdUserId,
            id: i.id,
            isActive: i.isActive,
            lastUpdateFullName: i.lastUpdateFullName,
            lastUpdateUserId: i.lastUpdateUserId,
            lastUpdatedAt: i.lastUpdatedAt,
            description: i.description,
          });
        });
      }
    })
    .catch((e) => {
      modalError.value = true;
      modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
      modalErrorDetail.value = e.response.data.message;
      statusCode.value = e.response.data.status;
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * ลบข้อมูล
 *
 * @param id รอบสอบเเข่งขัน
 */
function clickDelete(id: string) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.deleteCandidates(id))
      .then(async (res) => {
        await fetchData("delete");
      })
      .catch((e) => {
        messageError($q, e);
        hideLoader();
      });
  });
}

/** ไปหน้าเพิ่มรอบสอบแข่งขัน */
function clickAdd() {
  router.push({ name: "competePeriodAdd" });
}

/** ปิด dialog */
async function clickClose() {
  modalAdd.value = false;
  await fetchData();
}

/** ปิด dialog คะเเนน */
async function clickCloseScore() {
  modalScore.value = false;
  files_score.value = null;
}

/** ปิด dialog เลือกไฟล์ผู้สมัครสอบแข่งขัน */
async function clickCloseCandidate() {
  modalCandidate.value = false;
  files_candidate.value = null;
}
/** ปิด dialog เลือกไฟล์ผลการสอบ */
async function clickCloseResult() {
  modalResult.value = false;
  files_result.value = null;
}

/** บันทึกข้อมูล เลือกไฟล์ผู้สมัครสอบแข่งขัน */
async function checkSaveCandidate() {
  const fd = new FormData();
  fd.append("attachment", files_candidate.value[0]);
  showLoader();
  await http
    .post(config.API.uploadCandidates(selected_row_id.value), fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
      modalCandidate.value = false;
      files_candidate.value = null;
      selected_row_id.value = "";
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** บันทึด คะเเนน */
async function checkSaveScore() {
  const fd = new FormData();
  fd.append("attachment", files_score.value[0]);
  showLoader();
  await http
    .post(config.API.saveScores(selected_row_id.value), fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
      modalScore.value = false;
      files_score.value = null;
      selected_row_id.value = "";
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** บันทึกข้อมูล เลือกไฟล์ผลการสอบแข่งขันฯ */
async function checkSaveResult() {
  const fd = new FormData();
  fd.append("attachment", files_result.value[0]);
  showLoader();
  await http
    .post(config.API.uploadResult(selected_row_id.value), fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผลการสอบแข่งขันฯ (บัญชีรายชื่อ)");
      modalResult.value = false;
      files_result.value = null;
      selected_row_id.value = "";
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** save data */
async function checkSave() {
  const fd = new FormData();
  fd.append("attachment", files.value[0]);
  fd.append("year", year.value.toString());
  fd.append("order", order.value.toString());
  fd.append("name", name.value);
  showLoader();
  await http
    .post(config.API.saveCandidates, fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
      modalAdd.value = false;
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSearch() {
  rows.value = onSearchDataTable(
    filter.value,
    rowsData.value,
    columns.value ? columns.value : []
  );
}

/** ดึงข้อมูล เมื่อโหลดหน้า component */
onMounted(async () => {
  hideLoader();
  await fetchData();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    จัดการรอบสอบแข่งขัน
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div>
      <Table
        style="max-height: 80vh"
        :rows="rows"
        :columns="columns"
        v-model:filter="filter"
        :onSearch="onSearch"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        :pagination="initialPagination"
        :nornmalData="true"
        :add="clickAdd"
        :paging="true"
        :titleText="''"
      >
        <template #columns="props">
          <q-tr :props="props">
            <q-td auto-width>
              <q-btn
                icon="mdi-dots-horizontal-circle-outline"
                color="secondary"
                flat
                round
                dense
                v-if="
                  checkPermission($route)?.attrIsCreate ||
                  checkPermission($route)?.attrIsDelete ||
                  checkPermission($route)?.attrIsGet ||
                  checkPermission($route)?.attrIsUpdate
                "
              >
                <q-menu transition-show="jump-down" transition-hide="jump-up">
                  <q-list dense style="min-width: 100px">
                    <q-item
                      v-if="checkPermission($route)?.attrIsGet"
                      clickable
                      v-close-popup
                      @click="clickDetail(props.row.id)"
                    >
                      <q-item-section style="min-width: 0px" avatar>
                        <q-icon color="info" size="xs" name="mdi-eye" />
                      </q-item-section>
                      <q-item-section>รายละเอียด</q-item-section>
                    </q-item>

                    <q-item
                      v-if="
                        checkPermission($route)?.attrIsUpdate &&
                        checkPermission($route)?.attrIsGet
                      "
                      clickable
                      v-close-popup
                      @click="clickEditPeriod(props.row.id)"
                    >
                      <q-item-section style="min-width: 0px" avatar>
                        <q-icon color="edit" size="xs" name="mdi-pencil" />
                      </q-item-section>
                      <q-item-section>แก้ไขข้อมูล</q-item-section>
                    </q-item>

                    <q-item
                      v-if="checkPermission($route)?.attrIsDelete"
                      clickable
                      v-close-popup
                      @click="clickDelete(props.row.id)"
                    >
                      <q-item-section style="min-width: 0px" avatar>
                        <q-icon color="red" size="xs" name="mdi-delete" />
                      </q-item-section>
                      <q-item-section>ลบข้อมูล</q-item-section>
                    </q-item>
                    <q-item
                      v-if="checkPermission($route)?.attrIsGet"
                      clickable
                      v-close-popup
                      @click="clickHistory(props.row.id)"
                    >
                      <q-item-section style="min-width: 0px" avatar>
                        <q-icon
                          color="deep-purple"
                          size="xs"
                          name="mdi-history"
                        />
                      </q-item-section>
                      <q-item-section
                        >แสดงประวัติการนำเข้าข้อมูล</q-item-section
                      >
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>
              <div v-else-if="col.name == 'name'" class="table_ellipsis2">
                {{ col.value }}
              </div>
              <div v-else-if="col.name == 'year'" class="table_ellipsis2">
                {{ col.value + 543 }}
              </div>
              <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
                <q-btn
                  flat
                  dense
                  size="12px"
                  color="green"
                  round
                  @click.stop.prevent="clickUpload(props.row.id)"
                  v-if="
                    (col.value == null || col.value == '0') &&
                    checkPermission($route)?.attrIsUpdate
                  "
                >
                  <q-icon name="mdi-file-excel-outline" size="20px" />
                  <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
                </q-btn>
                <div v-else>
                  {{ col.value }}

                  <q-btn
                    v-if="checkPermission($route)?.attrIsUpdate"
                    dense
                    size="12px"
                    flat
                    round
                    color="green"
                    @click.stop.prevent="clickUpload(props.row.id)"
                    icon="mdi-file-excel-outline"
                  >
                    <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip>
                  </q-btn>

                  <q-btn
                    v-if="checkPermission($route)?.attrIsGet"
                    dense
                    size="12px"
                    flat
                    round
                    color="indigo"
                    @click.stop.prevent="clickCandidateList(props.row.id)"
                    icon="mdi-clipboard-arrow-down"
                  >
                    <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
                  </q-btn>
                </div>
              </div>
              <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
                <q-btn
                  :disable="props.row.examCount == 0"
                  flat
                  dense
                  size="12px"
                  round
                  color="green"
                  @click.stop.prevent="clickEdit(props.row.id)"
                  v-if="
                    col.value == null && checkPermission($route)?.attrIsUpdate
                  "
                >
                  <q-icon name="mdi-file-excel-outline" size="20px" />
                  <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
                  <q-tooltip
                    >นำเข้าไฟล์บัญชีรวมคะแนนทั้งหมด
                    (เรียงตามเลขประจำตัวสอบ)</q-tooltip
                  >
                </q-btn>
                <div v-else>
                  {{ props.row.score.scoreCount }}
                  <q-btn
                    :disable="props.row.examCount == 0"
                    flat
                    dense
                    size="12px"
                    round
                    color="green"
                    @click.stop.prevent="clickEdit(props.row.id)"
                    v-if="checkPermission($route)?.attrIsUpdate"
                  >
                    <q-icon name="mdi-file-excel-outline" size="20px" />
                    <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
                    <q-tooltip
                      >นำเข้าไฟล์บัญชีรวมคะแนนทั้งหมด (เรียงตามเลขประจำตัวสอบ)
                      อีกครั้ง</q-tooltip
                    >
                  </q-btn>
                </div>
              </div>

              <div v-else-if="col.name == 'result'" class="table_ellipsis2">
                <q-btn
                  :disable="props.row.score == null"
                  flat
                  dense
                  size="12px"
                  color="green"
                  round
                  @click.stop.prevent="clickResult(props.row.id)"
                  v-if="
                    (props.row.score == null || props.row.score.resultCount == 0) &&
                    checkPermission($route)?.attrIsUpdate
                  "
                >
                  <q-icon name="mdi-file-excel-outline" size="20px" />
                  <q-tooltip
                    >นำเข้าไฟล์ผลการสอบแข่งขันฯ (บัญชีรายชื่อ)</q-tooltip
                  >
                </q-btn>
                <div v-else>
                  {{ props.row.score.resultCount }}
                  <q-btn
                    v-if="checkPermission($route)?.attrIsUpdate"
                    dense
                    size="12px"
                    flat
                    round
                    color="green"
                    @click.stop.prevent="clickResult(props.row.id)"
                    icon="mdi-file-excel-outline"
                  >
                    <q-tooltip
                      >นำเข้าไฟล์ผลการสอบแข่งขันฯ (บัญชีรายชื่อ)
                      อีกครั้ง</q-tooltip
                    >
                  </q-btn>

                  <q-btn
                    v-if="checkPermission($route)?.attrIsGet"
                    dense
                    size="12px"
                    flat
                    round
                    color="indigo"
                    @click.stop.prevent="clickPassExam(props.row.id)"
                    icon="mdi-clipboard-arrow-down"
                  >
                    <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
                  </q-btn>
                </div>
              </div>
              <div v-else>
                {{ col.value }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>

  <HistoryTable
    :rows="rowsHistory"
    :columns="columnsHistory"
    :filter="filterHistory"
    :visible-columns="visibleColumnsHistory"
    v-model:modal="modalHistory"
    v-model:inputvisible="visibleColumnsHistory"
    v-model:tittle="tittleHistory"
    v-model:inputfilter="filterHistory"
  >
    <template #columns="props">
      <q-tr :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name == 'isActive'" class="">
            <q-icon
              v-if="col.value == false"
              name="mdi-close"
              color="red"
              class="text-h5"
            />
            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
          </div>
          <div v-else-if="col.name == 'createdAt'" class="">
            {{ textDate(col.value) }}
          </div>

          <div v-else class="">
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
  </HistoryTable>

  <!-- popup Edit window-->
  <q-dialog v-model="modalAdd" persistent>
    <q-card style="width: 600px">
      <q-form ref="myForm">
        <DialogHeader :tittle="textTittle" :close="clickClose" />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                v-model="name"
                label="ชื่อการสอบแข่งขัน"
                dense
                autogrow
                lazy-rules
                autofocus
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                outlined
                v-model="order"
                label="ครั้งที่"
                dense
                autogrow
                lazy-rules
                autofocus
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                outlined
                v-model="year"
                label="ปีงบประมาณ"
                dense
                autogrow
                lazy-rules
                autofocus
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <q-file
                v-model="files"
                dense
                label="เลือกไฟล์รายชื่อผู้สมัครสอบแข่งขัน"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSave"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalCandidate" persistent>
    <q-card style="width: 600px">
      <q-form ref="myFormScore">
        <DialogHeadTemplate
          :title="textTittleCandidate"
          :close="clickCloseCandidate"
          title-type="ข้อมูลผู้สมัครสอบ"
        />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-file
                v-model="files_candidate"
                dense
                label="เลือกไฟล์ผู้สมัครสอบแข่งขัน"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSaveCandidate"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalScore" persistent>
    <q-card style="width: 600px">
      <q-form ref="myFormScore">
        <DialogHeadTemplate
          :title="textTittleScore"
          :close="clickCloseScore"
          title-type="บัญชีรวมคะแนนทั้งหมด (เรียงตามเลขประจำตัวสอบ)"
        />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-file
                v-model="files_score"
                dense
                label="เลือกไฟล์บัญชีรวมคะแนนทั้งหมด (เรียงตามเลขประจำตัวสอบ)"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSaveScore"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalResult" persistent>
    <q-card style="width: 600px">
      <q-form ref="myFormScore">
        <DialogHeadTemplate
          :title="textTittleResult"
          :close="clickCloseResult"
          title-type="ผลการสอบแข่งขันฯ (บัญชีรายชื่อ)"
        />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-file
                v-model="files_result"
                dense
                label="เลือกไฟล์ผลการสอบแข่งขันฯ (บัญชีรายชื่อ)"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSaveResult"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style></style>