เงินเดือน => ปรับ code รายการผังบัญชีเงินเดือน
This commit is contained in:
parent
3d784decdb
commit
ff13fb1345
5 changed files with 225 additions and 356 deletions
|
|
@ -7,7 +7,6 @@ import config from "@/app.config";
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
DataOption,
|
DataOption,
|
||||||
ObjectSalaryRef,
|
|
||||||
FormData,
|
FormData,
|
||||||
} from "@/modules/13_salary/interface/index/Main";
|
} from "@/modules/13_salary/interface/index/Main";
|
||||||
import type {
|
import type {
|
||||||
|
|
@ -28,7 +27,6 @@ const {
|
||||||
hideLoader,
|
hideLoader,
|
||||||
messageError,
|
messageError,
|
||||||
success,
|
success,
|
||||||
dialogRemove,
|
|
||||||
} = useCounterMixin();
|
} = useCounterMixin();
|
||||||
|
|
||||||
const modal = defineModel<boolean>("modal", { required: true });
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
|
@ -60,24 +58,10 @@ const formData = reactive<FormData>({
|
||||||
isSpecial: false,
|
isSpecial: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
|
||||||
const nameRef = ref<Object | null>(null);
|
|
||||||
const posTypeRef = ref<Object | null>(null);
|
|
||||||
const posLevelRef = ref<Object | null>(null);
|
|
||||||
|
|
||||||
const ObjectRef: ObjectSalaryRef = {
|
|
||||||
name: nameRef,
|
|
||||||
posTypId: posTypeRef,
|
|
||||||
posLevelId: posLevelRef,
|
|
||||||
};
|
|
||||||
|
|
||||||
const posType = ref<SalaryPosType[]>([]);
|
const posType = ref<SalaryPosType[]>([]);
|
||||||
const salaryPosTypeOption = ref<DataOption[]>([]);
|
const salaryPosTypeOption = ref<DataOption[]>([]);
|
||||||
const salaryPosLevelOption = ref<DataOption[]>([]);
|
const salaryPosLevelOption = ref<DataOption[]>([]);
|
||||||
|
|
||||||
const documentFile = ref<any>(null);
|
|
||||||
const itemsDocument = ref<any>([]);
|
|
||||||
|
|
||||||
const title = computed(() => {
|
const title = computed(() => {
|
||||||
const name =
|
const name =
|
||||||
props.typeAction === "add"
|
props.typeAction === "add"
|
||||||
|
|
@ -89,8 +73,9 @@ const title = computed(() => {
|
||||||
return name;
|
return name;
|
||||||
});
|
});
|
||||||
|
|
||||||
async function fetchPosType() {
|
/** fiunction fetch ข้อมูลประเภทตำแหน่ง*/
|
||||||
await http
|
function fetchPosType() {
|
||||||
|
http
|
||||||
.get(config.API.salaryPosType)
|
.get(config.API.salaryPosType)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
posType.value = res.data.result;
|
posType.value = res.data.result;
|
||||||
|
|
@ -105,7 +90,8 @@ async function fetchPosType() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchPosLevel(id: string) {
|
/** fiunction fetch ข้อมูลระดับตำแหน่ง*/
|
||||||
|
function fetchPosLevel(id: string) {
|
||||||
const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
|
const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
|
||||||
const listOption =
|
const listOption =
|
||||||
filterLevel?.posLevels.map((e: SalaryPosLevel) => ({
|
filterLevel?.posLevels.map((e: SalaryPosLevel) => ({
|
||||||
|
|
@ -119,9 +105,13 @@ async function fetchPosLevel(id: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchSalaryDetail(id: string) {
|
/**
|
||||||
|
* function fetch ข้อมูลผังบัญชีเงินเดือน
|
||||||
|
* @param id ผังบัญชีเงินเดือน
|
||||||
|
*/
|
||||||
|
function fetchSalaryDetail(id: string) {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
http
|
||||||
.get(config.API.salaryChartByid(id))
|
.get(config.API.salaryChartByid(id))
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result;
|
||||||
|
|
@ -144,47 +134,34 @@ async function fetchSalaryDetail(id: string) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchDocumentFile(id: string) {
|
/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
|
||||||
await http
|
|
||||||
.get(config.API.salaryChartFile(id))
|
|
||||||
.then((res) => {
|
|
||||||
const list = res.data.map((e: any) => ({ name: e.fileName }));
|
|
||||||
itemsDocument.value = list;
|
|
||||||
})
|
|
||||||
.catch((err) => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => modal.value,
|
() => modal.value,
|
||||||
async () => {
|
() => {
|
||||||
if (modal.value) {
|
if (modal.value) {
|
||||||
if (salaryPosTypeOption.value.length === 0) {
|
if (salaryPosTypeOption.value.length === 0) {
|
||||||
await fetchPosType();
|
fetchPosType();
|
||||||
}
|
}
|
||||||
// if (props.typeAction === "add") {
|
|
||||||
// formData.date = new Date();
|
|
||||||
// formData.startDate = new Date();
|
|
||||||
// formData.endDate = new Date();
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (props.typeAction === "edit") {
|
if (props.typeAction === "edit") {
|
||||||
await showLoader();
|
setTimeout(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
salaryId.value = props.data.id;
|
salaryId.value = props.data.id;
|
||||||
await fetchDocumentFile(props.data.id);
|
fetchSalaryDetail(props.data.id);
|
||||||
await fetchSalaryDetail(props.data.id);
|
fetchPosLevel(props.data.posTypeId);
|
||||||
await fetchPosLevel(props.data.posTypeId);
|
}
|
||||||
}
|
}, 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
/** function ปืด Dialog*/
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = !modal.value;
|
modal.value = !modal.value;
|
||||||
clearFormData();
|
clearFormData();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** function เคลียข้อมูล form*/
|
||||||
function clearFormData() {
|
function clearFormData() {
|
||||||
formData.name = "";
|
formData.name = "";
|
||||||
formData.posTypeId = "";
|
formData.posTypeId = "";
|
||||||
|
|
@ -195,28 +172,11 @@ function clearFormData() {
|
||||||
formData.startDate = null;
|
formData.startDate = null;
|
||||||
formData.endDate = null;
|
formData.endDate = null;
|
||||||
formData.details = "";
|
formData.details = "";
|
||||||
documentFile.value = null;
|
|
||||||
itemsDocument.value = [];
|
|
||||||
isReadonly.value = false;
|
isReadonly.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onClickSubmit() {
|
/** function บัยทึกข้อมูลผังบัญชีเงินเดือน*/
|
||||||
const hasError = [];
|
function onSubmit() {
|
||||||
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)) {
|
|
||||||
createSalary();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createSalary() {
|
|
||||||
dialogConfirm($q, async () => {
|
dialogConfirm($q, async () => {
|
||||||
showLoader();
|
showLoader();
|
||||||
try {
|
try {
|
||||||
|
|
@ -244,13 +204,12 @@ function checkEndDate() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card class="col-12" style="width: 80%">
|
<q-card class="col-12" style="width: 80%">
|
||||||
<form @submit.prevent.stop="onClickSubmit">
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
<Header :tittle="title" :close="closeDialog" />
|
<Header :tittle="title" :close="closeDialog" />
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-card-section class="scroll" style="max-height: 70vh">
|
<q-card-section class="scroll" style="max-height: 70vh">
|
||||||
|
|
@ -321,18 +280,14 @@ function checkEndDate() {
|
||||||
label="เฉพาะสายงานที่กำหนด"
|
label="เฉพาะสายงานที่กำหนด"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<q-toggle
|
<q-toggle
|
||||||
:disable="isReadonly"
|
:disable="isReadonly"
|
||||||
color="primary"
|
color="primary"
|
||||||
label="สถานะการใช้งาน"
|
label="สถานะการใช้งาน"
|
||||||
v-model="formData.isActive"
|
v-model="formData.isActive"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-4">
|
<div class="col-xs-12 col-md-4">
|
||||||
<datepicker
|
<datepicker
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
|
|
@ -477,13 +432,14 @@ function checkEndDate() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<div class="text-right q-ma-sm">
|
<div class="text-right q-ma-sm">
|
||||||
<q-btn label="บันทึก" type="submit" color="secondary">
|
<q-btn label="บันทึก" type="submit" color="secondary">
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</q-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,25 +5,24 @@ import { useRoute } from "vue-router";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
|
/** importType*/
|
||||||
|
import type { FormSalaryRate } from "@/modules/13_salary/interface/index/Main";
|
||||||
|
|
||||||
|
/** importComponents*/
|
||||||
import Header from "@/components/DialogHeader.vue";
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const {
|
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
|
||||||
date2Thai,
|
useCounterMixin();
|
||||||
dialogConfirm,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
messageError,
|
|
||||||
success,
|
|
||||||
} = useCounterMixin();
|
|
||||||
|
|
||||||
const salaryId = ref<string>(route.params.id.toString());
|
|
||||||
|
|
||||||
|
/** props*/
|
||||||
const modal = defineModel<boolean>("modal", { required: true });
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
typeAction: {
|
typeAction: {
|
||||||
|
|
@ -40,7 +39,8 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const formData = reactive<any>({
|
const salaryId = ref<string>(route.params.id.toString());
|
||||||
|
const formData = reactive<FormSalaryRate>({
|
||||||
salaryId: "",
|
salaryId: "",
|
||||||
salary: null,
|
salary: null,
|
||||||
salaryHalf: null,
|
salaryHalf: null,
|
||||||
|
|
@ -52,25 +52,6 @@ const formData = reactive<any>({
|
||||||
isNext: false,
|
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 title = computed(() => {
|
||||||
const name =
|
const name =
|
||||||
props.typeAction === "add"
|
props.typeAction === "add"
|
||||||
|
|
@ -82,11 +63,13 @@ const title = computed(() => {
|
||||||
return name;
|
return name;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/** function ปืด Dialog*/
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = !modal.value;
|
modal.value = !modal.value;
|
||||||
clearFormData();
|
clearFormData();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** function เคลียข้อมูล form*/
|
||||||
function clearFormData() {
|
function clearFormData() {
|
||||||
formData.salaryId = "";
|
formData.salaryId = "";
|
||||||
formData.salary = null;
|
formData.salary = null;
|
||||||
|
|
@ -99,36 +82,20 @@ function clearFormData() {
|
||||||
formData.isNext = false;
|
formData.isNext = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onClickSubmit() {
|
/** function บันทึกข้อมูล*/
|
||||||
console.log(formData.salaryHalfSpecial);
|
function onSubmit() {
|
||||||
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, async () => {
|
dialogConfirm($q, async () => {
|
||||||
showLoader();
|
showLoader();
|
||||||
const body: any = {
|
const body: any = {
|
||||||
salary:
|
salary:
|
||||||
typeof formData.salary === "number"
|
typeof formData.salary === "number"
|
||||||
? formData.salary
|
? formData.salary
|
||||||
: Number(formData.salary.replace(/,/g, "")), //*เงินเดือนฐาน
|
: Number(formData.salary?.replace(/,/g, "")), //*เงินเดือนฐาน
|
||||||
|
|
||||||
salaryHalf:
|
salaryHalf:
|
||||||
typeof formData.salaryHalf === "number"
|
typeof formData.salaryHalf === "number"
|
||||||
? formData.salaryHalf
|
? formData.salaryHalf
|
||||||
: Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น
|
: Number(formData.salaryHalf?.replace(/,/g, "")), //0.5 ขั้น
|
||||||
|
|
||||||
salaryHalfSpecial:
|
salaryHalfSpecial:
|
||||||
formData.salaryHalfSpecial === "" || formData.salaryHalfSpecial === null
|
formData.salaryHalfSpecial === "" || formData.salaryHalfSpecial === null
|
||||||
|
|
@ -140,19 +107,19 @@ function createSalaryRate() {
|
||||||
salaryFull:
|
salaryFull:
|
||||||
typeof formData.salaryFull === "number"
|
typeof formData.salaryFull === "number"
|
||||||
? formData.salaryFull
|
? formData.salaryFull
|
||||||
: Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น
|
: Number(formData.salaryFull?.replace(/,/g, "")), //1 ขั้น
|
||||||
|
|
||||||
salaryFullSpecial:
|
salaryFullSpecial:
|
||||||
formData.salaryFullSpecial === "" || formData.salaryFullSpecial === null
|
formData.salaryFullSpecial === "" || formData.salaryFullSpecial === null
|
||||||
? null
|
? null
|
||||||
: typeof formData.salaryFullSpecial === "number"
|
: typeof formData.salaryFullSpecial === "number"
|
||||||
? formData.salaryFullSpecial
|
? formData.salaryFullSpecial
|
||||||
: Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
|
: Number(formData.salaryFullSpecial?.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
|
||||||
|
|
||||||
salaryFullHalf:
|
salaryFullHalf:
|
||||||
typeof formData.salaryFullHalf === "number"
|
typeof formData.salaryFullHalf === "number"
|
||||||
? formData.salaryFullHalf
|
? formData.salaryFullHalf
|
||||||
: Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น
|
: Number(formData.salaryFullHalf?.replace(/,/g, "")), //1.formData5 ขั้น
|
||||||
|
|
||||||
salaryFullHalfSpecial:
|
salaryFullHalfSpecial:
|
||||||
formData.salaryFullHalfSpecial === "" ||
|
formData.salaryFullHalfSpecial === "" ||
|
||||||
|
|
@ -183,6 +150,7 @@ function createSalaryRate() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
|
||||||
watch(
|
watch(
|
||||||
() => modal.value,
|
() => modal.value,
|
||||||
() => {
|
() => {
|
||||||
|
|
@ -207,120 +175,122 @@ watch(
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card style="width: 700px; max-width: 80vw">
|
<q-card style="width: 700px; max-width: 80vw">
|
||||||
<Header :tittle="title" :close="closeDialog" />
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
<q-separator />
|
<Header :tittle="title" :close="closeDialog" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section >
|
<q-card-section>
|
||||||
<div class="row q-gutter-sm q-pa-sm">
|
<div class="row q-gutter-sm q-pa-sm">
|
||||||
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
|
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryRef"
|
ref="salaryRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salary"
|
v-model="formData.salary"
|
||||||
label="เงินเดือนฐาน"
|
label="เงินเดือนฐาน"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 row items-center">
|
<div class="col-6 row items-center">
|
||||||
<q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
|
<q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryHalfRef"
|
ref="salaryHalfRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salaryHalf"
|
v-model="formData.salaryHalf"
|
||||||
label="เลื่อน 0.5 ขั้น"
|
label="เลื่อน 0.5 ขั้น"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryHalfSpecialRef"
|
ref="salaryHalfSpecialRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salaryHalfSpecial"
|
v-model="formData.salaryHalfSpecial"
|
||||||
label="เงินพิเศษ"
|
label="เงินพิเศษ"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryFullRef"
|
ref="salaryFullRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salaryFull"
|
v-model="formData.salaryFull"
|
||||||
label="เลื่อน 1 ขั้น"
|
label="เลื่อน 1 ขั้น"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryFullSpecialRef"
|
ref="salaryFullSpecialRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salaryFullSpecial"
|
v-model="formData.salaryFullSpecial"
|
||||||
label="เงินพิเศษ"
|
label="เงินพิเศษ"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryFullHalfRef"
|
ref="salaryFullHalfRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salaryFullHalf"
|
v-model="formData.salaryFullHalf"
|
||||||
label="เลื่อน 1.5 ขั้น"
|
label="เลื่อน 1.5 ขั้น"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
|
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<q-input
|
<q-input
|
||||||
ref="salaryFullHalfSpecialRef"
|
ref="salaryFullHalfSpecialRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formData.salaryFullHalfSpecial"
|
v-model="formData.salaryFullHalfSpecial"
|
||||||
label="เงินพิเศษ"
|
label="เงินพิเศษ"
|
||||||
mask="###,###,###,###"
|
mask="###,###,###,###"
|
||||||
reverse-fill-mask
|
reverse-fill-mask
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</q-card-section>
|
||||||
</q-card-section>
|
<q-separator />
|
||||||
<q-separator />
|
|
||||||
|
|
||||||
<q-card-actions align="right" class="bg-white text-teal">
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
<q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
>
|
>
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,22 +5,18 @@ import axios from "axios";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
import type { ObjectSalaryRef } from "@/modules/13_salary/interface/index/Main";
|
/** importComponents*/
|
||||||
|
|
||||||
import Header from "@/components/DialogHeader.vue";
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/**use*/
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const {
|
const { showLoader, hideLoader, messageError, success, dialogRemove } =
|
||||||
dialogConfirm,
|
useCounterMixin();
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
messageError,
|
|
||||||
success,
|
|
||||||
dialogRemove,
|
|
||||||
} = useCounterMixin();
|
|
||||||
|
|
||||||
|
/**props*/
|
||||||
const modal = defineModel<boolean>("modal", { required: true });
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
typeAction: {
|
typeAction: {
|
||||||
|
|
@ -54,59 +50,36 @@ const formData = reactive({
|
||||||
isSpecial: false,
|
isSpecial: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
|
||||||
const salaryTypeRef = ref<Object | null>(null);
|
|
||||||
const posTypeRef = ref<Object | null>(null);
|
|
||||||
const posLevelRef = ref<Object | null>(null);
|
|
||||||
const dateRef = ref<Object | null>(null);
|
|
||||||
const startDateRef = ref<Object | null>(null);
|
|
||||||
const endDateRef = ref<Object | null>(null);
|
|
||||||
|
|
||||||
const ObjectRef: ObjectSalaryRef = {
|
|
||||||
salaryType: salaryTypeRef,
|
|
||||||
posTypId: posTypeRef,
|
|
||||||
posLevelId: posLevelRef,
|
|
||||||
date: dateRef,
|
|
||||||
startDate: startDateRef,
|
|
||||||
endDate: endDateRef,
|
|
||||||
};
|
|
||||||
|
|
||||||
const documentFile = ref<any>(null);
|
const documentFile = ref<any>(null);
|
||||||
const itemsDocument = ref<any>([]);
|
const itemsDocument = ref<any>([]);
|
||||||
|
|
||||||
async function fetchDocumentFile(id: string) {
|
/**
|
||||||
await http
|
* function fetch ข้อมูลรายการ ไฟล์
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
function fetchDocumentFile(id: string) {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
.get(config.API.salaryChartFile(id))
|
.get(config.API.salaryChartFile(id))
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const list = res.data.map((e: any) => ({ name: e.fileName }));
|
const list = res.data.map((e: any) => ({ name: e.fileName }));
|
||||||
itemsDocument.value = list;
|
itemsDocument.value = list;
|
||||||
})
|
})
|
||||||
.catch((err) => {})
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
/** function ปืด Dialog*/
|
||||||
() => modal.value,
|
|
||||||
async () => {
|
|
||||||
if (modal.value) {
|
|
||||||
if (props.typeAction === "edit") {
|
|
||||||
await showLoader();
|
|
||||||
if (props.id) {
|
|
||||||
salaryId.value = props.id;
|
|
||||||
await fetchDocumentFile(props.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = !modal.value;
|
modal.value = !modal.value;
|
||||||
clearFormData();
|
clearFormData();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** function เคลียข้อมูล form*/
|
||||||
function clearFormData() {
|
function clearFormData() {
|
||||||
formData.salaryType = "";
|
formData.salaryType = "";
|
||||||
formData.posTypeId = "";
|
formData.posTypeId = "";
|
||||||
|
|
@ -121,42 +94,7 @@ function clearFormData() {
|
||||||
itemsDocument.value = [];
|
itemsDocument.value = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
function onClickSubmit() {
|
/** function เรียก path อัปโหลดไฟล์*/
|
||||||
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)) {
|
|
||||||
createSalary();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createSalary() {
|
|
||||||
dialogConfirm($q, async () => {
|
|
||||||
showLoader();
|
|
||||||
try {
|
|
||||||
const url =
|
|
||||||
props.typeAction === "add"
|
|
||||||
? config.API.salaryChart
|
|
||||||
: config.API.salaryChartByid(salaryId.value);
|
|
||||||
await http[props.typeAction === "add" ? "post" : "put"](url, formData);
|
|
||||||
success($q, "บันทีกข้อมูลสำเร็จ");
|
|
||||||
props.fetchData?.();
|
|
||||||
} catch (err) {
|
|
||||||
messageError($q, err);
|
|
||||||
} finally {
|
|
||||||
hideLoader();
|
|
||||||
closeDialog();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function uploadDocumentFile() {
|
async function uploadDocumentFile() {
|
||||||
const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
|
const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
|
||||||
showLoader();
|
showLoader();
|
||||||
|
|
@ -208,6 +146,10 @@ function fileUpLoad(url: string) {
|
||||||
.finally(() => {});
|
.finally(() => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function ลบข้อมูลรายการไฟล์
|
||||||
|
* @param fileName ชื่่อไฟล์
|
||||||
|
*/
|
||||||
function onClickDeleteFile(fileName: string) {
|
function onClickDeleteFile(fileName: string) {
|
||||||
dialogRemove($q, async () => {
|
dialogRemove($q, async () => {
|
||||||
showLoader();
|
showLoader();
|
||||||
|
|
@ -230,9 +172,13 @@ function onClickDeleteFile(fileName: string) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onClickDonwload(fileName: string) {
|
/**
|
||||||
|
* function โหลดข้อมูลไฟล์
|
||||||
|
* @param fileName ชื่่อไฟล์
|
||||||
|
*/
|
||||||
|
function onClickDonwload(fileName: string) {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
http
|
||||||
.get(config.API.salaryChartDelFile(salaryId.value, fileName))
|
.get(config.API.salaryChartDelFile(salaryId.value, fileName))
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
|
|
@ -250,8 +196,8 @@ async function onClickDonwload(fileName: string) {
|
||||||
* @param type ประเภทไฟล์
|
* @param type ประเภทไฟล์
|
||||||
* @param fileName ชือไฟล์
|
* @param fileName ชือไฟล์
|
||||||
*/
|
*/
|
||||||
async function downloadFile(url: string, type: string, fileName: string) {
|
function downloadFile(url: string, type: string, fileName: string) {
|
||||||
await axios
|
axios
|
||||||
.get(url, {
|
.get(url, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
responseType: "blob",
|
responseType: "blob",
|
||||||
|
|
@ -260,7 +206,7 @@ async function downloadFile(url: string, type: string, fileName: string) {
|
||||||
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
|
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then(async (res) => {
|
.then((res) => {
|
||||||
const a = document.createElement("a");
|
const a = document.createElement("a");
|
||||||
a.href = window.URL.createObjectURL(res.data);
|
a.href = window.URL.createObjectURL(res.data);
|
||||||
a.download = fileName;
|
a.download = fileName;
|
||||||
|
|
@ -273,6 +219,21 @@ async function downloadFile(url: string, type: string, fileName: string) {
|
||||||
hideLoader();
|
hideLoader();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
() => {
|
||||||
|
if (modal.value) {
|
||||||
|
if (props.typeAction === "edit") {
|
||||||
|
if (props.id) {
|
||||||
|
salaryId.value = props.id;
|
||||||
|
fetchDocumentFile(props.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import config from "@/app.config";
|
||||||
/** importType*/
|
/** importType*/
|
||||||
import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
|
import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
|
||||||
|
|
||||||
/** importComponentes*/
|
/** importComponents*/
|
||||||
import Header from "@/components/DialogHeader.vue";
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
/** importStore*/
|
/** importStore*/
|
||||||
|
|
|
||||||
|
|
@ -22,29 +22,6 @@ interface ItemsMenu {
|
||||||
color: string;
|
color: string;
|
||||||
type: string;
|
type: string;
|
||||||
}
|
}
|
||||||
interface ObjectSalaryRef {
|
|
||||||
salaryType: object | null;
|
|
||||||
// name: object | null;
|
|
||||||
posTypId: object | null;
|
|
||||||
posLevelId: object | null;
|
|
||||||
date: object | null;
|
|
||||||
startDate: object | null;
|
|
||||||
endDate: object | null;
|
|
||||||
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ObjectSalaryRateRef {
|
|
||||||
salary: object | null;
|
|
||||||
salaryHalf: object | null;
|
|
||||||
salaryHalfSpecial: object | null;
|
|
||||||
salaryFull: object | null;
|
|
||||||
salaryFullSpecial: object | null;
|
|
||||||
salaryFullHalf: object | null;
|
|
||||||
salaryFullHalfSpecial: object | null;
|
|
||||||
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FormData {
|
interface FormData {
|
||||||
name: string;
|
name: string;
|
||||||
|
|
@ -57,12 +34,17 @@ interface FormData {
|
||||||
details: string;
|
details: string;
|
||||||
isSpecial: boolean;
|
isSpecial: boolean;
|
||||||
}
|
}
|
||||||
export type {
|
|
||||||
DataOption,
|
interface FormSalaryRate {
|
||||||
NewPagination,
|
salaryId: string;
|
||||||
ItemsMenu,
|
salary: null | number | string;
|
||||||
ObjectSalaryRef,
|
salaryHalf: null | number | string;
|
||||||
ObjectSalaryRateRef,
|
salaryHalfSpecial: null | number | string;
|
||||||
DataOptionShort,
|
salaryFull: null | number | string;
|
||||||
FormData,
|
salaryFullSpecial: null | number | string;
|
||||||
};
|
salaryFullHalf: null | number | string;
|
||||||
|
salaryFullHalfSpecial: null | number | string;
|
||||||
|
isNext: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { DataOption, NewPagination, ItemsMenu, DataOptionShort, FormData ,FormSalaryRate};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue