เช็คค่าก่อนเปลี่ยน tab
This commit is contained in:
Kittapath
parent
3f020c73fc
commit
6ab1a862d6
18 changed files with 547 additions and 243 deletions
586
src/modules/01_exam/components/Form/Career.vue
Normal file
586
src/modules/01_exam/components/Form/Career.vue
Normal file
|
|
@ -0,0 +1,586 @@
|
|||
<!-- tab ประวัติการทำงาน/ฝึกงาน -->
|
||||
<template>
|
||||
<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"
|
||||
:addData="addData"
|
||||
>
|
||||
<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"
|
||||
:editBtn="addData"
|
||||
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">
|
||||
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
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
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 addData = ref<boolean>(true)
|
||||
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
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
})
|
||||
|
||||
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 = () => {
|
||||
addRow()
|
||||
}
|
||||
|
||||
/**
|
||||
* กดบันทึกใน 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 addRow = () => {
|
||||
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>
|
||||
123
src/modules/01_exam/components/Form/Document.vue
Normal file
123
src/modules/01_exam/components/Form/Document.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!-- 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"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
/>
|
||||
<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
|
||||
label="[ไฟล์ jpg,png,pdf,csv,doc]"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import HeaderTop from '@/components/top.vue'
|
||||
|
||||
const props = defineProps({
|
||||
loader: {
|
||||
//หน้า main มีการอัพเดทค่าให้ refresh data
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const files = ref<any>([
|
||||
{
|
||||
key: 1,
|
||||
name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
|
||||
status: 'อัปโหลดเสร็จสิ้น',
|
||||
sizeLabel: '176MB'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: 'เอกสารข้อมูลการสมรส',
|
||||
status: 'อัปโหลดเสร็จสิ้น',
|
||||
sizeLabel: '89MB'
|
||||
}
|
||||
])
|
||||
const emit = defineEmits(['update:loader', 'update:statusEdit'])
|
||||
|
||||
watch(edit, (count: boolean, prevCount: boolean) => {
|
||||
emit('update:statusEdit', count)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const fileUpload = async (file: any) => {
|
||||
return {
|
||||
url: 'http://localhost:4444/upload',
|
||||
method: 'POST'
|
||||
}
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
</script>
|
||||
615
src/modules/01_exam/components/Form/Education.vue
Normal file
615
src/modules/01_exam/components/Form/Education.vue
Normal file
|
|
@ -0,0 +1,615 @@
|
|||
<!-- tab ประวัติการศึกษา -->
|
||||
<template>
|
||||
<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"
|
||||
:addData="addData"
|
||||
>
|
||||
<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 == '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-select
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="qualificationId"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวุฒิที่ได้รับ'}`]"
|
||||
:label="`${'วุฒิที่ได้รับ'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="qualificationOptions"
|
||||
option-value="id"
|
||||
/>
|
||||
</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="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>
|
||||
<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="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 />
|
||||
<DialogFooter
|
||||
:cancel="clickCancel"
|
||||
:edit="clickEdit"
|
||||
:save="clickSave"
|
||||
:validate="validateData"
|
||||
:clickNext="clickNext"
|
||||
:clickPrevious="clickPrevious"
|
||||
:editBtn="addData"
|
||||
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">
|
||||
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/Education'
|
||||
import type { ResponseObject } from '@/modules/01_exam/interface/response/Education'
|
||||
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
||||
const props = defineProps({
|
||||
loader: {
|
||||
//หน้า main มีการอัพเดทค่าให้ refresh data
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
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 qualification = ref<string>()
|
||||
const qualificationId = ref<string>()
|
||||
const qualificationOptions = ref<DataOption[]>([])
|
||||
const major = ref<string>()
|
||||
const scores = ref<number | null>()
|
||||
const name = ref<string>()
|
||||
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
|
||||
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 addData = ref<boolean>(true)
|
||||
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',
|
||||
qualificationId: 'ปริญญาตรี',
|
||||
qualification: 'ปริญญาตรี',
|
||||
major: 'คอมพิวเตอร์',
|
||||
scores: 3.99,
|
||||
name: 'มหาลัยเอ',
|
||||
duration: [new Date('1995-04-15'), new Date('1999-02-25')]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
qualificationId: 'ปริญญาเอก',
|
||||
qualification: 'ปริญญาเอก',
|
||||
major: 'คอมพิวเตอร์',
|
||||
scores: 3.54,
|
||||
name: 'มหาลัยบี',
|
||||
duration: [new Date('2020-06-30'), new Date('2023-10-14')]
|
||||
}
|
||||
])
|
||||
|
||||
const filter = ref<string>('') //search data table
|
||||
|
||||
const visibleColumns = ref<String[]>([])
|
||||
|
||||
examData.education.columns.length == 0
|
||||
? (visibleColumns.value = ['qualification', 'major', 'scores', 'name', 'duration'])
|
||||
: (visibleColumns.value = examData.education.columns)
|
||||
|
||||
const columns = ref<Columns>([
|
||||
{
|
||||
name: 'qualification',
|
||||
align: 'left',
|
||||
label: 'วุฒิที่ได้รับ',
|
||||
sortable: true,
|
||||
field: 'qualification',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'major',
|
||||
align: 'left',
|
||||
label: 'สาขาวิชา/วิชาเอก',
|
||||
sortable: true,
|
||||
field: 'major',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'scores',
|
||||
align: 'left',
|
||||
label: 'คะแนนเฉลี่ยตลอดหลักสูตร',
|
||||
sortable: true,
|
||||
field: 'scores',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
align: 'left',
|
||||
label: 'ชื่อสถานศึกษา',
|
||||
sortable: true,
|
||||
field: 'name',
|
||||
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'
|
||||
}
|
||||
])
|
||||
|
||||
watch(loader, (count: boolean, prevCount: boolean) => {
|
||||
emit('update:loader', count)
|
||||
})
|
||||
|
||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||
await changeExamColumns('education', count)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchData()
|
||||
// await fetchQualification()
|
||||
rawHistory.value = rows.value
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const fetchQualification = async () => {
|
||||
// loader.value = true;
|
||||
await http
|
||||
.get(config.API.educationQualification)
|
||||
.then((res) => {
|
||||
const data = res.data.result
|
||||
let option: DataOption[] = []
|
||||
data.map((r: any) => {
|
||||
option.push({ id: r.id.toString(), name: r.name.toString() })
|
||||
})
|
||||
qualificationOptions.value = option
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// loader.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const fetchData = async () => {}
|
||||
|
||||
/**
|
||||
* กดดูข้อมูลก่อนหน้า
|
||||
*/
|
||||
const clickPrevious = () => {
|
||||
edit.value = false
|
||||
rowIndex.value -= 1
|
||||
const row = rows.value[rowIndex.value]
|
||||
qualification.value = row.qualification
|
||||
qualificationId.value = row.qualificationId
|
||||
major.value = row.major
|
||||
scores.value = row.scores
|
||||
name.value = row.name
|
||||
duration.value = row.duration
|
||||
id.value = row.id
|
||||
checkRowPage()
|
||||
}
|
||||
|
||||
/**
|
||||
* กดดูข้อมูลต่อไป
|
||||
*/
|
||||
const clickNext = () => {
|
||||
edit.value = false
|
||||
rowIndex.value += 1
|
||||
const row = rows.value[rowIndex.value]
|
||||
qualification.value = row.qualification
|
||||
qualificationId.value = row.qualificationId
|
||||
major.value = row.major
|
||||
scores.value = row.scores
|
||||
name.value = row.name
|
||||
duration.value = row.duration
|
||||
id.value = row.id
|
||||
checkRowPage()
|
||||
}
|
||||
|
||||
/**
|
||||
* กดดูข้อมูลต่อไป
|
||||
*/
|
||||
const getData = () => {
|
||||
const row = rows.value[rowIndex.value]
|
||||
qualification.value = row.qualification
|
||||
qualificationId.value = row.qualificationId
|
||||
major.value = row.major
|
||||
scores.value = row.scores
|
||||
name.value = row.name
|
||||
duration.value = row.duration
|
||||
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 = () => {
|
||||
addRow()
|
||||
}
|
||||
|
||||
/**
|
||||
* กดบันทึกใน 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
|
||||
qualification.value = props.row.qualification
|
||||
qualificationId.value = props.row.qualificationId
|
||||
major.value = props.row.major
|
||||
scores.value = props.row.scores
|
||||
name.value = props.row.name
|
||||
duration.value = props.row.duration
|
||||
id.value = props.row.id
|
||||
checkRowPage()
|
||||
}
|
||||
|
||||
/**
|
||||
* กดปุ่มเพิ่มบน table
|
||||
*/
|
||||
const addRow = () => {
|
||||
modalEdit.value = false
|
||||
modal.value = true
|
||||
edit.value = true
|
||||
qualification.value = ''
|
||||
qualificationId.value = ''
|
||||
major.value = ''
|
||||
scores.value = null
|
||||
name.value = ''
|
||||
duration.value = [new Date(), new Date()]
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||
*/
|
||||
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>
|
||||
86
src/modules/01_exam/components/Form/Profile.vue
Normal file
86
src/modules/01_exam/components/Form/Profile.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!-- tab ข้อมูลส่วนบุคคล -->
|
||||
<template>
|
||||
<Information
|
||||
:prefixOptions="prefixOptions"
|
||||
:genderOptions="genderOptions"
|
||||
:bloodOptions="bloodOptions"
|
||||
:statusOptions="statusOptions"
|
||||
:religionOptions="religionOptions"
|
||||
:provinceOptions="provinceOptions"
|
||||
v-model:statusEdit="statusEdit"
|
||||
:notiNoEdit="notiNoEdit"
|
||||
:step="step"
|
||||
/>
|
||||
<Address v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
|
||||
<Family
|
||||
:prefixOptions="prefixOptions"
|
||||
v-model:statusEdit="statusEdit"
|
||||
:notiNoEdit="notiNoEdit"
|
||||
:step="step"
|
||||
/>
|
||||
<Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
|
||||
<NotifyError
|
||||
:modalError="modalNoEdit"
|
||||
:modalErrorTittle="modalNoEditTittle"
|
||||
:modalErrorDetail="modalNoEditDetail"
|
||||
:close="closeModalError"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
|
||||
import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
|
||||
import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
|
||||
import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
|
||||
import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
|
||||
import NotifyError from '@/components/NotifyError.vue'
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
||||
const props = defineProps({
|
||||
loader: {
|
||||
//หน้า main มีการอัพเดทค่าให้ refresh data
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const loader = ref<boolean>(true)
|
||||
const statusEdit = ref<boolean>(false)
|
||||
const modalNoEdit = ref<boolean>(false)
|
||||
// const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
|
||||
// const modalNoEditDetail = ref<string>(
|
||||
// 'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
|
||||
// )
|
||||
const modalNoEditTittle = ref<string>('ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?')
|
||||
const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
|
||||
|
||||
const prefixOptions = ref<DataOption[]>([])
|
||||
const bloodOptions = ref<DataOption[]>([])
|
||||
const genderOptions = ref<DataOption[]>([])
|
||||
const statusOptions = ref<DataOption[]>([])
|
||||
const religionOptions = ref<DataOption[]>([])
|
||||
const provinceOptions = ref<DataOption[]>([])
|
||||
|
||||
const emit = defineEmits(['update:loader', 'update:statusEdit'])
|
||||
|
||||
watch(statusEdit, (count: boolean, prevCount: boolean) => {
|
||||
emit('update:statusEdit', count)
|
||||
})
|
||||
|
||||
const closeModalError = () => {
|
||||
modalNoEdit.value = false
|
||||
}
|
||||
|
||||
const notiNoEdit = () => {
|
||||
modalNoEdit.value = true
|
||||
}
|
||||
</script>
|
||||
421
src/modules/01_exam/components/Form/Profile/Address.vue
Normal file
421
src/modules/01_exam/components/Form/Profile/Address.vue
Normal file
|
|
@ -0,0 +1,421 @@
|
|||
<!-- 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"
|
||||
/> -->
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลที่อยู่"
|
||||
icon="mdi-map-marker"
|
||||
:save="saveData"
|
||||
:history="true"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
:changeBtn="changeBtn"
|
||||
/>
|
||||
<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, '1')"
|
||||
/>
|
||||
</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, '1')"
|
||||
/>
|
||||
</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, '1')"
|
||||
/>
|
||||
</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="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="`${'รหัสไปรษณีย์'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
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 mixin = useCounterMixin()
|
||||
const { date2Thai, calAge } = mixin
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
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 props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
onMounted(() => {
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
// fetchProvince()
|
||||
// fetchDistrict(addressData.value.provinceId, '1')
|
||||
// fetchDistrict(addressData.value.provinceIdC, '2')
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false
|
||||
props.notiNoEdit()
|
||||
} else {
|
||||
emit('update:statusEdit', true)
|
||||
}
|
||||
} else {
|
||||
emit('update:statusEdit', false)
|
||||
}
|
||||
}
|
||||
|
||||
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, name)
|
||||
}
|
||||
|
||||
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, name)
|
||||
}
|
||||
|
||||
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 () => {
|
||||
// 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, position: 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() })
|
||||
})
|
||||
if (position == '1') {
|
||||
districtOptions.value = option
|
||||
} else {
|
||||
districtCOptions.value = option
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// loader.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const fetchSubDistrict = async (id: string, position: 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()
|
||||
})
|
||||
})
|
||||
if (position == '1') {
|
||||
subdistrictOptions.value = option
|
||||
} else {
|
||||
subdistrictCOptions.value = option
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// loader.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
361
src/modules/01_exam/components/Form/Profile/Family.vue
Normal file
361
src/modules/01_exam/components/Form/Profile/Family.vue
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
<!-- card ข้อมูลครอบครัว -->
|
||||
<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"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
:changeBtn="changeBtn"
|
||||
/>
|
||||
<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-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 { onMounted, ref, watch } 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 addData = ref<boolean>(true)
|
||||
const myform = ref<any>()
|
||||
const familyData = ref<Family>(defaultFamily)
|
||||
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
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
onMounted(() => {
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false
|
||||
props.notiNoEdit()
|
||||
} else {
|
||||
emit('update:statusEdit', true)
|
||||
}
|
||||
} else {
|
||||
emit('update:statusEdit', false)
|
||||
}
|
||||
}
|
||||
|
||||
const selectRadio = (e: boolean, i: any) => {
|
||||
if (!e) {
|
||||
familyData.value.prefixIdC = ''
|
||||
familyData.value.firstnameC = ''
|
||||
familyData.value.lastnameC = ''
|
||||
familyData.value.occupationC = ''
|
||||
}
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
494
src/modules/01_exam/components/Form/Profile/Information.vue
Normal file
494
src/modules/01_exam/components/Form/Profile/Information.vue
Normal file
|
|
@ -0,0 +1,494 @@
|
|||
<!-- 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"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
:changeBtn="changeBtn"
|
||||
/>
|
||||
<q-form ref="myform" class="col-12 row">
|
||||
<div class="row col-10 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-select
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
: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
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
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">
|
||||
<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
|
||||
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-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="informaData.knowledge"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ความรู้ความสามารถพิเศษ'}`]"
|
||||
label="ความรู้ความสามารถพิเศษ"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-2 justify-center q-pt-md">
|
||||
<div class="containerimage row justify-center">
|
||||
<q-file
|
||||
borderless
|
||||
v-model="fileData"
|
||||
stack-label
|
||||
:readonly="!edit"
|
||||
@update:model-value="pickFile"
|
||||
>
|
||||
<q-img src="@/assets/avatar_user.jpg" class="col-12">
|
||||
<div class="overlay" v-if="edit">
|
||||
<q-icon name="mdi-camera" />
|
||||
<br />อัปเดต
|
||||
</div>
|
||||
</q-img>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-12 text-center" v-show="disabledPic">
|
||||
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
|
||||
<q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } 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'
|
||||
import type { file } from '@babel/types'
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, calAge } = mixin
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const informaData = ref<Information>(defaultInformation)
|
||||
const provinceOptions = ref<DataOption[]>([])
|
||||
const myform = ref<any>()
|
||||
const imageUrl = ref<string | null>(null)
|
||||
const disabledPic = ref<boolean>(false)
|
||||
const fileData = ref<File | null>()
|
||||
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
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
onMounted(() => {
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
// fetchProvince()
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false
|
||||
props.notiNoEdit()
|
||||
} else {
|
||||
emit('update:statusEdit', true)
|
||||
}
|
||||
} else {
|
||||
emit('update:statusEdit', false)
|
||||
}
|
||||
}
|
||||
|
||||
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 savePic = () => {
|
||||
disabledPic.value = false
|
||||
}
|
||||
|
||||
const onFilePicked = () => {}
|
||||
|
||||
const pickFile = () => {
|
||||
disabledPic.value = true
|
||||
}
|
||||
|
||||
const cancelData = () => {
|
||||
fileData.value = null
|
||||
disabledPic.value = false
|
||||
}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containerimage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.q-img {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 170px;
|
||||
padding: 1%;
|
||||
border-radius: 3px;
|
||||
border: solid 2px rgba(168, 168, 168, 0.055) !important;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: rgb(0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #f1f1f1;
|
||||
transition: 0.5s ease;
|
||||
width: 160px;
|
||||
height: 70px;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 5% 0 5% 0;
|
||||
}
|
||||
|
||||
.containerimage:hover .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
297
src/modules/01_exam/components/Form/Profile/Occupation.vue
Normal file
297
src/modules/01_exam/components/Form/Profile/Occupation.vue
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
<!-- 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"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
:changeBtn="changeBtn"
|
||||
/>
|
||||
<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="md"
|
||||
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="md"
|
||||
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="md"
|
||||
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="md"
|
||||
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="md"
|
||||
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="md"
|
||||
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, watch } 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 addData = ref<boolean>(true)
|
||||
const occupationData = ref<Occupation>(defaultOccupation)
|
||||
const myform = ref<any>()
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
onMounted(() => {
|
||||
if (props.step !== 2) {
|
||||
addData.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false
|
||||
props.notiNoEdit()
|
||||
} else {
|
||||
emit('update:statusEdit', true)
|
||||
}
|
||||
} else {
|
||||
emit('update:statusEdit', false)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue