157 lines
4 KiB
Vue
157 lines
4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from "vue";
|
|
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useLeaveStore } from "@/modules/05_leave/store";
|
|
|
|
const mixin = useCounterMixin();
|
|
const dataStore = useLeaveStore();
|
|
const { date2Thai } = mixin;
|
|
|
|
/** รับ props มาจากหน้าหลัก */
|
|
const props = defineProps({
|
|
model: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
/**Hook */
|
|
onMounted(() => {
|
|
dataStore.typeLeave = "";
|
|
});
|
|
</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="dataStore.dateSendLeave"
|
|
: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"
|
|
:model-value="
|
|
dataStore.dateSendLeave != null
|
|
? date2Thai(dataStore.dateSendLeave)
|
|
: null
|
|
"
|
|
:label="`${'วันที่ยื่นใบลา'}`"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer inputblack"
|
|
style="color: var(--black)"
|
|
>
|
|
</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-4"
|
|
dense
|
|
outlined
|
|
readonly
|
|
bg-color="white"
|
|
v-model="dataStore.fullName"
|
|
label="ชื่อผู้ยื่นขอ"
|
|
/>
|
|
<q-input
|
|
class="col-12 col-sm-4"
|
|
dense
|
|
outlined
|
|
readonly
|
|
bg-color="white"
|
|
v-model="dataStore.positionName"
|
|
label="ตำแหน่งผู้ยื่นขอ"
|
|
/>
|
|
<q-input
|
|
class="col-12 col-sm-4"
|
|
dense
|
|
outlined
|
|
readonly
|
|
bg-color="white"
|
|
v-model="dataStore.positionLevelName"
|
|
label="ระดับผู้ยื่นขอ"
|
|
/>
|
|
<q-input
|
|
class="col-12 text-html"
|
|
dense
|
|
outlined
|
|
readonly
|
|
bg-color="white"
|
|
v-model="dataStore.organizationName"
|
|
label="สังกัดผู้ยื่นขอ"
|
|
/>
|
|
<q-input
|
|
v-if="props.model === 'LV-005'"
|
|
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
|
|
v-if="props.model === 'LV-005'"
|
|
class="col-12 col-sm-4"
|
|
dense
|
|
outlined
|
|
readonly
|
|
bg-color="white"
|
|
v-model="dataStore.leaveRemain"
|
|
label="จำนวนสิทธิ์การลาคงเหลือ"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</template>
|