เพิ่ม ui pop up อนุมัติคำขอ
This commit is contained in:
AnandaTon
parent
e0b3f385a9
commit
4ab7c4abb2
4 changed files with 498 additions and 59 deletions
428
src/modules/09_leave/components/4_specialTime/DialogApprove.vue
Normal file
428
src/modules/09_leave/components/4_specialTime/DialogApprove.vue
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watchEffect, watch } from "vue";
|
||||
import type {
|
||||
dataRowRound,
|
||||
MyObjectRoundRef,
|
||||
} from "@/modules/09_leave/interface/response/specialTime";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
|
||||
|
||||
const SpecialTimeStore = useSpecialTimeStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, date2Thai } = mixin;
|
||||
const currentDate = ref<Date | null>(new Date());
|
||||
const startTimeMorningRef = ref<Object | null>(null);
|
||||
const endTimeMorningRef = ref<Object | null>(null);
|
||||
const startTimeAfternoonRef = ref<Object | null>(null);
|
||||
const endTimeAfternoonRef = ref<Object | null>(null);
|
||||
|
||||
const formData = reactive<dataRowRound>({
|
||||
startTimeMorning: "",
|
||||
endTimeMorning: "",
|
||||
startTimeAfternoon: "",
|
||||
endTimeAfternoon: "",
|
||||
note: "",
|
||||
});
|
||||
|
||||
const objectRound: MyObjectRoundRef = {
|
||||
startTimeMorning: startTimeMorningRef,
|
||||
endTimeMorning: endTimeMorningRef,
|
||||
startTimeAfternoon: startTimeAfternoonRef,
|
||||
endTimeAfternoon: endTimeAfternoonRef,
|
||||
};
|
||||
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in objectRound) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectRound, key)) {
|
||||
const property = objectRound[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
} else {
|
||||
console.log(hasError);
|
||||
}
|
||||
}
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
props.closeDialog?.();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
const props = defineProps({
|
||||
modal: { type: Boolean, default: "" },
|
||||
editCheck: { type: String, default: "" },
|
||||
date: { type: String, default: "" },
|
||||
dateFix: { type: String, default: "" },
|
||||
closeDialog: { type: Function, default: () => {} },
|
||||
detailData: Object,
|
||||
});
|
||||
|
||||
function close() {
|
||||
if (props.closeDialog) {
|
||||
props.closeDialog();
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.modal,
|
||||
(newDetailData, oldDetailData) => {
|
||||
if (props.editCheck === "APPROVE") {
|
||||
formData.startTimeMorning = "";
|
||||
formData.endTimeMorning = "";
|
||||
formData.startTimeAfternoon = "";
|
||||
formData.endTimeAfternoon = "";
|
||||
formData.note = "";
|
||||
} else if (props.editCheck === "PENDING") {
|
||||
if (props.detailData) {
|
||||
formData.startTimeMorning = props.detailData.startTimeMorning;
|
||||
formData.endTimeMorning = props.detailData.endTimeMorning;
|
||||
formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
|
||||
formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
|
||||
formData.note = props.detailData.note;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 350px" class="bg-grey-11">
|
||||
<form @submit.prevent="validateForm">
|
||||
<DialogHeader
|
||||
:tittle="
|
||||
props.editCheck === 'PENDING'
|
||||
? 'อนุมัติคำขอ'
|
||||
: props.detailData
|
||||
? `REJECT ${props.detailData.round}`
|
||||
: ''
|
||||
"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-section style="max-height: 50vh" class="scroll q-pa-none">
|
||||
<div
|
||||
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
|
||||
>
|
||||
<div>
|
||||
<q-card class="my-card bg-primary text-white">
|
||||
<div>
|
||||
<q-card-section class="border-primary">
|
||||
<div class="text center">เวลาที่กรอก</div>
|
||||
</q-card-section>
|
||||
</div>
|
||||
<q-separator dark />
|
||||
<div>
|
||||
<q-card-actions
|
||||
class="my-card bg-white text-black border-primary"
|
||||
>
|
||||
{{ props.date }}
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
|
||||
>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="props.dateFix"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
disabled
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="selectDate"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
lazy-rules
|
||||
:model-value="props.dateFix"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่ขอแก้ไข'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer text-primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div
|
||||
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
|
||||
>
|
||||
<p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
|
||||
<div class="row justify-between q-my-sm items-start">
|
||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||
<q-input
|
||||
ref="startTimeMorningRef"
|
||||
class="inputgreen"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
outlined
|
||||
v-model="formData.startTimeMorning"
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||
(val) => {
|
||||
if (val && formData.endTimeMorning) {
|
||||
if (val > formData.endTimeMorning) {
|
||||
return 'ต้องน้อยกว่าเวลาออกงาน';
|
||||
}
|
||||
if (
|
||||
val >= formData.startTimeAfternoon &&
|
||||
val <= formData.endTimeAfternoon
|
||||
) {
|
||||
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
||||
}
|
||||
if (val === formData.endTimeMorning) {
|
||||
return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
]"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
</div>
|
||||
<q-separator inset />
|
||||
<div class="row items-start q-my-sm justify-between">
|
||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||
<q-input
|
||||
ref="endTimeMorningRef"
|
||||
class="inputgreen"
|
||||
dense
|
||||
v-model="formData.endTimeMorning"
|
||||
lazy-rules
|
||||
borderless
|
||||
outlined
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||
(val) => {
|
||||
if (val && formData.startTimeMorning) {
|
||||
if (val < formData.startTimeMorning) {
|
||||
return 'ต้องมากกว่าเวลาเข้างาน';
|
||||
}
|
||||
if (
|
||||
val >= formData.startTimeAfternoon &&
|
||||
val <= formData.endTimeAfternoon
|
||||
) {
|
||||
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
||||
}
|
||||
if (val === formData.startTimeMorning) {
|
||||
return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
]"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
|
||||
>
|
||||
<p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
|
||||
<div class="row justify-between q-my-sm items-start">
|
||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||
<q-input
|
||||
ref="startTimeAfternoonRef"
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||
(val) => {
|
||||
if (val && formData.endTimeAfternoon) {
|
||||
if (val > formData.endTimeAfternoon) {
|
||||
return 'ต้องน้อยกว่าเวลาออกงาน';
|
||||
}
|
||||
if (
|
||||
val >= formData.startTimeMorning &&
|
||||
val <= formData.endTimeMorning
|
||||
) {
|
||||
return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
|
||||
}
|
||||
if (val === formData.endTimeAfternoon) {
|
||||
return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย';
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
]"
|
||||
class="inputgreen"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeAfternoon"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
outlined
|
||||
style="width: 140px"
|
||||
/>
|
||||
</div>
|
||||
<q-separator inset />
|
||||
<div class="row items-start q-my-sm justify-between">
|
||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||
<q-input
|
||||
ref="endTimeAfternoonRef"
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||
(val) => {
|
||||
if (val && formData.startTimeAfternoon) {
|
||||
if (val < formData.startTimeAfternoon) {
|
||||
return 'ต้องมากกว่าเวลาเข้างาน';
|
||||
}
|
||||
if (
|
||||
val >= formData.startTimeMorning &&
|
||||
val <= formData.endTimeMorning
|
||||
) {
|
||||
return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
|
||||
}
|
||||
if (val === formData.startTimeAfternoon) {
|
||||
return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย';
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
]"
|
||||
class="inputgreen"
|
||||
dense
|
||||
v-model="formData.endTimeAfternoon"
|
||||
lazy-rules
|
||||
borderless
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
outlined
|
||||
style="width: 140px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12 bg-white q-ma-md"
|
||||
outlined
|
||||
stack-label
|
||||
v-model="formData.note"
|
||||
label="เหตุผล"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
></q-input>
|
||||
</q-card-section>
|
||||
<q-separator color="grey-4" />
|
||||
<div class="q-pa-xs">
|
||||
<div class="row justify-end">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
class="q-px-md"
|
||||
>
|
||||
<!-- icon="mdi-content-save-outline" -->
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mt {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.border_custom {
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
$toggle-background-color-on: #06884d;
|
||||
$toggle-background-color-off: darkgray;
|
||||
$toggle-control-color: white;
|
||||
$toggle-width: 40px;
|
||||
$toggle-height: 25px;
|
||||
$toggle-gutter: 3px;
|
||||
$toggle-radius: 50%;
|
||||
$toggle-control-speed: 0.15s;
|
||||
$toggle-control-ease: ease-in;
|
||||
|
||||
// These are our computed variables
|
||||
// change at your own risk.
|
||||
$toggle-radius: $toggle-height / 2;
|
||||
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
|
||||
|
||||
.toggle-control {
|
||||
display: block;
|
||||
position: relative;
|
||||
papproveing-left: $toggle-width;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
user-select: none;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
input:checked ~ .control {
|
||||
background-color: $toggle-background-color-on;
|
||||
|
||||
&:after {
|
||||
left: $toggle-width - $toggle-control-size - $toggle-gutter;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -15px;
|
||||
height: $toggle-height;
|
||||
width: $toggle-width;
|
||||
border-radius: $toggle-radius;
|
||||
background-color: $toggle-background-color-off;
|
||||
transition: background-color $toggle-control-speed $toggle-control-ease;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: $toggle-gutter;
|
||||
top: $toggle-gutter;
|
||||
width: $toggle-control-size;
|
||||
height: $toggle-control-size;
|
||||
border-radius: $toggle-radius;
|
||||
background: $toggle-control-color;
|
||||
transition: left $toggle-control-speed $toggle-control-ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,4 +7,18 @@ interface DataRows {
|
|||
timeAfternoon: string;
|
||||
status: string;
|
||||
}
|
||||
export type { DataRows };
|
||||
interface dataRowRound {
|
||||
startTimeMorning: string;
|
||||
endTimeMorning: string;
|
||||
startTimeAfternoon: string;
|
||||
endTimeAfternoon: string;
|
||||
note: string;
|
||||
}
|
||||
interface MyObjectRoundRef {
|
||||
startTimeMorning: object | null;
|
||||
endTimeMorning: object | null;
|
||||
startTimeAfternoon: object | null;
|
||||
endTimeAfternoon: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
export type { DataRows, dataRowRound, MyObjectRoundRef };
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
e.startTimeAfternoon == null
|
||||
? "-"
|
||||
: e.startTimeAfternoon + " - " + e.endTimeAfternoon,
|
||||
startTimeMorning: e.startTimeMorning,
|
||||
endTimeMorning: e.endTimeMorning,
|
||||
startTimeAfternoon: e.startTimeAfternoon,
|
||||
endTimeAfternoon: e.endTimeAfternoon,
|
||||
status: e.status,
|
||||
}));
|
||||
rows.value = datalist;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
|
||||
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
|
||||
import DialogReason from "@/components/Dialogs/PopupReason.vue";
|
||||
import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const dataSpecialTime = useSpecialTimeStore();
|
||||
|
|
@ -14,6 +15,9 @@ const mixin = useCounterMixin();
|
|||
const router = useRouter();
|
||||
const { hideLoader, monthYear2Thai } = mixin;
|
||||
const modalUnapprove = ref(false);
|
||||
const modalApprove = ref(false);
|
||||
const detailData = ref<any>();
|
||||
const editCheck = ref<string>("");
|
||||
const pagination = ref({
|
||||
// sortBy: "desc",
|
||||
descending: false,
|
||||
|
|
@ -22,14 +26,28 @@ const pagination = ref({
|
|||
});
|
||||
const dialogTitle = ref<string>("");
|
||||
const dialogDesc = ref<string>("");
|
||||
const name = ref("");
|
||||
const name = ref<string>("");
|
||||
const dateDialog = ref<string>("");
|
||||
const dateFixDialog = ref<string>("");
|
||||
const unapprove = async (fullname: string) => {
|
||||
dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
|
||||
name.value = fullname;
|
||||
modalUnapprove.value = true;
|
||||
};
|
||||
const closeReason = () => {
|
||||
function openModal(data: any, check: string, date: string, dateFix: string) {
|
||||
modalApprove.value = true;
|
||||
dateDialog.value = date;
|
||||
dateFixDialog.value = dateFix;
|
||||
editCheck.value = check;
|
||||
if (check === "PENDING") {
|
||||
detailData.value = data;
|
||||
}
|
||||
console.log(data);
|
||||
}
|
||||
const closeDialog = () => {
|
||||
modalUnapprove.value = false;
|
||||
modalApprove.value = false;
|
||||
editCheck.value = "PENDING";
|
||||
};
|
||||
const clickSave = () => {
|
||||
modalUnapprove.value = false;
|
||||
|
|
@ -221,77 +239,52 @@ const monthYearThai = (val: any) => {
|
|||
class="q-px-md q-ml-sm"
|
||||
dense
|
||||
unelevated
|
||||
@click="
|
||||
openModal(
|
||||
props.row,
|
||||
'PENDING',
|
||||
props.row.date,
|
||||
props.row.dateFix
|
||||
)
|
||||
"
|
||||
>อนุมัติ</q-btn
|
||||
>
|
||||
|
||||
<q-badge v-if="props.row.status == 'APPROVE'" rounded outline color="green" label="อนุมัติ" />
|
||||
<q-badge v-if="props.row.status == 'REJECT'" rounded outline color="red" label="ไม่อนุมัติ" />
|
||||
<q-badge
|
||||
v-if="props.row.status == 'APPROVE'"
|
||||
rounded
|
||||
outline
|
||||
color="green"
|
||||
label="อนุมัติ"
|
||||
/>
|
||||
<q-badge
|
||||
v-if="props.row.status == 'REJECT'"
|
||||
rounded
|
||||
outline
|
||||
color="red"
|
||||
label="ไม่อนุมัติ"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<!-- <Table
|
||||
style="max-height: 80vh"
|
||||
:rows="dataSpecialTime.rows"
|
||||
:columns="dataSpecialTime.columns"
|
||||
:filter="filter"
|
||||
:visible-columns="dataSpecialTime.visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="dataSpecialTime.visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:nornmalData="true"
|
||||
:paging="true"
|
||||
:titleText="''"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
<q-th auto-width />
|
||||
<q-th auto-width />
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.status == 'PENDING'"
|
||||
color="orange"
|
||||
class="q-px-md"
|
||||
dense
|
||||
unelevated
|
||||
@click="unapprove(props.row.fullname)"
|
||||
>ไม่อนุมัติ</q-btn
|
||||
>
|
||||
<span>{{ props.row.unapprove }}</span>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.status == 'PENDING'"
|
||||
color="primary"
|
||||
class="q-px-md"
|
||||
dense
|
||||
unelevated
|
||||
>อนุมัติ</q-btn
|
||||
>
|
||||
<span>{{ props.row.approve }}</span>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table> -->
|
||||
</div>
|
||||
</q-card>
|
||||
<DialogReason
|
||||
:modal="modalUnapprove"
|
||||
:title="dialogTitle"
|
||||
:desc="dialogDesc"
|
||||
:click-close="closeReason"
|
||||
:click-close="closeDialog"
|
||||
label="เหตุผล"
|
||||
:savaForm="clickSave"
|
||||
/>
|
||||
<DialogApprove
|
||||
:modal="modalApprove"
|
||||
:closeDialog="closeDialog"
|
||||
:date="dateDialog"
|
||||
:dateFix="dateFixDialog"
|
||||
:editCheck="editCheck"
|
||||
:detailData="detailData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue