API ข้อมูลตำแหน่งลูกจ้างประจำ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-14 15:45:37 +07:00
parent c052ef9148
commit 0a86f87f9c
7 changed files with 275 additions and 144 deletions

View file

@ -4,19 +4,30 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { QTableProps } from "quasar";
import type {
ObjectPosRef,
FormQuery,
} from "@/modules/01_metadataNew/interface/index/positionEmployee";
import type {
DataOption,
FormPositionSelect,
RowDetailPositions,
} from "@/modules/01_metadataNew/interface/request/position/index";
import type { QTableProps } from "quasar";
import type {
ResGroup,
ResLevel,
ResPossition,
} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
import DialogAddPosition from "@/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue";
/**importComponets*/
import DialogHeader from "@/components/DialogHeader.vue";
/**importStore*/
import { useCounterMixin } from "@/stores/mixin";
/**use*/
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogConfirm,
@ -27,9 +38,7 @@ const {
dialogRemove,
} = mixin;
const rows = ref<RowDetailPositions[]>([]);
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
const rows = ref<ResPossition[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -41,11 +50,11 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "positionName",
name: "posDictName",
align: "left",
label: "ชื่อตำแหน่ง",
sortable: true,
field: "positionName",
field: "posDictName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -70,100 +79,42 @@ const columns = ref<QTableProps["columns"]>([
]);
const visibleColumns = ref<string[]>([
"no",
"positionName",
"posDictName",
"posTypeName",
"posLevelName",
]);
const editPosition = ref<boolean>(false);
const modalAddPosition = ref<boolean>(false);
const isSpecial = ref<boolean>(false);
const formPositionSelect = reactive<FormPositionSelect>({
positionId: "",
posTypeId: "",
positionName: "",
positionField: "",
positionType: "",
positionLevel: "",
positionExecutive: "",
positionExecutiveField: "",
positionArea: "",
isSpecial: false,
const formQuery = reactive<FormQuery>({
type: "positionName",
keyword: "",
});
/** input ค้นหา */
const searchRef = ref<any>(null);
const search = ref<string>("");
const type = ref<string>("positionName");
const isReadonly = ref<boolean>(false); //
const optionFilter = ref<DataOption[]>([
{ id: "positionName", name: "ชื่อตำแหน่ง" },
{ id: "positionType", name: "กลุ่มงาน" },
{ id: "positionLevel", name: "ระดับชั้นงาน" },
]);
/**
* ดลอกขอม
* @param data อมลตำแหน
*/
function copyDetiail(data: RowDetailPositions) {
formPositionSelect.positionId = data.id;
formPositionSelect.posTypeId = data.posTypeId;
formPositionSelect.positionName = data.positionName;
formPositionSelect.positionType = data.posTypeId;
formPositionSelect.positionLevel = data.posLevelId;
modalAddPosition.value = true;
}
/**
* แกไขขอม
* @param data อมลตำแหน
*/
function editDetiail(data: RowDetailPositions) {
formPositionSelect.positionId = data.id;
formPositionSelect.posTypeId = data.posTypeId;
formPositionSelect.positionName = data.positionName;
formPositionSelect.positionType = data.posTypeId;
formPositionSelect.positionLevel = data.posLevelId;
modalAddPosition.value = true;
editPosition.value = true;
}
const modalDialog = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const posId = ref<string>("");
const formDataPos = reactive({
posName: "",
posTypeName: "",
posLevelName: "",
});
const posNameRef = ref<object | null>(null);
const posTypeNameRef = ref<object | null>(null);
const posLevelNameRef = ref<object | null>(null);
const objectRef: ObjectPosRef = {
posName: posNameRef,
posTypeName: posTypeNameRef,
posLevelName: posLevelNameRef,
};
/**
* งค css ออกไปตามเงอนไข
* @param val true/false
*/
function inputEdit(val: boolean) {
return {
"full-width cursor-pointer inputgreen ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
async function searchInput() {
// showLoader();
// await http
// .get(
// config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
// )
// .then((res) => {
// rowsPositionSelect.value = res.data.result;
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// });
}
function addPosition(data: RowDetailPositions) {
const isIdExist = rows.value.some((item: any) => item.id === data.id);
if (!isIdExist) {
rows.value = [data, ...rows.value];
}
}
const posTypeMain = ref<ResGroup[]>([]);
const posTypeOp = ref<DataOption[]>([]);
const posLevelOp = ref<DataOption[]>([]);
function deletePos(id: string) {
dialogRemove($q, () => {
@ -172,28 +123,43 @@ function deletePos(id: string) {
.delete(config.API.orgEmployeePosById(id))
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
fetchData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
searchInput();
hideLoader();
});
});
}
function popupAdd() {
modalAddPosition.value = true;
async function onClickOpenDialog(typeEdit: boolean = false, data: any = []) {
modalDialog.value = true;
isStatusEdit.value = typeEdit;
await fetchType();
updatePosTypeName(data.posTypeId);
if (data) {
posId.value = data.id;
setTimeout(() => {
formDataPos.posName = data.posDictName;
formDataPos.posTypeName = data.posTypeId;
formDataPos.posLevelName = data.posLevelId;
}, 200);
}
}
async function fetchData() {
search.value = "";
async function fetchData(statusFetch: boolean = false) {
showLoader();
await http
.get(config.API.orgEmployeePos + `?keyword=&type=ALL`)
.get(
config.API.orgEmployeePos +
`?keyword=${formQuery.keyword}&type=${
statusFetch ? "" : formQuery.type
}`
)
.then((res) => {
rowsPositionSelect.value = res.data.result;
rows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
@ -203,8 +169,85 @@ async function fetchData() {
});
}
async function fetchType() {
showLoader();
await http
.get(config.API.orgEmployeeType)
.then((res) => {
const data = res.data.result;
posTypeMain.value = data;
posTypeOp.value = data.map((e: ResGroup) => ({
id: e.id,
name: e.posTypeName,
}));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function onClickSubmit() {
const hasError = [];
for (const key in objectRef) {
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
const property = objectRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm($q, () => {
submit();
});
}
}
async function submit() {
const body = {
posDictName: formDataPos.posName,
posTypeId: formDataPos.posTypeName,
posLevelId: formDataPos.posLevelName,
};
showLoader();
try {
const url = !isStatusEdit.value
? config.API.orgEmployeePos
: config.API.orgEmployeePosById(posId.value);
await http[!isStatusEdit.value ? "post" : "put"](url, body);
success($q, "บันทีกข้อมูลสำเร็จ");
fetchData();
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
closeDialog();
}
}
function updatePosTypeName(id: string) {
const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
posLevelOp.value =
posLevel?.posLevels.map((e: ResLevel) => ({
id: e.id,
name: e.posLevelName.toString(),
})) ?? [];
formDataPos.posLevelName = "";
}
function closeDialog() {
modalDialog.value = false;
formDataPos.posName = "";
formDataPos.posTypeName = "";
formDataPos.posLevelName = "";
}
onMounted(() => {
fetchData();
fetchData(true);
});
</script>
<template>
@ -218,7 +261,7 @@ onMounted(() => {
round
color="primary"
icon="mdi-plus"
@click="popupAdd()"
@click="onClickOpenDialog()"
><q-tooltip>เพมตำเเหน </q-tooltip></q-btn
>
</div>
@ -227,7 +270,7 @@ onMounted(() => {
<div class="col-md-4">
<q-select
label="ค้นหาจาก"
v-model="type"
v-model="formQuery.type"
:options="optionFilter"
emit-value
dense
@ -241,19 +284,19 @@ onMounted(() => {
<div class="col-md-6">
<q-input
ref="searchRef"
:class="inputEdit(isReadonly)"
v-model="search"
v-model="formQuery.keyword"
outlined
dense
lazy-rules
label="คำค้น"
hide-bottom-space
@keydown.enter="fetchData()"
>
<template v-slot:append>
<q-icon
v-if="search"
v-if="formQuery.keyword"
name="cancel"
@click="fetchData()"
@click="(formQuery.keyword = ''), fetchData()"
class="cursor-pointer"
></q-icon>
</template>
@ -266,7 +309,7 @@ onMounted(() => {
icon="search"
label="ค้นหา"
class="full-width"
@click="searchInput()"
@click="fetchData()"
/>
</div>
</div>
@ -276,7 +319,7 @@ onMounted(() => {
<d-table
ref="table"
:columns="columns"
:rows="rowsPositionSelect"
:rows="rows"
row-key="id"
flat
bordered
@ -300,24 +343,11 @@ onMounted(() => {
</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="addPosition(props.row)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'posLevelName'">
{{
props.row.posLevelName
? props.row.isSpecial == true
? `${props.row.posLevelName} (ฉ)`
: props.row.posLevelName
: "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
@ -334,7 +364,7 @@ onMounted(() => {
clickable
@click.stop="
() => {
copyDetiail(props.row);
onClickOpenDialog(false, props.row);
}
"
>
@ -348,7 +378,7 @@ onMounted(() => {
size="12px"
icon="mdi-pencil"
clickable
@click.stop="editDetiail(props.row)"
@click.stop="onClickOpenDialog(true, props.row)"
v-close-popup
>
<q-tooltip>แกไขขอม</q-tooltip>
@ -371,10 +401,80 @@ onMounted(() => {
</template>
</d-table>
</div>
<DialogAddPosition
v-model:add-position="modalAddPosition"
v-model:form-data="formPositionSelect"
v-model:edit-check="editPosition"
:get-data="searchInput"
/>
<q-dialog v-model="modalDialog" class="dialog" persistent>
<q-card style="width: 350px">
<form @submit.prevent="onClickSubmit">
<DialogHeader
:tittle="`${
isStatusEdit
? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
: 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
}`"
:close="closeDialog"
/>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm col-12">
<div class="col-12">
<q-input
ref="posNameRef"
v-model="formDataPos.posName"
dense
outlined
for="#positionName"
label="ชื่อตำแหน่ง"
lazy-rules
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
/>
</div>
<div class="col-6">
<q-select
ref="posTypeNameRef"
label="กลุ่มงาน"
v-model="formDataPos.posTypeName"
:options="posTypeOp"
emit-value
dense
map-options
outlined
option-label="name"
option-value="id"
lazy-rules
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
@update:model-value="updatePosTypeName"
/>
</div>
<div class="col-6">
<q-select
ref="posLevelNameRef"
label="ระดับชั้นงาน"
v-model="formDataPos.posLevelName"
:disable="formDataPos.posTypeName === ''"
:options="posLevelOp"
emit-value
dense
map-options
outlined
option-label="name"
option-value="id"
lazy-rules
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn type="submit" :label="`บันทึก`" color="public" />
</q-card-actions>
</form>
</q-card>
</q-dialog>
</template>

View file

@ -168,7 +168,7 @@ function onClickOpenDialogEdit(data: ResGroup) {
dialog.value = true;
editId.value = data.id;
formDataGroup.posTypeName = data.posTypeName;
// formDataGroup.posTypeShortName = data.posTypeShortName;
formDataGroup.posTypeShortName = data.posTypeShortName;
formDataGroup.posTypeRank = data.posTypeRank;
}

View file

@ -91,16 +91,15 @@ const levelId = ref<string>("");
const formDataLevel = reactive<FormDataLevel>({
posLevelName: null,
posTypeName: "",
commander: "",
posLevelAuthority: "",
});
/** formRef*/
const posLevelNameRef = ref<Object | null>(null);
const commanderRef = ref<Object | null>(null);
const posTypeRankRef = ref<Object | null>(null);
const objectLevelRef: ObjectLevelRef = {
posLevelName: posLevelNameRef,
commander: commanderRef,
posLevelAuthority: commanderRef,
};
function fetchPosGroup() {
@ -143,11 +142,12 @@ const modalDialog = ref<boolean>(false);
function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
isStatusEdit.value = statusEdit;
modalDialog.value = true;
if (statusEdit) {
levelId.value = data.id;
formDataLevel.posLevelName = data.posLevelName;
formDataLevel.posTypeName = data.posTypeName;
formDataLevel.commander = data.commander;
formDataLevel.posLevelAuthority = data.posLevelAuthority;
}
}
@ -155,7 +155,7 @@ function onClickCloseDialog() {
modalDialog.value = false;
formDataLevel.posLevelName = null;
formDataLevel.posTypeName = "";
formDataLevel.commander = "";
formDataLevel.posLevelAuthority = "";
}
function onClickSubmit() {
@ -181,7 +181,7 @@ async function submit() {
posLevelName: Number(formDataLevel.posLevelName),
posTypeId: posTypeId.value,
posLevelRank: Number(formDataLevel.posLevelName),
posLevelAuthority: formDataLevel.commander,
posLevelAuthority: formDataLevel.posLevelAuthority,
};
showLoader();
try {
@ -213,6 +213,11 @@ function onClickDelete(id: string) {
});
}
function convertPosLevelAuthority(val: string) {
const result = storeOption.posLevelAuthorityOption.find((e) => e.id === val);
return result?.label;
}
onMounted(() => {
posTypeId.value && fetchData(posTypeId.value);
fetchPosGroup();
@ -293,6 +298,9 @@ onMounted(() => {
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'posLevelAuthority'">
{{ col.value ? convertPosLevelAuthority(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
@ -360,11 +368,11 @@ onMounted(() => {
<q-select
ref="commanderRef"
outlined
v-model="formDataLevel.commander"
v-model="formDataLevel.posLevelAuthority"
emit-value
map-options
:options="storeOption.posLevelAuthorityOption"
option-value="label"
option-value="id"
label="ผู้มีอำนาจสั่งบรรจุ"
dense
lazy-rules

View file

@ -3,7 +3,7 @@ import { ref, reactive, watch, defineProps } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
// import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
DataOption,

View file

@ -7,9 +7,22 @@ interface ObjectGroupRef {
interface ObjectLevelRef {
posLevelName: object | null;
commander: object | null;
posLevelAuthority: object | null;
[key: string]: any;
}
export type { ObjectGroupRef, ObjectLevelRef };
interface ObjectPosRef {
posName: object | null;
posTypeName: object | null;
posLevelName: object | null;
[key: string]: any;
}
interface FormQuery {
type: string;
keyword: string;
}
export type { ObjectGroupRef, ObjectLevelRef, ObjectPosRef, FormQuery };

View file

@ -7,7 +7,7 @@ interface FrmDataGroup {
interface FormDataLevel {
posLevelName: number | null;
posTypeName: string | undefined;
commander: string;
posLevelAuthority: string;
}
export type { FrmDataGroup, FormDataLevel };

View file

@ -3,6 +3,7 @@ interface ResGroup {
posLevels: ResLevel[];
posTypeName: string;
posTypeRank: number;
posTypeShortName: string;
}
interface ResLevel {
@ -10,7 +11,16 @@ interface ResLevel {
posLevelName: number;
posTypeName: string;
posTypeId: string;
commander: string;
posLevelAuthority: string;
}
export type { ResGroup, ResLevel };
interface ResPossition {
id: string;
posDictName: string;
posLevelId: string;
posLevelName: number;
posTypeId: string;
posTypeName: string;
}
export type { ResGroup, ResLevel, ResPossition };