แยกปุ่มอัพโหลด
This commit is contained in:
Kittapath
parent
ccc5efa421
commit
abe8e9186c
11 changed files with 809 additions and 585 deletions
|
|
@ -8,7 +8,7 @@
|
|||
:addData="true"
|
||||
:editOnly="false"
|
||||
:cancel="cancelData"
|
||||
:editData="status == 'register' || status == 'rejectRegister'"
|
||||
:editData="false"
|
||||
:disable="statusEdit"
|
||||
/>
|
||||
<!-- :changeBtn="changeBtn" -->
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.prefixId"
|
||||
v-model="defaultInformation.prefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.firstname"
|
||||
v-model="defaultInformation.firstname"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.lastname"
|
||||
v-model="defaultInformation.lastname"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
|
|
@ -66,14 +66,14 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.nationality"
|
||||
v-model="defaultInformation.nationality"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<datepicker
|
||||
v-model="informaData.birthDate"
|
||||
v-model="defaultInformation.birthDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -95,7 +95,11 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
:model-value="informaData.birthDate == null ? null : date2Thai(informaData.birthDate)"
|
||||
:model-value="
|
||||
defaultInformation.birthDate == null
|
||||
? null
|
||||
: date2Thai(defaultInformation.birthDate)
|
||||
"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||
>
|
||||
|
|
@ -124,7 +128,9 @@
|
|||
readonly
|
||||
borderless
|
||||
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
|
||||
:model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
|
||||
:model-value="
|
||||
defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
|
||||
"
|
||||
:label="`${'อายุ'}`"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -137,7 +143,7 @@
|
|||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.relationship"
|
||||
v-model="defaultInformation.relationship"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
@ -156,7 +162,7 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.cardid"
|
||||
v-model="defaultInformation.cardid"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
|
||||
|
|
@ -174,7 +180,7 @@
|
|||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.provinceId"
|
||||
v-model="defaultInformation.provinceId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
@ -193,7 +199,7 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.cardid"
|
||||
v-model="defaultInformation.cardid"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
|
||||
label="ออกให้ ณ อำเภอ"
|
||||
/> -->
|
||||
|
|
@ -205,7 +211,7 @@
|
|||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.districtId"
|
||||
v-model="defaultInformation.districtId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
@ -217,7 +223,7 @@
|
|||
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<datepicker
|
||||
v-model="informaData.cardIdDate"
|
||||
v-model="defaultInformation.cardIdDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -240,7 +246,9 @@
|
|||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
:model-value="
|
||||
informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
|
||||
defaultInformation.cardIdDate == null
|
||||
? null
|
||||
: date2Thai(defaultInformation.cardIdDate)
|
||||
"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
|
||||
:label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
|
||||
|
|
@ -272,7 +280,7 @@
|
|||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.tel"
|
||||
v-model="defaultInformation.tel"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
|
||||
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
|
||||
|
|
@ -291,7 +299,7 @@
|
|||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.phone"
|
||||
v-model="defaultInformation.phone"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
|
||||
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
|
||||
|
|
@ -307,7 +315,7 @@
|
|||
lazy-rules
|
||||
:readonly="true"
|
||||
:borderless="true"
|
||||
v-model="informaData.email"
|
||||
v-model="defaultInformation.email"
|
||||
label="E-mail address"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -343,7 +351,7 @@
|
|||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="informaData.knowledge"
|
||||
v-model="defaultInformation.knowledge"
|
||||
label="ความรู้ความสามารถพิเศษ"
|
||||
type="textarea"
|
||||
/>
|
||||
|
|
@ -356,17 +364,16 @@
|
|||
</q-dialog> -->
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { QForm, useQuasar } from 'quasar'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
import { useExamDataStore } from '@/modules/01_exam/store'
|
||||
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 { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
|
||||
import HeaderTop from '@/components/top.vue'
|
||||
import Conference from '@/modules/01_exam/components/Conference.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import keycloak from '@/plugins/keycloak'
|
||||
|
||||
|
|
@ -394,6 +401,14 @@ const props = defineProps({
|
|||
status: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
btnSave: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -405,19 +420,32 @@ const districtOptions = ref<DataOption[]>([])
|
|||
const route = useRoute()
|
||||
const examId = ref<string>(route.params.id.toString())
|
||||
const edit = ref<boolean>(true)
|
||||
const informaData = ref<Information>(defaultInformation)
|
||||
const myform = ref<any>()
|
||||
// const defaultInformation = ref<Information>(defaultInformation)
|
||||
const myform = ref<any>({})
|
||||
const imageUrl = ref<string | null>(null)
|
||||
const disabledPic = ref<boolean>(false)
|
||||
// const modalConsend = ref<boolean>(false)
|
||||
const fileData = ref<File | null>()
|
||||
const loader = ref<boolean>(false)
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
const emit = defineEmits(['update:statusEdit', 'update:form'])
|
||||
|
||||
watch(props, async (count: any, prevCount: any) => {
|
||||
// if (props.btnSave == true) await saveData()
|
||||
})
|
||||
|
||||
watch(myform, async (count: any, prevCount: any) => {
|
||||
emit('update:form', count)
|
||||
})
|
||||
|
||||
watch(defaultInformation, async (count: Information, prevCount: Information) => {
|
||||
await changeData('information', count)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData()
|
||||
if (informaData.value.provinceId != null) await fetchDistrict(informaData.value.provinceId)
|
||||
if (defaultInformation.value.provinceId != null)
|
||||
await fetchDistrict(defaultInformation.value.provinceId)
|
||||
})
|
||||
|
||||
const fetchData = async () => {
|
||||
|
|
@ -426,26 +454,29 @@ const fetchData = async () => {
|
|||
.get(config.API.candidateInformation(examId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result
|
||||
informaData.value.prefixId = data.prefixId
|
||||
informaData.value.lastname = data.lastName
|
||||
informaData.value.provinceId = data.citizenProvinceId
|
||||
informaData.value.districtId = data.citizenDistrictId
|
||||
informaData.value.birthDate = data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
|
||||
informaData.value.cardIdDate = data.citizenDate == null ? null : new Date(data.citizenDate)
|
||||
informaData.value.cardid = data.citizenId
|
||||
informaData.value.firstname = data.firstName
|
||||
informaData.value.relationship = data.relationshipId
|
||||
informaData.value.nationality = data.nationality
|
||||
informaData.value.email = data.email
|
||||
informaData.value.phone = data.mobilePhone
|
||||
informaData.value.tel = data.telephone
|
||||
informaData.value.knowledge = data.knowledge
|
||||
defaultInformation.value.prefixId = data.prefixId
|
||||
defaultInformation.value.lastname = data.lastName
|
||||
defaultInformation.value.provinceId = data.citizenProvinceId
|
||||
defaultInformation.value.districtId = data.citizenDistrictId
|
||||
defaultInformation.value.birthDate =
|
||||
data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
|
||||
defaultInformation.value.cardIdDate =
|
||||
data.citizenDate == null ? null : new Date(data.citizenDate)
|
||||
defaultInformation.value.cardid = data.citizenId
|
||||
defaultInformation.value.firstname = data.firstName
|
||||
defaultInformation.value.relationship = data.relationshipId
|
||||
defaultInformation.value.nationality = data.nationality
|
||||
defaultInformation.value.email = data.email
|
||||
defaultInformation.value.phone = data.mobilePhone
|
||||
defaultInformation.value.tel = data.telephone
|
||||
defaultInformation.value.knowledge = data.knowledge
|
||||
})
|
||||
.catch(() => {
|
||||
informaData.value.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
|
||||
informaData.value.firstname =
|
||||
defaultInformation.value.email =
|
||||
keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
|
||||
defaultInformation.value.firstname =
|
||||
keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
|
||||
informaData.value.lastname =
|
||||
defaultInformation.value.lastname =
|
||||
keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -454,7 +485,7 @@ const fetchData = async () => {
|
|||
}
|
||||
|
||||
const selectProvince = (val: string) => {
|
||||
informaData.value.districtId = ''
|
||||
defaultInformation.value.districtId = ''
|
||||
myform.value.resetValidation()
|
||||
fetchDistrict(val)
|
||||
}
|
||||
|
|
@ -466,25 +497,29 @@ const saveData = async () => {
|
|||
loader.value = true
|
||||
await http
|
||||
.post(config.API.candidateInformation(examId.value), {
|
||||
prefixId: informaData.value.prefixId,
|
||||
lastName: informaData.value.lastname,
|
||||
citizenProvinceId: informaData.value.provinceId,
|
||||
citizenDistrictId: informaData.value.districtId,
|
||||
prefixId: defaultInformation.value.prefixId,
|
||||
lastName: defaultInformation.value.lastname,
|
||||
citizenProvinceId: defaultInformation.value.provinceId,
|
||||
citizenDistrictId: defaultInformation.value.districtId,
|
||||
dateOfBirth:
|
||||
informaData.value.birthDate == null ? null : dateToISO(informaData.value.birthDate),
|
||||
defaultInformation.value.birthDate == null
|
||||
? null
|
||||
: dateToISO(defaultInformation.value.birthDate),
|
||||
citizenDate:
|
||||
informaData.value.cardIdDate == null ? null : dateToISO(informaData.value.cardIdDate),
|
||||
citizenId: informaData.value.cardid,
|
||||
firstName: informaData.value.firstname,
|
||||
relationshipId: informaData.value.relationship,
|
||||
nationality: informaData.value.nationality,
|
||||
email: informaData.value.email,
|
||||
mobilePhone: informaData.value.phone,
|
||||
telephone: informaData.value.tel,
|
||||
knowledge: informaData.value.knowledge
|
||||
defaultInformation.value.cardIdDate == null
|
||||
? null
|
||||
: dateToISO(defaultInformation.value.cardIdDate),
|
||||
citizenId: defaultInformation.value.cardid,
|
||||
firstName: defaultInformation.value.firstname,
|
||||
relationshipId: defaultInformation.value.relationship,
|
||||
nationality: defaultInformation.value.nationality,
|
||||
email: defaultInformation.value.email,
|
||||
mobilePhone: defaultInformation.value.phone,
|
||||
telephone: defaultInformation.value.tel,
|
||||
knowledge: defaultInformation.value.knowledge
|
||||
})
|
||||
.then(() => {
|
||||
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
|
||||
// success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
|
||||
// edit.value = false
|
||||
emit('update:statusEdit', false)
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue