Refactor DatePicker and Type2 components

This commit is contained in:
kur0nek-o
2024-02-28 18:05:23 +07:00
parent 48749849ca
commit 68fd3e6bee
6 changed files with 1006 additions and 484 deletions

View File

@@ -15,6 +15,7 @@ import {
} from './reference'
import { onMounted, ref } from 'vue'
import { getMonthName } from '@/utils/texts'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -42,6 +43,7 @@ const tahunIndex = years.value.findIndex((year) => year.id === tahun.value.id)
if (tahunIndex !== -1) {
years.value.splice(tahunIndex, 1)
}
const data = ref({
regional: regional.value,
uid: uid.value,
@@ -60,6 +62,7 @@ const setRegional = (value: any) => {
uid.value = { id: 0, name: uidPlaceholder }
data.value.regional = value
}
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
@@ -79,15 +82,18 @@ const setUlp = (value: any) => {
selectedUp3Ulp(value)
data.value.ulp = value
}
const setMonth = (value: any) => {
bulan.value = value
data.value.bulan = value
console.log(data.value)
}
const setYear = (value: any) => {
tahun.value = value
data.value.tahun = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchRegional()
@@ -98,25 +104,48 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Regional:</label>
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
<Select
@update:selected="setRegional($event)"
:data="itemsRegional"
:placeholder="regionalPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:selected="uid"
:placeholder="uidPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placholder" />
<Select
@update:selected="setUp3($event)"
:selected="uppp"
:data="itemsUp3"
:placeholder="up3Placholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:selected="ulp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">