ui step กรอกข้อมูล

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

@@ -1,14 +1,15 @@
+<!-- card ข้อมูลที่อยู่ -->
 <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"
-    /> -->
+        v-model:edit="edit"
+        header="ข้อมูลที่อยู่"
+        icon="mdi-map-marker"
+        :save="saveData"
+      /> -->
     <HeaderTop
       v-model:edit="edit"
-      header="ข้อมูลที่อยู่ปัจจุบัน"
+      header="ข้อมูลที่อยู่"
       icon="mdi-map-marker"
       :save="saveData"
       :history="true"
@@ -27,8 +28,8 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="addressData.address"
-            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่'}`]"
-            :label="`${'ที่อยู่'}`"
+            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
           />
           <!-- :filled="edit" -->
         </div>
@@ -49,7 +50,7 @@
             :options="provinceOptions"
             option-value="id"
             :label="`${'จังหวัด'}`"
-            @update:model-value="(value) => selectProvince(value)"
+            @update:model-value="(value) => selectProvince(value, '1')"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -69,7 +70,7 @@
             :options="districtOptions"
             option-value="id"
             :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value) => selectDistrict(value)"
+            @update:model-value="(value) => selectDistrict(value, '1')"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -89,7 +90,7 @@
             :options="subdistrictOptions"
             option-value="id"
             :label="`${'ตำบล / แขวง'}`"
-            @update:model-value="(value) => selectSubDistrict(value)"
+            @update:model-value="(value) => selectSubDistrict(value, '1')"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -100,7 +101,119 @@
             lazy-rules
             readonly
             borderless
-            v-model="codep"
+            v-model="addressData.code"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-lg"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="ใช่"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่"
+            dense
+            :disable="!edit"
+          />
+        </div>
+
+        <div class="col-xs-12" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.addressC"
+            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+            :label="`${'ที่อยู่ปัจจุบัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="provinceOptions"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value) => selectProvince(value, '2')"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="districtCOptions"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value) => selectDistrict(value, '2')"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="subdistrictCOptions"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value) => selectSubDistrict(value, '2')"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="addressData.codeC"
             :style="!edit ? '' : 'padding:0 12px;'"
             :label="`${'รหัสไปรษณีย์'}`"
           />
@@ -111,6 +224,7 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useCounterMixin } from '@/stores/mixin'
 
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -118,14 +232,20 @@ import type { Address, DataOption, zipCodeOption } from '@/modules/01_exam/inter
 import { defaultAddress } 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 addressData = ref<Address>(defaultAddress)
 const myform = ref<any>()
 const codep = ref<string>('')
+const codec = ref<string>('')
 
 const provinceOptions = ref<DataOption[]>([])
 const districtOptions = ref<DataOption[]>([])
+const districtCOptions = ref<DataOption[]>([])
 const subdistrictOptions = ref<zipCodeOption[]>([])
+const subdistrictCOptions = ref<zipCodeOption[]>([])
 
 const getClass = (val: boolean) => {
   return {
@@ -135,8 +255,9 @@ const getClass = (val: boolean) => {
 }
 
 onMounted(() => {
-  //   fetchProvince()
-  //   fetchDistrict(addressData.value.provinceId)
+  fetchProvince()
+  fetchDistrict(addressData.value.provinceId, '1')
+  fetchDistrict(addressData.value.provinceIdC, '2')
 })
 
 const saveData = async () => {
@@ -147,27 +268,47 @@ const saveData = async () => {
   })
 }
 
-const selectProvince = (e: string) => {
-  addressData.value.districtId = ''
-  addressData.value.subdistrictId = ''
-  codep.value = ''
+const selectProvince = (e: string, name: string) => {
+  if (name == '1') {
+    addressData.value.districtId = ''
+    addressData.value.subdistrictId = ''
+    codep.value = ''
+  } else {
+    addressData.value.districtIdC = ''
+    addressData.value.subdistrictIdC = ''
+    codec.value = ''
+  }
 
   myform.value.resetValidation()
-  fetchDistrict(e)
+  fetchDistrict(e, name)
 }
 
-const selectDistrict = (e: string) => {
-  addressData.value.subdistrictId = ''
-  codep.value = ''
+const selectDistrict = (e: string, name: string) => {
+  if (name == '1') {
+    addressData.value.subdistrictId = ''
+    codep.value = ''
+  } else {
+    addressData.value.subdistrictIdC = ''
+    codec.value = ''
+  }
 
   myform.value.resetValidation()
-  fetchSubDistrict(e)
+  fetchSubDistrict(e, name)
 }
 
-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 selectSubDistrict = (e: string, name: string) => {
+  if (name == '1') {
+    const findcode = subdistrictOptions.value.filter((r) => r.id == e)
+    const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
+    codep.value = namecode
+  } else {
+    const findcode = subdistrictCOptions.value.filter((r) => r.id == e)
+    const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
+    codec.value = namecode
+  }
+
+  //   myform.value.resetValidation();
+  //   fetchSubDistrict(e, name);
 }
 
 const fetchProvince = async () => {
@@ -189,7 +330,7 @@ const fetchProvince = async () => {
     })
 }
 
-const fetchDistrict = async (id: string) => {
+const fetchDistrict = async (id: string, position: string) => {
   //   loader.value = true;
   await http
     .get(config.API.listDistrict(id))
@@ -200,7 +341,11 @@ const fetchDistrict = async (id: string) => {
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      districtOptions.value = option
+      if (position == '1') {
+        districtOptions.value = option
+      } else {
+        districtCOptions.value = option
+      }
     })
     .catch((e: any) => {})
     .finally(() => {
@@ -208,7 +353,7 @@ const fetchDistrict = async (id: string) => {
     })
 }
 
-const fetchSubDistrict = async (id: string) => {
+const fetchSubDistrict = async (id: string, position: string) => {
   //   loader.value = true;
   await http
     .get(config.API.listSubDistrict(id))
@@ -223,7 +368,11 @@ const fetchSubDistrict = async (id: string) => {
           zipCode: r.zipCode.toString()
         })
       })
-      subdistrictOptions.value = option
+      if (position == '1') {
+        subdistrictOptions.value = option
+      } else {
+        subdistrictCOptions.value = option
+      }
     })
     .catch((e: any) => {})
     .finally(() => {

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

@@ -1,4 +1,4 @@
-<!-- card ประวัติการทำงาน/ฝึกงาน -->
+<!-- tab ประวัติการทำงาน/ฝึกงาน -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">

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

@@ -0,0 +1,10 @@
+<!-- tab เอกสาร -->
+<template>
+  <Image />
+  <OtherFile />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import Image from './Image.vue'
+import OtherFile from './OtherFile.vue'
+</script>

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

@@ -1,4 +1,4 @@
-<!-- card ประวัติการศึกษา -->
+<!-- tab ประวัติการศึกษา -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">

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

@@ -1,3 +1,4 @@
+<!-- step กรอกข้อมูล -->
 <template>
   <div>
     <q-tabs
@@ -11,134 +12,20 @@
       <q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
       <q-tab name="education" label="ประวัติการศีกษา" />
       <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" />
-      <!-- <q-tab name="document" label="เอกสาร" /> -->
+      <q-tab name="document" label="เอกสาร" />
     </q-tabs>
     <q-tab-panels v-model="tab" animated class="bg-white">
       <!-- ข้อมูลส่วนบุคคล -->
-      <q-tab-panel name="profile"> <Profile /></q-tab-panel>
+      <q-tab-panel name="profile"><Profile /></q-tab-panel>
 
       <!-- ประวัติการศีกษา -->
       <q-tab-panel name="education"><Education :loader="loader" /> </q-tab-panel>
 
       <!-- ประวัติการทำงาน/ฝึกงาน -->
-      <q-tab-panel name="career"> <Career :loader="loader" /></q-tab-panel>
+      <q-tab-panel name="career"><Career :loader="loader" /></q-tab-panel>
 
       <!-- ไฟล์ -->
-      <!-- <q-tab-panel name="document">
-        <div class="row justify-center">
-          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
-            <q-select
-              :disable="!allowEdit"
-              filled
-              v-model="filePictureUpload"
-              :options="filePictureCurrent"
-              option-label="fileName"
-              option-value="id"
-              emit-value
-              map-options
-              label="รูปถ่าย (File.png)"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filePictureUpload !== null"
-                  name="close"
-                  @click.stop.prevent="filePictureUpload = null"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-          </div>
-          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
-            <q-select
-              :disable="!allowEdit"
-              filled
-              v-model="fileAddressUpload"
-              :options="fileAddressCurrent"
-              option-label="fileName"
-              option-value="id"
-              emit-value
-              map-options
-              label="สำเนาทะเบียนบ้าน"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="fileAddressUpload !== null"
-                  name="close"
-                  @click.stop.prevent="fileAddressUpload = null"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-          </div>
-          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
-            <q-select
-              :disable="!allowEdit"
-              filled
-              v-model="fileCitizenIdUpload"
-              :options="fileCitizenIdCurrent"
-              option-label="fileName"
-              option-value="id"
-              emit-value
-              map-options
-              label="สำเนาบัตรประจำตัวประชาชน"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="fileCitizenIdUpload !== null"
-                  name="close"
-                  @click.stop.prevent="fileCitizenIdUpload = null"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-          </div>
-          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
-            <q-select
-              :disable="!allowEdit"
-              filled
-              v-model="fileProfessionalLicenseUpload"
-              :options="fileProfessionalLicenseCurrent"
-              option-label="fileName"
-              option-value="id"
-              emit-value
-              map-options
-              label="ใบอนุญาตประกอบวิชาชีพ"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="fileProfessionalLicenseUpload !== null"
-                  name="close"
-                  @click.stop.prevent="fileProfessionalLicenseUpload = null"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-          </div>
-          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
-            <q-select
-              :disable="!allowEdit"
-              filled
-              v-model="fileOtherUpload"
-              multiple
-              :options="fileOtherCurrent"
-              option-label="fileName"
-              option-value="id"
-              emit-value
-              map-options
-              label="เอกสารอื่น ๆ"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="fileOtherUpload.length !== 0"
-                  name="close"
-                  @click.stop.prevent="fileOtherUpload = []"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-      </q-tab-panel> -->
+      <q-tab-panel name="document"><Document :loader="loader" /> </q-tab-panel>
     </q-tab-panels>
 
     <!-- <div>
@@ -168,6 +55,7 @@ import { ref } from 'vue'
 import Profile from './Profile.vue'
 import Education from './Education.vue'
 import Career from './Career.vue'
+import Document from './Document.vue'
 
 const tab = ref<string>('profile')
 const loader = ref<boolean>(false)

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

@@ -1,3 +1,4 @@
+<!-- card ข้อมูลครอบครัว -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
     <HeaderTop
@@ -8,25 +9,6 @@
     />
     <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
@@ -299,7 +281,6 @@ 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>([

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

@@ -0,0 +1,38 @@
+<!-- card รูปถ่าย -->
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <HeaderTop v-model:edit="edit" header="รูปถ่าย" icon="mdi-image-area" :history="false" />
+    <div class="row col-12 q-gutter-sm q-pt-sm">
+      <q-img
+        class="items-center"
+        src="https://picsum.photos/500/300"
+        style="max-width: 150px; height: 150px"
+        fit="contain"
+      >
+      </q-img>
+      <q-uploader
+        v-show="edit"
+        color="blue"
+        type="file"
+        flat
+        auto-upload
+        :factory="fileUpload"
+        class="full-width"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+        bordered
+      />
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import HeaderTop from '@/components/top.vue'
+
+const edit = ref<boolean>(false)
+const fileUpload = async (file: any) => {
+  return {
+    url: 'http://localhost:4444/upload',
+    method: 'POST'
+  }
+}
+</script>

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

@@ -1,3 +1,4 @@
+<!-- card ข้อมูลส่วนตัว -->
 <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" />
@@ -114,41 +115,36 @@
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
+          <q-select
             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="#########"
+            :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="statusOptions"
+            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
-            type="tel"
-            :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.phone"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
-              (val) => val.length >= 10 || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ครบ'}`
-            ]"
-            :label="`${'โทรศัพท์มือถือ'}`"
-            mask="##########"
+            v-model="informaData.email"
+            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
+            label="E-mail address"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -241,16 +237,40 @@
         </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
+            type="tel"
+            :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.email"
-            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
-            label="E-mail address"
+            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>

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

@@ -0,0 +1,252 @@
+<!-- card อาชีพ -->
+<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-briefcase" :save="saveData" />
+    <q-form ref="myform">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-12 row">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.official"
+            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+            :disable="occupationData.status !== 'official' || !edit"
+          >
+            <template v-slot:before>
+              <q-radio
+                v-model="occupationData.status"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="official"
+                label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
+                dense
+                :disable="!edit"
+                size="xs"
+                style="font-size: 14px; color: black"
+              />
+            </template>
+          </q-input>
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.personnel"
+            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+            :disable="occupationData.status !== 'personnel' || !edit"
+          >
+            <template v-slot:before>
+              <q-radio
+                v-model="occupationData.status"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="personnel"
+                label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
+                dense
+                :disable="!edit"
+                size="xs"
+                style="font-size: 14px; color: black"
+              />
+            </template>
+          </q-input>
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.officialsOther"
+            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+            :disable="occupationData.status !== 'officialsOther' || !edit"
+          >
+            <template v-slot:before>
+              <q-radio
+                v-model="occupationData.status"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="officialsOther"
+                label="ข้าราชการประเภทอื่น ตำแหน่ง"
+                dense
+                :disable="!edit"
+                size="xs"
+                style="font-size: 14px; color: black"
+              />
+            </template>
+          </q-input>
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.employee"
+            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+            :disable="occupationData.status !== 'employee' || !edit"
+          >
+            <template v-slot:before>
+              <q-radio
+                v-model="occupationData.status"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="employee"
+                label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
+                dense
+                :disable="!edit"
+                size="xs"
+                style="font-size: 14px; color: black"
+              />
+            </template>
+          </q-input>
+          <q-radio
+            v-model="occupationData.status"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="studying"
+            label="กำลังศึกษาต่อ"
+            dense
+            :disable="!edit"
+            size="xs"
+            style="font-size: 14px; color: black"
+          />
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.other"
+            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+            :disable="occupationData.status !== 'other' || !edit"
+          >
+            <template v-slot:before>
+              <q-radio
+                v-model="occupationData.status"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="other"
+                label="อื่นๆ"
+                dense
+                :disable="!edit"
+                size="xs"
+                style="font-size: 14px; color: black"
+              />
+            </template>
+          </q-input>
+        </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
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.company"
+            :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
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.department"
+            :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
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.email"
+            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
+            :label="`${'E-mail address'}`"
+          />
+        </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
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="occupationData.tel"
+            :rules="[(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`]"
+            :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 { Occupation } from '@/modules/01_exam/interface/index/Main'
+import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
+
+const edit = ref<boolean>(false)
+const occupationData = ref<Occupation>(defaultOccupation)
+const myform = ref<any>()
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+
+onMounted(() => {})
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+    } else {
+    }
+  })
+}
+</script>

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

@@ -0,0 +1,85 @@
+<!-- card เอกสารหลักฐาน -->
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="เอกสารหลักฐาน"
+      icon="mdi-file-document"
+      :history="false"
+    />
+    <div class="row col-12 q-gutter-sm q-pt-sm">
+      <q-card bordered flat class="full-width">
+        <q-list separator>
+          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ file.name }}
+              </q-item-label>
+
+              <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
+            </q-item-section>
+            <q-item-section top side>
+              <div class="row col-12">
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="blue"
+                  icon="mdi-download-outline"
+                />
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  icon="mdi-delete-outline"
+                  v-show="edit"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-uploader
+        v-show="edit"
+        color="blue"
+        type="file"
+        flat
+        auto-upload
+        :factory="fileUpload"
+        class="full-width"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+        bordered
+      />
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import HeaderTop from '@/components/top.vue'
+
+const edit = ref<boolean>(false)
+const files = ref<any>([
+  {
+    key: 1,
+    name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
+    status: 'อัปโหลดเสร็จสิ้น',
+    sizeLabel: '176MB'
+  },
+  {
+    key: 2,
+    name: 'เอกสารข้อมูลการสมรส',
+    status: 'อัปโหลดเสร็จสิ้น',
+    sizeLabel: '89MB'
+  }
+])
+const fileUpload = async (file: any) => {
+  return {
+    url: 'http://localhost:4444/upload',
+    method: 'POST'
+  }
+}
+</script>

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

@@ -1,3 +1,4 @@
+<!-- tab ข้อมูลส่วนบุคคล -->
 <template>
   <Information
     :prefixOptions="prefixOptions"
@@ -9,6 +10,7 @@
   />
   <Address />
   <Family :prefixOptions="prefixOptions" />
+  <Occupation />
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
@@ -16,6 +18,7 @@ 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 Occupation from './Occupation.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 

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

@@ -30,6 +30,7 @@ interface Information {
   email: string
   provinceId: string
   cardIdDate: Date
+  statusId: string
 }
 
 interface Family {
@@ -54,15 +55,30 @@ interface Family {
   same: string
 }
 
+interface Occupation {
+  status: string
+  company: string
+  department: string
+  email: string
+  tel: string
+  official: string | null
+  personnel: string | null
+  officialsOther: string | null
+  employee: string | null
+  other: string | null
+}
+
 interface Address {
   address: string
   provinceId: string
   districtId: string
   subdistrictId: string
+  code: number
   addressC: string
   provinceIdC: string
   districtIdC: string
   subdistrictIdC: string
+  codeC: number
   same: string
 }
 
@@ -80,50 +96,53 @@ interface zipCodeOption {
 
 const defaultAddress: Address = {
   address: 'บ้านเลขที่ 1/2 ซอย 56 ถนนตัดใหม่',
-  provinceId: 'f122211c-7e35-4bbc-ad0f-b3a853ed1cea',
-  districtId: '16813e59-c03a-4c97-ab6f-59438a44e422',
-  subdistrictId: '0d21e8af-6507-4312-a214-3e5a870f856d',
+  provinceId: 'กรุงเทพ',
+  districtId: 'หนองแขม',
+  subdistrictId: 'หนองค้างพลู',
+  code: 10160,
   addressC: 'บ้านเลขที่ 1/2 ซอย 56 ถนนตัดใหม่',
-  provinceIdC: 'f122211c-7e35-4bbc-ad0f-b3a853ed1cea',
-  districtIdC: '16813e59-c03a-4c97-ab6f-59438a44e422',
-  subdistrictIdC: '0d21e8af-6507-4312-a214-3e5a870f856d',
+  provinceIdC: 'กรุงเทพ',
+  districtIdC: 'หนองแขม',
+  subdistrictIdC: 'หนองค้างพลู',
+  codeC: 10160,
   same: '0'
 }
 
 const defaultInformation: Information = {
   cardid: '10238002345325',
   prefix: 'นางสาว',
-  prefixId: '0f6dc562-e4a4-4014-9b20-5c97ea811755',
+  prefixId: 'นางสาว',
   firstname: 'ณัฐกา',
   lastname: 'ชมสิน',
   birthDate: new Date('2002-01-01'),
-  genderId: 'ee1063a0-8ceb-4f9c-af06-107a58823957',
-  bloodId: '5c0c5185-ca99-4593-a7a3-c5ec56230e03',
+  genderId: 'หญิง',
+  bloodId: 'O',
   nationality: 'ไทย',
   ethnicity: 'ไทย',
-  religionId: '1fe77f89-c3b2-4b2c-b255-558375acc35b',
+  religionId: 'พุทธ',
   tel: '0914569982',
   phone: '0914569982',
-  email: 'test@test.test',
-  provinceId: 'zxczxczxcasc',
-  cardIdDate: new Date('2000-01-10')
+  email: 'kittapath@frappet.com',
+  provinceId: 'กรุงเทพ',
+  cardIdDate: new Date('2000-01-10'),
+  statusId: 'โสด'
 }
 
 const defaultFamily: Family = {
   prefixC: 'นาย',
-  prefixIdC: 'b3033046-20a8-46fc-9f9c-47447f49830b',
+  prefixIdC: 'นาย',
   firstnameC: 'ธนาคาร',
   lastnameC: 'กสิกร',
   occupationC: 'ว่าง',
   nationalityC: 'ไทย',
   prefixM: 'นาย',
-  prefixIdM: 'b3033046-20a8-46fc-9f9c-47447f49830b',
+  prefixIdM: 'นาย',
   firstnameM: 'ธนายุทธ',
   lastnameM: 'ชมสิน',
   occupationM: 'ว่าง',
   nationalityM: 'ไทย',
   prefixF: 'นางสาว',
-  prefixIdF: '0f6dc562-e4a4-4014-9b20-5c97ea811755',
+  prefixIdF: 'นางสาว',
   firstnameF: 'ณัฐกาล',
   lastnameF: 'ชมสิน',
   occupationF: 'ว่าง',
@@ -131,7 +150,20 @@ const defaultFamily: Family = {
   same: '1'
 }
 
-export { defaultInformation, defaultFamily, defaultAddress }
+const defaultOccupation: Occupation = {
+  status: 'official',
+  company: 'บริษัท ทรู คอร์ปอเรชั่น จำกัด (มหาชน)',
+  department: '-',
+  email: 'kittapath@frappet.com',
+  tel: '0846464646',
+  official: 'Direct Sales Staff',
+  personnel: null,
+  officialsOther: null,
+  employee: null,
+  other: null
+}
+
+export { defaultInformation, defaultFamily, defaultAddress, defaultOccupation }
 export type {
   Pagination,
   DataOption,
@@ -140,5 +172,6 @@ export type {
   Information,
   Family,
   Address,
-  zipCodeOption
+  zipCodeOption,
+  Occupation
 }