เพิ่มเงื่อนไขกรอกให้ครบก่อนส่ง

This commit is contained in:
AnandaTon 2023-09-05 21:09:28 +07:00
parent 2143c05a42
commit 0bbf5cde0b
3 changed files with 778 additions and 1099 deletions

View file

@ -6,12 +6,20 @@
<div v-if="routeName == 'AddLeave'">เพิ่มเรื่องลาออก</div>
<div v-else>รายละเอียดเรื่องลาออก</div>
</div>
<div class="col-12">
<q-form ref="myform" class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input class="col-8" dense outlined v-model="tranferOrg" label="สถานที่ยื่นขอลาออกจากราชการ" :readonly="routeName != 'AddLeave'" />
<q-input
class="col-8"
dense
outlined
v-model="tranferOrg"
label="สถานที่ยื่นขอลาออกจากราชการ"
:readonly="routeName != 'AddLeave'"
:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
/>
<datepicker class="col-2" menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply readonly borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
@ -70,7 +78,16 @@
</q-input>
</template>
</datepicker>
<q-input class="col-12" dense outlined v-model="noteReason" label="เหตุผลที่ลาออกจากราชการ" type="textarea" :readonly="routeName != 'AddLeave'" />
<q-input
class="col-12"
dense
outlined
v-model="noteReason"
label="เหตุผลที่ลาออกจากราชการ"
type="textarea"
:readonly="routeName != 'AddLeave'"
:rules="[val => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`]"
/>
<div class="col-12 row">
<q-uploader
@ -88,128 +105,80 @@
</div>
</div>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของผงคบบญชา
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderReject !== null
? statusOrder(dataDetail.commanderReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderRejectDate !== null
? date2Thai(dataDetail.commanderRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === false"
>
{{
dataDetail.commanderApproveReason !== null
? dataDetail.commanderApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === true"
>
{{
dataDetail.commanderRejectReason !== null
? dataDetail.commanderRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">ผลการพจารณาของผงคบบญชา</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{ dataDetail.commanderReject !== null ? statusOrder(dataDetail.commanderReject) : "-" }}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{ dataDetail.commanderRejectDate !== null ? date2Thai(dataDetail.commanderRejectDate) : "-" }}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div class="col-12 text-detail" v-if="dataDetail.commanderReject === false">
{{ dataDetail.commanderApproveReason !== null ? dataDetail.commanderApproveReason : "-" }}
</div>
<div class="col-12 text-detail" v-if="dataDetail.commanderReject === true">
{{ dataDetail.commanderRejectReason !== null ? dataDetail.commanderRejectReason : "-" }}
</div>
</div>
</div>
</div>
</q-card>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
ผลการพจารณาของผอำนาจ
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchReject !== null
? statusOrder(dataDetail.oligarchReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchRejectDate !== null
? date2Thai(dataDetail.oligarchRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.oligarchReject == false"
>
{{
dataDetail.oligarchApproveReason !== null
? dataDetail.oligarchApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-else-if="dataDetail.oligarchReject == true"
>
{{
dataDetail.oligarchRejectReason !== null
? dataDetail.oligarchRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
</q-card>
<div class="row col-12 q-pa-md" v-if="routeName != 'AddLeave'">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="orange" label="ยกเลิกการลาออก" @click="cancelResing(id.value)" :disable="tranferOrg == '' && noteReason == ''" />
</div>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">ผลการพจารณาของผอำนาจ</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{ dataDetail.oligarchReject !== null ? statusOrder(dataDetail.oligarchReject) : "-" }}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">นสดทายทบย</div>
<div class="col-12 text-detail">
{{ dataDetail.oligarchRejectDate !== null ? date2Thai(dataDetail.oligarchRejectDate) : "-" }}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคดเหนและเหตผล</div>
<div class="col-12 text-detail" v-if="dataDetail.oligarchReject == false">
{{ dataDetail.oligarchApproveReason !== null ? dataDetail.oligarchApproveReason : "-" }}
</div>
<div class="col-12 text-detail" v-else-if="dataDetail.oligarchReject == true">
{{ dataDetail.oligarchRejectReason !== null ? dataDetail.oligarchRejectReason : "-" }}
</div>
</div>
</div>
</div>
</q-card>
<div class="row col-12 q-pa-md" v-if="routeName != 'AddLeave'">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="orange" label="ยกเลิกการลาออก" @click="cancelResing" :disable="tranferOrg == '' && noteReason == ''" />
</div>
</div>
<q-separator v-if="routeName == 'AddLeave'" />
<div class="row col-12 q-pa-md" v-if="routeName == 'AddLeave'">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอลาออก" @click="saveResing" :disable="tranferOrg == '' && noteReason == ''" />
<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอลาออก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
</div>
</q-card>
</div>
</q-form>
</div>
</div>
</template>
@ -221,11 +190,13 @@ import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"
import type { QForm } from "quasar"
const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } = mixin
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
const router = useRouter()
const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar()
const routeName = router.currentRoute.value.name
const id = ref<string>("")
@ -238,36 +209,36 @@ const noteReason = ref("")
const nameFile = ref<string>("")
const dataDetail = ref<any>({
datetext: "",
activeDate: new Date(),
createdAt: new Date(),
firstName: "",
id: "",
isActive: true,
lastName: "",
location: "",
organizationPositionOld: "",
positionLevelOld: "",
positionNumberOld: "",
positionTypeOld: "",
prefix: "",
profileId: "",
reason: "",
salary: 0,
sendDate: new Date(),
status: "",
statustext: "",
fullname: "",
});
datetext: "",
activeDate: new Date(),
createdAt: new Date(),
firstName: "",
id: "",
isActive: true,
lastName: "",
location: "",
organizationPositionOld: "",
positionLevelOld: "",
positionNumberOld: "",
positionTypeOld: "",
prefix: "",
profileId: "",
reason: "",
salary: 0,
sendDate: new Date(),
status: "",
statustext: "",
fullname: "",
})
const statusOrder = (val: boolean) => {
switch (val) {
case true:
return "ยับยั้งการลาออก";
case false:
return "อนุมัติการลาออก";
}
};
switch (val) {
case true:
return "ยับยั้งการลาออก"
case false:
return "อนุมัติการลาออก"
}
}
onMounted(() => {
if (route.params.id !== undefined) {
@ -275,6 +246,18 @@ onMounted(() => {
fectDataresign(id.value)
}
})
const saveData = async () => {
console.log(myform.value)
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
if (saveDataTest) {
saveResing()
}
})
}
}
const saveResing = () => {
$q.dialog({
title: "ยืนยันการยื่นข้อมูลแบบสอบถาม",
@ -289,12 +272,14 @@ const saveResing = () => {
createFormresign()
})
.onCancel(() => {})
.onDismiss(() => {})
.onDismiss(() => {
fails($q, "กรุณากรอกอัพโหลดเอกสารเพิ่มเติม")
})
}
const cancelResing = () => {
console.log(id);
console.log(id)
$q.dialog({
title: "ยืนยันการยกเลิกการลาออก",
message: "ต้องการยื่นข้อมูลยกเลิกการลาออกนี้ใช่หรือไม่?",
@ -305,33 +290,30 @@ const cancelResing = () => {
persistent: true,
})
.onOk(async () => {
if (route.params.id !== undefined) {
id.value = route.params.id.toString()
deleteResting(id.value)
}
if (route.params.id !== undefined) {
id.value = route.params.id.toString()
deleteResting(id.value)
}
})
.onCancel(() => {})
.onDismiss(() => {})
}
const deleteResting = async(id :string) => {
const deleteResting = async (id: string) => {
showLoader()
await http
.delete(config.API.resingByid(id))
.then(() => {
success($q, "ยกเลิกการลาออกขอสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
.delete(config.API.resingByid(id))
.then(() => {
success($q, "ยกเลิกการลาออกขอสำเร็จ")
})
.catch(e => {
messageError($q, e)
})
.finally(() => {
hideLoader()
})
}
const createFormresign = async () => {
const formData = new FormData()
const blob = files.value.slice(0, files.value[0].size)
@ -364,8 +346,12 @@ const fectDataresign = async (id: string) => {
.then((res: any) => {
let data = res.data.result
// console.log(data);
;(tranferOrg.value = data.location), (dateCommand.value = data.sendDate), (dateLeave.value = data.activeDate), (noteReason.value = data.reason), (files.value = data.docs) ,(dataDetail.value = data)
;(tranferOrg.value = data.location),
(dateCommand.value = data.sendDate),
(dateLeave.value = data.activeDate),
(noteReason.value = data.reason),
(files.value = data.docs),
(dataDetail.value = data)
})
.catch((e: any) => {
console.log(e)