เพิ่มข้อมูลหลักตำแหน่งลูกจ้างประจำ, เพิ่ม page เลื่อนเงินเดือนลูกจ้างประจำ

This commit is contained in:
Warunee Tamkoo 2024-03-11 17:42:27 +07:00
parent 799cd7ce08
commit f16d7e100e
18 changed files with 2265 additions and 44 deletions

View file

@ -1,7 +1,11 @@
const salaryChart = () => import("@/modules/13_salary/views/salaryChart.vue");
const salaryEmployeeChart = () =>
import("@/modules/13_salary/views/salaryEmployeeChart.vue");
const salaryRate = () => import("@/modules/13_salary/views/salaryRate.vue");
const salaryRound = () => import("@/modules/13_salary/views/salaryRound.vue");
const salaryLists = () => import("@/modules/13_salary/views/salaryLists.vue");
const salaryEmployeeLists = () =>
import("@/modules/13_salary/views/salaryEmployeeLists.vue");
export default [
{
@ -14,6 +18,16 @@ export default [
Role: "salary",
},
},
{
path: "/salary-employee",
name: "salaryEmployeeChart",
component: salaryEmployeeChart,
meta: {
Auth: true,
Key: [1.1],
Role: "salary",
},
},
{
path: "/salary/rate/:id",
name: "salaryRate",
@ -44,4 +58,14 @@ export default [
Role: "salary",
},
},
{
path: "/salary-employee/lists",
name: "salaryEmployeeLists",
component: salaryEmployeeLists,
meta: {
Auth: true,
Key: [1.4],
Role: "salary",
},
},
];

View file

@ -0,0 +1,3 @@
<template>
<div>งบญชกจางประจำ</div>
</template>

View file

@ -0,0 +1,412 @@
<script setup lang="ts">
import { onMounted, ref, computed, nextTick } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
/** importType*/
import type {
DataOption,
DataOptionShort,
} from "@/modules/13_salary/interface/index/Main";
import type {
DataRound,
DataAgency,
DataPeriodLatest,
} from "@/modules/13_salary/interface/response/SalaryList";
/** importComponents*/
import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
/** importStore*/
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const store = useSalaryListSDataStore();
const $q = useQuasar();
const { messageError, showLoader, hideLoader } = useCounterMixin();
/** ตัวแปร*/
const roundFilter = ref<any>();
const roundOptions = ref<DataOptionShort[]>([]);
const agencyFilter = ref<string>("");
const agencyOptions = ref<DataOption[]>();
const snapFilter = ref<string>("");
const snapOptions = ref<DataOption[]>();
const periodLatest = ref<DataPeriodLatest>();
const isLoad = ref<boolean>(false);
/** ตัวแปร select*/
const page = ref<number>(1);
const pageSize = ref<number>(50);
const lastPage = ref<number>(0);
const loading = ref(false);
const nextPage = ref<number>(1);
/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
function getRound() {
showLoader();
http
.get(
config.API.salaryPeriod() +
`?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
)
.then(async (res) => {
const data = res.data.result.data;
lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
const optionMain = await data.map((x: DataRound) => ({
id: x.id,
revisionId: x.revisionId,
shortCode: x.period,
isClose: x.isClose,
name:
(x.period === "OCT"
? "รอบตุลาคม "
: x.period === "SPECIAL"
? "รอบพิเศษ "
: "รอบเมษายน ") +
(Number(x.year) + 543),
}));
roundOptions.value.push(...optionMain);
roundFilter.value = await (roundOptions.value
? roundOptions.value[0]
: "");
store.roundMainCode = roundFilter.value.shortCode;
store.isClosedRound = roundFilter.value.isClose;
await getSnap(roundFilter.value.shortCode);
await getAgency(roundFilter.value.revisionId);
await getAgencyPosition(roundFilter.value.revisionId);
// if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
// await fetchSalalyPeriod(
// agencyFilter.value,
// roundFilter.value.id,
// snapFilter.value
// );
// }
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** function เรียกรอบ*/
function getSnap(code: string) {
snapOptions.value =
code == "OCT"
? [
{
id: "SNAP1",
name: "1 กันยายน",
},
{
id: "SNAP2",
name: "1 ตุลาคม",
},
]
: code === "APR"
? [
{
id: "SNAP1",
name: "1 มีนาคม",
},
{
id: "SNAP2",
name: "1 เมษายน",
},
]
: [
{
id: "SNAP1",
name: "พิเศษ 1",
},
{
id: "SNAP2",
name: "พิเศษ 2",
},
];
snapFilter.value = snapOptions.value[0].id;
}
/**
* function เรยกขอมลหนยวงาน
* @param id revisionId
*/
async function getAgency(id: string) {
id &&
(await http
.get(config.API.activeOrganizationRootById(id))
.then(async (res) => {
const data = res.data.result;
agencyOptions.value = await [
{
id: "ALL",
name: "ทั้งหมด",
},
].concat(
data.map((x: DataAgency) => ({
id: x.id,
name: x.orgRootName,
}))
);
// agencyFilter.value = store.rootId;
})
.catch((err) => {
messageError($q, err);
}));
}
/**
* function เรยกขอมลหนยวงานปจ
* @param id revisionId
*/
async function getAgencyPosition(id: string) {
if (id) {
await http
.get(config.API.keycloakPositionByid(id))
.then(async (res) => {
const data = await res.data.result;
store.rootId = data.rootId;
const position = agencyOptions.value?.find(
(e: DataOption) => e.id === data.rootId
);
agencyFilter.value = position ? position.id : "";
if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
fetchSalalyPeriod(
agencyFilter.value,
roundFilter.value.id,
snapFilter.value
);
}
})
.catch((err) => {
messageError($q, err);
});
} else agencyFilter.value = "";
}
/**
*
* @param rootId id หนวยงาน
* @param periodId id รอบการขนเงนเดอน
* @param snap id รอบ
*/
function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
showLoader();
isLoad.value = false;
const body = {
rootId: rootId,
salaryPeriodId: periodId,
snapshot: snap,
};
http
.post(config.API.salaryListPeriodLatest, body)
.then(async (res) => {
const data = res.data.result;
if (Object.values(data).includes(null)) {
isLoad.value = false;
} else {
data && store.fetchPeriodLatest(data, store.tabGroup);
periodLatest.value = data;
isLoad.value = true;
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 800);
});
}
/** function เปลี่ยนรอบการขั้นเงินเดือน*/
async function onChangeRound() {
// isClosedRound
store.isClosedRound = roundFilter.value.isClose;
await getSnap(roundFilter.value.shortCode);
await getAgency(roundFilter.value.revisionId);
await getAgencyPosition(roundFilter.value.revisionId);
if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
// await fetchSalalyPeriod(
// agencyFilter.value,
// roundFilter.value.id,
// snapFilter.value
// );
store.tabType = "PENDING";
store.roundMainCode = roundFilter.value.shortCode;
} else {
isLoad.value = false;
}
}
/** function เปลี่ยนรอบ*/
async function onChangeSnap() {
if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
await fetchSalalyPeriod(
agencyFilter.value,
roundFilter.value.id,
snapFilter.value
);
}
}
/** function เปลี่ยนหน่วยงาน*/
async function onChangeAgency() {
store.rootId = agencyFilter.value;
if (
agencyFilter.value !== "ALL" &&
roundFilter.value.id &&
snapFilter.value
) {
await fetchSalalyPeriod(
agencyFilter.value,
roundFilter.value.id,
snapFilter.value
);
}
}
/** function onScrollSelect รอบการขึ้นเงินเดือน*/
function onScroll({ to, ref }: { to: number; ref: any }) {
const lastIndex = roundOptions.value.length - 1;
if (
loading.value !== true &&
nextPage.value < lastPage.value &&
to === lastIndex
) {
loading.value = true;
setTimeout(() => {
nextPage.value++;
page.value = nextPage.value;
getRound();
nextTick(() => {
ref.refresh();
loading.value = false;
});
}, 500);
}
}
onMounted(async () => {
await getRound();
});
</script>
<template>
<div class="row items-center">
<div class="toptitle text-dark row items-center q-py-xs">
รายการเลอนเงนเดอนลกจางประจำ
</div>
<q-space />
<q-select
v-model="roundFilter"
label="รอบการขึ้นเงินเดือน"
dense
outlined
map-options
option-label="name"
option-value="id"
:options="roundOptions"
lazy-rules
hide-bottom-space
bg-color="white"
@update:model-value="onChangeRound"
:loading="loading"
@virtual-scroll="onScroll"
>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section>
<q-item-label>{{ scope.opt.name }}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
class="q-ml-xs"
v-model="snapFilter"
label="รอบ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="snapOptions"
lazy-rules
hide-bottom-space
bg-color="white"
@update:model-value="onChangeSnap"
/>
<q-select
class="q-ml-xs"
v-model="agencyFilter"
label="หน่วยงาน"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="agencyOptions"
lazy-rules
hide-bottom-space
bg-color="white"
@update:model-value="onChangeAgency"
/>
</div>
<q-card flat bordered>
<div v-if="agencyFilter !== 'ALL'">
<TabGroup v-if="isLoad" :periodLatest="periodLatest" />
<q-card v-else class="q-pa-sm">
<div class="q-pa-sm">
<q-banner inline-actions rounded class="bg-grey-1 text-center">
ไมอม
</q-banner>
</div>
</q-card>
</div>
<div v-else>
<PageDashBoard />
</div>
</q-card>
<q-card
v-if="isLoad && !store.isClosedRound"
flat
bordered
class="row col-12 q-mt-xs"
>
<ProcessStep />
</q-card>
<!-- </q-card> -->
</template>
<style lang="sass" scoped>
.my-card
width: 100%
max-width: 200px
</style>

View file

@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
import PageDashBoard from '@/modules/13_salary/components/SalaryLists/Dashboard.vue'
import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
/** importType*/
import type {
DataOption,
@ -271,7 +271,11 @@ async function onChangeSnap() {
async function onChangeAgency() {
store.rootId = agencyFilter.value;
if (agencyFilter.value !== 'ALL' && roundFilter.value.id && snapFilter.value) {
if (
agencyFilter.value !== "ALL" &&
roundFilter.value.id &&
snapFilter.value
) {
await fetchSalalyPeriod(
agencyFilter.value,
roundFilter.value.id,
@ -311,7 +315,7 @@ onMounted(async () => {
<template>
<div class="row items-center">
<div class="toptitle text-dark row items-center q-py-xs">
รายการเลอนเงนเดอนขาราชการ
รายการเลอนเงนเดอนขาราชการ
</div>
<q-space />
@ -394,20 +398,18 @@ onMounted(async () => {
<q-separator /> -->
<q-card flat bordered>
<div v-if="agencyFilter !== 'ALL'">
<TabGroup v-if="isLoad" :periodLatest="periodLatest" />
<q-card v-else class="q-pa-sm">
<div class="q-pa-sm">
<q-banner inline-actions rounded class="bg-grey-1 text-center">
ไมอม
</q-banner>
</div>
</q-card>
</div>
<div v-else>
<PageDashBoard/>
</div>
<TabGroup v-if="isLoad" :periodLatest="periodLatest" />
<q-card v-else class="q-pa-sm">
<div class="q-pa-sm">
<q-banner inline-actions rounded class="bg-grey-1 text-center">
ไมอม
</q-banner>
</div>
</q-card>
</div>
<div v-else>
<PageDashBoard />
</div>
</q-card>
<q-card