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

<!-- page:main page สรรหา -->
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";

import Table from "@/modules/03_recruiting/components/Table.vue";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";

const mixin = useCounterMixin();
const { onSearchDataTable } = mixin;
const $q = useQuasar(); // show dialog
const router = useRouter();
const file = ref<boolean>(true);
const filter = ref<string>(""); //search data table
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
  sortBy: "year",
});
const visibleColumns = ref<String[]>([
  "no",
  "year",
  "name",
  "startDate",
  "endDate",
  "file",
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "year",
    align: "left",
    label: "ปีงบประมาณ",
    sortable: true,
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    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: "doc",
    align: "left",
    label: "เอกสารประกอบ",
    sortable: true,
    field: "doc",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "startDate",
    align: "left",
    label: "วันที่เริ่มต้น",
    sortable: true,
    field: "startDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "endDate",
    align: "left",
    label: "วันที่สิ้นสุด",
    sortable: true,
    field: "endDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "file",
    align: "left",
    label: "เอกสารข้อมูลผู้สอบ",
    sortable: true,
    field: "file",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/**
 * เปิด dialog digital
 * @param id
 */
const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]);

function clickEdit(id: string) {
  router.push(`/compete/import/${id}`);
}

function remove() {
  $q.dialog({
    title: "ยืนยันการลบเอกสารข้อมูล",
    message: "ต้องการลบเอกสารนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(() => {
      file.value = false;
    })
    .onCancel(() => {
      file.value = true;
    })
    .onDismiss(() => {});
}

function onSearch() {
  rows.value = onSearchDataTable(
    filter.value,
    rowsData.value,
    columns.value ? columns.value : []
  );
}
</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
        :rows="rows"
        :columns="columns"
        v-model:filter="filter"
        :onSearch="onSearch"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        v-model:pagination="initialPagination"
        :nornmalData="false"
      >
        <template #columns="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'" @click="clickEdit(props.row.year)">
                {{ props.rowIndex + 1 }}
              </div>
              <div
                v-else-if="col.name == 'name'"
                class="table_ellipsis2"
                @click="clickEdit(props.row.year)"
              >
                {{ col.value }}
              </div>
              <div v-else-if="col.name == 'file'">
                <q-btn
                  size="13px"
                  flat
                  class="bg-blue-1 q-ml-xs"
                  color="blue"
                  v-if="col.value == null || file == false"
                >
                  <q-icon
                    name="mdi-file-excel-outline"
                    size="20px"
                    class="q-mr-sm"
                  />
                  นำเข้าไฟล์
                  <q-tooltip>นำเข้าไฟล์ excel</q-tooltip>
                </q-btn>
                <div v-else>
                  <q-chip
                    removable
                    color="grey-2"
                    text-color="grey-9"
                    :label="col.value"
                    size="14px"
                    square
                    icon-remove="mdi-close"
                    v-model="file"
                    @remove="remove"
                  >
                    <q-tooltip>{{ col.value }}</q-tooltip>
                  </q-chip>
                  <q-btn
                    size="14px"
                    flat
                    dense
                    color="positive"
                    icon="mdi-content-save-settings-outline"
                  >
                    <q-tooltip>บันทึกคะแนนสอบ</q-tooltip>
                  </q-btn>
                </div>
              </div>
              <div v-else @click="clickEdit(props.row.year)">
                {{ col.value }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>
</template>

<style></style>