fix(salary):sort
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8e2aeef119
commit
e2c3c85a77
14 changed files with 440 additions and 826 deletions
|
|
@ -6,12 +6,12 @@ import { useRouter } from "vue-router";
|
|||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType */
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { Salary } from "@/modules/13_salary/interface/response/Main";
|
||||
import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main";
|
||||
|
||||
|
|
@ -30,6 +30,10 @@ const {
|
|||
hideLoader,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchListSalaly
|
||||
);
|
||||
|
||||
/** modalDialog */
|
||||
const modalDialogFormMain = ref<boolean>(false); //popup เพิ่ม,แก้ไข ผังบัญชีเงินเดือน
|
||||
|
|
@ -38,22 +42,23 @@ const rowId = ref<string>(""); // id รายการผังบัญชี
|
|||
|
||||
/** Table*/
|
||||
const rows = ref<Salary[]>([]); //รายการผังบัญชีเงินเดือน
|
||||
const keyword = ref<string>(""); //keyword ค้นหา
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อผังบัญชีอัตราเงินเดือน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posList",
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทผังบัญชีเงินเดือน",
|
||||
sortable: false,
|
||||
field: "posList",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -61,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "startDate",
|
||||
align: "left",
|
||||
label: "วันที่มีผลบังคับใช้",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "startDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -70,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "isActive",
|
||||
align: "center",
|
||||
label: "สถานะการใช้งาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "isActive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -78,19 +83,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"posList",
|
||||
"posType",
|
||||
"startDate",
|
||||
"isActive",
|
||||
]);
|
||||
|
||||
/** queryString */
|
||||
const formQuery = reactive<FormQuerySalary>({
|
||||
page: 1, //*หน้า
|
||||
pageSize: 10, //*จำนวนแถวต่อหน้า
|
||||
keyword: "", //keyword ค้นหา
|
||||
});
|
||||
const maxPage = ref<number>(1); //จำนวนหน้า
|
||||
const total = ref<number>(); //จำนวนรายการ
|
||||
const isActive = ref<boolean>(false); //สถานะการใช้งาน
|
||||
const typeAction = ref<string>(""); //ประเภทการกระทำ
|
||||
const dataSalary = ref<Salary>(); //ข้อมูลรายการผังบัญชีเงินเดือนที่ต้องการแก้ไข
|
||||
|
|
@ -98,19 +95,17 @@ const dataSalary = ref<Salary>(); //ข้อมูลรายการผั
|
|||
/** ฟังก์ชันดึงข้อมูลรายการผังบัญชีเงินเดือน */
|
||||
async function fetchListSalaly() {
|
||||
showLoader();
|
||||
const page = formQuery.page.toString();
|
||||
const pageSize = formQuery.pageSize.toString();
|
||||
const keyword = formQuery.keyword.toString().trim();
|
||||
await http
|
||||
.get(
|
||||
config.API.salaryChart +
|
||||
`?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
|
||||
)
|
||||
.get(config.API.salaryChart, {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
rows.value = data.data;
|
||||
total.value = data.total;
|
||||
maxPage.value = Math.ceil(data.total / formQuery.pageSize);
|
||||
const result = await res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -145,7 +140,7 @@ function onClickSalaryRate(id: string) {
|
|||
* ฟังก์ชันคัดลอกข้อมูลรายการผังบัญชีเงินเดือน
|
||||
* @param id บัญชีเงินเดือน
|
||||
*/
|
||||
function onClickCoppy(id: string) {
|
||||
function onClickCopy(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.salaryChartCopy, { id: id })
|
||||
|
|
@ -171,12 +166,7 @@ function onClickDelete(id: string) {
|
|||
await http
|
||||
.delete(config.API.salaryChartByid(id))
|
||||
.then(async () => {
|
||||
formQuery.page = await updateCurrentPage(
|
||||
formQuery.page,
|
||||
maxPage.value,
|
||||
rows.value.length
|
||||
);
|
||||
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchListSalaly();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -202,28 +192,12 @@ function onClickUpload(type: string, id: string, active: boolean) {
|
|||
isActive.value = active;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชัน updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** ฟังก์ชัน ค้นหาข้อมูลตาม keyword */
|
||||
function filterFn(page: number) {
|
||||
page !== 1 ? (formQuery.page = 1) : fetchListSalaly();
|
||||
function filterFn() {
|
||||
pagination.value.page = 1;
|
||||
fetchListSalaly();
|
||||
}
|
||||
|
||||
/** callbackFunction ทำงานเมื่อมีการ เปลี่ยนแถว */
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchListSalaly();
|
||||
}
|
||||
);
|
||||
|
||||
/** hooklifecycle*/
|
||||
onMounted(() => {
|
||||
fetchListSalaly();
|
||||
|
|
@ -255,9 +229,9 @@ onMounted(() => {
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formQuery.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="filterFn(formQuery.page)"
|
||||
@keydown.enter.prevent="filterFn()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -281,7 +255,7 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<div class="col-12 q-pt-sm">
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -291,8 +265,9 @@ onMounted(() => {
|
|||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -399,7 +374,7 @@ onMounted(() => {
|
|||
v-if="checkPermission($route)?.attrIsCreate"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click.stop="onClickCoppy(props.row.id)"
|
||||
@click.stop="onClickCopy(props.row.id)"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
|
|
@ -442,7 +417,7 @@ onMounted(() => {
|
|||
size="24px"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posList'" class="row">
|
||||
<div v-else-if="col.name === 'posType'" class="row">
|
||||
<div class="column text-weight-light">
|
||||
<span>ประเภทตำแหน่ง</span>
|
||||
<span>ระดับตำแหน่ง</span>
|
||||
|
|
@ -464,7 +439,7 @@ onMounted(() => {
|
|||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'startDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "" }}
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
|
|
@ -472,21 +447,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total?.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchListSalaly()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { updateCurrentPage } from "@/utils/function";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
|
||||
import { calculateFiscalYear } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
|
|
@ -30,6 +31,10 @@ const {
|
|||
dialogConfirm,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
getData
|
||||
);
|
||||
|
||||
const idRound = ref<string>(""); //id รอบการขึ้นเงินเดือน
|
||||
|
||||
|
|
@ -44,8 +49,6 @@ const yearData = ref<number | null>(0); //ปีงบประมาณ
|
|||
/** Table*/
|
||||
const year = ref<number>(0); //ปีงบประมาณ
|
||||
const filterKeyword = ref<string>(""); //คำค้นหา
|
||||
const maxPage = ref<number>(1); //จำนวนหน้า
|
||||
const totalList = ref<number>(0); //จำนวนรายการ
|
||||
const page = ref<number>(1); //หน้า
|
||||
const rowsPerPage = ref<number>(10); //จำนวนรายการต่อหน้า
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -62,7 +65,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "period",
|
||||
align: "left",
|
||||
label: "รอบการขึ้นเงินเดือน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "period",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -71,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "year",
|
||||
align: "left",
|
||||
label: "ปีงบประมาณ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -80,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "effectiveDate",
|
||||
align: "left",
|
||||
label: "วันที่มีผลบังคับใช้",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "effectiveDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -112,11 +115,6 @@ const visibleColumns = ref<string[]>([
|
|||
"isActive",
|
||||
"isClose",
|
||||
]);
|
||||
const pagination = ref({
|
||||
descending: false,
|
||||
page: page.value,
|
||||
rowsPerPage: rowsPerPage.value,
|
||||
});
|
||||
|
||||
/**ฟังก์ชัน เปิด Dialog เพิ่มรอบการขึ้นเงินเดือน */
|
||||
function clickAdd() {
|
||||
|
|
@ -128,15 +126,17 @@ function clickAdd() {
|
|||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.salaryPeriod() +
|
||||
`?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filterKeyword.value}&year=${year.value}`
|
||||
)
|
||||
.get(config.API.salaryPeriod(), {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: filterKeyword.value.trim(),
|
||||
year: year.value,
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
dataStore.fetchDataMap(data.data);
|
||||
maxPage.value = Math.ceil(data.total / rowsPerPage.value);
|
||||
totalList.value = data.total;
|
||||
const result = await res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
dataStore.fetchDataMap(result.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -168,12 +168,7 @@ function deleteData(id: string) {
|
|||
await http
|
||||
.delete(config.API.salaryPeriod() + `/${id}`)
|
||||
.then(async () => {
|
||||
page.value = await updateCurrentPage(
|
||||
page.value,
|
||||
maxPage.value,
|
||||
dataStore.rows.length
|
||||
);
|
||||
|
||||
await checkAndUpdatePage(dataStore.rows.length);
|
||||
await getData();
|
||||
await success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -231,23 +226,6 @@ function dialogClose(id: string) {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดท แถวต่อหน้า
|
||||
* @param newPagination
|
||||
*/
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
page.value = 1;
|
||||
rowsPerPage.value = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** ฟังก์ชันทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน */
|
||||
watch(
|
||||
() => rowsPerPage.value,
|
||||
() => {
|
||||
getData();
|
||||
}
|
||||
);
|
||||
|
||||
/** Hooklifecycle */
|
||||
onMounted(async () => {
|
||||
year.value = calculateFiscalYear(new Date());
|
||||
|
|
@ -338,7 +316,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="dataStore.columns"
|
||||
:rows="dataStore.rows"
|
||||
|
|
@ -351,21 +329,8 @@ onMounted(async () => {
|
|||
:visible-columns="dataStore.visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSize"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList?.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="getData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
|
|
@ -478,11 +443,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(page - 1) * Number(pagination.rowsPerPage) +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'effectiveDate'">
|
||||
{{ date2Thai(props.row.effectiveDate) }}
|
||||
|
|
@ -516,7 +477,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue