วันที่ใหม่

This commit is contained in:
setthawutttty 2024-02-13 16:47:37 +07:00
parent f6352c8b81
commit fd117af90e
7 changed files with 1124 additions and 443 deletions

View file

@ -127,195 +127,252 @@
: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 v-if="isDate === 'false'">
<q-input
v-if="edit"
outlined
v-model="inputStartDate"
:label="`${'ปี เริ่มต้นการฝึกอบรม/ดูงาน'}`"
mask="####"
dense
hide-bottom-space
:error="dayChecked"
error-message="กรุณากรอก ปีเริ่มต้นการฝึกอบรม/ดูงาน"
/>
<datepicker
v-else
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="Number(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>
</div>
<div v-else>
<q-input
v-if="edit"
outlined
v-model="inputStartDate2"
label="วัน/เดือน/ปี เริ่มต้นการฝึกอบรม/ดูงาน"
mask="##/##/####"
dense
hide-bottom-space
:error="dayChecked2"
error-message="กรุณากรอก วัน/เดือน/ปี เริ่มต้นการฝึกอบรม/ดูงาน"
/>
<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)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(startDate2 as Date)"
: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>
</div>
</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 v-if="isDate === 'false'">
<q-input
v-if="edit"
outlined
v-model="inputEndDate"
:label="`${'ปี สิ้นสุดการฝึกอบรม/ดูงาน'}`"
mask="####"
dense
hide-bottom-space
:error="dayEndChecked"
error-message="กรุณากรอก ปีสิ้นสุดการฝึกอบรม/ดูงาน"
/>
<datepicker
v-else
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="Number(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>
</div>
<div v-else>
<q-input
v-if="edit"
outlined
v-model="inputEndDate2"
label="วัน/เดือน/ปี สิ้นสุดการฝึกอบรม/ดูงาน"
mask="##/##/####"
dense
hide-bottom-space
:error="dayEndChecked2"
error-message="กรุณากรอก วัน/เดือน/ปี สิ้นสุดการฝึกอบรม/ดูงาน"
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="endDate2"
: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)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(endDate2 as Date)"
: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>
</div>
</div>
</div>
</q-card>
@ -323,7 +380,16 @@
<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">
<q-input
v-if="edit"
outlined
v-model="yearlyInput"
label="ปีงบประมาณ"
mask="####"
dense
/>
<datepicker
v-else
menu-class-name="modalfix"
v-model="yearly"
:locale="'th'"
@ -333,9 +399,9 @@
:readonly="!edit"
@update:modelValue="clickEditRow"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year="{ year }">{{ year }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
parseInt(value)
}}</template>
<template #trigger>
<q-input
@ -430,7 +496,16 @@
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="dateOrderInput"
label="คำสั่งลง วัน/เดือน/ปี /หนังสืออนุมัติลงวันที่"
mask="##/##/####"
dense
/>
<datepicker
v-else
menu-class-name="modalfix"
v-model="dateOrder"
:locale="'th'"
@ -454,7 +529,7 @@
lazy-rules
:borderless="!edit"
:model-value="date2Thai(dateOrder as Date)"
:label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
:label="`${'คำสั่งลง วัน/เดือน/ปี /หนังสืออนุมัติลงวันที่'}`"
>
<!-- :rules="[
(val) =>
@ -565,12 +640,24 @@ const props = defineProps({
},
});
const inputStartDate = ref<string>("");
const inputEndDate = ref<string>("");
const inputStartDate2 = ref<string>("");
const inputEndDate2 = ref<string>("");
const yearlyInput = ref<string>("");
const dateOrderInput = ref<string>("");
const dayChecked = ref<boolean>(false);
const dayEndChecked = ref<boolean>(false);
const dayChecked2 = ref<boolean>(false);
const dayEndChecked2 = ref<boolean>(false);
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 } =
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,convertDate,convertDateDisplay } =
mixin;
const route = useRoute();
const id = ref<string>("");
@ -581,11 +668,11 @@ const place = ref<string>();
const duration = ref<string>();
const department = ref<string>();
const numberOrder = ref<string>();
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 dateOrder = ref<Date | null|string>(new Date());
const startDate = ref<Date | string | number>(new Date().getFullYear());
const startDate2 = ref<Date | string | null>(new Date());
const endDate = ref<Date | string | number>(new Date().getFullYear());
const endDate2 = ref<Date | string | null>(new Date());
const minDate = ref<Date>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); // dialog
@ -972,6 +1059,12 @@ const getData = () => {
startDate2.value = row.startDate2;
endDate2.value = row.endDate2;
id.value = row.id;
inputStartDate.value = (Number(row.startDate) + 543).toLocaleString();
inputEndDate.value = (Number(row.endDate) + 543).toLocaleString();
yearlyInput.value = (Number(row.yearly) + 543).toLocaleString();
inputStartDate2.value = convertDateDisplay(row.startDate2);
inputEndDate2.value = convertDateDisplay(row.endDate2);
dateOrderInput.value = row.dateOrder ? convertDateDisplay(row.dateOrder):'';
};
/**
@ -1009,13 +1102,37 @@ const clickAdd = async () => {
/**
* กดบนทกใน dialog
*/
const clickSave = async () => {
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
if (isDate.value == "false") {
dayChecked2.value = false;
dayEndChecked2.value = false;
if (inputStartDate.value == "") {
dayChecked.value = true;
} else if (inputEndDate.value === "") {
dayEndChecked.value = true;
} else {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
} else {
await saveData();
dayChecked.value = false;
dayEndChecked.value = false;
if (inputStartDate2.value === "") {
dayChecked2.value = true;
} else if (inputEndDate2.value === "") {
dayEndChecked2.value = true;
} else {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
}
}
});
@ -1041,11 +1158,11 @@ const saveData = async () => {
isDate: isDate.value == "true" ? true : false,
startDate:
isDate.value == "true"
? dateToISO(startDate2.value)
? dateToISO(startDate2.value as Date)
: new Date(`${startDate.value}-01-01`),
endDate:
isDate.value == "true"
? dateToISO(endDate2.value)
? dateToISO(endDate2.value as Date)
: new Date(`${endDate.value}-01-01`),
})
.then((res) => {
@ -1080,11 +1197,11 @@ const editData = async () => {
isDate: isDate.value == "true" ? true : false,
startDate:
isDate.value == "true"
? dateToISO(startDate2.value)
? dateToISO(startDate2.value as Date)
: new Date(`${startDate.value}-01-01`),
endDate:
isDate.value == "true"
? dateToISO(endDate2.value)
? dateToISO(endDate2.value as Date)
: new Date(`${endDate.value}-01-01`),
})
.then((res) => {
@ -1166,6 +1283,7 @@ const selectData = async (props: DataProps) => {
name.value = props.row.name;
topic.value = props.row.topic;
yearly.value = props.row.yearly;
console.log(typeof yearly.value)
place.value = props.row.place;
duration.value = props.row.duration;
department.value = props.row.department;
@ -1176,6 +1294,12 @@ const selectData = async (props: DataProps) => {
endDate.value = props.row.endDate;
startDate2.value = props.row.startDate2;
endDate2.value = props.row.endDate2;
inputStartDate.value = (Number(props.row.startDate) + 543).toLocaleString();
inputEndDate.value = (Number(props.row.endDate) + 543).toLocaleString();
yearlyInput.value = props.row.yearly !== 0 ? (Number(props.row.yearly) + 543).toLocaleString():'';
inputStartDate2.value = convertDateDisplay(props.row.startDate2);
inputEndDate2.value = convertDateDisplay(props.row.endDate2);
dateOrderInput.value = props.row.dateOrder ? convertDateDisplay(props.row.dateOrder):'';
id.value = props.row.id;
await checkRowPage();
};
@ -1200,6 +1324,12 @@ const addData = () => {
endDate.value = new Date().getFullYear();
startDate2.value = new Date();
endDate2.value = new Date();
inputStartDate2.value = "";
inputEndDate2.value = "";
inputStartDate.value = "";
inputEndDate.value = "";
yearlyInput.value = "";
dateOrderInput.value = "";
};
/**
@ -1295,6 +1425,77 @@ const getClass = (val: boolean) => {
"full-width cursor-pointer": !val,
};
};
watch(
() => inputStartDate2.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayChecked2.value = false;
startDate2.value = dateVal.value;
} else {
dayChecked.value = true;
inputStartDate2.value = "";
}
}
}
);
watch(
() => inputEndDate2.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayEndChecked2.value = false;
endDate2.value = dateVal.value;
} else {
dayEndChecked.value = true;
inputEndDate2.value = "";
}
}
}
);
watch(
() => dateOrderInput.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
dateOrder.value = dateVal.value;
}
}
);
watch(
() => inputStartDate.value,
(value: string) => {
if (value.length === 4) {
const dateVal = Number(value) - 543;
dayChecked.value = false;
startDate.value = dateVal;
}
}
);
watch(
() => inputEndDate.value,
(value: string) => {
if (value.length === 4) {
const dateVal = Number(value) - 543;
dayEndChecked.value = false;
endDate.value = dateVal;
}
}
);
watch(
() => yearlyInput.value,
(value: string) => {
if (value.length === 4) {
const dateVal = Number(value) - 543;
yearly.value = dateVal;
}
}
);
</script>
<style lang="scss">
.modalfix {