เงินเดือน => ปรีบ code รอบการขึ้นเงินเดือน
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6bf2247962
commit
b0b2f0a8d4
3 changed files with 285 additions and 322 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue