ui ประวัติทำงาน ประวัติการศึกษา

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

@@ -0,0 +1,233 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <!-- <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่"
+      icon="mdi-map-marker"
+      :save="saveData"
+    /> -->
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่ปัจจุบัน"
+      icon="mdi-map-marker"
+      :save="saveData"
+      :history="true"
+    />
+    <q-form ref="myform">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.address"
+            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่'}`]"
+            :label="`${'ที่อยู่'}`"
+          />
+          <!-- :filled="edit" -->
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="provinceOptions"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value) => selectProvince(value)"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="districtOptions"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value) => selectDistrict(value)"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="subdistrictOptions"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value) => selectSubDistrict(value)"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="codep"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+import http from '@/plugins/http'
+import config from '@/app.config'
+import type { Address, DataOption, zipCodeOption } from '@/modules/01_exam/interface/index/Main'
+import { defaultAddress } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
+
+const edit = ref<boolean>(false)
+const addressData = ref<Address>(defaultAddress)
+const myform = ref<any>()
+const codep = ref<string>('')
+
+const provinceOptions = ref<DataOption[]>([])
+const districtOptions = ref<DataOption[]>([])
+const subdistrictOptions = ref<zipCodeOption[]>([])
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+
+onMounted(() => {
+  //   fetchProvince()
+  //   fetchDistrict(addressData.value.provinceId)
+})
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+    } else {
+    }
+  })
+}
+
+const selectProvince = (e: string) => {
+  addressData.value.districtId = ''
+  addressData.value.subdistrictId = ''
+  codep.value = ''
+
+  myform.value.resetValidation()
+  fetchDistrict(e)
+}
+
+const selectDistrict = (e: string) => {
+  addressData.value.subdistrictId = ''
+  codep.value = ''
+
+  myform.value.resetValidation()
+  fetchSubDistrict(e)
+}
+
+const selectSubDistrict = (e: string) => {
+  const findcode = subdistrictOptions.value.filter((r) => r.id == e)
+  const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
+  codep.value = namecode
+}
+
+const fetchProvince = async () => {
+  //   loader.value = true;
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      //   console.log(data);
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      provinceOptions.value = option
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   loader.value = false;
+    })
+}
+
+const fetchDistrict = async (id: string) => {
+  //   loader.value = true;
+  await http
+    .get(config.API.listDistrict(id))
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      //   console.log(data);
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      districtOptions.value = option
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   loader.value = false;
+    })
+}
+
+const fetchSubDistrict = async (id: string) => {
+  //   loader.value = true;
+  await http
+    .get(config.API.listSubDistrict(id))
+    .then((res) => {
+      const data = res.data.result
+      let option: zipCodeOption[] = []
+      //   console.log(res);
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+          zipCode: r.zipCode.toString()
+        })
+      })
+      subdistrictOptions.value = option
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   loader.value = false;
+    })
+}
+</script>

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

@@ -1,4 +1,576 @@
+<!-- card ประวัติการทำงาน/ฝึกงาน -->
 <template>
-  <div></div>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :nameHeader="false"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'salary'" class="">
+                {{ col.value.toLocaleString('en-US') }}
+              </div>
+              <div v-else-if="col.name == 'duration'" class="">
+                {{ dateThaiRange(col.value) }}
+              </div>
+              <div v-else class="">
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ประวัติการทำงาน/ฝึกงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="location"
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานที่ทำงาน/ฝึกงาน'}`]"
+                :label="`${'สถานที่ทำงาน/ฝึกงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="position"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
+                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนสุดท้ายก่อนออก'}`]"
+                :label="`${'เงินเดือนสุดท้ายก่อนออก'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                :readonly="!edit"
+                v-model="duration"
+                :locale="'th'"
+                autoApply
+                range
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    class="datepicker"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateThaiRange(duration)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                :rules="[(val) => !!val || `${'กรุณากรอกเหตุผลที่ออก'}`]"
+                :label="`${'เหตุผลที่ออก'}`"
+                @update:modelValue="clickEditRow"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <notifyError
+    :modalError="modalError"
+    :modalErrorTittle="modalErrorTittle"
+    :modalErrorDetail="modalErrorDetail"
+    :close="closeModalError"
+  ></notifyError>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
+import ProfileTable from '@/components/Table.vue'
+import DialogHeader from '@/components/DialogHeader.vue'
+import DialogFooter from '@/components/DialogFooter.vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps
+} from '@/modules/01_exam/interface/request/Career'
+import type { ResponseObject } from '@/modules/01_exam/interface/response/Career'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+const props = defineProps({
+  loader: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true
+  }
+})
+
+const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { dateThaiRange } = mixin
+const store = useExamDataStore()
+const { examData, changeExamColumns } = store
+const loader = ref<boolean>(false)
+const id = ref<string>()
+const location = ref<string>()
+const position = ref<string>()
+const salary = ref<number | null>()
+const duration = ref<[Date, Date]>([new Date(), new Date()])
+const reason = ref<string>()
+const myForm = ref<any>() //form data input
+const edit = ref<boolean>(false) //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false) //modal add detail
+const modalEdit = ref<boolean>(false) //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>() //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
+const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
+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 checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
+const closeModalError = () => {
+  modalError.value = false
+  if (statusCode.value != 404) {
+    // fetchData();
+  }
+}
+
+const emit = defineEmits(['update:loader'])
+
+const rows = ref<RequestItemsObject[]>([
+  {
+    id: '1',
+    location: 'แอดวานซ์ อินโฟร์ เซอร์วิส',
+    position: 'Direct Sales Staff',
+    salary: 30000,
+    duration: [new Date('1995-04-15'), new Date('1999-02-25')],
+    reason: 'ไล่ออก'
+  },
+  {
+    id: '2',
+    location: 'บริษัท ทรู คอร์ปอเรชั่น จำกัด (มหาชน)',
+    position: 'Direct Sales Staff',
+    salary: 40000,
+    duration: [new Date('2020-06-30'), new Date('2023-10-14')],
+    reason: '-'
+  }
+])
+
+const filter = ref<string>('') //search data table
+
+const visibleColumns = ref<String[]>([])
+
+examData.career.columns.length == 0
+  ? (visibleColumns.value = ['location', 'position', 'salary', 'duration', 'reason'])
+  : (visibleColumns.value = examData.career.columns)
+
+const columns = ref<Columns>([
+  {
+    name: 'location',
+    align: 'left',
+    label: 'สถานที่ทำงาน/ฝึกงาน',
+    sortable: true,
+    field: 'location',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'position',
+    align: 'left',
+    label: 'ตำแหน่ง/ลักษณะงาน',
+    sortable: true,
+    field: 'position',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'salary',
+    align: 'left',
+    label: 'เงินเดือนสุดท้ายก่อนออก',
+    sortable: true,
+    field: 'salary',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'duration',
+    align: 'left',
+    label: 'ระยะเวลา',
+    sortable: true,
+    field: 'duration',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'reason',
+    align: 'left',
+    label: 'เหตุผลที่ออก',
+    sortable: true,
+    field: 'reason',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  }
+])
+
+watch(loader, (count: boolean, prevCount: boolean) => {
+  emit('update:loader', count)
+})
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeExamColumns('career', count)
+})
+
+onMounted(async () => {
+  //   await fetchData()
+  rawHistory.value = rows.value
+})
+
+const fetchData = async () => {}
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = () => {
+  edit.value = false
+  rowIndex.value -= 1
+  const row = rows.value[rowIndex.value]
+  location.value = row.location
+  position.value = row.position
+  salary.value = row.salary
+  duration.value = row.duration
+  reason.value = row.reason
+  id.value = row.id
+  checkRowPage()
+}
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = () => {
+  edit.value = false
+  rowIndex.value += 1
+  const row = rows.value[rowIndex.value]
+  location.value = row.location
+  position.value = row.position
+  salary.value = row.salary
+  duration.value = row.duration
+  reason.value = row.reason
+  id.value = row.id
+  checkRowPage()
+}
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value]
+  location.value = row.location
+  position.value = row.position
+  salary.value = row.salary
+  duration.value = row.duration
+  reason.value = row.reason
+  id.value = row.id
+}
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false
+  next.value = true
+  previous.value = true
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false
+  }
+}
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  next.value = false
+  previous.value = false
+}
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = () => {
+  addData()
+}
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData()
+      } else {
+        await saveData()
+      }
+    }
+  })
+}
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  modal.value = false
+
+  //   loader.value = true;
+  //   await http
+  //     .post(config.API.xxxxxxxxxxxxxxx, {
+  //       xxx: "xxx",
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       modalError.value = true;
+  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
+  //       modalErrorDetail.value = e.response.data.message;
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       modal.value = false;
+  //       await fetchData();
+  //     });
+}
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  edit.value = false
+  editRow.value = false
+
+  //   loader.value = true;
+  //   await http
+  //     .post(config.API.xxxxxxxxxxxxxxx(id.value), {
+  //       xxx: "xxx",
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       modalError.value = true;
+  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
+  //       modalErrorDetail.value = e.response.data.message;
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       await fetchData();
+  //     });
+}
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+      cancel: 'ยกเลิก',
+      ok: 'ยืนยัน',
+      persistent: true
+    }).onOk(async () => {
+      modal.value = false
+      next.value = false
+      previous.value = false
+      await getData()
+    })
+  } else {
+    modal.value = false
+    next.value = false
+    previous.value = false
+  }
+}
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = (props: DataProps) => {
+  modalEdit.value = true
+  modal.value = true
+  edit.value = false
+  rawItem.value = props.row
+  rowIndex.value = props.rowIndex
+  location.value = props.row.location
+  position.value = props.row.position
+  salary.value = props.row.salary
+  duration.value = props.row.duration
+  reason.value = props.row.reason
+  id.value = props.row.id
+  checkRowPage()
+}
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false
+  modal.value = true
+  edit.value = true
+  location.value = ''
+  position.value = ''
+  salary.value = null
+  duration.value = [new Date(), new Date()]
+  reason.value = ''
+}
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+      cancel: 'ยกเลิก',
+      ok: 'ยืนยัน',
+      persistent: true
+    }).onOk(async () => {
+      edit.value = false
+      checkRowPage()
+      await getData()
+    })
+  } else {
+    edit.value = false
+    checkRowPage()
+  }
+}
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true
+}
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false
+    }
+  })
+}
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

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

@@ -21,11 +21,8 @@
               @click="selectData(props)"
               class="cursor-pointer"
             >
-              <div v-if="col.name == 'start'" class="">
-                {{ col.value + 543 }}
-              </div>
-              <div v-else-if="col.name == 'end'" class="">
-                {{ col.value + 543 }}
+              <div v-if="col.name == 'duration'" class="">
+                {{ dateThaiRange(col.value) }}
               </div>
               <div v-else class="">
                 {{ col.value }}
@@ -54,8 +51,8 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="qualificationId"
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
-                :label="`${'ระดับการศึกษา'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวุฒิที่ได้รับ'}`]"
+                :label="`${'วุฒิที่ได้รับ'}`"
                 @update:modelValue="clickEditRow"
                 emit-value
                 map-options
@@ -73,9 +70,25 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="name"
-                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-                :label="`${'สถานศึกษา'}`"
+                v-model="major"
+                :rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/วิชาเอก'}`]"
+                :label="`${'สาขาวิชา/วิชาเอก'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                type="number"
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="scores"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนนเฉลี่ยตลอดหลักสูตร'}`]"
+                :label="`${'คะแนนเฉลี่ยตลอดหลักสูตร'}`"
                 @update:modelValue="clickEditRow"
               />
             </div>
@@ -88,12 +101,47 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="major"
-                :rules="[(val) => !!val || `${'กรุณากรอกสาขา/วิชาเอก'}`]"
-                :label="`${'สาขา/วิชาเอก'}`"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+                :label="`${'ชื่อสถานศึกษา'}`"
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                :readonly="!edit"
+                v-model="duration"
+                :locale="'th'"
+                autoApply
+                range
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    class="datepicker"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateThaiRange(duration)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -126,6 +174,7 @@ import ProfileTable from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
 import type {
   RequestItemsObject,
   Columns,
@@ -145,6 +194,8 @@ const props = defineProps({
 })
 
 const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { dateThaiRange } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
@@ -155,7 +206,7 @@ const qualificationOptions = ref<DataOption[]>([])
 const major = ref<string>()
 const scores = ref<number | null>()
 const name = ref<string>()
-const duration = ref<any>()
+const duration = ref<[Date, Date]>([new Date(), new Date()])
 const myForm = ref<any>() //form data input
 const edit = ref<boolean>(false) //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false) //modal add detail
@@ -188,7 +239,7 @@ const rows = ref<RequestItemsObject[]>([
     major: 'คอมพิวเตอร์',
     scores: 3.99,
     name: 'มหาลัยเอ',
-    duration: 2015
+    duration: [new Date('1995-04-15'), new Date('1999-02-25')]
   },
   {
     id: '2',
@@ -197,7 +248,7 @@ const rows = ref<RequestItemsObject[]>([
     major: 'คอมพิวเตอร์',
     scores: 3.54,
     name: 'มหาลัยบี',
-    duration: 2015
+    duration: [new Date('2020-06-30'), new Date('2023-10-14')]
   }
 ])
 
@@ -415,6 +466,7 @@ const saveData = async () => {
  */
 const editData = async () => {
   edit.value = false
+  editRow.value = false
 
   //   loader.value = true;
   //   await http
@@ -492,7 +544,7 @@ const addData = () => {
   major.value = ''
   scores.value = null
   name.value = ''
-  duration.value = ''
+  duration.value = [new Date(), new Date()]
 }
 
 /**

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

@@ -21,7 +21,7 @@
       <q-tab-panel name="education"><Education :loader="loader" /> </q-tab-panel>
 
       <!-- ประวัติการทำงาน/ฝึกงาน -->
-      <q-tab-panel name="career"> <Career /></q-tab-panel>
+      <q-tab-panel name="career"> <Career :loader="loader" /></q-tab-panel>
 
       <!-- ไฟล์ -->
       <!-- <q-tab-panel name="document">

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

@@ -0,0 +1,341 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลครอบครัว"
+      icon="mdi-account-group"
+      :save="saveData"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="statusOptions"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+          />
+        </div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• คู่สมรส</label>
+          <q-radio
+            v-model="familyData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+            @update:model-value="selectRadio"
+          />
+          <q-radio
+            v-model="familyData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            dense
+            :disable="!edit"
+            @update:model-value="selectRadio"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="prefixOptions"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameC"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameC"
+            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationC"
+            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.nationalityC"
+            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 text-weight-bold">• บิดา</div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdM"
+            emit-value
+            map-options
+            option-label="name"
+            :options="prefixOptions"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameM"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameM"
+            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationM"
+            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.nationalityM"
+            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 text-weight-bold">• มารดา</div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdF"
+            emit-value
+            map-options
+            option-label="name"
+            :options="prefixOptions"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameF"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameF"
+            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationF"
+            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.nationalityF"
+            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { PropType } from 'vue'
+import { useCounterMixin } from '@/stores/mixin'
+import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
+import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
+
+const mixin = useCounterMixin()
+const { date2Thai, calAge } = mixin
+
+const edit = ref<boolean>(false)
+const myform = ref<any>()
+const familyData = ref<Family>(defaultFamily)
+const statusId = ref<string>('123456789')
+const statusOptions = ref<DataOption[]>([])
+
+// const prefixOptions = ref<any>([
+//   { id: "1", name: "นาย" },
+//   { id: "2", name: "นาง" },
+//   { id: "3", name: "นางสาว" },
+// ]);
+
+const props = defineProps({
+  prefixOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  }
+})
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+    } else {
+    }
+  })
+}
+
+const selectRadio = (e: boolean, i: any) => {
+  if (!e) {
+    familyData.value.prefixIdC = ''
+    familyData.value.firstnameC = ''
+    familyData.value.lastnameC = ''
+    familyData.value.occupationC = ''
+  }
+}
+</script>

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

@@ -0,0 +1,343 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop v-model:edit="edit" header="ข้อมูลส่วนตัว" icon="mdi-account" :save="saveData" />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="prefixOptions"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(informaData.birthDate)"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="calAge(informaData.birthDate)"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
+              (val) => val.length >= 9 || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ครบ'}`
+            ]"
+            :label="`${'โทรศัพท์'}`"
+            mask="#########"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.phone"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
+              (val) => val.length >= 10 || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ครบ'}`
+            ]"
+            :label="`${'โทรศัพท์มือถือ'}`"
+            mask="##########"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            maxlength="13"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val) => val.length >= 13 || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
+            label="ออกให้ ณ อำเภอ"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="provinceOptions"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="informaData.cardIdDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(informaData.cardIdDate)"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
+                :label="`${'วัน/เดือน/ปี'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.email"
+            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
+            label="E-mail address"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useCounterMixin } from '@/stores/mixin'
+import type { PropType } from 'vue'
+import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
+import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+const mixin = useCounterMixin()
+const { date2Thai, calAge } = mixin
+
+const edit = ref<boolean>(false)
+const informaData = ref<Information>(defaultInformation)
+const provinceOptions = ref<DataOption[]>([])
+const myform = ref<any>()
+
+const props = defineProps({
+  prefixOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  genderOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  bloodOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  statusOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  religionOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  provinceOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  }
+})
+
+onMounted(() => {
+  //   console.log(props);
+  fetchProvince()
+})
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+    } else {
+    }
+  })
+}
+
+const fetchProvince = async () => {
+  //   loader.value = true;
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      //   console.log(data);
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      provinceOptions.value = option
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   loader.value = false;
+    })
+}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+</script>

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

@@ -1,4 +1,29 @@
 <template>
-  <div></div>
+  <Information
+    :prefixOptions="prefixOptions"
+    :genderOptions="genderOptions"
+    :bloodOptions="bloodOptions"
+    :statusOptions="statusOptions"
+    :religionOptions="religionOptions"
+    :provinceOptions="provinceOptions"
+  />
+  <Address />
+  <Family :prefixOptions="prefixOptions" />
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { DataOption } from '@/modules/01_exam/interface/index/Main'
+import Information from './Information.vue'
+import Address from './Address.vue'
+import Family from './Family.vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+const loader = ref<boolean>(true)
+const prefixOptions = ref<DataOption[]>([])
+const bloodOptions = ref<DataOption[]>([])
+const genderOptions = ref<DataOption[]>([])
+const statusOptions = ref<DataOption[]>([])
+const religionOptions = ref<DataOption[]>([])
+const provinceOptions = ref<DataOption[]>([])
+</script>