แยกปุ่มอัพโหลด

This commit is contained in:
Kittapath 2023-03-30 13:42:08 +07:00
parent ccc5efa421
commit abe8e9186c
11 changed files with 809 additions and 585 deletions

View file

@ -8,7 +8,7 @@
:addData="true"
:editOnly="false"
:cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'"
:editData="false"
:disable="statusEdit"
/>
<!-- :changeBtn="changeBtn" -->
@ -24,16 +24,16 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.official"
v-model="defaultOccupation.official"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'official' ||
defaultOccupation.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="official"
@ -54,16 +54,16 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.personnel"
v-model="defaultOccupation.personnel"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'personnel' ||
defaultOccupation.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="personnel"
@ -84,16 +84,16 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.officialsOther"
v-model="defaultOccupation.officialsOther"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'officialsOther' ||
defaultOccupation.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="officialsOther"
@ -114,16 +114,16 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.employee"
v-model="defaultOccupation.employee"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'employee' ||
defaultOccupation.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="employee"
@ -136,7 +136,7 @@
</template>
</q-input>
<q-radio
v-model="occupationData.status"
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="studying"
@ -155,16 +155,16 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.other"
v-model="defaultOccupation.other"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'other' ||
defaultOccupation.status !== 'other' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="other"
@ -187,7 +187,7 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company"
v-model="defaultOccupation.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`"
/>
@ -202,7 +202,7 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department"
v-model="defaultOccupation.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`"
/>
@ -217,7 +217,7 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email"
v-model="defaultOccupation.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`"
/>
@ -234,7 +234,7 @@
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel"
v-model="defaultOccupation.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
@ -251,16 +251,15 @@
</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 { Occupation } from '@/modules/01_exam/interface/index/Main'
import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
import { defaultOccupation, 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'
const props = defineProps({
@ -275,6 +274,14 @@ const props = defineProps({
status: {
type: String,
required: true
},
btnSave: {
type: Boolean,
required: true
},
form: {
type: Object,
required: true
}
})
@ -283,14 +290,26 @@ const mixin = useCounterMixin()
const store = useExamDataStore()
const { success } = mixin
const edit = ref<boolean>(true)
const occupationData = ref<Occupation>(defaultOccupation)
const myform = ref<any>()
// const defaultOccupation = ref<Occupation>(defaultOccupation)
const myform = ref<any>({})
// const modalConsend = ref<boolean>(false)
const loader = ref<boolean>(false)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
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(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
await changeData('occupation', count)
})
onMounted(async () => {
await fetchData()
@ -302,20 +321,21 @@ const fetchData = async () => {
.get(config.API.candidateOccupation(examId.value))
.then((res) => {
const data = res.data.result
occupationData.value.status = data.occupationType
occupationData.value.company = data.occupationCompany
occupationData.value.department = data.occupationDepartment
occupationData.value.email = data.occupationEmail
occupationData.value.tel = data.occupationTelephone
occupationData.value.official =
defaultOccupation.value.status = data.occupationType
defaultOccupation.value.company = data.occupationCompany
defaultOccupation.value.department = data.occupationDepartment
defaultOccupation.value.email = data.occupationEmail
defaultOccupation.value.tel = data.occupationTelephone
defaultOccupation.value.official =
data.occupationType == 'official' ? data.occupationPosition : null
occupationData.value.personnel =
defaultOccupation.value.personnel =
data.occupationType == 'personnel' ? data.occupationPosition : null
occupationData.value.officialsOther =
defaultOccupation.value.officialsOther =
data.occupationType == 'officialsOther' ? data.occupationPosition : null
occupationData.value.employee =
defaultOccupation.value.employee =
data.occupationType == 'employee' ? data.occupationPosition : null
occupationData.value.other = data.occupationType == 'other' ? data.occupationPosition : null
defaultOccupation.value.other =
data.occupationType == 'other' ? data.occupationPosition : null
})
.catch(() => {})
.finally(() => {
@ -328,24 +348,27 @@ const saveData = async () => {
if (suc) {
// if (store.consend == true) {
const type = ref<string | null>('')
if (occupationData.value.status == 'official') type.value = occupationData.value.official
if (occupationData.value.status == 'personnel') type.value = occupationData.value.personnel
if (occupationData.value.status == 'officialsOther')
type.value = occupationData.value.officialsOther
if (occupationData.value.status == 'employee') type.value = occupationData.value.employee
if (occupationData.value.status == 'other') type.value = occupationData.value.other
if (defaultOccupation.value.status == 'official')
type.value = defaultOccupation.value.official
if (defaultOccupation.value.status == 'personnel')
type.value = defaultOccupation.value.personnel
if (defaultOccupation.value.status == 'officialsOther')
type.value = defaultOccupation.value.officialsOther
if (defaultOccupation.value.status == 'employee')
type.value = defaultOccupation.value.employee
if (defaultOccupation.value.status == 'other') type.value = defaultOccupation.value.other
loader.value = true
await http
.post(config.API.candidateOccupation(examId.value), {
occupationType: occupationData.value.status,
occupationCompany: occupationData.value.company,
occupationDepartment: occupationData.value.department,
occupationEmail: occupationData.value.email,
occupationTelephone: occupationData.value.tel,
occupationType: defaultOccupation.value.status,
occupationCompany: defaultOccupation.value.company,
occupationDepartment: defaultOccupation.value.department,
occupationEmail: defaultOccupation.value.email,
occupationTelephone: defaultOccupation.value.tel,
occupationPosition: type.value
})
.then(() => {
success($q, 'บันทึกข้อมูลอาชีพสำเร็จ')
// success($q, '')
// edit.value = false
emit('update:statusEdit', false)
})