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
|
|
@ -1,10 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -12,10 +13,7 @@ import type {
|
|||
ListData,
|
||||
ResponseData,
|
||||
} from "@/modules/13_salary/interface/index/EmployeeChart";
|
||||
import type {
|
||||
NewPagination,
|
||||
DataOption,
|
||||
} from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataOption } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { PosType } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
|
||||
|
||||
/** importCompopnents*/
|
||||
|
|
@ -27,8 +25,12 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
const $q = useQuasar();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
getData
|
||||
);
|
||||
/** ข้อมูล Table*/
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<ListData[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -44,16 +46,16 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posName",
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -62,16 +64,16 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับชั้นงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "rateOldMin",
|
||||
name: "salaryMin",
|
||||
align: "left",
|
||||
label: "อัตราค่าจ้าง ขั้นต่ำสุด",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "rateOldMin",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -86,37 +88,37 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "rateMaxOld",
|
||||
name: "salary",
|
||||
align: "left",
|
||||
label: "อัตราค่าจ้าง ขั้นสูงสุดเดิม",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "rateMaxOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "groupRateHigh",
|
||||
name: "group",
|
||||
align: "left",
|
||||
label: "อัตราค่าจ้างสูงกว่า ฯ กลุ่มบัญชีค่าจ่าง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "groupRateHigh",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "rateHighMax",
|
||||
name: "salaryMax",
|
||||
align: "left",
|
||||
label: "อัตราค่าจ้างสูงกว่า ฯ ขั้นสูงใหม่",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "rateHighMax",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "reson",
|
||||
name: "details",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "reson",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -125,22 +127,15 @@ const columns = ref<QTableProps["columns"]>([
|
|||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posType",
|
||||
"posName",
|
||||
"position",
|
||||
"posLevel",
|
||||
"rateOldMin",
|
||||
"salaryMin",
|
||||
"groupOld",
|
||||
"rateMaxOld",
|
||||
"groupRateHigh",
|
||||
"rateHighMax",
|
||||
"reson",
|
||||
"salary",
|
||||
"group",
|
||||
"salaryMax",
|
||||
"details",
|
||||
]);
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
const maxPage = ref<number>(1); //จำนวนหน้า
|
||||
const totalList = ref<number>(0); //จำนวนรายการ
|
||||
|
||||
const modalForm = ref<boolean>(false); //Popup ข้อมูลหลักเกณฑ์
|
||||
const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไข
|
||||
|
|
@ -151,11 +146,6 @@ const posTypeOpMain = ref<DataOption[]>([]); //ข้อมูลกลุ่ม
|
|||
const posTypeOp = ref<DataOption[]>([]); //ตัวเลือกข้อมูลรายการกลุ่มงาน
|
||||
const posType = ref<string | null>(""); //กลุ่มงาน
|
||||
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
/** ดึงข้อมูลกลุ่มงาน*/
|
||||
async function getPosType() {
|
||||
await http
|
||||
|
|
@ -184,18 +174,19 @@ async function getPosType() {
|
|||
|
||||
/** ดึงข้อมูลรายการหลักเกณฑ์ */
|
||||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.salaryFormula() +
|
||||
`/?page=${formFilter.page}&pageSize=${
|
||||
formFilter.pageSize
|
||||
}&keyword=${formFilter.keyword.trim()}&posTypeId=${posType.value}`
|
||||
)
|
||||
.get(config.API.salaryFormula(), {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
posTypeId: posType.value,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalList.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data.map((item: ResponseData) => ({
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data.map((item: ResponseData) => ({
|
||||
id: item.id,
|
||||
posType: item.posType,
|
||||
posName: item.position,
|
||||
|
|
@ -210,6 +201,9 @@ async function getData() {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -224,28 +218,6 @@ function editPopup(params: ListData, type: string) {
|
|||
dataRow.value = params;
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลรายการตามหน้า
|
||||
* @param val หน้า
|
||||
*/
|
||||
async function updatePage(val: number) {
|
||||
try {
|
||||
showLoader();
|
||||
formFilter.page = val;
|
||||
await getData();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
/** function อัปเดทแถวต่อหน้า*/
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* ลบรายการหลักเกณฑ์
|
||||
* @param id หลักเกณฑ์
|
||||
|
|
@ -256,11 +228,7 @@ function onClickDelete(id: string) {
|
|||
await http
|
||||
.delete(config.API.salaryFormula() + `/${id}`)
|
||||
.then(async () => {
|
||||
formFilter.page = await updateCurrentPage(
|
||||
formFilter.page,
|
||||
maxPage.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await getData();
|
||||
await success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -288,25 +256,10 @@ function filterSelector(val: string, update: Function) {
|
|||
|
||||
/** function fetch ข้อมูลรายการหน้าแรก */
|
||||
function filterFn() {
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
getData();
|
||||
}
|
||||
|
||||
/** callbackFunction ทำงานเมื่อมี่การอัปเดทแถว*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
async () => {
|
||||
try {
|
||||
showLoader();
|
||||
await getData();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** Hook */
|
||||
onMounted(async () => {
|
||||
try {
|
||||
|
|
@ -372,9 +325,9 @@ onMounted(async () => {
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.pervrnt="filterFn"
|
||||
@keydown.enter.prevent="filterFn"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -397,7 +350,7 @@ onMounted(async () => {
|
|||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
<p-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
|
|
@ -408,7 +361,7 @@ onMounted(async () => {
|
|||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSize"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -462,17 +415,13 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * Number(pagination.rowsPerPage) +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
col.name == 'rateOldMin' ||
|
||||
col.name == 'rateMaxOld' ||
|
||||
col.name == 'rateHighMax'
|
||||
col.name == 'salaryMin' ||
|
||||
col.name == 'salary' ||
|
||||
col.name == 'salaryMax'
|
||||
"
|
||||
>
|
||||
{{ col.value ? col.value.toLocaleString() : "-" }}
|
||||
|
|
@ -487,21 +436,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePage"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<DialogFormCriteria
|
||||
v-model:modal="modalForm"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
|
||||
import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
|
||||
|
||||
/** importComponents*/
|
||||
|
|
@ -31,14 +30,10 @@ const {
|
|||
hideLoader,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const formFilter = reactive<FormFilter>({
|
||||
page: 1, //*หน้า
|
||||
pageSize: 10, //*จำนวนแถวต่อหน้า
|
||||
keyword: "", //keyword ค้นหา
|
||||
});
|
||||
const maxPage = ref<number>(1); //จำนวนหน้า
|
||||
const totalList = ref<number>(0); //จำนวนรายการ
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchListChart
|
||||
);
|
||||
|
||||
const modalDialogEmployeeChart = ref<boolean>(false); //popup ผังบัญชีค่าจ้างลูกจ้างประจำ
|
||||
const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไข
|
||||
|
|
@ -50,12 +45,13 @@ const isActive = ref<boolean>(false); //สถานะการใช้งา
|
|||
|
||||
/** ข้อมูล Table*/
|
||||
const rows = ref<EmployeeSalary[]>([]); //รายการผังบัญชีค่าจ้างลูกจ้างประจำ
|
||||
const keyword = ref<string>(""); //คำค้นหา
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อผังบัญชีอัตราค่าจ้าง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -64,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "group",
|
||||
align: "left",
|
||||
label: "กลุ่มของผังบัญชีอัตราค่าจ้าง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "group",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -73,7 +69,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",
|
||||
|
|
@ -82,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "isActive",
|
||||
align: "left",
|
||||
label: "สถานะการใช้งาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "isActive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -101,16 +97,16 @@ const visibleColumns = ref<string[]>([
|
|||
async function fetchListChart() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.salaryEmployeeChart +
|
||||
`?page=${formFilter.page}&pageSize=${
|
||||
formFilter.pageSize
|
||||
}&keyword=${formFilter.keyword.trim()}`
|
||||
)
|
||||
.get(config.API.salaryEmployeeChart, {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
totalList.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -180,11 +176,7 @@ function onClickDelete(id: string) {
|
|||
http
|
||||
.delete(config.API.salaryEmployeeChartByid(id))
|
||||
.then(async () => {
|
||||
formFilter.page = await updateCurrentPage(
|
||||
formFilter.page,
|
||||
maxPage.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchListChart();
|
||||
await success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -205,37 +197,12 @@ function onClickAdd() {
|
|||
modalDialogEmployeeChart.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* functionn fetch ข้อมูลรายการหน้าแรก*
|
||||
*/
|
||||
/** function fetch ข้อมูลรายการหน้าแรก*/
|
||||
function filterFn() {
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchListChart();
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลรายการตามหน้า
|
||||
* @param val หน้า
|
||||
*/
|
||||
function updatePage(val: number) {
|
||||
formFilter.page = val;
|
||||
fetchListChart();
|
||||
}
|
||||
|
||||
/** function อัปเดทแถวต่อหน้า*/
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
fetchListChart();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchListChart();
|
||||
});
|
||||
|
|
@ -257,7 +224,7 @@ onMounted(() => {
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="filterFn"
|
||||
>
|
||||
|
|
@ -281,7 +248,7 @@ onMounted(() => {
|
|||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
<p-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
|
|
@ -290,7 +257,8 @@ onMounted(() => {
|
|||
row-key="name"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSize"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -445,21 +413,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePage"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<!-- อัปโหลดเอกสารอ้างอิง -->
|
||||
<DialogEmployeeUpload
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
|
|||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ const $q = useQuasar();
|
|||
const store = useSalaryListSDataStore();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", fetchListPerson);
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
|
@ -47,25 +49,25 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -79,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -88,7 +90,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทตำเเหน่ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -97,7 +99,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำเเหน่ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -105,38 +107,46 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
/** ข้อมูุลค้นหา*/
|
||||
const formFilter = reactive<DataFilterPerson>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
rootId: "",
|
||||
year: 0,
|
||||
period: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/**
|
||||
* function close popup
|
||||
*/
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
formFilter.keyword = "";
|
||||
rows.value = [];
|
||||
pagination.value = {
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
sortBy: "",
|
||||
descending: false,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกรายชื่อ คนเลื่อนเงินเดือน
|
||||
*/
|
||||
function fetchListPerson() {
|
||||
async function fetchListPerson() {
|
||||
showLoader();
|
||||
formFilter.rootId = store.rootId;
|
||||
formFilter.period = store.roundMainCode;
|
||||
formFilter.year = store.roundYear;
|
||||
http
|
||||
.post(config.API.salaryListPerson, formFilter)
|
||||
|
||||
const body = {
|
||||
...params.value,
|
||||
...formFilter,
|
||||
};
|
||||
await http
|
||||
.post(config.API.salaryListPerson, body)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -180,32 +190,13 @@ function onClickAddPerson(data: DataPerson) {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePage
|
||||
*/
|
||||
async function updatePagePagination() {
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePageSize
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาข้อมูลตาม keyword
|
||||
*/
|
||||
/** function ค้นหาข้อมูล*/
|
||||
function searchData() {
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/**
|
||||
* callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup
|
||||
*/
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
@ -214,17 +205,8 @@ watch(
|
|||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize
|
||||
*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="max-width: 100vw">
|
||||
|
|
@ -248,7 +230,7 @@ watch(
|
|||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -258,7 +240,8 @@ watch(
|
|||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
v-model:pagination="pagination"
|
||||
:onRequest="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -288,13 +271,9 @@ watch(
|
|||
:props="props"
|
||||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
<div v-else-if="col.name === 'firstName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
|
|
@ -305,35 +284,11 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<!-- <q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions> -->
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import { useQuasar } from "quasar";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/** importType*/
|
||||
import type { DataOption } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
import type {
|
||||
DataPeriodLatest,
|
||||
DataPeriod,
|
||||
|
|
@ -27,6 +27,10 @@ import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsSt
|
|||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
() => fetchDataPeriod(store.groupId, true)
|
||||
);
|
||||
|
||||
/** props*/
|
||||
const props = defineProps({
|
||||
|
|
@ -44,6 +48,8 @@ const rows = ref<DataPeriod[]>([]);
|
|||
const modalDialogInfoCriteria = ref<boolean>(false); // ตัวแปรสำหรับแสดง Dialog แสดงหลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
|
||||
const isRetire = ref<boolean>(false); // ตัวแปรสำหรับแสดงเฉพาะผู้เกษียณอายุราชการ
|
||||
|
||||
const keyword = ref<string>("");
|
||||
|
||||
/** itemsTab กลุ่ม*/
|
||||
const itemsTabGroup = ref([
|
||||
{
|
||||
|
|
@ -210,15 +216,6 @@ const itemsCard = ref([
|
|||
},
|
||||
]);
|
||||
|
||||
/** ข้อมูลค้นหารายชื่อคนขึ้นเงินเดือน*/
|
||||
const formFilter = reactive<DataFilter>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
type: store.tabType,
|
||||
});
|
||||
const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเรียกข้อมูลโควต้า
|
||||
* @param id กลุ่ม
|
||||
|
|
@ -255,11 +252,11 @@ async function fetchDataQuota(id: string) {
|
|||
* ฟังก์ชันเรียกข้อมูลรายชื่อเลื่อนเงินเดือนข้าราชการฯ
|
||||
* @param id กลุ่ม
|
||||
*/
|
||||
async function fetchDataPeriod(id: string) {
|
||||
async function fetchDataPeriod(id: string, force: boolean = false) {
|
||||
force && showLoader();
|
||||
let formData = {
|
||||
page: formFilter.page.toString(),
|
||||
pageSize: formFilter.pageSize.toString(),
|
||||
keyword: formFilter.keyword.trim(),
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
type: store.tabType,
|
||||
isRetire:
|
||||
store.roundMainCode !== "OCT"
|
||||
|
|
@ -268,17 +265,20 @@ async function fetchDataPeriod(id: string) {
|
|||
? "1"
|
||||
: "0",
|
||||
};
|
||||
rows.value = [];
|
||||
|
||||
await http
|
||||
.put(config.API.salaryListPeriodORG(id), formData)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
total.value = result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
rows.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
force && hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -287,9 +287,9 @@ async function changeTabGroup() {
|
|||
showLoader();
|
||||
try {
|
||||
await Promise.all([
|
||||
(formFilter.page = 1),
|
||||
(formFilter.pageSize = 10),
|
||||
(formFilter.keyword = ""),
|
||||
(pagination.value.page = 1),
|
||||
(pagination.value.rowsPerPage = 10),
|
||||
(keyword.value = ""),
|
||||
(store.tabType = "PENDING"),
|
||||
props.periodLatest &&
|
||||
store.fetchPeriodLatest(props?.periodLatest, store.tabGroup),
|
||||
|
|
@ -309,9 +309,9 @@ async function changeTabType() {
|
|||
if (!store.groupId) return;
|
||||
showLoader();
|
||||
try {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 10;
|
||||
formFilter.keyword = "";
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = 10;
|
||||
keyword.value = "";
|
||||
store.groupId && (await fetchDataPeriod(store.groupId));
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
|
|
@ -671,24 +671,26 @@ onMounted(async () => {
|
|||
<TableTabType1
|
||||
v-if="index === 0"
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:fetchDataTable="fetchDataPeriodNew"
|
||||
:total="total"
|
||||
:snap-shot="props?.snapShot"
|
||||
:is-close="props.periodLatest?.group1IsClose ?? false"
|
||||
:is-retire="isRetire"
|
||||
v-model:pagination="pagination"
|
||||
v-model:keyword="keyword"
|
||||
:onRequest="onRequest"
|
||||
:checkAndUpdatePage="checkAndUpdatePage"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-else
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:fetchDataTable="fetchDataPeriodNew"
|
||||
:total="total"
|
||||
:type="item.type"
|
||||
:snap-shot="props?.snapShot"
|
||||
:is-close="props.periodLatest?.group1IsClose ?? false"
|
||||
v-model:pagination="pagination"
|
||||
v-model:keyword="keyword"
|
||||
:onRequest="onRequest"
|
||||
:checkAndUpdatePage="checkAndUpdatePage"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/04_salaryLists//DialogAddPerson.vue";
|
||||
|
|
@ -28,10 +27,11 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
|||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const snapShot = defineModel<string>("snapShot");
|
||||
const isClose = defineModel<boolean>("isClose", { required: true });
|
||||
const pagination = defineModel<NewPagination>("pagination", {
|
||||
required: true,
|
||||
});
|
||||
const keyword = defineModel<string>("keyword", { required: true });
|
||||
|
||||
const props = defineProps({
|
||||
rows: { type: Array, required: true },
|
||||
|
|
@ -47,6 +47,14 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
onRequest: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
checkAndUpdatePage: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
|
|
@ -62,20 +70,20 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
|
||||
{
|
||||
name: "fullName",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: false,
|
||||
field: "firstName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posNo",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
|
|
@ -88,7 +96,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -97,7 +105,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -106,7 +114,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -115,7 +123,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -124,7 +132,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "amount",
|
||||
align: "left",
|
||||
label: "เงินเดือนฐาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -133,7 +141,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "amountUse",
|
||||
align: "left",
|
||||
label: "จำนวนเงินที่ใช้เลื่อน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "amountUse",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -143,7 +151,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "positionSalaryAmount",
|
||||
align: "left",
|
||||
label: "เงินเดือนหลังเลื่อน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "positionSalaryAmount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -152,7 +160,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "isRetired",
|
||||
align: "center",
|
||||
label: "เกษียณอายุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "isRetired",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -161,7 +169,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "remark",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "remark",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -169,8 +177,8 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posNo",
|
||||
"fullName",
|
||||
"orgShortName",
|
||||
"firstName",
|
||||
"position",
|
||||
"posType",
|
||||
"posLevel",
|
||||
|
|
@ -271,48 +279,17 @@ function onClickDelete(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePageTable
|
||||
*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePageSizeTable
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาข้อมูล Table
|
||||
*/
|
||||
/** ฟังก์ชันค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
pagination.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
|
||||
async function updateCurrentPageAndfetchData() {
|
||||
formFilter.value.page = await updateCurrentPage(
|
||||
formFilter.value.page,
|
||||
Number(maxPage.value),
|
||||
props.rows.length
|
||||
);
|
||||
await props.checkAndUpdatePage(props.rows.length);
|
||||
await props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
|
||||
*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
|
|
@ -336,7 +313,7 @@ watch(
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
|
|
@ -367,7 +344,7 @@ watch(
|
|||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="
|
||||
store.roundMainCode === 'OCT'
|
||||
|
|
@ -384,7 +361,8 @@ watch(
|
|||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="props.onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -469,7 +447,6 @@ watch(
|
|||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1 +
|
||||
(store.tabType == "FULL" && props.row.isReserve == true
|
||||
|
|
@ -477,10 +454,10 @@ watch(
|
|||
: "")
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posNo'">
|
||||
<div v-else-if="col.name === 'orgShortName'">
|
||||
{{ `${props.row.orgShortName} ${props.row.posMasterNo}` }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
<div v-else-if="col.name === 'firstName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
|
|
@ -530,21 +507,7 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props?.total?.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableColumn } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/04_salaryLists//DialogAddPerson.vue"; //เพิ่มคนเลื่อนเงินเดือน
|
||||
|
|
@ -38,20 +36,17 @@ const {
|
|||
} = useCounterMixin();
|
||||
|
||||
/** Props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const snapShot = defineModel<string>("snapShot");
|
||||
const isClose = defineModel<boolean>("isClose", { required: true });
|
||||
const pagination = defineModel<NewPagination>("pagination", {
|
||||
required: true,
|
||||
});
|
||||
const keyword = defineModel<string>("keyword", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array, required: true },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
maxPage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
required: true,
|
||||
|
|
@ -60,6 +55,14 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
onRequest: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
checkAndUpdatePage: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
|
|
@ -75,11 +78,11 @@ const columns = ref<QTableColumn[]>([
|
|||
},
|
||||
|
||||
{
|
||||
name: "fullName",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: false,
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
format(val, row) {
|
||||
return `${row.prefix}${row.firstName} ${row.lastName}`;
|
||||
},
|
||||
|
|
@ -87,11 +90,11 @@ const columns = ref<QTableColumn[]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posNo",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
|
|
@ -104,7 +107,7 @@ const columns = ref<QTableColumn[]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -113,7 +116,7 @@ const columns = ref<QTableColumn[]>([
|
|||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -123,7 +126,7 @@ const columns = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
field: "position",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -132,7 +135,7 @@ const columns = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "ระดับ",
|
||||
field: "posLevel",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -141,7 +144,7 @@ const columns = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "เงินเดือน",
|
||||
field: "amount",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -205,8 +208,8 @@ const columns = ref<QTableColumn[]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullName",
|
||||
"posNo",
|
||||
"firstName",
|
||||
"orgShortName",
|
||||
"posType",
|
||||
"posExecutive",
|
||||
"position",
|
||||
|
|
@ -305,15 +308,9 @@ function updatePagePagination() {
|
|||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** function updatePageSizeTable*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูล Table */
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
pagination.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
|
|
@ -337,22 +334,10 @@ function onClickMoveLevelMulti() {
|
|||
|
||||
/** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
|
||||
async function updateCurrentPageAndfetchData() {
|
||||
formFilter.value.page = await updateCurrentPage(
|
||||
formFilter.value.page,
|
||||
props.maxPage,
|
||||
props.rows.length
|
||||
);
|
||||
await props.checkAndUpdatePage(props.rows.length);
|
||||
await props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
|
||||
const infoType = ref<string>(""); //ประเภทข้อมูล
|
||||
/**
|
||||
* function ดูข้อมูลส่วนตัว
|
||||
|
|
@ -402,7 +387,7 @@ function onClickViewInfo(type: string, id: string) {
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
|
|
@ -426,7 +411,7 @@ function onClickViewInfo(type: string, id: string) {
|
|||
class="q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="!checkPermission($route)?.attrIsGet ? columns?.filter((col:any) => col.name !== 'posSalary' && col.name !== 'discipline' && col.name !== 'leave' ) : columns"
|
||||
:rows="props.rows"
|
||||
|
|
@ -437,7 +422,8 @@ function onClickViewInfo(type: string, id: string) {
|
|||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="props.onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -511,9 +497,7 @@ function onClickViewInfo(type: string, id: string) {
|
|||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'organization'" class="text-html">
|
||||
{{ findOrgNameHtml(props.row) }}
|
||||
|
|
@ -563,7 +547,7 @@ function onClickViewInfo(type: string, id: string) {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<!-- <template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props?.total?.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
|
|
@ -576,8 +560,8 @@ function onClickViewInfo(type: string, id: string) {
|
|||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</template> -->
|
||||
</p-table>
|
||||
|
||||
<!-- เพิ่มคนเลื่อนเงินเดือน -->
|
||||
<DialogAddPerson
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import { useQuasar } from "quasar";
|
|||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
|
||||
import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
|
@ -22,6 +22,7 @@ const $q = useQuasar();
|
|||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", fetchListPerson);
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
|
@ -47,26 +48,26 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: false,
|
||||
field: "firstName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: false,
|
||||
field: "posNo",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
|
|
@ -79,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -88,17 +89,17 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevelName",
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับชั้นงาน",
|
||||
sortable: false,
|
||||
field: "posLevelName",
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
|
|
@ -110,19 +111,21 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
/** ข้อมูุลค้นหา*/
|
||||
const formFilter = reactive<DataFilterPerson>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
rootId: "",
|
||||
year: 0,
|
||||
period: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** function close popup*/
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
pagination.value = {
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0,
|
||||
};
|
||||
|
||||
formFilter.keyword = "";
|
||||
}
|
||||
|
||||
|
|
@ -133,12 +136,17 @@ async function fetchListPerson() {
|
|||
formFilter.period = store.roundMainCode;
|
||||
formFilter.year = store.roundYear;
|
||||
|
||||
const body = {
|
||||
...params.value,
|
||||
...formFilter,
|
||||
};
|
||||
|
||||
await http
|
||||
.post(config.API.salaryListPersonEmp, formFilter)
|
||||
.post(config.API.salaryListPersonEmp, body)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -186,20 +194,9 @@ function onClickAddPerson(data: DataPerson) {
|
|||
);
|
||||
}
|
||||
|
||||
/** function update Pagination*/
|
||||
async function updatePagePagination() {
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลตาม keyword*/
|
||||
function searchData() {
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
|
|
@ -212,14 +209,6 @@ watch(
|
|||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
|
|
@ -244,7 +233,7 @@ watch(
|
|||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -254,7 +243,8 @@ watch(
|
|||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -284,13 +274,9 @@ watch(
|
|||
:props="props"
|
||||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
<div v-else-if="col.name === 'firstName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
|
|
@ -301,20 +287,7 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, computed } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/** importType*/
|
||||
import type { DataOption } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
import type {
|
||||
DataPeriodLatest,
|
||||
DataPeriod,
|
||||
|
|
@ -27,6 +28,10 @@ import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/Salar
|
|||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
() => fetchDataPeriod(store.groupId, true)
|
||||
);
|
||||
|
||||
/** props*/
|
||||
const props = defineProps({
|
||||
|
|
@ -42,8 +47,8 @@ const splitterModel = ref<number>(13);
|
|||
const modalDialogInfoCriteria = ref<boolean>(false); //popup หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
|
||||
const isRetire = ref<boolean>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
|
||||
const rows = ref<DataPeriod[]>([]); //ข้อมูลรายชื่อ
|
||||
const keyword = ref<string>(""); //คำค้นหา
|
||||
const total = ref<number>(0); //จำนวนรายการ
|
||||
const maxPage = ref<number>(1); //จำนวนหน้า
|
||||
|
||||
//itemsTab กลุ่ม
|
||||
const itemsTabGroup = ref([
|
||||
|
|
@ -203,13 +208,6 @@ const itemsCard = ref([
|
|||
total: 0,
|
||||
},
|
||||
]);
|
||||
//ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน
|
||||
const formFilter = reactive<DataFilter>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
type: store.tabType,
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเรียกข้อมูลโควต้า
|
||||
|
|
@ -246,11 +244,11 @@ async function fetchDataQuota(id: string) {
|
|||
* ฟังก์ชันเรียกข้อมูลรายชื่อ
|
||||
* @param id กลุ่ม
|
||||
*/
|
||||
async function fetchDataPeriod(id: string) {
|
||||
async function fetchDataPeriod(id: string, force: boolean = false) {
|
||||
force && showLoader();
|
||||
let formData = {
|
||||
page: formFilter.page.toString(),
|
||||
pageSize: formFilter.pageSize.toString(),
|
||||
keyword: formFilter.keyword,
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
type: store.tabType,
|
||||
isRetire:
|
||||
store.roundMainCode !== "OCT"
|
||||
|
|
@ -259,29 +257,32 @@ async function fetchDataPeriod(id: string) {
|
|||
? "1"
|
||||
: "0",
|
||||
};
|
||||
rows.value = [];
|
||||
|
||||
await http
|
||||
.put(config.API.salaryListPeriodORGEmp(id), formData)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
total.value = result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
rows.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
force && hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชันเปลี่ยนขั้น*/
|
||||
async function changeTabType() {
|
||||
if (!store.groupId) return;
|
||||
|
||||
showLoader();
|
||||
try {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 10;
|
||||
formFilter.keyword = "";
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = 10;
|
||||
keyword.value = "";
|
||||
await fetchDataPeriod(store.groupId);
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
|
|
@ -531,25 +532,29 @@ onMounted(async () => {
|
|||
>
|
||||
<TableTabType1
|
||||
v-if="index === 0"
|
||||
v-model:max-page="maxPage"
|
||||
v-model:form-filter="formFilter"
|
||||
:fetch-data-table="fetchDataPeriodNew"
|
||||
:rows="rows"
|
||||
:total="total"
|
||||
:snap-shot="props?.snapShot"
|
||||
:is-retire="isRetire"
|
||||
:is-close="props.periodLatest?.group1IsClose ?? false"
|
||||
v-model:pagination="pagination"
|
||||
v-model:keyword="keyword"
|
||||
:onRequest="onRequest"
|
||||
:checkAndUpdatePage="checkAndUpdatePage"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-else
|
||||
:rows="rows"
|
||||
v-model:max-page="maxPage"
|
||||
v-model:form-filter="formFilter"
|
||||
:fetch-data-table="fetchDataPeriodNew"
|
||||
:total="total"
|
||||
:type="item.type"
|
||||
:snap-shot="props?.snapShot"
|
||||
:is-close="props.periodLatest?.group1IsClose ?? false"
|
||||
v-model:pagination="pagination"
|
||||
v-model:keyword="keyword"
|
||||
:onRequest="onRequest"
|
||||
:checkAndUpdatePage="checkAndUpdatePage"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -12,7 +11,6 @@ import http from "@/plugins/http";
|
|||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/05_salaryListsEmployee//DialogAddPerson.vue";
|
||||
|
|
@ -27,10 +25,12 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
|||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const isClose = defineModel<boolean>("isClose", { required: true });
|
||||
const snapShot = defineModel<string>("snapShot");
|
||||
const pagination = defineModel<NewPagination>("pagination", {
|
||||
required: true,
|
||||
});
|
||||
const keyword = defineModel<string>("keyword", { required: true });
|
||||
|
||||
const props = defineProps({
|
||||
rows: { type: Array, required: true },
|
||||
fetchDataTable: {
|
||||
|
|
@ -45,6 +45,14 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
onRequest: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
checkAndUpdatePage: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
|
|
@ -60,20 +68,20 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
|
||||
{
|
||||
name: "fullName",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: false,
|
||||
field: "firstName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: false,
|
||||
field: "posNo",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -81,7 +89,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -90,7 +98,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -99,7 +107,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับชั้นงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -108,7 +116,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "group",
|
||||
align: "left",
|
||||
label: "ผังค่าจ้าง(เดิม)",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "group",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -120,7 +128,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "salaryLevel",
|
||||
align: "left",
|
||||
label: "ขั้น(เดิม)",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "salaryLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -129,7 +137,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "amount",
|
||||
align: "left",
|
||||
label: "ค่าจ้างฐาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -138,7 +146,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "amountUse",
|
||||
align: "left",
|
||||
label: "จำนวนเงินที่ใช้เลื่อน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "amountUse",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -148,7 +156,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "positionSalaryAmount",
|
||||
align: "left",
|
||||
label: "ค่าจ้างหลังเลื่อน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "positionSalaryAmount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -166,7 +174,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
name: "remark",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "remark",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -174,8 +182,8 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posNo",
|
||||
"fullName",
|
||||
"firstName",
|
||||
"orgShortName",
|
||||
"position",
|
||||
"posType",
|
||||
"posLevel",
|
||||
|
|
@ -208,9 +216,7 @@ const typeLevel = ref<string>(""); //เลื่อนขั้น
|
|||
const isReserve = ref<boolean>(false); //สำรอง
|
||||
const remark = ref<string>(""); //หมายเหตุ
|
||||
|
||||
/**
|
||||
* function openPopup เพิ่มคนเลื่อนค่าจ้าง
|
||||
*/
|
||||
/** function openPopup เพิ่มคนเลื่อนค่าจ้าง*/
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
|
@ -277,48 +283,17 @@ function onClickDelete(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePageTable
|
||||
*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePageSizeTable
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาข้อมูล Table
|
||||
*/
|
||||
/**function ค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
pagination.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
|
||||
async function updateCurrentPageAndfetchData() {
|
||||
formFilter.value.page = await updateCurrentPage(
|
||||
formFilter.value.page,
|
||||
Number(maxPage.value),
|
||||
props.rows.length
|
||||
);
|
||||
await props.checkAndUpdatePage(props.rows.length);
|
||||
await props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
|
||||
*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
|
|
@ -343,7 +318,7 @@ watch(
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
|
|
@ -374,7 +349,7 @@ watch(
|
|||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="
|
||||
store.roundMainCode === 'OCT'
|
||||
|
|
@ -391,7 +366,8 @@ watch(
|
|||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="props.onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -476,7 +452,6 @@ watch(
|
|||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1 +
|
||||
(store.tabType == "FULL" && props.row.isReserve == true
|
||||
|
|
@ -484,10 +459,10 @@ watch(
|
|||
: "")
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posNo'">
|
||||
<div v-else-if="col.name === 'orgShortName'">
|
||||
{{ `${props.row.orgShortName} ${props.row.posMasterNo}` }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
<div v-else-if="col.name === 'firstName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
|
|
@ -539,21 +514,7 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props?.total?.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -12,7 +12,6 @@ import config from "@/app.config";
|
|||
/** importType*/
|
||||
import type { QTableColumn } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/05_salaryListsEmployee//DialogAddPerson.vue";
|
||||
|
|
@ -37,21 +36,18 @@ const {
|
|||
} = useCounterMixin();
|
||||
|
||||
/** Props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const isClose = defineModel<boolean>("isClose", { required: true });
|
||||
const snapShot = defineModel<string>("snapShot");
|
||||
|
||||
const pagination = defineModel<NewPagination>("pagination", {
|
||||
required: true,
|
||||
});
|
||||
const keyword = defineModel<string>("keyword", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array, required: true },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
maxPage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
|
||||
total: {
|
||||
type: Number,
|
||||
required: true,
|
||||
|
|
@ -60,6 +56,14 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
onRequest: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
checkAndUpdatePage: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
|
|
@ -74,11 +78,11 @@ const columns = ref<QTableColumn[]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: false,
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
format(val, row) {
|
||||
return `${row.prefix}${row.firstName} ${row.lastName}`;
|
||||
},
|
||||
|
|
@ -86,11 +90,11 @@ const columns = ref<QTableColumn[]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: false,
|
||||
field: "posNo",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
|
|
@ -105,7 +109,7 @@ const columns = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
field: "position",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -113,7 +117,7 @@ const columns = ref<QTableColumn[]>([
|
|||
name: "posType",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -123,7 +127,7 @@ const columns = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "ระดับชั้นงาน",
|
||||
field: "posLevel",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -131,7 +135,7 @@ const columns = ref<QTableColumn[]>([
|
|||
name: "group",
|
||||
align: "left",
|
||||
label: "ผังค่าจ้าง(เดิม)",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "group",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -143,7 +147,7 @@ const columns = ref<QTableColumn[]>([
|
|||
name: "salaryLevel",
|
||||
align: "left",
|
||||
label: "ขั้น(เดิม)",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "salaryLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -153,7 +157,7 @@ const columns = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "ค่าจ้าง",
|
||||
field: "amount",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -217,8 +221,8 @@ const columns = ref<QTableColumn[]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullName",
|
||||
"posNo",
|
||||
"firstName",
|
||||
"orgShortName",
|
||||
"posType",
|
||||
"position",
|
||||
"posLevel",
|
||||
|
|
@ -313,22 +317,9 @@ function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
|
|||
isReserve.value = isReserveVal;
|
||||
}
|
||||
|
||||
/** function updatePageTable*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePageSizeTable
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
pagination.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
|
|
@ -364,23 +355,9 @@ function onClickMoveLevelMulti() {
|
|||
|
||||
/** ฟังก์ชันอัปเดตหน้าปัจจุบันและดึงข้อมูล */
|
||||
async function updateCurrentPageAndfetchData() {
|
||||
formFilter.value.page = await updateCurrentPage(
|
||||
formFilter.value.page,
|
||||
props.maxPage,
|
||||
props.rows.length
|
||||
);
|
||||
await props.checkAndUpdatePage(props.rows.length);
|
||||
await props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
|
||||
*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -418,7 +395,7 @@ watch(
|
|||
borderless
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
v-model="keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
|
|
@ -444,7 +421,7 @@ watch(
|
|||
class="q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="!checkPermission($route)?.attrIsGet
|
||||
? columns?.filter((col:any) => col.name !== 'posSalary' && col.name !== 'discipline' && col.name !== 'leave' )
|
||||
|
|
@ -455,9 +432,10 @@ watch(
|
|||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:rows-per-page-options="[1,10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="props.onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -530,9 +508,7 @@ watch(
|
|||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'organization'" class="text-html">
|
||||
{{ findOrgNameHtml(props.row) }}
|
||||
|
|
@ -589,21 +565,7 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props.total?.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ interface DataOptionShort {
|
|||
}
|
||||
|
||||
interface NewPagination {
|
||||
descending: boolean;
|
||||
descending?: boolean;
|
||||
page: number;
|
||||
rowsPerPage: number;
|
||||
sortBy: string;
|
||||
sortBy?: string;
|
||||
}
|
||||
|
||||
interface ItemsMenu {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ interface DataFilter {
|
|||
}
|
||||
|
||||
interface DataFilterPerson {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
keyword: string;
|
||||
rootId: string;
|
||||
year: number;
|
||||
|
|
|
|||
|
|
@ -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