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

ทะเบียนประวัติ(ใหม่): ผูก API บันทึกไม่ได้รับเงินเดือนฯ

Browse source
This commit is contained in:
puriphatt 2024-03-21 16:07:15 +07:00
parent 326de7badb
commit 9332691144
5 changed files with 276 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,15 @@ const registryNew = `${env.API_URI}/org/profile/`;
export default { export default {
registryNew, registryNew,
registryNewByProfileId: (profileId : string) => `${registryNew}${profileId}`, registryNewByProfileId: (profileId: string) => `${registryNew}${profileId}`,
// บันทึกวันที่ไม่ได้รับเงินเดือนฯ
profileNewNoPaid: `${registryNew}nopaid`,
profileNewNoPaidByProfileId: (profileId: string) =>
`${registryNew}nopaid/${profileId}`,
profileNewNoPaidById: (dataId: string) => `${registryNew}nopaid/${dataId}`,
profileNewNoPaidHisById: (dataId: string) =>
`${registryNew}nopaid/history/${dataId}`,
// เครื่องราชฯ // เครื่องราชฯ
profileNewInsign: `${registryNew}insignia`, profileNewInsign: `${registryNew}insignia`,
@ -19,14 +27,17 @@ export default {
profileNewHonorByProfileId: (profileId: string) => profileNewHonorByProfileId: (profileId: string) =>
`${registryNew}honor/${profileId}`, `${registryNew}honor/${profileId}`,
profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`, profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`,
profileNewHonorHisById: (dataId: string) => `${registryNew}honor/history/${dataId}`, profileNewHonorHisById: (dataId: string) =>
`${registryNew}honor/history/${dataId}`,
// ผลการประเมินการปฏิบัติราชการ // ผลการประเมินการปฏิบัติราชการ
profileNewAssessments: `${registryNew}assessments`, profileNewAssessments: `${registryNew}assessments`,
profileNewAssessmentsByProfileId: (profileId: string) => profileNewAssessmentsByProfileId: (profileId: string) =>
`${registryNew}assessments/${profileId}`, `${registryNew}assessments/${profileId}`,
profileNewAssessmentsById: (dataId: string) => `${registryNew}assessments/${dataId}`, profileNewAssessmentsById: (dataId: string) =>
profileNewAssessmentsHisById: (dataId: string) => `${registryNew}assessments/history/${dataId}`, `${registryNew}assessments/${dataId}`,
profileNewAssessmentsHisById: (dataId: string) =>
`${registryNew}assessments/history/${dataId}`,
// การฝึกอบรม // การฝึกอบรม
profileNewTraining: `${registryNew}training`, profileNewTraining: `${registryNew}training`,
@ -37,40 +48,40 @@ export default {
profileNewTrainingHisByTrainingId: (trainingId: string) => profileNewTrainingHisByTrainingId: (trainingId: string) =>
`${registryNew}training/history/${trainingId}`, `${registryNew}training/history/${trainingId}`,
// ประวัติการศึกษา // ประวัติการศึกษา
profileNewEducation: `${registryNew}educations`, profileNewEducation: `${registryNew}educations`,
profileNewEducationByProfileId: (profileId: string) => profileNewEducationByProfileId: (profileId: string) =>
`${registryNew}educations/${profileId}`, `${registryNew}educations/${profileId}`,
profileNewEducationByEducationId: (educationId: string) => profileNewEducationByEducationId: (educationId: string) =>
`${registryNew}educations/${educationId}`, `${registryNew}educations/${educationId}`,
profileNewEducationHisByEducationId: (educationsId: string) => profileNewEducationHisByEducationId: (educationsId: string) =>
`${registryNew}educations/history/${educationsId}`, `${registryNew}educations/history/${educationsId}`,
// ความสามารถพิเศษ // ความสามารถพิเศษ
profileNewAbility: `${registryNew}ability`, profileNewAbility: `${registryNew}ability`,
profileNewAbilityByProfileId: (profileId: string) => profileNewAbilityByProfileId: (profileId: string) =>
`${registryNew}ability/${profileId}`, `${registryNew}ability/${profileId}`,
profileNewAbilityByAbilityId: (abilityId: string) => profileNewAbilityByAbilityId: (abilityId: string) =>
`${registryNew}ability/${abilityId}`, `${registryNew}ability/${abilityId}`,
profileNewAbilityHisByAbilityId: (abilityId: string) => profileNewAbilityHisByAbilityId: (abilityId: string) =>
`${registryNew}ability/history/${abilityId}`, `${registryNew}ability/history/${abilityId}`,
// ใบอนุญาตประกอบวิชาชีพ // ใบอนุญาตประกอบวิชาชีพ
profileNewCertificate: `${registryNew}certificate`, profileNewCertificate: `${registryNew}certificate`,
profileNewCertificateByProfileId: (profileId: string) => profileNewCertificateByProfileId: (profileId: string) =>
`${registryNew}certificate/${profileId}`, `${registryNew}certificate/${profileId}`,
profileNewCertificateByCertificateId: (certificateId: string) => profileNewCertificateByCertificateId: (certificateId: string) =>
`${registryNew}certificate/${certificateId}`, `${registryNew}certificate/${certificateId}`,
profileNewCertificateHisByCertificateId: (certificateId: string) => profileNewCertificateHisByCertificateId: (certificateId: string) =>
`${registryNew}certificate/history/${certificateId}`, `${registryNew}certificate/history/${certificateId}`,
// ข้อมูลอื่นๆ // ข้อมูลอื่นๆ
profileNewOther: `${registryNew}other`, profileNewOther: `${registryNew}other`,
profileNewOtherByProfileId: (profileId: string) => profileNewOtherByProfileId: (profileId: string) =>
`${registryNew}other/${profileId}`, `${registryNew}other/${profileId}`,
profileNewOtherById: (dataId: string) => `${registryNew}other/${dataId}`, profileNewOtherById: (dataId: string) => `${registryNew}other/${dataId}`,
profileNewOtherHisById: (dataId: string) => profileNewOtherHisById: (dataId: string) =>
`${registryNew}other/history/${dataId}`, `${registryNew}other/history/${dataId}`,
// ข้อมูลครอบครัว // ข้อมูลครอบครัว
profileNewFamily: `${registryNew}family`, profileNewFamily: `${registryNew}family`,

288
src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
View file

@ -1,19 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from "vue"; import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar"; import { useCounterMixin } from "@/stores/mixin";
import type { ObjectReceiveRef } from "@/modules/04_registryNew/interface/index/salary";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import DialogHisotory from "@/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue"; import DialogHisotory from "@/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
import { useCounterMixin } from "@/stores/mixin"; import type { QTableProps } from "quasar";
import type { RowList } from "@/modules/04_registryNew/interface/index/salary";
import type { RequestNoPaidObject } from "@/modules/04_registryNew/interface/request/Salary";
const $q = useQuasar(); const $q = useQuasar();
const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } = const route = useRoute();
useCounterMixin(); const {
date2Thai,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
dialogRemove,
} = useCounterMixin();
const id = ref<string>("");
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const modelView = ref<string>("table");
const modalDialog = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const rows = ref<RowList[]>([]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -23,6 +43,7 @@ const columns = ref<QTableProps["columns"]>([
field: "date", field: "date",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -68,6 +89,7 @@ const columns = ref<QTableProps["columns"]>([
field: "refCommandDate", field: "refCommandDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -79,115 +101,129 @@ const visibleColumns = ref<string[]>([
"refCommandNo", "refCommandNo",
"refCommandDate", "refCommandDate",
]); ]);
const rows = ref<any>([ const formData = reactive<RequestNoPaidObject>({
{
date: new Date(),
detail: "รายละเอีียด",
reference: "อ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
refCommandDate: new Date(),
},
{
date: new Date(),
detail: "รายละเอีียด",
reference: "อ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
refCommandDate: new Date(),
},
{
date: new Date(),
detail: "รายละเอีียด",
reference: "อ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
refCommandDate: new Date(),
},
{
date: new Date(),
detail: "รายละเอีียด",
reference: "อ้างอิง",
refCommandNo: "เลขที่คำสั่ง",
refCommandDate: new Date(),
},
]);
const formFilter = reactive({
page: 1,
pageSize: 10,
keyword: "",
});
const formData = reactive({
date: null, date: null,
reference: "", reference: "",
detail: "", detail: "",
refCommandNo: "", refCommandNo: "",
refCommandDate: null, refCommandDate: null,
}); });
const formFilter = reactive({
const dateRef = ref<Object | null>(null); page: 1,
const referenceRef = ref<Object | null>(null); pageSize: 10,
const detailRef = ref<Object | null>(null); keyword: "",
});
const ObjectRef: ObjectReceiveRef = {
date: dateRef,
reference: referenceRef,
detail: detailRef,
};
const modelView = ref<string>("table");
const maxPage = ref<number>(1); const maxPage = ref<number>(1);
const pagination = ref({ const pagination = ref({
page: formFilter.page, page: formFilter.page,
rowsPerPage: formFilter.pageSize, rowsPerPage: formFilter.pageSize,
}); });
const modalDialog = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
function onSubmit() { function onSubmit() {
const hasError = []; dialogConfirm($q, () => {
for (const key in ObjectRef) { isStatusEdit.value ? editData() : saveData();
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) { onClickCloseDialog();
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, () => {
onClickCloseDialog();
});
}
} }
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) { function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
isStatusEdit.value = StatusEdit; isStatusEdit.value = StatusEdit;
modalDialog.value = true; modalDialog.value = true;
id.value = StatusEdit ? data.id : "";
formData.date = StatusEdit ? data.date : null; formData.date = StatusEdit ? data.date : null;
formData.reference = StatusEdit ? data.reference : ""; formData.reference = StatusEdit ? data.reference : "";
formData.detail = StatusEdit ? data.detail : ""; formData.detail = StatusEdit ? data.detail : "";
formData.refCommandNo = StatusEdit ? data.refCommandNo : ""; formData.refCommandNo = StatusEdit ? data.refCommandNo : "";
formData.refCommandDate = StatusEdit ? data.refCommandDate : null; formData.refCommandDate = StatusEdit ? data.refCommandDate : null;
} }
function onClickCloseDialog() { function onClickCloseDialog() {
modalDialog.value = false; modalDialog.value = false;
isStatusEdit.value = false;
} }
const modalHistory = ref<boolean>(false); async function getData() {
function ocClikcHistory() { showLoader();
await http
.get(config.API.profileNewNoPaidByProfileId(profileId.value))
.then((res) => {
rows.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function saveData() {
showLoader();
await http
.post(config.API.profileNewNoPaid, {
...formData,
profileId: profileId.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
getData();
onClickCloseDialog();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function editData() {
showLoader();
await http
.patch(config.API.profileNewNoPaidById(id.value), {
...formData,
profileId: undefined,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
getData();
onClickCloseDialog();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
// async function deleteData(id: string) {
// showLoader();
// await http
// .delete(config.API.profileNewNoPaidById(id))
// .then((res) => {
// success($q, "ลบข้อมูลสำเร็จ");
// getData();
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
// }
function onClickHistory(rowId: string) {
id.value = rowId;
modalHistory.value = true; modalHistory.value = true;
} }
onMounted(() => {
getData();
});
</script> </script>
<template> <template>
<!-- <div class="row items-center q-gutter-sm">
<div class="toptitle text-dark row items-center q-py-xs">
บันทึกวันที่ไม่ได้รับเงินเดือนฯ
</div>
</div> -->
<q-toolbar style="padding: 0px" class="text-primary"> <q-toolbar style="padding: 0px" class="text-primary">
<q-btn flat round dense icon="add" @click="onClickOpenDialog()"> <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
<q-tooltip>เพิ่ม</q-tooltip> <q-tooltip>เพิ่ม</q-tooltip>
@ -223,6 +259,7 @@ function ocClikcHistory() {
/> />
<q-btn-toggle <q-btn-toggle
dense
v-model="modelView" v-model="modelView"
toggle-color="grey-4" toggle-color="grey-4"
class="no-shadow toggle-borderd" class="no-shadow toggle-borderd"
@ -261,6 +298,7 @@ function ocClikcHistory() {
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
:paging="true" :paging="true"
:filter="formFilter.keyword"
v-model:pagination="pagination" v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]" :rows-per-page-options="[20, 50, 100]"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
@ -276,20 +314,22 @@ function ocClikcHistory() {
</template> </template>
<template v-slot:body="props" v-if="modelView === 'table'"> <template v-slot:body="props" v-if="modelView === 'table'">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td <q-td v-for="col in props.cols" :key="col.id">
v-for="col in props.cols" <div>{{ col.value ? col.value : "-" }}</div>
:key="col.id"
@click.stop.prevent="onClickOpenDialog(true, props.row)"
>
<div v-if="col.name === 'date'">
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else-if="col.name === 'refCommandDate'">
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>{{ col.value ? col.value : "-" }}</div>
</q-td> </q-td>
<q-td auto-width> <q-td auto-width>
<q-btn
flat
dense
round
class="q-mr-xs"
size="14px"
color="primary"
icon="mdi-pencil-outline"
@click="onClickOpenDialog(true, props.row)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn <q-btn
color="info" color="info"
flat flat
@ -297,34 +337,47 @@ function ocClikcHistory() {
round round
size="14px" size="14px"
icon="mdi-history" icon="mdi-history"
@click.stop.prevent="ocClikcHistory" @click.stop.prevent="onClickHistory(props.row.id)"
> >
<q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip> <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
</q-btn> </q-btn>
<!-- <q-btn
flat
dense
round
size="14px"
color="red"
icon="mdi-delete"
@click="
dialogRemove($q, async () => await deleteData(props.row.id))
"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn> -->
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template v-slot:item="props" v-else> <template v-slot:item="props" v-else>
<div <div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition" class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-3 grid-style-transition"
> >
<q-card bordered> <q-card bordered>
<q-card-actions align="right"> <q-card-actions class="bg-grey-3" align="right">
<q-btn <q-btn
flat flat
round round
color="edit" color="primary"
icon="edit" icon="mdi-pencil-outline"
@click.stop.prevent="onClickOpenDialog(true, props.row)" @click="onClickOpenDialog(true, props.row)"
> >
<q-tooltip>แก่ไขข้อมุล</q-tooltip> <q-tooltip>แก่ไขข้อมุล</q-tooltip>
</q-btn> </q-btn>
<q-btn <q-btn
flat flat
round round
color="primary" color="info"
icon="history" icon="history"
@click.stop.prevent="ocClikcHistory" @click="onClickHistory(props.row.id)"
> >
<q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip> <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
</q-btn> </q-btn>
@ -332,20 +385,17 @@ function ocClikcHistory() {
<q-separator /> <q-separator />
<q-list> <q-list>
<q-item <q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')" v-for="(col, index) in props.cols.filter(
(col) => col.name !== 'desc'
)"
:key="col.name" :key="col.name"
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
> >
<q-item-section> <q-item-section class="text-grey-6">
<q-item-label>{{ col.label }}</q-item-label> <q-item-label>{{ col.label }}</q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section class="text-dark">
<q-item-label caption v-if="col.name === 'date'"> <q-item-label>{{ col.value ? col.value : "-" }}</q-item-label>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label caption v-else-if="col.name === 'refCommandDate'">
{{ col.value ? date2Thai(col.value) : "-" }}</q-item-label
>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -368,12 +418,11 @@ function ocClikcHistory() {
<q-dialog v-model="modalDialog" persistent> <q-dialog v-model="modalDialog" persistent>
<q-card style="width: 600px"> <q-card style="width: 600px">
<form @submit.prevent.stop="onSubmit"> <q-form @submit.prevent greedy @validation-success="onSubmit">
<DialogHeader <DialogHeader
tittle="บันทึกวันที่ไม่ได้รับเงินเดือนฯ" tittle="บันทึกวันที่ไม่ได้รับเงินเดือนฯ"
:close="onClickCloseDialog" :close="onClickCloseDialog"
/> />
<!-- วันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็ม หรือวันที่มิได้ประจำปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก -->
<q-separator /> <q-separator />
<q-card-section class="q-pa-sm bg-grey-1"> <q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm"> <div class="row col-12 q-col-gutter-sm">
@ -399,6 +448,7 @@ function ocClikcHistory() {
outlined outlined
dense dense
borderless borderless
class="inputgreen"
:model-value="date2Thai(formData.date)" :model-value="date2Thai(formData.date)"
:rules="[ :rules="[
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`, (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
@ -427,6 +477,7 @@ function ocClikcHistory() {
lazy-rules lazy-rules
borderless borderless
v-model="formData.reference" v-model="formData.reference"
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]" :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`" :label="`${'เอกสารอ้างอิง'}`"
@ -441,6 +492,7 @@ function ocClikcHistory() {
lazy-rules lazy-rules
borderless borderless
v-model="formData.detail" v-model="formData.detail"
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]" :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space hide-bottom-space
:label="`${'รายละเอียด'}`" :label="`${'รายละเอียด'}`"
@ -453,6 +505,7 @@ function ocClikcHistory() {
lazy-rules lazy-rules
borderless borderless
v-model="formData.refCommandNo" v-model="formData.refCommandNo"
class="inputgreen"
hide-bottom-space hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" :label="`${'เลขที่คำสั่ง'}`"
> >
@ -478,6 +531,7 @@ function ocClikcHistory() {
outlined outlined
dense dense
borderless borderless
class="inputgreen"
:model-value=" :model-value="
formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date) formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
" "
@ -508,11 +562,11 @@ function ocClikcHistory() {
<q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
> >
</q-card-section> </q-card-section>
</form> </q-form>
</q-card> </q-card>
</q-dialog> </q-dialog>
<DialogHisotory v-model:modal="modalHistory" /> <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />
</template> </template>
<style scoped></style> <style scoped></style>

53
src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
View file

@ -1,22 +1,33 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from "vue"; import { ref, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { RowList } from "@/modules/04_registryNew/interface/index/salary";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true }); const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
const filter = ref<string>("");
const rows = ref<RowList[]>([]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
align: "left", align: "left",
label: "วัน เดือน ปี", label: "วัน เดือน ปี",
sortable: true, sortable: true,
field: "date", field: "detail",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -61,6 +72,7 @@ const columns = ref<QTableProps["columns"]>([
field: "refCommandDate", field: "refCommandDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -83,6 +95,7 @@ const columns = ref<QTableProps["columns"]>([
field: "createdAt", field: "createdAt",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -96,17 +109,38 @@ const visibleColumns = ref<string[]>([
"createdFullName", "createdFullName",
"createdAt", "createdAt",
]); ]);
const rows = ref<any>([]);
const pagination = ref({ const pagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
}); });
const filter = ref<string>(""); function getHistory() {
showLoader();
http
.get(config.API.profileNewNoPaidHisById(id.value))
.then((res) => {
rows.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
} }
watch(modal, (status) => {
if (status == true) {
getHistory();
filter.value = "";
} else {
filter.value = "";
}
});
</script> </script>
<template> <template>
<q-dialog v-model="modal" persistent full-width> <q-dialog v-model="modal" persistent full-width>
@ -162,20 +196,17 @@ function closeDialog() {
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="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"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span> <span class="text-weight-medium">{{ col.label }}</span>
</q-th> </q-th>
<q-th auto-width />
</q-tr> </q-tr>
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id"> <q-td v-for="col in props.cols" :key="col.name" :props="props">
<template> <div class="table_ellipsis">
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}
</template> </div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>

27
src/modules/04_registryNew/interface/index/salary.ts
View file

@ -1,20 +1,9 @@
interface ObjectSalaryRef { interface RowList {
date: object | null; id: string;
posNo: object | null; date: Date | null;
position: object | null; reference: string;
typePosition: object | null; detail: string;
levelPosition: object | null; refCommandNo: string;
salary: object | null; refCommandDate: Date | null;
doc: object | null;
[key: string]: any;
} }
export type { RowList };
interface ObjectReceiveRef {
date: object | null;
reference: object | null;
detail: object | null;
[key: string]: any;
}
export type { ObjectSalaryRef,ObjectReceiveRef };

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

@ -16,4 +16,13 @@ interface FormSalaryNew {
doc: string; doc: string;
} }
export type { FormSalaryNew }; interface RequestNoPaidObject {
profileId?: string;
date: Date | null;
detail: string;
reference: string;
refCommandDate: Date | null;
refCommandNo: string;
}
export type { FormSalaryNew, RequestNoPaidObject };