hrms-recruit/src/modules/01_exam/views/ExamMain.vue

<!-- page:main page รายการสอบทั้งหมด -->
<template>
  <q-toolbar class="q-py-sm q-px-md bg-grey-2">
    <q-toolbar-title class="toptitle text-dark col-12 row items-center"
      >รายการสอบทั้งหมด</q-toolbar-title
    >
  </q-toolbar>

  <div class="q-pa-md q-gutter-md">
    <CardExam v-for="row in ExamData" :key="row.id" :items="row" @click="next(row.id)" />
    <!-- <data-table
      style="height: 80vh"
      :rows="rows"
      :columns="columns"
      :filter="filter"
      :visible-columns="visibleColumns"
      v-model:inputfilter="filter"
      v-model:inputvisible="visibleColumns"
      :pagination="initialPagination"
      :nornmalData="true"
      :paging="true"
    >
      <template #columns="props">
        <q-tr :props="props" @click="next(props.row.id)" class="cursor-pointer">
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <div v-if="col.name == 'no'" class="table_ellipsis">
              {{ props.rowIndex + 1 }}
            </div>
            <div v-else-if="col.name == 'fullname'">
              <div class="row col-12 items-center">
                <img
                  :src="props.row.avatar"
                  class="q-mr-sm col-4"
                  style="width: 28px; height: 28px; border-radius: 50%"
                />
                <div class="col-4">
                  <div class="text-weight-medium">
                    {{ props.row.fullname }}
                  </div>
                  <div class="text-weight-light">
                    {{ props.row.citizenId }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="table_ellipsis">
              {{ col.value }}
            </div>
          </q-td>
        </q-tr>
      </template>
    </data-table> -->
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useExamDataStore } from '@/modules/01_exam/store'
import type { RequestItemsObject, Columns } from '@/modules/01_exam/interface/request/Main'
import type { ResponseObject } from '@/modules/01_exam/interface/response/Main'
import type { Pagination, ExamCard } from '@/modules/01_exam/interface/index/Main'
import { defaultCard } from '@/modules/01_exam/interface/index/Main'
import CardExam from '../components/ExamCrad.vue'

const router = useRouter()
const store = useExamDataStore()
const { examData, changeExamColumns } = store
const filter = ref<string>('') //search data table
const initialPagination = ref<Pagination>({
  rowsPerPage: 0
})

const ExamData = ref<ExamCard[]>(defaultCard)
const visibleColumns = ref<String[]>([])
examData.main.columns.length == 0
  ? (visibleColumns.value = [
      'no',
      'fullname',
      'position',
      'line',
      'linePosition',
      'level',
      'positionFormalManage',
      'positionManage',
      'numberPosition',
      'government'
    ])
  : (visibleColumns.value = examData.main.columns)
const columns = ref<Columns>([
  {
    name: 'no',
    align: 'left',
    label: 'ลำดับ',
    sortable: true,
    field: 'no',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'fullname',
    align: 'left',
    label: 'ชื่อ-สกุล',
    sortable: true,
    field: 'fullname',
    headerStyle: 'font-size: 14px; min-width: 200px',
    style: 'font-size: 14px; '
  },
  {
    name: 'position',
    align: 'left',
    label: 'ตำแหน่ง',
    sortable: true,
    field: 'position',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'line',
    align: 'left',
    label: 'สายงาน',
    sortable: true,
    field: 'line',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'linePosition',
    align: 'left',
    label: 'ตำแหน่งในสายงาน',
    sortable: true,
    field: 'linePosition',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'level',
    align: 'left',
    label: 'ระดับ',
    sortable: true,
    field: 'level',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'positionFormalManage',
    align: 'left',
    label: 'ตำแหน่งทางการบริหาร',
    sortable: true,
    field: 'positionFormalManage',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'positionManage',
    align: 'left',
    label: 'ตำแหน่งการบริหาร',
    sortable: true,
    field: 'positionManage',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'numberPosition',
    align: 'left',
    label: 'เลขที่ตำแหน่ง',
    sortable: true,
    field: 'numberPosition',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
  {
    name: 'government',
    align: 'left',
    label: 'หน่วยงาน/ส่วนราชการ',
    sortable: true,
    field: 'government',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  }
])
const rows = ref<RequestItemsObject[]>([
  {
    id: 1,
    fullname: 'นางสาวณัฐกา ชมสิน',
    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
    citizenId: '4016500103241',
    position: 'นักจัดการงานทั่วไป',
    line: 'จัดการทั่วไป',
    linePosition: 'ทั่วไป ',
    level: 'ต้น',
    positionFormalManage: 'นักจัดการทั่วไป',
    positionManage: 'นักจัดการทั่วไป',
    numberPosition: 'กทข.1',
    government: 'กองบริหารทั่วไป'
  },
  {
    id: 2,
    fullname: 'นางสาวรัชภรณ์ ภักดี',
    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
    citizenId: '4016500092355',
    position: 'นักจัดการงานทั่วไป',
    line: 'จัดการทั่วไป',
    linePosition: 'ทั่วไป ',
    level: 'ต้น',
    positionFormalManage: 'นักจัดการทั่วไป',
    positionManage: 'นักจัดการทั่วไป',
    numberPosition: 'กทข.1',
    government: 'กองบริหารทั่วไป'
  },
  {
    id: 3,
    fullname: 'นางสาวภาพรรณ ลออ',
    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
    citizenId: '4016500086436',
    position: 'นักจัดการงานทั่วไป',
    line: 'จัดการทั่วไป',
    linePosition: 'ทั่วไป ',
    level: 'ต้น',
    positionFormalManage: 'นักจัดการทั่วไป',
    positionManage: 'นักจัดการทั่วไป',
    numberPosition: 'กทข.1',
    government: 'กองบริหารทั่วไป'
  }
])

watch(visibleColumns, async (count: String[], prevCount: String[]) => {
  await changeExamColumns('main', count)
})

const next = (id: string) => {
  router.push(`/exam/${id}`)
}
</script>

<style></style>