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

เพิ่มลงเวลากรณีพิเศษ (USER) #32

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-11-24 16:39:55 +07:00
parent 2dea65c4df
commit 0ec7e83d0d
8 changed files with 196 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/api/api.history.ts
View file

@ -1,6 +1,8 @@
import env from './index'
const history = `${env.API_URI}/leave/check-in/history`
const TimeStamp = `${env.API_URI}/leave`
export default {
history: () => `${history}`,
createTimeStamp: () => `${TimeStamp}/user/edit`,
}

72
src/components/FormTime.vue
View file

@ -2,15 +2,19 @@
import { ref, watch, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import moment from 'moment'
import http from '@/plugins/http'
import config from '@/app.config'
import type { FormRef } from '@/interface/index/Main'
import type { FormTimeStemp } from '@/interface/response/checkin'
// importStores
import { useCounterMixin } from '@/stores/mixin'
// importType
import type { FormRef } from '@/interface/index/Main'
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, covertDateObject, dialogConfirm } = mixin
const { date2Thai, success, dialogConfirm } = mixin
const props = defineProps({
dataById: {
@ -21,6 +25,10 @@ const props = defineProps({
type: Function,
required: true,
},
fetcthDataTable: {
type: Function,
require: true,
},
})
const dataByIdVal = ref<any>([])
@ -30,13 +38,6 @@ const checkboxOut = ref<boolean>(false)
const reason = ref<string>('')
const statusAction = ref<boolean>(false)
onMounted(() => {
updateClock()
dataByIdVal.value = props.dataById
if (dataByIdVal.value == null) {
statusAction.value = true
}
})
const dateNow = ref<Date>(new Date())
const timeNoew = ref<string>('')
@ -55,7 +56,10 @@ const objectRef: FormRef = {
reason: reasonRef,
}
const checkstatusBox = ref<boolean>(false)
/** function checkValidate*/
function onCkickSave() {
props.fetcthDataTable?.()
const hasError = []
for (const key in objectRef) {
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
@ -75,14 +79,50 @@ function onCkickSave() {
)
) {
dialogConfirm($q, async () => {
console.log('save')
props.closePopup()
const data: FormTimeStemp = {
checkDate: date.value,
checkInEdit: checkboxIn.value,
checkOutEdit: checkboxOut.value,
description: reason.value,
}
createListTime(data)
})
} else {
console.log('ไม่ผ่าน ')
}
}
/**
* function เพิ่มลงเวลากรณีพิเศษ
* @param data body Request
*/
async function createListTime(data: FormTimeStemp) {
await http
.post(config.API.createTimeStamp(), data)
.then(() => {
success($q, 'บันทึกข้อมูลาำเร็จ')
})
.catch((err) => {
console.log(err)
})
.finally(() => {
props.fetcthDataTable?.()
props.closePopup?.()
})
}
/** Hook */
onMounted(() => {
updateClock()
dataByIdVal.value = props.dataById
if (dataByIdVal.value == null) {
statusAction.value = true
} else {
date.value = new Date(dataByIdVal.value.checkInDateTime)
}
})
watch(
[() => checkboxIn.value, () => checkboxOut.value],
([newCheckboxIn, newCheckboxOut]) => {
@ -116,7 +156,7 @@ watch(
<q-card flat bordered class="col-12 q-mt-sm" v-if="statusAction">
<div class="q-pa-sm">
<VueDatePicker
<datepicker
v-model="date"
:locale="'th'"
autoApply
@ -136,7 +176,7 @@ watch(
outlined
dense
:model-value="date !== null ? date2Thai(date) : null"
:label="`${'กรอกวันที่'}`"
:label="`${'วันที่ขอแก้ไข'}`"
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
lazy-rules
hide-bottom-space
@ -150,7 +190,7 @@ watch(
</q-icon>
</template>
</q-input> </template
></VueDatePicker>
></datepicker>
</div>
</q-card>
@ -159,7 +199,7 @@ watch(
<div class="col-1">
<q-icon color="grey-5" name="calendar_today" />
</div>
<div class="col">{{ covertDateObject(dataByIdVal.date) }}</div>
<div class="col">{{ dataByIdVal.checkInDate }}</div>
</div>
</q-card>
@ -199,7 +239,7 @@ watch(
>
กรุณาเลือก
</div>
<q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
<q-input
ref="reasonRef"

24
src/components/PopUp.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import HeaderPopup from '@/components/HeaderPopup.vue'
import FormTime from '@/components/FormTime.vue'
@ -20,24 +21,33 @@ const props = defineProps({
type: Object,
default: null,
},
fetcthDataTable: {
type: Function,
require: true,
},
})
// -ข้อมูล
const data = ref<any>()
function clickClosePopup() {
props.clickClose()
}
watch(props, () => {
if (props.modal === true) {
data.value = props.dataById
watch(
() => props.modal,
() => {
data.value = props.modal ? props.dataById : null
}
})
)
</script>
<template>
<q-dialog v-model="props.modal">
<q-card class="column" style="width: 300px; min-height: 600px;">
<q-card class="column" style="width: 300px; min-height: 600px">
<HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
<FormTime :dataById="data" :closePopup="clickClosePopup" />
<FormTime
:dataById="data"
:closePopup="clickClosePopup"
:fetcthDataTable="props.fetcthDataTable"
/>
</q-card>
</q-dialog>
</template>

30
src/components/ToolBar.vue
View file

@ -1,16 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue'
// import type { DataOption } from '@/interface/index/Main'
import Popup from '@/components/PopUp.vue'
// import HeaderPopup from "@/components/HeaderPopup.vue";
// import FormTime from "@/components/FormTime.vue";
const props = defineProps({
fetchData: {
type: Function,
require: true,
},
})
const emit = defineEmits(['update:year'])
const filterYear = ref<number>(new Date().getFullYear())
// const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
function filterYearFn() {
console.log('test')
emit('update:year', filterYear.value)
}
const modalPopup = ref<boolean>(false)
@ -57,16 +65,7 @@ function onClickClose() {
</q-input>
</template>
</datepicker>
<!-- <q-select
dense
outlined
style="width: 180px"
label="ปีงบประมาณ"
v-model="filterYear"
:options="yearOption"
option-label="name"
option-value="id"
/> -->
<q-space />
<q-btn
unelevated
@ -80,7 +79,12 @@ function onClickClose() {
</div>
</div>
<Popup :modal="modalPopup" :title="titleName" :clickClose="onClickClose" />
<Popup
:modal="modalPopup"
:title="titleName"
:clickClose="onClickClose"
:fetcthDataTable="props.fetchData"
/>
</template>
<style scoped></style>

24
src/interface/response/checkin.ts
View file

@ -6,11 +6,31 @@ interface FormRef {
interface FormData {
checkInId: string
checkInDate: string | null
checkInDate: Date | null
checkInDateTime: Date
checkInTime: string
checkOutTime: string
checkInStatus: string
checkOutStatus: string
checkInLocation: string
checkOutLocation: string
}
export type { FormRef, FormData }
interface Datalist {
checkInId: string
checkInDate: string | null
checkInDateTime: Date | null
checkInTime: string
checkOutTime: string
checkInStatus: string
checkOutStatus: string
checkInLocation: string
checkOutLocation: string
}
interface FormTimeStemp {
checkDate: Date | null
checkInEdit: boolean
checkOutEdit: boolean
description: string
}
export type { FormRef, FormData, Datalist, FormTimeStemp }

56
src/stores/chekin.ts
View file

@ -1,7 +1,7 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { FormData, Datalist } from '@/interface/response/checkin'
// importStores
import { useCounterMixin } from '@/stores/mixin'
@ -10,14 +10,14 @@ const mixin = useCounterMixin()
const { date2Thai } = mixin
export const useChekIn = defineStore('checkin', () => {
const rows = ref<any>()
const rows = ref<Datalist[]>()
async function fetchHistoryList(data: FormData) {
// console.log(data)
async function fetchHistoryList(data: FormData[]) {
rows.value = []
const datalist = await data.map((e: any) => ({
const datalist: Datalist[] = await data.map((e: FormData) => ({
checkInId: e.checkInId,
checkInDate: date2Thai(e.checkInDate),
checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
checkInDateTime: e.checkInDate,
checkInTime: e.checkInTime,
checkOutTime: e.checkOutTime != '' ? e.checkOutTime : '-',
checkInStatus: convertStatus(e.checkInStatus),
@ -42,31 +42,31 @@ export const useChekIn = defineStore('checkin', () => {
return ''
}
}
function convertStatusEdit(val: string) {
switch (val) {
case 'edit':
return 'ขอแก้ไข'
case 'wait':
return 'รออนุมัติ'
case 'approve':
return 'อนุมัติ'
}
}
function classColorStatus(val: string) {
switch (val) {
case 'wait':
return 'orange'
case 'approve':
return 'green'
case 'reject':
return 'red'
}
}
// function convertStatusEdit(val: string) {
// switch (val) {
// case 'edit':
// return 'ขอแก้ไข'
// case 'wait':
// return 'รออนุมัติ'
// case 'approve':
// return 'อนุมัติ'
// }
// }
// function classColorStatus(val: string) {
// switch (val) {
// case 'wait':
// return 'orange'
// case 'approve':
// return 'green'
// case 'reject':
// return 'red'
// }
// }
return {
rows,
fetchHistoryList,
classColorStatus,
// classColorStatus,
// fetchlistHistory,
}
})

32
src/stores/mixin.ts
View file

@ -208,6 +208,36 @@ export const useCounterMixin = defineStore('mixin', () => {
}
}
const success = (q: any, val: string) => {
// useQuasar ไม่สามารถใช้นอกไฟล์ .vue
if (val !== '') {
return q.notify({
message: val,
color: 'primary',
icon: 'mdi-information',
position: 'bottom-right',
multiLine: true,
timeout: 1000,
badgeColor: 'positive',
classes: 'my-notif-class',
})
}
}
function notify(q: any, val: string) {
if (val !== '') {
q.notify({
color: 'teal-10',
message: val,
icon: 'mdi-information',
position: 'bottom-right',
multiLine: true,
timeout: 7000,
actions: [{ label: 'ปิด', color: 'white', handler: () => {} }],
})
}
}
return {
date2Thai,
showLoader,
@ -215,5 +245,7 @@ export const useCounterMixin = defineStore('mixin', () => {
covertDateObject,
dialogConfirm,
messageError,
success,
notify,
}
})

36
src/views/HistoryView.vue
View file

@ -17,14 +17,10 @@ const { showLoader, hideLoader, messageError } = mixin
const { fetchHistoryList } = stores
const $q = useQuasar() //ใช้ noti quasar
onMounted(() => {
fetchlistHistory()
})
// paging
const page = ref<number>(1)
const year = ref<number>(2023)
const pageSize = ref<number>(2)
const year = ref<number>(new Date().getFullYear())
const pageSize = ref<number>(10)
const total = ref<number>(0)
const maxPage = ref<number>(1)
const filter = ref<string>('') //search data table
@ -47,22 +43,20 @@ async function changePage(
/**
* ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
* @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
* @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
*/
const fetchlistHistory = async (loading = true) => {
loading === true ?? showLoader()
async function fetchlistHistory(loading = true) {
loading === true && showLoader()
await http
.get(
config.API.history() +
`?year=${year.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
)
.then(async (res) => {
const data = res.data.result
total.value = data.total ? data.total : 5
const data = res.data.result.data
total.value = res.data.result.total
maxPage.value = await Math.ceil(total.value / pageSize.value)
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value
fetchHistoryList(data) // ปิดกรณีมี total
// fetchHistoryList(data.data) // เปิดกรณีมี total
})
.catch((err) => {
messageError($q, err)
@ -71,6 +65,20 @@ const fetchlistHistory = async (loading = true) => {
hideLoader()
})
}
/**
* function updateYear
* @param y ปีที่อัปเดท
*/
async function updateYear(y: number) {
year.value = y
y && fetchlistHistory(true)
}
/** Hook*/
onMounted(() => {
fetchlistHistory()
})
</script>
<template>
<div class="col-12 row justify-center">
@ -96,7 +104,7 @@ const fetchlistHistory = async (loading = true) => {
<div class="col-2"></div>
</div>
<div class="col-12 q-pa-md text-grey-9">
<ToolBar />
<ToolBar :fetchData="fetchlistHistory" @update:year="updateYear" />
<Table
:page-size="pageSize"
:total="total"