hrms-mgt/src/modules/07_insignia/views/02_ManageMain.vue
2024-11-18 13:15:01 +07:00

759 lines
23 KiB
Vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
import { useroleUserDataStore } from "@/stores/roleUser";
import { checkPermission } from "@/utils/permissions";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataStructureTree } from "@/interface/main";
import type {
OptionData,
OptionRound,
DataStat,
} from "@/modules/07_insignia/interface/index/Main";
import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";
/**import Componrnts*/
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue"; //คนไม่ที่ยืนขอ
import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue"; //คนที่ถูกลบ
import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue"; //หน่วยงานที่ไม่ได้ส่งชื่อ
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
/**use */
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const DataStore = useInsigniaDataStore();
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
/**
* ตัวแปร
*/
const loadview = ref<boolean>(false); //แสดง View
const hideBottom = ref<boolean>(false);
const round = ref<string>(""); //รอยการเสนอขอ
const roundName = ref<string>(""); //ชื่อรอบการเสนอ
const optionRound = ref<OptionRound[]>([]);
const optiontypeOc = ref<OptionData[]>([]);
const tab = ref<string>(""); //tab รายชื่อ
//ข้อมูล สถิติ
const stat = ref<DataStat>({
allUserUser: 0,
orgAllCount: 0,
orgNoSendCount: 0,
orgSendCount: 0,
});
const requestNote = ref<string>(""); //หมายเหตุ ตีกลับ
const requestStatus = ref<string>(""); //สถานะของรอบการเสนอขอ
const requestId = ref<string>(""); //id ของรอบการเสนอขอ
const document = ref<string>(""); //เอกสารดาวน์โหลด
const fileUpload = ref<any>(null); //ไฟล์อัปโหลด
const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
const modalbackInsignia2Role = ref<boolean>(false); // popup หมายเหตุการตีกลับ
/**
* function เรียกรอบการเสนอขอพระราชทานเครื่อง
*/
async function fecthlistRound() {
showLoader();
loadview.value = false;
await http
.get(config.API.listRoundInsignia(), { params: { path: "MANAGE" } })
.then(async (res) => {
optionRound.value = await res.data.result.map((e: ResponsePeriod) => ({
id: e.period_id,
year: e.period_year,
name: e.period_name,
period_revision: e.period_revision,
}));
//มีรอบการเสนอขอพระราชทานเครื่องแสดง UI
if (optionRound.value.length !== 0) {
DataStore.optionRound = optionRound.value;
// const lastValue = optionRound.value[0];
// await fetchListOrg(lastValue.period_revision);
// await fecthAgency(lastValue.period_revision);
// if (DataStore.roundId) {
// round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
// } else {
// round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
// }
// // await fecthStat(round.value);
// DataStore.roundId = round.value;
// roundName.value = lastValue.name;
loadview.value = true;
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง
*/
async function fecthStat(id: string) {
if (DataStore.isOfficer) {
await http
.get(config.API.insigniaDashboard(id))
.then((res) => {
stat.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
});
}
}
/**
* function fetch ข้อมูลโครองสร้างปัจจุบัน
* @param id โครงสร้างปัจจุบัน
*/
async function fetchListOrg(id: string) {
if (DataStore.isOfficer) {
await http
.get(config.API.orgByIdSystemRoot(id, route.meta.Key as string))
.then(async (res) => {
const data = res.data.result;
if (data.length !== 0) {
optiontypeOc.value = await res.data.result.map(
(item: DataStructureTree) => ({
id: item.orgTreeId,
name: item.orgName,
})
);
await DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่ DataStore
}
})
.catch((err) => {
messageError($q, err);
});
}
}
/**
* funcion เช็คหน่วยงาน
*/
async function fecthAgency(id: string) {
await http
.get(config.API.keycloakPosition(), {
params: {
revisionId: id,
},
})
.then((res) => {
DataStore.agency = res.data.result.rootId;
DataStore.typeOc = DataStore.agency;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* function เรียกประเภทเครื่องราช
*/
async function fecthInsignia() {
if (DataStore.dataInsigniaType.length === 0) {
await http
.get(config.API.insigniaOrg)
.then((res) => {
const data = res.data.result;
DataStore.fetchInsigniaType(data);
})
.catch((err) => {
messageError($q, err);
});
}
}
async function fetchCheckIsofficer() {
http
.get(config.API.checkIsofficer + `SYS_INSIGNIA_MANAGE`)
.then((res) => {
const data = res.data.result;
DataStore.isStaff = data.isStaff;
DataStore.isOfficer = data.isOfficer;
DataStore.isDirector = data.isDirector;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* function เปลี่ยนรอบการแสดง
*/
async function changround() {
DataStore.roundId = round.value;
// get round name
await fecthStat(round.value); //เรียกดู Stat รอบที่เลือก
const roundFilter = optionRound.value.find(
(x: OptionRound) => x.id === round.value
);
if (roundFilter) {
await fetchListOrg(roundFilter?.period_revision);
await fecthAgency(roundFilter?.period_revision);
roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชฯ ปี ${
roundFilter.year + 543
}`;
}
var organization =
DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency ถ้าไม่มีเรียนตาม Oc ที่เลือก
? DataStore.agency
: DataStore.typeOc;
await fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
}
/**
* function เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
* @param roundId id รอบการเสนอขอ
* @param ocId id หน่วยงาน
* @param role ประเภท officer,employee
* @param status สถานะ
*/
async function fecthInsigniaByOc(
roundId: string,
ocId: string,
role: string,
status: string
) {
DataStore.rows = [];
if (roundId && ocId && role && status) {
showLoader();
await http
.get(config.API.insigniaList(roundId, ocId, role, status))
.then(async (res) => {
requestNote.value = res.data.result.requestNote;
requestStatus.value = res.data.result.requestStatus;
requestId.value = res.data.result.requestId;
document.value = res.data.result.document;
await DataStore.fetchData(res.data.result.items); // ส่งรายชื่อข้าราชการสามัญฯ
await DataStore.fetchDataInsignia(res.data.result); // ส่งข้อมูลรอบบการแสดง
// แสดงปุมล็อกข้อมูล
if (res.data.result.items !== null) {
if (res.data.result.items.length !== 0) {
hideBottom.value = true;
} else hideBottom.value = false;
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
}
/**
* function ยืนยันการส่งรอบการเสนอขอต่อ เฉพาะ รอบที่ requestStatus st1 และ st4
*/
function sendToDirector() {
dialogConfirm($q, () => {
showLoader();
http
.get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
.then(async () => {
await fecthStat(round.value);
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
await success($q, "บันทึกสำเร็จ");
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
});
}
/**
* function open popup แก้ไข*
*/
function popupBackToEdit() {
modalPopupBackToEdit.value = true;
}
/**
* function open popup ตีกลับ admin
*/
function popupBackToInsignia2Role() {
modalbackInsignia2Role.value = true;
}
/**
* funtion ยืนยันการ ตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
* @param reason หมายเหตุการตีกลับ
*/
function backToEdit(reason: string) {
dialogConfirm(
$q,
() => {
showLoader();
http
.put(
config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency),
{
reason: reason,
}
)
.then(async () => {
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
await success($q, "บันทึกสำเร็จ");
modalPopupBackToEdit.value = false;
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
},
"ยืนยันการตีกลับ",
"ต้องการยืนยันการตีกลับใช่หรือไม่?"
);
}
/**
* function ยืนยันการอนุมัติรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
*/
function directorApproved() {
dialogConfirm(
$q,
() => {
showLoader();
http
.get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
.then(async () => {
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
await fecthStat(round.value);
await success($q, "บันทึกสำเร็จ");
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
},
"ยืนยันการอนุมัติ",
"ต้องการยืนยันการอนุมัติใช่หรือไม่?"
);
}
/**
* function ยืนยันการตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st5 และ adminRole
* @param reason หมายเหตุการตีกลับ
*/
function backToEditinsignia2Role(reason: string) {
dialogConfirm($q, () => {
http
.put(config.API.rejectRequest(round.value, DataStore.typeOc), {
reason: reason,
})
.then(async () => {
await fecthInsigniaByOc(
round.value,
DataStore.typeOc,
"officer",
tab.value
);
await success($q, "การตีกลับสำเร็จ");
modalbackInsignia2Role.value = false;
})
.catch((err) => {
messageError($q, err);
});
});
}
/**
* function ยืนยันการล็อกข้อมูล
*/
function requestSendNote() {
dialogConfirm($q, () => {
showLoader();
http
.post(config.API.insigniaRequestSendNote(round.value), {
name: roundName.value,
})
.then(async () => {
await fecthInsigniaByOc(
round.value,
DataStore.typeOc,
"officer",
tab.value
);
await fecthStat(round.value);
await success($q, "บันทึกสำเร็จ");
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
});
}
/**
* function อัปโหลดไฟล์เจ้าหน้าที่
* @param event file
*/
async function uploadFile(event: any) {
dialogConfirm($q, async () => {
const selectedFile = event;
const formdata = new FormData();
formdata.append("Document", selectedFile);
await http
.put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
.then(async () => {
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
success($q, "อัปโหลดไฟล์สำเร็จ");
fileUpload.value = null;
})
.catch((err) => {
messageError($q, err);
}),
"ยืนยันการอัปโหลดไฟล์",
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?";
});
}
/**
* hook
*/
onMounted(async () => {
tab.value = DataStore.mainTab ?? "";
await Promise.all([fecthlistRound(), fecthInsignia(), fetchCheckIsofficer()]);
});
onUnmounted(() => {
DataStore.typeOc = "";
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายชอขาราชการสามญฯ ทธนขอพระราชทานเครองราชอสรยาภรณ
</div>
<q-card
bordered
class="row col-12 q-mt-sm"
v-if="
loadview &&
(DataStore.isDirector || DataStore.isOfficer || DataStore.isStaff)
"
>
<div class="row col-12 items-center bg-grey-1">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<q-select
borderless
dense
v-model="round"
:options="optionRound"
map-options
emit-value
option-value="id"
option-label="name"
@update:model-value="changround"
/>
<q-space />
<!-- สกจ. Freez ข้อมูล -->
<q-btn
v-if="
DataStore.isOfficer &&
DataStore.isLock !== true &&
hideBottom &&
checkPermission($route)?.attrIsUpdate
"
dense
unelevated
label="ล็อกข้อมูล"
color="public"
class="q-px-md q-ml-md"
@click="requestSendNote"
>
<q-tooltip>ล็อกข้อมูล</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div v-if="DataStore.isOfficer" class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-sm fit">
<!-- stat -->
<cardTop
:amount="stat.orgAllCount"
label="หน่วยงานทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.orgSendCount"
label="หน่วยงานที่ส่งรายชื่อเเล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.orgNoSendCount"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
color="#2EA0FF"
/>
<cardTop
:amount="stat.allUserUser"
label="จำนวนคนที่ยื่นขอ"
color="#4154B3"
/>
</div>
</div>
</div>
</q-card>
<q-card v-else>
<div class="q-pa-md q-gutter-sm">
<q-banner inline-actions rounded class="bg-grey-1 text-center">
ไม่มีข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
</q-banner>
</div>
</q-card>
<q-card
flat
bordered
class="col-12 q-mt-sm"
v-if="
loadview &&
(DataStore.isDirector || DataStore.isOfficer || DataStore.isStaff)
"
>
<div
v-if="
(DataStore.isStaff && requestStatus == 'st4') ||
(DataStore.isDirector && requestStatus == 'st5')
"
class="q-pa-md q-gutter-sm"
>
<q-banner
inline-actions
bordered
class="bg-orange-1 text-orange border-orange"
>
<q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ
{{ requestNote }}
</q-banner>
</div>
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
active-class="bg-teal-1"
indicator-color="primary"
align="left"
>
<q-tab name="pending" label="คนที่ยื่นขอ" />
<q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
<q-tab name="delete" label="คนที่ถูกลบออก" />
<q-tab
v-if="DataStore.isOfficer"
name="organization"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
/>
</q-tabs>
<div class="col-12"><q-separator /></div>
<q-tab-panels v-model="tab" animated>
<!-- แทบคนที่ยื่นขอ -->
<q-tab-panel name="pending" class="q-pa-none">
<tab1
:tab="tab"
:round-id="round"
:round-name="roundName"
:fecth-insignia-by-oc="fecthInsigniaByOc"
:request-status="requestStatus"
:fecth-stat="fecthStat"
/>
</q-tab-panel>
<!-- แทบคนที่ไม่ยื่นขอ -->
<q-tab-panel name="reject" class="q-pa-none">
<tab2
:tab="tab"
:round-id="round"
:fecth-insignia-by-oc="fecthInsigniaByOc"
/>
</q-tab-panel>
<!-- แทบคนที่ถูกลบออก -->
<q-tab-panel name="delete" class="q-pa-none">
<tab3
:tab="tab"
:round-id="round"
:fecth-insignia-by-oc="fecthInsigniaByOc"
/>
</q-tab-panel>
<!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
<q-tab-panel
v-if="DataStore.isOfficer"
name="organization"
class="q-pa-none"
>
<tab4 :tab="tab" :round-id="round" />
</q-tab-panel>
</q-tab-panels>
<q-toolbar class="q-py-md text-right">
<q-file
v-if="DataStore.isStaff && checkPermission($route)?.attrIsUpdate"
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
accept=".pdf"
:style="fileUpload === null ? 'width: 150px' : 'width: auto'"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
<q-btn
flat
round
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
/>
<div v-if="document">
<q-btn
size="md"
icon="mdi-download"
flat
round
color="primary"
v-if="DataStore.isStaff && checkPermission($route)?.attrIsGet"
:href="document"
target="_blank"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-btn
v-else-if="checkPermission($route)?.attrIsGet"
color="primary"
icon-right="mdi-download"
label="ดาวน์โหลดไฟล์"
outline
:href="document"
target="_blank"
>
<q-tooltip>ดาวนโหลด</q-tooltip></q-btn
>
</div>
<q-space />
<q-btn
v-if="
DataStore.isStaff &&
(requestStatus == 'st1' || requestStatus == 'st4') &&
checkPermission($route)?.attrIsUpdate
"
dense
unelevated
label="บันทึกข้อมูล"
color="public"
class="q-px-md"
@click="sendToDirector"
/>
<q-btn
v-if="
DataStore.isDirector &&
(requestStatus == 'st3' || requestStatus == 'st5') &&
checkPermission($route)?.attrIsUpdate
"
dense
unelevated
label="ตีกลับ"
color="orange"
class="q-px-md"
@click="popupBackToEdit"
/>
<q-btn
v-if="
DataStore.isDirector &&
requestStatus == 'st3' &&
checkPermission($route)?.attrIsUpdate
"
dense
unelevated
label="อนุมัติ"
color="positive"
class="q-px-md q-ml-md"
@click="directorApproved"
/>
<q-btn
v-if="
requestStatus == 'st6' &&
DataStore.isOfficer &&
!DataStore.isLock &&
checkPermission($route)?.attrIsUpdate
"
dense
unelevated
label="ตีกลับ"
color="orange"
class="q-px-md"
@click="popupBackToInsignia2Role"
/>
</q-toolbar>
</q-card>
<!-- popup หมายเหต -->
<DialogPopupReason
v-model:modal="modalPopupBackToEdit"
title="หมายเหตุการตีกลับ"
label="หมายเหตุ"
:savaForm="backToEdit"
/>
<DialogPopupReason
v-model:modal="modalbackInsignia2Role"
title="หมายเหตุการตีกลับ"
label="หมายเหตุ"
:savaForm="backToEditinsignia2Role"
/>
</template>
<style lang="scss" scope>
.border-orange {
border: 1px solid #ffa800;
border-radius: 5px;
}
</style>