ui หน้าสมัครสอบ

src/modules/01_exam/components/ExamDetail.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="q-pa-md">
+    <div class="text-h4 text-center text-primary q-pb-lg">รายละเอียดการสอบ</div>
+    <div>
+      <q-card v-for="exam in examPost" :key="exam.contentItemId" class="q-pa-md">
+        <q-card-section>
+          <div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
+          <div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
+          <div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
+          <div class="text-subtitle2 q-py-sm">
+            เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
+          </div>
+          <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
+          <div v-html="exam.htmlBody.html"></div>
+        </q-card-section>
+
+        <div class="text-subtitle1 text-center text-primary">ประกาศเกี่ยวกับการสอบนี้</div>
+        <div class="row justify-start q-pa-md q-col-gutter-md">
+          <div
+            v-for="file in exam.bag.contentItems"
+            :key="file.contentItemId"
+            class="col-12"
+            :href="`https://localhost:5001${file.file.urls[0]}`"
+          >
+            <p>
+              <a :href="`https://localhost:5001${file.file.urls[0]}`" target="_blank">{{
+                file.displayText
+              }}</a
+              ><br />
+            </p>
+          </div>
+        </div>
+        <template v-slot:body-cell-name="props">
+          <q-td :props="props">
+            <div>
+              <a href="https://quasar.dev/vue-components/table#QTable-API" />
+            </div>
+          </q-td>
+        </template>
+      </q-card>
+    </div>
+    <div class="col-12">
+      <div class="text-h6 q-py-sm">ข้อควรระวัง</div>
+      <div class="text-warning q-pb-md">1. ผู้สมัครสามารถสมัครได้เพียงครั้งเดียว</div>
+      <div class="text-grey-7 q-pb-md">
+        2. ชื่อ และนามสกุล ที่ท่านกรอกลงใน "ใบสมัครออนไลน์"
+        จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
+      </div>
+      <div class="text-grey-7 q-pb-md">
+        3. กรุณาตรวจสอบเลขประจำตัวประชาชนของท่านให้ถูกต้อง
+        เนื่องจากเลขประจำตัวประชาชนของท่านจะใช้อ้างอิงตลอดการสอบ
+      </div>
+      <div class="text-grey-7 q-pb-md">
+        4. ชื่อ และนามสกุล ที่ท่านกรอกลงใน "ใบสมัครออนไลน์"
+        จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+</script>
+
+<style scoped></style>

src/modules/01_exam/components/ExamFinished.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <h5 class="text-center">คุณ xxxxxxx xxxxxx ได้สมัครสอบสำเร็จ</h5>
+    <!-- <div class="q-pa-md row items-center justify-center">
+			<q-card class="my-card" style="max-width: 480px; width: 100%" bordered>
+				<q-card-section horizontal>
+					<q-card-section class="q-pt-xs">
+						<div class="text-overline">บัตรประจำตัวผู้สอบ</div>
+						<div class="text-h5 q-mt-sm q-mb-xs">{{ candidateFullName }}</div>
+						<div class="text-caption text-grey">เลขประจำตัวประชาชน : 1100700954521</div>
+						<div class="text-caption text-primary">เลขประจำตัวสอบ : CDE-004</div>
+						<div class="text-caption text-primary">เวลาสอบ : 09:00-12:00</div>
+						<div class="text-caption text-primary">สถานที่สอบ : ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี</div>
+						<div class="text-caption text-primary">ชั้นที่ : 4</div>
+						<div class="text-caption text-primary">ห้องสอบ : CB-706</div>
+						<div class="text-caption text-primary">เลขที่นั่ง : 75</div>
+					</q-card-section>
+
+					<q-card-section class="col-5 flex flex-center">
+						<q-img
+							class="rounded-borders"
+							src="http://127.0.0.1:9000/cms/1f1f05e3-486f-4962-b0ae-ba339259985a/ddecef48-e34f-4bbb-9cc5-76aceed35f7c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0GMO876WU2KH5SYI628W%2F20221007%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20221007T054741Z&X-Amz-Expires=604800&X-Amz-Security-Token=eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhY2Nlc3NLZXkiOiIwR01PODc2V1UyS0g1U1lJNjI4VyIsImV4cCI6MTY2NTEyNTE0NSwicGFyZW50IjoiYWRtaW4ifQ.69e471rbvo-v6p97iZumbdBQ3DHYC_5zs06MOIgLb9yJpv6n_n-8I_wS6U8U9rsEArccdVK7-1yAEwNYMwsmWA&X-Amz-SignedHeaders=host&versionId=null&X-Amz-Signature=602c8d1d2b4d387c3ba68ab448815355bde83b1172150e6478c47b4e44547f2e"
+							:ratio="1"
+							style="max-width: 100px; max-height: 100px"
+						/>
+					</q-card-section>
+				</q-card-section>
+
+				<q-separator />
+
+				<q-card-actions class="row justify-end">
+					<q-btn flat color="white" class="bg-primary"> พิมพ์บัตรประจำตัวผู้สอบ </q-btn>
+				</q-card-actions>
+			</q-card>
+		</div> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+</script>
+
+<style lang="scss" scoped></style>

src/modules/01_exam/components/ExamPayment.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h5 class="text-center">ชำระค่าธรรมเนียมการสอบ</h5>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+</script>
+
+<style lang="scss" scoped></style>

src/modules/01_exam/interface/index/Main.ts

@@ -0,0 +1,10 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { Pagination, DataOption };

src/modules/01_exam/interface/request/Certificate.ts

@@ -0,0 +1,29 @@
+interface DataProps {
+    row: RequestItemsObject;
+    rowIndex: number;
+  }
+  
+  //ข้อมูล
+  interface RequestItemsObject {
+    id: string;
+    name: string;
+    certiNumber: string;
+    start: Date;
+    end: Date;
+  }
+  
+  //columns
+  interface Columns {
+    [index: number]: {
+      name: String;
+      align: String;
+      label: String;
+      sortable: Boolean;
+      field: String;
+      headerStyle: String;
+      style: String;
+    };
+  }
+  
+  export type { RequestItemsObject, Columns, DataProps };
+  

src/modules/01_exam/interface/request/Coin.ts

@@ -0,0 +1,27 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  receiveDate: Date;
+  detail: string;
+  agency: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Discipline.ts

@@ -0,0 +1,29 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Document.ts

@@ -0,0 +1,19 @@
+//ข้อมูล
+interface RequestItemsObject {
+  name: String;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };

src/modules/01_exam/interface/request/Education.ts

@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  level: string;
+  levelId: string;
+  name: string;
+  start: number;
+  end: number;
+  education: string;
+  major: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Insignia.ts

@@ -0,0 +1,36 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  year: number;
+  receiveDate: Date;
+  insigniaType: string;
+  insigniaTypeId: string;
+  insignia: string;
+  insigniaId: string;
+  no: string;
+  gazetteNo: string;
+  volume: string;
+  book: string;
+  section: string;
+  page: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Leave.ts

@@ -0,0 +1,38 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  year: number;
+  holiday: string;
+  sick: string;
+  government: string;
+  late: string;
+  other: string;
+  business: string;
+  maternity: string;
+  helpMaternity: string;
+  ordination: string;
+  study: string;
+  international: string;
+  spouse: string;
+  rehabilitation: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Main.ts

@@ -0,0 +1,30 @@
+//ข้อมูล
+interface RequestItemsObject {
+  id: number;
+  fullname: String;
+  avatar: String;
+  citizenId: String;
+  position: String;
+  line: String;
+  linePosition: String;
+  level: String;
+  positionFormalManage: String;
+  positionManage: String;
+  numberPosition: String;
+  government: String;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };

src/modules/01_exam/interface/request/Other.ts

@@ -0,0 +1,25 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  detail: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Record.ts

@@ -0,0 +1,27 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  detail: string;
+  reference: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Salary.ts

@@ -0,0 +1,33 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  position: string;
+  positionId: string;
+  posNo: string;
+  posNoId: string;
+  level: string;
+  levelId: string;
+  salary: string;
+  reference: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Talent.ts

@@ -0,0 +1,27 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  side: string;
+  detail: string;
+  note: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Train.ts

@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  course: string;
+  start: Date;
+  end: Date;
+  location: string;
+  detail: string;
+  organize: string;
+  gen: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/request/Work.ts

@@ -0,0 +1,28 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  start: Date;
+  end: Date;
+  detail: string;
+  reference: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };

src/modules/01_exam/interface/response/Certificate.ts

@@ -0,0 +1,11 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Coin.ts

@@ -0,0 +1,9 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  receiveDate: Date;
+  detail: string;
+  agency: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Discipline.ts

@@ -0,0 +1,11 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Document.ts

@@ -0,0 +1,6 @@
+//ข้อมูล
+interface ResponseObject {
+  name: String;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Education.ts

@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  level: string;
+  levelId: string;
+  name: string;
+  start: number;
+  end: number;
+  education: string;
+  major: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Insignia.ts

@@ -0,0 +1,18 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  year: number;
+  receiveDate: Date;
+  insigniaType: string;
+  insigniaTypeId: string;
+  insignia: string;
+  insigniaId: string;
+  no: string;
+  gazetteNo: string;
+  volume: string;
+  book: string;
+  section: string;
+  page: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Leave.ts

@@ -0,0 +1,20 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  year: number;
+  holiday: string;
+  sick: string;
+  government: string;
+  late: string;
+  other: string;
+  business: string;
+  maternity: string;
+  helpMaternity: string;
+  ordination: string;
+  study: string;
+  international: string;
+  spouse: string;
+  rehabilitation: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Main.ts

@@ -0,0 +1,17 @@
+//ข้อมูล
+interface ResponseObject {
+  id: number;
+  fullname: String;
+  avatar: String;
+  citizenId: String;
+  position: String;
+  line: String;
+  linePosition: String;
+  level: String;
+  positionFormalManage: String;
+  positionManage: String;
+  numberPosition: String;
+  government: String;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Other.ts

@@ -0,0 +1,7 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  detail: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Record.ts

@@ -0,0 +1,9 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  detail: string;
+  reference: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Salary.ts

@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  position: string;
+  positionId: string;
+  posNo: string;
+  posNoId: string;
+  level: string;
+  levelId: string;
+  salary: string;
+  reference: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Talent.ts

@@ -0,0 +1,9 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  side: string;
+  detail: string;
+  note: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Train.ts

@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  course: string;
+  start: Date;
+  end: Date;
+  location: string;
+  detail: string;
+  organize: string;
+  gen: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/interface/response/Work.ts

@@ -0,0 +1,10 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  start: Date;
+  end: Date;
+  detail: string;
+  reference: string;
+}
+
+export type { ResponseObject };

src/modules/01_exam/router.ts

@@ -0,0 +1,23 @@
+const Main = () => import('@/modules/01_exam/views/ExamMain.vue')
+const Detail = () => import('@/modules/01_exam/views/ExamDetail.vue')
+
+export default [
+  {
+    path: '/exam',
+    name: 'exam',
+    component: Main,
+    meta: {
+      Auth: true
+      //   Key: [7]
+    }
+  },
+  {
+    path: '/exam/:id',
+    name: 'examDetail',
+    component: Detail,
+    meta: {
+      Auth: true,
+      Key: [7]
+    }
+  }
+]

src/modules/01_exam/store.ts

@@ -0,0 +1,26 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useExamDataStore = defineStore('exam', () => {
+  interface exam {
+    main: { columns: String[] }
+  }
+
+  const examData = ref<exam>({
+    main: { columns: [] }
+  })
+
+  const changeExamColumns = (system: String, val: String[]) => {
+    if (system == 'main') examData.value.main.columns = val
+    localStorage.setItem('exam', JSON.stringify(examData.value))
+  }
+
+  if (localStorage.getItem('exam') !== null) {
+    examData.value = JSON.parse(localStorage.getItem('exam') || '{}')
+  }
+
+  return {
+    examData,
+    changeExamColumns
+  }
+})

src/modules/01_exam/views/ExamDetail.vue

@@ -0,0 +1,87 @@
+<!-- page:detail page รายการสอบทั้งหมด -->
+<template>
+  <q-toolbar class="q-py-sm q-px-md bg-grey-2">
+    <q-btn icon="chevron_left" color="grey" flat dense>
+      <q-tooltip>กลับ</q-tooltip>
+    </q-btn>
+    <q-toolbar-title class="toptitle text-dark col-12 row items-center">สมัครสอบ</q-toolbar-title>
+  </q-toolbar>
+  <q-card flat class="">
+    <div class="justify-center">
+      <q-stepper
+        v-model="step"
+        ref="stepper"
+        alternative-labels
+        header-nav
+        color="primary"
+        animated
+      >
+        <q-step :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
+          <ExamDetail />
+        </q-step>
+        <q-step :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
+          <ExamForm />
+        </q-step>
+        <q-step :name="3" title="ชำระค่าธรรมเนียมการสอบ" icon="edit" done-color="positive">
+          <ExamPayment />
+        </q-step>
+        <q-step :name="4" title="สำเร็จ" icon="edit" done-color="positive">
+          <ExamFinished />
+        </q-step>
+      </q-stepper>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
+import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
+import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
+import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
+
+const examId = ref<string>('zxc')
+const step = ref<number>(1)
+const stepRaw = ref<number>(1)
+const examPost = ref<any>()
+const test = ref<any>()
+const loading = ref<boolean>(false)
+
+onMounted(() => {
+  loadCandidate()
+  fetchExams()
+})
+
+const loadCandidate = () => {
+  //   this.loader = true
+  //   this.$http
+  //     .get(this.$config.API.getCandidateCurrentStep(this.examId, this.$keycloak.tokenParsed.sub))
+  //     .then((res) => {
+  //       this.step = res.data.items
+  //       this.stepRaw = res.data.items
+  //     })
+  //     .catch((e) => {
+  //       this.step = 1
+  //     })
+  //     .finally(() => {
+  //       this.loader = false
+  //     })
+}
+
+const fetchExams = () => {
+  //   const headers = { 'Content-Type': 'application/graphql' }
+  //   this.loading = true
+  //   this.$http
+  //     .post(
+  //       this.$config.API.getOrchardPath(),
+  //       this.$config.API.getExamPostsForExamDetailQuery(this.$route.params.examId),
+  //       { headers }
+  //     )
+  //     .then((response) => {
+  //       this.examPost = response.data.data.examPost[0]
+  //       this.test = this.examPost.bag.contentItems
+  //     })
+  //     .catch((err) => console.log(err))
+  //     .finally(() => (this.loading = false))
+}
+</script>

src/modules/01_exam/views/ExamMain.vue

@@ -0,0 +1,231 @@
+<!-- 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>
+
+  <q-card flat class="">
+    <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>
+  </q-card>
+</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 } from '@/modules/01_exam/interface/index/Main'
+
+const router = useRouter()
+const store = useExamDataStore()
+const { examData, changeExamColumns } = store
+const filter = ref<string>('') //search data table
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0
+})
+
+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>

src/modules/01_meta/router.ts

@@ -1,13 +0,0 @@
-const Meta = () => import('@/modules/01_meta/views/Meta01View.vue')
-
-export default [
-  {
-    path: '/meta01',
-    name: 'meta01',
-    component: Meta,
-    meta: {
-      Auth: true
-      //   Key: [7]
-    }
-  }
-]

src/modules/01_meta/views/Meta01View.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about META01</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>