วันที่ใหม่
This commit is contained in:
setthawutttty
parent
f6352c8b81
commit
fd117af90e
7 changed files with 1124 additions and 443 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,19 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="inputIssueDate"
|
||||
label="วัน/เดือน/ปี ที่ออกใบอนุญาต"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:error="dayChecked"
|
||||
error-message="กรุณากรอก วัน/เดือน/ปี ที่ออกใบอนุญาต"
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="issueDate"
|
||||
|
|
@ -139,7 +151,7 @@
|
|||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(issueDate)"
|
||||
:model-value="date2Thai(issueDate as Date)"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
|
||||
]"
|
||||
|
|
@ -163,7 +175,19 @@
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="inputExpireDate"
|
||||
label="วัน/เดือน/ปี ที่หมดอายุ"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:error="dayChecked2"
|
||||
error-message="กรุณากรอก วัน/เดือน/ปี ที่หมดอายุ"
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
v-model="expireDate"
|
||||
:locale="'th'"
|
||||
|
|
@ -185,7 +209,7 @@
|
|||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(expireDate)"
|
||||
:model-value="date2Thai(expireDate as Date)"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่หมดอายุ'}`"
|
||||
|
|
@ -276,6 +300,10 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const inputIssueDate = ref<string>("");
|
||||
const inputExpireDate = ref<string>("");
|
||||
const dayChecked = ref<boolean>(false);
|
||||
const dayChecked2 = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
|
|
@ -292,14 +320,22 @@ const store = useProfileDataStore();
|
|||
const { profileData, changeProfileColumns } = store;
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||
mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDate,
|
||||
convertDateDisplay,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const id = ref<string>("");
|
||||
const certificateNo = ref<string>();
|
||||
const issuer = ref<string>();
|
||||
const issueDate = ref<Date>(new Date());
|
||||
const expireDate = ref<Date>(new Date());
|
||||
const issueDate = ref<Date | string | null>(new Date());
|
||||
const expireDate = ref<Date | string | null>(new Date());
|
||||
const certificateType = ref<string>();
|
||||
const minDate = ref<Date>();
|
||||
const myForm = ref<any>(); //form data input
|
||||
|
|
@ -545,6 +581,8 @@ const getData = () => {
|
|||
issuer.value = row.issuer;
|
||||
issueDate.value = row.issueDate;
|
||||
expireDate.value = row.expireDate;
|
||||
inputIssueDate.value = convertDateDisplay(row.issueDate);
|
||||
inputExpireDate.value = convertDateDisplay(row.expireDate);
|
||||
certificateType.value = row.certificateType;
|
||||
id.value = row.id;
|
||||
};
|
||||
|
|
@ -587,15 +625,20 @@ const clickAdd = async () => {
|
|||
const clickSave = async () => {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
if (modalEdit.value) {
|
||||
await editData();
|
||||
} else {
|
||||
await saveData();
|
||||
if (inputIssueDate.value === "") {
|
||||
dayChecked.value = true;
|
||||
} else if (inputExpireDate.value === "") {
|
||||
dayChecked2.value = true;
|
||||
} else {
|
||||
if (modalEdit.value) {
|
||||
await editData();
|
||||
} else {
|
||||
await saveData();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* บันทึกเพิ่มข้อมูล
|
||||
*/
|
||||
|
|
@ -606,8 +649,8 @@ const saveData = async () => {
|
|||
id: id.value,
|
||||
certificateNo: certificateNo.value,
|
||||
issuer: issuer.value,
|
||||
issueDate: dateToISO(issueDate.value),
|
||||
expireDate: dateToISO(expireDate.value),
|
||||
issueDate: dateToISO(issueDate.value as Date),
|
||||
expireDate: dateToISO(expireDate.value as Date),
|
||||
certificateType: certificateType.value,
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
@ -632,8 +675,8 @@ const editData = async () => {
|
|||
id: id.value,
|
||||
certificateNo: certificateNo.value,
|
||||
issuer: issuer.value,
|
||||
issueDate: dateToISO(issueDate.value),
|
||||
expireDate: dateToISO(expireDate.value),
|
||||
issueDate: dateToISO(issueDate.value as Date),
|
||||
expireDate: dateToISO(expireDate.value as Date),
|
||||
certificateType: certificateType.value,
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
@ -716,6 +759,8 @@ const selectData = async (props: DataProps) => {
|
|||
issuer.value = props.row.issuer;
|
||||
issueDate.value = props.row.issueDate;
|
||||
expireDate.value = props.row.expireDate;
|
||||
inputIssueDate.value = convertDateDisplay(props.row.issueDate);
|
||||
inputExpireDate.value = convertDateDisplay(props.row.expireDate);
|
||||
certificateType.value = props.row.certificateType;
|
||||
id.value = props.row.id;
|
||||
await checkRowPage();
|
||||
|
|
@ -732,6 +777,8 @@ const addData = () => {
|
|||
issuer.value = "";
|
||||
issueDate.value = new Date();
|
||||
expireDate.value = new Date();
|
||||
inputIssueDate.value = '';
|
||||
inputExpireDate.value = '';
|
||||
certificateType.value = "";
|
||||
};
|
||||
|
||||
|
|
@ -823,6 +870,40 @@ const getClass = (val: boolean) => {
|
|||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => inputIssueDate.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
if (dateVal.isValid) {
|
||||
dayChecked.value = false;
|
||||
issueDate.value = dateVal.value;
|
||||
} else {
|
||||
dayChecked.value = true;
|
||||
inputIssueDate.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => inputExpireDate.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
if (dateVal.isValid) {
|
||||
dayChecked2.value = false;
|
||||
expireDate.value = dateVal.value;
|
||||
} else {
|
||||
dayChecked2.value = true;
|
||||
inputExpireDate.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:historyClick="clickHistory"
|
||||
/>
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="col-xs-12">
|
||||
<q-input
|
||||
:class="getClass(false)"
|
||||
|
|
@ -123,7 +123,19 @@
|
|||
</div>
|
||||
<div class="col-12 q-py-md"><q-separator /></div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="inputContainDate"
|
||||
label="วัน/เดือน/ปี ที่บรรจุ"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:error="dayChecked"
|
||||
error-message="กรุณากรอก วัน/เดือน/ปี ที่บรรจุ"
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
v-model="govermentData.containDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
|
|
@ -150,7 +162,7 @@
|
|||
:borderless="!edit"
|
||||
:model-value="
|
||||
govermentData.containDate !== null
|
||||
? date2Thai(govermentData.containDate)
|
||||
? date2Thai(govermentData.containDate as Date)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
|
|
@ -163,7 +175,9 @@
|
|||
}`,
|
||||
]"
|
||||
:label="`${
|
||||
profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
|
||||
profileType == 'officer'
|
||||
? 'วัน/เดือน/ปี ที่บรรจุ'
|
||||
: 'วันที่แต่งตั้ง'
|
||||
}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -181,7 +195,19 @@
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="inputWorkDate"
|
||||
label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:error="dayChecked2"
|
||||
error-message="กรุณากรอก วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
v-model="govermentData.workDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
|
|
@ -207,7 +233,7 @@
|
|||
:borderless="!edit"
|
||||
:model-value="
|
||||
govermentData.workDate !== null
|
||||
? date2Thai(govermentData.workDate)
|
||||
? date2Thai(govermentData.workDate as Date)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
|
|
@ -221,7 +247,7 @@
|
|||
]"
|
||||
:label="`${
|
||||
profileType == 'officer'
|
||||
? 'เริ่มปฎิบัติราชการ'
|
||||
? 'วัน/เดือน/ปี เริ่มปฎิบัติราชการ'
|
||||
: 'วันที่จ้างและแต่งตั้งมีผล'
|
||||
}`"
|
||||
>
|
||||
|
|
@ -353,6 +379,10 @@ import { useProfileDataStore } from "@/modules/04_registry/store";
|
|||
import { storeToRefs } from "pinia";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const inputContainDate = ref<string>("");
|
||||
const inputWorkDate = ref<string>("");
|
||||
const dayChecked = ref<boolean>(false);
|
||||
const dayChecked2 = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
|
|
@ -373,8 +403,16 @@ const route = useRoute();
|
|||
const $q = useQuasar();
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||
mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDate,
|
||||
convertDateDisplay,
|
||||
} = mixin;
|
||||
const profileStore = useProfileDataStore();
|
||||
const { birthDate, retireText } = storeToRefs(profileStore);
|
||||
const edit = ref<boolean>(false);
|
||||
|
|
@ -640,6 +678,9 @@ const fetchData = async () => {
|
|||
govermentData.value.age = data.govAgePlus;
|
||||
govermentData.value.ageAll = data.govAge;
|
||||
govermentData.value.reasonSameDate = data.reasonSameDate;
|
||||
|
||||
inputContainDate.value = convertDateDisplay(data.dateAppoint);
|
||||
inputWorkDate.value = convertDateDisplay(data.dateStart);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -659,8 +700,8 @@ const editData = async () => {
|
|||
showLoader();
|
||||
await http
|
||||
.put(config.API.profileGovId(route.params.id.toString()), {
|
||||
dateAppoint: dateToISO(govermentData.value.containDate),
|
||||
dateStart: dateToISO(govermentData.value.workDate),
|
||||
dateAppoint: dateToISO(govermentData.value.containDate as Date),
|
||||
dateStart: dateToISO(govermentData.value.workDate as Date),
|
||||
reasonSameDate: govermentData.value.reasonSameDate,
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
@ -679,7 +720,13 @@ const editData = async () => {
|
|||
const saveData = async () => {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
await editData();
|
||||
if (inputContainDate.value === "") {
|
||||
dayChecked.value = true;
|
||||
} else if (inputWorkDate.value === "") {
|
||||
dayChecked2.value = true;
|
||||
} else {
|
||||
await editData();
|
||||
}
|
||||
} else {
|
||||
}
|
||||
});
|
||||
|
|
@ -769,4 +816,36 @@ const getClass = (val: boolean) => {
|
|||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => inputContainDate.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
if (dateVal.isValid) {
|
||||
dayChecked.value = false;
|
||||
govermentData.value.containDate = dateVal.value;
|
||||
} else {
|
||||
dayChecked.value = true;
|
||||
inputContainDate.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => inputWorkDate.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
if (dateVal.isValid) {
|
||||
dayChecked2.value = false;
|
||||
govermentData.value.workDate = dateVal.value;
|
||||
} else {
|
||||
dayChecked2.value = true;
|
||||
inputWorkDate.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,19 @@
|
|||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="yearInput"
|
||||
label="ปี ที่ยื่นขอพระราชทานเครื่องราชฯ"
|
||||
mask="####"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:error="yearInputCheck"
|
||||
error-message="กรุณากรอก ปี ที่ยื่นขอพระราชทานเครื่องราชฯ"
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="year"
|
||||
|
|
@ -116,7 +128,19 @@
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="receiveDateInput"
|
||||
label="วัน/เดือน/ปี ที่วันที่ได้รับ"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:error="receiveDateCheck"
|
||||
error-message="กรุณากรอก วัน/เดือน/ปี ที่วันที่ได้รับ"
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="receiveDate"
|
||||
|
|
@ -137,7 +161,7 @@
|
|||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(receiveDate)"
|
||||
:model-value="date2Thai(receiveDate as Date)"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
|
|
@ -288,7 +312,16 @@
|
|||
<!-- :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]" -->
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="dateAnnounceInput"
|
||||
label="วัน/เดือน/ปี ที่ออกใบอนุญาต"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="dateAnnounce"
|
||||
|
|
@ -309,7 +342,7 @@
|
|||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="dateAnnounce ? date2Thai(dateAnnounce as Date) : null"
|
||||
:model-value="date2Thai(dateAnnounce as Date)"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
|
||||
>
|
||||
|
|
@ -364,7 +397,16 @@
|
|||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
v-if="edit"
|
||||
outlined
|
||||
v-model="refCommandDateInput"
|
||||
label="วัน/เดือน/ปี เอกสารอ้างอิง (ลงวันที่)"
|
||||
mask="##/##/####"
|
||||
dense
|
||||
/>
|
||||
<datepicker
|
||||
v-else
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="refCommandDate"
|
||||
|
|
@ -501,13 +543,29 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const dateAnnounceInput = ref<string>("");
|
||||
const refCommandDateInput = ref<string>("");
|
||||
const receiveDateInput = ref<string>("");
|
||||
const yearInput = ref<string>("");
|
||||
|
||||
const receiveDateCheck = ref<boolean>(false);
|
||||
const yearInputCheck = ref<boolean>(false);
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useProfileDataStore();
|
||||
const { profileData, changeProfileColumns } = store;
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||
mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDate,
|
||||
convertDateDisplay,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const id = ref<string>("");
|
||||
const insigniaId = ref<string>("");
|
||||
|
|
@ -525,7 +583,7 @@ const volumeNo = ref<string>();
|
|||
const volume = ref<string>();
|
||||
const section = ref<string>();
|
||||
const page = ref<string>();
|
||||
const receiveDate = ref<Date>(new Date());
|
||||
const receiveDate = ref<Date | string | null>(new Date());
|
||||
const dateAnnounce = ref<Date | null | string>(null);
|
||||
const refCommandNo = ref<string>();
|
||||
const refCommandDate = ref<Date | null | string>(new Date());
|
||||
|
|
@ -962,6 +1020,7 @@ const fetchData = async () => {
|
|||
.get(config.API.profileInsignId(profileId.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
console.log(data);
|
||||
rows.value = [];
|
||||
data.map((e: any) => {
|
||||
rows.value.push({
|
||||
|
|
@ -1034,6 +1093,16 @@ const getData = () => {
|
|||
refCommandNo.value = row.refCommandNo;
|
||||
refCommandDate.value = row.refCommandDate;
|
||||
id.value = row.id;
|
||||
yearInput.value = (Number(row.year) + 543).toLocaleString();
|
||||
receiveDateInput.value = row.receiveDate
|
||||
? convertDateDisplay(row.receiveDate)
|
||||
: "";
|
||||
dateAnnounceInput.value = row.dateAnnounce
|
||||
? convertDateDisplay(row.dateAnnounce)
|
||||
: "";
|
||||
refCommandDateInput.value = row.refCommandDate
|
||||
? convertDateDisplay(row.refCommandDate)
|
||||
: "";
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1074,10 +1143,14 @@ const clickAdd = async () => {
|
|||
const clickSave = async () => {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
if (modalEdit.value) {
|
||||
await editData();
|
||||
if (receiveDateInput.value === "") {
|
||||
receiveDateCheck.value = true;
|
||||
} else {
|
||||
await saveData();
|
||||
if (modalEdit.value) {
|
||||
await editData();
|
||||
} else {
|
||||
await saveData();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1101,7 +1174,7 @@ const saveData = async () => {
|
|||
volume: volume.value,
|
||||
section: section.value,
|
||||
page: page.value,
|
||||
receiveDate: dateToISO(receiveDate.value),
|
||||
receiveDate: dateToISO(receiveDate.value as Date),
|
||||
dateAnnounce: dateAnnounce.value
|
||||
? dateToISO(dateAnnounce.value as Date)
|
||||
: null,
|
||||
|
|
@ -1141,7 +1214,7 @@ const editData = async () => {
|
|||
volume: volume.value,
|
||||
section: section.value,
|
||||
page: page.value,
|
||||
receiveDate: dateToISO(receiveDate.value),
|
||||
receiveDate: dateToISO(receiveDate.value as Date),
|
||||
dateAnnounce: dateAnnounce.value
|
||||
? dateToISO(dateAnnounce.value as Date)
|
||||
: null,
|
||||
|
|
@ -1222,6 +1295,7 @@ const clickClose = async () => {
|
|||
* @param props ค่า props ใน row ที่เลือก
|
||||
*/
|
||||
const selectData = async (props: DataProps) => {
|
||||
console.log(props.row);
|
||||
modalEdit.value = true;
|
||||
modal.value = true;
|
||||
edit.value = false;
|
||||
|
|
@ -1237,12 +1311,21 @@ const selectData = async (props: DataProps) => {
|
|||
section.value = props.row.section;
|
||||
page.value = props.row.page;
|
||||
receiveDate.value = props.row.receiveDate;
|
||||
dateAnnounce.value =
|
||||
props.row.dateAnnounce == "-" ? null : props.row.dateAnnounce;
|
||||
dateAnnounce.value = props.row.dateAnnounce;
|
||||
refCommandNo.value = props.row.refCommandNo;
|
||||
refCommandDate.value =
|
||||
props.row.refCommandDate == "-" ? null : props.row.refCommandDate;
|
||||
id.value = props.row.id;
|
||||
|
||||
console.log(dateAnnounce.value);
|
||||
yearInput.value = (Number(props.row.year) + 543).toLocaleString();
|
||||
receiveDateInput.value = convertDateDisplay(props.row.receiveDate);
|
||||
dateAnnounceInput.value = props.row.dateAnnounce
|
||||
? convertDateDisplay(props.row.dateAnnounce as Date)
|
||||
: "";
|
||||
refCommandDateInput.value = props.row.refCommandDate
|
||||
? convertDateDisplay(props.row.refCommandDate as Date)
|
||||
: "";
|
||||
await checkRowPage();
|
||||
};
|
||||
|
||||
|
|
@ -1266,6 +1349,11 @@ const addData = () => {
|
|||
dateAnnounce.value = null;
|
||||
refCommandNo.value = "";
|
||||
refCommandDate.value = null;
|
||||
|
||||
receiveDateInput.value = "";
|
||||
dateAnnounceInput.value = "";
|
||||
refCommandDateInput.value = "";
|
||||
yearInput.value = ''
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1364,6 +1452,53 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
};
|
||||
const resetFilter = () => {};
|
||||
|
||||
watch(
|
||||
() => dateAnnounceInput.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
dateAnnounce.value = dateVal.value;
|
||||
console.log(dateAnnounce.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => refCommandDateInput.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
refCommandDate.value = dateVal.value;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => receiveDateInput.value,
|
||||
(value: string) => {
|
||||
if (value.length === 10) {
|
||||
const dateVal = convertDate(value);
|
||||
if (dateVal.isValid) {
|
||||
receiveDateCheck.value = false;
|
||||
receiveDate.value = dateVal.value;
|
||||
} else {
|
||||
receiveDateCheck.value = true;
|
||||
receiveDateInput.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => yearInput.value,
|
||||
(value: string) => {
|
||||
if (value.length === 4) {
|
||||
const dateVal = Number(value) - 543;
|
||||
yearInputCheck.value = false;
|
||||
year.value = dateVal;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -78,8 +78,8 @@ interface Goverment {
|
|||
numberId: string | null;
|
||||
positionExecutive: string | null;
|
||||
positionExecutiveSide: string | null;
|
||||
containDate: Date;
|
||||
workDate: Date;
|
||||
containDate: Date|null|string;
|
||||
workDate: Date|string|null;
|
||||
retireDate: string | null;
|
||||
absent: number | null;
|
||||
age: number | null;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue