แก้ไข ui pop up อนุมัติคำขอ

This commit is contained in:
AnandaTon 2023-11-06 17:49:30 +07:00
parent 61026107cd
commit 288fad12e1
5 changed files with 80 additions and 79 deletions

View file

@ -16,8 +16,8 @@ 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 checkInStatusRef = ref<Object | null>(null);
const checkOutStatusRef = ref<Object | null>(null);
const formData = reactive<dataRowRound>({
startTimeMorning: "",
@ -25,13 +25,15 @@ const formData = reactive<dataRowRound>({
startTimeAfternoon: "",
endTimeAfternoon: "",
note: "",
checkInStatus: "",
checkOutStatus: "",
});
const objectRound: MyObjectRoundRef = {
startTimeMorning: startTimeMorningRef,
endTimeMorning: endTimeMorningRef,
startTimeAfternoon: startTimeAfternoonRef,
endTimeAfternoon: endTimeAfternoonRef,
checkInStatus: checkInStatusRef,
checkOutStatus: checkOutStatusRef,
};
function validateForm() {
@ -169,11 +171,6 @@ watch(
</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
@ -249,77 +246,46 @@ watch(
<div
class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
>
<p style="color: #06884d; font-size: 16px">ครงบาย</p>
<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"
<q-select
ref="checkInStatusRef"
for="checkInStatus"
emit-value
map-options
outlined
style="width: 140px"
/>
dense
v-model="SpecialTimeStore.checkInStatus"
:options="SpecialTimeStore.optionStatus"
option-value="id"
option-label="name"
label="สถานะ"
use-input
>
</q-select>
</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"
</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">
<q-select
ref="checkOutStatusRef"
for="checkOutStatus"
emit-value
map-options
outlined
style="width: 140px"
/>
dense
v-model="SpecialTimeStore.checkOutStatus"
:options="SpecialTimeStore.optionStatus"
option-value="id"
option-label="name"
label="สถานะ"
use-input
>
</q-select>
</div>
</div>
<q-input