hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ทะเบียนประวัติ => ตำแหน่งเงืนเดืน

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-27 13:51:34 +07:00
parent e5aad00fea
commit f89b3b97a9
4 changed files with 261 additions and 247 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/api/registry/api.registry.ts
View file

@ -2,6 +2,7 @@ import env from "../index";
const registryNew = `${env.API_URI}/org/profile/`;
const metadata = `${env.API_URI}/org/metadata/`;
const salaryNew = `${env.API_URI}/org/profile/salary`;
export default {
registryNew,
@ -115,30 +116,30 @@ export default {
profileNewDisciplineHisByDisciplineId: (disciplineId: string) =>
`${registryNew}discipline/history/${disciplineId}`,
// ปฏิบัติราชการพิเศษ
profileNewDuty: `${registryNew}duty`,
profileNewDutyByProfileId: (profileId: string) =>
`${registryNew}duty/${profileId}`,
profileNewDutyByDutyId: (dutyId: string) =>
`${registryNew}duty/${dutyId}`,
profileNewDutyHisByDutyId: (dutyId: string) =>
`${registryNew}duty/history/${dutyId}`,
// ปฏิบัติราชการพิเศษ
profileNewDuty: `${registryNew}duty`,
profileNewDutyByProfileId: (profileId: string) =>
`${registryNew}duty/${profileId}`,
profileNewDutyByDutyId: (dutyId: string) => `${registryNew}duty/${dutyId}`,
profileNewDutyHisByDutyId: (dutyId: string) =>
`${registryNew}duty/history/${dutyId}`,
//ข้อมูลราชการ
profileNewGovernment: () => `${registryNew}government`,
profileNewGovernmentById: (id: string) => `${registryNew}government/${id}`,
profileNewGovernmentHistory: (id: string) =>
`${registryNew}government/history/${id}`,
//ข้อมูลราชการ
profileNewGovernment:()=>`${registryNew}government`,
profileNewGovernmentById:(id:string)=>`${registryNew}government/${id}`,
profileNewGovernmentHistory:(id:string)=>`${registryNew}government/history/${id}`,
//การลา
profileNewLeave:()=>`${registryNew}leave`,
profileNewLeaveById:(id:string)=>`${registryNew}leave/${id}`,
profileNewLeaveHistory:(id:string)=>`${registryNew}leave/history/${id}`,
profileCheckDate:()=>`${env.API_URI}/leave/user/check`,
profileNewLeaveType:()=>`${env.API_URI}/leave/type`,
//การลา
profileNewLeave: () => `${registryNew}leave`,
profileNewLeaveById: (id: string) => `${registryNew}leave/${id}`,
profileNewLeaveHistory: (id: string) => `${registryNew}leave/history/${id}`,
profileCheckDate: () => `${env.API_URI}/leave/user/check`,
profileNewLeaveType: () => `${env.API_URI}/leave/type`,
/** ตำแหน่งเงินเดือน*/
profileSalaryNew: `${env.API_URI}/org/profileSalary`,
profileSalaryNewById: (id: string) =>
`${env.API_URI}/org/profileSalary/${id}`,
profileSalaryNew: `${salaryNew}`,
profileListSalaryNew: (id: string) => `${salaryNew}/${id}`,
profileListSalaryHistoryNew: (profileId: string) =>
`${salaryNew}/history/${profileId}`,
};

323
src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
View file

@ -6,7 +6,10 @@ import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
import type {
DataOption2,
DataOption,
} from "@/modules/04_registryNew/interface/index/Main";
import type { ObjectSalaryRef } from "@/modules/04_registryNew/interface/index/salary";
import type { FormSalaryNew } from "@/modules/04_registryNew/interface/request/Salary";
@ -40,8 +43,7 @@ const columns = ref<QTableProps["columns"]>([
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => date2Thai(v),
},
{
name: "amount",
@ -51,8 +53,7 @@ const columns = ref<QTableProps["columns"]>([
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => Number(v).toLocaleString(),
},
{
name: "positionSalaryAmount",
@ -62,8 +63,7 @@ const columns = ref<QTableProps["columns"]>([
field: "positionSalaryAmount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => Number(v).toLocaleString(),
},
{
name: "mouthSalaryAmount",
@ -73,8 +73,7 @@ const columns = ref<QTableProps["columns"]>([
field: "mouthSalaryAmount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => Number(v).toLocaleString(),
},
{
@ -85,8 +84,6 @@ const columns = ref<QTableProps["columns"]>([
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
@ -97,8 +94,6 @@ const columns = ref<QTableProps["columns"]>([
field: "postionTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevelName",
@ -108,20 +103,16 @@ const columns = ref<QTableProps["columns"]>([
field: "positionLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salaryRef",
name: "templateDoc",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "salaryRef",
field: "templateDoc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandNo",
@ -131,8 +122,6 @@ const columns = ref<QTableProps["columns"]>([
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<string[]>([
@ -143,7 +132,7 @@ const visibleColumns = ref<string[]>([
"posNo",
"postionTypeName",
"positionLevelName",
"salaryRef",
"templateDoc",
"refCommandNo",
]);
const formFilter = reactive({
@ -159,39 +148,39 @@ const pagination = ref({
});
const rows = ref<any>([
{
date: new Date(),
amount: 20000,
positionSalaryAmount: 20000,
mouthSalaryAmount: 20000,
posNo: "1",
postionTypeName: "คำแหน่งประเภท",
positionLevelName: "ระดับ",
salaryRef: "เอกสารอ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
},
{
date: new Date(),
amount: 20000,
positionSalaryAmount: 20000,
mouthSalaryAmount: 20000,
posNo: "1",
postionTypeName: "คำแหน่งประเภท",
positionLevelName: "ระดับ",
salaryRef: "เอกสารอ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
},
{
date: new Date(),
amount: 20000,
positionSalaryAmount: 20000,
mouthSalaryAmount: 20000,
posNo: "1",
postionTypeName: "คำแหน่งประเภท",
positionLevelName: "ระดับ",
salaryRef: "เอกสารอ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
},
// {
// date: new Date(),
// amount: 20000,
// positionSalaryAmount: 20000,
// mouthSalaryAmount: 20000,
// posNo: "1",
// postionTypeName: "คำแหน่งประเภท",
// positionLevelName: "ระดับ",
// salaryRef: "เอกสารอ้างอิง",
// refCommandNo: "เลขที่คำสั่ง",
// },
// {
// date: new Date(),
// amount: 20000,
// positionSalaryAmount: 20000,
// mouthSalaryAmount: 20000,
// posNo: "1",
// postionTypeName: "คำแหน่งประเภท",
// positionLevelName: "ระดับ",
// salaryRef: "เอกสารอ้างอิง",
// refCommandNo: "เลขที่คำสั่ง",
// },
// {
// date: new Date(),
// amount: 20000,
// positionSalaryAmount: 20000,
// mouthSalaryAmount: 20000,
// posNo: "1",
// postionTypeName: "คำแหน่งประเภท",
// positionLevelName: "ระดับ",
// salaryRef: "เอกสารอ้างอิง",
// refCommandNo: "เลขที่คำสั่ง",
// },
]);
const formDataSalary = reactive<FormSalaryNew>({
@ -199,11 +188,11 @@ const formDataSalary = reactive<FormSalaryNew>({
posNo: "",
templatePos: "",
position: "",
positionLineName: "",
typePosition: "",
levelPosition: "",
positionPathSideName: "",
positionExecutiveName: "",
positionLine: "",
positionPathSide: "",
positionType: "",
positionLevel: "",
positionExecutive: "",
salaryCompensation: null,
salary: null,
salaryPos: null,
@ -212,42 +201,25 @@ const formDataSalary = reactive<FormSalaryNew>({
doc: "",
});
/** ตัวแปร ref สำหรับแสดง validate */
const dateRef = ref<Object | null>(null);
const posNoRef = ref<Object | null>(null);
const positionRef = ref<Object | null>(null);
const typePositionRef = ref<Object | null>(null);
const levelPositionRef = ref<Object | null>(null);
const salaryRef = ref<Object | null>(null);
const docRef = ref<Object | null>(null);
const ObjectRef: ObjectSalaryRef = {
date: dateRef,
posNo: posNoRef,
position: positionRef,
typePosition: typePositionRef,
levelPosition: levelPositionRef,
salary: salaryRef,
doc: docRef,
};
const modalDialogSalary = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const salaryId = ref<string>("");
const dataLevel = ref<any[]>([]);
const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
const positionLineOptions = ref<DataOption2[]>(store.optionTemplatePos);
const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
const posTypeOptions = ref<DataOption[]>([]);
const posTypeOptionsMain = ref<DataOption[]>([]);
const posLevelOption = ref<DataOption[]>([]);
const posLevelOptionMain = ref<DataOption[]>([]);
const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
function fetchListSalary() {
showLoader();
http
.get(
config.API.profileSalaryNewById("59134ef9-9e62-41d0-aac5-339be727f2b1")
)
.get(config.API.profileListSalaryNew(profileId.value))
.then((res) => {
// console.log(res);
rows.value = res.data.result;
})
.catch((err) => {
@ -258,29 +230,58 @@ function fetchListSalary() {
});
}
function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
isStatusEdit.value = statusEdit;
modalDialogSalary.value = true;
function fetchType() {
http
.get(config.API.orgPosType)
.then((res) => {
dataLevel.value = res.data.result;
posTypeOptionsMain.value = res.data.result.map((e: any) => ({
id: e.id,
name: e.posTypeName,
}));
posTypeOptions.value = posTypeOptionsMain.value;
})
.catch((err) => {
messageError($q, err);
});
}
async function updateSelectType(val: string, status: boolean = false) {
const listLevel = await dataLevel.value.find((e: any) => e.id === val);
if (listLevel) {
posLevelOptionMain.value = listLevel.posLevels.map((e: any) => ({
id: e.id,
name: e.posLevelName,
}));
posLevelOption.value = posLevelOptionMain.value;
formDataSalary.positionLevel = !status ? "" : formDataSalary.positionLevel;
}
}
async function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
dataLevel.value.length === 0 && (await fetchType());
setTimeout(async () => {
statusEdit && (await updateSelectType(data.positionType, true));
isStatusEdit.value = statusEdit;
}, 500);
posLevelOptionMain.value = !statusEdit ? [] : posLevelOptionMain.value;
modalDialogSalary.value = true;
salaryId.value = data.id;
formDataSalary.date = statusEdit ? data.date : null;
formDataSalary.posNo = statusEdit ? data.posNo : "";
// formDataSalary.templatePos = statusEdit ? data.templatePos : "";
// formDataSalary.position = statusEdit ? data.position : "";
// formDataSalary.positionLineName = statusEdit ? data.positionLineName : "";
// formDataSalary.typePosition = statusEdit ? data.postionTypeName : "";
// formDataSalary.levelPosition = statusEdit ? data.levelPosition : "";
// formDataSalary.positionPathSideName = statusEdit
// ? data.positionPathSideName
// : "";
// formDataSalary.positionExecutiveName = statusEdit
// ? data.positionExecutiveName
// : "";
formDataSalary.templatePos = "";
formDataSalary.position = statusEdit ? data.position : "";
formDataSalary.positionLine = statusEdit ? data.positionLine : "";
formDataSalary.positionType = statusEdit ? data.positionType : "";
formDataSalary.positionLevel = statusEdit ? data.positionLevel : "";
formDataSalary.positionPathSide = statusEdit ? data.positionPathSide : "";
formDataSalary.positionExecutive = statusEdit ? data.positionExecutive : "";
formDataSalary.salaryCompensation = statusEdit ? data.mouthSalaryAmount : "";
formDataSalary.salary = statusEdit ? data.amount : "";
formDataSalary.salaryPos = statusEdit ? data.positionSalaryAmount : "";
// formDataSalary.refCommandNo = statusEdit ? data.refCommandNo : "";
// formDataSalary.templateDoc = statusEdit ? data.templateDoc : "";
formDataSalary.doc = statusEdit ? data.salaryRef : "";
formDataSalary.refCommandNo = statusEdit ? data.refCommandNo : "";
formDataSalary.templateDoc = "";
formDataSalary.doc = statusEdit ? data.templateDoc : "";
}
function onClickCloseDialog() {
@ -296,7 +297,7 @@ function filterSelector(val: any, update: Function, filtername: string) {
);
});
break;
case "positionLineName":
case "positionLine":
update(() => {
positionLineOptions.value = store.optionTemplatePos.filter(
(v: DataOption2) => v.name.indexOf(val) > -1
@ -305,15 +306,15 @@ function filterSelector(val: any, update: Function, filtername: string) {
break;
case "posType":
update(() => {
posTypeOptions.value = store.optionTemplatePos.filter(
(v: DataOption2) => v.name.indexOf(val) > -1
posTypeOptions.value = posTypeOptionsMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "posLevel":
update(() => {
posLevelOption.value = store.optionTemplatePos.filter(
(v: DataOption2) => v.name.indexOf(val) > -1
posLevelOption.value = posLevelOptionMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
@ -339,30 +340,46 @@ function updateDoc(val: string) {
}
function onSubmit() {
const hasError = [];
for (const key in ObjectRef) {
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
const property = ObjectRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm($q, () => {
submit();
});
}
dialogConfirm($q, () => {
submit();
});
}
async function submit() {
console.log(formDataSalary);
const formData = {
profileId: isStatusEdit.value ? undefined : profileId.value,
date: formDataSalary.date, // วันที่
posNo: formDataSalary.posNo, //เลขที่ตำแหน่ง
position: formDataSalary.position, //ตำแหน่ง
positionLine: formDataSalary.positionLine, //สายงาน
positionPathSide: formDataSalary.positionPathSide, // ด้าน/สาขา
positionExecutive: formDataSalary.positionExecutive, //ตำแหน่งทางการบริหาร
positionType: formDataSalary.positionType, // ประเภทตำแหน่ง
positionLevel: formDataSalary.positionLevel, // ระดับตำแหน่ง
amount:
typeof formDataSalary.salary === "number"
? formDataSalary.salary
: Number(formDataSalary?.salary?.replace(/,/g, "")), //เงินเดือนฐาน
positionSalaryAmount:
typeof formDataSalary.salaryPos === "number"
? formDataSalary.salaryPos
: Number(formDataSalary?.salaryPos?.replace(/,/g, "")), // เงินประจำตำแหน่ง
mouthSalaryAmount:
typeof formDataSalary.salaryCompensation === "number"
? formDataSalary.salaryCompensation
: Number(formDataSalary?.salaryCompensation?.replace(/,/g, "")), //เงินค่าตอบแทนรายเดือน
refCommandNo: formDataSalary.refCommandNo, // เลขที่คำสั่ง
templateDoc: formDataSalary.doc, // เอกสารอ้างอิง
};
console.log(formData);
try {
const url = isStatusEdit.value
? config.API.profileSalaryNewById("12312")
? config.API.profileListSalaryNew(salaryId.value)
: config.API.profileSalaryNew;
const method = isStatusEdit.value ? "put" : "post";
await http[method](url, formDataSalary);
const method = isStatusEdit.value ? "patch" : "post";
await http[method](url, formData);
fetchListSalary();
onClickCloseDialog();
success($q, "บันทึกข้อมูลสำเร็จ");
@ -374,7 +391,8 @@ async function submit() {
}
const modalHistory = ref<boolean>(false);
function ocClikcHistory() {
function onClikcHistory(id: string) {
salaryId.value = id;
modalHistory.value = true;
}
@ -396,7 +414,13 @@ onMounted(() => {
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
<q-icon v-if="formFilter.keyword == ''" name="search" />
<q-icon
v-else
name="clear"
class="cursor-pointer"
@click="formFilter.keyword = ''"
/>
</template>
</q-input>
@ -421,6 +445,7 @@ onMounted(() => {
flat
bordered
dense
:filter="formFilter.keyword"
:columns="columns"
:rows="rows"
:paging="true"
@ -471,20 +496,9 @@ onMounted(() => {
:key="col.id"
@click="onClickOpenDialog(true, props.row)"
>
<div v-if="col.name === 'date'">
{{ col.value ? date2Thai(col.value) : "-" }}
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
<div v-else-if="col.name === 'amount'">
{{ col.value ? col.value.toLocaleString() : "-" }}
</div>
<div v-else-if="col.name === 'positionSalaryAmount'">
{{ col.value ? col.value.toLocaleString() : "-" }}
</div>
<div v-else-if="col.name === 'mouthSalaryAmount'">
{{ col.value ? col.value.toLocaleString() : "-" }}
</div>
<div v-else>{{ col.value ? col.value : "-" }}</div>
</q-td>
<q-td auto-width>
<q-btn
@ -494,7 +508,7 @@ onMounted(() => {
round
size="14px"
icon="mdi-history"
@click="ocClikcHistory"
@click="onClikcHistory(props.row.id)"
>
<q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
</q-btn>
@ -517,7 +531,7 @@ onMounted(() => {
<q-dialog v-model="modalDialogSalary" persistent full-width>
<q-card>
<form @submit.prevent.stop="onSubmit">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="
isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
@ -542,7 +556,6 @@ onMounted(() => {
}}</template>
<template #trigger>
<q-input
ref="dateRef"
outlined
dense
borderless
@ -622,7 +635,7 @@ onMounted(() => {
dense
lazy-rules
borderless
v-model="formDataSalary.positionLineName"
v-model="formDataSalary.positionLine"
:label="`${'สายงาน'}`"
emit-value
map-options
@ -633,7 +646,7 @@ onMounted(() => {
use-input
input-debounce="0"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
)"
/>
</div>
@ -643,7 +656,7 @@ onMounted(() => {
outlined
dense
lazy-rules
v-model="formDataSalary.positionPathSideName"
v-model="formDataSalary.positionPathSide"
hide-bottom-space
:label="`${'ด้าน/สาขา'}`"
/>
@ -654,7 +667,7 @@ onMounted(() => {
dense
lazy-rules
borderless
v-model="formDataSalary.positionExecutiveName"
v-model="formDataSalary.positionExecutive"
hide-bottom-space
:label="`${'ตำแหน่งทางการบริหาร'}`"
>
@ -663,12 +676,12 @@ onMounted(() => {
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select
ref="typePositionRef"
ref="positionType Ref"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.typePosition"
v-model="formDataSalary.positionType"
:label="`${'ตำแหน่งประเภท'}`"
emit-value
map-options
@ -678,6 +691,7 @@ onMounted(() => {
hide-bottom-space
use-input
input-debounce="0"
@update:model-value="updateSelectType"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
@ -687,19 +701,19 @@ onMounted(() => {
<div class="col-xs-6 col-sm-6 col-md-4">
<q-select
ref="levelPositionRef"
ref="positionLevel Ref"
outlined
dense
lazy-rules
borderless
v-model="formDataSalary.levelPosition"
v-model="formDataSalary.positionLevel"
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
:label="`${'ระดับตำแหน่ง'}`"
emit-value
map-options
option-label="name"
:options="posLevelOption"
option-value="name"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
@ -730,6 +744,7 @@ onMounted(() => {
dense
outlined
v-model="formDataSalary.salaryPos"
:rules="[(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]"
label="เงินประจำตำแหน่ง"
mask="###,###,###,###"
reverse-fill-mask
@ -812,11 +827,11 @@ onMounted(() => {
<q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-section>
</form>
</q-form>
</q-card>
</q-dialog>
<DialogHistory v-model:modal="modalHistory" />
<DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
</template>
<style scoped></style>

124
src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
View file

@ -1,12 +1,27 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const {
date2Thai,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const salaryId = defineModel<string>("salaryId", { required: true });
const columns = ref<QTableProps["columns"]>([
{
@ -17,8 +32,7 @@ const columns = ref<QTableProps["columns"]>([
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => date2Thai(v),
},
{
name: "amount",
@ -28,8 +42,7 @@ const columns = ref<QTableProps["columns"]>([
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => Number(v).toLocaleString(),
},
{
name: "positionSalaryAmount",
@ -38,9 +51,8 @@ const columns = ref<QTableProps["columns"]>([
sortable: true,
field: "positionSalaryAmount",
headerStyle: "font-size: 14px",
format: (v) => Number(v).toLocaleString(),
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "mouthSalaryAmount",
@ -49,9 +61,8 @@ const columns = ref<QTableProps["columns"]>([
sortable: true,
field: "mouthSalaryAmount",
headerStyle: "font-size: 14px",
format: (v) => Number(v).toLocaleString(),
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "oc",
@ -61,8 +72,6 @@ const columns = ref<QTableProps["columns"]>([
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
@ -72,8 +81,6 @@ const columns = ref<QTableProps["columns"]>([
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posNo",
@ -83,8 +90,6 @@ const columns = ref<QTableProps["columns"]>([
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLine",
@ -94,8 +99,6 @@ const columns = ref<QTableProps["columns"]>([
field: "positionLine",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionPathSide",
@ -105,8 +108,6 @@ const columns = ref<QTableProps["columns"]>([
field: "positionPathSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionType",
@ -116,8 +117,6 @@ const columns = ref<QTableProps["columns"]>([
field: "positionType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
@ -127,8 +126,6 @@ const columns = ref<QTableProps["columns"]>([
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutive",
@ -138,8 +135,6 @@ const columns = ref<QTableProps["columns"]>([
field: "positionExecutive",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutiveSide",
@ -149,8 +144,6 @@ const columns = ref<QTableProps["columns"]>([
field: "positionExecutiveSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salaryClass",
@ -160,19 +153,15 @@ const columns = ref<QTableProps["columns"]>([
field: "salaryClass",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salaryRef",
name: "templateDoc",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "salaryRef",
field: "templateDoc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "refCommandNo",
@ -182,8 +171,6 @@ const columns = ref<QTableProps["columns"]>([
field: "refCommandNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
@ -193,8 +180,6 @@ const columns = ref<QTableProps["columns"]>([
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
@ -204,8 +189,7 @@ const columns = ref<QTableProps["columns"]>([
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => date2Thai(v),
},
]);
const visibleColumns = ref<string[]>([
@ -223,7 +207,7 @@ const visibleColumns = ref<string[]>([
"positionExecutive",
"positionExecutiveSide",
"salaryClass",
"salaryRef",
"templateDoc",
"refCommandNo",
"createdFullName",
"createdAt",
@ -234,11 +218,33 @@ const pagination = ref({
rowsPerPage: 10,
});
const filter = ref<string>("");
const keyword = ref<string>("");
function closeDialog() {
modal.value = false;
}
function fetchListHistory() {
showLoader();
http
.get(config.API.profileListSalaryHistoryNew(salaryId.value))
.then((res) => {
rows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
watch(
() => modal.value,
() => {
modal.value && fetchListHistory();
}
);
</script>
<template>
<q-dialog v-model="modal" persistent full-width>
@ -254,12 +260,18 @@ function closeDialog() {
<q-input
dense
outlined
v-model="filter"
v-model="keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
<q-icon v-if="keyword === ''" name="search" />
<q-icon
v-else
name="clear"
class="cursor-pointer"
@click="keyword = ''"
/>
</template>
</q-input>
@ -278,51 +290,37 @@ function closeDialog() {
style="min-width: 150px"
/>
</q-toolbar>
<d-table
ref="table"
row-key="id"
flat
bordered
dense
:filter="filter"
:filter="keyword"
:columns="columns"
:rows="rows"
:paging="true"
v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
:rows-per-page-options="[10, 20, 50, 100]"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th auto-width />
<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-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<template>
<q-td v-for="col in props.cols">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</template>
</div>
</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
></q-pagination>
</template> -->
</d-table>
</q-card-section>
</q-card>

16
src/modules/04_registryNew/interface/request/Salary.ts
View file

@ -3,14 +3,14 @@ interface FormSalaryNew {
posNo: string;
templatePos: string;
position: string;
positionLineName: string;
typePosition: string;
levelPosition: string;
positionPathSideName: string;
positionExecutiveName: string;
salary: number | null;
salaryPos: number | null;
salaryCompensation: number | null;
positionLine: string;
positionPathSide: string;
positionType: string;
positionLevel: string;
positionExecutive: string;
salary: number | string | null;
salaryPos: number | string | null;
salaryCompensation: number | string | null;
refCommandNo: string;
templateDoc: string;
doc: string;