84 lines
3.7 KiB
Vue
84 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue"
|
|
import { useCounterMixin } from "@/stores/mixin"
|
|
import { useQuasar } from "quasar"
|
|
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
|
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
|
import http from "@/plugins/http"
|
|
import config from "@/app.config"
|
|
|
|
const $q = useQuasar()
|
|
const mixin = useCounterMixin()
|
|
const dataStore = useLeaveStore()
|
|
const { date2Thai, success, messageError } = mixin
|
|
|
|
/** รับ props มาจากหน้าหลัก */
|
|
const props = defineProps({
|
|
model: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
onSubmit: {
|
|
type: Function,
|
|
default: () => "",
|
|
},
|
|
})
|
|
|
|
/** ข้อมูล v-model ของฟอร์ม */
|
|
const formData = reactive<FormData>({
|
|
dateStart: new Date(),
|
|
subject: "เรื่อง",
|
|
who: "เรียนผู้ใด",
|
|
requestName: "ชื่อผู้ยื่น",
|
|
position: "ตำแหน่ง",
|
|
level: "ระดับ",
|
|
ocRequest: "สังกัด",
|
|
leaveabsentDaySummon: "2",
|
|
leaveUse: "1",
|
|
leaveRemaining: "1",
|
|
})
|
|
|
|
onMounted(async () => {
|
|
// await FetchProfile()
|
|
})
|
|
</script>
|
|
<template>
|
|
<q-card bordered class="q-pa-md bg-grey-1">
|
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
|
<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>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
bg-color="white"
|
|
hide-bottom-space
|
|
readonly
|
|
class="full-width datepicker"
|
|
:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
|
|
:label="`${'วันที่ยื่นใบลา'}`"
|
|
: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>
|
|
<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="dataStore.dear" label="เรียน" />
|
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.fullName" label="ชื่อผู้ยื่นขอ" />
|
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionName" label="ตำแหน่งผู้ยื่นขอ" />
|
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionLevelName" label="ระดับผู้ยื่นขอ" />
|
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.organizationName" label="สังกัดผู้ยื่นขอ" />
|
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
|
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
|
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
|
|
</div>
|
|
</q-card>
|
|
</template>
|