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

เพิ่ม comment ระบบลาออกและขอโอน

Browse source
This commit is contained in:
AnandaTon 2023-11-13 17:05:29 +07:00
parent 6621dfd7f0
commit 3f5687f0aa
15 changed files with 1529 additions and 1889 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/modules/02_transfer/views/AddTransfer.vue
View file

@ -12,16 +12,21 @@ const $q = useQuasar()
const mixin = useCounterMixin()
const myform = ref<QForm | null>(null)
const { fails, success, messageError, showLoader, hideLoader } = mixin
const fileDocDataUpload = ref<File[]>([])
/**
* ตัวแปรที่ใช้งาน
*/
const route = useRoute()
const files = ref<any>()
const tranferOrg = ref("")
const noteReason = ref("")
const id = ref<string>("")
const nameFile = ref<string>("")
const routeName = router.currentRoute.value.name
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(() => {
if (route.params.id !== undefined) {
id.value = route.params.id.toString()
@ -29,10 +34,6 @@ onMounted(() => {
}
})
const filesNull = () => {
files.value = null
}
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
@ -65,6 +66,9 @@ const saveTransfer = () => {
.onDismiss(() => {})
}
/**
* ฟังก์ชั่นสร้างขอโอน
*/
const createTransfer = async () => {
const formData = new FormData()
@ -86,6 +90,10 @@ const createTransfer = async () => {
})
}
/**
* ฟังก์ชั่นเรียกข้อมูลจาก Api
* @param id ไอดีของข้อมูล
*/
const fecthDataTransfer = async (id: string) => {
showLoader()
await http
@ -104,6 +112,14 @@ const fecthDataTransfer = async (id: string) => {
})
}
/**
* ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
*/
const fileDocDataUpload = ref<File[]>([])
const filesNull = () => {
files.value = null
}
//อัพโหลดไฟล์
const fileUploadDoc = async (file: any) => {
fileDocDataUpload.value.push(file)
nameFile.value = file[0].name

23
src/modules/02_transfer/views/Main.vue
View file

@ -7,6 +7,7 @@ import { useCounterMixin } from "@/stores/mixin"
import { useTransferDataStore } from "@/modules/02_transfer/store"
import http from "@/plugins/http"
import config from "@/app.config"
import Table from "@/components/Table.vue"
const transferData = useTransferDataStore()
const { statusText } = transferData
@ -14,15 +15,20 @@ const router = useRouter()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, messageError, showLoader, hideLoader } = mixin
import Table from "@/components/Table.vue"
const filter = ref<string>("")
const rows = ref<any>([])
/**
* ตั้งค่า pagination
*/
const initialPagination = ref({
rowsPerPage: 0,
})
const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "statustext"])
/**
* เพิ่มหัวข้อตาราง
*/
const filter = ref<string>("")
const rows = ref<any>([])
const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "statustext"])
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -98,6 +104,9 @@ const columns = ref<QTableProps["columns"]>([
},
])
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(async () => {
await fecthListTransfer()
})
@ -129,10 +138,16 @@ const fecthListTransfer = async () => {
})
}
/**
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
*/
const clickAdd = async () => {
router.push(`/transfer/add`)
}
/**
* กดเพื่อย้อนกลับ
*/
const clickBack = () => {
router.push(`/`)
}

49
src/modules/03_retire/views/addRetire.vue
View file

@ -11,18 +11,20 @@ const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
const router = useRouter()
const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar()
const routeName = router.currentRoute.value.name
/**
* ตัวแปรที่ใช้งาน
*/
const id = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const files = ref<any>()
const myform = ref<QForm | null>(null)
const tranferOrg = ref("")
const dateCommand = ref<Date>(new Date())
const dateLeave = ref<Date>(new Date())
const noteReason = ref("")
const nameFile = ref<string>("")
/** ข้อมูล v-model ของฟอร์ม */
const dataDetail = ref<any>({
datetext: "",
activeDate: new Date(),
@ -46,10 +48,17 @@ const dataDetail = ref<any>({
fullname: "",
})
/**
* ฟังก์ชั่นย้อนกลับไปยังหน้ารายการลาออก
*/
const clickBack = () => {
router.push(`/retire`)
}
/**
* ฟังก์ชั่นเปลี่ยนเป็น string ของ status
* @param val value ของ status true/false
*/
const statusOrder = (val: boolean) => {
switch (val) {
case true:
@ -59,10 +68,9 @@ const statusOrder = (val: boolean) => {
}
}
const filesNull = () => {
files.value = null
}
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(() => {
if (route.params.id !== undefined) {
id.value = route.params.id.toString()
@ -70,6 +78,9 @@ onMounted(() => {
}
})
/**
* บันทึกข้อมูลการลาออก
*/
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
@ -80,12 +91,25 @@ const saveData = async () => {
}
}
/**
* ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
*/
const filesNull = () => {
files.value = null
}
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const files = ref<any>()
//อัพโหลดไฟล์
const fileUploadDoc = async (file: any) => {
fileDocDataUpload.value.push(file)
nameFile.value = file[0].name
files.value = file
}
/**
* ฟังก์ชั่นเซฟข้อมูลลาออกเเล้วเรียกใช้งานApi
*/
const saveResing = () => {
$q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก",
@ -124,6 +148,10 @@ const cancelResing = () => {
.onDismiss(() => {})
}
/**
* ฟังก์ชั่นลบ
* @param id ไอดีของข้อมูลการลาออก
*/
const deleteResting = async (id: string) => {
showLoader()
await http
@ -167,6 +195,11 @@ const createFormresign = async () => {
messageError($q, e)
})
}
/**
* ฟังก์ชั่นเรียกข้อมูลจาก Api
* @param id ไอดีของข้อมูล
*/
const fectDataresign = async (id: string) => {
showLoader()
await http

18
src/modules/03_retire/views/main.vue
View file

@ -16,6 +16,10 @@ const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, messageError, showLoader, hideLoader } = mixin
/**
* เพิ่มหัวข้อตาราง
*/
const rows = ref<any>([])
const filter = ref<string>("")
const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "statustext"])
const columns = ref<QTableProps["columns"]>([
@ -65,11 +69,17 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px; width:10%;",
},
])
const rows = ref<any>([])
/**
* ตั้งค่า pagination
*/
const initialPagination = ref({
rowsPerPage: 0,
})
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(() => {
fectListleave()
})
@ -98,10 +108,16 @@ const fectListleave = async () => {
})
}
/**
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
*/
const clickAdd = async () => {
router.push(`/retire/add`)
}
/**
* กดเพื่อย้อนกลับ
*/
const clickBack = () => {
router.push(`/`)
}

855
src/modules/03_retire/views/result.vue
View file

@ -1,36 +1,35 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { ref, reactive, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"
import type {
QuestionDescription,
OptionQuestions,
OptionQuestions2,
} from "@/modules/03_retire/interface/request/Main";
import type { QuestionDescription, OptionQuestions, OptionQuestions2 } from "@/modules/03_retire/interface/request/Main"
const route = useRoute();
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const { success, messageError, notifyError, showLoader, hideLoader } = mixin;
const dataId = ref<any>(route.params.id.toString());
const route = useRoute()
const router = useRouter()
const $q = useQuasar()
const mixin = useCounterMixin()
const { success, messageError, notifyError, showLoader, hideLoader } = mixin
const dataId = ref<any>(route.params.id.toString())
const exitFactor = ref<any>([]);
const reasonWork = ref<any>([]);
const adjust = ref<any>([]);
const timeThink = ref<any>();
const realReason = ref<any>("");
const notExitFactor = ref<any>("");
const haveJob = ref<any>();
const suggestFriends = ref<any>();
const futureWork = ref<any>();
const suggestion = ref<any>("");
/**
* ตัวแปรแบบสอบถาม
*/
const exitFactor = ref<any>([])
const reasonWork = ref<any>([])
const adjust = ref<any>([])
const timeThink = ref<any>()
const realReason = ref<any>("")
const notExitFactor = ref<any>("")
const haveJob = ref<any>()
const suggestFriends = ref<any>()
const futureWork = ref<any>()
const suggestion = ref<any>("")
const reasonWorkOther = ref("");
const reasonWorkOther = ref("")
// const reasonWork_option = ref<any>([
// { label: "ความมั่นคงในการทำงาน ", value: 0 },
// { label: "สิทธิประโยชน์/สวัสดิการ", value: 1 },
@ -46,7 +45,7 @@ const reasonWorkOther = ref("");
// { label: "การได้รับการยอมรับจากสังคม ", value: 11 },
// { label: "อื่น ๆ (ระบุ) ", value: 12 },
// ]);
const exitFactorOther = ref("");
const exitFactorOther = ref("")
// const exitFactor_option = ref<any>([
// { label: "อัตราเงินเดือน ", value: 0 },
// { label: "สวัสดิการ", value: 1 },
@ -65,7 +64,7 @@ const exitFactorOther = ref("");
// { label: "โอกาสความก้าวหน้า ", value: 14 },
// { label: "อื่น ๆ (ระบุ) ", value: 15 },
// ]);
const suggestFriendsReason = ref("");
const suggestFriendsReason = ref("")
// const suggestFriends_option = ref<any>([
// { label: "แนะนำ ", value: 0 },
// { label: "ไม่แนะนำ (ระบุ)", value: 1 },
@ -76,17 +75,17 @@ const suggestFriendsReason = ref("");
// { label: "3 เดือน - 6 เดือน ", value: 2 },
// { label: "6 เดือนขึ้นไป ", value: 3 },
// ]);
const haveJobReason = ref<any>("");
const haveJobReason = ref<any>("")
// const haveJob_option = ref<any>([
// { label: "มี (ระบุ)", value: 0 },
// { label: "ไม่มี", value: 1 },
// ]);
const futureWorkReason = ref<any>("");
const futureWorkReason = ref<any>("")
// const futureWork_option = ref<any>([
// { label: "อยาก", value: 0 },
// { label: "ไม่อยาก (ระบุ)", value: 1 },
// ]);
const adjustOther = ref("");
const adjustOther = ref("")
// const adjust_option = ref<any>([
// { label: "อัตราเงินเดือน ", value: 0 },
// { label: "สวัสดิการ", value: 1 },
@ -106,476 +105,382 @@ const adjustOther = ref("");
// { label: "อื่น ๆ (ระบุ) ", value: 15 },
// ]);
//
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(async () => {
showLoader();
await fecthQuestion();
});
showLoader()
await fecthQuestion()
})
// เรียกชุดคำถาม
// คำถาม
const questionDesc = ref<QuestionDescription>({
question1Desc: "",
question2Desc: "",
question3Desc: "",
question4Desc: "",
question5Desc: "",
question6Desc: "",
question7Desc: "",
question8Desc: "",
question9Desc: "",
question10Desc: "",
});
const question1Answer = ref<OptionQuestions[]>([]);
const question2Answer = ref<OptionQuestions[]>([]);
const question3Answer = ref<OptionQuestions[]>([]);
const question4Answer = ref<OptionQuestions[]>([]);
const question7Answer = ref<OptionQuestions2[]>([]);
const question8Answer = ref<OptionQuestions2[]>([]);
const question9Answer = ref<OptionQuestions2[]>([]);
question1Desc: "",
question2Desc: "",
question3Desc: "",
question4Desc: "",
question5Desc: "",
question6Desc: "",
question7Desc: "",
question8Desc: "",
question9Desc: "",
question10Desc: "",
})
const question1Answer = ref<OptionQuestions[]>([])
const question2Answer = ref<OptionQuestions[]>([])
const question3Answer = ref<OptionQuestions[]>([])
const question4Answer = ref<OptionQuestions[]>([])
const question7Answer = ref<OptionQuestions2[]>([])
const question8Answer = ref<OptionQuestions2[]>([])
const question9Answer = ref<OptionQuestions2[]>([])
/**
* ฟังก์ชั่นแบบสอบถาม
*/
async function fecthQuestion() {
await http
.get(config.API.questionList())
.then((res) => {
const data = res.data.result;
question1Answer.value = [];
question3Answer.value = [];
question4Answer.value = [];
// คำถามแบบสอบถามหลัก
for (let i = 1; i <= 10; i++) {
const questionKey = `question${i}Desc`;
questionDesc.value[questionKey] = `${i}. ${data[questionKey]}`;
}
// คำถามแบบสอบถามย่อย
const Answer1 = data.question1Answer.map((e: any, index: number) => ({
label: e,
value: index,
}));
question1Answer.value = Answer1;
question1Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer1.length,
});
question2Answer.value = data.question2Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
const Answer3 = data.question3Answer.map((e: any, index: number) => ({
label: e,
value: index,
}));
question3Answer.value = Answer3;
question3Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer3.length,
});
const Answer4 = data.question4Answer.map((e: any, index: number) => ({
label: e,
value: index,
}));
question4Answer.value = Answer4;
question4Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer4.length,
});
question7Answer.value = data.question7Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
question8Answer.value = data.question8Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
question9Answer.value = data.question9Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
await http
.get(config.API.questionList())
.then(res => {
const data = res.data.result
question1Answer.value = []
question3Answer.value = []
question4Answer.value = []
// คำถามแบบสอบถามหลัก
for (let i = 1; i <= 10; i++) {
const questionKey = `question${i}Desc`
questionDesc.value[questionKey] = `${i}. ${data[questionKey]}`
}
// คำถามแบบสอบถามย่อย
const Answer1 = data.question1Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
question1Answer.value = Answer1
question1Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer1.length,
})
question2Answer.value = data.question2Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
const Answer3 = data.question3Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
question3Answer.value = Answer3
question3Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer3.length,
})
const Answer4 = data.question4Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
question4Answer.value = Answer4
question4Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer4.length,
})
question7Answer.value = data.question7Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
question8Answer.value = data.question8Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
question9Answer.value = data.question9Answer.map((e: any, index: number) => ({
label: e,
value: index,
}))
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
hideLoader()
})
}
//บันทึกเเบบสอบถาม
const saveForm = () => {
let hasError = false;
if (
reasonWork.value.length === 0 ||
(reasonWork.value.filter((x: any) => x == 12).length > 0 &&
(reasonWorkOther.value == null || reasonWorkOther.value == "")) ||
timeThink.value.length === 0 ||
exitFactor.value.length === 0 ||
(exitFactor.value.filter((x: any) => x == 15).length > 0 &&
(exitFactorOther.value == null || exitFactorOther.value == "")) ||
adjust.value.length === 0 ||
(adjust.value.filter((x: any) => x == 15).length > 0 &&
(adjustOther.value == null || adjustOther.value == "")) ||
realReason.value.length < 1 ||
notExitFactor.value.length < 1 ||
haveJob.value.length === 0 ||
(haveJob.value === 0 &&
(haveJobReason.value == null || haveJobReason.value == "")) ||
suggestFriends.value.length === 0 ||
(suggestFriends.value === 1 &&
(suggestFriendsReason.value == null ||
suggestFriendsReason.value == "")) ||
futureWork.value.length === 0 ||
(futureWork.value === 1 &&
(futureWorkReason.value == null || futureWorkReason.value == "")) ||
suggestion.value.length < 1
) {
hasError = true;
} else {
$q.dialog({
title: "ยืนยันข้อมูลแบบสอบถาม",
message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
createResult();
})
.onCancel(() => {})
.onDismiss(() => {});
}
if (hasError === true) {
notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
}
};
/**
* บันทึกเเบบสอบถาม
*/
const saveForm = () => {
let hasError = false
if (
reasonWork.value.length === 0 ||
(reasonWork.value.filter((x: any) => x == 12).length > 0 && (reasonWorkOther.value == null || reasonWorkOther.value == "")) ||
timeThink.value.length === 0 ||
exitFactor.value.length === 0 ||
(exitFactor.value.filter((x: any) => x == 15).length > 0 && (exitFactorOther.value == null || exitFactorOther.value == "")) ||
adjust.value.length === 0 ||
(adjust.value.filter((x: any) => x == 15).length > 0 && (adjustOther.value == null || adjustOther.value == "")) ||
realReason.value.length < 1 ||
notExitFactor.value.length < 1 ||
haveJob.value.length === 0 ||
(haveJob.value === 0 && (haveJobReason.value == null || haveJobReason.value == "")) ||
suggestFriends.value.length === 0 ||
(suggestFriends.value === 1 && (suggestFriendsReason.value == null || suggestFriendsReason.value == "")) ||
futureWork.value.length === 0 ||
(futureWork.value === 1 && (futureWorkReason.value == null || futureWorkReason.value == "")) ||
suggestion.value.length < 1
) {
hasError = true
} else {
$q.dialog({
title: "ยืนยันข้อมูลแบบสอบถาม",
message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
createResult()
})
.onCancel(() => {})
.onDismiss(() => {})
}
if (hasError === true) {
notifyError($q, "กรุณากรอกข้อมูลให้ครบ")
}
}
/**
* สร้างเบบสอบถามไปยัง api
*/
const createResult = async () => {
const data = {
RetirementResignId: dataId.value,
ReasonWork: reasonWork.value,
ReasonWorkOther: reasonWorkOther.value,
TimeThink: timeThink.value,
ExitFactor: exitFactor.value,
ExitFactorOther: exitFactorOther.value,
Adjust: adjust.value,
AdjustOther: adjustOther.value,
RealReason: realReason.value,
NotExitFactor: notExitFactor.value,
Havejob: haveJob.value,
HavejobReason: haveJobReason.value,
SuggestFriends: suggestFriends.value,
SuggestFriendsReason: suggestFriendsReason.value,
FutureWork: futureWork.value,
FutureWorkReason: futureWorkReason.value,
Suggestion: suggestion.value,
};
await http
.post(config.API.listquestionnaire(), data)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
router.push(`/retire`);
})
.catch((e: any) => {
messageError($q, e);
});
};
const data = {
RetirementResignId: dataId.value,
ReasonWork: reasonWork.value,
ReasonWorkOther: reasonWorkOther.value,
TimeThink: timeThink.value,
ExitFactor: exitFactor.value,
ExitFactorOther: exitFactorOther.value,
Adjust: adjust.value,
AdjustOther: adjustOther.value,
RealReason: realReason.value,
NotExitFactor: notExitFactor.value,
Havejob: haveJob.value,
HavejobReason: haveJobReason.value,
SuggestFriends: suggestFriends.value,
SuggestFriendsReason: suggestFriendsReason.value,
FutureWork: futureWork.value,
FutureWorkReason: futureWorkReason.value,
Suggestion: suggestion.value,
}
await http
.post(config.API.listquestionnaire(), data)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ")
router.push(`/retire`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/retire`)"
/>
</div>
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<q-card bordered flat>
<div
class="q-pa-xs bg-white-2 row items-center q-py-sm q-px-md justify-center text-bold"
>
เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม
</div>
<div
class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
>
แบบสอบถาม
</div>
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-12 text-top0 items-center">
<!-- 1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.push(`/retire`)" />
</div>
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<q-card bordered flat>
<div class="q-pa-xs bg-white-2 row items-center q-py-sm q-px-md justify-center text-bold">เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม</div>
<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">แบบสอบถาม</div>
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-12 text-top0 items-center">
<!-- 1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร
(เลือกได้มากกว่า 1 ข้อ) -->
{{ questionDesc.question1Desc }}
</div>
<q-option-group
:options="question1Answer"
type="checkbox"
v-model="reasonWork"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="reasonWork.includes(question1Answer.length - 1)"
v-model="reasonWorkOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 2. สำหรับการลาออกในครั้งนี้
{{ questionDesc.question1Desc }}
</div>
<q-option-group :options="question1Answer" type="checkbox" v-model="reasonWork" />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="reasonWork.includes(question1Answer.length - 1)"
v-model="reasonWorkOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 2. สำหรับการลาออกในครั้งนี้
ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด -->
{{ questionDesc.question2Desc }}
</div>
<q-option-group
:options="question2Answer"
type="radio"
v-model="timeThink"
/>
{{ questionDesc.question2Desc }}
</div>
<q-option-group :options="question2Answer" type="radio" v-model="timeThink" />
<div class="col-12 text-top0 items-center">
<!-- 3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ
<div class="col-12 text-top0 items-center">
<!-- 3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ
(เลือกได้มากกว่า 1 ข้อ ) -->
{{ questionDesc.question3Desc }}
</div>
<q-option-group
:options="question3Answer"
type="checkbox"
v-model="exitFactor"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="exitFactor.includes(question3Answer.length - 1)"
v-model="exitFactorOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
{{ questionDesc.question3Desc }}
</div>
<q-option-group :options="question3Answer" type="checkbox" v-model="exitFactor" />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="exitFactor.includes(question3Answer.length - 1)"
v-model="exitFactorOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
{{ questionDesc.question4Desc }}
</div>
<q-list>
<q-option-group
:options="question4Answer"
type="checkbox"
v-model="adjust"
/>
</q-list>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="adjust.includes(question4Answer.length - 1)"
v-model="adjustOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 5. โปรดระบุสาเหตุที่แท้จริง
<div class="col-12 text-top0 items-center">
{{ questionDesc.question4Desc }}
</div>
<q-list>
<q-option-group :options="question4Answer" type="checkbox" v-model="adjust" />
</q-list>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="adjust.includes(question4Answer.length - 1)"
v-model="adjustOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 5. โปรดระบุสาเหตุที่แท้จริง
ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร
? -->
{{ questionDesc.question5Desc }}
</div>
<q-input
class="col-12"
dense
outlined
v-model="realReason"
label=" "
type="textarea"
/>
{{ questionDesc.question5Desc }}
</div>
<q-input class="col-12" dense outlined v-model="realReason" label=" " type="textarea" />
<div class="col-12 text-top0 items-center">
<!-- 6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
<div class="col-12 text-top0 items-center">
<!-- 6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร -->
{{ questionDesc.question6Desc }}
</div>
<q-input
class="col-12"
dense
outlined
v-model="notExitFactor"
label=" "
type="textarea"
/>
{{ questionDesc.question6Desc }}
</div>
<q-input class="col-12" dense outlined v-model="notExitFactor" label=" " type="textarea" />
<div class="col-12 text-top0 items-center">
<!-- 7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
<div class="col-12 text-top0 items-center">
<!-- 7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ)
และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร -->
{{ questionDesc.question7Desc }}
</div>
<q-option-group
:options="question7Answer"
type="radio"
v-model="haveJob"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="haveJob === 0"
v-model="haveJobReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่
{{ questionDesc.question7Desc }}
</div>
<q-option-group :options="question7Answer" type="radio" v-model="haveJob" />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="haveJob === 0"
v-model="haveJobReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่
(ถ้าไม่ โปรดระบุเหตุผล) -->
{{ questionDesc.question8Desc }}
</div>
<q-option-group
:options="question8Answer"
type="radio"
v-model="suggestFriends"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="suggestFriends === 1"
v-model="suggestFriendsReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 9. หากท่านมีโอกาสในอนาคต
{{ questionDesc.question8Desc }}
</div>
<q-option-group :options="question8Answer" type="radio" v-model="suggestFriends" />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="suggestFriends === 1"
v-model="suggestFriendsReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 9. หากท่านมีโอกาสในอนาคต
ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
โปรดระบุเหตุผล) -->
{{ questionDesc.question9Desc }}
</div>
<q-option-group
:options="question9Answer"
type="radio"
v-model="futureWork"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="futureWork === 1"
v-model="futureWorkReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
{{ questionDesc.question9Desc }}
</div>
<q-option-group :options="question9Answer" type="radio" v-model="futureWork" />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="futureWork === 1"
v-model="futureWorkReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ -->
{{ questionDesc.question10Desc }}
</div>
<q-input
class="col-12"
dense
outlined
v-model="suggestion"
label=" "
type="textarea"
/>
<div class="col-12 text-top0 items-center">
<!-- 10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ -->
{{ questionDesc.question10Desc }}
</div>
<q-input class="col-12" dense outlined v-model="suggestion" label=" " type="textarea" />
<q-separator />
</div>
</q-card>
</div>
</div>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="primary"
label="บันทึกข้อมูลแบบสอบถาม"
@click="saveForm"
/>
</div>
</q-card>
</div>
</div>
</div>
<q-separator />
</div>
</q-card>
</div>
</div>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="primary" label="บันทึกข้อมูลแบบสอบถาม" @click="saveForm" />
</div>
</q-card>
</div>
</div>
</div>
</template>

4
src/modules/05_leave/componenst/Calendar.vue
View file

@ -112,7 +112,7 @@ watch(props, async (count, prevCount) => {
})
/**
* ฟังชันน์ยกเลิก model
* ฟังก์ชั่นยกเลิก model
* @param text
*/
const cancel = async (text: string) => {
@ -121,7 +121,7 @@ const cancel = async (text: string) => {
modeCancel.value = true
}
/**
* ฟังชันน์เปิด model
* ฟังก์ชั่นเปิด model
* @param text
*/
const view = async (text: string) => {

829
src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
View file

@ -1,503 +1,402 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence";
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const edit = ref<boolean>(true);
const files = ref<any>(null);
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ตัวแปร ref สำหรับแสดง validate */
const telRef = ref<object | null>(null);
const writeatRef = ref<object | null>(null);
const birthdayRef = ref<object | null>(null);
const governmentRef = ref<object | null>(null);
const totalLeaveRef = ref<object | null>(null);
const dateLeaveEndRef = ref<object | null>(null);
const dateOrdinationRef = ref<object | null>(null);
const dateLeaveStartRef = ref<object | null>(null);
const addressMeasureRef = ref<object | null>(null);
const addressBuddhistRef = ref<object | null>(null);
const measureLocationNameRef = ref<object | null>(null);
const buddhistLocationNameRef = ref<object | null>(null);
const telRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null)
const totalLeaveRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null)
const dateOrdinationRef = ref<object | null>(null)
const dateLeaveStartRef = ref<object | null>(null)
const addressMeasureRef = ref<object | null>(null)
const addressBuddhistRef = ref<object | null>(null)
const measureLocationNameRef = ref<object | null>(null)
const buddhistLocationNameRef = ref<object | null>(null)
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
government: new Date(),
birthday: new Date(),
dateLeaveStart: new Date(),
dateLeaveEnd: new Date(),
totalLeave: new Date(),
dateOrdination: new Date(),
measureLocationName: "",
tel: null,
addressMeasure: "",
buddhistLocationName: "",
addressBuddhist: "",
monk: "never",
file: null,
});
writeat: "",
government: new Date(),
birthday: new Date(),
dateLeaveStart: new Date(),
dateLeaveEnd: new Date(),
totalLeave: new Date(),
dateOrdination: new Date(),
measureLocationName: "",
tel: null,
addressMeasure: "",
buddhistLocationName: "",
addressBuddhist: "",
monk: "never",
file: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef06 = {
writeat: writeatRef,
government: governmentRef,
birthday: birthdayRef,
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
totalLeave: totalLeaveRef,
dateOrdination: dateOrdinationRef,
measureLocationName: measureLocationNameRef,
tel: telRef,
addressMeasure: addressMeasureRef,
buddhistLocationName: buddhistLocationNameRef,
addressBuddhist: addressBuddhistRef,
};
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
}
writeat: writeatRef,
government: governmentRef,
birthday: birthdayRef,
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
totalLeave: totalLeaveRef,
dateOrdination: dateOrdinationRef,
measureLocationName: measureLocationNameRef,
tel: telRef,
addressMeasure: addressMeasureRef,
buddhistLocationName: buddhistLocationNameRef,
addressBuddhist: addressBuddhistRef,
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData);
props.onSubmit();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
)
}
</script>
<!-- ฟอร์ม ลาอุปสมบท -->
<template>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
ref="writeatRef"
class="col-12 col-sm-12"
dense
outlined
bg-color="white"
hide-bottom-space
v-model="formData.writeat"
label="เขียนที่"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
ref="writeatRef"
class="col-12 col-sm-12"
dense
outlined
bg-color="white"
hide-bottom-space
v-model="formData.writeat"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateLeaveStart"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
bg-color="white"
dense
ref="dateLeaveStartRef"
hide-bottom-space
class="full-width datepicker"
:model-value="
formData.dateLeaveStart != null
? date2Thai(formData.dateLeaveStart)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
bg-color="white"
dense
ref="dateLeaveStartRef"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateLeaveEnd"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="dateLeaveEndRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formData.dateLeaveEnd != null
? date2Thai(formData.dateLeaveEnd)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveEnd" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="dateLeaveEndRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-4 col-sm-6"
dense
outlined
bg-color="white"
type="number"
v-model="formData.totalLeave"
label="จำนวนวันที่ลา"
readonly
/>
<q-input class="col-12 col-md-4 col-sm-6" dense outlined bg-color="white" type="number" v-model="formData.totalLeave" label="จำนวนวันที่ลา" readonly />
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.government"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="governmentRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width datepicker"
:model-value="
formData.government != null
? date2Thai(formData.government)
: null
"
:label="`${'วันที่เข้ารับราชการ'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.government"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="governmentRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width datepicker"
:model-value="formData.government != null ? date2Thai(formData.government) : null"
:label="`${'วันที่เข้ารับราชการ'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.birthday"
:locale="'th'"
autoApply
borderless
readonly
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="birthdayRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width datepicker"
:model-value="
formData.birthday != null
? date2Thai(formData.birthday)
: null
"
:label="`${'วันเดือนปีเกิด'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<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>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.birthday"
:locale="'th'"
autoApply
borderless
readonly
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="birthdayRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width datepicker"
:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
:label="`${'วันเดือนปีเกิด'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<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>
<div class="q-pl-sm text-weight-bold text-dark col-12"> เคยบวชหรือไม่ </div>
<div class="col-12">
<q-radio
v-model="formData.monk"
val="ever"
label="เคยบวช"
checked-icon="task_alt"
/>
<q-radio
v-model="formData.monk"
val="never"
label="ไม่เคยบวช"
checked-icon="task_alt"
/>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
<div class="col-12">
<q-radio v-model="formData.monk" val="ever" label="เคยบวช" checked-icon="task_alt" />
<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" />
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateOrdination"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="dateOrdinationRef"
dense
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formData.dateOrdination != null
? date2Thai(formData.dateOrdination)
: null
"
:label="`${'วันอุปสมบท'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateOrdination"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="dateOrdinationRef"
dense
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateOrdination != null ? date2Thai(formData.dateOrdination) : null"
:label="`${'วันอุปสมบท'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
hide-bottom-space
ref="measureLocationNameRef"
bg-color="white"
outlined
v-model="formData.measureLocationName"
label="ชื่อวัด"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
hide-bottom-space
ref="measureLocationNameRef"
bg-color="white"
outlined
v-model="formData.measureLocationName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4"
ref="telRef"
dense
outlined
v-model="formData.tel"
bg-color="white"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
label="หมายเลขโทรศัพท์"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/>
</div>
</div>
<q-input
class="col-12 q-mt-sm"
dense
ref="addressMeasureRef"
bg-color="white"
outlined
v-model="formData.addressMeasure"
label="ที่อยู่"
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
/>
<q-input
class="col-12 col-sm-6 col-md-4"
ref="telRef"
dense
outlined
v-model="formData.tel"
bg-color="white"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
label="หมายเลขโทรศัพท์"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12"> สถานที่จำพรรษา </div>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
ref="buddhistLocationNameRef"
bg-color="white"
hide-bottom-space
outlined
v-model="formData.buddhistLocationName"
label="ชื่อวัด"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 q-mt-sm"
dense
ref="addressMeasureRef"
bg-color="white"
outlined
v-model="formData.addressMeasure"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
/>
<q-input
class="col-12"
dense
ref="addressBuddhistRef"
bg-color="white"
outlined
v-model="formData.addressBuddhist"
label="ที่อยู่"
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
hide-bottom-space
/>
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
ref="buddhistLocationNameRef"
bg-color="white"
hide-bottom-space
outlined
v-model="formData.buddhistLocationName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<div class="col-12 col-sm-6">
<q-file
ref="fileRef"
v-model="formData.file"
dense
label="เอกสารประกอบ"
outlined
bg-color="white"
multiple
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<q-input
class="col-12"
dense
ref="addressBuddhistRef"
bg-color="white"
outlined
v-model="formData.addressBuddhist"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
hide-bottom-space
/>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<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.fileName }}
</q-item-label>
<div class="col-12 col-sm-6">
<q-file ref="fileRef" v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<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.fileName }}
</q-item-label>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
/>
</div>
</form>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
</div>
</form>
</template>

523
src/modules/05_leave/componenst/Forms/07_HajjForm.vue
View file

@ -1,330 +1,255 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence";
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const edit = ref<boolean>(true);
const files = ref<any>(null);
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const writeatRef = ref<object | null>(null);
const governmentRef = ref<object | null>(null);
const dateLeaveStartRef = ref<object | null>(null);
const dateLeaveEndRef = ref<object | null>(null);
const writeatRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null)
const dateLeaveStartRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
government: new Date(),
dateLeaveStart: new Date(),
dateLeaveEnd: new Date(),
totalLeave: new Date(),
monk: "never",
file: null,
});
writeat: "",
government: new Date(),
dateLeaveStart: new Date(),
dateLeaveEnd: new Date(),
totalLeave: new Date(),
monk: "never",
file: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef07 = {
writeat: writeatRef,
government: governmentRef,
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
};
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
}
writeat: writeatRef,
government: governmentRef,
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData);
props.onSubmit();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
)
}
</script>
<template>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
ref="writeatRef"
class="col-12 col-sm-12"
bg-color="white"
dense
outlined
label="เขียนที่"
hide-bottom-space
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
ref="writeatRef"
class="col-12 col-sm-12"
bg-color="white"
dense
outlined
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formData.dateLeaveStart"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveStartRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="
formData.dateLeaveStart != null
? date2Thai(formData.dateLeaveStart)
: null
"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formData.dateLeaveStart"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveStartRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formData.dateLeaveEnd"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveEndRef"
class="full-width datepicker"
bg-color="white"
outlined
dense
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:model-value="
formData.dateLeaveEnd != null
? date2Thai(formData.dateLeaveEnd)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formData.dateLeaveEnd"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveEndRef"
class="full-width datepicker"
bg-color="white"
outlined
dense
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
v-model="formData.totalLeave"
class="col-12 col-md-4 col-sm-6"
bg-color="white"
dense
outlined
readonly
type="number"
label="จำนวนวันที่ลา"
/>
<q-input v-model="formData.totalLeave" class="col-12 col-md-4 col-sm-6" bg-color="white" dense outlined readonly type="number" label="จำนวนวันที่ลา" />
<datepicker
v-model="formData.government"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
readonly
week-start="0"
:locale="'th'"
:enableTimePicker="false"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="governmentRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
readonly
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="
formData.government != null
? date2Thai(formData.government)
: null
"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]"
>
<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>
<datepicker
v-model="formData.government"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
readonly
week-start="0"
:locale="'th'"
:enableTimePicker="false"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="governmentRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
readonly
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="formData.government != null ? date2Thai(formData.government) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<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>
<div class="q-pl-sm text-weight-bold text-dark col-12">
เคยไปประกอบพิธีฮัจย์หรือไม่
</div>
<div class="col-12">
<q-radio
v-model="formData.monk"
val="ever"
checked-icon="task_alt"
label="เคย"
/>
<q-radio
v-model="formData.monk"
val="never"
checked-icon="task_alt"
label="ไม่เคยไปประกอบพิธีฮัจย์"
/>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจย์หรือไม่</div>
<div class="col-12">
<q-radio v-model="formData.monk" val="ever" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formData.monk" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์" />
</div>
<q-input
v-model="formData.info"
class="col-12 q-mt-sm"
bg-color="white"
dense
outlined
type="textarea"
label="รายละเอียด"
/>
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file
v-model="formData.file"
bg-color="white"
label="เอกสารประกอบ"
dense
outlined
multiple
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" bg-color="white" label="เอกสารประกอบ" dense outlined multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<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.fileName }}
</q-item-label>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<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.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
/>
</div>
</form>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
</div>
</form>
</template>

586
src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
View file

@ -1,370 +1,284 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence";
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const edit = ref<boolean>(true);
const files = ref<any>(null);
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const dateLeaveStartRef = ref<object | null>(null);
const dateLeaveEndRef = ref<object | null>(null);
const writeatRef = ref<object | null>(null);
const receivedRef = ref<object | null>(null);
const atRef = ref<object | null>(null);
const dateAtRef = ref<object | null>(null);
const admittedRef = ref<object | null>(null);
const atPlaceRef = ref<object | null>(null);
const dateLeaveStartRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const receivedRef = ref<object | null>(null)
const atRef = ref<object | null>(null)
const dateAtRef = ref<object | null>(null)
const admittedRef = ref<object | null>(null)
const atPlaceRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
dateLeaveStart: null,
dateLeaveEnd: null,
totalLeave: 1,
file: null,
writeat: "",
received: "",
at: "",
dateAt: "",
admitted: "",
atPlace: "",
info:''
});
dateLeaveStart: null,
dateLeaveEnd: null,
totalLeave: 1,
file: null,
writeat: "",
received: "",
at: "",
dateAt: "",
admitted: "",
atPlace: "",
info: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef08 = {
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
writeat: writeatRef,
received: receivedRef,
at: atRef,
dateAt: dateAtRef,
admitted: admittedRef,
atPlace: atPlaceRef,
};
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
}
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
writeat: writeatRef,
received: receivedRef,
at: atRef,
dateAt: dateAtRef,
admitted: admittedRef,
atPlace: atPlaceRef,
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData);
props.onSubmit();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
)
}
</script>
<template>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
ref="writeatRef"
class="col-12 col-sm-12"
dense
outlined
bg-color="white"
hide-bottom-space
v-model="formData.writeat"
label="เขียนที่"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
ref="writeatRef"
class="col-12 col-sm-12"
dense
outlined
bg-color="white"
hide-bottom-space
v-model="formData.writeat"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateLeaveStart"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
bg-color="white"
dense
ref="dateLeaveStartRef"
hide-bottom-space
class="full-width datepicker"
:model-value="
formData.dateLeaveStart != null
? date2Thai(formData.dateLeaveStart)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
bg-color="white"
dense
ref="dateLeaveStartRef"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateLeaveEnd"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="dateLeaveEndRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formData.dateLeaveEnd != null
? date2Thai(formData.dateLeaveEnd)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveEnd" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="dateLeaveEndRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-4 col-sm-6"
dense
outlined
bg-color="white"
type="number"
v-model="formData.totalLeave"
label="จำนวนวันที่ลา"
readonly
/>
<q-input class="col-12 col-md-4 col-sm-6" dense outlined bg-color="white" type="number" v-model="formData.totalLeave" label="จำนวนวันที่ลา" readonly />
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
ref="receivedRef"
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
v-model="formData.received"
label="ได้รับหมายเรียกของ"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
ref="receivedRef"
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
v-model="formData.received"
label="ได้รับหมายเรียกของ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
<q-input
ref="atRef"
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
v-model="formData.at"
label="ที่"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
/>
</div>
</div>
<q-input
ref="atRef"
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
v-model="formData.at"
label="ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
/>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateAt"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="dateAtRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formData.dateAt != null ? date2Thai(formData.dateAt) : null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateAt" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="dateAtRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateAt != null ? date2Thai(formData.dateAt) : null"
:label="`${'ลงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
ref="admittedRef"
outlined
v-model="formData.admitted"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
ref="admittedRef"
outlined
v-model="formData.admitted"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
ref="atPlaceRef"
v-model="formData.atPlace"
label="ณ ที่"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
/>
</div>
</div>
<q-input
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
ref="atPlaceRef"
v-model="formData.atPlace"
label="ณ ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
/>
</div>
</div>
<q-input
class="col-12 q-mt-sm"
dense
bg-color="white"
outlined
v-model="formData.info"
type="textarea"
label="รายละเอียด"
/>
<q-input class="col-12 q-mt-sm" dense bg-color="white" outlined v-model="formData.info" type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file
v-model="formData.file"
dense
label="เอกสารประกอบ"
outlined
bg-color="white"
multiple
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<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.fileName }}
</q-item-label>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<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.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
/>
</div>
</form>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
</div>
</form>
</template>

4
src/modules/05_leave/componenst/Forms/09_StudyForm.vue
View file

@ -75,7 +75,7 @@ const formRef: FormRef09 = {
writeat: writeatRef,
}
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
@ -92,7 +92,7 @@ function onValidate() {
}
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,

4
src/modules/05_leave/componenst/Forms/10_TrainForm.vue
View file

@ -69,7 +69,7 @@ const formRef: FormRef10 = {
writeat: writeatRef,
}
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
@ -87,7 +87,7 @@ function onValidate() {
}
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,

2
src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
View file

@ -83,7 +83,7 @@ function onValidate() {
}
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,

487
src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
View file

@ -1,322 +1,239 @@
<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence";
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const edit = ref<boolean>(true);
const isSave = ref<boolean>(false);
const files = ref<any>(null);
const filesUpload = ref<any>(null);
const edit = ref<boolean>(true)
const isSave = ref<boolean>(false)
const files = ref<any>(null)
const filesUpload = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const dateLeaveStartRef = ref<object | null>(null);
const dateLeaveEndRef = ref<object | null>(null);
const writeatRef = ref<object | null>(null);
const dateLeaveStartRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
dateLeaveStart: null,
dateLeaveEnd: null,
file: "",
info: "",
});
writeat: "",
dateLeaveStart: null,
dateLeaveEnd: null,
file: "",
info: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef13 = {
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
writeat: writeatRef,
};
dateLeaveStart: dateLeaveStartRef,
dateLeaveEnd: dateLeaveEndRef,
writeat: writeatRef,
}
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
}
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังชั่น บันทึก */
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
props.onSubmit();
console.log(formData);
isSave.value = true;
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
dialogConfirm(
$q,
async () => {
props.onSubmit()
console.log(formData)
isSave.value = true
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
)
}
/** ฟังชั่น อัปโหลด
/** ฟังก์ชั่น อัปโหลด
* consolelog ไว้ก่อน
*/
function upLoadFile() {
console.log("upload", filesUpload.value);
console.log("upload", filesUpload.value)
}
</script>
<template>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
class="col-12 col-sm-12"
ref="writeatRef"
dense
outlined
bg-color="white"
label="เขียนที่"
hide-bottom-space
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
class="col-12 col-sm-12"
ref="writeatRef"
dense
outlined
bg-color="white"
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
v-model="formData.dateLeaveStart"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveStartRef"
class="full-width datepicker"
bg-color="white"
outlined
dense
lazy-rules
hide-bottom-space
:model-value="
formData.dateLeaveStart != null
? date2Thai(formData.dateLeaveStart)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker v-model="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveStartRef"
class="full-width datepicker"
bg-color="white"
outlined
dense
lazy-rules
hide-bottom-space
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formData.dateLeaveEnd"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:locale="'th'"
:readonly="!formData.dateLeaveStart"
:enableTimePicker="false"
:min-date="
formData.dateLeaveStart
? new Date(
formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
)
: null
"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveEndRef"
class="full-width datepicker"
outlined
dense
lazy-rules
bg-color="white"
hide-bottom-space
:readonly="!formData.dateLeaveStart"
:model-value="
formData.dateLeaveEnd != null
? date2Thai(formData.dateLeaveEnd)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formData.dateLeaveEnd"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:locale="'th'"
:readonly="!formData.dateLeaveStart"
:enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateLeaveEndRef"
class="full-width datepicker"
outlined
dense
lazy-rules
bg-color="white"
hide-bottom-space
:readonly="!formData.dateLeaveStart"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
v-model="formData.info"
class="col-12 q-mt-sm"
bg-color="white"
dense
outlined
type="textarea"
label="รายละเอียด"
/>
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file
v-model="formData.file"
bg-color="white"
dense
outlined
multiple
label="เอกสารประกอบ"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<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.fileName }}
</q-item-label>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<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.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div v-if="isSave" class="q-mt-md">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">
ดาวน์โหลด
</div>
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
/>
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">
อัปโหลด
</div>
<q-file
v-model="filesUpload"
dense
label="แบบฟอร์ม"
outlined
bg-color="white"
multiple
accept="application/pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn
v-if="filesUpload"
flat
round
color="primary"
icon="mdi-arrow-up-bold"
@click="upLoadFile"
><q-tooltip>อัปโหลด</q-tooltip></q-btn
>
</div>
</div>
</q-card>
</div>
<div v-if="isSave" class="q-mt-md">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="filesUpload" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="filesUpload" flat round color="primary" icon="mdi-arrow-up-bold" @click="upLoadFile"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
</div>
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
/>
</div>
</div>
</form>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
</div>
</div>
</form>
</template>

4
src/modules/05_leave/componenst/ListCalendar.vue
View file

@ -32,7 +32,7 @@ const model = ref(null)
const modeCancel = ref(true)
/**
* ฟังชันน์ยกเลิก model
* ฟังก์ชั่นยกเลิก model
* @param text
*/
const cancel = async (text: string) => {
@ -42,7 +42,7 @@ const cancel = async (text: string) => {
}
/**
* ฟังชันน์เปิด model
* ฟังก์ชั่นเปิด model
* @param text
*/
const view = async (text: string) => {

2
src/modules/05_leave/componenst/Table.vue
View file

@ -36,7 +36,7 @@ const props = defineProps({
})
/**
* ฟังชันน์ emit ค่าที่กำหนด
* ฟังก์ชั่น emit ค่าที่กำหนด
*/
const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
const updateInput = (value: string | number | null) => {