ปรับ tab ผู้เกษียณในเลื่อนเงินเดือน

This commit is contained in:
Warunee Tamkoo 2024-03-26 15:32:13 +07:00
parent 99d834050f
commit 95935c2cba
2 changed files with 62 additions and 38 deletions

View file

@ -60,11 +60,11 @@ const itemsTabType = computed(() => {
name: "tab1",
type: "PENDING",
},
{
lable: "รายชื่อผู้เกษียณอายุราชการ",
name: "tab5",
type: "RETIRE",
},
// {
// lable: "",
// name: "tab5",
// type: "RETIRE",
// },
{
lable: "1 ขั้น",
name: "tab2",
@ -251,12 +251,12 @@ function fetchDataQuota(id: string) {
*/
function fetchDataPeriod(id: string) {
rows.value = [];
const formData = {
let formData = {
page: formFilter.page.toString(),
pageSize: formFilter.pageSize.toString(),
keyword: formFilter.keyword,
type: store.tabType === "RETIRE" ? "" : store.tabType,
isRetire: store.tabType === "RETIRE" ? "1" : null,
type: store.tabType,
isRetire: isRetire.value === true ? "1" : "0",
};
http
@ -354,6 +354,12 @@ onMounted(() => {
fetchDataPeriod(store.groupId);
splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
});
const isRetire = ref<boolean | string>(false);
const updateIsShowRetire = async () => {
isRetire.value = await !isRetire.value;
fetchDataPeriodNew();
};
</script>
<template>
@ -455,7 +461,19 @@ onMounted(() => {
<!-- Tab -->
<q-card flat bordered>
<q-splitter v-model="splitterModel" disable>
<div class="row col-12 q-pa-sm">
<q-toggle
dense
:model-value="isRetire"
color="primary"
@update:model-value="updateIsShowRetire"
class="q-pr-md"
>
เฉพาะผเกษยณอายราชการ
</q-toggle>
</div>
<q-splitter v-model="splitterModel" disable class="border-top">
<template v-slot:before>
<q-tabs
v-model="store.tabType"
@ -471,13 +489,7 @@ onMounted(() => {
v-for="(item, index) in itemsTabType"
:key="index"
class="row"
:style="
store.roundMainCode === 'OCT'
? index === 1
? 'border-bottom: 1px solid #c8d3db;'
: ''
: ''
"
:style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
>
<q-tab
class="col-12"
@ -536,8 +548,10 @@ onMounted(() => {
width: 100%;
max-width: 200px;
}
.q-tabs--vertical .q-tab {
padding: 0 20px;
}
.border-top {
border-top: 1px solid #ededed;
}
</style>

View file

@ -65,11 +65,11 @@ const itemsTabType = computed(() => {
name: "tab1",
type: "PENDING",
},
{
lable: "รายชื่อผู้เกษียณอายุราชการ",
name: "tab5",
type: "RETIRE",
},
// {
// lable: "",
// name: "tab5",
// type: "RETIRE",
// },
{
lable: "1 ขั้น",
name: "tab2",
@ -261,12 +261,12 @@ function fetchDataQuota(id: string) {
*/
function fetchDataPeriod(id: string) {
rows.value = [];
const formData = {
let formData = {
page: formFilter.page.toString(),
pageSize: formFilter.pageSize.toString(),
keyword: formFilter.keyword,
type: store.tabType === "RETIRE" ? "" : store.tabType,
isRetire: store.tabType === "RETIRE" ? "1" : null,
type: store.tabType,
isRetire: isRetire.value === true ? "1" : "0",
};
http
@ -336,10 +336,6 @@ function onClickDownload(data: DataOption) {
});
} else {
if (props.rootId && props.periodId) {
console.log("id==>", data.id);
console.log("rootId==>", props.rootId);
console.log("periodId==>", props.periodId);
http
.get(
config.API.salaryReportListsByid(
@ -368,6 +364,12 @@ onMounted(() => {
fetchDataPeriod(store.groupId);
splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
});
const isRetire = ref<boolean>(false);
const updateIsShowRetire = async () => {
isRetire.value = await !isRetire.value;
fetchDataPeriodNew();
};
</script>
<template>
@ -538,7 +540,19 @@ onMounted(() => {
<!-- Tab -->
<q-card flat bordered>
<q-splitter v-model="splitterModel" disable>
<div class="row col-12 q-pa-sm">
<q-toggle
dense
:model-value="isRetire"
color="primary"
@update:model-value="updateIsShowRetire"
class="q-pr-md"
>
เฉพาะผเกษยณอายราชการ
</q-toggle>
</div>
<q-splitter v-model="splitterModel" disable class="border-top">
<template v-slot:before>
<q-tabs
v-model="store.tabType"
@ -554,13 +568,7 @@ onMounted(() => {
v-for="(item, index) in itemsTabType"
:key="index"
class="row"
:style="
store.roundMainCode === 'OCT'
? index === 1
? 'border-bottom: 1px solid #c8d3db;'
: ''
: ''
"
:style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
>
<q-tab
class="col-12"
@ -619,11 +627,13 @@ onMounted(() => {
width: 100%;
max-width: 200px;
}
.q-tabs--vertical .q-tab {
padding: 0 20px;
}
.tootip-txt-normal {
font-size: 0.8rem;
}
.border-top {
border-top: 1px solid #ededed;
}
</style>