บรรจุ แต่งตั้ง ย้าย โอน => ปรับ code และ load

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-08-19 16:14:43 +07:00
parent 9f4aeec575
commit 34dc306288
30 changed files with 1154 additions and 1429 deletions

View file

@ -4,26 +4,40 @@ import { checkPermission } from "@/utils/permissions";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
/**
* importType
*/
import type { QForm } from "quasar";
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
import type {
appointmentData,
ResponseData,
DataProfile,
} from "@/modules/05_placement/interface/response/AppointMent";
import type { QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
import CardProfile from "@/components/CardProfile.vue";
/**
* importComponents
*/
import CardProfile from "@/components/CardProfile.vue"; // card
const modalPersonal = ref<boolean>(false);
const personId = ref<string>("");
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const paramsId = route.params.id;
const {
date2Thai,
messageError,
showLoader,
hideLoader,
success,
dialogConfirm,
} = mixin;
const modalPersonal = ref<boolean>(false);
const dataProfile = ref<DataProfile>();
const appointment = ref<appointmentData>({
@ -46,16 +60,6 @@ const date = ref<Date | null>(null);
const status = ref<string>("");
const avatar = ref<string>("");
const paramsId = route.params.id;
const {
date2Thai,
messageError,
showLoader,
hideLoader,
success,
dialogConfirm,
} = mixin;
const title = ref<ResponseTitle>({
fullname: "",
organizationPositionOld: "",
@ -63,10 +67,12 @@ const title = ref<ResponseTitle>({
positionTypeOld: "",
});
// id
const fecthappointmentByid = async () => {
/**
* fetch รายละเอยดการปรบระดบชนงานลกจาง
*/
function fecthappointmentByid() {
showLoader();
await http
http
.get(config.API.appointEmployeeByid(paramsId.toString()))
.then((res: ResponseData) => {
dataProfile.value = res.data.result as unknown as DataProfile;
@ -96,58 +102,67 @@ const fecthappointmentByid = async () => {
.finally(() => {
hideLoader();
});
};
}
//
const clickSave = async () => {
/**
* นยนการบนทกขอมลเพอลงบญชแนบทาย
*/
function clickSave() {
if (myForm.value !== null) {
myForm.value.validate().then((success: any) => {
if (success) {
myForm.value.validate().then((result: any) => {
if (result) {
dialogConfirm(
$q,
async () => await putAppointment(),
async () => {
let data = {
citizenId: appointment.value.citizenId,
prefixId: appointment.value.prefixId,
firstname: appointment.value.firstname,
lastname: appointment.value.lastname,
educationOld: educationOld.value,
organizationPositionOld: organizationPositionOld.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value.toString().replace(/,/g, ""),
reason: reason.value,
positionDate: date.value,
};
showLoader();
await http
.put(config.API.appointEmployeeByid(paramsId.toString()), data)
.then(async () => {
await fecthappointmentByid();
await success($q, "บันทึกข้อมูลสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
}
});
}
};
//
const putAppointment = async () => {
let data = {
citizenId: appointment.value.citizenId,
prefixId: appointment.value.prefixId,
firstname: appointment.value.firstname,
lastname: appointment.value.lastname,
educationOld: educationOld.value,
organizationPositionOld: organizationPositionOld.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value.toString().replace(/,/g, ""),
reason: reason.value,
positionDate: date.value,
};
showLoader();
await http
.put(config.API.appointEmployeeByid(paramsId.toString()), data)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
fecthappointmentByid();
edit.value = false;
});
};
const cancel = () => {
}
/**
* ยกเลกการบนทกขอมลเพอลงบญชแนบทาย
*/
function cancel() {
edit.value = false;
fecthappointmentByid();
myForm.value?.resetValidation();
};
}
/**
* Class input
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
@ -155,17 +170,8 @@ const getClass = (val: boolean) => {
};
};
function onclickViewinfo(id: string) {
modalPersonal.value = true;
personId.value = id;
}
function updatemodalPersonal(modal: boolean) {
modalPersonal.value = modal;
}
onMounted(async () => {
await fecthappointmentByid();
onMounted(() => {
fecthappointmentByid();
});
</script>
<template>
@ -180,7 +186,7 @@ onMounted(async () => {
class="q-mr-sm"
@click="router.push(`/placement/appoint-employee`)"
/>
รายละเอยดการปรบระดบชนงานลกจาง {{ title.fullname }}
รายละเอยดการปรบระดบชนงานลกจาง{{ title.fullname }}
</div>
<CardProfile :data="dataProfile as DataProfile" :type="'employee'" />
@ -191,7 +197,13 @@ onMounted(async () => {
แกไขขอมลเพอลงบญชแนบทาย
</div>
<q-space />
<div v-if="status !== 'DONE' && status !== 'REPORT' && checkPermission($route)?.attrIsUpdate">
<div
v-if="
status !== 'DONE' &&
status !== 'REPORT' &&
checkPermission($route)?.attrIsUpdate
"
>
<div class="q-gutter-sm" v-if="!edit">
<q-btn
outline
@ -334,7 +346,7 @@ onMounted(async () => {
lazy-rules
mask="###,###,###,###"
reverse-fill-mask
class="inputgreen"
:class="getClass(edit)"
/>
</div>
</div>
@ -401,12 +413,6 @@ onMounted(async () => {
</div>
</q-form>
</q-card>
<PopupPersonal
:modal="modalPersonal"
:id="personId"
@update:modal="updatemodalPersonal"
/>
</template>
<style lang="scss" scope>
.q-img {

View file

@ -8,7 +8,6 @@ import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
import Dialogbody from "@/modules/05_placement/components/AppointEmployee/Dialogbody.vue";
// import DialogOrgTree from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
listAppointType,
@ -19,7 +18,8 @@ import type { OpType } from "@/modules/05_placement/interface/response/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogOrgSelectEmployee from "@/components/Dialogs/DialogOrgSelectEmployee.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogOrgSelectEmployee from "@/components/Dialogs/DialogOrgSelectEmployee.vue"; //
const typeModal = ref<string>("");
const posType = ref<string>("");
@ -39,16 +39,12 @@ const {
messageError,
date2Thai,
dialogRemove,
dialogConfirm,
dialogMessageNotify,
} = mixin;
const rowsPosition = ref<any>([]);
const router = useRouter();
const rows = ref<listAppointType[]>([]);
const rows2 = ref<listAppointType[]>([]);
const modalTree = ref<boolean>(false);
const ModalEmployee = ref<boolean>(false);
const personal = ref<resData[]>([]);
const personalId = ref<string>("");
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
@ -56,7 +52,7 @@ const filterRef = ref<any>(null);
const listRecevice = ref<resData[]>([]);
const optionsType = ref<OpType[]>([]);
const type = ref<string>("");
const selectedPosition = ref<any>([]);
const visibleColumns = ref<string[]>([
"no",
"citizenId",
@ -66,124 +62,12 @@ const visibleColumns = ref<string[]>([
"createdAt",
"status",
]);
const visibleColumnsPosition = ref<String[]>([
"organizationOrganizationName",
"organizationAgencyName",
"organizationGovernmentAgencyName",
"organizationShortName",
"organizationTypeName",
"organizationLevelName",
"positionEmployeeLineName",
"positionEmployeePositionName",
"posNo",
]);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const columnsPosition = ref<QTableProps["columns"]>([
{
name: "organizationOrganizationName",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organizationOrganizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "organizationAgencyName",
align: "left",
label: "รหัสหน่วยงาน",
sortable: true,
field: "organizationAgencyName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "organizationGovernmentAgencyName",
align: "left",
label: "รหัสส่วนราชการ",
sortable: true,
field: "organizationGovernmentAgencyName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "organizationShortName",
align: "left",
label: "ชื่อย่อหน่วยงาน",
sortable: true,
field: "organizationShortName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "organizationTypeName",
align: "left",
label: "ประเภทหน่วยงาน",
sortable: true,
field: "organizationTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "organizationLevelName",
align: "left",
label: "ระดับหน่วยงาน",
sortable: true,
field: "organizationLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionEmployeeLineName",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionEmployeeLineName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionEmployeePositionName",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionEmployeePositionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -249,39 +133,29 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
/**
* เซ input
*/
function resetFilter() {
filterKeyword.value = "";
filterKeyword2.value = "";
filterRef.value.focus();
}
onMounted(() => {
fecthlistappointment();
});
// API
const fecthlistappointment = async () => {
/**
* fetch รายการปรบระดบชนงานลกจาง
*/
function fecthlistappointment() {
showLoader();
rows.value = [];
await http
http
.get(config.API.appointEmployee())
.then((res) => {
let response = res.data.result;
listRecevice.value = response;
rows.value = response;
// rows.value = response.map((e: resData) => ({
// personalId: e.id,
// citizenId: e.citizenId,
// fullname: e.prefix + e.firstname + " " + e.lastname,
// organizationName: e.organizationName + " " + e.organizationShortName,
// orgName: e.organizationName,
// organizationShortName: e.organizationShortName,
// status: statusText(e.status),
// createdAt: date2Thai(e.createdAt),
// birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
// educationOld: e.educationOld,
// organizationPositionOld: e.organizationPositionOld,
// positionTypeOld: e.positionTypeOld,
// positionLevelOld: e.positionLevelOld,
// positionNumberOld: e.positionNumberOld,
// salary: e.salary,
// positionDate: e.positionDate,
// }));
//
rows2.value = rows.value.filter(
(e: any) =>
e.root !== null &&
@ -302,205 +176,75 @@ const fecthlistappointment = async () => {
.finally(() => {
hideLoader();
});
};
}
//
const fecthTypeOption = async () => {
type.value = "";
await http
.get(config.API.typeOrder())
.then((res) => {
optionsType.value = res.data.result.filter(
(e: OpType) =>
e.commandCode === "C-PM-22" || e.commandCode === "C-PM-24"
);
type.value = optionsType.value[0].id;
})
.catch((e) => {
messageError($q, e);
});
};
//
const openModalEmployee = async (id: string) => {
personalId.value = id;
await getPosition(id);
};
const getPosition = async (id: string) => {
showLoader();
await http
.get(config.API.organizationEmployee)
.then((res) => {
const { result } = res.data;
let data: any[] = [];
result.map((r: any) => {
data.push({
id: r.id,
agency: r.agency,
conditionNote: r.conditionNote,
department: r.department,
government: r.government,
isActive: r.isActive,
isCondition: r.isCondition,
isDirector: r.isDirector,
organizationUserNote: r.organizationUserNote,
qualification: r.qualification,
pile: r.pile,
posNo: r.posNo,
positionCondition: r.positionCondition,
positionMasterUserNote: r.positionMasterUserNote,
organizationOrder: r.organizationOrder,
organizationFaxId: r.organizationFaxId,
organizationLevelId: r.organizationLevelId,
organizationOrganizationId: r.organizationOrganizationId,
organizationTelExternalId: r.organizationTelExternalId,
organizationTelInternalId: r.organizationTelInternalId,
organizationTypeId: r.organizationTypeId,
positionEmployeeStatusId: r.positionEmployeeStatusId,
positionEmployeeLineId: r.positionEmployeeLineId,
positionEmployeePositionId: r.positionEmployeePositionId,
organizationAgencyId: r.organizationAgencyId,
organizationGovernmentAgencyId: r.organizationGovernmentAgencyId,
organizationShortNameId: r.organizationShortNameId,
organizationFaxName: r.organizationFaxName,
organizationLevelName: r.organizationLevel,
organizationOrganizationName: r.organizationOrganization,
organizationTelExternalName: r.organizationTelExternal,
organizationTelInternalName: r.organizationTelInternal,
organizationTypeName: r.organizationType,
positionEmployeeStatusName: r.positionEmployeeStatus,
positionEmployeeLineName: r.positionEmployeeLine,
positionEmployeePositionName: r.positionEmployeePosition,
organizationAgencyName: r.organizationAgencyCode,
organizationGovernmentAgencyName: r.organizationGovernmentAgencyCode,
organizationShortName: r.organizationShortName,
positionEmployeeLevels: r.positionEmployeeLevels,
positionEmployeePositionSides: r.positionEmployeePositionSides,
use: r.use,
});
});
const index = data.findIndex((r: any) => r.use == true);
if (index >= 0) {
selectedPosition.value = [data[index]];
}
rowsPosition.value = data;
ModalEmployee.value = true;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
//
/**
* นยนลบรายการปรบระดบชนงานลกจาง
* @param id รายการปรบระดบชนงานลกจาง
*/
const clickDelete = (id: string) => {
dialogRemove($q, () => deleteAppoint(id));
};
//
const deleteAppoint = async (id: string) => {
showLoader();
await http
.delete(config.API.appointEmployeeByid(id))
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
fecthlistappointment();
hideLoader();
});
};
// modal
const closeModalTree = async () => {
await fecthlistappointment();
modalTree.value = false;
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.appointEmployeeByid(id))
.then(async () => {
await fecthlistappointment();
await success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
};
//
const nextPage = (id: string) => {
/**
* redialect รายละเอยดการปรบระดบชนงานลกจาง
* @param id รายการปรบระดบชนงานลกจาง
*/
function nextPage(id: string) {
router.push({
path: `appoint-employee/detail/${id}`,
});
};
// input
const resetFilter = () => {
filterKeyword.value = "";
filterKeyword2.value = "";
filterRef.value.focus();
};
// modal
const clickClose = () => {
modal.value = false;
ModalEmployee.value = false;
};
// modal
const popup = () => {
}
/**
* เป popup งไปออกคำส
*/
function popup() {
modal.value = true;
filterKeyword2.value = "";
// fecthTypeOption();
};
}
const checkSave = () => {
dialogConfirm($q, async () => await saveData());
};
//
const saveData = async () => {
if (selectedPosition.value.length == 0) {
dialogMessageNotify($q, "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง");
return;
} else {
await savePosition();
}
};
//
const savePosition = async () => {
showLoader();
const data = {
organizationEmployeeId: selectedPosition.value[0].id,
};
await http
.put(config.API.appointEmployeePosition(personalId.value), data)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
fecthlistappointment();
clickClose();
});
};
// // dialog
// const modalOpenClose = () => {
// modal.value = !modal.value;
// if (!modal.value) {
// selectedPosition.value = [];
// rowsPosition.value = [];
// id.value = "";
// }
// };
/**
* popup งไปออกคำส
*/
function clickClose() {
modal.value = false;
}
/**
* เป popup เลอกหนวยงาน
* @param data อมลหนวยงาน
* @param type ประเภท าย,ปร
*/
function openModalTree(data: any, type: string) {
modalTree.value = true;
typeModal.value = type;
personalId.value = data.id;
dataRows.value = data;
posType.value = data.posTypeNameOld;
posLevel.value = data.posLevelNameOld;
position.value = data.positionOld;
modalTree.value = true;
}
/**
* นยนการบนทกขอมลเลอกตำแหน
*/
function onSave(data: any) {
console.log("not save", data);
const dataAppoint = {
// personalId: data.personalId,
node: data.node,
nodeId: data.nodeId,
orgRevisionId: data.orgRevisionId,
@ -519,19 +263,23 @@ function onSave(data: any) {
showLoader();
http
.put(config.API.appointmentPosition(personalId.value), dataAppoint)
.then((res) => {
.then(async () => {
await fecthlistappointment();
await success($q, "บันทึกสำเร็จ");
modalTree.value = false;
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
fecthlistappointment();
.finally(() => {
hideLoader();
});
}
onMounted(() => {
fecthlistappointment();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการปรบระดบชนงานลกจาง
@ -772,86 +520,7 @@ function onSave(data: any) {
</div>
</div>
</q-card>
<q-dialog v-model="ModalEmployee" persistent>
<q-card style="width: 70vw; max-width: 70vw">
<DialogHeader :tittle="'กำหนดตำแหน่ง'" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm">
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
ref="filterRef"
debounce="300"
v-model="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsPosition"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columnsPosition"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:rows="rowsPosition"
:columns="columnsPosition"
:filter="filterKeyword2"
row-key="id"
selection="single"
v-model:selected="selectedPosition"
:visible-columns="visibleColumnsPosition"
>
<template v-slot:body-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
</d-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="checkSave"
class="q-px-md"
>
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<Dialogbody
v-model:Modal="modal"
:clickClose="clickClose"
@ -862,12 +531,6 @@ function onSave(data: any) {
:nextPage="nextPage"
:fecthlistappointment="fecthlistappointment"
/>
<!-- <DialogOrgTree
v-model:modal="modalTree"
:close="closeModalTree"
:personal="personal"
:personalId="personalId"
/> -->
<DialogOrgSelectEmployee
:title="`เลือกหน่วยงานที่รับการปรับระดับชั้นงาน`"