Merge branch 'dev-eko-vm' of https://gitea.callysta-engineering.com/APKT/eis into development
This commit is contained in:
rpurnama1409
commit
2f49e6cdd0
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,14 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
||||
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 up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
selectedUlp,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
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 up3 = ref({ id: 0, name: up3Placeholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
|
||||
const data = ref({
|
||||
@ -22,24 +30,24 @@ watch(data.value, (value) => {
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
up3.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
up3.value = value
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.ulp = value;
|
||||
};
|
||||
ulp.value = value
|
||||
selectedUlp(value)
|
||||
data.value.ulp = value
|
||||
}
|
||||
onMounted(() => {
|
||||
fetchUid()
|
||||
emit('update:filters', data.value)
|
||||
@ -48,29 +56,46 @@ 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" :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">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,71 +1,161 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => {
|
||||
filters = value
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3
|
||||
@update:filters="
|
||||
(value) => {
|
||||
filters = value
|
||||
}
|
||||
" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
"
|
||||
/>
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_cc123"
|
||||
data-type="number"
|
||||
caption="a"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_pln_mobile"
|
||||
data-type="number"
|
||||
caption="b"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_comcen"
|
||||
data-type="number"
|
||||
caption="c"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo"
|
||||
data-type="number"
|
||||
caption="d=b+c"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rekomendasi_sistem_mendatangkan_petugas"
|
||||
data-type="number"
|
||||
caption="e"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Diberikan ke Pelanggan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_loket"
|
||||
data-type="number"
|
||||
caption="f"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="dlpd"
|
||||
data-type="number"
|
||||
caption="g"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="history_p2ti"
|
||||
data-type="number"
|
||||
caption="h"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -80,38 +170,45 @@ const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const dataDetail = ref<any>()
|
||||
const data = ref<any[]>([])
|
||||
const showDetail = ref(false)
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const GET_laporanCttKwhPeriksa = gql`
|
||||
query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||
query laporanCttKwhPeriksa(
|
||||
$dateFrom: Date!
|
||||
$dateTo: Date!
|
||||
$posko: String
|
||||
$idUid: Int
|
||||
$idUp3: Int
|
||||
) {
|
||||
laporanCttKwhPeriksa(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
@ -119,65 +216,66 @@ const GET_laporanCttKwhPeriksa = gql`
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
dlpd
|
||||
history_p2ti
|
||||
nama_posko
|
||||
rekomendasi_sistem_mendatangkan_petugas
|
||||
total_wo
|
||||
total_wo_cc123
|
||||
total_wo_comcen
|
||||
total_wo_loket
|
||||
total_wo_pln_mobile
|
||||
dlpd
|
||||
history_p2ti
|
||||
nama_posko
|
||||
rekomendasi_sistem_mendatangkan_petugas
|
||||
total_wo
|
||||
total_wo_cc123
|
||||
total_wo_comcen
|
||||
total_wo_loket
|
||||
total_wo_pln_mobile
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_laporanCttKwhPeriksa,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : '',
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
)
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(GET_laporanCttKwhPeriksa, {
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
}
|
||||
const showData = () => {
|
||||
showDetail.value = true
|
||||
showDetail.value = true
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user