วันที่ใหม่

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

@ -137,198 +137,262 @@
</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)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(startDate2)"
: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 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"
: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)"
: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 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>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="finishDateInput"
label="วัน/เดือน/ปี / ที่สำเร็จการศึกษา"
mask="##/##/####"
dense
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="finishDate"
@ -349,7 +413,7 @@
dense
lazy-rules
:borderless="!edit"
:model-value="finishDate ? date2Thai(finishDate) : null"
:model-value="finishDate ? date2Thai(finishDate as Date) : null"
hide-bottom-space
:label="`${'วันที่สำเร็จการศึกษา'}`"
>
@ -615,6 +679,17 @@ import config from "@/app.config";
import type { EduOps } from "@/modules/04_registry/interface/index/Main";
import type { QTableProps } from "quasar";
const inputStartDate = ref<string>("");
const inputEndDate = ref<string>("");
const inputStartDate2 = ref<string>("");
const inputEndDate2 = ref<string>("");
const finishDateInput = ref<string>("");
const dayChecked = ref<boolean>(false);
const dayEndChecked = ref<boolean>(false);
const dayChecked2 = ref<boolean>(false);
const dayEndChecked2 = ref<boolean>(false);
const props = defineProps({
statusEdit: {
type: Boolean,
@ -627,8 +702,16 @@ const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
mixin;
const {
success,
dateToISO,
date2Thai,
messageError,
showLoader,
hideLoader,
convertDate,
convertDateDisplay,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const levelId = ref<string>();
@ -651,11 +734,11 @@ const durationYear = ref<number>(0);
const other = ref<string>();
const fundName = ref<string>();
const isDate = ref<string | null>("true");
const finishDate = ref<Date | null>(null);
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 finishDate = ref<Date | null|string>(null);
const startDate = ref<Date | string | number>(new Date().getFullYear());
const startDate2 = ref<Date | string | null>(new Date());
const endDate = ref<number | string | Date>(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
@ -1214,6 +1297,11 @@ const getData = () => {
startDate.value = row.startDate;
endDate.value = row.endDate;
startDate2.value = row.startDate2;
inputStartDate.value = (Number(row.startDate) + 543).toLocaleString();
inputEndDate.value = (Number(row.endDate) + 543).toLocaleString();
inputStartDate2.value = convertDateDisplay(row.startDate2);
inputEndDate2.value = convertDateDisplay(row.endDate2);
finishDateInput.value = row.finishDate ? convertDateDisplay(row.finishDate):'-';
endDate2.value = row.endDate2;
id.value = row.id;
};
@ -1256,10 +1344,34 @@ const clickAdd = 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();
}
}
}
}
});
@ -1293,14 +1405,14 @@ const saveData = async () => {
other: other.value,
fundName: fundName.value,
isDate: isDate.value == "true" ? true : false,
finishDate: finishDate.value ? dateToISO(finishDate.value) : null,
finishDate: finishDate.value ? dateToISO(finishDate.value as Date) : null,
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) => {
@ -1343,14 +1455,14 @@ const editData = async () => {
other: other.value,
fundName: fundName.value,
isDate: isDate.value == "true" ? true : false,
finishDate: finishDate.value ? dateToISO(finishDate.value) : null,
finishDate: finishDate.value ? dateToISO(finishDate.value as Date) : null,
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) => {
@ -1424,6 +1536,7 @@ const clickClose = async () => {
* @param _props props ใน row เลอก
*/
const selectData = async (_props: DataProps) => {
console.log(_props)
modalEdit.value = true;
modal.value = true;
edit.value = false;
@ -1447,6 +1560,11 @@ const selectData = async (_props: DataProps) => {
startDate2.value = _props.row.startDate2;
endDate2.value = _props.row.endDate2;
id.value = _props.row.id;
inputStartDate.value = (Number(_props.row.startDate) + 543).toLocaleString();
inputEndDate.value = (Number(_props.row.endDate) + 543).toLocaleString();
inputStartDate2.value = convertDateDisplay(_props.row.startDate2);
inputEndDate2.value = convertDateDisplay(_props.row.endDate2);
finishDateInput.value = _props.row.finishDate ? convertDateDisplay(_props.row.finishDate):'-';
await checkRowPage();
};
@ -1474,6 +1592,11 @@ const addData = () => {
endDate.value = new Date().getFullYear();
startDate2.value = new Date();
endDate2.value = new Date();
inputStartDate2.value = "";
inputEndDate2.value = "";
inputStartDate.value = "";
inputEndDate.value = "";
finishDateInput.value = "";
};
/**
@ -1575,6 +1698,68 @@ 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(
() => 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(
() => finishDateInput.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
finishDate.value = dateVal.value;
}
}
);
</script>
<style lang="scss">
.modalfix {