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

ปรับ บัญชีเงินเดือน

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-19 10:53:52 +07:00
parent 7891c16a6c
commit c32c56bc10
5 changed files with 374 additions and 362 deletions
Download patch file Download diff file Expand all files Collapse all files

639
src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
View file

@ -79,6 +79,7 @@ const salaryTypeOption = ref<DataOption[]>([
{ id: "EMPLOYEE", name: "ลูกจ้างประจำกรุงเทพมหานคร" }, { id: "EMPLOYEE", name: "ลูกจ้างประจำกรุงเทพมหานคร" },
]); ]);
const posType = ref<SalaryPosType[]>([]);
const salaryPosTypeOption = ref<DataOption[]>([]); const salaryPosTypeOption = ref<DataOption[]>([]);
const salaryPosLevelOption = ref<DataOption[]>([]); const salaryPosLevelOption = ref<DataOption[]>([]);
@ -100,6 +101,7 @@ async function fetchPosType() {
await http await http
.get(config.API.salaryPosType) .get(config.API.salaryPosType)
.then((res) => { .then((res) => {
posType.value = res.data.result;
const listOption = res.data.result.map((e: SalaryPosType) => ({ const listOption = res.data.result.map((e: SalaryPosType) => ({
id: e.id, id: e.id,
name: e.posTypeName, name: e.posTypeName,
@ -111,19 +113,18 @@ async function fetchPosType() {
}); });
} }
async function fetchPosLevel() { async function fetchPosLevel(id: string) {
await http const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
.get(config.API.salaryPosLevel) const listOption =
.then((res) => { filterLevel?.posLevels.map((e: SalaryPosLevel) => ({
const listOption = res.data.result.map((e: SalaryPosLevel) => ({ id: e.id,
id: e.id, name: e.posLevelName,
name: e.posLevelName, })) || [];
}));
salaryPosLevelOption.value = listOption; salaryPosLevelOption.value = listOption;
}) if (!listOption.some((e: DataOption) => e.id === formData.posLevelId)) {
.catch((err) => { formData.posLevelId = "";
messageError($q, err); }
});
} }
async function fetchSalaryDetail(id: string) { async function fetchSalaryDetail(id: string) {
@ -132,7 +133,6 @@ async function fetchSalaryDetail(id: string) {
.get(config.API.salaryChartByid(id)) .get(config.API.salaryChartByid(id))
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
console.log(data);
formData.salaryType = data.salaryType; formData.salaryType = data.salaryType;
formData.posTypeId = data.posTypeId; formData.posTypeId = data.posTypeId;
formData.posLevelId = data.posLevelId; formData.posLevelId = data.posLevelId;
@ -167,9 +167,6 @@ watch(
if (salaryPosTypeOption.value.length === 0) { if (salaryPosTypeOption.value.length === 0) {
await fetchPosType(); await fetchPosType();
} }
if (salaryPosLevelOption.value.length === 0) {
await fetchPosLevel();
}
if (props.typeAction === "edit") { if (props.typeAction === "edit") {
await showLoader(); await showLoader();
@ -177,6 +174,7 @@ watch(
salaryId.value = props.data.id; salaryId.value = props.data.id;
await fetchDocumentFile(props.data.id); await fetchDocumentFile(props.data.id);
await fetchSalaryDetail(props.data.id); await fetchSalaryDetail(props.data.id);
await fetchPosLevel(props.data.posTypeId);
} }
} }
} }
@ -293,7 +291,7 @@ function onClickDeleteFile(fileName: string) {
showLoader(); showLoader();
await http await http
.delete(config.API.salaryChartDelFile(salaryId.value, fileName)) .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
.then((res) => { .then(() => {
setTimeout(() => { setTimeout(() => {
fetchDocumentFile(salaryId.value); fetchDocumentFile(salaryId.value);
success($q, "ลบไฟล์สำเร็จ"); success($q, "ลบไฟล์สำเร็จ");
@ -371,319 +369,336 @@ async function downloadFile(url: string, type: string, fileName: string) {
<q-separator /> <q-separator />
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<div class="row col-12 q-gutter-sm q-pa-md"> <div class="row col-12 q-col-gutter-sm q-pa-md">
<div class="row col-sm-12 col-md-9 q-col-gutter-sm"> <div class="col-xs-12 col-md-9">
<div class="col-xs-12 col-md-3"> <div class="row col-12 q-col-gutter-sm">
<q-select <div class="col-xs-12 col-md-3">
ref="salaryTypeRef" <q-select
dense ref="salaryTypeRef"
hide-bottom-space dense
outlined hide-bottom-space
option-label="name" outlined
option-value="id" option-label="name"
emit-value option-value="id"
map-options emit-value
v-model="formData.salaryType" map-options
:options="salaryTypeOption" v-model="formData.salaryType"
label="ประเภทผังบัญชีเงินเดือน" :options="salaryTypeOption"
:rules="[(val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน']" label="ประเภทผังบัญชีเงินเดือน"
lazy-rules :rules="[
/> (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
</div> ]"
lazy-rules
/>
</div>
<div class="col-xs-12 col-md-3"> <div class="col-xs-12 col-md-3">
<q-select <q-select
ref="posTypeRef" ref="posTypeRef"
dense dense
hide-bottom-space hide-bottom-space
outlined outlined
option-label="name" option-label="name"
option-value="id" option-value="id"
emit-value emit-value
map-options map-options
v-model="formData.posTypeId" v-model="formData.posTypeId"
:options="salaryPosTypeOption" :options="salaryPosTypeOption"
label="ประเภทตำแหน่ง/กลุ่ม" label="ประเภทตำแหน่ง/กลุ่ม"
:rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']" :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
lazy-rules lazy-rules
/> @update:model-value="fetchPosLevel"
</div> />
</div>
<div class="col-xs-12 col-md-3"> <div class="col-xs-12 col-md-3">
<q-select <q-select
ref="posLevelRef" ref="posLevelRef"
dense dense
hide-bottom-space hide-bottom-space
outlined outlined
option-label="name" option-label="name"
option-value="id" option-value="id"
emit-value emit-value
map-options map-options
v-model="formData.posLevelId" v-model="formData.posLevelId"
:options="salaryPosLevelOption" :options="salaryPosLevelOption"
label="ระดับ" label="ระดับ"
:rules="[(val) => !!val || 'กรุณาเลือกระดับ']" :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
lazy-rules lazy-rules
/> :disable="formData.posTypeId === ''"
</div> />
</div>
<div
class="col-xs-12 col-md-3"
style="display: flex; justify-content: flex-end"
>
<q-toggle
color="primary"
label="สถานะการใช้งาน"
v-model="formData.isActive"
/>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateRef"
outlined
dense
hide-bottom-space
:model-value="
formData.date != null ? date2Thai(formData.date) : null
"
label="ให้ไว ณ วันที่"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.startDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="checkEndDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="startDateRef"
outlined
dense
hide-bottom-space
:model-value="
formData.startDate != null
? date2Thai(formData.startDate)
: null
"
label="วันที่มีผลบังคับใช้"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.endDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:min-date="formData.startDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="endDateRef"
outlined
dense
hide-bottom-space
:model-value="
formData.endDate != null
? date2Thai(formData.endDate)
: null
"
label="วันที่สิ้นสุดบังคับใช้"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<q-input
v-model="formData.details"
outlined
dense
type="textarea"
label="คำอธิบาย"
/>
</div>
</div>
<div <div
class="col-xs-12 col-md-3" class="col-xs-12 col-md-3 q-mt-sm"
style="display: flex; justify-content: flex-end" style="display: flex; justify-content: flex-end"
> >
<q-toggle <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
color="primary" ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
label="สถานะการใช้งาน"
v-model="formData.isActive"
/>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
> >
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateRef"
outlined
dense
hide-bottom-space
:model-value="
formData.date != null ? date2Thai(formData.date) : null
"
label="ให้ไว ณ วันที่"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.startDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="checkEndDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="startDateRef"
outlined
dense
hide-bottom-space
:model-value="
formData.startDate != null
? date2Thai(formData.startDate)
: null
"
label="วันที่มีผลบังคับใช้"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.endDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:min-date="formData.startDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="endDateRef"
outlined
dense
hide-bottom-space
:model-value="
formData.endDate != null
? date2Thai(formData.endDate)
: null
"
label="วันที่สิ้นสุดบังคับใช้"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<q-input
v-model="formData.details"
outlined
dense
type="textarea"
label="คำอธิบาย"
/>
</div> </div>
</div> </div>
<div class="col-xs-12 col-md-3">
<div class="col-sm-12 col-md-3"> <div class="row col-12 q-col-gutter-sm">
<q-card <div class="col-xs-12 col-md-12">
bordered <q-card bordered style="border: 1px solid #d6dee1">
class="row col-12" <div
style="border: 1px solid #d6dee1" class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
อัปโหลดเอกสารอ้างอิง
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 row">
<q-file
v-if="props.typeAction === 'edit'"
class="col-12"
outlined
dense
v-model="documentFile"
label="เอกสารอ้างอิง"
hide-bottom-space
> >
<template v-slot:prepend> อัปโหลดเอกสารอ้างอิง
<q-icon name="attach_file" color="primary" /> </div>
</template> <div class="col-12"><q-separator /></div>
<template v-slot:after> <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<q-btn <div class="col-12 row">
v-if="documentFile" <q-file
size="14px" v-if="props.typeAction === 'edit'"
flat class="col-12"
round outlined
dense dense
color="add" v-model="documentFile"
icon="mdi-upload" label="เอกสารอ้างอิง"
@click="uploadDocumentFile" hide-bottom-space
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
> >
</template> <template v-slot:prepend>
</q-file> <q-icon name="attach_file" color="primary" />
</div> </template>
<template v-slot:after>
<q-btn
v-if="documentFile"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadDocumentFile"
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
>
</template>
</q-file>
</div>
<div v-if="itemsDocument.length > 0" class="col-xs-12 row"> <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator> <q-list
<q-item class="full-width rounded-borders"
v-for="file in itemsDocument" bordered
:key="file.id" separator
clickable >
v-ripple <q-item
> v-for="file in itemsDocument"
<q-item-section>{{ file.name }}</q-item-section> :key="file.id"
<q-item-section avatar> clickable
<div class="row"> v-ripple
<div> >
<q-btn <q-item-section>{{ file.name }}</q-item-section>
dense <q-item-section avatar>
flat <div class="row">
round <div>
size="12px" <q-btn
color="blue" dense
icon="mdi-download-outline" flat
@click="onClickDonwload(file.name)" round
> size="12px"
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> color="blue"
</q-btn> icon="mdi-download-outline"
</div> @click="onClickDonwload(file.name)"
<div> >
<q-btn <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
dense </q-btn>
flat </div>
round <div>
size="12px" <q-btn
color="red" dense
icon="mdi-delete-outline" flat
@click="onClickDeleteFile(file.name)" round
><q-tooltip>ลบไฟล์</q-tooltip></q-btn size="12px"
> color="red"
</div> icon="mdi-delete-outline"
</div> @click="onClickDeleteFile(file.name)"
</q-item-section> ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
</q-item> >
</q-list> </div>
</div> </div>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col-12" v-else> <div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card> <q-card class="q-pa-md" bordered>
</div> ไม่มีรายการเอกสาร
</q-card>
</div>
</div>
</q-card>
</div> </div>
</q-card> </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-btn label="บันทึก" color="secondary" @click="onClickSubmit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>

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

@ -23,7 +23,6 @@ const {
} = useCounterMixin(); } = useCounterMixin();
const salaryId = ref<string>(route.params.id.toString()); const salaryId = ref<string>(route.params.id.toString());
const salaryRateId = ref<string>("");
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({ const props = defineProps({
@ -85,9 +84,23 @@ const title = computed(() => {
function closeDialog() { function closeDialog() {
modal.value = !modal.value; modal.value = !modal.value;
clearFormData();
}
function clearFormData() {
formData.salaryId = "";
formData.salary = null;
formData.salaryHalf = null;
formData.salaryHalfSpecial = null;
formData.salaryFull = null;
formData.salaryFullSpecial = null;
formData.salaryFullHalf = null;
formData.salaryFullHalfSpecial = null;
formData.isNext = false;
} }
function onClickSubmit() { function onClickSubmit() {
console.log(formData.salaryHalfSpecial);
const hasError = []; const hasError = [];
for (const key in ObjectRef) { for (const key in ObjectRef) {
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) { if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
@ -118,7 +131,9 @@ function createSalaryRate() {
: Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น : Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น
salaryHalfSpecial: salaryHalfSpecial:
typeof formData.salaryHalfSpecial === "number" formData.salaryHalfSpecial === "" || formData.salaryHalfSpecial === null
? null
: typeof formData.salaryHalfSpecial === "number"
? formData.salaryHalfSpecial ? formData.salaryHalfSpecial
: Number(formData.salaryHalfSpecial.replace(/,/g, "")), //0.5 ขั้น(เงินพิเศษ) : Number(formData.salaryHalfSpecial.replace(/,/g, "")), //0.5 ขั้น(เงินพิเศษ)
@ -128,7 +143,9 @@ function createSalaryRate() {
: Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น : Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น
salaryFullSpecial: salaryFullSpecial:
typeof formData.salaryFullSpecial === "number" formData.salaryFullSpecial === "" || formData.salaryFullSpecial === null
? null
: typeof formData.salaryFullSpecial === "number"
? formData.salaryFullSpecial ? formData.salaryFullSpecial
: Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ) : Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
@ -138,7 +155,10 @@ function createSalaryRate() {
: Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น : Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น
salaryFullHalfSpecial: salaryFullHalfSpecial:
typeof formData.salaryFullHalfSpecial === "number" formData.salaryFullHalfSpecial === "" ||
formData.salaryFullHalfSpecial === null
? null
: typeof formData.salaryFullHalfSpecial === "number"
? formData.salaryFullHalfSpecial ? formData.salaryFullHalfSpecial
: Number(formData.salaryFullHalfSpecial.replace(/,/g, "")), //1.5 ขั้น(เงินพิเศษ) : Number(formData.salaryFullHalfSpecial.replace(/,/g, "")), //1.5 ขั้น(เงินพิเศษ)
isNext: formData.isNext, //*ทะลุขั้น isNext: formData.isNext, //*ทะลุขั้น
@ -233,7 +253,6 @@ watch(
label="เงินพิเศษ" label="เงินพิเศษ"
mask="###,###,###,###" mask="###,###,###,###"
reverse-fill-mask reverse-fill-mask
:rules="[(val) => !!val || `${'เงินพิเศษ'}`]"
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
/> />
@ -261,7 +280,6 @@ watch(
label="เงินพิเศษ" label="เงินพิเศษ"
mask="###,###,###,###" mask="###,###,###,###"
reverse-fill-mask reverse-fill-mask
:rules="[(val) => !!val || `${'เงินพิเศษ'}`]"
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
/> />
@ -289,7 +307,6 @@ watch(
label="เงินพิเศษ" label="เงินพิเศษ"
mask="###,###,###,###" mask="###,###,###,###"
reverse-fill-mask reverse-fill-mask
:rules="[(val) => !!val || `${'เงินพิเศษ'}`]"
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
/> />

1
src/modules/13_salary/interface/response/Main.ts
View file

@ -30,6 +30,7 @@ interface SalaryPosType {
id: string; id: string;
posTypeName: string; posTypeName: string;
posTypeRank: string; posTypeRank: string;
posLevels: SalaryPosLevel[];
} }
interface SalaryPosLevel { interface SalaryPosLevel {

7
src/modules/13_salary/views/salaryChart.vue
View file

@ -41,7 +41,7 @@ const columns = ref<QTableProps["columns"]>([
name: "salaryType", name: "salaryType",
align: "left", align: "left",
label: "ประเภทผัง", label: "ประเภทผัง",
sortable: false, sortable: true,
field: "salaryType", field: "salaryType",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
@ -49,7 +49,7 @@ const columns = ref<QTableProps["columns"]>([
{ {
name: "posType", name: "posType",
align: "left", align: "left",
label: "เลขที่ตำแหน่ง", label: "ประเภทตำแหน่ง",
sortable: true, sortable: true,
field: "posType", field: "posType",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
@ -60,6 +60,7 @@ const columns = ref<QTableProps["columns"]>([
align: "left", align: "left",
label: "ระดับ", label: "ระดับ",
field: "posLevel", field: "posLevel",
sortable: true,
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
@ -121,7 +122,7 @@ const itemMenu = ref<ItemsMenu[]>([
/** queryString*/ /** queryString*/
const formQuery = reactive<FormQuerySalary>({ const formQuery = reactive<FormQuerySalary>({
page: 1, //*หน้า page: 1, //*หน้า
pageSize: 2, //*จำนวนแถวต่อหน้า pageSize: 10, //*จำนวนแถวต่อหน้า
keyword: "", //keyword ค้นหา keyword: "", //keyword ค้นหา
}); });
const maxPage = ref<number>(1); const maxPage = ref<number>(1);

58
src/modules/13_salary/views/salaryRate.vue
View file

@ -85,6 +85,15 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{
name: "isNext",
align: "left",
label: "ทะลุขั้น",
sortable: true,
field: "isNext",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]); ]);
/** List Mune*/ /** List Mune*/
@ -123,52 +132,14 @@ async function fetchListSalalyRate() {
`?page=${page}&pageSize=${pageSize}&keyword=${keyword}` `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
) )
.then((res) => { .then((res) => {
console.log(res);
rows.value = res.data.result.data; rows.value = res.data.result.data;
}) })
.catch((err) => { .catch((err) => {
// messageError($q, err); messageError($q, err);
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader();
}); });
// const data = [
// {
// id: "0bc687ad-4273-4aa1-8d8a-65f45e743644",
// salary: 100,
// salaryHalf: 100,
// salaryHalfSpecial: 100,
// salaryFull: 100,
// salaryFullSpecial: 100,
// salaryFullHalf: 100,
// salaryFullHalfSpecial: 100,
// isNext: false,
// },
// {
// id: "0bc687ad-4273-4aa1-8d8a-65f45e743666",
// salary: 200,
// salaryHalf: 200,
// salaryHalfSpecial: 200,
// salaryFull: 200,
// salaryFullSpecial: 200,
// salaryFullHalf: 200,
// salaryFullHalfSpecial: 200,
// isNext: false,
// },
// {
// id: "0bc687ad-4273-4aa1-8d8a-65f45e743677",
// salary: 300,
// salaryHalf: 300,
// salaryHalfSpecial: 300,
// salaryFull: 300,
// salaryFullSpecial: 300,
// salaryFullHalf: 300,
// salaryFullHalfSpecial: 300,
// isNext: false,
// },
// ];
// rows.value = data;
} }
/** /**
@ -229,7 +200,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
class="q-mr-sm" class="q-mr-sm"
@click="router.go(-1)" @click="router.go(-1)"
/> />
รายการผังบัญชีเงินเดือน อัตราเงินเดือน
</div> </div>
</div> </div>
<q-card flat bordered class="q-pa-md"> <q-card flat bordered class="q-pa-md">
@ -313,6 +284,13 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
: col.value.toLocaleString() : col.value.toLocaleString()
}} }}
</div> </div>
<div v-else-if="col.name === 'isNext'">
<q-icon
:name="col.value ? 'done' : 'close'"
:color="col.value ? 'primary' : 'grey'"
size="24px"
/>
</div>
<div v-else> <div v-else>
{{ col.value ? col.value.toLocaleString() : "-" }} {{ col.value ? col.value.toLocaleString() : "-" }}