hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

เพิ่มปุ่มลบ/refactor

Browse source
This commit is contained in:
AnandaTon 2024-01-12 17:45:20 +07:00
parent 01b550520e
commit aa76e7d030
30 changed files with 8420 additions and 7699 deletions
Download patch file Download diff file Expand all files Collapse all files

294
src/modules/05_leave/components/FormLeave/Form.vue
View file

@ -5,167 +5,169 @@ import { useQuasar } from "quasar";
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
/**ตัวแปรที่ใช้ */
const mixin = useCounterMixin();
const dataStore = useLeaveStore();
const { date2Thai } = mixin;
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
model: {
type: String,
default: "",
},
model: {
type: String,
default: "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
dateStart: new Date(),
subject: "เรื่อง",
who: "เรียนผู้ใด",
requestName: "ชื่อผู้ยื่น",
position: "ตำแหน่ง",
level: "ระดับ",
ocRequest: "สังกัด",
leaveabsentDaySummon: "2",
leaveUse: "1",
leaveRemaining: "1",
dateStart: new Date(),
subject: "เรื่อง",
who: "เรียนผู้ใด",
requestName: "ชื่อผู้ยื่น",
position: "ตำแหน่ง",
level: "ระดับ",
ocRequest: "สังกัด",
leaveabsentDaySummon: "2",
leaveUse: "1",
leaveRemaining: "1",
});
/**Hook */
onMounted(() => {
dataStore.typeLeave = "";
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) => !!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-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
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>
<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) => !!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-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
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>