defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Type18.vue component

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-31 01:33:42 +07:00
parent cd969806dd
commit 1af33222a3
1 changed files with 76 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/Form/FiltersType/Type18.vue
View File

@ -1,23 +1,31 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import SelectMulti from '@/components/SelectMulti.vue';
import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue';
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { onMounted, ref } from 'vue';
import DatePicker from '@/components/DatePicker.vue'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Posko';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const jenisTransakasi = [
{ id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
{ id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi TM', },
{ id: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM', },
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' },
{ id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi TM' },
{ id: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM' },
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
]
const data = ref({
uid: uid.value,
@ -27,6 +35,35 @@ const data = ref({
jenisTransaksi: [],
group: 1
})
watch(data.value, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
const setPosko = (value: any) => {
posko.value = value
selectedPosko(value)
data.value.posko = value
}
const setTags = (value: any) => {
data.value.jenisTransaksi = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -38,31 +75,48 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="selectedUid($event)" :data="itemsUid"
placeholder="Semua Unit Induk Distribusi/Wilayah" />
<Select
@update:selected="setUid($event)"
:data="itemsUid"
placeholder="Semua Unit Induk Distribusi/Wilayah"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" placeholder="Semua Posko" />
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
placeholder="Semua Posko"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Transaksi:</label>
<SelectMulti :tags="jenisTransakasi" placeholder="Semua Jenis Transaksi" useLabel label="Jenis Transaksi" />
<SelectMulti
@update:tags="setTags($event)"
:tags="jenisTransakasi"
placeholder="Semua Jenis Transaksi"
useLabel
label="Jenis Transaksi"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => data.periode = value" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>