การลา จำลอง
This commit is contained in:
setthawutttty
parent
c26efe6c21
commit
efcc232fec
5 changed files with 718 additions and 147 deletions
|
|
@ -187,6 +187,15 @@ const columnsResult = ref<QTableProps["columns"]>([
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "positionName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevelName",
|
||||
align: "left",
|
||||
|
|
@ -360,6 +369,7 @@ function searchData() {
|
|||
citizenId: "test1",
|
||||
name: "test1",
|
||||
posTypeName: "test1",
|
||||
positionName: "test1",
|
||||
posLevelName: "test1",
|
||||
},
|
||||
{
|
||||
|
|
@ -367,6 +377,7 @@ function searchData() {
|
|||
citizenId: "test2",
|
||||
name: "test2",
|
||||
posTypeName: "test2",
|
||||
positionName: "test2",
|
||||
posLevelName: "test2",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
263
src/modules/04_registry/components/DialogFormLeave.vue
Normal file
263
src/modules/04_registry/components/DialogFormLeave.vue
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
interface DetailData {
|
||||
id: string;
|
||||
sick: string;
|
||||
absence: string;
|
||||
late: string;
|
||||
government: string;
|
||||
study: string;
|
||||
year: number;
|
||||
}
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
|
||||
const myForm = ref<any>(); //form data input
|
||||
const checkValidate = ref<boolean>(false);
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const edit = defineModel<boolean>("edit", { required: true });
|
||||
const data = defineModel<Array<any>>("data", { required: true });
|
||||
|
||||
const clear = ref<boolean>(false);
|
||||
const editForm = ref<boolean>(false);
|
||||
const editForms = ref<boolean>(false);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
const formData = reactive<DetailData>({
|
||||
id: "",
|
||||
sick: "",
|
||||
absence: "",
|
||||
late: "",
|
||||
government: "",
|
||||
study: "",
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
const validateData = async () => {
|
||||
checkValidate.value = true;
|
||||
await myForm.value.validate().then((result: boolean) => {
|
||||
if (result == false) {
|
||||
checkValidate.value = false;
|
||||
} else saveForm();
|
||||
});
|
||||
};
|
||||
|
||||
function saveForm() {
|
||||
dialogConfirm($q, () => {
|
||||
console.log(formData);
|
||||
modal.value = false;
|
||||
});
|
||||
}
|
||||
function clearForm() {
|
||||
formData.sick = "";
|
||||
formData.absence = "";
|
||||
formData.late = "";
|
||||
formData.government = "";
|
||||
formData.study = "";
|
||||
editForm.value = false;
|
||||
editForms.value = false;
|
||||
clear.value = false;
|
||||
}
|
||||
|
||||
function clickDelete() {}
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
clearForm();
|
||||
if (edit.value == false) {
|
||||
clear.value = true
|
||||
const dataList: any = data.value;
|
||||
formData.id = dataList.id;
|
||||
formData.sick = dataList.sick == "-" ? "" : dataList.sick;
|
||||
formData.absence = dataList.absence == "-" ? "" : dataList.absence;
|
||||
formData.late = dataList.late == "-" ? "" : dataList.late;
|
||||
formData.government =
|
||||
dataList.government == "-" ? "" : dataList.government;
|
||||
formData.study = dataList.study == "-" ? "" : dataList.study;
|
||||
formData.year =
|
||||
dataList.year == "-" ? new Date().getFullYear() : dataList.year;
|
||||
editForm.value = true;
|
||||
console.log(dataList);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 30vw">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader :tittle="`การลา`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
:readonly="!edit && !editForms"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
|
||||
:class="inputEdit(isReadonly)"
|
||||
:outlined="edit || editForms"
|
||||
:borderless="!edit"
|
||||
:readonly="!edit && !editForms"
|
||||
:model-value="
|
||||
formData.year === 0 ? null : Number(formData.year) + 543
|
||||
"
|
||||
:label="`${'ปี'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-if="formData.year && clear == false " v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="formData.year = 0"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="formData.sick"
|
||||
label="ลาป่วย"
|
||||
dense
|
||||
:outlined="edit || editForms"
|
||||
:borderless="!edit"
|
||||
:readonly="!edit && !editForms"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="formData.absence"
|
||||
label="ลากิจและพักผ่อน"
|
||||
dense
|
||||
:outlined="edit || editForms"
|
||||
:borderless="!edit"
|
||||
:readonly="!edit && !editForms"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="formData.late"
|
||||
label="มาสาย"
|
||||
dense
|
||||
:outlined="edit || editForms"
|
||||
:borderless="!edit"
|
||||
:readonly="!edit && !editForms"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="formData.government"
|
||||
label="ขาดราชการ"
|
||||
dense
|
||||
:outlined="edit || editForms"
|
||||
:borderless="!edit"
|
||||
:readonly="!edit && !editForms"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="formData.study"
|
||||
label="ลาศึกษาต่อ"
|
||||
dense
|
||||
:outlined="edit || editForms"
|
||||
:borderless="!edit"
|
||||
:readonly="!edit && !editForms"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions class="bg-white text-teal">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="editForm == true"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click="clickDelete()"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="editForms == true"
|
||||
icon="mdi-undo"
|
||||
color="red"
|
||||
flat
|
||||
round
|
||||
@click="() => {editForms = false; clear = true;}"
|
||||
><q-tooltip>ยกเลิก</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="editForm == true && editForms == false"
|
||||
@click="() => {editForms = true ; clear = false;}"
|
||||
flat
|
||||
round
|
||||
icon="mdi-pencil-outline"
|
||||
color="primary"
|
||||
><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-btn
|
||||
v-if="edit || editForms"
|
||||
:label="`บันทึก`"
|
||||
color="public"
|
||||
@click="validateData()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
<DialogHeader tittle="การลา" :close="clickCloseLeave" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<!-- <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
|
|
@ -168,23 +168,6 @@
|
|||
@update:modelValue="clickEditRow"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col-xs-3 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(false)"
|
||||
:outlined="true"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
disable
|
||||
v-model="numUsedLeave"
|
||||
type="number"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'จำนวนวันที่ลามาแล้ว'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
|
|
@ -226,6 +209,112 @@
|
|||
@update:modelValue="clickEditRow"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:model-value="
|
||||
formData.year === 0 ? null : Number(formData.year) + 543
|
||||
"
|
||||
:label="`${'ปี'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-if="formData.year && edit" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="formData.year = 0"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
v-model="formData.sick"
|
||||
label="ลาป่วย"
|
||||
dense
|
||||
:outlined="edit"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
v-model="formData.absence"
|
||||
label="ลากิจและพักผ่อน"
|
||||
dense
|
||||
:outlined="edit"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
v-model="formData.late"
|
||||
label="มาสาย"
|
||||
dense
|
||||
:outlined="edit"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
v-model="formData.government"
|
||||
label="ขาดราชการ"
|
||||
dense
|
||||
:outlined="edit"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
v-model="formData.study"
|
||||
label="ลาศึกษาต่อ"
|
||||
dense
|
||||
:outlined="edit"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
|
@ -341,9 +430,18 @@
|
|||
</q-tr>
|
||||
</template>
|
||||
</HistoryTable>
|
||||
|
||||
<!-- <DialogFormLeave
|
||||
v-model:modal="modalAdd"
|
||||
v-model:edit="edit"
|
||||
v-model:data="formData"
|
||||
|
||||
/> -->
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import DialogFormLeave from "@/modules/04_registry/components/DialogFormLeave.vue";
|
||||
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
||||
|
|
@ -356,6 +454,7 @@ import type {
|
|||
RequestItemsObject,
|
||||
RequestItemsTotalObject,
|
||||
DataProps,
|
||||
DetailData,
|
||||
} from "@/modules/04_registry/interface/request/Leave";
|
||||
import type {
|
||||
ResponseObject,
|
||||
|
|
@ -381,6 +480,16 @@ const $q = useQuasar();
|
|||
const store = useProfileDataStore();
|
||||
const { profileData, changeProfileColumns } = store;
|
||||
|
||||
const formData = reactive<DetailData>({
|
||||
id: "",
|
||||
sick: "",
|
||||
absence: "",
|
||||
late: "",
|
||||
government: "",
|
||||
study: "",
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
|
|
@ -431,6 +540,7 @@ const id = ref<string>("");
|
|||
const myFormAdd = ref<any>(); //form data input
|
||||
const myForm = ref<any>(); //form data input
|
||||
const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||
const editForm = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||
const modal = ref<boolean>(false); //modal add detail
|
||||
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||
|
||||
|
|
@ -448,23 +558,130 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
|
|||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
const rows = ref<RequestItemsObject[]>([]);
|
||||
const rows = ref<DetailData[]>([]);
|
||||
const filterTotal = ref<string>("");
|
||||
const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
|
||||
const filter = ref<string>(""); //search data table
|
||||
const visibleColumns = ref<String[]>([]);
|
||||
profileData.leave.columns.length == 0
|
||||
? (visibleColumns.value = [
|
||||
"no",
|
||||
"typeLeave",
|
||||
"dateStartLeave",
|
||||
"numLeave",
|
||||
"sumLeave",
|
||||
"totalLeave",
|
||||
"status",
|
||||
"reason",
|
||||
])
|
||||
: (visibleColumns.value = profileData.leave.columns);
|
||||
|
||||
/**old */
|
||||
// const visibleColumns = ref<String[]>([]);
|
||||
// profileData.leave.columns.length == 0
|
||||
// ? (visibleColumns.value = [
|
||||
// "no",
|
||||
// "typeLeave",
|
||||
// "dateStartLeave",
|
||||
// "numLeave",
|
||||
// "sumLeave",
|
||||
// "totalLeave",
|
||||
// "status",
|
||||
// "reason",
|
||||
// ])
|
||||
// : (visibleColumns.value = profileData.leave.columns);
|
||||
|
||||
/** NEW */
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"year",
|
||||
"sick",
|
||||
"absence",
|
||||
"late",
|
||||
"government",
|
||||
"study",
|
||||
]);
|
||||
|
||||
/** old */
|
||||
// const columns = ref<QTableProps["columns"]>([
|
||||
// {
|
||||
// name: "no",
|
||||
// align: "left",
|
||||
// label: "ลำดับ",
|
||||
// sortable: false,
|
||||
// field: "no",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "typeLeave",
|
||||
// align: "left",
|
||||
// label: "ประเภทการลา",
|
||||
// sortable: true,
|
||||
// field: "typeLeave",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "dateStartLeave",
|
||||
// align: "left",
|
||||
// label: "วัน เดือน ปี ที่ลา",
|
||||
// sortable: true,
|
||||
// field: "dateStartLeave",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "numLeave",
|
||||
// align: "right",
|
||||
// label: "จำนวนวันลา",
|
||||
// sortable: true,
|
||||
// field: "numLeave",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "sumLeave",
|
||||
// align: "right",
|
||||
// label: "ลามาแล้ว",
|
||||
// sortable: true,
|
||||
// field: "sumLeave",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "totalLeave",
|
||||
// align: "right",
|
||||
// label: "รวมเป็น",
|
||||
// sortable: true,
|
||||
// field: "totalLeave",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "status",
|
||||
// align: "left",
|
||||
// label: "สถานะ",
|
||||
// sortable: true,
|
||||
// field: "status",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "reason",
|
||||
// align: "right",
|
||||
// label: "เหตุผล",
|
||||
// sortable: true,
|
||||
// field: "reason",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// ]);
|
||||
|
||||
/** NEW */
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -478,83 +695,73 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "typeLeave",
|
||||
name: "year",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
label: "ปี",
|
||||
sortable: true,
|
||||
field: "typeLeave",
|
||||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "dateStartLeave",
|
||||
name: "sick",
|
||||
align: "left",
|
||||
label: "วัน เดือน ปี ที่ลา",
|
||||
label: "ลาป่วย",
|
||||
sortable: true,
|
||||
field: "dateStartLeave",
|
||||
field: "sick",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "numLeave",
|
||||
align: "right",
|
||||
label: "จำนวนวันลา",
|
||||
sortable: true,
|
||||
field: "numLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "sumLeave",
|
||||
align: "right",
|
||||
label: "ลามาแล้ว",
|
||||
sortable: true,
|
||||
field: "sumLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "totalLeave",
|
||||
align: "right",
|
||||
label: "รวมเป็น",
|
||||
sortable: true,
|
||||
field: "totalLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
name: "absence",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
label: "ลากิจและพักผ่อน",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
field: "absence",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "reason",
|
||||
align: "right",
|
||||
label: "เหตุผล",
|
||||
name: "late",
|
||||
align: "left",
|
||||
label: "มาสาย",
|
||||
sortable: true,
|
||||
field: "reason",
|
||||
field: "late",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "government",
|
||||
align: "left",
|
||||
label: "ขาดราชการ",
|
||||
sortable: true,
|
||||
field: "government",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "study",
|
||||
align: "left",
|
||||
label: "ลาศึกษาต่อ",
|
||||
sortable: true,
|
||||
field: "study",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -723,27 +930,44 @@ const fetchData = async () => {
|
|||
await http
|
||||
.get(config.API.profileLeaveId(profileId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
data.map((e: ResponseObject) => {
|
||||
rows.value.push({
|
||||
id: e.id,
|
||||
typeLeave: e.typeLeave,
|
||||
dateStartLeave: new Date(e.dateStartLeave),
|
||||
dateEndLeave: new Date(e.dateEndLeave),
|
||||
numLeave: e.numLeave,
|
||||
sumLeave: e.sumLeave,
|
||||
totalLeave: e.totalLeave,
|
||||
status: e.status,
|
||||
reason: e.reason,
|
||||
typeLeaveId:
|
||||
e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
|
||||
? e.typeLeaveId
|
||||
: "",
|
||||
});
|
||||
});
|
||||
const data = [
|
||||
{
|
||||
id: "11",
|
||||
sick: "11",
|
||||
absence: "11",
|
||||
late: "11",
|
||||
government: "11",
|
||||
study: "11",
|
||||
year: new Date().getFullYear(),
|
||||
},
|
||||
{
|
||||
id: "22",
|
||||
sick: "22",
|
||||
absence: "22",
|
||||
late: "22",
|
||||
government: "22",
|
||||
study: "22",
|
||||
year: new Date().getFullYear(),
|
||||
},
|
||||
];
|
||||
|
||||
rows.value = data
|
||||
// const data = res.data.result;
|
||||
// data.map((e: DetailData) => {
|
||||
// rows.value.push({
|
||||
// id: e.id,
|
||||
// sick: e.sick ? e.sick : "-",
|
||||
// absence: e.absence ? e.absence : "-",
|
||||
// late: e.late ? e.late : "-",
|
||||
// government: e.government ? e.government : "-",
|
||||
// study: e.study ? e.study : "-",
|
||||
// year: e.year ? e.year : "-",
|
||||
|
||||
// });
|
||||
// });
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
store.isLoad++;
|
||||
|
|
@ -786,18 +1010,12 @@ const clickHistory = async (row: RequestItemsObject) => {
|
|||
data.map((e: ResponseObject) => {
|
||||
rowsHistory.value.push({
|
||||
id: e.id,
|
||||
typeLeave: e.typeLeave,
|
||||
dateStartLeave: new Date(e.dateStartLeave),
|
||||
dateEndLeave: new Date(e.dateEndLeave),
|
||||
numLeave: e.numLeave,
|
||||
sumLeave: e.sumLeave,
|
||||
totalLeave: e.totalLeave,
|
||||
status: e.status,
|
||||
reason: e.reason,
|
||||
typeLeaveId:
|
||||
e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
|
||||
? e.typeLeaveId
|
||||
: "",
|
||||
sick: e.sick ? e.sick : "-",
|
||||
absence: e.absence ? e.absence : "-",
|
||||
late: e.late ? e.late : "-",
|
||||
government: e.government ? e.government : "-",
|
||||
study: e.study ? e.study : "-",
|
||||
year: e.year ? e.year : "-",
|
||||
});
|
||||
});
|
||||
})
|
||||
|
|
@ -862,13 +1080,21 @@ const getData = () => {
|
|||
// agencyDay.value = row.agencyDay;
|
||||
// coupleDay.value = row.coupleDay;
|
||||
// therapyDay.value = row.therapyDay;
|
||||
id.value = row.id;
|
||||
typeLeave.value = row.typeLeaveId;
|
||||
statLeave.value = row.status;
|
||||
reason.value = row.reason;
|
||||
dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
|
||||
numLeave.value = row.numLeave;
|
||||
numUsedLeave.value = row.sumLeave;
|
||||
formData.id = row.id;
|
||||
formData.sick = row.sick;
|
||||
formData.absence = row.absence;
|
||||
formData.late = row.late;
|
||||
formData.government = row.government;
|
||||
formData.study = row.study;
|
||||
formData.year = row.year == "-" ? 0 : row.year;
|
||||
|
||||
// id.value = row.id;
|
||||
// typeLeave.value = row.typeLeaveId;
|
||||
// statLeave.value = row.status;
|
||||
// reason.value = row.reason;
|
||||
// dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
|
||||
// numLeave.value = row.numLeave;
|
||||
// numUsedLeave.value = row.sumLeave;
|
||||
};
|
||||
|
||||
// /**
|
||||
|
|
@ -904,6 +1130,7 @@ const clickAdd = async () => {
|
|||
};
|
||||
|
||||
const clickAddLeave = async () => {
|
||||
clearForm();
|
||||
editRow.value = false;
|
||||
edit.value = true;
|
||||
modalAdd.value = true;
|
||||
|
|
@ -1123,18 +1350,26 @@ const selectData = async (props: DataProps) => {
|
|||
// modal.value = true;
|
||||
modalAdd.value = true;
|
||||
edit.value = false;
|
||||
rowIndex.value = props.rowIndex;
|
||||
id.value = props.row.id;
|
||||
|
||||
typeLeave.value = props.row.typeLeaveId;
|
||||
statLeave.value = props.row.status;
|
||||
reason.value = props.row.reason;
|
||||
dateRange.value = [
|
||||
new Date(props.row.dateStartLeave),
|
||||
new Date(props.row.dateEndLeave),
|
||||
];
|
||||
numLeave.value = props.row.numLeave;
|
||||
numUsedLeave.value = props.row.sumLeave;
|
||||
rowIndex.value = props.rowIndex;
|
||||
formData.id = props.row.id;
|
||||
formData.sick = props.row.sick;
|
||||
formData.absence = props.row.absence;
|
||||
formData.late = props.row.late;
|
||||
formData.government = props.row.government;
|
||||
formData.study = props.row.study;
|
||||
formData.year = props.row.year == "-" ? 0 : props.row.year;
|
||||
|
||||
// id.value = props.row.id;
|
||||
// typeLeave.value = props.row.typeLeaveId;
|
||||
// statLeave.value = props.row.status;
|
||||
// reason.value = props.row.reason;
|
||||
// dateRange.value = [
|
||||
// new Date(props.row.dateStartLeave),
|
||||
// new Date(props.row.dateEndLeave),
|
||||
// ];
|
||||
// numLeave.value = props.row.numLeave;
|
||||
// numUsedLeave.value = props.row.sumLeave;
|
||||
await clickTotal();
|
||||
// if (rowsTotal.value.length > 0) {
|
||||
// let data: DataOptionLeave[] = [];
|
||||
|
|
@ -1156,6 +1391,7 @@ const selectData = async (props: DataProps) => {
|
|||
*/
|
||||
const addData = async () => {
|
||||
// modalEdit.value = false;
|
||||
|
||||
modal.value = true;
|
||||
// edit.value = true;
|
||||
await clickTotal();
|
||||
|
|
@ -1269,6 +1505,35 @@ const getClass = (val: boolean) => {
|
|||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
// function selectData(data:any){
|
||||
// console.log(data)
|
||||
// modalAdd.value = true
|
||||
// edit.value = false
|
||||
// editForm.value = true
|
||||
// formData.id = data.row.id
|
||||
// formData.sick = data.row.sick
|
||||
// formData.absence = data.row.absence
|
||||
// formData.late = data.row.late
|
||||
// formData.government = data.row.government
|
||||
// formData.study = data.row.study
|
||||
// formData.year = data.row.year
|
||||
// }
|
||||
|
||||
function clearForm() {
|
||||
formData.id = "";
|
||||
formData.sick = "";
|
||||
formData.absence = "";
|
||||
formData.late = "";
|
||||
formData.government = "";
|
||||
formData.study = "";
|
||||
formData.year = 0;
|
||||
}
|
||||
// watch(()=>modalAdd.value,()=>{
|
||||
// clearForm()
|
||||
// if(modalAdd.value == true){
|
||||
// }
|
||||
// })
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
|
|
|
|||
|
|
@ -3,18 +3,29 @@ interface DataProps {
|
|||
rowIndex: number;
|
||||
}
|
||||
|
||||
//ข้อมูล
|
||||
// interface RequestItemsObject {
|
||||
// id: string;
|
||||
// typeLeave: string;
|
||||
// dateStartLeave: Date;
|
||||
// dateEndLeave: Date;
|
||||
// numLeave: number;
|
||||
// sumLeave: number;
|
||||
// totalLeave: number;
|
||||
// status: string;
|
||||
// reason: string;
|
||||
// typeLeaveId: string;
|
||||
// }
|
||||
|
||||
//ข้อมูล
|
||||
interface RequestItemsObject {
|
||||
id: string;
|
||||
typeLeave: string;
|
||||
dateStartLeave: Date;
|
||||
dateEndLeave: Date;
|
||||
numLeave: number;
|
||||
sumLeave: number;
|
||||
totalLeave: number;
|
||||
status: string;
|
||||
reason: string;
|
||||
typeLeaveId: string;
|
||||
year: string|number;
|
||||
sick: string;
|
||||
absence: string;
|
||||
late: string;
|
||||
government: string;
|
||||
study: string;
|
||||
}
|
||||
|
||||
//ข้อมูล
|
||||
|
|
@ -39,4 +50,14 @@ interface Columns {
|
|||
};
|
||||
}
|
||||
|
||||
export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };
|
||||
interface DetailData {
|
||||
id: string;
|
||||
sick: string;
|
||||
absence: string;
|
||||
late: string;
|
||||
government: string;
|
||||
study: string;
|
||||
year: string|number;
|
||||
}
|
||||
|
||||
export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject,DetailData };
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
//ข้อมูล
|
||||
// interface ResponseObject {
|
||||
// id: string;
|
||||
// typeLeave: string;
|
||||
// dateStartLeave: Date;
|
||||
// dateEndLeave: Date;
|
||||
// numLeave: number;
|
||||
// sumLeave: number;
|
||||
// totalLeave: number;
|
||||
// status: string;
|
||||
// reason: string;
|
||||
// typeLeaveId: string;
|
||||
// }
|
||||
|
||||
interface ResponseObject {
|
||||
id: string;
|
||||
typeLeave: string;
|
||||
dateStartLeave: Date;
|
||||
dateEndLeave: Date;
|
||||
numLeave: number;
|
||||
sumLeave: number;
|
||||
totalLeave: number;
|
||||
status: string;
|
||||
reason: string;
|
||||
typeLeaveId: string;
|
||||
year: string|number;
|
||||
sick: string;
|
||||
absence: string;
|
||||
late: string;
|
||||
government: string;
|
||||
study: string;
|
||||
}
|
||||
|
||||
interface ResponseTotalObject {
|
||||
typeLeaveId: string;
|
||||
typeLeave: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue