hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

clone code

Browse source
This commit is contained in:
Kittapath 2023-06-01 12:54:58 +07:00
parent c9597d1e38
commit d57bcd1719
362 changed files with 104804 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

987
src/modules/03_recruiting/views/01_compete/PeriodAdd.vue Normal file
View file

@ -0,0 +1,987 @@
<!-- page:จัดการรอบการสอบแข่งขัน สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="clickBack"
/>
{{ edit ? "แก้ไขข้อมูลการสอบแข่งขัน" : "เพิ่มข้อมูลการสอบแข่งขัน" }}
</div>
<q-card flat bordered class="col-12">
<q-form ref="myForm">
<q-card-section class="q-pa-md">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-12 row items-center q-col-gutter-x-sm">
<div class="col-xs-12 col-sm-8">
<q-input
outlined
v-model="name"
label="ชื่อรอบการสอบแข่งขัน/ชื่อประกาศ"
dense
lazy-rules
:rules="[(val) => !!val || `${'กรุณากรอกชื่อรอบการสอบแข่งขัน/ชื่อประกาศ'}`]"
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
<q-input
outlined
v-model="round"
type="number"
label="รอบการสอบ(ครั้ง)"
dense
lazy-rules
:rules="[(val) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="yearly"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="updateYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="yearly + 543"
:rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
<q-input
outlined
v-model="fee"
type="number"
label="ค่าธรรมเนียม"
dense
lazy-rules
input-class="text-right"
:rules="[(val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`]"
></q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateExam"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="date2Thai(dateExam)"
:label="`${'วันที่สอบ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnouncement"
:locale="'th'"
autoApply
borderless
range
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="dateThaiRange(dateAnnouncement)"
:label="`${'วันที่ประกาศ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateRegister"
:locale="'th'"
autoApply
borderless
range
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="dateThaiRange(dateRegister)"
:label="`${'วันที่สมัคร'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="datePayment"
:locale="'th'"
autoApply
borderless
range
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="dateThaiRange(datePayment)"
:label="`${'วันที่ชำระเงิน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnounce"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="date2Thai(dateAnnounce)"
:label="`${'วันประกาศผลสอบ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<q-separator size="5px" color="grey-2" />
</div>
<div class="row col-12 items-top q-col-gutter-x-sm">
<div class="col-xs-12 col-sm-6">
<div class="text-bold text-subtitle2 q-pb-sm">รูปภาพประกอบ</div>
<div class="row justify-center row col-12">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="dark"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
multiple
@added="fileUploadImg"
@removed="fileRemoveImg"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs text-white">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }}
/
{{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
<q-card
bordered
flat
class="full-width q-my-md"
v-if="fileImgs.length != 0"
>
<q-list separator>
<q-item v-for="file in fileImgs" :key="file.id" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption>
สถานะ: {{ file.fileType }} /
{{ file.fileSize }}
</q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn
size="12px"
flat
dense
round
color="blue"
icon="mdi-download-outline"
@click="downloadData(file.detail)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
@click="deleteImgData(file.id)"
>
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-xs-12 col-sm-6">
<div class="text-bold text-subtitle2 q-pb-sm">เอกสารประกอบ</div>
<div class="row justify-center row col-12">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="dark"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
multiple
@added="fileUploadDoc"
@removed="fileRemoveDoc"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs text-white">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }}
/
{{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
<q-card
bordered
flat
class="full-width q-my-md"
v-if="fileDocs.length != 0"
>
<q-list separator>
<q-item v-for="file in fileDocs" :key="file.id" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption>
สถานะ: {{ file.fileType }} /
{{ file.fileSize }}
</q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn
size="12px"
flat
dense
round
color="blue"
icon="mdi-download-outline"
@click="downloadData(file.detail)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
@click="deleteDocData(file.id)"
>
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
<div class="col-12">
<q-separator size="5px" color="grey-2" class="q-my-lg" />
</div>
<div class="col-12">
<div class="text-bold text-subtitle2 q-pb-sm q-pt-md">รายละเอียด</div>
<q-editor
v-model="editor"
:dense="$q.screen.lt.md"
toolbar-text-color="blue-grey-10"
toolbar-bg="blue-grey-2"
toolbar-toggle-color="blue-grey-8"
class="editor"
:toolbar="[
['left', 'center', 'right', 'justify'],
['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: ['p', 'h1', 'h2', 'h3'],
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana',
],
},
'removeFormat',
],
['undo', 'redo'],
['viewsource'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</div>
<div class="col-12 q-mt-md">
<q-input
outlined
v-model="note"
label="หมายเหตุ"
dense
lazy-rules
type="textarea"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions class="text-primary q-py-sm">
<q-space />
<q-btn
flat
round
color="public"
@click="checkSave"
icon="mdi-content-save-outline"
>
<q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
import type {
DataOption,
UploadType,
} from "@/modules/02_organizational/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, notifyError } = mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
const dateExam = ref<Date>(new Date()); //วันที่สอบ
const dateAnnounce = ref<Date>(new Date()); //วันที่ประกาศผล
const positionPathOptions = ref<DataOption[]>([]);
const organizationShortName = ref<DataOption>({ id: "", name: "" });
const organizationName = ref<DataOption>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption[]>([]);
const { messageError } = mixin;
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const pay = ref<string>("");
const edit = ref<boolean>(false);
const columnsPayment = ref<QTableProps["columns"]>([
{
name: "accountNumber",
align: "left",
label: "เลขบัญชี",
sortable: true,
field: "accountNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bankName",
align: "left",
label: "ธนาคาร",
sortable: true,
field: "bankName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "accountName",
align: "left",
label: "ชื่อบัญชี",
sortable: true,
field: "accountName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsPosition = ref<String[]>(["position", "type"]);
const columnsPosition = ref<QTableProps["columns"]>([
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "type",
align: "left",
label: "ประเภทแบบฟอร์ม",
sortable: true,
field: "type",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
organizationNameOptions.value = [];
});
watch(organizationName, (count: DataOption, prevCount: DataOption) => {
positionPathOptions.value = [];
});
onMounted(async () => {
loaderPage(false);
if (route.params.id != undefined) {
edit.value = true;
id.value = route.params.id.toString();
await fetchData();
} else {
edit.value = false;
}
});
const clickBack = () => {
router.push({ name: "competePeriod" });
};
const fetchData = async () => {
loaderPage(true);
await http
.get(config.API.getPeriodById(id.value))
.then((res) => {
const data = res.data.result.periods;
const images = res.data.result.images;
const files = res.data.result.files;
id.value = data.id;
name.value = data.name;
round.value = data.order;
yearly.value = data.year;
fee.value = data.fee;
dateAnnouncement.value = [
new Date(data.announcementStartDate),
new Date(data.announcementEndDate),
];
dateExam.value = new Date(data.examDate);
dateRegister.value = [
new Date(data.registerStartDate),
new Date(data.registerEndDate),
];
datePayment.value = [
new Date(data.paymentStartDate),
new Date(data.paymentEndDate),
];
editor.value = data.detail;
note.value = data.note;
dateAnnounce.value = new Date(data.announcementDate);
fileDocs.value = files;
fileImgs.value = images;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
const fileRemoveDoc = async (files: any) => {
files.forEach((file: any) => {
const index = fileDocDataUpload.value.findIndex((x: any) => x.__key == file.__key);
if (index > -1) {
fileDocDataUpload.value.splice(index, 1);
}
});
};
const uploadDocData = async () => {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
loaderPage(true);
await http
.put(config.API.periodRecruitDoc(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
});
} else {
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
}
};
const uploadImgData = async () => {
if (fileImgDataUpload.value.length > 0) {
const formData = new FormData();
fileImgDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
loaderPage(true);
await http
.put(config.API.periodRecruitImg(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
});
}
};
const fileUploadImg = async (files: any) => {
files.forEach((file: any) => {
fileImgDataUpload.value.push(file);
});
};
const fileRemoveImg = async (files: any) => {
files.forEach((file: any) => {
const index = fileImgDataUpload.value.findIndex((x: any) => x.__key == file.__key);
if (index > -1) {
fileImgDataUpload.value.splice(index, 1);
}
});
};
const downloadData = async (path: string) => {
window.open(path);
};
const updateYear = async (e: number) => {
yearly.value = e;
};
const checkSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
}
}
});
}
};
const sendData = () => {
const valueData: RequestPeriodCompete = {
announcementEndDate: dateToISO(dateAnnouncement.value[1]),
announcementStartDate: dateToISO(dateAnnouncement.value[0]),
examDate: dateToISO(dateExam.value),
detail: editor.value,
fee: fee.value,
id: "",
name: name.value,
note: note.value,
paymentEndDate: dateToISO(datePayment.value[1]),
paymentStartDate: dateToISO(datePayment.value[0]),
registerEndDate: dateToISO(dateRegister.value[1]),
registerStartDate: dateToISO(dateRegister.value[0]),
order: round.value,
year: yearly.value,
announcementDate: dateToISO(dateAnnounce.value),
};
return valueData;
};
const deleteDocData = async (docId: string) => {
loaderPage(true);
await http
.delete(config.API.periodDeleteDoc(docId))
.then(async () => {
await fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
});
};
const deleteImgData = async (docId: string) => {
loaderPage(true);
await http
.delete(config.API.periodDeleteImg(docId))
.then(async () => {
await fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
});
};
const addData = async () => {
loaderPage(true);
await http
.post(config.API.savePeriod, sendData())
.then(async (res) => {
const data = res.data.result;
id.value = data.id;
await uploadImgData();
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
});
};
const editData = async (id: string) => {
loaderPage(true);
await http
.put(config.API.editPeriod(id), sendData())
.then(async () => {
await uploadImgData();
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
});
};
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
const dateThaiRange = (val: [Date, Date]) => {
if (val === null) {
return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`;
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
};
</script>
<style></style>