erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-04-13 21:58:04 +07:00
parent 631527225e
commit 0011c3ced9
25 changed files with 1956 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/datepicker/PickDay.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-2" style="width: 300px">
<div class="field is-grouped mb-4 border-bottom">
<div class="field is-grouped">
<div class="control pl-2">
<a class="mr-1" @click="previousYear()">
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
@@ -10,8 +10,8 @@
</a>
</div>
<div class="control is-expanded has-text-centered">
<a class="fsb-16 mr-2" @click="type='months'" v-if="type==='days'">{{`T${month}`}}</a>
<a class="fsb-16" @click="type='years'">{{ caption || year }}</a>
<a class="font-bold mr-2" @click="type='months'" v-if="type==='days'">{{`T${month}`}}</a>
<a class="font-bold" @click="type='years'">{{ caption || year }}</a>
</div>
<div class="control pr-2">
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
@@ -22,36 +22,41 @@
</a>
</div>
</div>
<hr class="mt-0 mb-5" />
<div v-if="type==='days'">
<div class="columns is-mobile mx-0 mb-3">
<div class="column p-0 has-text-grey-light-dark is-flex is-justify-content-center is-align-items-center" style="height: 32px;" v-for="(m,h) in dateOfWeek" :key="h">
<div
v-for="(m, h) in dateOfWeek"
:key="h"
class="fs-14 column p-0 has-text-grey is-flex is-justify-content-center is-align-items-center"
>
{{ m.text }}
</div>
</div>
<div :class="`columns is-mobile mx-0 mb-1 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
<div class="column p-0 is-flex is-justify-content-center is-align-items-center" style="width: 40px; height: 32px" v-for="(m,h) in v.dates" :key="h">
<span class="fs-14 has-text-grey-light" v-if="m.disable">
<span class="fs-13 has-text-grey-80" v-if="m.disable">
{{m.dayPrint}}
</span>
<a class="fs-14" @click="choose(m)" v-else>
<span class="fs-13 is-clickable" @click="choose(m)" v-else>
<span
style="width: 25px; height: 25px; border-radius: 4px"
style="width: 25px; height: 25px"
:class="[
'p-1 is-flex is-justify-content-center is-align-items-center',
'p-1 rounded-md is-flex is-justify-content-center is-align-items-center',
{
'has-background-primary has-text-white': m.date === curdate,
'has-background-light has-text-white': m.date === today,
'has-text-grey-light': m.currentMonth !== m.monthCondition
'has-background-primary-50 has-text-white': m.date === curdate,
'has-background-success-50 has-text-white': m.date === today,
'has-text-grey-70': m.currentMonth !== m.monthCondition
}
]"
>
{{ m.dayPrint }}
</span>
</a>
</span>
</div>
</div>
<div class="border-bottom"></div>
<div class="mt-2">
<hr class="my-1" />
<div class="mt-2 fs-14">
<span class="ml-2">Hôm nay: </span>
<a class="has-text-primary" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</a>
</div>
@@ -112,6 +117,7 @@
weeks.value.map(v=>{
v.dates = dates.filter(x=>x.week===v.week)
})
console.log('weeks.value', weeks.value)
}
function nextMonth() {
month = month + 1
@@ -177,5 +183,9 @@
watch(() => props.date, (newVal, oldVal) => {
showDate()
})
</script>
</script>
<style scoped>
a {
color: var(--bulma-link-60);
}
</style>