ปรับการลาออก

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-08-29 14:17:00 +07:00
parent 240862be2c
commit a08c9bed9b
2 changed files with 390 additions and 372 deletions

View file

@ -1,3 +1,4 @@
import type { StringDictionary } from "quasar";
import env from "../index";
const retirement = `${env.API_URI}/retirement`;
const retirementDischarge = `${retirement}/discharge`;
@ -24,8 +25,8 @@ export default {
listResign: () => `${retirement}/resign`,
resignReport: `${retirement}/resign/report`,
resingByid: (id: string) => `${retirement}/resign/${id}`,
resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
resignConfirm: (role: String, id: string) => `${retirement}/resign/${role}/confirm/${id}`,
resignReject: (role: String, id: string) => `${retirement}/resign/${role}/reject/${id}`,
listExitInterview: () => `${retirement}/resign/questionnaire`,
ExitInterviewByid: (id: string) => `${retirement}/resign/questionnaire/${id}`,
ExitInterviewReport: `${retirement}/resign/questionnaire/report`,

View file

@ -1,3 +1,331 @@
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { useQuasar, QForm } from "quasar";
import { ref, onMounted } from "vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRetirementDataStore } from "@/modules/06_retirement/store";
import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type {
ResponseItems,
TypeFile,
} from "@/modules/06_retirement/interface/response/Main";
import type { QTableProps } from "quasar";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const RetirementData = useRetirementDataStore();
const {
messageError,
date2Thai,
showLoader,
hideLoader,
success,
dialogMessage,
dialogConfirm,
} = mixin;
const { statusText } = RetirementData;
const roleUser = ref<string>("");
const id = ref<string>(route.params.id.toString());
const myForm = ref<QForm | null>(null);
const myFormConfirm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
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: "",
});
const organizationPositionOld = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const posNo = ref<string>("");
const salary = ref<number>(0);
const date = ref<Date | null>(null);
const dateLeave = ref<Date | null>(null);
const reason = ref<string>("");
const location = ref<string>("");
const status = ref<string>("");
const modal = ref<boolean>(false);
const actionPass = ref<boolean>(false);
const reasonReign = ref<string>("");
const dateBreak = ref<Date | null>(null);
const rows = ref<TypeFile[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fileName",
align: "left",
label: "ชื่อไฟล์",
sortable: true,
field: "fileName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "btnMicrosoft",
align: "right",
label: "ปุ่ม",
sortable: true,
field: "btnMicrosoft",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const closeModal = () => (modal.value = false);
const openModal = () => (modal.value = true);
onMounted(async () => {
fetchData(id.value);
if (keycloak.tokenParsed !== undefined) {
const commander = await keycloak.tokenParsed.role.includes("commander");
const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
if (commander) {
roleUser.value = "commander";
} else if (oligarch) {
roleUser.value = "oligarch";
} else {
roleUser.value = "admin";
}
console.log(roleUser.value);
}
});
const diffDate = () => {
if (date.value !== null && dateLeave.value !== null) {
const time = dateLeave.value.getTime() - date.value.getTime();
// -
const day = time / (1000 * 3600 * 24);
if (day < 30) {
return true;
}
return false;
}
return false;
};
const fetchData = async (id: string) => {
showLoader();
await http
.get(config.API.resingByid(id))
.then((res: any) => {
const data = res.data.result;
console.log(data);
let list: TypeFile[] = [];
if (data.docs.length > 0) {
data.docs.map((doc: TypeFile) => {
list.push({
pathName: doc.pathName ?? "",
fileName: doc.fileName ?? "",
});
});
}
rows.value = list;
dataDetail.value = data;
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.salary ? data.salary : 0;
date.value = data.sendDate ? new Date(data.sendDate) : null;
dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
reason.value = data.reason ?? "";
location.value = data.location ?? "";
status.value = data.status ?? "";
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const popUp = (action: "pass" | "passNot") => {
reasonReign.value = "";
dateBreak.value = null;
actionPass.value = action === "pass";
openModal();
};
const conditionPopup = () => {
if (myFormConfirm.value !== null) {
myFormConfirm.value.validate().then(async (check) => {
if (check) {
if (actionPass.value) {
await confirmpopUp();
} else {
await rejectpopUp();
}
}
});
}
};
const confirmpopUp = async () => {
dialogConfirm(
$q,
async () => {
const body = {
reason: reasonReign.value,
};
await http
.put(config.API.resignConfirm(roleUser.value, id.value), body)
.then(() => {
console.log("ยืนยัน");
success($q, "การอนุมัติสำเร็จ");
closeModal();
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
fetchData(id.value);
});
},
"ยืนยันการอนุมัติ",
"ต้องการยืนยันการอนุมัติการลานี้หรือไม่ ?"
);
};
const rejectpopUp = async () => {
dialogConfirm(
$q,
async () => {
const body = {
reason: reasonReign.value,
date: dateBreak.value,
};
await http
.put(config.API.resignReject(roleUser.value, id.value), body)
.then(() => {
success($q, "การยับยั้งสำเร็จ");
closeModal();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
fetchData(id.value);
});
},
"ยืนยันการยับยั้ง",
"ต้องการยืนยันการยับยั้งนี้หรือไม่ ?"
);
};
const redirectToRegistry = (id: string) => {
router.push(`/registry/${id}`);
};
const conditionSave = () => {
if (myForm.value !== null) {
myForm.value.validate().then((success) => {
if (success) {
dialogMessage(
$q,
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลรายละเอียดการลาออก",
"mdi-help-circle-outline",
"ตกลง",
"public",
async () => await saveData(),
undefined
);
}
});
}
};
const saveData = async () => {
const formData = new FormData();
const send = date.value !== null ? new Date(date.value).toUTCString() : "";
const activeDate =
dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
formData.append("Location", location.value);
formData.append("SendDate", send);
formData.append("ActiveDate", activeDate);
formData.append("Reason", reason.value);
formData.append("OrganizationPositionOld", organizationPositionOld.value);
formData.append("PositionTypeOld", positionTypeOld.value);
formData.append("PositionLevelOld", positionLevelOld.value);
formData.append("PositionNumberOld", posNo.value);
formData.append("AmountOld", salary.value.toString());
salary;
showLoader();
await http
.put(config.API.resingByid(id.value), formData)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData(id.value);
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const statusOrder = (val: boolean) => {
switch (val) {
case true:
return "ยับยั้งการลาออก";
case false:
return "อนุมัติการลาออก";
}
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -75,7 +403,13 @@
<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>
<q-space />
<div class="q-gutter-x-sm" v-if="dataDetail.status === 'WAITTING'">
<div
class="q-gutter-x-sm"
v-if="
(roleUser === 'commander' && dataDetail.commanderReject === null) ||
(roleUser === 'oligarch' && dataDetail.oligarchReject === null)
"
>
<q-btn
outline
color="primary"
@ -167,7 +501,16 @@
{{ props.row.fileName }}
</q-td>
<q-td key="btnMicrosoft" :props="props">
<q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
<q-btn
type="a"
target="_blank"
:href="props.row.pathName"
flat
dense
round
color="red"
icon="picture_as_pdf"
>
<q-tooltip>ไฟล PDF</q-tooltip>
</q-btn>
</q-td>
@ -187,15 +530,33 @@
<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">{{ "อนุมัติ/ยับยั้ง" }}</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">{{ date2Thai(new Date()) }}</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">{{ "ความคิดเห็นและเหตุผล" }}</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderRejectReason !== null
? dataDetail.commanderRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
@ -211,15 +572,33 @@
<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">{{ "อนุมัติ/ยับยั้ง" }}</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">{{ date2Thai(new Date()) }}</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">{{ "ความคิดเห็นและเหตุผล" }}</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchRejectReason !== null
? dataDetail.oligarchRejectReason
: "-"
}}
</div>
</div>
</div>
</div>
@ -628,369 +1007,7 @@
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { useQuasar, QForm } from "quasar";
import { ref, onMounted } from "vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRetirementDataStore } from "@/modules/06_retirement/store";
import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
ResponseItems,
TypeFile,
} from "@/modules/06_retirement/interface/response/Main";
import type { QTableProps } from "quasar";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const RetirementData = useRetirementDataStore();
const {
messageError,
date2Thai,
showLoader,
hideLoader,
success,
dialogMessage,
} = mixin;
const { statusText } = RetirementData;
const id = ref<string>(route.params.id.toString());
const myForm = ref<QForm | null>(null);
const myFormConfirm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const dataDetail = ref<ResponseItems>({
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 organizationPositionOld = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const posNo = ref<string>("");
const salary = ref<number>(0);
const date = ref<Date | null>(null);
const dateLeave = ref<Date | null>(null);
const reason = ref<string>("");
const location = ref<string>("");
const status = ref<string>("");
const modal = ref<boolean>(false);
const actionPass = ref<boolean>(false);
const reasonReign = ref<string>("");
const dateBreak = ref<Date | null>(null);
const rows = ref<TypeFile[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fileName",
align: "left",
label: "ชื่อไฟล์",
sortable: true,
field: "fileName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "btnMicrosoft",
align: "right",
label: "ปุ่ม",
sortable: true,
field: "btnMicrosoft",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const closeModal = () => (modal.value = false);
const openModal = () => (modal.value = true);
// const modalPass = ref<boolean>(false);
// const modalPassNot = ref<boolean>(false);
onMounted(() => {
fetchData(id.value);
});
const diffDate = () => {
if (date.value !== null && dateLeave.value !== null) {
const time = dateLeave.value.getTime() - date.value.getTime();
// -
const day = time / (1000 * 3600 * 24);
if (day < 30) {
return true;
}
return false;
}
return false;
};
const fetchData = async (id: string) => {
showLoader();
await http
.get(config.API.resingByid(id))
.then((res: any) => {
const data = res.data.result;
// console.log(data);
let list: TypeFile[] = [];
if (data.docs.length > 0) {
data.docs.map((doc: TypeFile) => {
list.push({
pathName: doc.pathName ?? "",
fileName: doc.fileName ?? "",
});
console.log(doc.fileName);
});
}
rows.value = list;
dataDetail.value = data;
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.salary ? data.salary : 0;
date.value = data.sendDate ? new Date(data.sendDate) : null;
dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
reason.value = data.reason ?? "";
location.value = data.location ?? "";
status.value = data.status ?? "";
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const popUp = (action: "pass" | "passNot") => {
reasonReign.value = "";
dateBreak.value = null;
actionPass.value = action === "pass";
openModal();
// if (action === "pass") {
// $q.dialog({
// title: "",
// message: "?",
// cancel: {
// flat: true,
// color: "negative",
// },
// persistent: true,
// }).onOk(async () => {
// confirmpopUp();
// });
// } else if (action === "passNot") {
// $q.dialog({
// title: "",
// message: "?",
// cancel: {
// flat: true,
// color: "negative",
// },
// persistent: true,
// }).onOk(async () => {
// rejectpopUp();
// });
// }
};
const conditionPopup = () => {
if (myFormConfirm.value !== null) {
myFormConfirm.value.validate().then(async (check) => {
if (check) {
if (actionPass.value) {
await confirmpopUp();
} else {
await rejectpopUp();
}
}
});
}
};
const confirmpopUp = async () => {
const body = {
reason: reasonReign.value,
};
await http
.put(config.API.resignConfirm(id.value), body)
.then(() => {
console.log("ยืนยัน");
success($q, "การอนุมัติสำเร็จ");
closeModal();
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
fetchData(id.value);
});
};
const rejectpopUp = async () => {
const body = {
reason: reasonReign.value,
};
await http
.put(config.API.resignReject(id.value), body)
.then(() => {
success($q, "การยับยั้งสำเร็จ");
closeModal();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
fetchData(id.value);
});
};
const redirectToRegistry = (id: string) => {
router.push(`/registry/${id}`);
};
const conditionSave = () => {
if (myForm.value !== null) {
myForm.value.validate().then((success) => {
if (success) {
dialogMessage(
$q,
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลรายละเอียดการลาออก",
"mdi-help-circle-outline",
"ตกลง",
"public",
async () => await saveData(),
undefined
);
}
});
}
};
const saveData = async () => {
const formData = new FormData();
const send = date.value !== null ? new Date(date.value).toUTCString() : "";
const activeDate =
dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
formData.append("Location", location.value);
formData.append("SendDate", send);
formData.append("ActiveDate", activeDate);
formData.append("Reason", reason.value);
formData.append("OrganizationPositionOld", organizationPositionOld.value);
formData.append("PositionTypeOld", positionTypeOld.value);
formData.append("PositionLevelOld", positionLevelOld.value);
formData.append("PositionNumberOld", posNo.value);
formData.append("AmountOld", salary.value.toString());
salary;
showLoader();
await http
.put(config.API.resingByid(id.value), formData)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData(id.value);
hideLoader();
});
};
// const clickClose = () => {
// userNote.value = "";
// modalPass.value = false;
// modalPassNot.value = false;
// };
// const savePass = () => {
// $q.dialog({
// title: "",
// message: " ?",
// cancel: {
// flat: true,
// const: "negative",
// },
// persistent: true,
// })
// .onOk(() => {
// modalPass.value = false;
// console.log("----MSG---- :", userNote.value);
// console.log("passSave (close)");
// userNote.value = "";
// })
// .onCancel(() => {})
// .onDismiss(() => {});
// };
// const savePassNot = () => {
// $q.dialog({
// title: "",
// message: " ?",
// cancel: {
// flat: true,
// const: "negative",
// },
// persistent: true,
// })
// .onOk(() => {
// modalPass.value = false;
// console.log("----MSG---- :", userNote.value);
// console.log("passSaveNot (close)");
// userNote.value = "";
// })
// .onCancel(() => {})
// .onDismiss(() => {});
// };
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;