จัดโค้ด
This commit is contained in:
setthawutttty
parent
a5335df0b6
commit
a42d7b91ba
12 changed files with 216 additions and 413 deletions
|
|
@ -23,6 +23,11 @@ const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
|
|||
|
||||
const $q = useQuasar();
|
||||
|
||||
const title = ref("");
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const modalCancel = ref(false);
|
||||
const modeCancel = ref(true);
|
||||
|
||||
const props = defineProps({
|
||||
lists: {
|
||||
type: Array as PropType<ExtendHistoryObject[]>,
|
||||
|
|
@ -38,7 +43,6 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<CalendarOptions>({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
|
|
@ -99,7 +103,7 @@ async function fetchCalendar() {
|
|||
id: index.toString(),
|
||||
title: e.name,
|
||||
start: e.dateStart,
|
||||
end: moment(e.dateEnd).format("YYYY-MM-DD")+ " 23:59:59",
|
||||
end: moment(e.dateEnd).format("YYYY-MM-DD") + " 23:59:59",
|
||||
allDay: false,
|
||||
color:
|
||||
props.lists.length > 1 && index > 0
|
||||
|
|
@ -119,45 +123,6 @@ async function fetchCalendar() {
|
|||
}, 1000);
|
||||
}
|
||||
|
||||
// async function fetchCalendar() {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .post(config.API.investigateCalendar(), {
|
||||
// year: dateMonth.value.year,
|
||||
// month: dateMonth.value.month,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// const data = res.data.result;
|
||||
// const defaultColor = "#02A998";
|
||||
// const gradientColors = generateGradientColors(data.length);
|
||||
|
||||
// const events = data.map((e: CaledarInvestigatefacts, index: number) => ({
|
||||
// id: e.id,
|
||||
// title: e.title,
|
||||
// start: e.investigationDateStart,
|
||||
// end: e.investigationDateEnd,
|
||||
// allDay: true,
|
||||
// color:
|
||||
// data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
|
||||
// }));
|
||||
|
||||
// calendarOptions.value.events = events;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setTimeout(() => {
|
||||
// if (fullCalendar !== undefined) {
|
||||
// const calen = fullCalendar.value.getApi();
|
||||
// const date = new Date(dateMonth.value.year, dateMonth.value.month);
|
||||
// calen.gotoDate(date);
|
||||
// }
|
||||
// hideLoader();
|
||||
// }, 1000);
|
||||
// });
|
||||
// }
|
||||
|
||||
function generateGradientColors(length: number) {
|
||||
const colors = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
|
|
@ -185,20 +150,6 @@ async function view(text: string) {
|
|||
modeCancel.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
async () => {
|
||||
props.modal && (await fetchCalendar());
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* ตัวแปรทั้งหมด
|
||||
*/
|
||||
const modalCancel = ref(false);
|
||||
const title = ref("");
|
||||
const modeCancel = ref(true);
|
||||
|
||||
function gotoPrevMonth() {
|
||||
const calen = fullCalendar.value.getApi();
|
||||
calen.prev();
|
||||
|
|
@ -218,6 +169,13 @@ function updateDateMonth(date: Date) {
|
|||
dateMonth.value.month = date.getMonth();
|
||||
fetchCalendar();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
async () => {
|
||||
props.modal && (await fetchCalendar());
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -245,40 +203,6 @@ function updateDateMonth(date: Date) {
|
|||
<div class="col-12">
|
||||
<div class="row q-gutter-sm q-pb-sm main-content">
|
||||
<div class="demo-app-main q-mb-xl">
|
||||
<!-- <div class="row col-12 q-mb-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="changCalendar"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
style="width: 130px"
|
||||
>
|
||||
<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> -->
|
||||
<div class="row q-mb-sm justify-between">
|
||||
<q-btn
|
||||
size="12px"
|
||||
|
|
@ -316,22 +240,12 @@ function updateDateMonth(date: Date) {
|
|||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div
|
||||
class="textHover col-10"
|
||||
@click="view(arg.event.title)"
|
||||
>
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<!-- <q-btn
|
||||
dense
|
||||
v-if="arg.event.groupId == 1"
|
||||
icon="mdi-close"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
@click="cancel(arg.event.title)"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
|
|
@ -359,12 +273,9 @@ function updateDateMonth(date: Date) {
|
|||
|
||||
.demo-app-main {
|
||||
flex-grow: 1;
|
||||
|
||||
/* padding: 3em; */
|
||||
}
|
||||
|
||||
.fc {
|
||||
/* the calendar root */
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
|
|
@ -379,13 +290,6 @@ function updateDateMonth(date: Date) {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* border: 2px solid #17a259; */
|
||||
/* border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-weight: bold;
|
||||
color: white !important;
|
||||
background: #17a259; */
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-frame {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue