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">
import { ref, defineModel, defineProps, 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 { ref, defineModel, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
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 isActive = ref<boolean>(false);
const period = ref<string>("");
const {
dialogConfirm,
date2Thai,
messageError,
success,
showLoader,
hideLoader,
} = useCounterMixin();
/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const effective = defineModel<Date | null | string>("effective", {
required: true,
});
const isRead = defineModel<boolean>("isRead", { required: true });
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({
getData: Function,
edit: Boolean,
@ -48,29 +40,18 @@ const props = defineProps({
isActive: 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)) {
if (props.edit == true) {
editSummit();
} else {
onSubmit();
}
}
}
const period = ref<string>("");
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const isActive = ref<boolean>(false);
const effectiveDate = ref<Date | null>(null);
const typeOptions = ref<DataOption[]>([
{ id: "SPECIAL", name: "รอบพิเศษ" },
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
function saveData() {}
/** function เคลียข้อมูล form*/
function clearForm() {
isActive.value = false;
period.value = "";
@ -79,54 +60,36 @@ function clearForm() {
isRead.value = false;
}
/** function ปืด Dialog*/
function close() {
modal.value = false;
clearForm();
}
function editSummit() {
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 บัยทึกข้อมูลรอบการขึ้นเงินเดือน*/
function onSubmit() {
dialogConfirm($q, () => {
dialogConfirm($q, async () => {
showLoader();
const body = {
period: period.value,
isActive: isActive.value,
effectiveDate: effective.value,
year: year.value,
};
http
.post(config.API.salaryPeriod(), body)
.then((res) => {
modal.value = false;
clearForm();
success($q,'บันทึกข้อมูลสำเร็จ')
props.getData?.();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
try {
const url = !props.edit
? config.API.salaryPeriod()
: config.API.salaryPeriod() + `/${props.idRound}`;
await http[!props.edit ? "post" : "put"](url, body);
modal.value = false;
props.getData?.();
clearForm();
success($q, "บันทีกข้อมูลสำเร็จ");
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
}
});
}
@ -137,10 +100,10 @@ function inputEdit(val: boolean) {
};
}
/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
watch(
() => modal.value,
() => {
console.log(props.edit);
if (props.edit == true) {
period.value = props.period ? props.period : "";
effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
@ -158,139 +121,145 @@ watch(
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 30%">
<Header
:tittle="`${ isRead == true ? `ข้อมูลรอบการขึ้นเงินเดือน`: props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน` }`"
:close="close"
/>
<q-separator />
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="`${
isRead == true
? `ข้อมูลรอบการขึ้นเงินเดือน`
: 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">
<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-select
:readonly="isRead"
ref="periodRef"
:class="inputEdit(isReadonly)"
v-model="period"
label="รอบการขึ้นเงินเดือน"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="typeOptions"
lazy-rules
:rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
hide-bottom-space
/>
<datepicker
:readonly="isRead"
menu-class-name="modalfix"
v-model="effective"
: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
for="effectiveDate"
ref="effectiveDateRef"
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>
<q-select
:readonly="isRead"
ref="periodRef"
:class="inputEdit(isReadonly)"
v-model="period"
label="รอบการขึ้นเงินเดือน"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="typeOptions"
lazy-rules
:rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
hide-bottom-space
/>
<datepicker
:readonly="isRead"
menu-class-name="modalfix"
v-model="effective"
: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
for="effectiveDate"
ref="effectiveDateRef"
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>
</q-card-section>
<q-separator v-if="!isRead"/>
<form @submit.prevent="validateForm" v-if="!isRead">
<q-card-actions align="right" class="bg-white text-teal">
<!-- <q-btn flat label="OK" v-close-popup /> -->
<q-btn
type="submit"
for="#submitForm"
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
/>
</q-card-section>
<q-separator v-if="!isRead" />
<q-card-actions align="right" class="bg-white text-teal" v-if="!isRead">
<q-btn label="บันทึก" type="submit" color="secondary">
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-card-actions>
</form>
</q-form>
</q-card>
</q-dialog>
</template>
@ -365,6 +334,6 @@ $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
}
}
.noClick {
pointer-events: none;
pointer-events: none;
}
</style>

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

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

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

@ -2,31 +2,36 @@
import { ref, watch, onMounted } from "vue";
import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
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 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";
const idRound = ref<string>("");
/** use*/
const $q = useQuasar();
const mixin = useCounterMixin();
const dataStore = useSalaryDataStore();
const {
dialogRemove,
showLoader,
hideLoader,
messageError,
date2Thai,
dateToISO,
dialogConfirm,
success,
} = mixin;
const dataStore = useSalaryDataStore();
} = useCounterMixin();
const idRound = ref<string>("");
const year = ref<number>(0);
const filterKeyword = ref<string>("");
const rowsPerPage = ref<number>(10);
const editCheck = ref<boolean>(false);
const dialog = ref<boolean>(false);
const period = ref<string>("");
@ -39,23 +44,9 @@ const maxPage = ref<number>(1);
const totalList = ref<number>(0);
const currentPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
});
const visibleColumns = ref<string[]>([
"no",
"period",
"year",
"effectiveDate",
"isActive",
"isClose",
]);
// หัวตาราง
/** Table*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -112,11 +103,26 @@ const columns = ref<QTableProps["columns"]>([
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() {
dialog.value = true;
editCheck.value = false;
}
/** ดึงข้อมูลเริ่มต้น */
function getData() {
showLoader();
@ -137,7 +143,9 @@ function getData() {
hideLoader();
});
}
function dataUpdate() {
/** function เลือกปีงบประมาณ*/
function updateYear() {
page.value = 1;
getData();
}
@ -147,33 +155,33 @@ function yearAll() {
getData();
}
/** ฟังชั่น เคลียฟิลเตอร์ */
function resetFilter() {
filterKeyword.value = "";
getData();
}
// /** ดึงข้อมูลเมื่อ กด enter */
// function filterFn() {
// getData();
// }
/**
* function ลบรายการรอบการขึ้นเงินเดือน
* @param id รอบการขึ้นเงินเดือน
*/
function deleteData(id: string) {
showLoader();
http
.delete(config.API.salaryPeriod() + `/${id}`)
.then((res) => {
getData();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.salaryPeriod() + `/${id}`)
.then(() => {
getData();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
/**
* function เปืด Dialog ข้อมูลรอบการขึ้นเงินเดือน
* @param data ข้อมูลรอบการขึ้นเงินเดือน
* @param status สะถานะการแก่้ไข
*/
function editPopup(data: RowList, status: string) {
if (status == "read") {
isRead.value = true;
@ -186,7 +194,11 @@ function editPopup(data: RowList, status: string) {
effectiveDate.value = data.effectiveDate as Date;
isActive.value = data.isActive ? data.isActive : false;
}
/** ปิดรอบ */
/**
* function ปิดรอการขึ้นเงินเดือน
* @param id รอบการขึ้นเงินเดือน
*/
function dialogClose(id: string) {
dialogConfirm(
$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 () => {
year.value = new Date().getFullYear();
getData();
@ -213,18 +243,6 @@ onMounted(async () => {
dataStore.visibleColumns = visibleColumns.value;
dataStore.columns = columns.value;
});
function updatePageSize(newPagination: any) {
page.value = 1;
rowsPerPage.value = newPagination.rowsPerPage;
}
watch(
() => rowsPerPage.value,
() => {
getData();
}
);
</script>
<template>
@ -244,7 +262,7 @@ watch(
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="dataUpdate"
@update:model-value="updateYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -290,26 +308,6 @@ watch(
>
</div>
<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
id="visibleColumns"
@ -477,12 +475,7 @@ watch(
v-if="props.row.revisionId == null"
clickable
v-close-popup
@click.stop="
dialogRemove(
$q,
async () => await deleteData(props.row.id)
)
"
@click.stop="deleteData(props.row.id)"
>
<q-item-section>
<div class="row items-center">