เพิ่มคอมเมนต์ code 05_Leave
This commit is contained in:
AnandaTon
parent
82b4134afd
commit
6621dfd7f0
7 changed files with 1065 additions and 1314 deletions
|
|
@ -1,3 +1,135 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, onMounted } from "vue"
|
||||||
|
import FullCalendar from "@fullcalendar/vue3"
|
||||||
|
import dayGridPlugin from "@fullcalendar/daygrid"
|
||||||
|
import type { CalendarOptions } from "@fullcalendar/core"
|
||||||
|
import timeGridPlugin from "@fullcalendar/timegrid"
|
||||||
|
import interactionPlugin from "@fullcalendar/interaction"
|
||||||
|
import allLocales from "@fullcalendar/core/locales-all"
|
||||||
|
import listPlugin from "@fullcalendar/list"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option ของปฏิทิน
|
||||||
|
*/
|
||||||
|
const fullCalendar = ref<any>() //ref calendar
|
||||||
|
const calendarOptions = ref<CalendarOptions>({
|
||||||
|
plugins: [
|
||||||
|
dayGridPlugin,
|
||||||
|
timeGridPlugin,
|
||||||
|
interactionPlugin, // needed for dateClick
|
||||||
|
listPlugin,
|
||||||
|
],
|
||||||
|
buttonText: {
|
||||||
|
listYear: "รายการ",
|
||||||
|
dayGridMonth: "ปฏิทิน",
|
||||||
|
test: "เพิ่มวันหยุด",
|
||||||
|
},
|
||||||
|
headerToolbar: false,
|
||||||
|
initialView: "dayGridMonth",
|
||||||
|
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
|
||||||
|
selectable: true,
|
||||||
|
dayMaxEvents: true,
|
||||||
|
weekends: true,
|
||||||
|
locale: "th",
|
||||||
|
locales: allLocales,
|
||||||
|
expandRows: true,
|
||||||
|
nowIndicator: true,
|
||||||
|
height: "100%",
|
||||||
|
eventColor: "#fff",
|
||||||
|
eventTextColor: "#4A5568",
|
||||||
|
eventBorderColor: "#50a5fc",
|
||||||
|
displayEventTime: false,
|
||||||
|
editable: true,
|
||||||
|
events: [
|
||||||
|
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-10", allDay: true, status: "done", color: "#E3FDDA" },
|
||||||
|
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-11-10", allDay: true, status: "done", color: "#E3FDDA" },
|
||||||
|
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-11", allDay: true, status: "done", color: "#E3FDDA" },
|
||||||
|
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-12", allDay: true, status: "done", color: "#E3FDDA" },
|
||||||
|
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-13", allDay: true, status: "done", color: "#E3FDDA" },
|
||||||
|
{ groupId: "2", title: "ลาป่วย", start: "2023-10-19", allDay: true, status: "proceed", color: "#e4f3ff" },
|
||||||
|
{ groupId: "1", title: "ลาป่วย", start: "2023-10-20", allDay: true, status: "new", color: "#FFF1CC" },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ตัวแปรทั้งหมด
|
||||||
|
*/
|
||||||
|
const modalCancel = ref(false)
|
||||||
|
const title = ref("")
|
||||||
|
const location = ref("บ้าน")
|
||||||
|
const subject = ref("ลาป่วย")
|
||||||
|
const dateStart = ref("20 ส.ค. 2566")
|
||||||
|
const dateEnd = ref("21 ส.ค. 2566")
|
||||||
|
const numDate = ref("20")
|
||||||
|
const place = ref("บ้าน")
|
||||||
|
const phone = ref("000-00000000")
|
||||||
|
const reason = ref("ยกเลิกการลา")
|
||||||
|
const model = ref(null)
|
||||||
|
const modeCancel = ref(true)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
dateYear: {
|
||||||
|
//filter ปี วันหยุด
|
||||||
|
type: Number,
|
||||||
|
default: () => new Date().getFullYear(),
|
||||||
|
},
|
||||||
|
dateMonth: {
|
||||||
|
//filter เดือน วันหยุด
|
||||||
|
type: Number,
|
||||||
|
default: () => new Date().getMonth(),
|
||||||
|
},
|
||||||
|
// refreshData: {
|
||||||
|
// //หน้า main มีการอัพเดทค่าให้ refresh data
|
||||||
|
// type: Boolean,
|
||||||
|
// required: true,
|
||||||
|
// },
|
||||||
|
fetchDataSummaryCalendar: {
|
||||||
|
//ฟังก์ชันอัพเดทสรุปวันหยุด
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||||
|
*/
|
||||||
|
onMounted(async () => {
|
||||||
|
if (fullCalendar !== undefined) {
|
||||||
|
const calen = fullCalendar.value.getApi()
|
||||||
|
const date = new Date(props.dateYear, props.dateMonth)
|
||||||
|
calen.gotoDate(date)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
|
||||||
|
*/
|
||||||
|
watch(props, async (count, prevCount) => {
|
||||||
|
const calen = fullCalendar.value.getApi()
|
||||||
|
const date = new Date(props.dateYear, props.dateMonth)
|
||||||
|
calen.gotoDate(date)
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชันน์ยกเลิก model
|
||||||
|
* @param text
|
||||||
|
*/
|
||||||
|
const cancel = async (text: string) => {
|
||||||
|
title.value = text
|
||||||
|
modalCancel.value = true
|
||||||
|
modeCancel.value = true
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* ฟังชันน์เปิด model
|
||||||
|
* @param text
|
||||||
|
*/
|
||||||
|
const view = async (text: string) => {
|
||||||
|
title.value = text
|
||||||
|
modalCancel.value = true
|
||||||
|
modeCancel.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="q-mt-sm">
|
<div class="q-mt-sm">
|
||||||
<div class="row q-gutter-sm q-pb-sm main-content">
|
<div class="row q-gutter-sm q-pb-sm main-content">
|
||||||
|
|
@ -79,119 +211,6 @@
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, watch, onMounted } from "vue"
|
|
||||||
import FullCalendar from "@fullcalendar/vue3"
|
|
||||||
import dayGridPlugin from "@fullcalendar/daygrid"
|
|
||||||
import type { CalendarOptions } from "@fullcalendar/core"
|
|
||||||
import timeGridPlugin from "@fullcalendar/timegrid"
|
|
||||||
import interactionPlugin from "@fullcalendar/interaction"
|
|
||||||
import allLocales from "@fullcalendar/core/locales-all"
|
|
||||||
import listPlugin from "@fullcalendar/list"
|
|
||||||
const fullCalendar = ref<any>() //ref calendar
|
|
||||||
const calendarOptions = ref<CalendarOptions>({
|
|
||||||
plugins: [
|
|
||||||
dayGridPlugin,
|
|
||||||
timeGridPlugin,
|
|
||||||
interactionPlugin, // needed for dateClick
|
|
||||||
listPlugin,
|
|
||||||
],
|
|
||||||
buttonText: {
|
|
||||||
listYear: "รายการ",
|
|
||||||
dayGridMonth: "ปฏิทิน",
|
|
||||||
test: "เพิ่มวันหยุด",
|
|
||||||
},
|
|
||||||
headerToolbar: false,
|
|
||||||
initialView: "dayGridMonth",
|
|
||||||
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
|
|
||||||
selectable: true,
|
|
||||||
dayMaxEvents: true,
|
|
||||||
weekends: true,
|
|
||||||
locale: "th",
|
|
||||||
locales: allLocales,
|
|
||||||
expandRows: true,
|
|
||||||
nowIndicator: true,
|
|
||||||
height: "100%",
|
|
||||||
eventColor: "#fff",
|
|
||||||
eventTextColor: "#4A5568",
|
|
||||||
eventBorderColor: "#50a5fc",
|
|
||||||
displayEventTime: false,
|
|
||||||
editable: true,
|
|
||||||
events: [
|
|
||||||
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-10", allDay: true, status: "done", color: "#E3FDDA" },
|
|
||||||
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-11-10", allDay: true, status: "done", color: "#E3FDDA" },
|
|
||||||
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-11", allDay: true, status: "done", color: "#E3FDDA" },
|
|
||||||
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-12", allDay: true, status: "done", color: "#E3FDDA" },
|
|
||||||
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-13", allDay: true, status: "done", color: "#E3FDDA" },
|
|
||||||
{ groupId: "2", title: "ลาป่วย", start: "2023-10-19", allDay: true, status: "proceed", color: "#e4f3ff" },
|
|
||||||
{ groupId: "1", title: "ลาป่วย", start: "2023-10-20", allDay: true, status: "new", color: "#FFF1CC" },
|
|
||||||
],
|
|
||||||
})
|
|
||||||
|
|
||||||
const modalCancel = ref(false)
|
|
||||||
const title = ref("")
|
|
||||||
const location = ref("บ้าน")
|
|
||||||
const subject = ref("ลาป่วย")
|
|
||||||
const dateStart = ref("20 ส.ค. 2566")
|
|
||||||
const dateEnd = ref("21 ส.ค. 2566")
|
|
||||||
const numDate = ref("20")
|
|
||||||
const place = ref("บ้าน")
|
|
||||||
const phone = ref("000-00000000")
|
|
||||||
const reason = ref("ยกเลิกการลา")
|
|
||||||
const model = ref(null)
|
|
||||||
const modeCancel = ref(true)
|
|
||||||
const props = defineProps({
|
|
||||||
dateYear: {
|
|
||||||
//filter ปี วันหยุด
|
|
||||||
type: Number,
|
|
||||||
default: () => new Date().getFullYear(),
|
|
||||||
},
|
|
||||||
dateMonth: {
|
|
||||||
//filter เดือน วันหยุด
|
|
||||||
type: Number,
|
|
||||||
default: () => new Date().getMonth(),
|
|
||||||
},
|
|
||||||
// refreshData: {
|
|
||||||
// //หน้า main มีการอัพเดทค่าให้ refresh data
|
|
||||||
// type: Boolean,
|
|
||||||
// required: true,
|
|
||||||
// },
|
|
||||||
fetchDataSummaryCalendar: {
|
|
||||||
//ฟังก์ชันอัพเดทสรุปวันหยุด
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
/**
|
|
||||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
|
||||||
*/
|
|
||||||
onMounted(async () => {
|
|
||||||
if (fullCalendar !== undefined) {
|
|
||||||
const calen = fullCalendar.value.getApi()
|
|
||||||
const date = new Date(props.dateYear, props.dateMonth)
|
|
||||||
calen.gotoDate(date)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
|
|
||||||
*/
|
|
||||||
watch(props, async (count, prevCount) => {
|
|
||||||
const calen = fullCalendar.value.getApi()
|
|
||||||
const date = new Date(props.dateYear, props.dateMonth)
|
|
||||||
calen.gotoDate(date)
|
|
||||||
})
|
|
||||||
const cancel = async (text: string) => {
|
|
||||||
title.value = text
|
|
||||||
modalCancel.value = true
|
|
||||||
modeCancel.value = true
|
|
||||||
}
|
|
||||||
const view = async (text: string) => {
|
|
||||||
title.value = text
|
|
||||||
modalCancel.value = true
|
|
||||||
modeCancel.value = false
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scope lang="scss">
|
<style scope lang="scss">
|
||||||
.main-content {
|
.main-content {
|
||||||
|
|
|
||||||
|
|
@ -1,525 +1,426 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, computed } from "vue";
|
import { reactive, ref, computed } from "vue"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence";
|
import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
|
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
|
||||||
mixin;
|
|
||||||
|
|
||||||
const edit = ref<boolean>(true);
|
const edit = ref<boolean>(true)
|
||||||
const files = ref<any>(null);
|
const files = ref<any>(null)
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const dateLeaveStartRef = ref<object | null>(null);
|
const dateLeaveStartRef = ref<object | null>(null)
|
||||||
const dateLeaveEndRef = ref<object | null>(null);
|
const dateLeaveEndRef = ref<object | null>(null)
|
||||||
const birthdayRef = ref<object | null>(null);
|
const birthdayRef = ref<object | null>(null)
|
||||||
const dateGovernmentRef = ref<object | null>(null);
|
const dateGovernmentRef = ref<object | null>(null)
|
||||||
const salaryRef = ref<object | null>(null);
|
const salaryRef = ref<object | null>(null)
|
||||||
const telRef = ref<object | null>(null);
|
const telRef = ref<object | null>(null)
|
||||||
const addressLeaveRef = ref<object | null>(null);
|
const addressLeaveRef = ref<object | null>(null)
|
||||||
const capitalRef = ref<object | null>(null);
|
const capitalRef = ref<object | null>(null)
|
||||||
const countryRef = ref<object | null>(null);
|
const countryRef = ref<object | null>(null)
|
||||||
const nameEducationRef = ref<object | null>(null);
|
const nameEducationRef = ref<object | null>(null)
|
||||||
const degreeRef = ref<object | null>(null);
|
const degreeRef = ref<object | null>(null)
|
||||||
const studyRef = ref<object | null>(null);
|
const studyRef = ref<object | null>(null)
|
||||||
const writeatRef = ref<object | null>(null);
|
const writeatRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formData = reactive<any>({
|
const formData = reactive<any>({
|
||||||
writeat: "",
|
writeat: "",
|
||||||
dateLeaveStart: null,
|
dateLeaveStart: null,
|
||||||
dateLeaveEnd: null,
|
dateLeaveEnd: null,
|
||||||
birthday: new Date(),
|
birthday: new Date(),
|
||||||
dateGovernment: new Date(),
|
dateGovernment: new Date(),
|
||||||
salary: 10000,
|
salary: 10000,
|
||||||
salaryText: arabicNumberToText(10000),
|
salaryText: arabicNumberToText(10000),
|
||||||
tel: "",
|
tel: "",
|
||||||
addressLeave: "test",
|
addressLeave: "test",
|
||||||
capital: "",
|
capital: "",
|
||||||
country: "",
|
country: "",
|
||||||
nameEducation: "",
|
nameEducation: "",
|
||||||
degree: "",
|
degree: "",
|
||||||
study: "",
|
study: "",
|
||||||
file: "",
|
file: "",
|
||||||
info: "",
|
info: "",
|
||||||
});
|
})
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const formRef: FormRef09 = {
|
const formRef: FormRef09 = {
|
||||||
dateLeaveStart: dateLeaveStartRef,
|
dateLeaveStart: dateLeaveStartRef,
|
||||||
dateLeaveEnd: dateLeaveEndRef,
|
dateLeaveEnd: dateLeaveEndRef,
|
||||||
birthday: birthdayRef,
|
birthday: birthdayRef,
|
||||||
dateGovernment: dateGovernmentRef,
|
dateGovernment: dateGovernmentRef,
|
||||||
salary: salaryRef,
|
salary: salaryRef,
|
||||||
tel: telRef,
|
tel: telRef,
|
||||||
addressLeave: addressLeaveRef,
|
addressLeave: addressLeaveRef,
|
||||||
capital: capitalRef,
|
capital: capitalRef,
|
||||||
country: countryRef,
|
country: countryRef,
|
||||||
nameEducation: nameEducationRef,
|
nameEducation: nameEducationRef,
|
||||||
degree: degreeRef,
|
degree: degreeRef,
|
||||||
study: studyRef,
|
study: studyRef,
|
||||||
writeat: writeatRef,
|
writeat: writeatRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in formRef) {
|
for (const key in formRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||||
const property = formRef[key];
|
const property = formRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
onSubmit();
|
onSubmit()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ฟังชั่น บันทึก */
|
/** ฟังชั่น บันทึก */
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
dialogConfirm(
|
dialogConfirm(
|
||||||
$q,
|
$q,
|
||||||
async () => {
|
async () => {
|
||||||
console.log(formData);
|
console.log(formData)
|
||||||
props.onSubmit();
|
props.onSubmit()
|
||||||
},
|
},
|
||||||
"ยืนยันการบันทึกข้อมูล",
|
"ยืนยันการบันทึกข้อมูล",
|
||||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* แปลงตัวเลขเงินเดือน
|
||||||
|
*/
|
||||||
const formattedSalary = computed(() => {
|
const formattedSalary = computed(() => {
|
||||||
return formData.salary !== null
|
return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
|
||||||
? formData.salary.toLocaleString("th-TH")
|
})
|
||||||
: "";
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
<form @submit.prevent="onValidate">
|
<form @submit.prevent="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="row q-pa-sm q-col-gutter-sm">
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.writeat"
|
v-model="formData.writeat"
|
||||||
ref="writeatRef"
|
ref="writeatRef"
|
||||||
class="col-12 col-sm-12"
|
class="col-12 col-sm-12"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker v-model="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
|
||||||
v-model="formData.dateLeaveStart"
|
<template #year="{ year }">
|
||||||
class="col-12 col-md-4 col-sm-6"
|
{{ year + 543 }}
|
||||||
menu-class-name="modalfix"
|
</template>
|
||||||
autoApply
|
<template #year-overlay-value="{ value }">
|
||||||
borderless
|
{{ parseInt(value + 543) }}
|
||||||
week-start="0"
|
</template>
|
||||||
:enableTimePicker="false"
|
<template #trigger>
|
||||||
:locale="'th'"
|
<q-input
|
||||||
>
|
ref="dateLeaveStartRef"
|
||||||
<template #year="{ year }">
|
class="full-width datepicker"
|
||||||
{{ year + 543 }}
|
bg-color="white"
|
||||||
</template>
|
outlined
|
||||||
<template #year-overlay-value="{ value }">
|
dense
|
||||||
{{ parseInt(value + 543) }}
|
lazy-rules
|
||||||
</template>
|
hide-bottom-space
|
||||||
<template #trigger>
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
<q-input
|
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null"
|
||||||
ref="dateLeaveStartRef"
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
class="full-width datepicker"
|
>
|
||||||
bg-color="white"
|
<template v-slot:prepend>
|
||||||
outlined
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
dense
|
</template>
|
||||||
lazy-rules
|
</q-input>
|
||||||
hide-bottom-space
|
</template>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
</datepicker>
|
||||||
:model-value="
|
|
||||||
formData.dateLeaveStart != null
|
|
||||||
? date2Thai(formData.dateLeaveStart)
|
|
||||||
: null
|
|
||||||
"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formData.dateLeaveEnd"
|
v-model="formData.dateLeaveEnd"
|
||||||
class="col-12 col-md-4 col-sm-6"
|
class="col-12 col-md-4 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
:readonly="!formData.dateLeaveStart"
|
:readonly="!formData.dateLeaveStart"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:min-date="
|
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
|
||||||
formData.dateLeaveStart
|
>
|
||||||
? new Date(
|
<template #year="{ year }">
|
||||||
formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
|
{{ year + 543 }}
|
||||||
)
|
</template>
|
||||||
: null
|
<template #year-overlay-value="{ value }">
|
||||||
"
|
{{ parseInt(value + 543) }}
|
||||||
>
|
</template>
|
||||||
<template #year="{ year }">
|
<template #trigger>
|
||||||
{{ year + 543 }}
|
<q-input
|
||||||
</template>
|
ref="dateLeaveEndRef"
|
||||||
<template #year-overlay-value="{ value }">
|
class="full-width datepicker"
|
||||||
{{ parseInt(value + 543) }}
|
outlined
|
||||||
</template>
|
dense
|
||||||
<template #trigger>
|
lazy-rules
|
||||||
<q-input
|
bg-color="white"
|
||||||
ref="dateLeaveEndRef"
|
hide-bottom-space
|
||||||
class="full-width datepicker"
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
outlined
|
:readonly="!formData.dateLeaveStart"
|
||||||
dense
|
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
|
||||||
lazy-rules
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
bg-color="white"
|
>
|
||||||
hide-bottom-space
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:readonly="!formData.dateLeaveStart"
|
</template>
|
||||||
:model-value="
|
</q-input>
|
||||||
formData.dateLeaveEnd != null
|
</template>
|
||||||
? date2Thai(formData.dateLeaveEnd)
|
</datepicker>
|
||||||
: null
|
|
||||||
"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<div class="col-12 col-md-4 col-sm-6">
|
<div class="col-12 col-md-4 col-sm-6">
|
||||||
<p
|
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||||
v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
|
ระยะเวลา
|
||||||
class="text-weight-bold text-subtitle1 q-mb-none"
|
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
|
||||||
style="padding-top: 7px; color: #26a69a"
|
</p>
|
||||||
>
|
</div>
|
||||||
ระยะเวลา
|
|
||||||
{{
|
|
||||||
calculateDurationYmd(
|
|
||||||
formData.dateLeaveStart,
|
|
||||||
formData.dateLeaveEnd
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formData.dateGovernment"
|
v-model="formData.dateGovernment"
|
||||||
class="col-12 col-md-3 col-sm-6"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
readonly
|
readonly
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="dateGovernmentRef"
|
ref="dateGovernmentRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
readonly
|
readonly
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||||
:model-value="
|
:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : null"
|
||||||
formData.dateGovernment != null
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||||
? date2Thai(formData.dateGovernment)
|
>
|
||||||
: null
|
<template v-slot:prepend>
|
||||||
"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[
|
</template>
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
</q-input>
|
||||||
]"
|
</template>
|
||||||
>
|
</datepicker>
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formData.birthday"
|
v-model="formData.birthday"
|
||||||
class="col-12 col-md-3 col-sm-6"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
readonly
|
readonly
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="birthdayRef"
|
ref="birthdayRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
readonly
|
readonly
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วันเดือนปีเกิด'}`"
|
:label="`${'วันเดือนปีเกิด'}`"
|
||||||
:model-value="
|
:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
|
||||||
formData.birthday != null
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
? date2Thai(formData.birthday)
|
>
|
||||||
: null
|
<template v-slot:prepend>
|
||||||
"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formattedSalary" ref="salaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
|
||||||
v-model="formattedSalary"
|
|
||||||
ref="salaryRef"
|
|
||||||
class="col-12 col-sm-6 col-md-3"
|
|
||||||
bg-color="white"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
label="เงินเดือนปัจจุบัน"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.salaryText"
|
v-model="formData.salaryText"
|
||||||
ref="salaryRef"
|
ref="salaryRef"
|
||||||
class="col-12 col-sm-6 col-md-3"
|
class="col-12 col-sm-6 col-md-3"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
readonly
|
readonly
|
||||||
outlined
|
outlined
|
||||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.nameEducation"
|
v-model="formData.nameEducation"
|
||||||
ref="nameEducationRef"
|
ref="nameEducationRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ชื่อสถานศึกษา"
|
label="ชื่อสถานศึกษา"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.degree"
|
v-model="formData.degree"
|
||||||
ref="degreeRef"
|
ref="degreeRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ชั้นปริญญา"
|
label="ชั้นปริญญา"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.study"
|
v-model="formData.study"
|
||||||
ref="studyRef"
|
ref="studyRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ศึกษาวิชา"
|
label="ศึกษาวิชา"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.country"
|
v-model="formData.country"
|
||||||
ref="countryRef"
|
ref="countryRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ประเทศ"
|
label="ประเทศ"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.capital"
|
v-model="formData.capital"
|
||||||
ref="capitalRef"
|
ref="capitalRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ด้วยทุน"
|
label="ด้วยทุน"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.tel"
|
v-model="formData.tel"
|
||||||
ref="telRef"
|
ref="telRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
unmasked-value
|
unmasked-value
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
mask="(###)-###-####"
|
mask="(###)-###-####"
|
||||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
/>
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.addressLeave"
|
v-model="formData.addressLeave"
|
||||||
ref="addressLeaveRef"
|
ref="addressLeaveRef"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
/>
|
||||||
]"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
v-model="formData.info"
|
|
||||||
class="col-12 q-mt-sm"
|
|
||||||
bg-color="white"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
type="textarea"
|
|
||||||
label="รายละเอียด"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="col-12 col-sm-6">
|
<div class="col-12 col-sm-6">
|
||||||
<q-file
|
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||||
v-model="formData.file"
|
<template v-slot:prepend>
|
||||||
bg-color="white"
|
<q-icon name="attach_file" color="primary" />
|
||||||
dense
|
</template>
|
||||||
outlined
|
</q-file>
|
||||||
multiple
|
</div>
|
||||||
label="เอกสารประกอบ"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" color="primary" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<div class="col-12 row" v-if="!edit">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
เอกสารเพิ่มเติม
|
</div>
|
||||||
</div>
|
<q-card bordered flat class="full-width">
|
||||||
</div>
|
<q-list separator>
|
||||||
<q-card bordered flat class="full-width">
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
<q-list separator>
|
<q-item-section>
|
||||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
<q-item-label class="full-width ellipsis">
|
||||||
<q-item-section>
|
{{ file.fileName }}
|
||||||
<q-item-label class="full-width ellipsis">
|
</q-item-label>
|
||||||
{{ file.fileName }}
|
|
||||||
</q-item-label>
|
|
||||||
|
|
||||||
<q-item-label caption> </q-item-label>
|
<q-item-label caption> </q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
|
||||||
id="onSubmit"
|
</div>
|
||||||
type="submit"
|
</form>
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,494 +1,397 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, computed } from "vue";
|
import { reactive, ref, computed } from "vue"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence";
|
import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
const $q = useQuasar();
|
|
||||||
const mixin = useCounterMixin();
|
const $q = useQuasar()
|
||||||
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
|
const mixin = useCounterMixin()
|
||||||
mixin;
|
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
|
||||||
const edit = ref<boolean>(true);
|
const edit = ref<boolean>(true)
|
||||||
|
const files = ref<any>(null)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
const files = ref<any>(null);
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formData = reactive<any>({
|
const formData = reactive<any>({
|
||||||
writeat: "",
|
writeat: "",
|
||||||
dateLeaveStart: null,
|
dateLeaveStart: null,
|
||||||
dateLeaveEnd: null,
|
dateLeaveEnd: null,
|
||||||
birthday: new Date(),
|
birthday: new Date(),
|
||||||
dateGovernment: new Date(),
|
dateGovernment: new Date(),
|
||||||
salary: 10000,
|
salary: 10000,
|
||||||
salaryText: arabicNumberToText(10000),
|
salaryText: arabicNumberToText(10000),
|
||||||
tel: "",
|
tel: "",
|
||||||
addressLeave: "test",
|
addressLeave: "test",
|
||||||
capital: "",
|
capital: "",
|
||||||
country: "",
|
country: "",
|
||||||
course: "",
|
course: "",
|
||||||
location: "",
|
location: "",
|
||||||
file: "",
|
file: "",
|
||||||
info: "",
|
info: "",
|
||||||
});
|
})
|
||||||
|
|
||||||
const dateLeaveStartRef = ref<object | null>(null);
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const dateLeaveEndRef = ref<object | null>(null);
|
const dateLeaveStartRef = ref<object | null>(null)
|
||||||
const birthdayRef = ref<object | null>(null);
|
const dateLeaveEndRef = ref<object | null>(null)
|
||||||
const dateGovernmentRef = ref<object | null>(null);
|
const birthdayRef = ref<object | null>(null)
|
||||||
const telRef = ref<object | null>(null);
|
const dateGovernmentRef = ref<object | null>(null)
|
||||||
const addressLeaveRef = ref<object | null>(null);
|
const telRef = ref<object | null>(null)
|
||||||
const capitalRef = ref<object | null>(null);
|
const addressLeaveRef = ref<object | null>(null)
|
||||||
const countryRef = ref<object | null>(null);
|
const capitalRef = ref<object | null>(null)
|
||||||
const courseRef = ref<object | null>(null);
|
const countryRef = ref<object | null>(null)
|
||||||
const locationRef = ref<object | null>(null);
|
const courseRef = ref<object | null>(null)
|
||||||
const writeatRef = ref<object | null>(null);
|
const locationRef = ref<object | null>(null)
|
||||||
|
const writeatRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const formRef: FormRef10 = {
|
const formRef: FormRef10 = {
|
||||||
dateLeaveStart: dateLeaveStartRef,
|
dateLeaveStart: dateLeaveStartRef,
|
||||||
dateLeaveEnd: dateLeaveEndRef,
|
dateLeaveEnd: dateLeaveEndRef,
|
||||||
birthday: birthdayRef,
|
birthday: birthdayRef,
|
||||||
dateGovernment: dateGovernmentRef,
|
dateGovernment: dateGovernmentRef,
|
||||||
tel: telRef,
|
tel: telRef,
|
||||||
addressLeave: addressLeaveRef,
|
addressLeave: addressLeaveRef,
|
||||||
capital: capitalRef,
|
capital: capitalRef,
|
||||||
country: countryRef,
|
country: countryRef,
|
||||||
course: courseRef,
|
course: courseRef,
|
||||||
location: locationRef,
|
location: locationRef,
|
||||||
writeat: writeatRef,
|
writeat: writeatRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
|
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
|
|
||||||
for (const key in formRef) {
|
for (const key in formRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||||
const property = formRef[key];
|
const property = formRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
onSubmit();
|
onSubmit()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** ฟังชั่น บันทึก */
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
dialogConfirm(
|
dialogConfirm(
|
||||||
$q,
|
$q,
|
||||||
async () => {
|
async () => {
|
||||||
console.log(formData);
|
console.log(formData)
|
||||||
props.onSubmit();
|
props.onSubmit()
|
||||||
},
|
},
|
||||||
"ยืนยันการบันทึกข้อมูล",
|
"ยืนยันการบันทึกข้อมูล",
|
||||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* แปลงตัวเลขเงินเดือน
|
||||||
|
*/
|
||||||
const formattedSalary = computed(() => {
|
const formattedSalary = computed(() => {
|
||||||
return formData.salary !== null
|
return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
|
||||||
? formData.salary.toLocaleString("th-TH")
|
})
|
||||||
: "";
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
<form @submit.prevent="onValidate">
|
<form @submit.prevent="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="row q-pa-sm q-col-gutter-sm">
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.writeat"
|
v-model="formData.writeat"
|
||||||
ref="writeatRef"
|
ref="writeatRef"
|
||||||
class="col-12 col-sm-12"
|
class="col-12 col-sm-12"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker v-model="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
|
||||||
v-model="formData.dateLeaveStart"
|
<template #year="{ year }">
|
||||||
class="col-12 col-md-4 col-sm-6"
|
{{ year + 543 }}
|
||||||
menu-class-name="modalfix"
|
</template>
|
||||||
autoApply
|
<template #year-overlay-value="{ value }">
|
||||||
borderless
|
{{ parseInt(value + 543) }}
|
||||||
week-start="0"
|
</template>
|
||||||
:enableTimePicker="false"
|
<template #trigger>
|
||||||
:locale="'th'"
|
<q-input
|
||||||
>
|
ref="dateLeaveStartRef"
|
||||||
<template #year="{ year }">
|
class="full-width datepicker"
|
||||||
{{ year + 543 }}
|
bg-color="white"
|
||||||
</template>
|
outlined
|
||||||
<template #year-overlay-value="{ value }">
|
dense
|
||||||
{{ parseInt(value + 543) }}
|
lazy-rules
|
||||||
</template>
|
hide-bottom-space
|
||||||
<template #trigger>
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
<q-input
|
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null"
|
||||||
ref="dateLeaveStartRef"
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
class="full-width datepicker"
|
>
|
||||||
bg-color="white"
|
<template v-slot:prepend>
|
||||||
outlined
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
dense
|
</template>
|
||||||
lazy-rules
|
</q-input>
|
||||||
hide-bottom-space
|
</template>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
</datepicker>
|
||||||
:model-value="
|
|
||||||
formData.dateLeaveStart != null
|
|
||||||
? date2Thai(formData.dateLeaveStart)
|
|
||||||
: null
|
|
||||||
"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formData.dateLeaveEnd"
|
v-model="formData.dateLeaveEnd"
|
||||||
class="col-12 col-md-4 col-sm-6"
|
class="col-12 col-md-4 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!formData.dateLeaveStart"
|
:readonly="!formData.dateLeaveStart"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:min-date="
|
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
|
||||||
formData.dateLeaveStart
|
>
|
||||||
? new Date(
|
<template #year="{ year }">
|
||||||
formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
|
{{ year + 543 }}
|
||||||
)
|
</template>
|
||||||
: null
|
<template #year-overlay-value="{ value }">
|
||||||
"
|
{{ parseInt(value + 543) }}
|
||||||
>
|
</template>
|
||||||
<template #year="{ year }">
|
<template #trigger>
|
||||||
{{ year + 543 }}
|
<q-input
|
||||||
</template>
|
ref="dateLeaveEndRef"
|
||||||
<template #year-overlay-value="{ value }">
|
class="full-width datepicker"
|
||||||
{{ parseInt(value + 543) }}
|
outlined
|
||||||
</template>
|
dense
|
||||||
<template #trigger>
|
lazy-rules
|
||||||
<q-input
|
bg-color="white"
|
||||||
ref="dateLeaveEndRef"
|
hide-bottom-space
|
||||||
class="full-width datepicker"
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
outlined
|
:readonly="!formData.dateLeaveStart"
|
||||||
dense
|
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
|
||||||
lazy-rules
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
bg-color="white"
|
>
|
||||||
hide-bottom-space
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:readonly="!formData.dateLeaveStart"
|
</template>
|
||||||
:model-value="
|
</q-input>
|
||||||
formData.dateLeaveEnd != null
|
</template>
|
||||||
? date2Thai(formData.dateLeaveEnd)
|
</datepicker>
|
||||||
: null
|
|
||||||
"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<div class="col-12 col-md-4 col-sm-6">
|
<div class="col-12 col-md-4 col-sm-6">
|
||||||
<p
|
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||||
v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
|
ระยะเวลา
|
||||||
class="text-weight-bold text-subtitle1 q-mb-none"
|
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
|
||||||
style="padding-top: 7px; color: #26a69a"
|
</p>
|
||||||
>
|
</div>
|
||||||
ระยะเวลา
|
|
||||||
{{
|
|
||||||
calculateDurationYmd(
|
|
||||||
formData.dateLeaveStart,
|
|
||||||
formData.dateLeaveEnd
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formData.dateGovernment"
|
v-model="formData.dateGovernment"
|
||||||
class="col-12 col-md-3 col-sm-6"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
readonly
|
readonly
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="dateGovernmentRef"
|
ref="dateGovernmentRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
outlined
|
outlined
|
||||||
readonly
|
readonly
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||||
:model-value="
|
:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : null"
|
||||||
formData.dateGovernment != null
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||||
? date2Thai(formData.dateGovernment)
|
>
|
||||||
: null
|
<template v-slot:prepend>
|
||||||
"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[
|
</template>
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
</q-input>
|
||||||
]"
|
</template>
|
||||||
>
|
</datepicker>
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formData.birthday"
|
v-model="formData.birthday"
|
||||||
class="col-12 col-md-3 col-sm-6"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
readonly
|
readonly
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="birthdayRef"
|
ref="birthdayRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
readonly
|
readonly
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'วันเดือนปีเกิด'}`"
|
:label="`${'วันเดือนปีเกิด'}`"
|
||||||
:model-value="
|
:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
|
||||||
formData.birthday != null
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
? date2Thai(formData.birthday)
|
>
|
||||||
: null
|
<template v-slot:prepend>
|
||||||
"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
|
||||||
v-model="formattedSalary"
|
|
||||||
class="col-12 col-sm-6 col-md-3"
|
|
||||||
bg-color="white"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
label="เงินเดือนปัจจุบัน"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formData.salaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
|
||||||
v-model="formData.salaryText"
|
</div>
|
||||||
class="col-12 col-sm-6 col-md-3"
|
</div>
|
||||||
dense
|
|
||||||
readonly
|
|
||||||
outlined
|
|
||||||
bg-color="white"
|
|
||||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.course"
|
v-model="formData.course"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
ref="courseRef"
|
ref="courseRef"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ด้าน/หลักสูตร"
|
label="ด้าน/หลักสูตร"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.location"
|
v-model="formData.location"
|
||||||
ref="locationRef"
|
ref="locationRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ณ สถานที่"
|
label="ณ สถานที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.country"
|
v-model="formData.country"
|
||||||
ref="countryRef"
|
ref="countryRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
label="ประเทศ"
|
label="ประเทศ"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.capital"
|
v-model="formData.capital"
|
||||||
ref="capitalRef"
|
ref="capitalRef"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ด้วยทุน"
|
label="ด้วยทุน"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.tel"
|
v-model="formData.tel"
|
||||||
class="col-12 col-sm-6 col-md-4"
|
class="col-12 col-sm-6 col-md-4"
|
||||||
ref="telRef"
|
ref="telRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
unmasked-value
|
unmasked-value
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
mask="(###)-###-####"
|
mask="(###)-###-####"
|
||||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
/>
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formData.addressLeave"
|
v-model="formData.addressLeave"
|
||||||
ref="addressLeaveRef"
|
ref="addressLeaveRef"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
/>
|
||||||
]"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
v-model="formData.info"
|
|
||||||
class="col-12 q-mt-sm"
|
|
||||||
bg-color="white"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
type="textarea"
|
|
||||||
label="รายละเอียด"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="col-12 col-sm-6">
|
<div class="col-12 col-sm-6">
|
||||||
<q-file
|
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||||
v-model="formData.file"
|
<template v-slot:prepend>
|
||||||
bg-color="white"
|
<q-icon name="attach_file" color="primary" />
|
||||||
dense
|
</template>
|
||||||
outlined
|
</q-file>
|
||||||
multiple
|
</div>
|
||||||
label="เอกสารประกอบ"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" color="primary" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<div class="col-12 row" v-if="!edit">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
เอกสารเพิ่มเติม
|
</div>
|
||||||
</div>
|
<q-card bordered flat class="full-width">
|
||||||
</div>
|
<q-list separator>
|
||||||
<q-card bordered flat class="full-width">
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
<q-list separator>
|
<q-item-section>
|
||||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
<q-item-label class="full-width ellipsis">
|
||||||
<q-item-section>
|
{{ file.fileName }}
|
||||||
<q-item-label class="full-width ellipsis">
|
</q-item-label>
|
||||||
{{ file.fileName }}
|
|
||||||
</q-item-label>
|
|
||||||
|
|
||||||
<q-item-label caption> </q-item-label>
|
<q-item-label caption> </q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
|
||||||
id="onSubmit"
|
</div>
|
||||||
type="submit"
|
</form>
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -83,6 +83,7 @@ function onValidate() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** ฟังชั่น บันทึก */
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
dialogConfirm(
|
dialogConfirm(
|
||||||
$q,
|
$q,
|
||||||
|
|
|
||||||
|
|
@ -1,165 +1,75 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive,watch } from "vue";
|
import { ref, reactive, watch } from "vue"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
|
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const dataStore = useLeaveStore()
|
const dataStore = useLeaveStore()
|
||||||
const { date2Thai } = mixin;
|
const { date2Thai } = mixin
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
model: {
|
model: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: "",
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formData = reactive<FormData>({
|
const formData = reactive<FormData>({
|
||||||
dateStart: new Date(),
|
dateStart: new Date(),
|
||||||
subject: "เรื่อง",
|
subject: "เรื่อง",
|
||||||
who: "เรียนผู้ใด",
|
who: "เรียนผู้ใด",
|
||||||
requestName: "ชื่อผู้ยื่น",
|
requestName: "ชื่อผู้ยื่น",
|
||||||
position: "ตำแหน่ง",
|
position: "ตำแหน่ง",
|
||||||
level: "ระดับ",
|
level: "ระดับ",
|
||||||
ocRequest: "สังกัด",
|
ocRequest: "สังกัด",
|
||||||
leaveReceived: "2",
|
leaveReceived: "2",
|
||||||
leaveUse: "1",
|
leaveUse: "1",
|
||||||
leaveRemaining: "1",
|
leaveRemaining: "1",
|
||||||
});
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
<datepicker
|
<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="formData.dateStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
|
||||||
class="col-12 col-sm-4"
|
<template #year="{ year }">
|
||||||
menu-class-name="modalfix"
|
{{ year + 543 }}
|
||||||
v-model="formData.dateStart"
|
</template>
|
||||||
:locale="'th'"
|
<template #year-overlay-value="{ value }">
|
||||||
autoApply
|
{{ parseInt(value + 543) }}
|
||||||
borderless
|
</template>
|
||||||
:enableTimePicker="false"
|
<template #trigger>
|
||||||
week-start="0"
|
<q-input
|
||||||
readonly
|
outlined
|
||||||
>
|
dense
|
||||||
<template #year="{ year }">
|
bg-color="white"
|
||||||
{{ year + 543 }}
|
hide-bottom-space
|
||||||
</template>
|
readonly
|
||||||
<template #year-overlay-value="{ value }">
|
class="full-width datepicker"
|
||||||
{{ parseInt(value + 543) }}
|
:model-value="formData.dateStart != null ? date2Thai(formData.dateStart) : null"
|
||||||
</template>
|
:label="`${'วันที่ยื่นใบลา'}`"
|
||||||
<template #trigger>
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
||||||
<q-input
|
>
|
||||||
outlined
|
<template v-slot:prepend>
|
||||||
dense
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
bg-color="white"
|
</template>
|
||||||
hide-bottom-space
|
</q-input>
|
||||||
readonly
|
</template>
|
||||||
class="full-width datepicker"
|
</datepicker>
|
||||||
:model-value="
|
<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="dataStore.typeLeave" label="เรื่อง" />
|
||||||
formData.dateStart != null ? date2Thai(formData.dateStart) : null
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.who" label="เรียน" />
|
||||||
"
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.requestName" label="ชื่อผู้ยื่นขอ" />
|
||||||
:label="`${'วันที่ยื่นใบลา'}`"
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.position" label="ตำแหน่งผู้ยื่นขอ" />
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.level" label="ระดับผู้ยื่นขอ" />
|
||||||
>
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.ocRequest" label="สังกัดผู้ยื่นขอ" />
|
||||||
<template v-slot:prepend>
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveReceived" label="จำนวนสิทธิ์การลาที่ได้รับ" />
|
||||||
<q-icon
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveUse" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
|
||||||
name="event"
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveRemaining" label="จำนวนสิทธิ์การลาคงเหลือ" />
|
||||||
class="cursor-pointer"
|
</div>
|
||||||
style="color: var(--q-primary)"
|
</q-card>
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-4"
|
|
||||||
dense
|
|
||||||
bg-color="white"
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
v-model="dataStore.typeLeave"
|
|
||||||
label="เรื่อง"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-4"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.who"
|
|
||||||
label="เรียน"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-3"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.requestName"
|
|
||||||
label="ชื่อผู้ยื่นขอ"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-3"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.position"
|
|
||||||
label="ตำแหน่งผู้ยื่นขอ"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-3"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.level"
|
|
||||||
label="ระดับผู้ยื่นขอ"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-3"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.ocRequest"
|
|
||||||
label="สังกัดผู้ยื่นขอ"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-4"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.leaveReceived"
|
|
||||||
label="จำนวนสิทธิ์การลาที่ได้รับ"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-4"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.leaveUse"
|
|
||||||
label="จำนวนสิทธิ์การลาที่ใช้ไป"
|
|
||||||
/>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-sm-4"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
readonly
|
|
||||||
bg-color="white"
|
|
||||||
v-model="formData.leaveRemaining"
|
|
||||||
label="จำนวนสิทธิ์การลาคงเหลือ"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,68 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { QTableProps } from "quasar"
|
||||||
|
import { ref, onMounted } from "vue"
|
||||||
|
import Table from "@/modules/05_leave/componenst/Table.vue"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
|
||||||
|
const LeaveData = useLeaveStore()
|
||||||
|
const { fecthList, searchFilterTable } = LeaveData
|
||||||
|
const filter = ref<string>("")
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ตั้งค่า pagination
|
||||||
|
*/
|
||||||
|
const initialPagination = ref({
|
||||||
|
rowsPerPage: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* mocking ค่าในตัวแปร
|
||||||
|
*/
|
||||||
|
const modalCancel = ref(false)
|
||||||
|
const title = ref("")
|
||||||
|
const location = ref("บ้าน")
|
||||||
|
const subject = ref("ลาป่วย")
|
||||||
|
const dateStart = ref("20 ส.ค. 2566")
|
||||||
|
const dateEnd = ref("21 ส.ค. 2566")
|
||||||
|
const numDate = ref("20")
|
||||||
|
const place = ref("บ้าน")
|
||||||
|
const phone = ref("000-00000000")
|
||||||
|
const reason = ref("ยกเลิกการลา")
|
||||||
|
const model = ref(null)
|
||||||
|
const modeCancel = ref(true)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชันน์ยกเลิก model
|
||||||
|
* @param text
|
||||||
|
*/
|
||||||
|
const cancel = async (text: string) => {
|
||||||
|
title.value = text
|
||||||
|
modalCancel.value = true
|
||||||
|
modeCancel.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชันน์เปิด model
|
||||||
|
* @param text
|
||||||
|
*/
|
||||||
|
const view = async (text: string) => {
|
||||||
|
title.value = text
|
||||||
|
modalCancel.value = true
|
||||||
|
modeCancel.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||||
|
*/
|
||||||
|
onMounted(async () => {
|
||||||
|
searchFilterTable()
|
||||||
|
fecthList([
|
||||||
|
{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "1" },
|
||||||
|
{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "1" },
|
||||||
|
{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "1" },
|
||||||
|
])
|
||||||
|
})
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Table
|
<Table
|
||||||
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
||||||
|
|
@ -86,49 +151,3 @@
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
import type { QTableProps } from "quasar"
|
|
||||||
import { ref, onMounted } from "vue"
|
|
||||||
import Table from "@/modules/05_leave/componenst/Table.vue"
|
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
|
||||||
|
|
||||||
const LeaveData = useLeaveStore()
|
|
||||||
const { fecthList, searchFilterTable } = LeaveData
|
|
||||||
const filter = ref<string>("")
|
|
||||||
|
|
||||||
const initialPagination = ref({
|
|
||||||
rowsPerPage: 0,
|
|
||||||
})
|
|
||||||
|
|
||||||
const modalCancel = ref(false)
|
|
||||||
const title = ref("")
|
|
||||||
const location = ref("บ้าน")
|
|
||||||
const subject = ref("ลาป่วย")
|
|
||||||
const dateStart = ref("20 ส.ค. 2566")
|
|
||||||
const dateEnd = ref("21 ส.ค. 2566")
|
|
||||||
const numDate = ref("20")
|
|
||||||
const place = ref("บ้าน")
|
|
||||||
const phone = ref("000-00000000")
|
|
||||||
const reason = ref("ยกเลิกการลา")
|
|
||||||
const model = ref(null)
|
|
||||||
const modeCancel = ref(true)
|
|
||||||
|
|
||||||
const cancel = async (text: string) => {
|
|
||||||
title.value = text
|
|
||||||
modalCancel.value = true
|
|
||||||
modeCancel.value = true
|
|
||||||
}
|
|
||||||
const view = async (text: string) => {
|
|
||||||
title.value = text
|
|
||||||
modalCancel.value = true
|
|
||||||
modeCancel.value = false
|
|
||||||
}
|
|
||||||
onMounted(async () => {
|
|
||||||
searchFilterTable()
|
|
||||||
fecthList([
|
|
||||||
{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "1" },
|
|
||||||
{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "1" },
|
|
||||||
{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "1" },
|
|
||||||
])
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,60 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs, reactive, onMounted } from "vue"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
|
||||||
|
const LeaveData = useLeaveStore()
|
||||||
|
const { filterSelector, searchFilterTable } = LeaveData
|
||||||
|
const attrs = ref<any>(useAttrs())
|
||||||
|
const table = ref<any>(null)
|
||||||
|
const filterRef = ref<any>(null)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ตั้งค่า pagination
|
||||||
|
*/
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
return start + "-" + end + " ใน " + total
|
||||||
|
}
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
})
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
count: Number,
|
||||||
|
pass: Number,
|
||||||
|
notpass: Number,
|
||||||
|
inputfilter: String,
|
||||||
|
name: String,
|
||||||
|
icon: String,
|
||||||
|
inputvisible: Array,
|
||||||
|
editvisible: Boolean,
|
||||||
|
grid: Boolean,
|
||||||
|
inputShow: Boolean,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชันน์ emit ค่าที่กำหนด
|
||||||
|
*/
|
||||||
|
const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
|
||||||
|
const updateInput = (value: string | number | null) => {
|
||||||
|
emit("update:inputfilter", value)
|
||||||
|
}
|
||||||
|
const updateVisible = (value: []) => {
|
||||||
|
emit("update:inputvisible", value)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* reset ค่าที่ค้นหา
|
||||||
|
*/
|
||||||
|
const resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
emit("update:inputfilter", "")
|
||||||
|
filterRef.value.focus()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="q-py-sm row">
|
<div class="q-py-sm row">
|
||||||
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
|
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
|
||||||
|
|
@ -100,66 +157,7 @@
|
||||||
</q-table>
|
</q-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, useAttrs, reactive, onMounted } from "vue"
|
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
|
||||||
import type { OptionData } from "@/modules/05_leave/interface/index/main"
|
|
||||||
import type { an } from "@fullcalendar/core/internal-common"
|
|
||||||
import { useCounterMixin } from "@/stores/mixin"
|
|
||||||
|
|
||||||
const mixin = useCounterMixin()
|
|
||||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin
|
|
||||||
const DataStore = useLeaveStore()
|
|
||||||
const LeaveData = useLeaveStore()
|
|
||||||
const { filterSelector, searchFilterTable } = LeaveData
|
|
||||||
const attrs = ref<any>(useAttrs())
|
|
||||||
const table = ref<any>(null)
|
|
||||||
const filterRef = ref<any>(null)
|
|
||||||
|
|
||||||
const rows = ref<any[]>([])
|
|
||||||
const type = ref("ทั้งหมด")
|
|
||||||
const status = ref("ทั้งหมด")
|
|
||||||
const pagination = ref({
|
|
||||||
sortBy: "desc",
|
|
||||||
descending: false,
|
|
||||||
page: 1,
|
|
||||||
rowsPerPage: 10,
|
|
||||||
})
|
|
||||||
const initialPagination = ref({
|
|
||||||
rowsPerPage: 0,
|
|
||||||
})
|
|
||||||
const paginationLabel = (start: string, end: string, total: string) => {
|
|
||||||
return start + "-" + end + " ใน " + total
|
|
||||||
}
|
|
||||||
const props = defineProps({
|
|
||||||
count: Number,
|
|
||||||
pass: Number,
|
|
||||||
notpass: Number,
|
|
||||||
|
|
||||||
inputfilter: String,
|
|
||||||
name: String,
|
|
||||||
icon: String,
|
|
||||||
inputvisible: Array,
|
|
||||||
editvisible: Boolean,
|
|
||||||
grid: Boolean,
|
|
||||||
|
|
||||||
inputShow: Boolean,
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
|
|
||||||
const updateInput = (value: string | number | null) => {
|
|
||||||
emit("update:inputfilter", value)
|
|
||||||
}
|
|
||||||
const updateVisible = (value: []) => {
|
|
||||||
emit("update:inputvisible", value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetFilter = () => {
|
|
||||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
|
||||||
emit("update:inputfilter", "")
|
|
||||||
filterRef.value.focus()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.icon-color {
|
.icon-color {
|
||||||
color: #4154b3;
|
color: #4154b3;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue