รายการผังบัญชีเงินเดือน => fix bug
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
66e2ff2f77
commit
ace4e47c94
2 changed files with 108 additions and 16 deletions
|
|
@ -1,7 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import axios from "axios";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
|
|
@ -59,7 +58,9 @@ const formData = reactive<FormData>({
|
|||
});
|
||||
|
||||
const posType = ref<SalaryPosType[]>([]);
|
||||
const salaryPosTypeOptionMain = ref<DataOption[]>([]);
|
||||
const salaryPosTypeOption = ref<DataOption[]>([]);
|
||||
const salaryPosLevelOptionMain = ref<DataOption[]>([]);
|
||||
const salaryPosLevelOption = ref<DataOption[]>([]);
|
||||
|
||||
const title = computed(() => {
|
||||
|
|
@ -73,7 +74,9 @@ const title = computed(() => {
|
|||
return name;
|
||||
});
|
||||
|
||||
/** fiunction fetch ข้อมูลประเภทตำแหน่ง*/
|
||||
/**
|
||||
* fiunction fetch ข้อมูลประเภทตำแหน่ง
|
||||
*/
|
||||
function fetchPosType() {
|
||||
http
|
||||
.get(config.API.salaryPosType)
|
||||
|
|
@ -83,6 +86,7 @@ function fetchPosType() {
|
|||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
salaryPosTypeOptionMain.value = listOption;
|
||||
salaryPosTypeOption.value = listOption;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -90,7 +94,9 @@ function fetchPosType() {
|
|||
});
|
||||
}
|
||||
|
||||
/** fiunction fetch ข้อมูลระดับตำแหน่ง*/
|
||||
/**
|
||||
* fiunction fetch ข้อมูลระดับตำแหน่ง
|
||||
*/
|
||||
function fetchPosLevel(id: string) {
|
||||
const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
|
||||
const listOption =
|
||||
|
|
@ -99,6 +105,7 @@ function fetchPosLevel(id: string) {
|
|||
name: e.posLevelName,
|
||||
})) || [];
|
||||
|
||||
salaryPosLevelOptionMain.value = listOption;
|
||||
salaryPosLevelOption.value = listOption;
|
||||
if (!listOption.some((e: DataOption) => e.id === formData.posLevelId)) {
|
||||
formData.posLevelId = "";
|
||||
|
|
@ -134,14 +141,15 @@ function fetchSalaryDetail(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
|
||||
/**
|
||||
* callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog
|
||||
*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
if (salaryPosTypeOption.value.length === 0) {
|
||||
fetchPosType();
|
||||
}
|
||||
fetchPosType();
|
||||
|
||||
if (props.typeAction === "edit") {
|
||||
setTimeout(() => {
|
||||
if (props.data) {
|
||||
|
|
@ -155,13 +163,17 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
/** function ปืด Dialog*/
|
||||
/**
|
||||
* function ปืด Dialog
|
||||
*/
|
||||
function closeDialog() {
|
||||
modal.value = !modal.value;
|
||||
clearFormData();
|
||||
}
|
||||
|
||||
/** function เคลียข้อมูล form*/
|
||||
/**
|
||||
* function เคลียข้อมูล form
|
||||
*/
|
||||
function clearFormData() {
|
||||
formData.name = "";
|
||||
formData.posTypeId = "";
|
||||
|
|
@ -175,7 +187,9 @@ function clearFormData() {
|
|||
isReadonly.value = false;
|
||||
}
|
||||
|
||||
/** function บัยทึกข้อมูลผังบัญชีเงินเดือน*/
|
||||
/**
|
||||
* function บัยทึกข้อมูลผังบัญชีเงินเดือน
|
||||
*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
|
|
@ -196,7 +210,9 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
/** function checkEndDate*/
|
||||
/**
|
||||
* function checkEndDate
|
||||
*/
|
||||
function checkEndDate() {
|
||||
if (formData.endDate !== null && formData.startDate !== null) {
|
||||
if (formData.endDate < formData.startDate) {
|
||||
|
|
@ -204,6 +220,47 @@ function checkEndDate() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาคำใน select
|
||||
* @param val คำค้นหา
|
||||
* @param update function
|
||||
* @param type ประเภท select
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, type: string) {
|
||||
switch (type) {
|
||||
case "posType":
|
||||
update(() => {
|
||||
formData.posTypeId = "";
|
||||
salaryPosTypeOption.value = salaryPosTypeOptionMain.value.filter(
|
||||
(v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "posLevel":
|
||||
update(() => {
|
||||
formData.posLevelId = "";
|
||||
salaryPosLevelOption.value = salaryPosLevelOptionMain.value.filter(
|
||||
(v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||
*/
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -219,6 +276,7 @@ function checkEndDate() {
|
|||
<div class="col-xs-12 col-md-4">
|
||||
<q-input
|
||||
:readonly="isReadonly"
|
||||
:class="getClass(!isReadonly)"
|
||||
ref="nameRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
|
|
@ -235,6 +293,7 @@ function checkEndDate() {
|
|||
<div class="col-xs-12 col-md-4">
|
||||
<q-select
|
||||
:readonly="isReadonly"
|
||||
:class="getClass(!isReadonly)"
|
||||
ref="posTypeRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
|
|
@ -248,13 +307,25 @@ function checkEndDate() {
|
|||
label="ประเภทตำแหน่ง/กลุ่ม"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
|
||||
lazy-rules
|
||||
use-input
|
||||
@update:model-value="fetchPosLevel"
|
||||
/>
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn ,'posType')"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<q-select
|
||||
:readonly="isReadonly"
|
||||
:class="getClass(!isReadonly)"
|
||||
ref="posLevelRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
|
|
@ -268,8 +339,19 @@ function checkEndDate() {
|
|||
label="ระดับ"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
|
||||
lazy-rules
|
||||
use-input
|
||||
:disable="formData.posTypeId === ''"
|
||||
/>
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn ,'posLevel')"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
|
|
@ -298,6 +380,7 @@ function checkEndDate() {
|
|||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadonly"
|
||||
:class="getClass(!isReadonly)"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -334,6 +417,7 @@ function checkEndDate() {
|
|||
<div class="col-xs-12 col-md-4">
|
||||
<datepicker
|
||||
:readonly="isReadonly"
|
||||
:class="getClass(!isReadonly)"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.startDate"
|
||||
:locale="'th'"
|
||||
|
|
@ -378,6 +462,7 @@ function checkEndDate() {
|
|||
<div class="col-xs-12 col-md-4">
|
||||
<datepicker
|
||||
:readonly="isReadonly"
|
||||
:class="getClass(!isReadonly)"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.endDate"
|
||||
:locale="'th'"
|
||||
|
|
@ -420,6 +505,7 @@ function checkEndDate() {
|
|||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(!isReadonly)"
|
||||
:readonly="isReadonly"
|
||||
v-model="formData.details"
|
||||
outlined
|
||||
|
|
|
|||
|
|
@ -122,7 +122,9 @@ const isActive = ref<boolean>(false);
|
|||
const typeAction = ref<string>("");
|
||||
const dataRow = ref<Salary>();
|
||||
|
||||
/** function fetch ข้อมูลรายการผังบัญชีเงินเดือน */
|
||||
/**
|
||||
* function fetch ข้อมูลรายการผังบัญชีเงินเดือน
|
||||
*/
|
||||
function fetchListSalaly() {
|
||||
showLoader();
|
||||
const page = formQuery.page.toString();
|
||||
|
|
@ -219,7 +221,9 @@ function onClickUpload(type: string, id: string, active: boolean) {
|
|||
isActive.value = active;
|
||||
}
|
||||
|
||||
/** callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน่าหรือ แถว*/
|
||||
/**
|
||||
* callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน่าหรือ แถว
|
||||
*/
|
||||
watch([() => formQuery.page, () => formQuery.pageSize], () => {
|
||||
fetchListSalaly();
|
||||
});
|
||||
|
|
@ -233,7 +237,9 @@ function updatePagination(newPagination: NewPagination) {
|
|||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลตาม keyword*/
|
||||
/**
|
||||
* function ค้นหาข้อมูลตาม keyword
|
||||
*/
|
||||
function filterFn(page: number) {
|
||||
page !== 1 ? (formQuery.page = 1) : fetchListSalaly();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue