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

แก้ไขการแสดงผลปุ่มขอลงเวลากรณีพิเศษ แก้สี และ UI

Browse source
This commit is contained in:
Warunee Tamkoo 2025-03-19 15:51:36 +07:00
parent 01f0087beb
commit dce257300b
6 changed files with 66 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/FormTime.vue
View file

@ -42,6 +42,10 @@ const props = defineProps({
console.log('fetchData func')
},
},
action: {
type: String,
default: '',
},
})
const dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
@ -151,7 +155,9 @@ onMounted(() => {
if (dataByIdVal.value == null) {
statusAction.value = true
} else {
date.value = convertDatetimeToAPI(new Date(dataByIdVal.value.checkInDateTime))
date.value = convertDatetimeToAPI(
new Date(dataByIdVal.value.checkInDateTime)
)
}
})
</script>
@ -201,7 +207,11 @@ onMounted(() => {
outlined
dense
:model-value="date !== null ? date2Thai(new Date(date)) : null"
:label="`${'วันที่ขอแก้ไข'}`"
:label="`${
action === 'edit'
? 'วันที่ขอแก้ไข'
: 'วันที่ขอลงเวลากรณีพิเศษ'
}`"
format-header="YYYY-MM-DD"
lazy-rules
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
@ -221,6 +231,7 @@ onMounted(() => {
</q-card>
<q-card
v-if="action === 'edit'"
flat
bordered
class="q-pa-sm col-12 q-mt-sm"

5
src/components/PopUp.vue
View file

@ -31,6 +31,10 @@ const props = defineProps({
type: Function,
default: () => console.log('not function'),
},
action: {
type: String,
default: '',
},
})
const data = ref<DataCheckIn>() // ข้อมูลลงเวลา
@ -64,6 +68,7 @@ watch(
:data-byId="data"
:close-popup="clickClosePopup"
:fetch-data="props.fetchData"
:action="props.action"
/>
</q-card>
</q-dialog>

7
src/components/TableHistory.vue
View file

@ -361,7 +361,11 @@ watch(
</q-td>
<q-td v-if="tab === 'history'">
<q-btn
v-if="!props.row.isEdit"
v-if="
!props.row.isEdit &&
(props.row.checkInStatus != 'ปกติ' ||
props.row.checkOutStatus != 'ปกติ')
"
style="min-width: 110px"
outline
icon="edit"
@ -495,6 +499,7 @@ watch(
:click-close="closePopup"
:title="titlePopup"
:data-ById="dataRow"
action="edit"
/>
</template>

4
src/components/ToolBar.vue
View file

@ -30,7 +30,7 @@ const filterYear = ref<number>(stores.year) //ปีงบประมาณ
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(),
year: stores.year ? stores.year:new Date().getFullYear(),
year: stores.year ? stores.year : new Date().getFullYear(),
})
const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
@ -154,6 +154,7 @@ watch(
<q-space />
<q-btn
v-if="tab === 'time'"
unelevated
icon="add"
:dense="$q.screen.lt.sm"
@ -168,6 +169,7 @@ watch(
:title="titleName"
:clickClose="onClickClose"
:fetchData="props.fetchData"
action="special"
/>
</template>

71
src/views/HomeView.vue
View file

@ -17,7 +17,7 @@ const { date2Thai, showLoader, hideLoader, messageError } = mixin
const $q = useQuasar()
const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
const statusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
const msgCheckTime = ref<string>('') // ข้อความแจ้งเตือน
const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ้งเตือน
@ -30,7 +30,7 @@ async function fetchCheckTime() {
.get(config.API.checkTime())
.then(async (res) => {
const data = await res.data.result
stetusCheckin.value = data.checkInId ? false : true
statusCheckin.value = data.checkInId ? false : true
checkInId.value = data.checkInId ? data.checkInId : ''
})
.catch((err) => {
@ -102,7 +102,7 @@ const model = ref<string>('') // สถานที่ทำงาน
// ตัวเลือกสถานที่ทำงาน
const options = ref<string[]>([
'ปฏิบัติงานที่บ้าน',
'ลืมลงเวลาปฏิบัติงาน',
// 'ลืมลงเวลาปฏิบัติงาน',
'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่',
'ขออนุญาตออกนอกสถานที่',
'อื่นๆ',
@ -236,8 +236,8 @@ async function confirm() {
/** ปิด popup แสดงการลงเวลา*/
async function onClickConfirm() {
showLoader()
if (!stetusCheckin.value) {
stetusCheckin.value = true
if (!statusCheckin.value) {
statusCheckin.value = true
}
// await fetchCheckTime()
@ -257,19 +257,19 @@ function updateWorkplace() {
/**
* รี้เทินร์ class สีพื้นหลัง
* @param val ค่า stetusCheckin
* @param val ค่า statusCheckin
*/
const getClass = (val: boolean) => {
return {
'bg-primary text-white col-12 row items-center q-px-md q-py-sm ': val,
'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm ': !val,
'bg-red-8 text-white col-12 row items-center q-px-md q-py-sm ': !val,
}
}
const getClassXS = (val: boolean) => {
return {
'bg-topIn text-white q-pa-lg col-12 row': val,
'bg-topOut text-white q-pa-lg col-12 row': !val,
'text-white q-pa-lg col-12 row bg-primary': val,
'text-white q-pa-lg col-12 row bg-red-8': !val,
}
}
const inQueue = ref<boolean>(false)
@ -335,22 +335,18 @@ onMounted(async () => {
"
>
<!-- <q-header elevated class="bg-purple"> -->
<div :class="getClass(stetusCheckin)" class="gt-xs">
<div :class="getClass(statusCheckin)" class="gt-xs">
<div class="col">
<div class="row col-12 justify-center q-py-sm text-subtitle1">
<!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
ลงเวลาเข้างาน
</strong> -->
<!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
<strong v-if="!stetusCheckin && inQueue">
<strong v-if="!statusCheckin && inQueue">
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
</strong>
<strong v-else-if="stetusCheckin && inQueue">
<strong v-else-if="statusCheckin && inQueue">
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
</strong>
<strong v-else-if="stetusCheckin && !inQueue">
<strong v-else-if="statusCheckin && !inQueue">
ลงเวลาเข้างาน
</strong>
@ -669,8 +665,10 @@ onMounted(async () => {
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
</p>
<q-btn
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
:color="img == null ? 'grey-6' : 'primary'"
:label="statusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
:color="
img == null ? 'grey-6' : statusCheckin ? 'primary' : 'red-8'
"
push
size="18px"
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
@ -693,23 +691,23 @@ onMounted(async () => {
<!-- top page sticky หน้ามือถือ-->
<q-page-sticky expand position="top" v-if="$q.screen.xs">
<div :class="getClassXS(stetusCheckin)">
<div :class="getClassXS(statusCheckin)">
<div class="col">
<div class="row col-12 justify-right items-center text-body1">
<strong v-if="!stetusCheckin && inQueue">
<div class="row col-12 justify-right items-center text-subtitle1">
<strong v-if="!statusCheckin && inQueue">
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
</strong>
<strong v-else-if="stetusCheckin && inQueue">
<strong v-else-if="statusCheckin && inQueue">
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
</strong>
<strong v-else-if="stetusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
<strong v-else-if="statusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
<strong v-else> ลงเวลาออกงาน </strong>
</div>
<div
class="text-white text-body2 row col-12"
class="text-white text-subtitle1 row col-12"
style="line-height: 1.5rem"
>
{{ date2Thai(Thai) }}
@ -749,8 +747,8 @@ onMounted(async () => {
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
</p>
<q-btn
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
:color="img == null ? 'grey-6' : 'primary'"
:label="statusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
:color="img == null ? 'grey-6' : statusCheckin ? 'primary' : 'red-8'"
push
size="18px"
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
@ -768,20 +766,27 @@ onMounted(async () => {
<!-- แสดงการลงเวลา -->
<q-dialog v-model="modalTime" persistent>
<q-card class="full-width cardNone">
<div :class="getClass(stetusCheckin)">
<div class="col-12 row items-center q-px-md q-py-sm bg-grey-2">
<div class="text-body1 text-center col-12 text-weight-bold">
<span v-if="stetusCheckin">ลงเวลาเข้างานของคุณ</span>
<span v-if="statusCheckin">ลงเวลาเข้างานของคุณ</span>
<span v-else>ลงเวลาออกงานของคุณ</span>
</div>
</div>
<q-card-section class="row col-12 justify-center">
<div class="bg-grey-2 rounded-borders q-pa-md col-11">
<div class="col-12 text-subtitle1 text-center text-weight-medium">
<div
class="rounded-borders q-pa-md col-11"
:class="statusCheckin ? 'bg-primary' : 'bg-red-8'"
>
<div
class="col-12 text-subtitle1 text-center text-white text-weight-medium"
>
{{ date2Thai(Thai) }}
</div>
<div class="row col-12 justify-center q-pt-sm">
<div class="text-h3 text-weight-bold"></div>
<div class="text-h3 text-weight-bold">{{ timeChickin }}</div>
<!-- <div class="text-h3 text-white text-weight-bold"></div> -->
<div class="text-h3 text-white text-weight-bold">
{{ timeChickin }}
</div>
</div>
</div>
<div class="col-12 text-center row q-pt-md">

2
src/views/MapView.vue
View file

@ -99,7 +99,7 @@ const location = ref<string>('')
const model = ref<string>('')
const options = ref<string[]>([
'ปฏิบัติงานที่บ้าน',
'ลืมลงเวลาปฏิบัติงาน',
// 'ลืมลงเวลาปฏิบัติงาน',
'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่',
'ขออนุญาตออกนอกสถานที่',
'อื่นๆ',