แก้ไข ui pop up อนุมัติคำขอ
This commit is contained in:
AnandaTon
parent
61026107cd
commit
288fad12e1
5 changed files with 80 additions and 79 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -8,5 +8,7 @@ interface ListData {
|
|||
startTimeAfternoon: string | null;
|
||||
endTimeAfternoon: string | null;
|
||||
status: string;
|
||||
checkInStatus: string;
|
||||
checkOutStatus: string;
|
||||
}
|
||||
export type { ListData };
|
||||
|
|
|
|||
|
|
@ -12,13 +12,15 @@ interface dataRowRound {
|
|||
endTimeMorning: string;
|
||||
startTimeAfternoon: string;
|
||||
endTimeAfternoon: string;
|
||||
checkInStatus: string;
|
||||
checkOutStatus: string;
|
||||
note: string;
|
||||
}
|
||||
interface MyObjectRoundRef {
|
||||
startTimeMorning: object | null;
|
||||
endTimeMorning: object | null;
|
||||
startTimeAfternoon: object | null;
|
||||
endTimeAfternoon: object | null;
|
||||
checkInStatus: object | null;
|
||||
checkOutStatus: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
export type { DataRows, dataRowRound, MyObjectRoundRef };
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { QTableProps } from "quasar";
|
|||
import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
|
||||
import type { ListData } from "@/modules/09_leave/interface/request/specialTime";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
|
|
@ -16,7 +17,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
let datalist: DataRows[] = data.map((e: ListData) => ({
|
||||
id: e.id,
|
||||
fullname: e.fullname,
|
||||
date: date2Thai(new Date(e.date)),
|
||||
date: date2Thai(new Date(e.date), false, true),
|
||||
dateFix: date2Thai(new Date(e.dateFix)),
|
||||
timeMorning:
|
||||
e.startTimeMorning == null
|
||||
|
|
@ -31,6 +32,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
startTimeAfternoon: e.startTimeAfternoon,
|
||||
endTimeAfternoon: e.endTimeAfternoon,
|
||||
status: e.status,
|
||||
checkInStatus: convertStatus(e.checkInStatus),
|
||||
checkOutStatus: convertStatus(e.checkOutStatus),
|
||||
}));
|
||||
rows.value = datalist;
|
||||
DataMainOrig.value = datalist;
|
||||
|
|
@ -43,6 +46,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
DataMainUpdate.value = DataMainOrig.value;
|
||||
}
|
||||
};
|
||||
const checkInStatus = ref<String>("ปกติ");
|
||||
const checkOutStatus = ref<String>("ปกติ");
|
||||
|
||||
//--------------|ฟิลเตอร์|--------------------------------------//
|
||||
const searchFilterTable = async (searchDate: any) => {
|
||||
|
|
@ -68,6 +73,11 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
rows.value = dataArr;
|
||||
}
|
||||
};
|
||||
const optionStatus = ref<DataOption[]>([
|
||||
{ id: "0", name: "ปกติ" },
|
||||
{ id: "1", name: "สาย" },
|
||||
{ id: "2", name: "ขาดราชการ" },
|
||||
]);
|
||||
|
||||
// const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
// switch (refData) {
|
||||
|
|
@ -150,6 +160,18 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
},
|
||||
]);
|
||||
|
||||
// convertSatatus
|
||||
function convertStatus(val: string) {
|
||||
switch (val) {
|
||||
case "normal":
|
||||
return "ปกติ";
|
||||
case "late":
|
||||
return "สาย";
|
||||
case "absent":
|
||||
return "ขาดราชการ";
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
fecthList,
|
||||
rows,
|
||||
|
|
@ -158,5 +180,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
DataMain,
|
||||
searchFilterTable,
|
||||
selectDate,
|
||||
checkInStatus,
|
||||
checkOutStatus,
|
||||
optionStatus,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -74,6 +74,8 @@ onMounted(async () => {
|
|||
startTimeAfternoon: "08:00",
|
||||
endTimeAfternoon: "12:00",
|
||||
status: "PENDING",
|
||||
checkInStatus: "normal",
|
||||
checkOutStatus: "late",
|
||||
},
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
|
|
@ -85,6 +87,8 @@ onMounted(async () => {
|
|||
startTimeAfternoon: null,
|
||||
endTimeAfternoon: null,
|
||||
status: "APPROVE",
|
||||
checkInStatus: "normal",
|
||||
checkOutStatus: "late",
|
||||
},
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
|
|
@ -96,6 +100,8 @@ onMounted(async () => {
|
|||
startTimeAfternoon: "13:00",
|
||||
endTimeAfternoon: "16:30",
|
||||
status: "REJECT",
|
||||
checkInStatus: "normal",
|
||||
checkOutStatus: "late",
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue