hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

เงินเดือน => ปรีบ code รอบการขึ้นเงินเดือน

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-30 15:19:32 +07:00
parent 6bf2247962
commit b0b2f0a8d4
3 changed files with 285 additions and 322 deletions
Download patch file Download diff file Expand all files Collapse all files

403
src/modules/13_salary/components/SalaryRound/DialogForm.vue
View file

@ -1,44 +1,36 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, defineModel, defineProps, watch } from "vue"; import { ref, defineModel, watch } from "vue";
import Header from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type {
ObjectRef,
DataOption,
} from "@/modules/13_salary/interface/response/Main";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
/** importType*/
import type { DataOption } from "@/modules/13_salary/interface/response/Main";
/** importComponents*/
import Header from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/**use*/
const $q = useQuasar(); const $q = useQuasar();
const isActive = ref<boolean>(false); const {
const period = ref<string>(""); dialogConfirm,
date2Thai,
messageError,
success,
showLoader,
hideLoader,
} = useCounterMixin();
/** props*/
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const effective = defineModel<Date | null | string>("effective", { const effective = defineModel<Date | null | string>("effective", {
required: true, required: true,
}); });
const isRead = defineModel<boolean>("isRead", { required: true }); const isRead = defineModel<boolean>("isRead", { required: true });
const year = defineModel<number | null | string>("year"); const year = defineModel<number | null | string>("year");
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai, messageError,success } = mixin;
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const effectiveDate = ref<Date | null>(null);
/** ตัวแปร validate */
const periodRef = ref<Object | null>(null);
const effectiveDateRef = ref<Object | null>(null);
const yearRef = ref<Object | null>(null);
const typeOptions = ref<DataOption[]>([
{ id: "SPECIAL", name: "รอบพิเศษ" },
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
const objectForm: ObjectRef = {
period: periodRef,
effectiveDate: effectiveDateRef,
year: yearRef,
};
const props = defineProps({ const props = defineProps({
getData: Function, getData: Function,
edit: Boolean, edit: Boolean,
@ -48,29 +40,18 @@ const props = defineProps({
isActive: Boolean, isActive: Boolean,
isRead: Boolean, isRead: Boolean,
}); });
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
const hasError = [];
for (const key in objectForm) {
if (Object.prototype.hasOwnProperty.call(objectForm, key)) {
const property = objectForm[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) { const period = ref<string>("");
if (props.edit == true) { const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
editSummit(); const isActive = ref<boolean>(false);
} else { const effectiveDate = ref<Date | null>(null);
onSubmit(); const typeOptions = ref<DataOption[]>([
} { id: "SPECIAL", name: "รอบพิเศษ" },
} { id: "APR", name: "รอบเมษายน" },
} { id: "OCT", name: "รอบตุลาคม" },
]);
function saveData() {} /** function เคลียข้อมูล form*/
function clearForm() { function clearForm() {
isActive.value = false; isActive.value = false;
period.value = ""; period.value = "";
@ -79,54 +60,36 @@ function clearForm() {
isRead.value = false; isRead.value = false;
} }
/** function ปืด Dialog*/
function close() { function close() {
modal.value = false; modal.value = false;
clearForm(); clearForm();
} }
function editSummit() { /** function บัยทึกข้อมูลรอบการขึ้นเงินเดือน*/
dialogConfirm($q, () => {
const body = {
period: period.value,
isActive: isActive.value,
effectiveDate: effective.value,
year: year.value,
};
http
.put(config.API.salaryPeriod() + `/${props.idRound}`, body)
.then((res) => {
modal.value = false;
clearForm();
props.getData?.();
success($q,'บันทึกข้อมูลสำเร็จ')
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
});
}
function onSubmit() { function onSubmit() {
dialogConfirm($q, () => { dialogConfirm($q, async () => {
showLoader();
const body = { const body = {
period: period.value, period: period.value,
isActive: isActive.value, isActive: isActive.value,
effectiveDate: effective.value, effectiveDate: effective.value,
year: year.value, year: year.value,
}; };
http try {
.post(config.API.salaryPeriod(), body) const url = !props.edit
.then((res) => { ? config.API.salaryPeriod()
modal.value = false; : config.API.salaryPeriod() + `/${props.idRound}`;
clearForm(); await http[!props.edit ? "post" : "put"](url, body);
success($q,'บันทึกข้อมูลสำเร็จ') modal.value = false;
props.getData?.(); props.getData?.();
}) clearForm();
.catch((e) => { success($q, "บันทีกข้อมูลสำเร็จ");
messageError($q, e); } catch (err) {
}) messageError($q, err);
.finally(() => {}); } finally {
hideLoader();
}
}); });
} }
@ -137,10 +100,10 @@ function inputEdit(val: boolean) {
}; };
} }
/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
watch( watch(
() => modal.value, () => modal.value,
() => { () => {
console.log(props.edit);
if (props.edit == true) { if (props.edit == true) {
period.value = props.period ? props.period : ""; period.value = props.period ? props.period : "";
effectiveDate.value = props.effectiveDate ? props.effectiveDate : null; effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
@ -158,139 +121,145 @@ watch(
<template> <template>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 30%"> <q-card class="col-12" style="width: 30%">
<Header <q-form greedy @submit.prevent @validation-success="onSubmit">
:tittle="`${ isRead == true ? `ข้อมูลรอบการขึ้นเงินเดือน`: props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน` }`" <Header
:close="close" :tittle="`${
/> isRead == true
<q-separator /> ? `ข้อมูลรอบการขึ้นเงินเดือน`
: props.edit
? `แก้ไขรอบการขึ้นเงินเดือน`
: `เพิ่มรอบการขึ้นเงินเดือน`
}`"
:close="close"
/>
<q-separator />
<q-card-section class="scroll" style="max-height: 70vh">
<div class="q-gutter-y-sm">
<datepicker
:readonly="isRead"
menu-class-name="modalfix"
v-model="year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:readonly="isRead"
ref="yearRef"
dense
:class="inputEdit(isReadonly)"
hide-bottom-space
outlined
:model-value="year === 0 ? null : Number(year) + 543"
:label="`${'ปีงบประมาณ'}`"
:rules="[(val) => !!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-card-section class="scroll" style="max-height: 70vh"> <q-select
<div class="q-gutter-y-sm"> :readonly="isRead"
<datepicker ref="periodRef"
:readonly="isRead" :class="inputEdit(isReadonly)"
menu-class-name="modalfix" v-model="period"
v-model="year" label="รอบการขึ้นเงินเดือน"
class="col-2" dense
:locale="'th'" outlined
autoApply emit-value
year-picker map-options
:enableTimePicker="false" option-label="name"
> option-value="id"
<template #year="{ year }">{{ year + 543 }}</template> :options="typeOptions"
<template #year-overlay-value="{ value }">{{ lazy-rules
parseInt(value + 543) :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
}}</template> hide-bottom-space
<template #trigger> />
<q-input <datepicker
:readonly="isRead" :readonly="isRead"
ref="yearRef" menu-class-name="modalfix"
dense v-model="effective"
:class="inputEdit(isReadonly)" :locale="'th'"
hide-bottom-space autoApply
outlined borderless
:model-value="year === 0 ? null : Number(year) + 543" :enableTimePicker="false"
:label="`${'ปีงบประมาณ'}`" week-start="0"
:rules="[(val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`]" >
> <template #year="{ year }">
<template v-slot:prepend> {{ year + 543 }}
<q-icon </template>
name="event" <template #year-overlay-value="{ value }">
class="cursor-pointer" {{ parseInt(value + 543) }}
style="color: var(--q-primary)" </template>
> <template #trigger>
</q-icon> <q-input
</template> for="effectiveDate"
</q-input> ref="effectiveDateRef"
</template> outlined
</datepicker> dense
:class="inputEdit(isReadonly)"
<q-select :readonly="isRead"
:readonly="isRead" hide-bottom-space
ref="periodRef" :model-value="
:class="inputEdit(isReadonly)" effective != null ? date2Thai(effective as Date) : null
v-model="period" "
label="รอบการขึ้นเงินเดือน" label="วันที่มีผลบังคับใช้งาน"
dense :rules="[
outlined (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้งาน'}`,
emit-value ]"
map-options >
option-label="name" <template v-slot:prepend>
option-value="id" <q-icon
:options="typeOptions" name="event"
lazy-rules class="cursor-pointer"
:rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]" style="color: var(--q-primary)"
hide-bottom-space >
/> </q-icon>
<datepicker </template>
:readonly="isRead" </q-input>
menu-class-name="modalfix" </template>
v-model="effective" </datepicker>
:locale="'th'" <div class="col q-pa-sm bg-white border_custom text-weight-medium">
autoApply <div class="row items-center q-my-sm justify-between">
borderless <p class="q-ma-none">สถานะการใช้งาน</p>
:enableTimePicker="false" <label
week-start="0" :class="
> isRead == true ? 'toggle-control noClick' : 'toggle-control'
<template #year="{ year }"> "
{{ year + 543 }} >
</template> <input
<template #year-overlay-value="{ value }"> type="checkbox"
{{ parseInt(value + 543) }} v-model="isActive"
</template> :readonly="isRead"
<template #trigger> />
<q-input <span class="control"></span>
for="effectiveDate" </label>
ref="effectiveDateRef" </div>
outlined
dense
:class="inputEdit(isReadonly)"
:readonly="isRead"
hide-bottom-space
:model-value="
effective != null ? date2Thai(effective as Date) : null
"
label="วันที่มีผลบังคับใช้งาน"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้งาน'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="col q-pa-sm bg-white border_custom text-weight-medium">
<div class="row items-center q-my-sm justify-between">
<p class="q-ma-none">สถานะการใช้งาน</p>
<label :class="isRead == true ? 'toggle-control noClick':'toggle-control'">
<input type="checkbox" v-model="isActive" :readonly="isRead"/>
<span class="control"></span>
</label>
</div> </div>
</div> </div>
</div> </q-card-section>
</q-card-section> <q-separator v-if="!isRead" />
<q-separator v-if="!isRead"/> <q-card-actions align="right" class="bg-white text-teal" v-if="!isRead">
<form @submit.prevent="validateForm" v-if="!isRead"> <q-btn label="บันทึก" type="submit" color="secondary">
<q-card-actions align="right" class="bg-white text-teal"> <q-tooltip>บันทึกข้อมูล</q-tooltip>
<!-- <q-btn flat label="OK" v-close-popup /> --> </q-btn>
<q-btn
type="submit"
for="#submitForm"
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
/>
</q-card-actions> </q-card-actions>
</form> </q-form>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
@ -365,6 +334,6 @@ $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
} }
} }
.noClick { .noClick {
pointer-events: none; pointer-events: none;
} }
</style> </style>

31
src/modules/13_salary/interface/response/Main.ts
View file

@ -42,13 +42,13 @@ interface SalaryPosLevel {
interface RowList { interface RowList {
id: string; id: string;
period: string|null; period: string | null;
isActive: boolean|null; isActive: boolean | null;
isClose: boolean|null; isClose: boolean | null;
effectiveDate: Date|null|string; effectiveDate: Date | null | string;
year: number|null; year: number | null;
status: string|null; status: string | null;
revisionId: string|null; revisionId: string | null;
} }
interface Row { interface Row {
@ -56,11 +56,12 @@ interface Row {
total: number; total: number;
} }
interface ObjectRef { export type {
period: object | null; Salary,
effectiveDate: object | null; SalaryRate,
year: object | null; SalaryPosType,
[key: string]: any; SalaryPosLevel,
} RowList,
Row,
export type { Salary, SalaryRate, SalaryPosType, SalaryPosLevel,RowList,Row,ObjectRef,DataOption }; DataOption,
};

173
src/modules/13_salary/views/salaryRound.vue
View file

@ -2,31 +2,36 @@
import { ref, watch, onMounted } from "vue"; import { ref, watch, onMounted } from "vue";
import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore"; import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import type { RowList, Row } from "@/modules/13_salary/interface/response/Main";
import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
import config from "@/app.config"; import config from "@/app.config";
import http from "@/plugins/http"; import http from "@/plugins/http";
/** importType*/
import type { QTableProps } from "quasar";
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
import type { RowList } from "@/modules/13_salary/interface/response/Main";
/** importComponents*/
import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
/** importStore*/
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
const idRound = ref<string>(""); /** use*/
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const dataStore = useSalaryDataStore();
const { const {
dialogRemove, dialogRemove,
showLoader, showLoader,
hideLoader, hideLoader,
messageError, messageError,
date2Thai, date2Thai,
dateToISO,
dialogConfirm, dialogConfirm,
success, success,
} = mixin; } = useCounterMixin();
const dataStore = useSalaryDataStore();
const idRound = ref<string>("");
const year = ref<number>(0); const year = ref<number>(0);
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const rowsPerPage = ref<number>(10);
const editCheck = ref<boolean>(false); const editCheck = ref<boolean>(false);
const dialog = ref<boolean>(false); const dialog = ref<boolean>(false);
const period = ref<string>(""); const period = ref<string>("");
@ -39,23 +44,9 @@ const maxPage = ref<number>(1);
const totalList = ref<number>(0); const totalList = ref<number>(0);
const currentPage = ref<number>(1); const currentPage = ref<number>(1);
const page = ref<number>(1); const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const pagination = ref({ /** Table*/
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
});
const visibleColumns = ref<string[]>([
"no",
"period",
"year",
"effectiveDate",
"isActive",
"isClose",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -112,11 +103,26 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
const visibleColumns = ref<string[]>([
"no",
"period",
"year",
"effectiveDate",
"isActive",
"isClose",
]);
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
});
/** function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน */
function clickAdd() { function clickAdd() {
dialog.value = true; dialog.value = true;
editCheck.value = false; editCheck.value = false;
} }
/** ดึงข้อมูลเริ่มต้น */ /** ดึงข้อมูลเริ่มต้น */
function getData() { function getData() {
showLoader(); showLoader();
@ -137,7 +143,9 @@ function getData() {
hideLoader(); hideLoader();
}); });
} }
function dataUpdate() {
/** function เลือกปีงบประมาณ*/
function updateYear() {
page.value = 1; page.value = 1;
getData(); getData();
} }
@ -147,33 +155,33 @@ function yearAll() {
getData(); getData();
} }
/** ฟังชั่น เคลียฟิลเตอร์ */ /**
function resetFilter() { * function ลบรายการรอบการขึ้นเงินเดือน
filterKeyword.value = ""; * @param id รอบการขึ้นเงินเดือน
getData(); */
}
// /** ดึงข้อมูลเมื่อ กด enter */
// function filterFn() {
// getData();
// }
function deleteData(id: string) { function deleteData(id: string) {
showLoader(); dialogRemove($q, () => {
http showLoader();
.delete(config.API.salaryPeriod() + `/${id}`) http
.then((res) => { .delete(config.API.salaryPeriod() + `/${id}`)
getData(); .then(() => {
success($q, "ลบข้อมูลสำเร็จ"); getData();
}) success($q, "ลบข้อมูลสำเร็จ");
.catch((e) => { })
messageError($q, e); .catch((e) => {
}) messageError($q, e);
.finally(() => { })
hideLoader(); .finally(() => {
}); hideLoader();
});
});
} }
/**
* function เปืด Dialog ข้อมูลรอบการขึ้นเงินเดือน
* @param data ข้อมูลรอบการขึ้นเงินเดือน
* @param status สะถานะการแก่้ไข
*/
function editPopup(data: RowList, status: string) { function editPopup(data: RowList, status: string) {
if (status == "read") { if (status == "read") {
isRead.value = true; isRead.value = true;
@ -186,7 +194,11 @@ function editPopup(data: RowList, status: string) {
effectiveDate.value = data.effectiveDate as Date; effectiveDate.value = data.effectiveDate as Date;
isActive.value = data.isActive ? data.isActive : false; isActive.value = data.isActive ? data.isActive : false;
} }
/** ปิดรอบ */
/**
* function ปิดรอการขึ้นเงินเดือน
* @param id รอบการขึ้นเงินเดือน
*/
function dialogClose(id: string) { function dialogClose(id: string) {
dialogConfirm( dialogConfirm(
$q, $q,
@ -206,6 +218,24 @@ function dialogClose(id: string) {
); );
} }
/**
* function อัปเดท แถวต่อหน้า
* @param newPagination
*/
function updatePageSize(newPagination: NewPagination) {
page.value = 1;
rowsPerPage.value = newPagination.rowsPerPage;
}
/** callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน*/
watch(
() => rowsPerPage.value,
() => {
getData();
}
);
/** Hooklifecycle*/
onMounted(async () => { onMounted(async () => {
year.value = new Date().getFullYear(); year.value = new Date().getFullYear();
getData(); getData();
@ -213,18 +243,6 @@ onMounted(async () => {
dataStore.visibleColumns = visibleColumns.value; dataStore.visibleColumns = visibleColumns.value;
dataStore.columns = columns.value; dataStore.columns = columns.value;
}); });
function updatePageSize(newPagination: any) {
page.value = 1;
rowsPerPage.value = newPagination.rowsPerPage;
}
watch(
() => rowsPerPage.value,
() => {
getData();
}
);
</script> </script>
<template> <template>
@ -244,7 +262,7 @@ watch(
autoApply autoApply
year-picker year-picker
:enableTimePicker="false" :enableTimePicker="false"
@update:model-value="dataUpdate" @update:model-value="updateYear"
> >
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{ <template #year-overlay-value="{ value }">{{
@ -290,26 +308,6 @@ watch(
> >
</div> </div>
<q-space /> <q-space />
<!-- <q-input
for="#search"
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input> -->
<q-select <q-select
id="visibleColumns" id="visibleColumns"
@ -477,12 +475,7 @@ watch(
v-if="props.row.revisionId == null" v-if="props.row.revisionId == null"
clickable clickable
v-close-popup v-close-popup
@click.stop=" @click.stop="deleteData(props.row.id)"
dialogRemove(
$q,
async () => await deleteData(props.row.id)
)
"
> >
<q-item-section> <q-item-section>
<div class="row items-center"> <div class="row items-center">