updated style & layout
This commit is contained in:
parent
78310f1d3e
commit
2a1e85f720
33 changed files with 344 additions and 451 deletions
|
|
@ -7,7 +7,7 @@
|
|||
flat
|
||||
round
|
||||
:disabled="editvisible == true"
|
||||
:color="editvisible == true ? 'grey-7' : 'primary'"
|
||||
:color="editvisible == true ? 'grey-7' : 'edit'"
|
||||
@click="edit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
:outline="editvisible"
|
||||
dense
|
||||
:disabled="editvisible == true"
|
||||
:color="editvisible == true ? 'grey-7' : 'primary'"
|
||||
:color="editvisible == true ? 'grey-7' : 'edit'"
|
||||
label="แก้ไข"
|
||||
@click="edit"
|
||||
icon="mdi-pencil-outline"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
flat
|
||||
round
|
||||
:disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'"
|
||||
:color="editvisible ? 'grey-7' : 'edit'"
|
||||
@click="edit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
</div>
|
||||
<div class="q-gutter-sm q-mx-sm" v-if="addData == false">
|
||||
<q-btn
|
||||
size="12px"
|
||||
v-if="!edit"
|
||||
flat
|
||||
round
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@
|
|||
<q-btn
|
||||
v-if="!edit"
|
||||
outline
|
||||
color="primary"
|
||||
color="edit"
|
||||
@click="editClick"
|
||||
label="แก้ไขข้อมูล"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,323 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
DataDateRowObject,
|
||||
DataDateAddObject,
|
||||
DataDateListsObject,
|
||||
TabsObject,
|
||||
} from "@/modules/01_metadata/interface/index/Calendar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const props = defineProps({
|
||||
dateYear: {
|
||||
//filter ปี วันหยุด
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
refreshData: {
|
||||
//หน้า main มีการอัพเดทค่าให้ refresh data
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
fetchDataSummaryCalendar: {
|
||||
//ฟังก์ชันอัพเดทสรุปวันหยุด
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const {
|
||||
success,
|
||||
dateToISO,
|
||||
dateMonth2Thai,
|
||||
weekThai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
|
||||
const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
|
||||
const name = ref<string>(""); //ชื่อวันหยุด
|
||||
const isSpecial = ref<boolean>(true); //เช็ควันหยุด
|
||||
const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
|
||||
const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
|
||||
const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
|
||||
|
||||
const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
|
||||
const tabs = ref<TabsObject[]>([
|
||||
{ label: "ทำงานจันทร์-ศุกร์ (5 วัน)", value: "normal" },
|
||||
{ label: "ทำงานจันทร์-เสาร์ (6 วัน)", value: "6day" },
|
||||
]); //tab ประเภทวันหยุดทั้งหมด
|
||||
|
||||
//columns รายการวันหยุด
|
||||
const columns = ref<any>([
|
||||
{
|
||||
name: "week",
|
||||
align: "left",
|
||||
label: "-",
|
||||
sortable: true,
|
||||
field: "week",
|
||||
style: "font-size: 15px",
|
||||
},
|
||||
{
|
||||
name: "holidayDate",
|
||||
align: "left",
|
||||
label: "-",
|
||||
sortable: true,
|
||||
field: "holidayDate",
|
||||
style: "font-size: 15px",
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "-",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
style: "font-size: 15px",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
/**
|
||||
* ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
|
||||
*/
|
||||
watch(props, async (count, prevCount) => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
/**
|
||||
* กดปุ่มแก้ไขวันหยุด
|
||||
* @param val data วันหยุดทั้ง row
|
||||
*/
|
||||
const editCalendar = async (val: DataDateListsObject) => {
|
||||
rowData.value = val;
|
||||
dateAdd.value = [val.dateRange[0], val.dateRange[1]];
|
||||
name.value = val.detail;
|
||||
isSpecial.value = true;
|
||||
modalAdd.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* กดปุ่มลบวันหยุด
|
||||
* @param val data วันหยุดทั้ง row
|
||||
*/
|
||||
const deleteClick = async (val: DataDateListsObject) => {
|
||||
rowData.value = val;
|
||||
dialogRemove($q, async () => deleteConfirm());
|
||||
};
|
||||
|
||||
/**
|
||||
* fetch วันหยุดในรายการ
|
||||
*/
|
||||
const fetchData = async () => {
|
||||
calendarData.value = [];
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.listHolidayHistoryYear(props.dateYear))
|
||||
.then((res) => {
|
||||
let data = res.data.result.normal;
|
||||
if (currentTab.value == "6day") {
|
||||
data = res.data.result.sixDays;
|
||||
}
|
||||
const dateStart = ref<Date | null>();
|
||||
const firstEvent = ref<boolean>(true);
|
||||
const dateRow = ref<DataDateRowObject[]>([]);
|
||||
data.map((e: RequestItemsObject, index: number) => {
|
||||
dateRow.value.push({
|
||||
holidayDate: new Date(e.holidayDate),
|
||||
name: e.name,
|
||||
isSpecial: true,
|
||||
id: e.id,
|
||||
});
|
||||
if (
|
||||
index == data.length - 1 ||
|
||||
data[index + 1].name != e.name ||
|
||||
(data[index + 1].name == e.name &&
|
||||
dateToISO(new Date(data[index + 1].holidayDate)) !=
|
||||
dateToISO(
|
||||
new Date(
|
||||
new Date(e.holidayDate).setDate(
|
||||
new Date(e.holidayDate).getDate() + 1
|
||||
)
|
||||
)
|
||||
))
|
||||
) {
|
||||
firstEvent.value = true;
|
||||
calendarData.value.push({
|
||||
id: e.id,
|
||||
dateRange: [
|
||||
dateStart.value ? dateStart.value : new Date(e.holidayDate),
|
||||
new Date(e.holidayDate),
|
||||
],
|
||||
dataRangeRow: dateRow.value,
|
||||
detail:
|
||||
dateToISO(new Date(e.holidayDate)) ==
|
||||
dateToISO(new Date(e.originalDate))
|
||||
? e.name
|
||||
: `ชดเชย ${e.name}`,
|
||||
isSpecial: true,
|
||||
});
|
||||
dateStart.value = null;
|
||||
dateRow.value = [];
|
||||
} else if (firstEvent.value == true) {
|
||||
firstEvent.value = false;
|
||||
dateStart.value = new Date(e.holidayDate);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await props.fetchDataSummaryCalendar();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ลบข้อมูลวันหยุด
|
||||
*/
|
||||
const deleteConfirm = async () => {
|
||||
const dataDelete = ref<DataDateAddObject[]>([]);
|
||||
if (rowData.value != null) {
|
||||
await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
|
||||
dataDelete.value.push({
|
||||
year: new Date(e.holidayDate).getFullYear(),
|
||||
holidayDate: dateToISO(e.holidayDate),
|
||||
name: e.name,
|
||||
isSpecial: true,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
showLoader();
|
||||
await http
|
||||
.post(
|
||||
config.API.listHolidayHistoryDelete(currentTab.value),
|
||||
dataDelete.value
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* บันทึกแก้ไขวันหยุด
|
||||
*/
|
||||
const editData = async () => {
|
||||
await formDate.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
const dataEdit = ref<DataDateAddObject[]>([]);
|
||||
let i = 0;
|
||||
const dateStart = ref<Date>(dateAdd.value[0]);
|
||||
do {
|
||||
i = i + 1;
|
||||
dataEdit.value.push({
|
||||
year: new Date(dateStart.value).getFullYear(),
|
||||
holidayDate: dateToISO(new Date(dateStart.value)),
|
||||
name: name.value,
|
||||
isSpecial: true,
|
||||
});
|
||||
dateStart.value = new Date(
|
||||
new Date(dateStart.value).setDate(
|
||||
new Date(dateStart.value).getDate() + 1
|
||||
)
|
||||
);
|
||||
} while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
|
||||
const _dataHistory = ref<DataDateAddObject[]>([]);
|
||||
if (rowData.value != null) {
|
||||
rowData.value.dataRangeRow.map(
|
||||
(e: DataDateRowObject, index: number) => {
|
||||
_dataHistory.value.push({
|
||||
year: new Date(e.holidayDate).getFullYear(),
|
||||
holidayDate: dateToISO(e.holidayDate),
|
||||
name: e.name,
|
||||
isSpecial: true,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.listHolidayHistoryEdit(currentTab.value), {
|
||||
history: _dataHistory.value,
|
||||
updated: dataEdit.value,
|
||||
})
|
||||
.then((res) => {
|
||||
modalAdd.value = false;
|
||||
success($q, "แก้ไขข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab ดูวันหยุดตามประเภท
|
||||
* @param tab tab ประเภทวันหยุดที่เลือก
|
||||
*/
|
||||
const changeTab = async (tab: string) => {
|
||||
currentTab.value = tab;
|
||||
await fetchData();
|
||||
};
|
||||
|
||||
/**
|
||||
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
|
||||
* @param val ช่วงวันที่
|
||||
*/
|
||||
const dateThaiRange = (val: [Date, Date]) => {
|
||||
if (val === null) {
|
||||
return "";
|
||||
} else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
|
||||
return `${dateMonth2Thai(val[0], true)}`;
|
||||
} else {
|
||||
return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
|
||||
* @param val ช่วงวันที่
|
||||
*/
|
||||
const dayThaiRange = (val: [Date, Date]) => {
|
||||
if (val === null) {
|
||||
} else if (dateToISO(val[0]) == dateToISO(val[1])) {
|
||||
return `${weekThai(new Date(val[0]).getDay())}`;
|
||||
} else {
|
||||
return `${weekThai(new Date(val[0]).getDay())} - ${weekThai(
|
||||
new Date(val[1]).getDay()
|
||||
)}`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- tab รายการ หน้าปฏิทินวันหยุด -->
|
||||
<template>
|
||||
<q-card class="q-mt-md" flat bordered>
|
||||
|
|
@ -37,14 +357,7 @@
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="grey"
|
||||
@click.stop
|
||||
size="10px"
|
||||
icon="more_vert"
|
||||
>
|
||||
<q-btn flat round color="grey" @click.stop icon="more_vert">
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item
|
||||
|
|
@ -53,7 +366,10 @@
|
|||
@click="editCalendar(props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>แก้ไขวันหยุด</q-item-label>
|
||||
<div class="row items-center">
|
||||
<q-icon color="edit" name="edit" size="xs" />
|
||||
<div class="q-pl-md">แก้ไขวันหยุด</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
|
|
@ -62,7 +378,10 @@
|
|||
@click="deleteClick(props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>ลบวันหยุด</q-item-label>
|
||||
<div class="row items-center">
|
||||
<q-icon color="red" name="mdi-delete" size="xs" />
|
||||
<div class="q-pl-md">ลบวันหยุด</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -233,364 +552,7 @@
|
|||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- modal ลบวันหยุด -->
|
||||
<q-dialog v-model="modalDelete" persistent>
|
||||
<q-card style="min-width: 550px">
|
||||
<q-card-section class="row items-center q-pb-xs">
|
||||
<div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row items-center">
|
||||
<div class="q-pr-md">
|
||||
<q-avatar
|
||||
icon="mdi-trash-can-outline"
|
||||
font-size="25px"
|
||||
size="lg"
|
||||
color="red-1"
|
||||
text-color="red"
|
||||
/>
|
||||
</div>
|
||||
<div class="col text-dark">
|
||||
<span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn label="ตกลง" color="primary" @click="deleteConfirm" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
DataDateRowObject,
|
||||
DataDateAddObject,
|
||||
DataDateListsObject,
|
||||
TabsObject,
|
||||
} from "@/modules/01_metadata/interface/index/Calendar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const props = defineProps({
|
||||
dateYear: {
|
||||
//filter ปี วันหยุด
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
refreshData: {
|
||||
//หน้า main มีการอัพเดทค่าให้ refresh data
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
fetchDataSummaryCalendar: {
|
||||
//ฟังก์ชันอัพเดทสรุปวันหยุด
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const {
|
||||
success,
|
||||
dateToISO,
|
||||
dateMonth2Thai,
|
||||
weekThai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
|
||||
const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
|
||||
const modalDelete = ref<boolean>(false); //modal ลบวันหยุด
|
||||
const name = ref<string>(""); //ชื่อวันหยุด
|
||||
const isSpecial = ref<boolean>(true); //เช็ควันหยุด
|
||||
const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
|
||||
const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
|
||||
const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
|
||||
|
||||
const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
|
||||
const tabs = ref<TabsObject[]>([
|
||||
{ label: "ทำงานจันทร์-ศุกร์ (5 วัน)", value: "normal" },
|
||||
{ label: "ทำงานจันทร์-เสาร์ (6 วัน)", value: "6day" },
|
||||
]); //tab ประเภทวันหยุดทั้งหมด
|
||||
|
||||
//columns รายการวันหยุด
|
||||
const columns = ref<any>([
|
||||
{
|
||||
name: "week",
|
||||
align: "left",
|
||||
label: "-",
|
||||
sortable: true,
|
||||
field: "week",
|
||||
style: "font-size: 15px",
|
||||
},
|
||||
{
|
||||
name: "holidayDate",
|
||||
align: "left",
|
||||
label: "-",
|
||||
sortable: true,
|
||||
field: "holidayDate",
|
||||
style: "font-size: 15px",
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "-",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
style: "font-size: 15px",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
/**
|
||||
* ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
|
||||
*/
|
||||
watch(props, async (count, prevCount) => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
/**
|
||||
* กดปุ่มแก้ไขวันหยุด
|
||||
* @param val data วันหยุดทั้ง row
|
||||
*/
|
||||
const editCalendar = async (val: DataDateListsObject) => {
|
||||
rowData.value = val;
|
||||
dateAdd.value = [val.dateRange[0], val.dateRange[1]];
|
||||
name.value = val.detail;
|
||||
isSpecial.value = true;
|
||||
modalAdd.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* กดปุ่มลบวันหยุด
|
||||
* @param val data วันหยุดทั้ง row
|
||||
*/
|
||||
const deleteClick = async (val: DataDateListsObject) => {
|
||||
rowData.value = val;
|
||||
modalDelete.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* fetch วันหยุดในรายการ
|
||||
*/
|
||||
const fetchData = async () => {
|
||||
calendarData.value = [];
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.listHolidayHistoryYear(props.dateYear))
|
||||
.then((res) => {
|
||||
let data = res.data.result.normal;
|
||||
if (currentTab.value == "6day") {
|
||||
data = res.data.result.sixDays;
|
||||
}
|
||||
const dateStart = ref<Date | null>();
|
||||
const firstEvent = ref<boolean>(true);
|
||||
const dateRow = ref<DataDateRowObject[]>([]);
|
||||
data.map((e: RequestItemsObject, index: number) => {
|
||||
dateRow.value.push({
|
||||
holidayDate: new Date(e.holidayDate),
|
||||
name: e.name,
|
||||
isSpecial: true,
|
||||
id: e.id,
|
||||
});
|
||||
if (
|
||||
index == data.length - 1 ||
|
||||
data[index + 1].name != e.name ||
|
||||
(data[index + 1].name == e.name &&
|
||||
dateToISO(new Date(data[index + 1].holidayDate)) !=
|
||||
dateToISO(
|
||||
new Date(
|
||||
new Date(e.holidayDate).setDate(
|
||||
new Date(e.holidayDate).getDate() + 1
|
||||
)
|
||||
)
|
||||
))
|
||||
) {
|
||||
firstEvent.value = true;
|
||||
calendarData.value.push({
|
||||
id: e.id,
|
||||
dateRange: [
|
||||
dateStart.value ? dateStart.value : new Date(e.holidayDate),
|
||||
new Date(e.holidayDate),
|
||||
],
|
||||
dataRangeRow: dateRow.value,
|
||||
detail:
|
||||
dateToISO(new Date(e.holidayDate)) ==
|
||||
dateToISO(new Date(e.originalDate))
|
||||
? e.name
|
||||
: `ชดเชย ${e.name}`,
|
||||
isSpecial: true,
|
||||
});
|
||||
dateStart.value = null;
|
||||
dateRow.value = [];
|
||||
} else if (firstEvent.value == true) {
|
||||
firstEvent.value = false;
|
||||
dateStart.value = new Date(e.holidayDate);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await props.fetchDataSummaryCalendar();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ลบข้อมูลวันหยุด
|
||||
*/
|
||||
const deleteConfirm = async () => {
|
||||
modalDelete.value = false;
|
||||
const dataDelete = ref<DataDateAddObject[]>([]);
|
||||
if (rowData.value != null) {
|
||||
await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
|
||||
dataDelete.value.push({
|
||||
year: new Date(e.holidayDate).getFullYear(),
|
||||
holidayDate: dateToISO(e.holidayDate),
|
||||
name: e.name,
|
||||
isSpecial: true,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
showLoader();
|
||||
await http
|
||||
.post(
|
||||
config.API.listHolidayHistoryDelete(currentTab.value),
|
||||
dataDelete.value
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* บันทึกแก้ไขวันหยุด
|
||||
*/
|
||||
const editData = async () => {
|
||||
await formDate.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
const dataEdit = ref<DataDateAddObject[]>([]);
|
||||
let i = 0;
|
||||
const dateStart = ref<Date>(dateAdd.value[0]);
|
||||
do {
|
||||
i = i + 1;
|
||||
dataEdit.value.push({
|
||||
year: new Date(dateStart.value).getFullYear(),
|
||||
holidayDate: dateToISO(new Date(dateStart.value)),
|
||||
name: name.value,
|
||||
isSpecial: true,
|
||||
});
|
||||
dateStart.value = new Date(
|
||||
new Date(dateStart.value).setDate(
|
||||
new Date(dateStart.value).getDate() + 1
|
||||
)
|
||||
);
|
||||
} while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
|
||||
const _dataHistory = ref<DataDateAddObject[]>([]);
|
||||
if (rowData.value != null) {
|
||||
rowData.value.dataRangeRow.map(
|
||||
(e: DataDateRowObject, index: number) => {
|
||||
_dataHistory.value.push({
|
||||
year: new Date(e.holidayDate).getFullYear(),
|
||||
holidayDate: dateToISO(e.holidayDate),
|
||||
name: e.name,
|
||||
isSpecial: true,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.listHolidayHistoryEdit(currentTab.value), {
|
||||
history: _dataHistory.value,
|
||||
updated: dataEdit.value,
|
||||
})
|
||||
.then((res) => {
|
||||
modalAdd.value = false;
|
||||
success($q, "แก้ไขข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab ดูวันหยุดตามประเภท
|
||||
* @param tab tab ประเภทวันหยุดที่เลือก
|
||||
*/
|
||||
const changeTab = async (tab: string) => {
|
||||
currentTab.value = tab;
|
||||
await fetchData();
|
||||
};
|
||||
|
||||
/**
|
||||
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
|
||||
* @param val ช่วงวันที่
|
||||
*/
|
||||
const dateThaiRange = (val: [Date, Date]) => {
|
||||
if (val === null) {
|
||||
return "";
|
||||
} else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
|
||||
return `${dateMonth2Thai(val[0], true)}`;
|
||||
} else {
|
||||
return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
|
||||
* @param val ช่วงวันที่
|
||||
*/
|
||||
const dayThaiRange = (val: [Date, Date]) => {
|
||||
if (val === null) {
|
||||
} else if (dateToISO(val[0]) == dateToISO(val[1])) {
|
||||
return `${weekThai(new Date(val[0]).getDay())}`;
|
||||
} else {
|
||||
return `${weekThai(new Date(val[0]).getDay())} - ${weekThai(
|
||||
new Date(val[1]).getDay()
|
||||
)}`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.custom-header-table {
|
||||
|
|
|
|||
|
|
@ -242,7 +242,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="deleteData(props.row.id)"
|
||||
|
|
|
|||
|
|
@ -276,7 +276,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click="onEdit(props.row)"
|
||||
|
|
@ -288,7 +287,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -434,7 +434,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click="onEdit(props.row.id)"
|
||||
|
|
@ -446,7 +445,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -347,7 +347,6 @@ const dialogOrder = ref<boolean>(false);
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -369,7 +368,6 @@ const dialogOrder = ref<boolean>(false);
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -402,7 +400,6 @@ const dialogOrder = ref<boolean>(false);
|
|||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
|
|||
|
|
@ -261,14 +261,13 @@ async function onSubmit() {
|
|||
class="cursor-pointer"
|
||||
@click.stop="onclickDetail(props.row.id)"
|
||||
>
|
||||
<q-td auto-width>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="edit"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -288,7 +287,6 @@ async function onSubmit() {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -318,7 +316,6 @@ async function onSubmit() {
|
|||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
|
|||
|
|
@ -215,7 +215,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -234,7 +233,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -230,7 +229,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -230,7 +229,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -230,7 +229,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -230,7 +229,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -239,7 +239,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -258,7 +257,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -225,7 +225,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -245,7 +244,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -215,7 +215,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -234,7 +233,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -255,7 +255,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -274,7 +273,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -268,7 +268,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -288,7 +287,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -352,7 +352,6 @@ onMounted(() => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="mdi-content-copy"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -368,7 +367,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-pencil"
|
||||
clickable
|
||||
@click.stop="onClickOpenDialog(true, props.row)"
|
||||
|
|
@ -381,7 +379,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="deletePos(props.row.id)"
|
||||
|
|
@ -399,7 +396,6 @@ onMounted(() => {
|
|||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
|
|||
|
|
@ -263,7 +263,6 @@ onMounted(() => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
@click.stop="onClickOpenDialogEdit(props.row)"
|
||||
>
|
||||
|
|
@ -274,7 +273,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="onClickDelete(props.row.id)"
|
||||
|
|
|
|||
|
|
@ -290,7 +290,6 @@ onMounted(() => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
@click.stop.pervent="onClickOpenDialog(true, props.row)"
|
||||
>
|
||||
|
|
@ -301,7 +300,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
@click="onClickDelete(props.row.id)"
|
||||
>
|
||||
|
|
@ -319,7 +317,6 @@ onMounted(() => {
|
|||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
|
|||
|
|
@ -353,7 +353,6 @@ onMounted(() => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="mdi-content-copy"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -369,7 +368,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-pencil"
|
||||
clickable
|
||||
@click.stop="editDetiail(props.row)"
|
||||
|
|
@ -382,7 +380,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="deletePos(props.row.id)"
|
||||
|
|
|
|||
|
|
@ -263,7 +263,6 @@ async function onSubmit() {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -283,7 +282,6 @@ async function onSubmit() {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -195,7 +195,6 @@ onMounted(() => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -211,7 +210,6 @@ onMounted(() => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="deletePos(props.row.id)"
|
||||
|
|
|
|||
|
|
@ -321,7 +321,6 @@ onMounted(async () => {
|
|||
dense
|
||||
round
|
||||
class="q-mr-xs"
|
||||
size="12px"
|
||||
icon="edit"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
@ -349,7 +348,6 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
|
|
|
|||
|
|
@ -284,7 +284,6 @@ onMounted(() => {
|
|||
flat
|
||||
round
|
||||
color="red"
|
||||
size="14px"
|
||||
icon="mdi-delete "
|
||||
@click.pervent="onClickDelete(props.row.id)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -416,14 +416,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="grey"
|
||||
@click.stop
|
||||
size="14px"
|
||||
icon="more_vert"
|
||||
>
|
||||
<q-btn flat round color="grey" @click.stop icon="more_vert">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 180px">
|
||||
<q-item
|
||||
|
|
@ -438,7 +431,7 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
<q-icon
|
||||
color="primary"
|
||||
color="edit"
|
||||
size="xs"
|
||||
name="mdi-pencil-outline"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -451,14 +451,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="grey"
|
||||
@click.stop
|
||||
size="14px"
|
||||
icon="more_vert"
|
||||
>
|
||||
<q-btn flat round color="grey" @click.stop icon="more_vert">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 180px">
|
||||
<q-item
|
||||
|
|
@ -473,7 +466,7 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
<q-icon
|
||||
color="primary"
|
||||
color="edit"
|
||||
size="xs"
|
||||
name="mdi-pencil-outline"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -467,8 +467,7 @@ watch(tab, () => {
|
|||
flat
|
||||
round
|
||||
icon="edit"
|
||||
color="primary"
|
||||
size="12px"
|
||||
color="edit"
|
||||
@click.petvent="
|
||||
() => {
|
||||
typeOnSubmit = 'edit';
|
||||
|
|
@ -477,7 +476,7 @@ watch(tab, () => {
|
|||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
|
||||
<q-tooltip>แก้ไขการสำรองข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
|
|
@ -487,10 +486,9 @@ watch(tab, () => {
|
|||
:disable="restoreRunTotal !== 0"
|
||||
icon="delete"
|
||||
color="red"
|
||||
size="12px"
|
||||
@click.petvent="onDelete(props.row.id)"
|
||||
>
|
||||
<q-tooltip>คืนค่า </q-tooltip>
|
||||
<q-tooltip>ลบรายการสำรองข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
|
|||
|
|
@ -237,10 +237,9 @@ function onRestore(name: string) {
|
|||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
size="12px"
|
||||
@click.petvent="onDelete(props.row.name)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
|
||||
<q-tooltip>ลบข้อมูลสำรอง</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
|
|
@ -250,11 +249,10 @@ function onRestore(name: string) {
|
|||
round
|
||||
:disable="restoreRunTotal !== 0"
|
||||
icon="restore"
|
||||
color="primary"
|
||||
size="12px"
|
||||
color="blue"
|
||||
@click.petvent="onRestore(props.row.name)"
|
||||
>
|
||||
<q-tooltip>คืนค่า </q-tooltip>
|
||||
<q-tooltip>คืนค่า</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue