hrms-mgt/src/modules/05_placement/components/AppointEmployee/Main.vue
2024-05-20 17:22:35 +07:00

882 lines
28 KiB
Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
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 "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
import type {
listAppointType,
resData,
orgFilter,
} from "@/modules/05_placement/interface/response/AppointMent";
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";
const typeModal = ref<string>("");
const posType = ref<string>("");
const posLevel = ref<string>("");
const position = ref<string>("");
const dataRows = ref<any[]>([]);
const $q = useQuasar();
const modal = ref<boolean>(false);
const storeFn = useTransferDataStore();
const { statusText } = storeFn;
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
showLoader,
hideLoader,
success,
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>("");
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",
"fullname",
"organizationName",
"birthday",
"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",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationName",
align: "left",
label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
sortable: true,
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "birthday",
align: "left",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "birthday",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
onMounted(() => {
fecthlistappointment();
});
//ดึงข้อมูล API
const fecthlistappointment = async () => {
showLoader();
rows.value = [];
await 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 &&
e.status !== "REPORT" &&
e.status !== "DONE" &&
e.educationOld &&
e.organizationPositionOld &&
e.positionTypeOld &&
e.positionLevelOld &&
e.positionNumberOld &&
e.salary !== null &&
e.positionDate
);
})
.catch((e) => {
messageError($q, e);
})
.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();
});
};
//เเจ้งเตือนลบข้อมูล
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;
};
// ไปหน้ารายละเอียด
const 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 = () => {
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 = "";
// }
// };
function openModalTree(data:any,type:string){
modalTree.value = true
typeModal.value = type;
personalId.value = data.id;
dataRows.value = data;
posType.value = data.posTypeId;
posLevel.value = data.posLevelId;
position.value = data.positionName;
}
function onSave(data: any) {
console.log("not save", data);
const dataAppoint = {
// personalId: data.personalId,
node: data.node,
nodeId: data.nodeId,
orgRevisionId: data.orgRevisionId,
positionId: data.positionId,
posMasterNo: data.posMasterNo,
positionName: data.positionName,
posTypeId: data.posTypeId,
posTypeName: data.posTypeName,
posLevelId: data.posLevelId,
posLevelName: data.posLevelName,
reportingDate: data.reportingDate,
posmasterId: data.posmasterId,
typeCommand: data.typeCommand,
};
showLoader();
http
.put(config.API.appointmentPosition(personalId.value), dataAppoint)
.then((res) => {
modalTree.value = false;
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
fecthlistappointment();
hideLoader();
});
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการปรบระดบชนงานลกจาง
</div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<q-btn
@click="popup()"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>งไปออกคำส</q-tooltip>
</q-btn>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
/>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="citizenId"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="nextPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
{{
props.row.firstName
? `${props.row.prefix ?? ""}${
props.row.firstName ?? ""
} ${props.row.lastName ?? ""}`
: "-"
}}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? statusText(props.row.status) : "-" }}
</div>
<div v-else-if="col.name == 'dateOfBirth'">
{{
props.row.dateOfBirth
? date2Thai(props.row.dateOfBirth)
: "-"
}}
</div>
<div v-else-if="col.name == 'organizationName'">
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.root !== null ? props.row.root : "-" }}
{{
props.row.rootShortName !== null
? `(${props.row.rootShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.nodeName !== null ? props.row.nodeName : ""
}}
{{
props.row.nodeShortName !== null
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
: ""
}}
</div>
</div>
</div>
<div v-else-if="col.name == 'createdAt'">
{{
props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="
props.row.status !== 'REPORT' &&
props.row.status !== 'DONE'
"
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu
transition-show="jump-down"
transition-hide="jump-up"
>
<q-list dense style="min-width: 200px">
<!-- <q-item
clickable
v-close-popup
@click="openModalEmployee(props.row.personalId)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="primary"
size="xs"
name="mdi-bookmark-outline"
/>
</q-item-section>
<q-item-section>กำหนดตำแหน่ง</q-item-section>
</q-item> -->
<q-item
clickable
v-close-popup
@click="openModalTree(props.row,'SLIP')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="primary"
size="xs"
name="mdi-bookmark-outline"
/>
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับปรับระดับชั้นงาน</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="openModalTree(props.row,'MOVE')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="primary"
size="xs"
name="mdi-bookmark-outline"
/>
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับย้าย</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="clickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</q-card>
<q-dialog v-model="ModalEmployee" persistent>
<q-card style="width: 70vw; max-width: 70vw">
<DialogHeader title="กำหนดตำแหน่ง" :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"
:optionsType="optionsType"
:rows2="rows2"
v-model:filterKeyword2="filterKeyword2"
v-model:type="type"
:nextPage="nextPage"
:fecthlistappointment="fecthlistappointment"
/>
<!-- <DialogOrgTree
v-model:modal="modalTree"
:close="closeModalTree"
:personal="personal"
:personalId="personalId"
/> -->
<DialogOrgSelectEmployee
:title="`เลือกหน่วยงานที่รับการปรับระดับชั้นงาน`"
v-model:modal="modalTree"
v-model:type="typeModal"
:posType="posType"
:posLevel="posLevel"
:position="position"
:dataRows="dataRows"
:onSubmit="onSave"
/>
</template>
<style scoped lang="scss"></style>