1327 lines
39 KiB
Vue
1327 lines
39 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed, defineAsyncComponent } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import {
|
|
checkPermission,
|
|
checkPermissionCreate,
|
|
checkPermissionList,
|
|
} from "@/utils/permissions";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import axios from "axios";
|
|
import genReport from "@/plugins/genreport";
|
|
import avatar from "@/assets/avatar_user.jpg";
|
|
|
|
/** importType*/
|
|
import type {
|
|
DataOption,
|
|
DataOptionSys,
|
|
} from "@/modules/04_registryPerson/interface/index/Main";
|
|
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
|
|
|
|
/** importComponents*/
|
|
const CardNotPermission = defineAsyncComponent(
|
|
() => import("@/components/CardNotPermission.vue")
|
|
);
|
|
const DialogHeader = defineAsyncComponent(
|
|
() => import("@/components/DialogHeader.vue")
|
|
);
|
|
const TabMain = defineAsyncComponent(
|
|
() => import("@/modules/04_registryPerson/components/detail/TabMain.vue")
|
|
);
|
|
const DialogRetired = defineAsyncComponent(
|
|
() => 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")
|
|
);
|
|
const ViewPDF = defineAsyncComponent(() => import("@/components/ViewPDF.vue"));
|
|
|
|
/** use*/
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const storeRegistry = useRegistryNewDataStore();
|
|
const {
|
|
dialogRemove,
|
|
dialogConfirm,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
date2Thai,
|
|
dateToISO,
|
|
dialogMessageNotify,
|
|
pathRegistryEmp,
|
|
} = useCounterMixin();
|
|
|
|
const isPermission = ref<boolean | null>(null); //สิทธิการเช้าถึงข้อมูล
|
|
const notPermissionMsg = ref<string>(""); //ข้อตวามไม่มีสิทธิ
|
|
const profileId = ref<string>(route.params.id.toString()); //id profile
|
|
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); //ประเภทข้าราชการ
|
|
|
|
/** ถึงเเก่กรรม */
|
|
const dialogPassaway = ref<boolean>(false); //แสดงฟอร์มถึงเเก่กรรม
|
|
const filePassaway = ref<any>(null); //แนบใบมรณบัตร
|
|
const deathCertificateNo = ref(""); //เลขที่ใบมรณบัตร
|
|
const dateDeath = ref<Date>(new Date()); //วันที่เสียชีวิต
|
|
const placeDeathCertificate = ref(""); //สถานที่ออกใบมรณบัตร
|
|
const reasonDeath = ref(""); //เหตุผลการเสียชีวิต
|
|
|
|
const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
|
|
const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
|
|
|
|
const modalDialogResign = ref<boolean>(false); //ป๊อบอัพขอลาออก
|
|
const modalDialogTransfer = ref<boolean>(false); //ป๊อบอัพขอโอน
|
|
const modalDialogRetired = ref<boolean>(false); //ป๊อบอัพข้อมูลการพ้นจากราชการ
|
|
const modalDialogViewPDF = ref<boolean>(false); //ป๊อบอัพแสดงไฟล์ PDF
|
|
|
|
const selectedDataFile = ref<any | undefined>(undefined); //ไฟล์ PDF ที่เลือกแสดง
|
|
const titleDialogViewPDF = ref<string>(""); //ชื่อไฟล์ PDF ที่เลือกแสดง
|
|
|
|
//รายการเมนูออกคำสั่งข้าราชการ
|
|
const baseItemsMenu = ref<DataOptionSys[]>([
|
|
{
|
|
id: "1",
|
|
name: "ช่วยราชการ",
|
|
system: "SYS_TEMPDUTY",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "แต่งตั้ง-เลื่อน-ย้าย",
|
|
system: "SYS_PROMOTION_OFFICER",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "ถึงแก่กรรม",
|
|
system: "SYS_PASSAWAY",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "ให้ออกจากราชการ",
|
|
system: "SYS_DISMISS",
|
|
},
|
|
{ id: "7", name: "ขอโอน", system: "SYS_TRANSFER_REQ" },
|
|
{ id: "8", name: "ขอลาออก", system: "SYS_RESIGN" },
|
|
{
|
|
id: "6",
|
|
name: "อื่นๆ",
|
|
system: "SYS_PLACEMENT_OTHER",
|
|
},
|
|
]);
|
|
|
|
const itemsMenu = computed(() => {
|
|
if (
|
|
leaveType.value === "DISCIPLINE_TEMP_SUSPEND" ||
|
|
leaveType.value === "RETIRE_RESIGN" ||
|
|
leaveType.value === "DISCIPLINE_SUSPEND"
|
|
) {
|
|
return (
|
|
baseItemsMenu.value?.filter(
|
|
(option: DataOptionSys) => option.system === "SYS_PLACEMENT_OTHER"
|
|
) || []
|
|
);
|
|
} else {
|
|
return baseItemsMenu.value || [];
|
|
}
|
|
});
|
|
|
|
//รายการเมนูออกคำสั่งลูกจ้าง
|
|
const itemsMenuEmployee = ref<DataOptionSys[]>([
|
|
{
|
|
id: "1",
|
|
name: "ปรับระดับชั้นงาน - ย้าย",
|
|
system: "SYS_PROMOTION_EMP",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "ถึงแก่กรรม",
|
|
system: "SYS_PASSAWAY",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "ให้ออกจากราชการ",
|
|
system: "SYS_DISMISS_EMP",
|
|
},
|
|
{ id: "4", name: "ขอลาออก", system: "SYS_RESIGN_EMP" },
|
|
]);
|
|
|
|
const uploadUrl = ref<string>(""); //URL อัปโหลดรูป
|
|
const fileName = ref<string>(""); //ชื่อไฟล์รูป
|
|
const profilePicture = ref<string>(""); //รูป
|
|
const profileFile = ref(); //ไฟล์
|
|
const input = document.createElement("input");
|
|
const activeImage = ref<any | null>(null);
|
|
const images = ref<any[]>([]);
|
|
const imagesAlldata = ref<any[]>([]);
|
|
input.type = "file";
|
|
input.accept = ".jpg,.png,.tif,.pic,.jfif";
|
|
|
|
input.addEventListener("change", (e) => {
|
|
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
|
uploadImg();
|
|
});
|
|
|
|
function selectFile() {
|
|
input.click();
|
|
imageActive(null);
|
|
}
|
|
|
|
function imageActive(n: any) {
|
|
activeImage.value = n;
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันสำหรับปรับขนาดภาพ
|
|
* @param file ไฟล์รูป
|
|
*/
|
|
function resizeImage(file: File): Promise<File> {
|
|
if (!file) {
|
|
return Promise.reject("No file provided");
|
|
}
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (e) => {
|
|
img.src = e.target!.result as string; // แปลงเป็น string
|
|
img.onload = () => {
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const width = 354;
|
|
const height = 472;
|
|
|
|
// ปรับขนาดภาพ
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
|
|
if (ctx) {
|
|
// ตั้งค่าสีพื้นหลังเป็นสีขาว
|
|
ctx.fillStyle = "white";
|
|
ctx.fillRect(0, 0, width, height); // วาดสี่เหลี่ยมสีขาวที่เต็ม canvas
|
|
|
|
// ตรวจสอบว่า ctx ไม่เป็น null
|
|
const imgAspectRatio = img.width / img.height;
|
|
const targetAspectRatio = width / height;
|
|
|
|
let drawWidth: number, drawHeight: number;
|
|
|
|
if (imgAspectRatio > targetAspectRatio) {
|
|
drawWidth = width;
|
|
drawHeight = width / imgAspectRatio;
|
|
} else {
|
|
drawHeight = height;
|
|
drawWidth = height * imgAspectRatio;
|
|
}
|
|
|
|
const xOffset = (width - drawWidth) / 2;
|
|
const yOffset = (height - drawHeight) / 2;
|
|
|
|
ctx.drawImage(img, xOffset, yOffset, drawWidth, drawHeight);
|
|
|
|
// แปลง canvas เป็น Blob
|
|
canvas.toBlob((blob) => {
|
|
if (blob) {
|
|
resolve(new File([blob], file.name, { type: file.type })); // สร้าง File ใหม่จาก Blob
|
|
} else {
|
|
reject(new Error("Failed to convert canvas to blob."));
|
|
}
|
|
}, "image/jpeg");
|
|
} else {
|
|
reject(new Error("Failed to get canvas context."));
|
|
}
|
|
};
|
|
img.onerror = (err) => reject(err);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
const newProfileFile = ref<any>(null);
|
|
|
|
/** ฟังก์ชันอัปโหลด*/
|
|
async function uploadImg() {
|
|
newProfileFile.value = await resizeImage(profileFile.value);
|
|
closeImage();
|
|
showLoader();
|
|
await http
|
|
.post(config.API.orgProfileAvatarbyType(empType.value), {
|
|
profileId: empType.value == "" ? profileId.value : undefined,
|
|
profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
|
|
})
|
|
.then(async (res) => {
|
|
fileName.value = res.data.result.avatarName;
|
|
await uploadProfile(res.data.result.avatar);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันสร้าง path อัปโหลไฟล์
|
|
* @param path
|
|
*/
|
|
async function uploadProfile(path: string) {
|
|
await http
|
|
.post(config.API.fileByPath(path), {
|
|
replace: true,
|
|
fileList: [
|
|
{
|
|
fileName: fileName.value,
|
|
},
|
|
],
|
|
})
|
|
.then(async (res) => {
|
|
uploadUrl.value = res.data[fileName.value].uploadUrl;
|
|
await uploadFileURL(uploadUrl.value, newProfileFile.value);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันอัปโหลด
|
|
* @param uploadUrl path อัปโหลไฟล์
|
|
* @param file ไฟล์
|
|
*/
|
|
async function uploadFileURL(uploadUrl: string, file: any) {
|
|
showLoader();
|
|
axios
|
|
.put(uploadUrl, file, {
|
|
headers: {
|
|
"Content-Type": file.type,
|
|
},
|
|
})
|
|
.then(async () => {
|
|
await fetchProfile(profileId.value);
|
|
success($q, "อัปโหลดไฟล์สำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
|
|
* @param id โปรไฟล์
|
|
*/
|
|
async function fetchProfile(id: string) {
|
|
await http
|
|
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
|
|
.then(async (res) => {
|
|
profilePicture.value = res.data.downloadUrl;
|
|
})
|
|
.catch(() => {
|
|
profilePicture.value = avatar;
|
|
});
|
|
}
|
|
|
|
const reasonStatus = ref<boolean>(false);
|
|
const leaveReason = ref<string>("");
|
|
const reasonOptions = ref<DataOption[]>([
|
|
{
|
|
id: "RETIRE",
|
|
name: "เกษียณอายุราชการ",
|
|
},
|
|
{
|
|
id: "RESIGN",
|
|
name: "ลาออก",
|
|
},
|
|
{
|
|
id: "TRANSFER",
|
|
name: "ให้โอน",
|
|
},
|
|
{
|
|
id: "DEATH",
|
|
name: "ถึงแก่กรรม",
|
|
},
|
|
{
|
|
id: "LAYOFF",
|
|
name: "ให้ออก",
|
|
},
|
|
{
|
|
id: "DISCHARGE",
|
|
name: "ปลดออก",
|
|
},
|
|
{
|
|
id: "DISMISS",
|
|
name: "ไล่ออก",
|
|
},
|
|
{
|
|
id: "OTHER",
|
|
name: "อื่นๆ",
|
|
},
|
|
]);
|
|
|
|
const leaveType = ref<string>("");
|
|
/** ฟังก์ชันดึงข้อมูลส่วนต้ว*/
|
|
async function fetchDataPersonal() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.registryNewByProfileId(profileId.value, empType.value))
|
|
.then(async (res) => {
|
|
formDetail.value = await res.data.result;
|
|
storeRegistry.citizenId = res.data.result.citizenId;
|
|
storeRegistry.isLeave = res.data.result.isLeave;
|
|
leaveType.value = res.data.result.leaveType;
|
|
|
|
if (res.data.result.leaveReason) {
|
|
// เหตุผลพ้นจากราชการต่อท้ายชื่อ
|
|
const reason = reasonOptions.value.filter(
|
|
(r: DataOption) => r.id == res.data.result.leaveReason
|
|
);
|
|
if (reason.length > 0) {
|
|
leaveReason.value = `(พ้นจากราชการ : ${reason[0].name})`;
|
|
} else if (
|
|
res.data.result.leaveReason !== null &&
|
|
res.data.result.leaveReason !== ""
|
|
) {
|
|
leaveReason.value = `(พ้นจากราชการ : ${storeRegistry.convertTypeRetired(
|
|
res.data.result.leaveType
|
|
)})`;
|
|
}
|
|
reasonStatus.value = reason.length > 0 ? true : false;
|
|
}
|
|
|
|
fileName.value = res.data.result.avatarName;
|
|
if (formDetail.value?.avatarName) {
|
|
await fetchProfile(profileId.value);
|
|
} else {
|
|
profilePicture.value = avatar;
|
|
}
|
|
|
|
isPermission.value = true;
|
|
})
|
|
.catch((err) => {
|
|
if (err.response.data.status == 403) {
|
|
isPermission.value = false;
|
|
notPermissionMsg.value = err.response.data.message;
|
|
} else {
|
|
messageError($q, err);
|
|
}
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดาว์นโหลดไฟล์ "ก.พ.7/ก.ก.1 และประวัติแบบย่อ
|
|
* @param type full === 'ก.พ.7/ก.ก.1', SHORT === 'ประวัติแบบย่อ'
|
|
*/
|
|
async function onClickDownloadKp7(type: string) {
|
|
showLoader();
|
|
const url =
|
|
type === "FULL"
|
|
? empType.value
|
|
? config.API.profilFull(profileId.value, "profile-employee")
|
|
: config.API.profilFull(profileId.value, "profile")
|
|
: empType.value
|
|
? config.API.profilshort(profileId.value, "profile-employee")
|
|
: config.API.profilshort(profileId.value, "profile");
|
|
|
|
const fileName = type === "FULL" ? "ทปอ. สามัญ" : "ประวัติแบบย่อ";
|
|
await http
|
|
.get(url)
|
|
.then(async (res) => {
|
|
const data = await res.data.result;
|
|
selectedDataFile.value = data;
|
|
titleDialogViewPDF.value = fileName;
|
|
modalDialogViewPDF.value = true;
|
|
|
|
// await genReport(data, `${fileName}`, type);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งช่วยราชการ*/
|
|
function helpPost() {
|
|
const formData = new FormData();
|
|
formData.append("id", profileId.value);
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.placemenHelpGov, formData)
|
|
.then(async () => {
|
|
await success($q, "ดำเนินการสำเร็จ");
|
|
router.push("/placement/help-government");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งส่งตัวกลับ*/
|
|
function repatriationPost() {
|
|
const formData = new FormData();
|
|
formData.append("id", profileId.value);
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.placemenRepatriation, formData)
|
|
.then(async () => {
|
|
await success($q, "ดำเนินการสำเร็จ");
|
|
router.push("/placement/repatriate");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งแต่งตังเลื่อน*/
|
|
function appointPost() {
|
|
const formData = new FormData();
|
|
formData.append("id", profileId.value);
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.placemenAppointment, formData)
|
|
.then(async () => {
|
|
await success($q, "ดำเนินการสำเร็จ");
|
|
router.push("/placement/appoint-promote");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งถึงเเก่กรรม*/
|
|
function clickPassaway() {
|
|
dialogPassaway.value = true;
|
|
filePassaway.value = null;
|
|
deathCertificateNo.value = "";
|
|
dateDeath.value = new Date();
|
|
placeDeathCertificate.value = "";
|
|
reasonDeath.value = "";
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งให้ออกจากราชการ*/
|
|
function outPost() {
|
|
const formData = new FormData();
|
|
formData.append("id", profileId.value);
|
|
formData.append(
|
|
"ProfileType",
|
|
empType.value === "-employee" ? "EMPLOYEE" : "OFFICER"
|
|
);
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.retirementOut, formData)
|
|
.then(async () => {
|
|
await success($q, "ดำเนินการสำเร็จ");
|
|
router.push(
|
|
`${
|
|
empType.value === "-employee"
|
|
? `/retirementEmployee`
|
|
: `/retirement/dismiss-order`
|
|
}`
|
|
);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งอื่นๆ*/
|
|
function otherPost() {
|
|
const formData = new FormData();
|
|
formData.append("id", profileId.value);
|
|
formData.append(
|
|
"ProfileType",
|
|
empType.value === "-employee" ? "EMPLOYEE" : "OFFICER"
|
|
);
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.placemenOther, formData)
|
|
.then(async () => {
|
|
await success($q, "ดำเนินการสำเร็จ");
|
|
router.push("/placement/other");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันออกคำสั่งปรับระดับชั้นงาน - ย้าย*/
|
|
function appointEmployeePost() {
|
|
const formData = new FormData();
|
|
formData.append("id", profileId.value);
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.appointEmployee(), formData)
|
|
.then(async () => {
|
|
await success($q, "ดำเนินการสำเร็จ");
|
|
router.push("/placement/appoint-employee");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันยืนยันบันทึกข้อมูลถึงแก่กรรม*/
|
|
function clickSaveDeceased() {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
const formData = new FormData();
|
|
formData.append("File", filePassaway.value);
|
|
formData.append("Number", deathCertificateNo.value);
|
|
formData.append("Date", dateToISO(dateDeath.value));
|
|
formData.append("Location", placeDeathCertificate.value);
|
|
formData.append("Reason", reasonDeath.value);
|
|
formData.append("ProfileId", profileId.value);
|
|
formData.append(
|
|
"ProfileType",
|
|
empType.value === "-employee" ? "EMPLOYEE" : "OFFICER"
|
|
);
|
|
|
|
await http
|
|
.post(config.API.listDeceased(), formData)
|
|
.then(async () => {
|
|
await success($q, "บันทึกข้อมูลสำเร็จ");
|
|
router.push("/retirement/deceased");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันปิด popup ถึงแก่กรรม*/
|
|
function closePassaway() {
|
|
dialogPassaway.value = false;
|
|
}
|
|
|
|
/** ฟังก์ชันเปิด popup เลือกรูปภาพ*/
|
|
function openDialogImg() {
|
|
dialogImage.value = true;
|
|
getImage();
|
|
}
|
|
|
|
/** ฟังก์ชันเรียกข้อมูลรูป*/
|
|
async function getImage() {
|
|
showLoader();
|
|
images.value = [];
|
|
await http
|
|
.get(
|
|
config.API.orgProfileAvatarbyType(empType.value) + `/${profileId.value}`
|
|
)
|
|
.then(async (res) => {
|
|
let data = res.data.result;
|
|
if (!data || !Array.isArray(data)) {
|
|
return;
|
|
}
|
|
|
|
imagesAlldata.value = data;
|
|
for (const img of data) {
|
|
await getImg(img);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันเรียกข้อมูลรายการรูป
|
|
* @param dataList ข้อมูล
|
|
*/
|
|
async function getImg(dataList: any) {
|
|
await http
|
|
.get(config.API.fileByPath(`${dataList.avatar}/${dataList.avatarName}`))
|
|
.then((res) => {
|
|
const data = res.data;
|
|
const newData = {
|
|
id: dataList.id,
|
|
isActive: dataList.isActive,
|
|
...data,
|
|
};
|
|
|
|
images.value.push(newData);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
/** ฟังก์ชันปิด Popup เลือกรูปภาพ*/
|
|
function closeImage() {
|
|
dialogImage.value = false;
|
|
images.value = [];
|
|
imagesAlldata.value = [];
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันยืนยันการลบรูป
|
|
* @param id รูปภาพ
|
|
*/
|
|
function deletePhoto(id: string, isActive: boolean) {
|
|
dialogRemove(
|
|
$q,
|
|
async () => {
|
|
showLoader();
|
|
images.value = [];
|
|
imagesAlldata.value = [];
|
|
await http
|
|
.delete(config.API.orgProfileAvatarbyType(empType.value) + `/${id}`)
|
|
.then(async () => {
|
|
await getImage();
|
|
if (isActive) {
|
|
activeImage.value = null;
|
|
await fetchDataPersonal();
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่"
|
|
);
|
|
}
|
|
|
|
/** ฟังก์ชันยืนยันการเลือกรูป*/
|
|
function selectAvatarHistory() {
|
|
if (activeImage.value == null) {
|
|
dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน");
|
|
return;
|
|
}
|
|
const data = activeImage.value;
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.orgProfileAvatarbyType(empType.value) +
|
|
`/select/${profileId.value}/${data.id}`
|
|
)
|
|
.then(async () => {
|
|
await fetchDataPersonal();
|
|
await fetchProfile(profileId.value);
|
|
closeImage();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* class รูป
|
|
* @param n
|
|
*/
|
|
function imageClass(n: any) {
|
|
const val = n == activeImage.value;
|
|
return {
|
|
"rounded-borders bg-grey-2 image-size-default": val,
|
|
"rounded-borders bg-grey-2 image-size-full": !val,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* class input
|
|
* @param n
|
|
*/
|
|
function getClass(n: any) {
|
|
const val = n == activeImage.value;
|
|
return {
|
|
"rounded-borders border-green shadow-1": val,
|
|
"rounded-borders shadow-1": !val,
|
|
};
|
|
}
|
|
|
|
const titleName = computed(() => {
|
|
return route.name === "registry-employeeId"
|
|
? "ทะเบียนประวัติลูกจ้างชั่วคราว"
|
|
: route.name === "registryNewEmployeeByid"
|
|
? "ทะเบียนประวัติลูกจ้างประจำ กทม."
|
|
: "ทะเบียนประวัติ";
|
|
});
|
|
|
|
function openDialogSendTransferResign(
|
|
system: "SYS_TRANSFER_REQ" | "SYS_RESIGN" | "SYS_RESIGN_EMP"
|
|
) {
|
|
system === "SYS_TRANSFER_REQ"
|
|
? (modalDialogTransfer.value = true)
|
|
: (modalDialogResign.value = true);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchDataPersonal();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row items-center q-gutter-sm q-mb-xs">
|
|
<div class="toptitle text-dark row items-center q-py-xs">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
{{ titleName }}
|
|
</div>
|
|
<q-space />
|
|
|
|
<div v-if="isPermission">
|
|
<!-- list menu ของข้าราชการฯ -->
|
|
<q-btn-dropdown
|
|
v-if="
|
|
(!storeRegistry.isLeave &&
|
|
empType === '' &&
|
|
checkPermissionList([
|
|
'SYS_TEMPDUTY',
|
|
'SYS_TEMPDUTY2',
|
|
'SYS_PROMOTION_OFFICER',
|
|
'SYS_PASSAWAY',
|
|
'SYS_DISMISS',
|
|
'SYS_PLACEMENT_OTHER',
|
|
'SYS_TRANSFER_REQ',
|
|
'SYS_RESIGN',
|
|
])) ||
|
|
leaveType === 'DISCIPLINE_TEMP_SUSPEND' ||
|
|
leaveType === 'RETIRE_RESIGN' ||
|
|
leaveType === 'DISCIPLINE_SUSPEND'
|
|
"
|
|
size="md"
|
|
rounded
|
|
unelevated
|
|
color="grey-4"
|
|
text-color="red"
|
|
icon="mdi-home-export-outline"
|
|
dropdown-icon="mdi-chevron-down"
|
|
>
|
|
<q-list v-for="(item, index) in itemsMenu" :key="index">
|
|
<q-item
|
|
v-if="checkPermissionCreate(item.system)"
|
|
clickable
|
|
@click="
|
|
item.name == 'ช่วยราชการ'
|
|
? helpPost()
|
|
: item.name == 'ส่งตัวกลับ'
|
|
? repatriationPost()
|
|
: item.name == 'แต่งตั้ง-เลื่อน-ย้าย'
|
|
? appointPost()
|
|
: item.name == 'ถึงแก่กรรม'
|
|
? clickPassaway()
|
|
: item.name == 'ให้ออกจากราชการ'
|
|
? outPost()
|
|
: item.name == 'อื่นๆ'
|
|
? otherPost()
|
|
: item.system === 'SYS_TRANSFER_REQ' ||
|
|
item.system === 'SYS_RESIGN'
|
|
? openDialogSendTransferResign(item.system)
|
|
: null
|
|
"
|
|
v-close-popup
|
|
>
|
|
<q-item-section>{{ item.name }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
<!-- list menu ของลูกจ้างประจำ -->
|
|
<q-btn-dropdown
|
|
v-if="
|
|
!storeRegistry.isLeave &&
|
|
empType === '-employee' &&
|
|
checkPermissionList([
|
|
'SYS_PROMOTION_EMP',
|
|
'SYS_PASSAWAY',
|
|
'SYS_DISMISS_EMP',
|
|
'SYS_RESIGN_EMP',
|
|
])
|
|
"
|
|
size="md"
|
|
rounded
|
|
unelevated
|
|
color="grey-4"
|
|
text-color="red"
|
|
icon="mdi-home-export-outline"
|
|
dropdown-icon="mdi-chevron-down"
|
|
>
|
|
<q-list v-for="item in itemsMenuEmployee" :key="item.id">
|
|
<q-item
|
|
v-if="checkPermissionCreate(item.system)"
|
|
clickable
|
|
@click="
|
|
item.name == 'ปรับระดับชั้นงาน - ย้าย'
|
|
? appointEmployeePost()
|
|
: item.name == 'ถึงแก่กรรม'
|
|
? clickPassaway()
|
|
: item.name == 'ให้ออกจากราชการ'
|
|
? outPost()
|
|
: item.system === 'SYS_RESIGN_EMP'
|
|
? openDialogSendTransferResign(item.system)
|
|
: null
|
|
"
|
|
v-close-popup
|
|
>
|
|
<q-item-section>{{ item.name }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
<q-btn
|
|
v-if="empType !== '-temp'"
|
|
unelevated
|
|
round
|
|
color="grey-4"
|
|
text-color="primary"
|
|
icon="mdi-file-eye-outline"
|
|
size="md"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
|
<q-menu>
|
|
<q-list style="min-width: 130px">
|
|
<q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
|
|
<q-item-section class="text-blue">ทปอ. สามัญ</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="onClickDownloadKp7('SHORT')"
|
|
>
|
|
<q-item-section class="text-primary"
|
|
>ประวัติแบบย่อ</q-item-section
|
|
>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isPermission">
|
|
<q-card class="my-card" flat bordered>
|
|
<q-card-section>
|
|
<div class="col row items-center">
|
|
<div class="row col-12">
|
|
<div class="col" style="padding-left: 13%">
|
|
<div class="col-12 text-primary">
|
|
<h2
|
|
class="title q-ma-none q-pa-none"
|
|
v-if="
|
|
formDetail && formDetail.firstName && formDetail.lastName
|
|
"
|
|
>
|
|
{{
|
|
`${
|
|
formDetail.rank
|
|
? formDetail.rank
|
|
: formDetail.prefix == "ไม่ระบุคำนำหน้าชื่อ"
|
|
? ""
|
|
: formDetail.prefix ?? ""
|
|
}${formDetail.firstName} ${formDetail.lastName}`
|
|
}}
|
|
<span class="text-red"> {{ leaveReason }}</span>
|
|
<q-btn
|
|
v-if="leaveReason"
|
|
flat
|
|
round
|
|
color="info"
|
|
icon="info"
|
|
@click.stop.prevent="modalDialogRetired = true"
|
|
>
|
|
<q-tooltip>ข้อมูลการพ้นจากราชการ</q-tooltip>
|
|
</q-btn>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section style="padding: 0px">
|
|
<div
|
|
class="absolute"
|
|
style="top: 0; left: 12px; transform: translateY(-50%)"
|
|
>
|
|
<q-avatar size="90px" class="bg-grey-2">
|
|
<q-img :src="profilePicture" />
|
|
</q-avatar>
|
|
<q-btn
|
|
v-if="
|
|
!storeRegistry.isLeave && checkPermission($route)?.attrIsUpdate
|
|
"
|
|
round
|
|
text-color="edit"
|
|
icon="mdi-pencil"
|
|
@click="openDialogImg"
|
|
size="sm"
|
|
unelevated
|
|
class="bg-white btnEditImg"
|
|
>
|
|
<q-tooltip>แก้ไขรูปโปรไฟล์</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div class="row items-center bg-toolbar">
|
|
<div class="row col-12" style="padding-left: 14%">
|
|
<div class="col-4">
|
|
<div class="col-sm-3 col-md-3">
|
|
<div class="col text-grey-6 text-caption">
|
|
{{ empType === "" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง" }}
|
|
</div>
|
|
<div class="col">{{ formDetail?.position || "-" }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="col-sm-3 col-md-3">
|
|
<div class="col text-grey-6 text-caption">
|
|
{{ empType === "" ? "ตำแหน่งประเภท" : "กลุ่มงาน" }}
|
|
</div>
|
|
<div class="col">
|
|
{{ formDetail?.posType?.posTypeName || "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4" v-if="route.name != 'registry-employeeId'">
|
|
<div class="col-sm-3 col-md-3">
|
|
<div class="col text-grey-6 text-caption">
|
|
{{ empType === "" ? "ระดับ" : "ระดับชั้นงาน" }}
|
|
</div>
|
|
<div class="col">
|
|
{{
|
|
`${
|
|
empType === ""
|
|
? ""
|
|
: formDetail?.posType?.posTypeShortName
|
|
? formDetail?.posType?.posTypeShortName
|
|
: ""
|
|
} ${
|
|
formDetail?.posLevel?.posLevelName
|
|
? formDetail?.posLevel?.posLevelName
|
|
: "-"
|
|
}`
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
</q-card>
|
|
|
|
<q-card bordered class="q-mt-md rounded">
|
|
<TabMain :fetchDataPersonal="fetchDataPersonal" />
|
|
</q-card>
|
|
</div>
|
|
<div v-else-if="isPermission !== null && !isPermission">
|
|
<CardNotPermission :message="notPermissionMsg" />
|
|
</div>
|
|
|
|
<!-- Dialog แนบใบมรณบัตร -->
|
|
<q-dialog v-model="dialogPassaway" persistent>
|
|
<q-card style="min-width: 600px">
|
|
<q-form ref="myForm">
|
|
<q-card-section class="flex justify-between" style="padding: 0">
|
|
<DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
<q-card-section class="q-pa-md row q-col-gutter-sm">
|
|
<q-file
|
|
class="col-12 col-sm-6 col-md-5 inputgreen"
|
|
outlined
|
|
dense
|
|
v-model="filePassaway"
|
|
label="แนบใบมรณบัตร"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
accept=".pdf"
|
|
>
|
|
<q-separator />
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
</q-file>
|
|
<q-input
|
|
class="col-12 col-sm-6 col-md-7 inputgreen"
|
|
dense
|
|
outlined
|
|
v-model="deathCertificateNo"
|
|
label="เลขที่ใบมรณบัตร"
|
|
/>
|
|
|
|
<datepicker
|
|
class="col-12 col-sm-6 col-md-5 inputgreen"
|
|
menu-class-name="modalfix"
|
|
v-model="dateDeath"
|
|
: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 datepicker"
|
|
:model-value="dateDeath != null ? date2Thai(dateDeath) : 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>
|
|
|
|
<q-input
|
|
class="col-12 col-sm-6 col-md-7 inputgreen"
|
|
dense
|
|
outlined
|
|
v-model="placeDeathCertificate"
|
|
label="สถานที่ออกใบมรณบัตร"
|
|
/>
|
|
<q-input
|
|
class="col-12 inputgreen"
|
|
dense
|
|
outlined
|
|
v-model="reasonDeath"
|
|
label="เหตุผลการเสียชีวิต"
|
|
type="textarea"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
label="บันทึก"
|
|
color="public"
|
|
@click="clickSaveDeceased"
|
|
:disable="
|
|
filePassaway === null ||
|
|
deathCertificateNo === '' ||
|
|
placeDeathCertificate === '' ||
|
|
reasonDeath === ''
|
|
"
|
|
>
|
|
<q-tooltip>บันทึก</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!-- Dialog เลือก Image -->
|
|
<q-dialog v-model="dialogImage" persistent>
|
|
<q-card style="width: 100vw; max-width: 60vw">
|
|
<DialogHeader
|
|
:tittle="'เลือกรูปภาพ (354 x 472 px)'"
|
|
:close="closeImage"
|
|
/>
|
|
|
|
<q-separator />
|
|
<q-card-section class="col-12 row">
|
|
<div
|
|
class="row wrap items-start col-12 q-col-gutter-sm"
|
|
style="height: 320px; overflow: auto"
|
|
>
|
|
<div class="col-3" @click="selectFile">
|
|
<div
|
|
style="
|
|
height: 160px;
|
|
max-width: 15vw;
|
|
display: flex !important;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
class="column rounded-borders cursor-pointer bg-active-image text-white"
|
|
>
|
|
<q-icon name="add" size="60px" color="white" />
|
|
<strong>อัปโหลดรูปภาพ</strong>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-for="n in images"
|
|
:key="n"
|
|
class="col-3"
|
|
@click="imageActive(n)"
|
|
>
|
|
<div :class="getClass(n)">
|
|
<q-img
|
|
v-if="n.downloadUrl != null"
|
|
:src="n.downloadUrl"
|
|
:class="imageClass(n)"
|
|
>
|
|
<div
|
|
class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
|
|
style="padding: 5px"
|
|
>
|
|
{{ date2Thai(n.createdAt) }}
|
|
|
|
<!-- v-if="!n.isActive" -->
|
|
<q-btn
|
|
icon="delete"
|
|
unelevated
|
|
dense
|
|
@click="deletePhoto(n.id, n.isActive)"
|
|
class="bg-white"
|
|
style="color: #ff8080"
|
|
>
|
|
<q-tooltip>ลบรูปภาพ</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="absolute-top-right" v-if="n.isActive">
|
|
<q-icon name="star" color="yellow" size="24px" />
|
|
</div>
|
|
</q-img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
@click="selectAvatarHistory"
|
|
color="public"
|
|
label="เลือกรูปภาพ"
|
|
:disable="images.length == 0"
|
|
>
|
|
<q-tooltip>เลือกรูปภาพ</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!-- Dialog ข้อมูลการพ้นจากราชการ -->
|
|
<DialogRetired v-model:modal="modalDialogRetired" :data="formDetail" />
|
|
<!-- ลาออก -->
|
|
<DialogResign v-model:modal="modalDialogResign" />
|
|
<!-- ขอโอน -->
|
|
<DialogTransfer v-model:modal="modalDialogTransfer" />
|
|
|
|
<ViewPDF
|
|
v-model:modal="modalDialogViewPDF"
|
|
:dataFile="selectedDataFile"
|
|
:title="titleDialogViewPDF"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
h2.title {
|
|
font-size: 1.2rem;
|
|
line-height: 1.6rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
color: #34373c;
|
|
}
|
|
|
|
.absolute-center-left {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.bg-toolbar {
|
|
background-color: #f2fbfa;
|
|
height: 60px;
|
|
}
|
|
.btnEditImg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border: 1px solid #ededed;
|
|
}
|
|
|
|
.bg-active-image {
|
|
background-color: #52c688;
|
|
}
|
|
|
|
.image-size-default {
|
|
height: 150px;
|
|
max-width: 15vw;
|
|
}
|
|
|
|
.image-size-full {
|
|
height: 160px;
|
|
max-width: 15vw;
|
|
}
|
|
.border-green {
|
|
border: 5px solid #52c688;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|