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