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

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

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