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 mixin = useCounterMixin()
const myform = ref<QForm | null>(null) const myform = ref<QForm | null>(null)
const { fails, success, messageError, showLoader, hideLoader } = mixin const { fails, success, messageError, showLoader, hideLoader } = mixin
const fileDocDataUpload = ref<File[]>([])
/**
* ตัวแปรที่ใช้งาน
*/
const route = useRoute() const route = useRoute()
const files = ref<any>() const files = ref<any>()
const tranferOrg = ref("") const tranferOrg = ref("")
const noteReason = ref("") const noteReason = ref("")
const id = ref<string>("") const id = ref<string>("")
const nameFile = ref<string>("") const nameFile = ref<string>("")
const routeName = router.currentRoute.value.name const routeName = router.currentRoute.value.name
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(() => { onMounted(() => {
if (route.params.id !== undefined) { if (route.params.id !== undefined) {
id.value = route.params.id.toString() id.value = route.params.id.toString()
@ -29,10 +34,6 @@ onMounted(() => {
} }
}) })
const filesNull = () => {
files.value = null
}
const saveData = async () => { const saveData = async () => {
if (myform.value != null) { if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => { await myform.value.validate().then(async (saveDataTest: Boolean) => {
@ -65,6 +66,9 @@ const saveTransfer = () => {
.onDismiss(() => {}) .onDismiss(() => {})
} }
/**
* ฟังก์ชั่นสร้างขอโอน
*/
const createTransfer = async () => { const createTransfer = async () => {
const formData = new FormData() const formData = new FormData()
@ -86,6 +90,10 @@ const createTransfer = async () => {
}) })
} }
/**
* ฟังก์ชั่นเรียกข้อมูลจาก Api
* @param id ไอดีของข้อมูล
*/
const fecthDataTransfer = async (id: string) => { const fecthDataTransfer = async (id: string) => {
showLoader() showLoader()
await http 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) => { const fileUploadDoc = async (file: any) => {
fileDocDataUpload.value.push(file) fileDocDataUpload.value.push(file)
nameFile.value = file[0].name 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 { useTransferDataStore } from "@/modules/02_transfer/store"
import http from "@/plugins/http" import http from "@/plugins/http"
import config from "@/app.config" import config from "@/app.config"
import Table from "@/components/Table.vue"
const transferData = useTransferDataStore() const transferData = useTransferDataStore()
const { statusText } = transferData const { statusText } = transferData
@ -14,15 +15,20 @@ const router = useRouter()
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai, messageError, showLoader, hideLoader } = mixin const { date2Thai, messageError, showLoader, hideLoader } = mixin
import Table from "@/components/Table.vue"
const filter = ref<string>("") /**
const rows = ref<any>([]) * ตั้งค่า pagination
*/
const initialPagination = ref({ const initialPagination = ref({
rowsPerPage: 0, 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"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -98,6 +104,9 @@ const columns = ref<QTableProps["columns"]>([
}, },
]) ])
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(async () => { onMounted(async () => {
await fecthListTransfer() await fecthListTransfer()
}) })
@ -129,10 +138,16 @@ const fecthListTransfer = async () => {
}) })
} }
/**
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
*/
const clickAdd = async () => { const clickAdd = async () => {
router.push(`/transfer/add`) router.push(`/transfer/add`)
} }
/**
* กดเพื่อย้อนกลับ
*/
const clickBack = () => { const clickBack = () => {
router.push(`/`) 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 { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar() const $q = useQuasar()
const routeName = router.currentRoute.value.name const routeName = router.currentRoute.value.name
/**
* ตัวแปรที่ใช้งาน
*/
const id = ref<string>("") const id = ref<string>("")
const fileDocDataUpload = ref<File[]>([]) const myform = ref<QForm | null>(null)
const files = ref<any>()
const tranferOrg = ref("") const tranferOrg = ref("")
const dateCommand = ref<Date>(new Date()) const dateCommand = ref<Date>(new Date())
const dateLeave = ref<Date>(new Date()) const dateLeave = ref<Date>(new Date())
const noteReason = ref("") const noteReason = ref("")
const nameFile = ref<string>("")
/** ข้อมูล v-model ของฟอร์ม */
const dataDetail = ref<any>({ const dataDetail = ref<any>({
datetext: "", datetext: "",
activeDate: new Date(), activeDate: new Date(),
@ -46,10 +48,17 @@ const dataDetail = ref<any>({
fullname: "", fullname: "",
}) })
/**
* ฟังก์ชั่นย้อนกลับไปยังหน้ารายการลาออก
*/
const clickBack = () => { const clickBack = () => {
router.push(`/retire`) router.push(`/retire`)
} }
/**
* ฟังก์ชั่นเปลี่ยนเป็น string ของ status
* @param val value ของ status true/false
*/
const statusOrder = (val: boolean) => { const statusOrder = (val: boolean) => {
switch (val) { switch (val) {
case true: case true:
@ -59,10 +68,9 @@ const statusOrder = (val: boolean) => {
} }
} }
const filesNull = () => { /**
files.value = null * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
} */
onMounted(() => { onMounted(() => {
if (route.params.id !== undefined) { if (route.params.id !== undefined) {
id.value = route.params.id.toString() id.value = route.params.id.toString()
@ -70,6 +78,9 @@ onMounted(() => {
} }
}) })
/**
* บันทึกข้อมูลการลาออก
*/
const saveData = async () => { const saveData = async () => {
if (myform.value != null) { if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => { 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) => { const fileUploadDoc = async (file: any) => {
fileDocDataUpload.value.push(file) fileDocDataUpload.value.push(file)
nameFile.value = file[0].name nameFile.value = file[0].name
files.value = file files.value = file
} }
/**
* ฟังก์ชั่นเซฟข้อมูลลาออกเเล้วเรียกใช้งานApi
*/
const saveResing = () => { const saveResing = () => {
$q.dialog({ $q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก", title: "ยืนยันการยื่นข้อมูลลาออก",
@ -124,6 +148,10 @@ const cancelResing = () => {
.onDismiss(() => {}) .onDismiss(() => {})
} }
/**
* ฟังก์ชั่นลบ
* @param id ไอดีของข้อมูลการลาออก
*/
const deleteResting = async (id: string) => { const deleteResting = async (id: string) => {
showLoader() showLoader()
await http await http
@ -167,6 +195,11 @@ const createFormresign = async () => {
messageError($q, e) messageError($q, e)
}) })
} }
/**
* ฟังก์ชั่นเรียกข้อมูลจาก Api
* @param id ไอดีของข้อมูล
*/
const fectDataresign = async (id: string) => { const fectDataresign = async (id: string) => {
showLoader() showLoader()
await http await http

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -32,7 +32,7 @@ const model = ref(null)
const modeCancel = ref(true) const modeCancel = ref(true)
/** /**
* ฟังชันน์ยกเลิก model * ฟังก์ชั่นยกเลิก model
* @param text * @param text
*/ */
const cancel = async (text: string) => { const cancel = async (text: string) => {
@ -42,7 +42,7 @@ const cancel = async (text: string) => {
} }
/** /**
* ฟังชันน์เปิด model * ฟังก์ชั่นเปิด model
* @param text * @param text
*/ */
const view = async (text: string) => { 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 emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
const updateInput = (value: string | number | null) => { const updateInput = (value: string | number | null) => {