Merge branch 'nice_dev' into develop

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-29 18:02:23 +07:00
commit 2737810c6c
8 changed files with 484 additions and 526 deletions

View file

@ -4,13 +4,16 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
/** importType*/
import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
/** importComponentes*/
import Header from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar();
const {
date2Thai,
@ -19,9 +22,9 @@ const {
hideLoader,
messageError,
success,
dialogRemove,
} = useCounterMixin();
/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
isStatusEdit: { type: Boolean, required: true },
@ -31,6 +34,8 @@ const props = defineProps({
required: true,
},
});
/** form บัญชีค่าจ้างลูกจ้างประจำ */
const formData = reactive<FormDataChar>({
name: "", //
group: "", //*
@ -41,14 +46,12 @@ const formData = reactive<FormDataChar>({
details: "", //
});
const nameRef = ref<Object | null>(null);
const groupRef = ref<Object | null>(null);
const ObjectRef: ObjectCharRef = {
name: nameRef,
group: groupRef,
};
const isReadonly = ref<boolean>(false);
/**
* function fetch อม งบญชาจางลกจางประจำ
* @param id งบญชาจางลกจางประจำ
*/
function fetchSalaryDetail(id: string) {
showLoader();
http
@ -72,47 +75,33 @@ function fetchSalaryDetail(id: string) {
});
}
const isReadonly = ref<boolean>(false);
function onClickSubmit() {
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);
}
/** function บันทึกข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ*/
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
try {
const url = !props.isStatusEdit
? config.API.salaryEmployeeChart
: config.API.salaryEmployeeChartByid(props.data.id);
await http[!props.isStatusEdit ? "post" : "put"](url, formData);
success($q, "บันทีกข้อมูลสำเร็จ");
props.fetchData?.();
closeDialog();
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm($q, () => {
onSubmit();
});
}
}
async function onSubmit() {
showLoader();
try {
const url = !props.isStatusEdit
? config.API.salaryEmployeeChart
: config.API.salaryEmployeeChartByid(props.data.id);
await http[!props.isStatusEdit ? "post" : "put"](url, formData);
success($q, "บันทีกข้อมูลสำเร็จ");
props.fetchData?.();
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
closeDialog();
}
});
}
/** function ปืด Dialog*/
function closeDialog() {
modal.value = false;
clearFormData();
}
/** function เคลียข้อมูล form*/
function clearFormData() {
formData.name = "";
formData.group = "";
@ -132,6 +121,7 @@ function checkEndDate() {
}
}
/** callbaclFunction fetch ช้อมูลเมื่อแก้ไข*/
watch(
() => modal.value,
() => {
@ -144,7 +134,7 @@ watch(
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<form @submit.prevent.stop="onClickSubmit">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="
props.isStatusEdit
@ -359,7 +349,7 @@ watch(
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</div>
</form>
</q-form>
</q-card>
</q-dialog>
</template>

View file

@ -5,26 +5,27 @@ import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
/** importType*/
import type {
FormDataRate,
FormDataRateEpm,
} from "@/modules/13_salary/interface/request/EmployeeChart";
/** importComponents*/
import Header from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/**use */
const $q = useQuasar();
const route = useRoute();
const {
date2Thai,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const salaryEmployeeId = ref<string>(route.params.id.toString());
/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
isStatusEdit: {
@ -41,53 +42,31 @@ const props = defineProps({
},
});
const formData = reactive<any>({
/** form อัตราค่าจ้าง */
const formData = reactive<FormDataRateEpm>({
salaryNo: null,
salaryMonth: null,
salaryDay: null,
});
/** ตัวแปร ref สำหรับแสดง validate */
const salaryNoRef = ref<Object | null>(null);
const salaryMonthRef = ref<Object | null>(null);
const salaryDayRef = ref<Object | null>(null);
const ObjectRef: ObjectReteRef = {
salaryNo: salaryNoRef,
salaryMonth: salaryMonthRef,
salaryDay: salaryDayRef,
};
/** function ปืด Dialog*/
function closeDialog() {
modal.value = !modal.value;
clearFormData();
}
/** function เคลียข้อมูล form*/
function clearFormData() {
formData.salaryNo = null;
formData.salaryMonth = null;
formData.salaryDay = null;
}
function onClickSubmit() {
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)) {
onSubmit();
}
}
/** function บันทึกข้อมูลอัตราค่าจ้าง*/
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
const body: FormDataRate = {
salaryEmployeeId: !props.isStatusEdit
? salaryEmployeeId.value
@ -95,18 +74,19 @@ function onSubmit() {
step:
typeof formData.salaryNo === "number"
? formData.salaryNo
: Number(formData.salaryNo.replace(/,/g, "")),
: Number(formData.salaryNo?.replace(/,/g, "")),
salaryMonth:
typeof formData.salaryMonth === "number"
? formData.salaryMonth
: Number(formData.salaryMonth.replace(/,/g, "")), //*
: Number(formData.salaryMonth?.replace(/,/g, "")), //*
salaryDay:
typeof formData.salaryDay === "number"
? formData.salaryDay
: Number(formData.salaryDay.replace(/,/g, "")), //0.5
: Number(formData.salaryDay?.replace(/,/g, "")), //0.5
};
try {
const url = !props.isStatusEdit
? config.API.salaryEmployeeRateList
@ -123,13 +103,13 @@ function onSubmit() {
});
}
/** callbaclFunction fetch ช้อมูลเมื่อแก้ไข*/
watch(
() => modal.value,
() => {
if (modal.value && props.isStatusEdit) {
if (props.data) {
const data = props.data;
console.log(data);
formData.salaryNo = data.step;
formData.salaryMonth = data.salaryMonth;
formData.salaryDay = data.salaryDay;
@ -142,78 +122,81 @@ watch(
<template>
<q-dialog v-model="modal" persistent>
<q-card style="width: 500px">
<Header
:tittle="props.isStatusEdit ? 'แก้ไขอัตราค่าจ้าง' : 'เพิ่มอัตราค่าจ้าง'"
:close="closeDialog"
/>
<q-separator />
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="
props.isStatusEdit ? 'แก้ไขอัตราค่าจ้าง' : 'เพิ่มอัตราค่าจ้าง'
"
:close="closeDialog"
/>
<q-separator />
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-12">
<q-input
ref="salaryNoRef"
dense
outlined
v-model="formData.salaryNo"
label="ลำดับชั้น"
:rules="[
(val) => !!val || 'กรุณากรอกลำดับชั้น',
(val) =>
Number(val) === Math.floor(val) ||
Number(val) === Math.floor(val) + 0.5 ||
`กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-12">
<q-input
ref="salaryNoRef"
dense
outlined
v-model="formData.salaryNo"
label="ลำดับชั้น"
:rules="[
(val) => !!val || 'กรุณากรอกลำดับชั้น',
(val) =>
Number(val) === Math.floor(val) ||
Number(val) === Math.floor(val) + 0.5 ||
`กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
ref="salaryMonthRef"
dense
outlined
v-model="formData.salaryMonth"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
ref="salaryMonthRef"
dense
outlined
v-model="formData.salaryMonth"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
ref="salaryDayRef"
dense
outlined
v-model="formData.salaryDay"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
]"
/>
<div class="col-12">
<q-input
ref="salaryDayRef"
dense
outlined
v-model="formData.salaryDay"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
]"
/>
</div>
</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-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" type="submit" color="secondary">
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>

View file

@ -1,31 +1,21 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
ObjectReteRef,
DataOptions,
DataListOptions,
} from "@/modules/13_salary/interface/index/EmployeeChart";
import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
import Header from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const route = useRoute();
const {
date2Thai,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
// const salaryEmployeeId = ref<string>(route.params.id.toString());
@ -37,10 +27,6 @@ const props = defineProps({
defult: [],
},
getDataMain: Function,
// fetchData: {
// type: Function,
// required: true,
// },
});
const posTypeOp = ref<DataOptions[]>([]);
@ -49,6 +35,7 @@ const posNameOpMain = ref<DataOptions[]>([]);
const groupOldOp = ref<DataOptions[]>([]);
const posLevelOp = ref<any[]>([]);
const posNameListOp = ref<DataListOptions[]>([]);
const formData = reactive<any>({
id: "",
posType: "", //
@ -62,32 +49,13 @@ const formData = reactive<any>({
rateHighMax: "", //
});
/** ตัวแปร ref สำหรับแสดง validate */
const posTypeRef = ref<object | null>(null);
const posNameRef = ref<object | null>(null);
const posLevelRef = ref<object | null>(null);
const rateOldMinRef = ref<object | null>(null);
const groupOldRef = ref<object | null>(null);
const rateMaxOldRef = ref<object | null>(null);
const groupRateHighRef = ref<object | null>(null);
const rateHighMaxRef = ref<object | null>(null);
const ObjectRef: ObjectReteRef = {
posType: posTypeRef,
posName: posNameRef,
posLevel: posLevelRef,
rateOldMin: rateOldMinRef,
groupOld: groupOldRef,
rateMaxOld: rateMaxOldRef,
groupRateHigh: groupRateHighRef,
rateHighMax: rateHighMaxRef,
};
/** function ปืด Dialog*/
function closeDialog() {
modal.value = !modal.value;
clearFormData();
}
/** function เคลียข้อมูล form*/
function clearFormData() {
isEdit.value = false;
formData.posType = "";
@ -101,25 +69,10 @@ function clearFormData() {
formData.rateHighMax = "";
}
function onClickSubmit() {
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)) {
onSubmit();
}
}
/** function บันทึกข้อมูลหลักเกณฑ์*/
function onSubmit() {
dialogConfirm($q, async () => {
// showLoader();
showLoader();
const body = {
posTypeId: formData.posType.id,
position: formData.posName,
@ -147,7 +100,7 @@ function onSubmit() {
? config.API.salaryFormula()
: config.API.salaryFormulaById(formData.id);
await http[!isEdit.value ? "post" : "put"](url, body)
.then((res) => {
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
props.getDataMain?.();
@ -161,21 +114,6 @@ function onSubmit() {
});
}
// watch(
// () => modal.value,
// () => {
// if (modal.value && props.isStatusEdit) {
// if (props.data) {
// const data = props.data;
// console.log(data);
// formData.salaryNo = data.step;
// formData.salaryMonth = data.salaryMonth;
// formData.salaryDay = data.salaryDay;
// }
// }
// }
// );
/** ดึงข้อมูล กลุ่มงาน */
function getPosType() {
showLoader();
@ -247,6 +185,7 @@ function getPosNameEdit() {
hideLoader();
});
}
/** ดึงข้อมูล ระดับชั้นงาน */
function getPosLevel() {
formData.posLevel = "";
@ -258,11 +197,9 @@ function getPosLevel() {
formData.posLevel = posLevelOp.value[0];
}
}
/** ดึงข้อมูล ระดับชั้นงาน */
function getPosLevelEdit() {
console.log(1);
console.log(posNameListOp.value);
posLevelOp.value = posNameListOp.value
.filter((item) => item.posDictName === formData.posName)
.map((i) => ({ id: i.posLevelId, name: i.posLevelName }))
@ -272,6 +209,7 @@ function getPosLevelEdit() {
}
}
/** ดึงข้อมูล กลุ่ม */
function getSalaryGroup() {
http
.get(config.API.salaryEmployeeActive())
@ -282,14 +220,13 @@ function getSalaryGroup() {
id: item.id,
name: `กลุ่มที่ ${item.group}`,
}));
console.log(groupOldOp.value);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
});
}
/** function fetch ข้อมูลหลักเกณฑ์ */
function getDataEdit() {
http.get(config.API.salaryFormula() + `/${formData.id}`).then(async (res) => {
const data = res.data.result;
@ -314,10 +251,10 @@ function getDataEdit() {
}
watch(
() => modal.value,
async (check) => {
(check) => {
if (check) {
await getPosType();
await getSalaryGroup();
getPosType();
getSalaryGroup();
if (isEdit.value) {
formData.id = props.data?.id ? props.data.id : null;
@ -333,7 +270,7 @@ watch(
* @param update พเดทค
* @param refData ดาตาทองการฟลเตอร
*/
function filterOption(val: any, update: Function) {
function filterOption(val: any, update: Function) {
update(() => {
posNameOp.value = posNameOpMain.value.filter(
(v: any) => v.name.indexOf(val) > -1
@ -345,188 +282,192 @@ watch(
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<Header
:tittle="isEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
:close="closeDialog"
/>
<q-separator />
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="isEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
:close="closeDialog"
/>
<q-separator />
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-4">
<q-select
ref="posTypeRef"
dense
outlined
v-model="formData.posType"
label="กลุ่มงาน"
:rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
:options="posTypeOp"
option-label="name"
option-value="id"
map-options
lazy-rules
hide-bottom-space
@update:model-value="getPosName()"
/>
</div>
<div class="col-4">
<q-select
ref="posNameRef"
dense
:readonly="formData.posType"
outlined
v-model="formData.posName"
label="ตำแหน่ง"
:rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
:options="posNameOp"
option-label="name"
option-value="name"
emit-value
lazy-rules
use-input
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
hide-bottom-space
@update:model-value="getPosLevel()"
>
<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-4">
<q-select
:readonly="formData.posName"
ref="posLevelRef"
dense
outlined
v-model="formData.posLevel"
:options="posLevelOp"
option-label="name"
option-value="id"
map-options
label="ระดับชั้นงาน"
:rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
lazy-rules
hide-bottom-space
/>
</div>
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-4">
<q-select
ref="posTypeRef"
dense
outlined
v-model="formData.posType"
label="กลุ่มงาน"
:rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
:options="posTypeOp"
option-label="name"
option-value="id"
map-options
lazy-rules
hide-bottom-space
@update:model-value="getPosName()"
/>
</div>
<div class="col-4">
<q-select
ref="posNameRef"
dense
:readonly="formData.posType"
outlined
v-model="formData.posName"
label="ตำแหน่ง"
:rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
:options="posNameOp"
option-label="name"
option-value="name"
emit-value
lazy-rules
use-input
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
hide-bottom-space
@update:model-value="getPosLevel()"
>
<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-4">
<q-select
:readonly="formData.posName"
ref="posLevelRef"
dense
outlined
v-model="formData.posLevel"
:options="posLevelOp"
option-label="name"
option-value="id"
map-options
label="ระดับชั้นงาน"
:rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-8">
<q-input
dense
outlined
v-model="formData.reson"
label="หมายเหตุ"
/>
</div>
<div class="col-8">
<q-input
dense
outlined
v-model="formData.reson"
label="หมายเหตุ"
/>
</div>
<div class="col-12 text-bold">ตราคาจาง</div>
<div class="col-4">
<q-input
ref="rateOldMinRef"
dense
outlined
v-model="formData.rateOldMin"
label="ขั้นต่ำสุด"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-4">
<q-select
ref="groupOldRef"
dense
outlined
multiple
v-model="formData.groupOld"
label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
]"
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-4">
<q-input
ref="rateMaxOldRef"
dense
outlined
v-model="formData.rateMaxOld"
label="ขั้นสูงสุดเดิม"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12 text-bold">ตราคาจาง</div>
<div class="col-4">
<q-input
ref="rateOldMinRef"
dense
outlined
v-model="formData.rateOldMin"
label="ขั้นต่ำสุด"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-4">
<q-select
ref="groupOldRef"
dense
outlined
multiple
v-model="formData.groupOld"
label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
]"
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-4">
<q-input
ref="rateMaxOldRef"
dense
outlined
v-model="formData.rateMaxOld"
label="ขั้นสูงสุดเดิม"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12 text-bold">
ตราคาจางสงกวาอตราคาจางขนสงของตำแหนงทไดบแตงตงในแตละระด
</div>
<div class="col-4">
<q-select
ref="groupRateHighRef"
dense
outlined
v-model="formData.groupRateHigh"
label="กลุ่มบัญชีค่าจ้าง"
:rules="[
(val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
]"
lazy-rules
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
emit-value
hide-bottom-space
/>
</div>
<div class="col-4">
<q-input
ref="rateHighMaxRef"
dense
outlined
v-model="formData.rateHighMax"
label="อัตราค่าจ้างขั้นสูงใหม่"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
]"
lazy-rules
hide-bottom-space
/>
<div class="col-12 text-bold">
ตราคาจางสงกวาอตราคาจางขนสงของตำแหนงทไดบแตงตงในแตละระด
</div>
<div class="col-4">
<q-select
ref="groupRateHighRef"
dense
outlined
v-model="formData.groupRateHigh"
label="กลุ่มบัญชีค่าจ้าง"
:rules="[
(val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
]"
lazy-rules
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
emit-value
hide-bottom-space
/>
</div>
<div class="col-4">
<q-input
ref="rateHighMaxRef"
dense
outlined
v-model="formData.rateHighMax"
label="อัตราค่าจ้างขั้นสูงใหม่"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
</div>
</div>
</div>
</q-card-section>
<q-separator />
</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-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>

View file

@ -1,6 +1,11 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
/** importType*/
import type { QTableProps } from "quasar";
import type {
ListData,
ResponseData,
@ -9,28 +14,17 @@ import type {
NewPagination,
DataOption,
} from "@/modules/13_salary/interface/index/Main";
import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
import type { PosType } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
/** importType*/
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
/** importCompopnents*/
import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const posTypeOp = ref<DataOption[]>([]);
const posType = ref<string>("");
const $q = useQuasar();
const {
date2Thai,
dialogRemove,
messageError,
showLoader,
hideLoader,
success,
} = useCounterMixin();
const { dialogRemove, messageError, showLoader, hideLoader, success } =
useCounterMixin();
/** ข้อมูล Table*/
const columns = ref<QTableProps["columns"]>([
@ -138,7 +132,6 @@ const visibleColumns = ref<string[]>([
"rateHighMax",
"reson",
]);
const rows = ref<ListData[]>([]);
const formFilter = reactive({
@ -146,23 +139,34 @@ const formFilter = reactive({
pageSize: 10,
keyword: "",
});
const maxPage = ref<number>(1);
const totalList = ref<number>(0);
function filterFn() {
formFilter.page = 1;
getData();
}
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
const modalForm = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const dataRow = ref<any>({});
const dataRow = ref<ListData>();
const posTypeOp = ref<DataOption[]>([]);
const posType = ref<string>("");
const maxPage = ref<number>(1);
const totalList = ref<number>(0);
/** ดึงข้อมูลกลุ่มงาน */
function getPosType() {
http
.get(config.API.salaryEmployeePosType())
.then((res) => {
const data = res.data.result;
posTypeOp.value = data.map((item: PosType) => ({
id: item.id,
name: item.posTypeName,
}));
})
.catch((e) => {
messageError($q, e);
});
}
/** ดึงข้อมูลรายการหลักเกณฑ์ */
function getData() {
showLoader();
http
@ -188,42 +192,61 @@ function getData() {
}));
})
.catch((e) => {
// messageError($q, e);
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function editPopup(params: any) {
/**
* เป dialog แกไขหลกเกณฑ
* @param params
*/
function editPopup(params: ListData) {
modalForm.value = true;
isStatusEdit.value = true;
dataRow.value = params;
}
/**
* function fetch อมลรายการตามหน
* @param val หน
*/
function updatePage(val: number) {
formFilter.page = val;
getData();
}
/** function อัปเดทแถวต่อหน้า*/
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
/**
* ลบรายการหลกเกณฑ
* @param id หลกเกณฑ
*/
function onClickDelete(id: string) {
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.salaryFormula() + `/${id}`)
.then(() => {
getData();
success($q, "ลบข้อมูลสำเร็จ");
getData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
/** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
watch(
() => formFilter.pageSize,
() => {
@ -231,23 +254,17 @@ watch(
}
);
/** ดึงข้อมูลกลุ่มงาน */
function getPosType() {
http
.get(config.API.salaryEmployeePosType())
.then((res) => {
const data = res.data.result;
posTypeOp.value = data.map((item: any) => ({
id: item.id,
name: item.posTypeName,
}));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
/** functionn fetch ข้อมูลรายการหน้าแรก*/
function filterFn() {
formFilter.page = 1;
getData();
}
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
onMounted(() => {
getData();
getPosType();
@ -267,14 +284,14 @@ onMounted(() => {
option-value="id"
emit-value
map-options
@update:model-value="getData"
@update:model-value="filterFn"
>
<template v-if="posType" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
posType = '';
getData();
filterFn();
"
class="cursor-pointer"
/>
@ -347,16 +364,6 @@ onMounted(() => {
1
}}
</div>
<!-- <div v-else-if="col.name === 'group'">
{{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
</div> -->
<!-- <div v-else-if="col.name === 'isActive'">
<q-icon
:name="col.value ? 'done' : 'close'"
:color="col.value ? 'primary' : 'grey'"
size="24px"
></q-icon>
</div> -->
<div
v-else-if="
col.name == 'rateOldMin' ||
@ -370,7 +377,6 @@ onMounted(() => {
<span v-for="(item, index) in col.value">
{{ item }}{{ index + 1 == col.value.length ? "" : "," }}
</span>
<!-- {{ col.value }} -->
</div>
<div v-else>{{ col.value != "" ? col.value : "-" }}</div>
</q-td>

View file

@ -41,6 +41,10 @@ const formFilter = reactive<FormFilter>({
const maxPage = ref<number>(1);
const totalList = ref<number>(0);
const modalDialogEmployeeChart = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const dataRow = ref<EmployeeSalary>();
/** ข้อมูล Table*/
const columns = ref<QTableProps["columns"]>([
{
@ -111,6 +115,7 @@ const itemMenu = ref<ItemsMenu[]>([
},
]);
/** function fetch ข้แมูลรายาการผังบัญชีค่าจ้างลูกจ้างประจำ */
function fetchListChart() {
showLoader();
http
@ -131,6 +136,11 @@ function fetchListChart() {
});
}
/**
* function เลอกเมน
* @param type ประเทภเมน
* @param data อมลผงบญชาจางลกจางประจำ
*/
function onClickAction(type: string, data: EmployeeSalary) {
switch (type) {
case "edit":
@ -145,12 +155,15 @@ function onClickAction(type: string, data: EmployeeSalary) {
case "copy":
onCoppy(data.id);
break;
default:
break;
}
}
/**
* function openDialog แกไขผงบญชาจางลกจางประจำ
* @param data อมลผงบญชาจางลกจางประจำ
*/
function onEdit(data: EmployeeSalary) {
modalDialogEmployeeChart.value = true;
isStatusEdit.value = true;
@ -160,16 +173,30 @@ function onEdit(data: EmployeeSalary) {
const modalDialogUpload = ref<boolean>(false);
const salaryChartId = ref<string>("");
const isActive = ref<boolean>(false);
/**
* function เป Dialog ปโหลดเอกสารอางอ
* @param id งบญชาจางลกจางประจำ
* @param status สะถานะการใชงาน
*/
function onUpload(id: string, status: boolean) {
modalDialogUpload.value = true;
salaryChartId.value = id;
isActive.value = status;
}
/**
* functiuon redirect page ตราคาจาง
* @param id งบญชาจางลกจางประจำ
*/
function onSalaryRate(id: string) {
router.push(`/salary-employee/rate/${id}`);
}
/**
* funtion ดลอกรายการผงบญชาจางลกจางประจำ
* @param id งบญชาจางลกจางประจำ
*/
function onCoppy(id: string) {
http
.post(config.API.salaryEmployeeChartCopy, { id: id })
@ -181,6 +208,11 @@ function onCoppy(id: string) {
messageError($q, err);
});
}
/**
* funtion ลบรายการผงบญชาจางลกจางประจำ
* @param id งบญชาจางลกจางประจำ
*/
function onClickDelete(id: string) {
dialogRemove($q, () => {
http
@ -195,29 +227,34 @@ function onClickDelete(id: string) {
});
}
const modalDialogEmployeeChart = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const dataRow = ref<EmployeeSalary>();
/** function เปิด dialog เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ*/
function onClickAdd() {
modalDialogEmployeeChart.value = true;
isStatusEdit.value = false;
}
/** functionn fetch ข้อมูลรายการหน้าแรก*/
function filterFn() {
formFilter.page = 1;
fetchListChart();
}
/**
* function fetch อมลรายการตามหน
* @param val หน
*/
function updatePage(val: number) {
formFilter.page = val;
fetchListChart();
}
/** function อัปเดทแถวต่อหน้า*/
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
/** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
watch(
() => formFilter.pageSize,
() => {

View file

@ -1,58 +1,38 @@
interface ObjectCharRef {
name: object | null;
group: object | null;
[key: string]: any;
}
interface ObjectReteRef {
posType: object | null
posName: object | null
posLevel: object | null
rateOldMin: object | null
groupOld: object | null
rateMaxOld: object | null
groupRateHigh: object | null
rateHighMax: object | null
[key: string]: any;
}
interface DataOptions {
id: string
name: string
id: string;
name: string;
}
interface DataListOptions {
id: string
posDictName: string
posTypeId: string
posTypeName: string
posLevelId: string
posLevelName: number
id: string;
posDictName: string;
posTypeId: string;
posTypeName: string;
posLevelId: string;
posLevelName: number;
}
interface ListData {
id: string
posType: string
posName: string
posLevel: string
rateOldMin: string
groupOld: Array<number>
rateMaxOld: string
groupRateHigh: string
rateHighMax: string
reson: string
id: string;
posType: string;
posName: string;
posLevel: string;
rateOldMin: string;
groupOld: Array<number>;
rateMaxOld: string;
groupRateHigh: string;
rateHighMax: string;
reson: string;
}
interface ResponseData {
id: string
posLevel: string
position: string
posType: string
details: string
salaryMin: string
salary: string
salaryMax: string
group: string
salaryEmployeeMin: Array<number>
id: string;
posLevel: string;
position: string;
posType: string;
details: string;
salaryMin: string;
salary: string;
salaryMax: string;
group: string;
salaryEmployeeMin: Array<number>;
}
export type { ObjectCharRef, ObjectReteRef, DataOptions, DataListOptions, ListData,ResponseData };
export type { DataOptions, DataListOptions, ListData, ResponseData };

View file

@ -21,4 +21,10 @@ interface FormDataRate {
salaryDay: number;
}
export type { FormDataChar, FormFilter, FormDataRate };
interface FormDataRateEpm {
salaryNo: null | number | string;
salaryMonth: null | number | string;
salaryDay: null | number | string;
}
export type { FormDataChar, FormFilter, FormDataRate, FormDataRateEpm };

View file

@ -14,4 +14,19 @@ interface EmployeeRateSalary {
salaryMonth: number;
step: number;
}
export type { EmployeeSalary, EmployeeRateSalary };
interface PosType {
id: string;
posLevels: PosLevel[];
posTypeName: string;
posTypeRank: number;
posTypeShortName: string;
}
interface PosLevel {
id: string;
posLevelAuthority: string;
posLevelName: number;
posLevelRank: number;
}
export type { EmployeeSalary, EmployeeRateSalary, PosType };