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

UI Salary

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-16 11:12:16 +07:00
parent d1eab09ee4
commit 18ad7b102e
5 changed files with 612 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

253
src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
View file

@ -1,5 +1,254 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { computed, ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
<template>เพิ่ม/แก้ไขอัตราเงินเดือน</template>
import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
import Header from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const {
date2Thai,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
typeAction: {
type: String,
required: true,
},
data: {
type: Object,
defult: [],
},
});
const formData = reactive<any>({
salaryId: "",
salary: null,
salaryHalf: null,
salaryHalfSpecial: null,
salaryFull: null,
salaryFullSpecial: null,
salaryFullHalf: null,
salaryFullHalfSpecial: null,
isNext: false,
});
/** ตัวแปร ref สำหรับแสดง validate */
const salaryRef = ref<Object | null>(null);
const salaryHalfRef = ref<Object | null>(null);
const salaryHalfSpecialRef = ref<Object | null>(null);
const salaryFullRef = ref<Object | null>(null);
const salaryFullSpecialRef = ref<Object | null>(null);
const salaryFullHalfRef = ref<Object | null>(null);
const salaryFullHalfSpecialRef = ref<Object | null>(null);
const ObjectRef: ObjectSalaryRateRef = {
salary: salaryRef,
salaryHalf: salaryHalfRef,
salaryHalfSpecial: salaryHalfSpecialRef,
salaryFull: salaryFullRef,
salaryFullSpecial: salaryFullSpecialRef,
salaryFullHalf: salaryFullHalfRef,
salaryFullHalfSpecial: salaryFullHalfSpecialRef,
};
const title = computed(() => {
const name =
props.typeAction === "add"
? "เพิ่มอัตราเงินเดือน"
: props.typeAction === "edit"
? "แก้ไขอัตราเงินเดือน"
: "อัตราเงินเดือน";
return name;
});
function closeDialog() {
modal.value = !modal.value;
}
function onClickSubmit() {
// console.log(Number(formData.salary.replace(/,/g, "")));
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)) {
createSalaryRate();
}
}
function createSalaryRate() {
dialogConfirm($q, () => {
if (props.typeAction === "add") {
success($q, "add");
} else {
success($q, "edit");
}
closeDialog();
});
}
watch(
() => modal.value,
() => {
if (modal.value && props.typeAction === "edit") {
if (props.data) {
console.log(props.data);
const data = props.data;
// formData.salaryId = data.id;
formData.salary = data.salary;
formData.salaryHalf = data.salaryHalf;
formData.salaryHalfSpecial = data.salaryHalfSpecial;
formData.salaryFull = data.salaryFull;
formData.salaryFullSpecial = data.salaryFullSpecial;
formData.salaryFullHalf = data.salaryFullHalf;
formData.salaryFullHalfSpecial = data.salaryFullHalfSpecial;
formData.isNext = data.isNext;
}
}
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="width: 700px; max-width: 80vw">
<Header :tittle="title" :close="closeDialog" />
<q-separator />
<q-card-section class="q-pt-none">
<div class="row q-gutter-sm q-pa-md">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-6">
<q-input
ref="salaryRef"
dense
outlined
v-model="formData.salary"
label="เงินเดือนฐาน"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6 row items-center">
<q-checkbox dense v-model="formData.isNext" label="ทำลุขั้น" />
</div>
<div class="col-6">
<q-input
ref="salaryHalfRef"
dense
outlined
v-model="formData.salaryHalf"
label="เลื่อน 0.5 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
ref="salaryHalfSpecialRef"
dense
outlined
v-model="formData.salaryHalfSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'เงินพิเศษ'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
ref="salaryFullRef"
dense
outlined
v-model="formData.salaryFull"
label="เลื่อน 1 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
ref="salaryFullSpecialRef"
dense
outlined
v-model="formData.salaryFullSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'เงินพิเศษ'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
ref="salaryFullHalfRef"
dense
outlined
v-model="formData.salaryFullHalf"
label="เลื่อน 1.5 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
ref="salaryFullHalfSpecialRef"
dense
outlined
v-model="formData.salaryFullHalfSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'เงินพิเศษ'}`]"
lazy-rules
hide-bottom-space
/>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped></style>