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

แก้ UI รายการลา

Browse source
This commit is contained in:
setthawutttty 2025-04-25 16:55:17 +07:00
parent 2ec7426576
commit ddcb98a107
19 changed files with 204 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
View file

@ -119,9 +119,11 @@ const formData = reactive<FremData>({
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
approveStep: "",
leaveSubTypeName: "",
dear: "",
leaveRange: "",
profileType: "",
leaveRangeEnd: "",
});
const isLoadData = ref<boolean>(false);
@ -270,6 +272,10 @@ async function fetchDetailLeave(paramsId: string) {
formData.dear = data.dear ? data.dear : "-";
formData.profileType = data.profileType;
formData.leaveSubTypeName = data.leaveSubTypeName;
formData.leaveRange = data.leaveRange;
formData.leaveRangeEnd = data.leaveRangeEnd;
isLoadData.value = true;
/** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
@ -314,15 +320,24 @@ function checkLeaveType(leaveTypeId: string, formData: FremData) {
checkForm.value = "FormChildbirth";
} else if (type === "LV-005") {
checkForm.value = "FormHoliday";
} else if (type === "LV-006" && formData.ordainDayLocationName !== "-") {
} else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
checkForm.value = "FormUpasom";
} else if (type === "LV-006") {
} else if (
type === "LV-006" &&
formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
) {
checkForm.value = "FormHajj";
} else if (type === "LV-007") {
checkForm.value = "FormCheckSelect";
} else if (type === "LV-008" && formData.studyDayTrainingSubject === "-") {
} else if (
type === "LV-008" &&
formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
) {
checkForm.value = "FormStudy";
} else if (type === "LV-008") {
} else if (
type === "LV-008" &&
formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
) {
checkForm.value = "FormLeaveToTraining";
} else if (type === "LV-009") {
checkForm.value = "FormLeaveToWorkInternational";
@ -564,11 +579,9 @@ onMounted(async () => {
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
<div class="col text-primary">
{{
checkForm !== "FormUpasom" && checkForm !== "FormHajj"
? formData.leaveTypeName
: formData.hajjDayStatus
? "ลาประกอบพิธีฮัจญ์"
: "ลาอุปสมบท"
formData.leaveSubTypeName
? formData.leaveSubTypeName
: formData.leaveTypeName
}}
</div>
</div>
@ -751,9 +764,9 @@ onMounted(async () => {
</div>
<q-space />
<!-- workflowRef?.permission.isUpdate && -->
<q-btn
v-if="
workflowRef?.permission.isUpdate &&
checkPermission($route)?.attrIsUpdate &&
formData.reasonCommander === '-'
"
@ -789,10 +802,10 @@ onMounted(async () => {
</div>
<q-space />
<!-- workflowRef?.permission.isUpdate && -->
<div
class="row q-gutter-sm"
v-if="
workflowRef?.permission.isUpdate &&
checkPermission($route)?.attrIsUpdate &&
formData.reasonOligarch === '-'
"
@ -849,7 +862,7 @@ onMounted(async () => {
</div>
<!-- Workflow -->
<div class="col-xs-12 col-sm-12" v-if="isLoadData">
<!-- <div class="col-xs-12 col-sm-12" >
<WorkFlow
ref="workflowRef"
:id="paramsId"
@ -860,7 +873,7 @@ onMounted(async () => {
: 'SYS_LEAVE_LIST_EMP'
"
/>
</div>
</div> -->
</div>
</div>

15
src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
View file

@ -148,6 +148,8 @@ const formData = reactive<FremData>({
approveStep: "",
dear: "",
profileType: "",
leaveSubTypeName: "",
leaveRangeEnd: "",
});
const isLoadData = ref<boolean>(false);
@ -280,6 +282,9 @@ async function fetchDetailLeave(paramsId: string) {
formData.approveStep = data.approveStep;
formData.dear = data.dear ? data.dear : "-";
formData.profileType = data.profileType;
formData.leaveSubTypeName = data.leaveSubTypeName;
formData.leaveRange = data.leaveRange;
formData.leaveRangeEnd = data.leaveRangeEnd;
isLoadData.value = true;
await fectOptionType();
})
@ -544,7 +549,11 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
<div class="col text-primary">
{{ formData.leaveTypeName }}
{{
formData.leaveSubTypeName
? formData.leaveSubTypeName
: formData.leaveTypeName
}}
</div>
</div>
<div class="col-12 row">
@ -714,7 +723,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
</div>
<!-- Workflow -->
<div class="col-xs-12 col-sm-12" v-if="isLoadData">
<!-- <div class="col-xs-12 col-sm-12" v-if="isLoadData">
<WorkFlow
ref="workflowRef"
:id="paramsId"
@ -724,7 +733,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
: 'SYS_LEAVE_LIST_EMP'
"
/>
</div>
</div> -->
</div>
</div>
<q-separator v-if="checkPermission($route)?.attrIsUpdate" />

2
src/modules/09_leave/components/05_Leave/TableList.vue
View file

@ -316,7 +316,7 @@ onMounted(() => {
}}
</div>
<div v-else-if="col.name == 'leaveTypeName'">
{{ convert(props.row) }}
{{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
</div>
<div v-else-if="col.name == 'profileType'">
{{

10
src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue
View file

@ -1,4 +1,8 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -16,15 +20,15 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveTotal }}</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>

11
src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -15,15 +20,15 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveTotal }}</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ชื่อภรรยา</div>

11
src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -16,15 +21,15 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveTotal }}</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>

12
src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -24,16 +29,15 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveTotal }}</div>
</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div> </div>
<div class="row">
<div class="col text-grey-8"></div>
<div class="col">{{ props.data.leaveTypeDay }}</div>

19
src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -16,23 +21,15 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">
{{
props.data.leaveRange == "ALL"
? props.data.leaveTotal + " วัน"
: props.data.leaveRange == "MORNING"
? "ลาครึ่งวันเช้า (0.5)"
: "ลาครึ่งวันบ่าย (0.5)"
}}
</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8"></div>

16
src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue
View file

@ -1,7 +1,10 @@
<script setup lang="ts">
/** importStore */
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const mixin = useCounterMixin();
const { calculateDurationYmd } = mixin;
@ -48,22 +51,15 @@ function convertDateToEng(dataThia: string) {
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">
{{
calculateDurationYmd(
convertDateToEng(props.data.leaveDateStart),
convertDateToEng(props.data.leaveDateEnd)
)
}}
</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div>

9
src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -15,11 +20,11 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">สาเหตุการลา</div>

13
src/modules/09_leave/components/05_Leave/formDetail/formMain.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -19,11 +24,9 @@ const props = defineProps({
<div class="col">
{{
props.checkForm !== "FormUpasom" && props.checkForm !== "FormHajj"
? props.data.leaveTypeName
: props.data.hajjDayStatus
? "ลาประกอบพิธีฮัจญ์"
: "ลาอุปสมบท"
props.data.leaveSubTypeName
? props.data.leaveSubTypeName
: props.data.leaveTypeName
}}
</div>
</div>

16
src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue
View file

@ -1,7 +1,10 @@
<script setup lang="ts">
/** importStore */
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const mixin = useCounterMixin();
const { calculateDurationYmd } = mixin;
@ -48,22 +51,15 @@ function convertDateToEng(dataThia: string) {
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">
{{
calculateDurationYmd(
convertDateToEng(props.data.leaveDateStart),
convertDateToEng(props.data.leaveDateEnd)
)
}}
</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div>

16
src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue
View file

@ -1,7 +1,10 @@
<script setup lang="ts">
/** importStore */
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const mixin = useCounterMixin();
const { calculateDurationYmd } = mixin;
@ -49,22 +52,15 @@ function convertDateToEng(dataThia: string) {
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">
{{
calculateDurationYmd(
convertDateToEng(props.data.leaveDateStart),
convertDateToEng(props.data.leaveDateEnd)
)
}}
</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div>

10
src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue
View file

@ -1,4 +1,8 @@
<script setup lang="ts">
import { useLeavelistDataStore } from '@/modules/09_leave/stores/LeaveStore';
const store = useLeavelistDataStore()
const { converstType } = store
const props = defineProps({
data: {
type: Object,
@ -16,15 +20,15 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveTotal }}</div>
<div class="col">{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}</div>
</div>
<div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div>

32
src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue
View file

@ -1,4 +1,9 @@
<script setup lang="ts">
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
const store = useLeavelistDataStore();
const { converstType } = store;
const props = defineProps({
data: {
type: Object,
@ -15,11 +20,34 @@ const props = defineProps({
</div>
<div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div>
<div class="col">
{{ props.data.leaveDateStart }}
{{
`${
props.data.leaveRange && props.data.leaveRange !== "ALL"
? `(${converstType(props.data.leaveRange)})`
: ""
}`
}}
</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div>
<div class="col">
{{ props.data.leaveDateEnd }}
{{
`${
props.data.leaveDateStart !== props.data.leaveDateEnd
? `${
props.data.leaveRangeEnd &&
props.data.leaveRangeEnd !== "ALL"
? `(${converstType(props.data.leaveRangeEnd)})`
: ""
}`
: ""
}`
}}
</div>
</div>
<div class="row">
<div class="col text-grey-8">สาเหตุการลา</div>