feat
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
9256f6cd16
commit
6aa8a61b40
3 changed files with 362 additions and 2 deletions
217
src/modules/04_registryPerson/components/DialogResingn.vue
Normal file
217
src/modules/04_registryPerson/components/DialogResingn.vue
Normal file
|
|
@ -0,0 +1,217 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** import components*/
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
|
||||||
|
|
||||||
|
//use
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const { showLoader, hideLoader, messageError, date2Thai, dateToISO } =
|
||||||
|
useCounterMixin();
|
||||||
|
|
||||||
|
//props
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
location: "",
|
||||||
|
activeDate: null as Date | null,
|
||||||
|
reason: "",
|
||||||
|
files: null as File | null,
|
||||||
|
remark: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const reasonOp = ref<DataOption[]>([
|
||||||
|
{
|
||||||
|
id: "CAREER",
|
||||||
|
name: "ประกอบอาชีพอื่น",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "MOVE",
|
||||||
|
name: "รับราชการสังกัดอื่น",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "FAMILY",
|
||||||
|
name: "ดูแลบิดามารดา",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "EDUCATION",
|
||||||
|
name: "ศึกษาต่อ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "OTHER",
|
||||||
|
name: "อื่น ๆ",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
try {
|
||||||
|
showLoader();
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("Location", form.location);
|
||||||
|
formData.append(
|
||||||
|
"ActiveDate",
|
||||||
|
form.activeDate !== null ? dateToISO(form.activeDate) : ""
|
||||||
|
);
|
||||||
|
formData.append("Reason", form.reason);
|
||||||
|
if (form.files) {
|
||||||
|
formData.append("file", form.files);
|
||||||
|
}
|
||||||
|
if (form.reason === "OTHER") {
|
||||||
|
formData.append("remark", form.remark);
|
||||||
|
}
|
||||||
|
|
||||||
|
// await http.post(config.API.listtransfer(), formData);
|
||||||
|
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
} catch (error) {
|
||||||
|
messageError($q, error);
|
||||||
|
} finally {
|
||||||
|
hideLoader();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function ปิด popup*/
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 40vw; max-width: 50vw">
|
||||||
|
<q-form greedy @submit.prevent="onSubmit">
|
||||||
|
<DialogHeader :tittle="'ขอลาออก'" :close="closeDialog" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="q-pa-md">
|
||||||
|
<div class="col-12 row q-col-gutter-sm">
|
||||||
|
<div class="col-md-9 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
class="inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="form.location"
|
||||||
|
hide-bottom-space
|
||||||
|
label="สถานที่ยื่นขอลาออกจากราชการ"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3 col-sm-12">
|
||||||
|
<datepicker
|
||||||
|
class="inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="form.activeDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
class="full-width"
|
||||||
|
:model-value="
|
||||||
|
form.activeDate != null
|
||||||
|
? date2Thai(form.activeDate)
|
||||||
|
: null
|
||||||
|
"
|
||||||
|
:label="`${'วันที่ขอลาออกจากราชการ'}`"
|
||||||
|
:rules="[
|
||||||
|
(val: string) =>
|
||||||
|
!!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<q-select
|
||||||
|
v-model="form.reason"
|
||||||
|
class="inputgreen'"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:options="reasonOp"
|
||||||
|
label="เหตุผลที่ลาออกจากราชการ"
|
||||||
|
:rules="[
|
||||||
|
(val: string) => !!val || `${'กรุณาเลือกเหตุผลที่ลาออกจากราชการ'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12" v-if="form.reason == 'OTHER'">
|
||||||
|
<q-input
|
||||||
|
class="inputgreen'"
|
||||||
|
v-model="form.remark"
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
type="textarea"
|
||||||
|
label="ระบุเหตุผล"
|
||||||
|
:rules="[
|
||||||
|
(val: string) => !!val || `${'กรุณาระบุเหตุผล'}`,
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<q-file
|
||||||
|
v-model="form.files"
|
||||||
|
class="inputgreen"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
accept=".pdf"
|
||||||
|
label="เอกสารเพิ่มเติม"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" /> </template
|
||||||
|
></q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn type="submit" :label="`บันทึก`" color="public">
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
118
src/modules/04_registryPerson/components/DialogTransfer.vue
Normal file
118
src/modules/04_registryPerson/components/DialogTransfer.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
div
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** import components*/
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
//use
|
||||||
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const { showLoader, hideLoader, messageError, success } = useCounterMixin();
|
||||||
|
|
||||||
|
//props
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
tranferOrg: "",
|
||||||
|
noteReason: "",
|
||||||
|
files: null as File | null,
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
try {
|
||||||
|
showLoader();
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("Organization", form.tranferOrg);
|
||||||
|
formData.append("Reason", form.noteReason);
|
||||||
|
if (form.files) {
|
||||||
|
formData.append("file", form.files);
|
||||||
|
}
|
||||||
|
|
||||||
|
// await http.post(config.API.listtransfer(), formData);
|
||||||
|
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
} catch (error) {
|
||||||
|
messageError($q, error);
|
||||||
|
} finally {
|
||||||
|
hideLoader();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function ปิด popup*/
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
form.tranferOrg = "";
|
||||||
|
form.noteReason = "";
|
||||||
|
form.files = null;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 40vw; max-width: 50vw">
|
||||||
|
<q-form greedy @submit.prevent="onSubmit">
|
||||||
|
<DialogHeader :tittle="'ขอโอน'" :close="closeDialog" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="q-pa-md">
|
||||||
|
<div class="col-12 row q-col-gutter-sm">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
class="inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="form.tranferOrg"
|
||||||
|
hide-bottom-space
|
||||||
|
label="หน่วยงานที่ขอโอนไป"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
class="inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="form.noteReason"
|
||||||
|
label="เหตุผล"
|
||||||
|
hide-bottom-space
|
||||||
|
type="textarea"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<q-file
|
||||||
|
v-model="form.files"
|
||||||
|
class="inputgreen"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
accept=".pdf"
|
||||||
|
label="เอกสารเพิ่มเติม"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" /> </template
|
||||||
|
></q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn type="submit" :label="`บันทึก`" color="public">
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -33,10 +33,15 @@ const DialogHeader = defineAsyncComponent(
|
||||||
const TabMain = defineAsyncComponent(
|
const TabMain = defineAsyncComponent(
|
||||||
() => import("@/modules/04_registryPerson/components/detail/TabMain.vue")
|
() => import("@/modules/04_registryPerson/components/detail/TabMain.vue")
|
||||||
);
|
);
|
||||||
|
|
||||||
const DialogRetired = defineAsyncComponent(
|
const DialogRetired = defineAsyncComponent(
|
||||||
() => import("@/modules/04_registryPerson/components/DialogRetired.vue")
|
() => import("@/modules/04_registryPerson/components/DialogRetired.vue")
|
||||||
);
|
);
|
||||||
|
const DialogResign = defineAsyncComponent(
|
||||||
|
() => import("@/modules/04_registryPerson/components/DialogResingn.vue")
|
||||||
|
);
|
||||||
|
const DialogTransfer = defineAsyncComponent(
|
||||||
|
() => import("@/modules/04_registryPerson/components/DialogTransfer.vue")
|
||||||
|
);
|
||||||
|
|
||||||
/** use*/
|
/** use*/
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
@ -72,7 +77,10 @@ const reasonDeath = ref(""); //เหตุผลการเสียชีว
|
||||||
const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
|
const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
|
||||||
const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
|
const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
|
||||||
|
|
||||||
const modalDialogRetired = ref<boolean>(false);
|
const modalDialogResign = ref<boolean>(false); //ป๊อบอัพขอลาออก
|
||||||
|
const modalDialogTransfer = ref<boolean>(false); //ป๊อบอัพขอโอน
|
||||||
|
const modalDialogRetired = ref<boolean>(false); //ป๊อบอัพข้อมูลการพ้นจากราชการ
|
||||||
|
|
||||||
//รายการเมนูออกคำสั่งข้าราชการ
|
//รายการเมนูออกคำสั่งข้าราชการ
|
||||||
const baseItemsMenu = ref<DataOptionSys[]>([
|
const baseItemsMenu = ref<DataOptionSys[]>([
|
||||||
{
|
{
|
||||||
|
|
@ -95,6 +103,8 @@ const baseItemsMenu = ref<DataOptionSys[]>([
|
||||||
name: "ให้ออกจากราชการ",
|
name: "ให้ออกจากราชการ",
|
||||||
system: "SYS_DISMISS",
|
system: "SYS_DISMISS",
|
||||||
},
|
},
|
||||||
|
{ id: "7", name: "ขอโอน", system: "SYS_TRANSFER_REQ" },
|
||||||
|
{ id: "8", name: "ขอลาออก", system: "SYS_RESIGN" },
|
||||||
{
|
{
|
||||||
id: "6",
|
id: "6",
|
||||||
name: "อื่นๆ",
|
name: "อื่นๆ",
|
||||||
|
|
@ -765,6 +775,14 @@ const titleName = computed(() => {
|
||||||
: "ทะเบียนประวัติ";
|
: "ทะเบียนประวัติ";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function openDialogSendTransferResign(
|
||||||
|
system: "SYS_TRANSFER_REQ" | "SYS_RESIGN"
|
||||||
|
) {
|
||||||
|
system === "SYS_TRANSFER_REQ"
|
||||||
|
? (modalDialogTransfer.value = true)
|
||||||
|
: (modalDialogResign.value = true);
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchDataPersonal();
|
await fetchDataPersonal();
|
||||||
});
|
});
|
||||||
|
|
@ -830,6 +848,9 @@ onMounted(async () => {
|
||||||
? outPost()
|
? outPost()
|
||||||
: item.name == 'อื่นๆ'
|
: item.name == 'อื่นๆ'
|
||||||
? otherPost()
|
? otherPost()
|
||||||
|
: item.system === 'SYS_TRANSFER_REQ' ||
|
||||||
|
item.system === 'SYS_RESIGN'
|
||||||
|
? openDialogSendTransferResign(item.system)
|
||||||
: null
|
: null
|
||||||
"
|
"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
|
|
@ -1211,6 +1232,10 @@ onMounted(async () => {
|
||||||
|
|
||||||
<!-- Dialog ข้อมูลการพ้นจากราชการ -->
|
<!-- Dialog ข้อมูลการพ้นจากราชการ -->
|
||||||
<DialogRetired v-model:modal="modalDialogRetired" :data="formDetail" />
|
<DialogRetired v-model:modal="modalDialogRetired" :data="formDetail" />
|
||||||
|
<!-- ลาออก -->
|
||||||
|
<DialogResign v-model:modal="modalDialogResign" />
|
||||||
|
<!-- ขอโอน -->
|
||||||
|
<DialogTransfer v-model:modal="modalDialogTransfer" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue