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

2023-03-15 14:20:18 +07:00 · 2023-03-15 14:20:18 +07:00 · 792f30d606
commit 792f30d606
parent 03b6076835
48 changed files with 2845 additions and 43 deletions
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@ -0,0 +1,481 @@
+<template>
+  <div class="q-px-md q-pb-md">
+    <!-- header บน table มี ค้นหา แสดงคอลัมน์ ปุ่มแก้ไข เพิ่ม เผยแพร่ข้อมูล ยกเลิก (status nornmalData false) -->
+    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+      <q-btn
+        v-if="!editvisible == true && publicNoBtn == false"
+        flat
+        round
+        :disabled="editvisible == true"
+        :color="editvisible == true ? 'grey-7' : 'primary'"
+        @click="edit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- ยกเลิก แสดงเมื่อ กดปุ่มแก้ไข -->
+      <q-btn
+        v-else
+        flat
+        round
+        :disabled="editvisible == false"
+        :outline="editvisible == false"
+        :color="editvisible == false ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <!-- <q-separator vertical /> -->
+      <div class="q-px-sm">
+        <q-btn
+          flat
+          round
+          :disabled="editvisible == false"
+          :color="editvisible == false ? 'grey-7' : 'add'"
+          @click="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+
+        <!-- บันทึกร่าง แสดงเมื่อ กดปุ่มแก้ไข ข้อมูลมีการเป็นแปลงหรือ ยังไม่เผยแพร่ข้อมูล -->
+        <q-btn
+          flat
+          round
+          :disabled="!(editvisible == true && updateData == true)"
+          :color="
+            !(editvisible == true && updateData == true) ? 'grey-7' : 'public'
+          "
+          @click="checkSave"
+          v-if="saveNoDraft == false"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกร่าง</q-tooltip>
+        </q-btn>
+        <!-- ลบบันทึกร่าง แสดงเมื่อ บันทึกร่างแล้ว -->
+        <q-btn
+          flat
+          round
+          :disabled="publicData == true"
+          :color="publicData == true ? 'grey-7' : 'deep-orange'"
+          @click="DeleteModal"
+          icon="mdi-file-remove-outline"
+          v-if="publicNoBtn == false"
+        >
+          <q-tooltip>ลบบันทึกร่าง</q-tooltip>
+        </q-btn>
+      </div>
+
+      <!-- เผยแพร่ -->
+      <q-btn
+        flat
+        round
+        :disabled="!(publicData == false || updateData == true)"
+        :color="
+          !(publicData == false || updateData == true) ? 'grey-7' : 'public'
+        "
+        @click="publishModal"
+        icon="mdi-cloud-upload-outline"
+        v-if="publicNoBtn == false"
+      >
+        <q-tooltip>เผยแพร่</q-tooltip>
+      </q-btn>
+      <div class="items-center" style="display: flex">
+        <div
+          class="row items-center"
+          style="display: flex"
+          v-if="publicData == false && publicNoBtn == false"
+        >
+          <div class="text-public text-body2 text-weight-medium q-px-sm">
+            ข้อมูลยังไม่เผยแพร่
+          </div>
+        </div>
+      </div>
+
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ข้อความสถานะเผยแพร่ โดยใช้ parameter publicData เป็นตัวกำหนดข้อความ -->
+        <!-- <div class="row items-center" style="display: flex" v-if="publicData == true">
+						<q-icon cener size="20px" name="label_important" class="icon-color" />
+						<div class="text-size">ข้อมูลเผยแพร่แล้ว</div>
+						</div> -->
+        <div
+          class="row items-center"
+          style="display: flex"
+          v-if="publicData == false && publicNoBtn == false"
+        >
+          <!-- <q-icon cener size="20px" name="label_important" color="amber" />
+          <div class="text-grey-7 text-body2 text-weight-medium q-px-sm">
+            ข้อมูลยังไม่เผยแพร่
+          </div> -->
+        </div>
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+        <!-- แสดงคอลัมน์ใน table -->
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
+      </div>
+    </div>
+    <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
+    <div class="col-12 row q-py-sm" v-if="nornmalData == true">
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+        <!-- แสดงคอลัมน์ใน table -->
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
+      </div>
+    </div>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      :pagination="initialPagination"
+      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+    >
+      <!-- :pagination="initialPagination" -->
+      <!-- :rows-per-page-options="[0]" -->
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width v-if="boss == true" />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th
+            auto-width
+            v-if="
+              editvisible == true || nextPageVisible == true || history == true
+            "
+          />
+        </q-tr>
+      </template>
+      <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+    </q-table>
+  </div>
+  <!-- ข้อมูลการเผยแพร่ข้อมูล -->
+  <q-dialog v-model="modalPublish" persistent>
+    <q-card class="q-pa-sm">
+      <q-card-section class="row">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="public"
+            size="lg"
+            font-size="25px"
+            color="blue-1"
+            text-color="public"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
+          <br />
+          <span>ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
+        <q-btn
+          label="เผยแพร่"
+          color="public"
+          @click="publish()"
+          v-close-popup
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- ข้อมูลการลบเผยแพร่ข้อมูล -->
+  <q-dialog v-model="modalDelete" persistent>
+    <q-card class="q-pa-sm">
+      <q-card-section class="row">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-file-remove-outline"
+            size="lg"
+            font-size="25px"
+            color="red-1"
+            text-color="deep-orange"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?</span>
+          <br />
+          <span>ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
+        <q-btn label="ลบบันทึก" color="red" @click="deleted()" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const modalPublish = ref<boolean>(false);
+const modalDelete = ref<boolean>(false);
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  boss: {
+    type: Boolean,
+    defualt: false,
+  },
+  saveNoDraft: {
+    type: Boolean,
+    defualt: false,
+  },
+  history: {
+    type: Boolean,
+    defualt: false,
+  },
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  publish: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const initialPagination = ref<any>({
+  //   descending: false,
+  rowsPerPage: props.paging == true ? 25 : 0,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const updateEdit = (value: any) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: any) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: any) => {
+  emit("update:inputvisible", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+const checkSave = () => {
+  props.validate();
+  props.save();
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+};
+
+const publishModal = () => {
+  props.validate();
+  const filter = attrs.value.rows.filter((r: any) => r.name == "");
+
+  if (filter.length == 0 || attrs.value.rows.length == 0) {
+    modalPublish.value = true;
+  }
+};
+
+const DeleteModal = () => {
+  modalDelete.value = true;
+};
+
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+
+const add = async () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate();
+  //   }
+  props.validate();
+  props.add();
+  await table.value.lastPage();
+  await table.value.scrollTo(attrs.value.rows.length - 1);
+};
+
+const deleted = async () => {
+  if (props.publicNoBtn === false) {
+    updateEdit(false);
+  }
+  props.deleted();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  max-height: 64vh;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f6f6f6ae;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
--- a/src/interface/main/index.ts
+++ b/src/interface/main/index.ts
@ -33,15 +33,8 @@ const menuList = readonly<menuType[]>([
    key: 2,
    icon: 'o_person',
    activeIcon: 'person',
-    label: 'ข้อมูลหลัก01',
-    path: 'meta01'
-  },
-  {
-    key: 3,
-    icon: 'o_person',
-    activeIcon: 'person',
-    label: 'ข้อมูลหลัก02',
-    path: 'meta02'
+    label: 'รายการสอบทั้งหมด',
+    path: 'exam'
  }
 ])

@ -70,7 +63,7 @@ const notiList = readonly<notiType[]>([
  {
    id: 1,
    sender: 'ท',
-    body: 'ขอแก้ไขข้อมูลทะเบียนประวัติ',
+    body: 'ขอแก้ไขข้อมูลรายการสอบทั้งหมด',
    timereceive: '13/12/2565'
  }
 ])
--- a/src/main.ts
+++ b/src/main.ts
@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, defineAsyncComponent } from 'vue'
 import { createPinia } from 'pinia'
 import { Dialog, Notify, Quasar } from 'quasar'

@ -34,4 +34,9 @@ app.use(
  quasarUserOptions
 )

+app.component(
+  'data-table',
+  defineAsyncComponent(() => import('./components/TableView.vue'))
+)
+
 app.mount('#app')
--- a/src/modules/01_exam/components/ExamDetail.vue
+++ b/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>
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/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>
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/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>
--- a/src/modules/01_exam/interface/index/Main.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Certificate.ts
+++ b/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 };
+  
--- a/src/modules/01_exam/interface/request/Coin.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Discipline.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Document.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Education.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Insignia.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Leave.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Main.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Other.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Record.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Salary.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Talent.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Train.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/request/Work.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Certificate.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Coin.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Discipline.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Document.ts
+++ b/src/modules/01_exam/interface/response/Document.ts
@ -0,0 +1,6 @@
+//ข้อมูล
+interface ResponseObject {
+  name: String;
+}
+
+export type { ResponseObject };
--- a/src/modules/01_exam/interface/response/Education.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Insignia.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Leave.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Main.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Other.ts
+++ b/src/modules/01_exam/interface/response/Other.ts
@ -0,0 +1,7 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  detail: string;
+}
+
+export type { ResponseObject };
--- a/src/modules/01_exam/interface/response/Record.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Salary.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Talent.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Train.ts
+++ b/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 };
--- a/src/modules/01_exam/interface/response/Work.ts
+++ b/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 };
--- a/src/modules/01_exam/router.ts
+++ b/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]
+    }
+  }
+]
--- a/src/modules/01_exam/store.ts
+++ b/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
+  }
+})
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/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>
--- a/src/modules/01_exam/views/ExamMain.vue
+++ b/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>
--- a/src/modules/01_meta/interface/index/main.ts
+++ b/src/modules/01_meta/interface/index/main.ts
--- a/src/modules/01_meta/interface/request/index.ts
+++ b/src/modules/01_meta/interface/request/index.ts
--- a/src/modules/01_meta/interface/response/index.ts
+++ b/src/modules/01_meta/interface/response/index.ts
--- a/src/modules/01_meta/router.ts
+++ b/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]
-    }
-  }
-]
--- a/src/modules/01_meta/store.ts
+++ b/src/modules/01_meta/store.ts
--- a/src/modules/01_meta/views/Meta01View.vue
+++ b/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>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import Meta01 from '@/modules/01_meta/router'
+import Exam from '@/modules/01_exam/router'
 import Meta02 from '@/modules/02_meta/router'

 const MainLayout = () => import('@/views/MainLayout.vue')
@ -22,7 +22,7 @@ const router = createRouter({
            Key: [7]
          }
        },
-        ...Meta01,
+        ...Exam,
        ...Meta02
      ]
    }
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@ -63,7 +63,7 @@ const doLogout = () => {
 <template>
  <!-- แบบเก่า design แรก -->
  <!-- <q-layout view="lHh Lpr lff"> -->
-  <!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
+  <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
  <q-layout view="lHh LpR lff" @scroll="onScroll">
    <!-- header -->
    <q-header flat class="bg-grey-2 text-dark" height-hint="7">
@ -365,7 +365,6 @@ const doLogout = () => {
 .toptitle {
  font-size: 1.2rem;
  font-weight: bold;
-  margin-bottom: 1%;
 }

 .q-field--outlined .q-field__control {