ปรับ ฝึกอบรม/ดูงาน
This commit is contained in:
setthawutttty
parent
5c431fd4d7
commit
204a0460d1
3 changed files with 282 additions and 114 deletions
|
|
@ -97,99 +97,223 @@
|
|||
@update:modelValue="clickEditRow"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="startDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="clickEditRow"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
<div class="col-12">
|
||||
<q-card flat bordered class="q-px-sm q-pb-sm borderCard">
|
||||
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
|
||||
<q-radio
|
||||
v-model="isDate"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
label="ปี"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(startDate)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
:label="`${'วันเริ่มต้นการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="endDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
:min-date="minDate"
|
||||
:readonly="!edit"
|
||||
@update:modelValue="clickEditRow"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
:disable="!edit"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="isDate"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
label="วัน/เดือน/ปี"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(endDate)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
:label="`${'วันสิ้นสุดการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
:disable="!edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
v-if="isDate === 'false'"
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="startDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="clickEditRow"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="startDate + 543"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="startDate2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="clickEditRow"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(startDate2)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
:label="`${'วันเริ่มต้นการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
v-if="isDate === 'false'"
|
||||
menu-class-name="modalfix"
|
||||
v-model="endDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
:min-date="minDate"
|
||||
:readonly="!edit"
|
||||
@update:modelValue="clickEditRow"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="endDate + 543"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'ปีที่จบการศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
v-model="endDate2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
:min-date="minDate"
|
||||
:readonly="!edit"
|
||||
@update:modelValue="clickEditRow"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(endDate2)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
:label="`${'วันสิ้นสุดการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6"></div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6"></div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -208,13 +332,11 @@
|
|||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="yearly + 543"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
|
||||
:model-value="yearly == 0 ? null : Number(yearly + 543)"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -229,6 +351,13 @@
|
|||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-if="yearly && edit" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="yearly = 0"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
|
@ -316,7 +445,7 @@
|
|||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(dateOrder)"
|
||||
:model-value="date2Thai(dateOrder as Date)"
|
||||
:label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
|
||||
>
|
||||
<!-- :rules="[
|
||||
|
|
@ -336,6 +465,13 @@
|
|||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-if="dateOrder && edit" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="dateOrder = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
|
@ -424,7 +560,7 @@ const props = defineProps({
|
|||
const $q = useQuasar();
|
||||
const store = useProfileDataStore();
|
||||
const { profileData, changeProfileColumns } = store;
|
||||
|
||||
const isDate = ref<string | null>("true");
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||
mixin;
|
||||
|
|
@ -437,9 +573,11 @@ const place = ref<string>();
|
|||
const duration = ref<string>();
|
||||
const department = ref<string>();
|
||||
const numberOrder = ref<string>();
|
||||
const dateOrder = ref<Date>(new Date());
|
||||
const startDate = ref<Date>(new Date());
|
||||
const endDate = ref<Date>(new Date());
|
||||
const dateOrder = ref<Date | null>(new Date());
|
||||
const startDate = ref<number>(new Date().getFullYear());
|
||||
const startDate2 = ref<Date>(new Date());
|
||||
const endDate = ref<number>(new Date().getFullYear());
|
||||
const endDate2 = ref<Date>(new Date());
|
||||
const minDate = ref<Date>();
|
||||
const myForm = ref<any>(); //form data input
|
||||
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||
|
|
@ -767,8 +905,11 @@ const fetchData = async () => {
|
|||
department: e.department,
|
||||
numberOrder: e.numberOrder,
|
||||
dateOrder: e.dateOrder,
|
||||
startDate: new Date(e.startDate),
|
||||
endDate: new Date(e.endDate),
|
||||
isDate: e.isDate == null ? null : e.isDate.toString(),
|
||||
startDate: new Date(e.startDate).getFullYear(),
|
||||
endDate: new Date(e.endDate).getFullYear(),
|
||||
startDate2: new Date(e.startDate),
|
||||
endDate2: new Date(e.endDate),
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: new Date(e.createdAt),
|
||||
});
|
||||
|
|
@ -819,6 +960,8 @@ const getData = () => {
|
|||
dateOrder.value = row.dateOrder;
|
||||
startDate.value = row.startDate;
|
||||
endDate.value = row.endDate;
|
||||
startDate2.value = row.startDate2;
|
||||
endDate2.value = row.endDate2;
|
||||
id.value = row.id;
|
||||
};
|
||||
|
||||
|
|
@ -886,8 +1029,14 @@ const saveData = async () => {
|
|||
department: department.value,
|
||||
numberOrder: numberOrder.value,
|
||||
dateOrder: dateOrder.value,
|
||||
startDate: dateToISO(startDate.value),
|
||||
endDate: dateToISO(endDate.value),
|
||||
startDate:
|
||||
isDate.value == "true"
|
||||
? dateToISO(startDate2.value)
|
||||
: new Date(`${startDate.value}-01-01`),
|
||||
endDate:
|
||||
isDate.value == "true"
|
||||
? dateToISO(endDate2.value)
|
||||
: new Date(`${endDate.value}-01-01`),
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
|
@ -918,8 +1067,15 @@ const editData = async () => {
|
|||
department: department.value,
|
||||
numberOrder: numberOrder.value,
|
||||
dateOrder: dateOrder.value,
|
||||
startDate: dateToISO(startDate.value),
|
||||
endDate: dateToISO(endDate.value),
|
||||
isDate: isDate.value == "true" ? true : false,
|
||||
startDate:
|
||||
isDate.value == "true"
|
||||
? dateToISO(startDate2.value)
|
||||
: new Date(`${startDate.value}-01-01`),
|
||||
endDate:
|
||||
isDate.value == "true"
|
||||
? dateToISO(endDate2.value)
|
||||
: new Date(`${endDate.value}-01-01`),
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
|
@ -1020,14 +1176,17 @@ const addData = () => {
|
|||
edit.value = true;
|
||||
name.value = "";
|
||||
topic.value = "";
|
||||
yearly.value = new Date().getFullYear();
|
||||
yearly.value = 0;
|
||||
place.value = "";
|
||||
duration.value = "";
|
||||
department.value = "";
|
||||
numberOrder.value = "";
|
||||
dateOrder.value = new Date();
|
||||
startDate.value = new Date();
|
||||
endDate.value = new Date();
|
||||
dateOrder.value = null;
|
||||
isDate.value = "true";
|
||||
startDate.value = new Date().getFullYear();
|
||||
endDate.value = new Date().getFullYear();
|
||||
startDate2.value = new Date();
|
||||
endDate2.value = new Date();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1083,8 +1242,11 @@ const clickHistory = async (row: RequestItemsObject) => {
|
|||
department: e.department,
|
||||
numberOrder: e.numberOrder,
|
||||
dateOrder: e.dateOrder,
|
||||
startDate: new Date(e.startDate),
|
||||
endDate: new Date(e.endDate),
|
||||
isDate: e.isDate,
|
||||
startDate: new Date(e.startDate).getFullYear(),
|
||||
endDate: new Date(e.endDate).getFullYear(),
|
||||
startDate2: new Date(e.startDate2),
|
||||
endDate2: new Date(e.endDate2),
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: new Date(e.createdAt),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,12 +10,15 @@ interface RequestItemsObject {
|
|||
topic: string;
|
||||
yearly: number;
|
||||
place: string;
|
||||
isDate: string | null;
|
||||
duration: string;
|
||||
department: string;
|
||||
numberOrder: string;
|
||||
dateOrder: Date;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
startDate: number;
|
||||
endDate: number;
|
||||
startDate2: Date;
|
||||
endDate2: Date;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,11 @@ interface ResponseObject {
|
|||
department: string;
|
||||
numberOrder: string;
|
||||
dateOrder: Date;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
isDate: string | null;
|
||||
startDate: number;
|
||||
endDate: number;
|
||||
startDate2: Date;
|
||||
endDate2: Date;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue