ปรับ Code การลาลงเวลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
d150dedb81
commit
99419877c4
42 changed files with 123 additions and 148 deletions
492
src/modules/09_leave/components/01_RoundTime/DialogForm.vue
Normal file
492
src/modules/09_leave/components/01_RoundTime/DialogForm.vue
Normal file
|
|
@ -0,0 +1,492 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type {
|
||||
FormData,
|
||||
MyObjectRoundRef,
|
||||
} from "@/modules/09_leave/interface/response/round";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
const isRead = defineModel<boolean>("isRead", { required: true });
|
||||
/** propsData จาก RoundMain */
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
editCheck: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
fetchData: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
closeDialog: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
detailData: {
|
||||
type: Object,
|
||||
require: false,
|
||||
},
|
||||
});
|
||||
|
||||
/** Ref INPUT เวลา*/
|
||||
const amRef = ref<Object | null>(null);
|
||||
const amOutRef = ref<Object | null>(null);
|
||||
const pmRef = ref<Object | null>(null);
|
||||
const pmOutRef = ref<Object | null>(null);
|
||||
const objectRound: MyObjectRoundRef = {
|
||||
startTimeMorning: amRef,
|
||||
endTimeMorning: amOutRef,
|
||||
startTimeAfternoon: pmRef,
|
||||
endTimeAfternoon: pmOutRef,
|
||||
};
|
||||
|
||||
/** Form ข้อมูล */
|
||||
const formData = reactive<FormData>({
|
||||
startTimeMorning: "",
|
||||
endTimeMorning: "",
|
||||
startTimeAfternoon: "",
|
||||
endTimeAfternoon: "",
|
||||
description: "",
|
||||
isDefault: false,
|
||||
isActive: false,
|
||||
});
|
||||
|
||||
/**FunctionCheckbox แก้ไขสถานะ */
|
||||
function checkDefault() {
|
||||
if (formData.isDefault === true) {
|
||||
formData.isActive = true;
|
||||
}
|
||||
}
|
||||
|
||||
/** Function validateForm*/
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
/** Function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const dataId = props.detailData?.id;
|
||||
props.editCheck === "add" ? postRoundDuty() : putRoundDuty(dataId);
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
/** Function สร้างรอบการปฏิบัติงาน*/
|
||||
async function postRoundDuty() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.roundDutytime(), formData)
|
||||
.then(async () => {
|
||||
await props.fetchData?.();
|
||||
await props.closeDialog?.();
|
||||
success($q, "บันทึกข้อมูล");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** Functiom แก้ไข้รอบการปฏิบัติงาน*/
|
||||
async function putRoundDuty(id: string) {
|
||||
showLoader();
|
||||
const data = {
|
||||
description: formData.description,
|
||||
isDefault: formData.isDefault,
|
||||
isActive: formData.isActive,
|
||||
};
|
||||
await http
|
||||
.put(config.API.roundDutytimeByid(id), data)
|
||||
.then(async () => {
|
||||
await props.fetchData?.();
|
||||
await props.closeDialog?.();
|
||||
success($q, "บันทึกข้อมูล");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
//** Function ปิด Popup */
|
||||
function close() {
|
||||
props.closeDialog?.();
|
||||
isRead.value = false;
|
||||
}
|
||||
|
||||
/***/
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.editCheck === "add") {
|
||||
formData.startTimeMorning = "";
|
||||
formData.endTimeMorning = "";
|
||||
formData.startTimeAfternoon = "";
|
||||
formData.endTimeAfternoon = "";
|
||||
formData.description = "";
|
||||
formData.isDefault = false;
|
||||
formData.isActive = false;
|
||||
} else if (props.editCheck === "edit") {
|
||||
if (props.detailData) {
|
||||
formData.startTimeMorning = props.detailData.startTimeMorning;
|
||||
formData.endTimeMorning = props.detailData.endTimeMorning;
|
||||
formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
|
||||
formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
|
||||
formData.description = props.detailData.description;
|
||||
formData.isDefault = props.detailData.isDefault;
|
||||
formData.isActive = props.detailData.isActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</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 === 'add'
|
||||
? 'เพิ่มรอบการปฏิบัติงาน'
|
||||
: props.detailData
|
||||
? isRead
|
||||
? `รายละเอียดรอบ ${props.detailData.round}`
|
||||
: `แก้ไขรอบ ${props.detailData.round}`
|
||||
: ''
|
||||
"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-section style="max-height: 80vh" class="scroll q-pa-none">
|
||||
<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="amRef"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeMorning"
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||
(val:string) => {
|
||||
if (val && formData.endTimeMorning) {
|
||||
if (val > formData.endTimeMorning) {
|
||||
return 'ต้องน้อยกว่าเวลาออกงาน';
|
||||
}
|
||||
if (
|
||||
val >= formData.startTimeAfternoon &&
|
||||
val <= formData.endTimeAfternoon
|
||||
) {
|
||||
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
||||
}
|
||||
if (val === formData.endTimeAfternoon) {
|
||||
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="amOutRef"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
v-model="formData.endTimeMorning"
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||
(val:string) => {
|
||||
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="pmRef"
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||
(val:string) => {
|
||||
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"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeAfternoon"
|
||||
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="pmOutRef"
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||
(val:string) => {
|
||||
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"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
v-model="formData.endTimeAfternoon"
|
||||
lazy-rules
|
||||
borderless
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12 bg-white q-ma-md"
|
||||
outlined
|
||||
stack-label
|
||||
:readonly="isRead"
|
||||
v-model="formData.description"
|
||||
label="คำอธิบาย"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
></q-input>
|
||||
<div
|
||||
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
|
||||
>
|
||||
<div class="row items-center q-my-sm justify-between">
|
||||
<p class="q-ma-none">เวลา Default</p>
|
||||
<label
|
||||
:class="`toggle-control ${isRead ? 'no-pointer-events' : ''}`"
|
||||
>
|
||||
<input
|
||||
:readonly="isRead"
|
||||
type="checkbox"
|
||||
v-model="formData.isDefault"
|
||||
@change="checkDefault()"
|
||||
/>
|
||||
<span class="control"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
|
||||
>
|
||||
<div class="row items-center q-my-sm justify-between">
|
||||
<p class="q-ma-none">สถานะการใช้งาน</p>
|
||||
<label
|
||||
:class="`toggle-control ${isRead ? 'no-pointer-events' : ''}`"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="formData.isActive"
|
||||
:disabled="formData.isDefault"
|
||||
/>
|
||||
<span class="control"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator color="grey-4" v-if="!isRead" />
|
||||
<div class="q-pa-sm" v-if="!isRead">
|
||||
<div class="row justify-end">
|
||||
<q-btn
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "sass:math";
|
||||
.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: math.div($toggle-height, 2);
|
||||
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
|
||||
|
||||
.toggle-control {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue