Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into develop
# Conflicts: # src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
This commit is contained in:
commit
16a6a4255b
12 changed files with 531 additions and 63 deletions
309
src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
Normal file
309
src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
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";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทตำเเหน่ง",
|
||||
sortable: false,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำเเหน่ง",
|
||||
sortable: false,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<DataPerson[]>([]);
|
||||
|
||||
/** ข้อมูุลค้นหา*/
|
||||
const formFilter = reactive<DataFilterPerson>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** function close popup*/
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
}
|
||||
|
||||
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
||||
async function fetchListPerson() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.salaryListPerson, formFilter)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
closeModal();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
|
||||
* @param data ข้อมูลคนที่เพิ่ม
|
||||
*/
|
||||
async function onClickAddPerson(data: DataPerson) {
|
||||
const body: DataPersonReq = {
|
||||
id: store.groupId,
|
||||
type: store.tabType,
|
||||
...data,
|
||||
};
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await http
|
||||
.post(config.API.salaryPeriodProfile, body)
|
||||
.then(() => {
|
||||
props.fetchData?.();
|
||||
success($q, "เพื่มรายชื่อสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเพิ่มรายชื่อ",
|
||||
"ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** function updatePage*/
|
||||
async function updatePagePagination() {
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลตาม keyword*/
|
||||
function searchData() {
|
||||
formFilter.page = 1;
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value) {
|
||||
await fetchListPerson();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="max-width: 100vw">
|
||||
<Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
v-model="formFilter.keyword"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<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
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
label="เพิ่ม"
|
||||
@click="onClickAddPerson(props.row)"
|
||||
/>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -34,7 +34,7 @@ function close() {
|
|||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
if (amount.value) {
|
||||
if (amount.value !== null) {
|
||||
const amountString: string = amount.value.toString();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
|
|
@ -58,13 +58,6 @@ function onSubmit() {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -76,7 +69,6 @@ function inputEdit(val: boolean) {
|
|||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-input
|
||||
ref="salaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="amount"
|
||||
|
|
@ -92,7 +84,6 @@ function inputEdit(val: boolean) {
|
|||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
|
|
|
|||
|
|
@ -22,13 +22,17 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const group = ref<string>("");
|
||||
const groupRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
groupRef.value.validate();
|
||||
if (groupRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
|
|
@ -76,7 +80,7 @@ function inputEdit(val: boolean) {
|
|||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="periodRef"
|
||||
ref="groupRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="group"
|
||||
label="กลุ่ม"
|
||||
|
|
@ -87,7 +91,7 @@ function inputEdit(val: boolean) {
|
|||
option-label="name"
|
||||
option-value="id"
|
||||
:options="store.groupOp.filter((e) => e.name !== props.group)"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
|
||||
:rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const store = useSalaryListSDataStore();
|
|||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
|
|
@ -26,7 +27,10 @@ const props = defineProps({
|
|||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
typeRef.value.validate();
|
||||
if (typeRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
|
|
@ -74,7 +78,7 @@ function inputEdit(val: boolean) {
|
|||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="periodRef"
|
||||
ref="typeRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="type"
|
||||
label="เลื่อนขั้น"
|
||||
|
|
|
|||
|
|
@ -171,7 +171,6 @@ async function fetchDataPeriod(id: string) {
|
|||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
// maxPage.value = 10;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -198,6 +197,7 @@ function changeTabType() {
|
|||
|
||||
function updatePagination() {
|
||||
store.groupId && fetchDataPeriod(store.groupId);
|
||||
store.groupId && fetchDataQuota(store.groupId);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -307,28 +307,28 @@ onMounted(async () => {
|
|||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchDataTable="updatePagination"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-if="index + 1 === 2"
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchDataTable="updatePagination"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-if="index + 1 === 3"
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchDataTable="updatePagination"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-if="index + 1 === 4"
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchDataTable="updatePagination"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-if="index + 1 === 5"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import type {
|
|||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
|
||||
import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
|
||||
import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
|
||||
import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
|
||||
|
|
@ -36,7 +37,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
|||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array },
|
||||
updatePagination: {
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
|
@ -70,11 +71,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posPath",
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "posPath",
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -119,7 +120,7 @@ const visibleColumns = ref<string[]>([
|
|||
"no",
|
||||
"posNo",
|
||||
"fullName",
|
||||
"posPath",
|
||||
"position",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
"amount",
|
||||
|
|
@ -127,10 +128,15 @@ const visibleColumns = ref<string[]>([
|
|||
]);
|
||||
|
||||
/** modal*/
|
||||
const modalDialogAddPerson = ref<boolean>(false);
|
||||
const modalDialogForm = ref<boolean>(false);
|
||||
const modalDialogMoveGroup = ref<boolean>(false);
|
||||
const modalDialogMoveLeve = ref<boolean>(false);
|
||||
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
||||
const profileId = ref<string>("");
|
||||
const amount = ref<number>(0);
|
||||
function onClickEdit(id: string, amountSalary: number) {
|
||||
|
|
@ -156,7 +162,7 @@ function onClickDelete(id: string) {
|
|||
.delete(config.API.salaryListPeriodProfileById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.updatePagination?.();
|
||||
props.fetchDataTable?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -168,7 +174,7 @@ function onClickDelete(id: string) {
|
|||
}
|
||||
|
||||
function updatePagePagination() {
|
||||
props.updatePagination?.();
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
|
|
@ -178,7 +184,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
|
|||
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
props.updatePagination?.();
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
|
|
@ -189,7 +195,7 @@ watch(
|
|||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
<q-btn flat round dense icon="add">
|
||||
<q-btn flat round dense icon="add" @click="onClickAddPerson">
|
||||
<q-tooltip>เพิ่ม </q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
|
|
@ -249,7 +255,9 @@ watch(
|
|||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posNo'">
|
||||
{{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
|
||||
|
|
@ -328,22 +336,27 @@ watch(
|
|||
></q-pagination>
|
||||
</d-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<DialogFormEdit
|
||||
v-model:modal="modalDialogForm"
|
||||
v-model:profileId="profileId"
|
||||
v-model:amount="amount"
|
||||
:fetchData="props.updatePagination"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveGroup
|
||||
v-model:modal="modalDialogMoveGroup"
|
||||
v-model:profileId="profileId"
|
||||
:group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
|
||||
:fetchData="props.updatePagination"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveLevel
|
||||
v-model:modal="modalDialogMoveLeve"
|
||||
v-model:profileId="profileId"
|
||||
:fetchData="props.updatePagination"
|
||||
:fetchData="props.fetchDataTable"
|
||||
:type="store.tabType"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ 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/SalaryLists//DialogAddPerson.vue";
|
||||
import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
|
||||
import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
|
||||
import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
|
||||
|
|
@ -127,7 +128,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
|||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array },
|
||||
updatePagination: {
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
},
|
||||
maxPage: {
|
||||
|
|
@ -136,6 +137,7 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
/** modal*/
|
||||
const modalDialogAddPerson = ref<boolean>(false);
|
||||
const modalDialogForm = ref<boolean>(false);
|
||||
const modalDialogMoveGroup = ref<boolean>(false);
|
||||
const modalDialogMoveLeve = ref<boolean>(false);
|
||||
|
|
@ -148,6 +150,9 @@ function onClickDelete() {
|
|||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
});
|
||||
}
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
||||
function onClickEdit(id: string, amountSalary: number) {
|
||||
profileId.value = id;
|
||||
|
|
@ -166,7 +171,7 @@ function onClickMoveLevel(id: string) {
|
|||
}
|
||||
|
||||
function updatePagePagination() {
|
||||
props.updatePagination?.();
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
|
|
@ -176,7 +181,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
|
|||
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
props.updatePagination?.();
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
|
|
@ -187,7 +192,7 @@ watch(
|
|||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
<q-btn flat round dense icon="add">
|
||||
<q-btn flat round dense icon="add" @click="onClickAddPerson">
|
||||
<q-tooltip>เพิ่ม </q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
|
|
@ -246,7 +251,9 @@ watch(
|
|||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
|
|
@ -378,22 +385,27 @@ watch(
|
|||
</template>
|
||||
</d-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<DialogFormEdit
|
||||
v-model:modal="modalDialogForm"
|
||||
v-model:profileId="profileId"
|
||||
v-model:amount="amount"
|
||||
:fetchData="props.updatePagination"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveGroup
|
||||
v-model:modal="modalDialogMoveGroup"
|
||||
v-model:profileId="profileId"
|
||||
:group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
|
||||
:fetchData="props.updatePagination"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveLevel
|
||||
v-model:modal="modalDialogMoveLeve"
|
||||
v-model:profileId="profileId"
|
||||
:fetchData="props.updatePagination"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,4 +5,10 @@ interface DataFilter {
|
|||
type: string;
|
||||
}
|
||||
|
||||
export type { DataFilter };
|
||||
interface DataFilterPerson {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
export type { DataFilter, DataFilterPerson };
|
||||
|
|
|
|||
33
src/modules/13_salary/interface/request/SalaryList.ts
Normal file
33
src/modules/13_salary/interface/request/SalaryList.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
interface DataPersonReq {
|
||||
id: string;
|
||||
type: string;
|
||||
amount: number;
|
||||
child1: string;
|
||||
child1Id: string;
|
||||
child2: string;
|
||||
child2Id: string;
|
||||
child3: string | null;
|
||||
child3Id: string | null;
|
||||
child4: string | null;
|
||||
child4Id: string | null;
|
||||
citizenId: string;
|
||||
firstName: string;
|
||||
isDuration: boolean;
|
||||
isPunish: boolean;
|
||||
isResult: boolean;
|
||||
isRetired: boolean;
|
||||
isRetired2: boolean;
|
||||
lastName: string;
|
||||
orgShortName: string;
|
||||
posExecutive: string | null;
|
||||
posLevel: string;
|
||||
posMasterNo: number;
|
||||
posMasterNoPrefix: string;
|
||||
posMasterNoSuffix: string;
|
||||
posType: string;
|
||||
position: string;
|
||||
prefix: string;
|
||||
root: string;
|
||||
rootId: string;
|
||||
}
|
||||
export type { DataPersonReq };
|
||||
|
|
@ -11,4 +11,73 @@ interface DataPeriodQuota {
|
|||
chosen: number; //เลือกไปแล้ว
|
||||
remaining: number; //คงเหลือโควตาnumber
|
||||
}
|
||||
export type { DataPeriodLatest, DataPeriodQuota };
|
||||
|
||||
interface DataRound {
|
||||
effectiveDate: string;
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
period: string;
|
||||
revisionId: string;
|
||||
status: string;
|
||||
year: number;
|
||||
}
|
||||
|
||||
interface DataAgency {
|
||||
ancestorDNA: string;
|
||||
createdAt: string;
|
||||
createdFullName: string;
|
||||
createdUserId: string;
|
||||
id: string;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdateUserId: string;
|
||||
lastUpdatedAt: string;
|
||||
orgChild1s: any[];
|
||||
orgRevision: any[];
|
||||
orgRevisionId: string;
|
||||
orgRootCode: string;
|
||||
orgRootFax: string;
|
||||
orgRootName: string;
|
||||
orgRootOrder: number;
|
||||
orgRootPhoneEx: string;
|
||||
orgRootPhoneIn: string;
|
||||
orgRootRank: string;
|
||||
orgRootShortName: string;
|
||||
}
|
||||
|
||||
interface DataPerson {
|
||||
amount: number;
|
||||
child1: string;
|
||||
child1Id: string;
|
||||
child2: string;
|
||||
child2Id: string;
|
||||
child3: string | null;
|
||||
child3Id: string | null;
|
||||
child4: string | null;
|
||||
child4Id: string | null;
|
||||
citizenId: string;
|
||||
firstName: string;
|
||||
isDuration: boolean;
|
||||
isPunish: boolean;
|
||||
isResult: boolean;
|
||||
isRetired: boolean;
|
||||
isRetired2: boolean;
|
||||
lastName: string;
|
||||
orgShortName: string;
|
||||
posExecutive: string | null;
|
||||
posLevel: string;
|
||||
posMasterNo: number;
|
||||
posMasterNoPrefix: string;
|
||||
posMasterNoSuffix: string;
|
||||
posType: string;
|
||||
position: string;
|
||||
prefix: string;
|
||||
root: string;
|
||||
rootId: string;
|
||||
}
|
||||
export type {
|
||||
DataPeriodLatest,
|
||||
DataPeriodQuota,
|
||||
DataRound,
|
||||
DataAgency,
|
||||
DataPerson,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,42 +1,51 @@
|
|||
<script setup lang="ts">
|
||||
import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
|
||||
import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
|
||||
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
DataOption,
|
||||
DataOptionShort,
|
||||
} from "@/modules/13_salary/interface/index/Main";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
import type {
|
||||
DataRound,
|
||||
DataAgency,
|
||||
DataPeriodLatest,
|
||||
} from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
||||
|
||||
/** use*/
|
||||
const store = useSalaryListSDataStore();
|
||||
const $q = useQuasar();
|
||||
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
||||
|
||||
/** ตัวแปร*/
|
||||
const roundFilter = ref<any>();
|
||||
const roundOptions = ref<DataOptionShort[]>([]);
|
||||
const agencyFilter = ref<string>("");
|
||||
const agencyOptions = ref<DataOption[]>();
|
||||
const snapFilter = ref<string>("");
|
||||
const snapOptions = ref<DataOption[]>();
|
||||
// const tabMain = ref<string>("first_snapshot");
|
||||
const periodLatest = ref<DataPeriodLatest>();
|
||||
|
||||
const isLoad = ref<boolean>(false);
|
||||
|
||||
/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
|
||||
async function getRound() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.salaryPeriod() + `?page=1&pageSise=10&keyword=&year=0`)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.data;
|
||||
|
||||
roundOptions.value = await data.map((x: any) => ({
|
||||
roundOptions.value = await data.map((x: DataRound) => ({
|
||||
id: x.id,
|
||||
revisionId: x.revisionId,
|
||||
shortCode: x.period,
|
||||
|
|
@ -73,6 +82,7 @@ async function getRound() {
|
|||
});
|
||||
}
|
||||
|
||||
/** function เรียกรอบ*/
|
||||
function getSnap(code: string) {
|
||||
snapOptions.value =
|
||||
code === "OCT"
|
||||
|
|
@ -110,17 +120,19 @@ function getSnap(code: string) {
|
|||
snapFilter.value = snapOptions.value[0].id;
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลหน่ยวงาน
|
||||
* @param id revisionId
|
||||
*/
|
||||
async function getAgency(id: string) {
|
||||
await http
|
||||
.get(config.API.activeOrganizationRootById(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
agencyOptions.value = await data.map((x: any) => ({
|
||||
agencyOptions.value = await data.map((x: DataAgency) => ({
|
||||
id: x.id,
|
||||
name: x.orgRootName,
|
||||
}));
|
||||
|
||||
agencyFilter.value = store.rootId;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -128,13 +140,18 @@ async function getAgency(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลหน่ยวงานปจุบัน
|
||||
* @param id revisionId
|
||||
*/
|
||||
async function getAgencyPosition(id: string) {
|
||||
await http
|
||||
.get(config.API.keycloakPositionByid(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
const position = agencyOptions.value?.find(
|
||||
(e: any) => e.id === data.rootId
|
||||
(e: DataOption) => e.id === data.rootId
|
||||
);
|
||||
agencyFilter.value = position ? position.id : "";
|
||||
})
|
||||
|
|
@ -143,12 +160,19 @@ async function getAgencyPosition(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param rootId id หน่วยงาน
|
||||
* @param periodId id รอบการขึ้นเงินเดือน
|
||||
* @param snap id รอบ
|
||||
*/
|
||||
async function fetchSalalyPeriod(
|
||||
rootId: string,
|
||||
periodId: string,
|
||||
snap: string
|
||||
) {
|
||||
showLoader();
|
||||
isLoad.value = false;
|
||||
const body = {
|
||||
rootId: rootId,
|
||||
salaryPeriodId: periodId,
|
||||
|
|
@ -157,12 +181,9 @@ async function fetchSalalyPeriod(
|
|||
|
||||
await http
|
||||
.post(config.API.salaryListPeriodLatest, body)
|
||||
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
if (Object.values(data).includes(null)) {
|
||||
console.log("มีค่า null ในคุณสมบัติบางอย่าง");
|
||||
isLoad.value = false;
|
||||
} else {
|
||||
data && store.fetchPeriodLatest(data, store.tabGroup);
|
||||
|
|
@ -177,6 +198,8 @@ async function fetchSalalyPeriod(
|
|||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** function เปลี่ยนรอบการขั้นเงินเดือน*/
|
||||
async function onChangeRound() {
|
||||
await getSnap(roundFilter.value.shortCode);
|
||||
await getAgency(roundFilter.value.revisionId);
|
||||
|
|
@ -190,6 +213,7 @@ async function onChangeRound() {
|
|||
}
|
||||
}
|
||||
|
||||
/** function เปลี่ยนรอบ*/
|
||||
async function onChangeSnap() {
|
||||
if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
|
||||
await fetchSalalyPeriod(
|
||||
|
|
@ -200,6 +224,7 @@ async function onChangeSnap() {
|
|||
}
|
||||
}
|
||||
|
||||
/** function เปลี่ยนหน่วยงาน*/
|
||||
async function onChangeAgency() {
|
||||
if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
|
||||
await fetchSalalyPeriod(
|
||||
|
|
@ -210,8 +235,8 @@ async function onChangeAgency() {
|
|||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getRound();
|
||||
onMounted(async () => {
|
||||
await getRound();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue