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

fix: table_67.vue

Browse Source
This commit is contained in:
kur0nek-o
2024-02-24 15:29:03 +07:00
parent cbd9ac49d5
commit 3ad1f8fe27
5 changed files with 417 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Form/FiltersType/Type13.vue
View File

@ -2,14 +2,23 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
fetchUid,
itemsUid,
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const uppp = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const up3 = ref({ id: 0, name: up3Placeholder })
const ulp = ref({ id: '', name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
@ -19,24 +28,24 @@ const data = ref({
group: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
data.value.up3 = value;
};
uppp.value = value
selectedUp3Ulp(value)
ulp.value = { id: '', name: ulpPlaceholder }
data.value.up3 = value
}
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
};
ulp.value = value
selectedUlp(value)
data.value.posko = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -45,38 +54,65 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select
@update:selected="setUlp($event)"
:selected="ulp"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker
@update:date-value="
(value) => {
data.periode = value
}
"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Group By Kode Unit Distribusi:</label
>
<InlineRadioGroup @update:group-value="(value) => {
data.group = value
console.log('data.group', value)
}" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
<InlineRadioGroup
@update:group-value="
(value) => {
data.group = value
console.log('data.group', value)
}
"
:radio-items="[
{ id: 1, title: 'Tidak' },
{ id: 2, title: 'Ya, Grupkan' }
]"
/>
</div>
</template>

133
src/components/Form/FiltersType/Type2.vue
View File

@ -1,34 +1,46 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp,fetchRegional,fetchUid,fetchUidWithRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} 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';
const regionalPlaceholder = 'Semua Regional';
const bulanPlaceholder = getMonthName(new Date().getMonth());
const tahunPlaceholder = new Date().getFullYear().toString();
const bulanSelected = new Date().getMonth();
const tahunSelected = new Date().getFullYear();
const uppp = ref({ id: 0, name: up3Placholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
const regional = ref({ id: 0, name: regionalPlaceholder });
import {
selectedUid,
selectedUp3Ulp,
fetchRegional,
fetchUid,
fetchUidByRegional,
itemsUid,
itemsUp3,
itemsUlp,
itemsRegional,
months,
years
} 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'
const regionalPlaceholder = 'Semua Regional'
const bulanPlaceholder = getMonthName(new Date().getMonth())
const tahunPlaceholder = new Date().getFullYear().toString()
const bulanSelected = new Date().getMonth()
const tahunSelected = new Date().getFullYear()
const uppp = ref({ id: 0, name: up3Placholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: '', name: ulpPlaceholder })
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
const regional = ref({ id: 0, name: regionalPlaceholder })
const emit = defineEmits(['update:filters'])
// Find index of January
const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
console.log(bulanSelected)
// Remove January if found
if (bulanIndex !== -1) {
months.splice(bulanIndex, 1);
months.splice(bulanIndex, 1)
}
// Find index of current year
const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
const tahunIndex = years.value.findIndex((year) => year.id === tahun.value.id)
if (tahunIndex !== -1) {
years.value.splice(tahunIndex, 1);
years.value.splice(tahunIndex, 1)
}
const data = ref({
regional: regional.value,
@ -36,48 +48,46 @@ const data = ref({
up3: uppp.value,
posko: ulp.value,
periode: '',
bulan : bulan.value,
tahun : tahun.value
bulan: bulan.value,
tahun: tahun.value
})
const setRegional = (value: any) => {
regional.value = value;
fetchUid();
regional.value = value
fetchUid()
// harusnya fetchUidWithRegional(value);
selectedUid(value);
uid.value = { id: 0, name: uidPlaceholder };
data.value.regional = value;
};
selectedUid(value)
uid.value = { id: 0, name: uidPlaceholder }
data.value.regional = value
}
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placholder };
data.value.uid = value;
};
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: up3Placholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
data.value.up3 = value;
};
uppp.value = value
selectedUp3Ulp(value)
ulp.value = { id: '', name: ulpPlaceholder }
data.value.up3 = value
}
const setUlp = (value: any) => {
ulp.value = value;
selectedUp3Ulp(value);
data.value.posko = value;
};
ulp.value = value
selectedUp3Ulp(value)
data.value.posko = value
}
const setMonth = (value: any) => {
bulan.value = value;
data.value.bulan = value;
bulan.value = value
data.value.bulan = value
console.log(data.value)
};
}
const setYear = (value: any) => {
tahun.value = value;
data.value.tahun = value;
};
tahun.value = value
data.value.tahun = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchRegional()
@ -88,25 +98,33 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placholder" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -118,4 +136,3 @@ onMounted(() => {
</div>
</div>
</template>

28
src/components/Form/FiltersType/Type3.vue
View File

@ -10,13 +10,13 @@ import {
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const uppp = ref({ id: 0, name: up3Placeholder })
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: '', name: ulpPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
@ -32,21 +32,21 @@ watch(data.value, (value) => {
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: up3Placeholder }
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value
up3.value = value
selectedUp3Ulp(value)
ulp.value = { id: '', name: ulpPlaceholder }
ulp.value = { id: 0, name: ulpPlaceholder }
data.value.up3 = value
}
const setUlp = (value: any) => {
ulp.value = value
selectedUlp(value)
data.value.posko = value
data.value.ulp = value
}
onMounted(() => {
fetchUid()
@ -68,13 +68,23 @@ onMounted(() => {
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :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">

48
src/components/Form/FiltersType/reference.ts
View File

@ -54,18 +54,16 @@ const fetchMedia = () => {
}
const fetchUidByRegional = async (regional: number) => {
if (regional == 0) {
itemsUid.value = [];
itemsUid.value = []
} else {
try {
const res = await getUidRegional(regional)
itemsUid.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama.toUpperCase(),
}
));
itemsUid.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama.toUpperCase()
}))
} catch (error) {
console.error('Error fetching data:', error);
console.error('Error fetching data:', error)
}
}
}
@ -73,25 +71,23 @@ const fetchUidByRegional = async (regional: number) => {
const fetchUid = async () => {
try {
const res = await getUid()
itemsUid.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
itemsUid.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama
}))
} catch (error) {
console.error('Error fetching data:', error);
console.error('Error fetching data:', error)
}
}
const fetchDataUp3 = async (uid: number) => {
if (uid == 0) {
itemsUp3.value = [];
itemsUlp.value = [];
itemsPosko.value = [];
itemsUp3.value = []
itemsUlp.value = []
itemsPosko.value = []
} else {
try {
const res = await getUp3(uid);
const res = await getUp3(uid)
itemsUp3.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama
@ -102,7 +98,6 @@ const fetchDataUp3 = async (uid: number) => {
}
}
const fetchDataUlp = async (up3: number) => {
if (up3 == 0) {
itemsUlp.value = []
} else {
@ -135,14 +130,12 @@ const fetchDataPosko = async (up3: number) => {
const fetchRegional = async () => {
try {
const res = await getRegional()
itemsRegional.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama.toUpperCase(),
}
));
itemsRegional.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama.toUpperCase()
}))
} catch (error) {
console.error('Error fetching data:', error);
console.error('Error fetching data:', error)
}
}
@ -167,7 +160,6 @@ const selectedUlp = (value: any) => {
}
export {
selectedUid,
selectedUp3Posko,
selectedUp3Ulp,