hrms-bangkok/hrms-recruit
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

consend form

Browse source
This commit is contained in:
Kittapath 2023-03-22 00:25:55 +07:00
parent 6fe6aed921
commit 380eb0d10b
17 changed files with 482 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/NotifyError.vue
View file

@ -1,5 +1,5 @@
<template>
<q-dialog :model-value="modalError" persistent @update:model-value="updateClose">
<q-dialog :model-value="modal" persistent @update:model-value="updateClose">
<q-card class="q-pa-sm">
<q-card-section class="row items-center">
<div class="q-pr-md">
@ -12,9 +12,9 @@
/>
</div>
<div class="col text-dark">
<span class="text-bold text-red">{{ modalErrorTittle }}</span>
<span class="text-bold text-red">{{ tittle }}</span>
<br />
<span>{{ modalErrorDetail }}</span>
<span>{{ detail }}</span>
</div>
</q-card-section>
@ -28,25 +28,21 @@
import { ref, useAttrs } from 'vue'
const props = defineProps({
modalError: Boolean,
modalErrorTittle: String,
modalErrorDetail: String,
modal: Boolean,
tittle: String,
detail: String,
close: {
type: Function,
default: () => console.log('not function')
}
})
const emit = defineEmits([
'update:modalError',
'update:modalErrorTittle',
'update:modalErrorDetail'
])
const emit = defineEmits(['update:modal', 'update:tittle', 'update:detail'])
const updateClose = () => {
emit('update:modalError', false)
emit('update:modalErrorTittle', '')
emit('update:modalErrorDetail', '')
emit('update:modal', false)
emit('update:tittle', '')
emit('update:detail', '')
props.close()
}
</script>

154
src/components/TableView.vue
View file

@ -44,9 +44,7 @@
flat
round
:disabled="!(editvisible == true && updateData == true)"
:color="
!(editvisible == true && updateData == true) ? 'grey-7' : 'public'
"
:color="!(editvisible == true && updateData == true) ? 'grey-7' : 'public'"
@click="checkSave"
v-if="saveNoDraft == false"
icon="mdi-content-save-outline"
@ -72,9 +70,7 @@
flat
round
:disabled="!(publicData == false || updateData == true)"
:color="
!(publicData == false || updateData == true) ? 'grey-7' : 'public'
"
:color="!(publicData == false || updateData == true) ? 'grey-7' : 'public'"
@click="publishModal"
icon="mdi-cloud-upload-outline"
v-if="publicNoBtn == false"
@ -87,9 +83,7 @@
style="display: flex"
v-if="publicData == false && publicNoBtn == false"
>
<div class="text-public text-body2 text-weight-medium q-px-sm">
ข้อมูลยังไม่เผยแพร่
</div>
<div class="text-public text-body2 text-weight-medium q-px-sm">ข้อมูลยังไม่เผยแพร่</div>
</div>
</div>
@ -219,9 +213,7 @@
</q-th>
<q-th
auto-width
v-if="
editvisible == true || nextPageVisible == true || history == true
"
v-if="editvisible == true || nextPageVisible == true || history == true"
/>
</q-tr>
</template>
@ -236,13 +228,7 @@
<q-card class="q-pa-sm">
<q-card-section class="row">
<div class="q-pr-md">
<q-avatar
icon="public"
size="lg"
font-size="25px"
color="blue-1"
text-color="public"
/>
<q-avatar icon="public" size="lg" font-size="25px" color="blue-1" text-color="public" />
</div>
<div class="col text-dark">
<span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
@ -253,12 +239,7 @@
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
<q-btn
label="เผยแพร่"
color="public"
@click="publish()"
v-close-popup
/>
<q-btn label="เผยแพร่" color="public" @click="publish()" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
@ -291,162 +272,157 @@
</q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { ref, useAttrs } from 'vue'
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const attrs = ref<any>(useAttrs())
const table = ref<any>(null)
const filterRef = ref<any>(null)
const modalPublish = ref<boolean>(false)
const modalDelete = ref<boolean>(false)
const props = defineProps({
inputfilter: String,
inputvisible: Array,
editvisible: Boolean,
boss: {
type: Boolean,
defualt: false,
defualt: false
},
saveNoDraft: {
type: Boolean,
defualt: false,
defualt: false
},
history: {
type: Boolean,
defualt: false,
defualt: false
},
paging: {
type: Boolean,
defualt: false,
defualt: false
},
nornmalData: {
type: Boolean,
defualt: false,
defualt: false
},
nextPageVisible: {
type: Boolean,
defualt: false,
defualt: false
},
publicData: {
type: Boolean,
defualt: true,
required: false,
required: false
},
updateData: {
type: Boolean,
defualt: true,
required: false,
required: false
},
publicNoBtn: {
type: Boolean,
defualt: false,
defualt: false
},
add: {
type: Function,
default: () => console.log("not function"),
default: () => console.log('not function')
},
edit: {
type: Function,
default: () => console.log("not function"),
default: () => console.log('not function')
},
save: {
type: Function,
default: () => console.log("not function"),
default: () => console.log('not function')
},
deleted: {
type: Function,
default: () => console.log("not function"),
default: () => console.log('not function')
},
cancel: {
type: Function,
default: () => console.log("not function"),
default: () => console.log('not function')
},
publish: {
type: Function,
default: () => console.log("not function"),
default: () => console.log('not function')
},
validate: {
type: Function,
default: () => console.log("not function"),
},
});
default: () => console.log('not function')
}
})
const initialPagination = ref<any>({
// descending: false,
rowsPerPage: props.paging == true ? 25 : 0,
});
rowsPerPage: props.paging == true ? 25 : 0
})
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
const updateEdit = (value: any) => {
emit("update:editvisible", value);
};
emit('update:editvisible', value)
}
const updateInput = (value: any) => {
emit("update:inputfilter", value);
};
emit('update:inputfilter', value)
}
const updateVisible = (value: any) => {
emit("update:inputvisible", value);
};
emit('update:inputvisible', value)
}
const paginationLabel = (start: string, end: string, total: string) => {
if (props.paging == true)
return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
else return start + "-" + end + " ใน " + total;
};
if (props.paging == true) return ' ' + start + ' ใน ' + end + ' จากจำนวน ' + total + ' รายการ'
else return start + '-' + end + ' ใน ' + total
}
const checkSave = () => {
props.validate();
props.save();
props.validate()
props.save()
// if (myForm.value !== null) {
// myForm.value.validate().then((success) => {
// if (success) {
// }
// });
// }
};
}
const publishModal = () => {
props.validate();
const filter = attrs.value.rows.filter((r: any) => r.name == "");
props.validate()
const filter = attrs.value.rows.filter((r: any) => r.name == '')
if (filter.length == 0 || attrs.value.rows.length == 0) {
modalPublish.value = true;
modalPublish.value = true
}
};
}
const DeleteModal = () => {
modalDelete.value = true;
};
modalDelete.value = true
}
const edit = async () => {
updateEdit(!props.editvisible);
props.edit();
};
updateEdit(!props.editvisible)
props.edit()
}
const add = async () => {
// if (myForm.value !== null) {
// myForm.value.validate();
// }
props.validate();
props.add();
await table.value.lastPage();
await table.value.scrollTo(attrs.value.rows.length - 1);
};
props.validate()
props.add()
await table.value.lastPage()
await table.value.scrollTo(attrs.value.rows.length - 1)
}
const deleted = async () => {
if (props.publicNoBtn === false) {
updateEdit(false);
updateEdit(false)
}
props.deleted();
};
props.deleted()
}
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
};
emit('update:inputfilter', '')
filterRef.value.focus()
}
</script>
<style lang="scss">
.icon-color {

68
src/modules/01_exam/components/Conference.vue Normal file
View file

@ -0,0 +1,68 @@
<template>
<q-card-section class="row items-center col-12 q-py-sm">
<div class="row col-11">
<div class="text-bold">ข้อกำหนดและเงื่อนไข</div>
</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<div class="text-center">
<div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm">
ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล
</div>
<q-card class="col-12 q-pa-md" flat>
<q-card-section class="text-black text-left"
>ข้าพเจ้าเข้าใจดีว่า ผู้ให้บริการ จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของข้าพเจ้า
เพื่อวัตถุประสงค์ในการให้บริการตามสัญญานี้ การวิเคราะห์ข้อมูลเพื่อวางแผนทางการตลาด
การนำเสนอสินค้าและบริการอื่นๆ ของผู้ให้บริการแก่ข้าพเจ้า รวมถึงวัตถุประสงค์อื่นๆ
ตามที่ผู้ให้บริการเห็นสมควร <br /><br />
ข้าพเจ้ารับทราบดีกว่า หากข้าพเจ้าไม่ตกลงยอมรับข้อกำหนดและเงื่อนไขนี้
ผู้ให้บริการสงวนสิทธิไม่ให้บริการแก่ข้าพเจ้าได้
</q-card-section>
</q-card>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ตกลง" color="primary" @click="ok" />
</q-card-actions>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const props = defineProps({
close: {
type: Function,
default: () => console.log('not function')
},
ok: {
type: Function,
default: () => console.log('not function')
}
})
const ok = async () => {
props.ok()
}
const close = async () => {
props.close()
}
</script>
<style>
.mycard {
border-radius: 30px 30px 0px 0px;
}
.mycardxl {
border-radius: 30px;
}
</style>

2
src/modules/01_exam/components/ExamFinished.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div class="q-pa-md row items-center justify-center">
<q-card class="my-card" style="max-width: 600px; width: 100%" bordered>
<q-card style="max-width: 40%; width: 100%" bordered>
<q-card-actions class="q-pa-md" :class="getClass(status)">
<div v-if="status == false" class="text-black text-bold">
เจ้าหน้าที่กำลังตรวจสถานที่สอบ

63
src/modules/01_exam/components/ExamForm.vue
View file

@ -1,7 +1,7 @@
<!-- step กรอกข้อมูล -->
<template>
<div>
<q-splitter v-model="splitterModel" style="height: 500px">
<q-splitter v-model="splitterModel" style="height: 450px">
<template v-slot:before>
<q-tab-panels
v-model="tab"
@ -80,19 +80,6 @@
/>
</div>
</div>
<NotifyConfirm
:modal="modalConfirm"
:tittle="modalConfirmTittle"
:detail="modalConfirmDetail"
:ok="applyCandidate"
:cancel="cancelModalConfirm"
/>
<NotifyError
:modal="modalNoEdit"
:Tittle="modalNoEditTittle"
:Detail="modalNoEditDetail"
:close="closeModalError"
/>
</template>
<script setup lang="ts">
@ -101,8 +88,8 @@ import Profile from '@/modules/01_exam/components/Form/Profile.vue'
import Education from '@/modules/01_exam/components/Form/Education.vue'
import Career from '@/modules/01_exam/components/Form/Career.vue'
import Document from '@/modules/01_exam/components/Form/Document.vue'
import NotifyError from '@/components/NotifyError.vue'
import NotifyConfirm from '@/components/NotifyConfirm.vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
const props = defineProps({
fetchStep: {
@ -115,18 +102,14 @@ const props = defineProps({
}
})
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { modalConfirm, modalError, success } = mixin
const tab = ref<string>('profile')
const splitterModel = ref<number>(90)
const tabRaw = ref<string>('profile')
const loader = ref<boolean>(false)
const statusEdit = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)
const modalConfirm = ref<boolean>(false)
const modalConfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
const modalConfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
const modalNoEdit = ref<boolean>(false)
const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
onMounted(async () => {
if (props.step > 2) {
@ -136,23 +119,20 @@ onMounted(async () => {
const okModalConfirm = () => {
if (statusEdit.value == true) {
modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
modalNoEdit.value = true
modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
} else {
modalConfirm.value = true
modalConfirm(
$q,
'ยืนยันการสมัครสอบ?',
'เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้',
saveForm
)
}
}
const cancelModalConfirm = () => {
modalConfirm.value = false
}
const closeModalError = () => {
modalNoEdit.value = false
}
const applyCandidate = () => {
const saveForm = () => {
//saveform
success($q, 'บันทึกข้อมูลสำเร็จ')
props.fetchStep()
}
@ -186,17 +166,6 @@ const clickNext = (val: string) => {
return (tab.value = 'profile')
}
}
const changeTab = () => {
if (statusEdit.value == true) {
modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
tab.value = tabRaw.value
modalNoEdit.value = true
} else {
tabRaw.value = tab.value
}
}
</script>
<style lang="scss" scoped></style>

80
src/modules/01_exam/components/ExamPayment.vue
View file

@ -1,70 +1,32 @@
<template>
<div>
<q-card class="my-card q-mb-sm" bordered>
<q-card-actions class="q-pa-md text-left row justify-center" :class="getClass(status)">
<div class="text-bold col-12" :class="getFontColor(status)">
{{ message(status) }}
</div>
<div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
<li>{{ rejectMessage }}</li>
</div>
<!-- <q-space /> -->
</q-card-actions>
</q-card>
</div>
<div class="d-flex justify-content-center align-items-center row col-12">
<!-- <div class="text-center q-pb-lg">
<q-badge
:outline="badgeOutline"
:color="badgeColor"
:label="badgeLabel"
class="q-pa-nond text-center"
style="font-size: 16px"
/>
</div> -->
<!-- <div class="row q-pa-nond text-center col-6"> -->
<!-- <q-img :src="img" fit="contain" style="max-height: 300px" class="col-6">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img> -->
<q-file
borderless
v-model="fileData"
stack-label
@update:model-value="uploadImg"
class="col-12"
>
<!-- <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-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</q-file>
<!-- <q-uploader
ref="uploader"
type="file"
:factory="uploadImg"
class="col-6"
label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
flat
color="blue"
bordered
/> -->
<!-- </div> -->
<div class="col-12">
<div class="row justify-center q-pa-md">
<div class="col-4">
<q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
<div class="text-bold col-12" :class="getFontColor(status)">
{{ message(status) }}
</div>
<div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
<li>{{ rejectMessage }}</li>
</div>
</q-card-actions>
<q-file borderless v-model="fileData" stack-label @update:model-value="uploadImg">
<q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</q-file>
</div>
</div>
<div class="q-pa-md text-center col-12">
<q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
</div>
<div class="text-black text-center q-pb-lg col-12">
***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
</div>
<q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
<q-btn color="positive" @click="setStatus('success')">Su</q-btn>
<q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
</div>
<q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
<q-btn color="positive" @click="setStatus('success')">Su</q-btn>
<q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
</template>
<script setup lang="ts">

42
src/modules/01_exam/components/Form/Career.vue
View file

@ -177,10 +177,14 @@
</q-form>
</q-card>
</q-dialog>
<q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useExamDataStore } from '@/modules/01_exam/store'
import Table from '@/components/Table.vue'
import DialogHeader from '@/components/DialogHeader.vue'
import DialogFooter from '@/components/DialogFooter.vue'
@ -194,6 +198,8 @@ import type {
import type { ResponseObject } from '@/modules/01_exam/interface/response/Career'
import http from '@/plugins/http'
import config from '@/app.config'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
const props = defineProps({
loader: {
@ -213,7 +219,7 @@ const props = defineProps({
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { dateThaiRange, notifyDelete, notifyConfirm } = mixin
const { dateThaiRange, modalDelete, modalConfirm } = mixin
const store = useExamDataStore()
const { examData, changeExamColumns } = store
const loader = ref<boolean>(false)
@ -234,6 +240,7 @@ const next = ref<boolean>() //แสดงปุ่มดูข้อมูล
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const statusCode = ref<number>()
const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
const modalConsend = ref<boolean>(false)
const emit = defineEmits(['update:loader', 'update:statusEdit'])
@ -397,7 +404,7 @@ const clickAdd = () => {
const checkDelete = (row: RequestItemsObject) => {
rawItem.value = row
notifyDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
}
/**
@ -414,10 +421,14 @@ function clickDeleteRow() {
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData()
if (store.consend == true) {
if (modalEdit.value) {
await editData()
} else {
await saveData()
}
} else {
await saveData()
modalConsend.value = true
}
}
})
@ -427,8 +438,8 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
edit.value = false
modal.value = false
// loader.value = true;
// await http
// .post(config.API.xxxxxxxxxxxxxxx, {
@ -453,9 +464,8 @@ const saveData = async () => {
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
// edit.value = false
editRow.value = false
edit.value = false
modal.value = false
// loader.value = true;
// await http
// .post(config.API.xxxxxxxxxxxxxxx(id.value), {
@ -478,7 +488,7 @@ const editData = async () => {
const checkClose = async () => {
if (editRow.value == true) {
notifyConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
} else {
await clickClose()
}
@ -532,6 +542,16 @@ const addRow = () => {
reason.value = ''
}
const consenClose = () => {
modalConsend.value = false
}
const consendOk = () => {
modalConsend.value = false
store.consend = true
clickSave()
}
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/

128
src/modules/01_exam/components/Form/Document.vue
View file

@ -1,66 +1,78 @@
<!-- card อัปโหลดเอกสาร -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
icon="mdi-file-document"
:addData="true"
:editOnly="true"
:cancel="cancelData"
:editData="step == 2"
/>
<div class="row col-12 q-gutter-sm q-pt-sm">
<div v-if="edit" class="col-12 q-ma-none">
<q-input
class="q-my-sm"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
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>
<div class="col-12">
<HeaderTop
v-model:edit="edit"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
icon="mdi-file-document"
:addData="true"
:editOnly="true"
:cancel="cancelData"
:editData="step == 2"
/>
</div>
<q-separator class="q-mt-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>
<div class="col-12">
<div v-if="edit" class="row justify-center q-pa-md">
<div class="col-4">
<q-input
class="q-my-sm"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
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>
</div>
<q-separator class="q-mt-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="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
>
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</q-card>
</template>
<script setup lang="ts">

42
src/modules/01_exam/components/Form/Education.vue
View file

@ -178,10 +178,14 @@
</q-form>
</q-card>
</q-dialog>
<q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useExamDataStore } from '@/modules/01_exam/store'
import Table from '@/components/Table.vue'
import DialogHeader from '@/components/DialogHeader.vue'
import DialogFooter from '@/components/DialogFooter.vue'
@ -196,6 +200,8 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Educat
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import http from '@/plugins/http'
import config from '@/app.config'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
const props = defineProps({
loader: {
@ -215,7 +221,7 @@ const props = defineProps({
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { dateThaiRange, notifyDelete, notifyConfirm } = mixin
const { dateThaiRange, modalDelete, modalConfirm } = mixin
const store = useExamDataStore()
const { examData, changeExamColumns } = store
const loader = ref<boolean>(false)
@ -238,6 +244,7 @@ const next = ref<boolean>() //แสดงปุ่มดูข้อมูล
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const statusCode = ref<number>()
const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
const modalConsend = ref<boolean>(false)
const emit = defineEmits(['update:loader', 'update:statusEdit'])
@ -424,7 +431,7 @@ const clickAdd = () => {
const checkDelete = (row: RequestItemsObject) => {
rawItem.value = row
notifyDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
}
/**
@ -441,10 +448,14 @@ function clickDeleteRow() {
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData()
if (store.consend == true) {
if (modalEdit.value) {
await editData()
} else {
await saveData()
}
} else {
await saveData()
modalConsend.value = true
}
}
})
@ -454,8 +465,8 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
edit.value = false
modal.value = false
// loader.value = true;
// await http
// .post(config.API.xxxxxxxxxxxxxxx, {
@ -480,9 +491,8 @@ const saveData = async () => {
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
// edit.value = false
editRow.value = false
edit.value = false
modal.value = false
// loader.value = true;
// await http
// .post(config.API.xxxxxxxxxxxxxxx(id.value), {
@ -505,7 +515,7 @@ const editData = async () => {
const checkClose = async () => {
if (editRow.value == true) {
notifyConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
} else {
await clickClose()
}
@ -561,6 +571,16 @@ const addRow = () => {
duration.value = [new Date(), new Date()]
}
const consenClose = () => {
modalConsend.value = false
}
const consendOk = () => {
modalConsend.value = false
store.consend = true
clickSave()
}
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/

24
src/modules/01_exam/components/Form/Profile.vue
View file

@ -19,12 +19,6 @@
:step="step"
/>
<Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
<NotifyError
:modal="modalNoEdit"
:tittle="modalNoEditTittle"
:detail="modalNoEditDetail"
:close="closeModalError"
/>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
@ -33,7 +27,6 @@ import Information from '@/modules/01_exam/components/Form/Profile/Information.v
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'
import { useQuasar } from 'quasar'
@ -55,18 +48,11 @@ const props = defineProps({
}
})
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { notifyConfirm } = mixin
const { modalError } = mixin
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[]>([])
@ -80,11 +66,7 @@ watch(statusEdit, (count: boolean, prevCount: boolean) => {
emit('update:statusEdit', count)
})
const closeModalError = () => {
modalNoEdit.value = false
}
const notiNoEdit = () => {
modalNoEdit.value = true
modalError($q, 'ไม่สามารถไม่สามารถแก้ไขข้อมูลได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
}
</script>

35
src/modules/01_exam/components/Form/Profile/Address.vue
View file

@ -220,6 +220,11 @@
</div>
</q-form>
</q-card>
<q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
@ -230,8 +235,11 @@ 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'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
const mixin = useCounterMixin()
const store = useExamDataStore()
const { date2Thai, calAge } = mixin
const edit = ref<boolean>(false)
@ -239,6 +247,7 @@ const addressData = ref<Address>(defaultAddress)
const myform = ref<any>()
const codep = ref<string>('')
const codec = ref<string>('')
const modalConsend = ref<boolean>(false)
const provinceOptions = ref<DataOption[]>([])
const districtOptions = ref<DataOption[]>([])
@ -270,11 +279,17 @@ onMounted(() => {
})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
if (store.consend == true) {
edit.value = false
emit('update:statusEdit', false)
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
} else {
modalConsend.value = true
}
}
const changeBtn = async () => {
@ -402,6 +417,16 @@ const fetchSubDistrict = async (id: string, position: string) => {
// })
}
const consenClose = () => {
modalConsend.value = false
}
const consendOk = () => {
modalConsend.value = false
store.consend = true
saveData()
}
const cancelData = () => {}
const getClass = (val: boolean) => {

35
src/modules/01_exam/components/Form/Profile/Family.vue
View file

@ -272,6 +272,11 @@
</div>
</q-form>
</q-card>
<q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
@ -280,14 +285,18 @@ 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'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
const mixin = useCounterMixin()
const store = useExamDataStore()
const { date2Thai, calAge } = mixin
const edit = ref<boolean>(false)
const myform = ref<any>()
const familyData = ref<Family>(defaultFamily)
const statusOptions = ref<DataOption[]>([])
const modalConsend = ref<boolean>(false)
// const prefixOptions = ref<any>([
// { id: "1", name: "นาย" },
@ -319,11 +328,17 @@ const emit = defineEmits(['update:statusEdit'])
onMounted(() => {})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
if (store.consend == true) {
edit.value = false
emit('update:statusEdit', false)
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
} else {
modalConsend.value = true
}
}
const changeBtn = async () => {
@ -348,6 +363,16 @@ const selectRadio = (e: boolean, i: any) => {
}
}
const consenClose = () => {
modalConsend.value = false
}
const consendOk = () => {
modalConsend.value = false
store.consend = true
saveData()
}
const cancelData = () => {}
const getClass = (val: boolean) => {

37
src/modules/01_exam/components/Form/Profile/Information.vue
View file

@ -84,6 +84,7 @@
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
@ -218,6 +219,7 @@
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
@ -325,6 +327,11 @@
</div>
</q-form>
</q-card>
<q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
@ -336,8 +343,11 @@ import HeaderTop from '@/components/top.vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { file } from '@babel/types'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
const mixin = useCounterMixin()
const store = useExamDataStore()
const { date2Thai, calAge } = mixin
const edit = ref<boolean>(false)
@ -346,6 +356,7 @@ const provinceOptions = ref<DataOption[]>([])
const myform = ref<any>()
const imageUrl = ref<string | null>(null)
const disabledPic = ref<boolean>(false)
const modalConsend = ref<boolean>(false)
const fileData = ref<File | null>()
const props = defineProps({
prefixOptions: {
@ -393,11 +404,17 @@ onMounted(() => {
})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
if (store.consend == true) {
edit.value = false
emit('update:statusEdit', false)
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
} else {
modalConsend.value = true
}
}
const changeBtn = async () => {
@ -442,6 +459,16 @@ const pickFile = () => {
disabledPic.value = true
}
const consenClose = () => {
modalConsend.value = false
}
const consendOk = () => {
modalConsend.value = false
store.consend = true
saveData()
}
const cancelData = () => {
fileData.value = null
disabledPic.value = false

36
src/modules/01_exam/components/Form/Profile/Occupation.vue
View file

@ -230,6 +230,11 @@
</div>
</q-form>
</q-card>
<q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
@ -239,10 +244,15 @@ 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'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useExamDataStore } from '@/modules/01_exam/store'
const store = useExamDataStore()
const edit = ref<boolean>(false)
const occupationData = ref<Occupation>(defaultOccupation)
const myform = ref<any>()
const modalConsend = ref<boolean>(false)
const props = defineProps({
statusEdit: {
@ -264,11 +274,17 @@ const emit = defineEmits(['update:statusEdit'])
onMounted(() => {})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
if (store.consend == true) {
edit.value = false
emit('update:statusEdit', false)
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
} else {
modalConsend.value = true
}
}
const changeBtn = async () => {
@ -284,6 +300,16 @@ const changeBtn = async () => {
}
}
const consenClose = () => {
modalConsend.value = false
}
const consendOk = () => {
modalConsend.value = false
store.consend = true
saveData()
}
const cancelData = () => {}
const getClass = (val: boolean) => {

5
src/modules/01_exam/store.ts
View file

@ -14,6 +14,8 @@ export const useExamDataStore = defineStore('exam', () => {
career: { columns: [] }
})
const consend = ref<boolean>(false)
const changeExamColumns = (system: String, val: String[]) => {
if (system == 'main') examData.value.main.columns = val
if (system == 'education') examData.value.education.columns = val
@ -27,6 +29,7 @@ export const useExamDataStore = defineStore('exam', () => {
return {
examData,
changeExamColumns
changeExamColumns,
consend
}
})

3
src/modules/01_exam/views/ExamDetail.vue
View file

@ -13,7 +13,6 @@
class="col-2"
v-model="step"
ref="stepper"
alternative-labels
header-nav
animated
done-color="positive"
@ -56,7 +55,7 @@
:disable="stepRaw < 4"
:name="4"
title="สำเร็จ"
:icon="stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-pencil'"
>
<ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
</q-step>

50
src/stores/mixin.ts
View file

@ -230,15 +230,18 @@ export const useCounterMixin = defineStore('mixin', () => {
}
}
function notifyDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
function modalDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
q.dialog({
title: `<span class="text-red">${title}</span>`,
message: `<span class="text-red">${message}</span>`,
cancel: true,
ok: {
push: true,
color: 'negative'
message: `<span class="text-black">${message}</span>`,
cancel: {
flat: true,
color: 'grey-14'
},
ok: {
color: 'red-6'
},
focus: 'none',
persistent: true,
html: true
})
@ -251,15 +254,18 @@ export const useCounterMixin = defineStore('mixin', () => {
.onDismiss(() => {})
}
function notifyConfirm(q: any, title: string, message: string, ok: Function, cancel?: Function) {
function modalConfirm(q: any, title: string, message: string, ok: Function, cancel?: Function) {
q.dialog({
title: `<span class="text-primary">${title}</span>`,
message: `<span class="text-primary">${message}</span>`,
cancel: true,
message: `<span class="text-black">${message}</span>`,
cancel: {
flat: true,
color: 'grey'
},
ok: {
push: true,
color: 'primary'
},
focus: 'none',
persistent: true,
html: true
})
@ -272,6 +278,25 @@ export const useCounterMixin = defineStore('mixin', () => {
.onDismiss(() => {})
}
function modalError(q: any, title: string, message: string, ok?: Function) {
q.dialog({
title: `<span class="text-primary">${title}</span>`,
message: `<span class="text-black">${message}</span>`,
ok: {
push: true,
color: 'primary'
},
focus: 'none',
persistent: true,
html: true
})
.onOk(() => {
if (ok != undefined) ok()
})
.onCancel(() => {})
.onDismiss(() => {})
}
const dateText = (val: Date) => {
if (val != null) {
return date2Thai(val)
@ -387,7 +412,8 @@ export const useCounterMixin = defineStore('mixin', () => {
textToFax,
dateThaiRange,
monthThaiRange,
notifyDelete,
notifyConfirm
modalDelete,
modalConfirm,
modalError
}
})