api ผังบัญชีค่าจ้างลูกจ้างประจำ => บัญชีโครงสร้าง

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-13 15:07:10 +07:00
parent 20ad3b34e7
commit 94e5e136e6
9 changed files with 648 additions and 107 deletions

View file

@ -1,14 +1,22 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { QTableProps } from "quasar";
import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
import type {
ItemsMenu,
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*/
import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
@ -25,11 +33,12 @@ const {
success,
} = useCounterMixin();
const formFilter = reactive({
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 10,
keyword: "",
});
const maxPage = ref<number>(1);
/** ข้อมูล Table*/
const columns = ref<QTableProps["columns"]>([
@ -70,27 +79,9 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
const rows = ref<any>([
{
id: "1",
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
group: 1,
date: new Date(),
isActive: true,
},
{
id: "2",
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
group: 2,
date: new Date(),
isActive: false,
},
]);
const rows = ref<EmployeeSalary[]>([]);
const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
/** List Mune*/
const itemMenu = ref<ItemsMenu[]>([
{
@ -119,18 +110,37 @@ const itemMenu = ref<ItemsMenu[]>([
},
]);
function onClickAction(type: string, data: any) {
function fetchListChart() {
showLoader();
http
.get(
config.API.salaryEmployeeChart +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
)
.then((res) => {
rows.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function onClickAction(type: string, data: EmployeeSalary) {
switch (type) {
case "edit":
onEdit(data);
break;
case "upload":
onUpload();
onUpload(data.id, data.isActive);
break;
case "salaryRate":
onSalaryRate(data.id);
break;
case "coppy":
case "copy":
onCoppy(data.id);
break;
@ -139,30 +149,83 @@ function onClickAction(type: string, data: any) {
}
}
function onEdit(data: any) {
function onEdit(data: EmployeeSalary) {
modalDialogEmployeeChart.value = true;
isStatusEdit.value = true;
dataRow.value = data;
}
function onUpload() {}
const modalDialogUpload = ref<boolean>(false);
const salaryChartId = ref<string>("");
const isActive = ref<boolean>(false);
function onUpload(id: string, status: boolean) {
modalDialogUpload.value = true;
salaryChartId.value = id;
isActive.value = status;
}
function onSalaryRate(id: string) {
router.push(`/salary-employee/rate/${id}`);
}
function onCoppy(id: string) {}
function onCoppy(id: string) {
http
.post(config.API.salaryEmployeeChartCopy, { id: id })
.then(() => {
fetchListChart();
success($q, "คัดลอกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
});
}
function onClickDelete(id: string) {
dialogRemove($q, () => {});
dialogRemove($q, () => {
http
.delete(config.API.salaryEmployeeChartByid(id))
.then(() => {
fetchListChart();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
});
});
}
const modalDialogEmployeeChart = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const dataRow = ref<any>();
const dataRow = ref<EmployeeSalary>();
function onClickAdd() {
modalDialogEmployeeChart.value = true;
isStatusEdit.value = false;
}
function filterFn() {
formFilter.page = 1;
fetchListChart();
}
function updatePage(val: number) {
formFilter.page = val;
fetchListChart();
}
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
watch(
() => formFilter.pageSize,
() => {
fetchListChart();
}
);
onMounted(() => {
fetchListChart();
});
</script>
<template>
<q-toolbar class="text-primary" style="padding: 0px">
@ -173,10 +236,10 @@ function onClickAdd() {
<q-input
borderless
dense
debounce="300"
outlined
v-model="formFilter.keyword"
placeholder="ค้นหา"
@keydown.enter.pervrnt="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
@ -206,9 +269,9 @@ function onClickAdd() {
:rows="rows"
:columns="columns"
row-key="name"
v-model:pagination="pagination"
:rows-per-page-options="[10, 20, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePageSize"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -290,11 +353,12 @@ function onClickAdd() {
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="1"
:max="maxPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePage"
></q-pagination>
</template>
</d-table>
@ -302,7 +366,14 @@ function onClickAdd() {
<DialogEmployeeChart
v-model:modal="modalDialogEmployeeChart"
:isStatusEdit="isStatusEdit"
:data="dataRow"
:data="dataRow as EmployeeSalary"
:fetchData="fetchListChart"
/>
<DialogEmployeeUpload
v-model:modal="modalDialogUpload"
:id="salaryChartId"
:isActive="isActive"
/>
</template>