Add new store files and update table components
This commit is contained in:
@ -1,76 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { getUid, getUp3,getPosko } from '@/utils/network';
|
||||
import { ref } from 'vue'
|
||||
import { usePostsStore } from '@/stores/posts';
|
||||
import { useUp3Store } from '@/stores/up3';
|
||||
import { useRegionStore } from '@/stores/region';
|
||||
interface Item {
|
||||
id: number;
|
||||
name: any;
|
||||
}
|
||||
|
||||
const items = ref<Item[]>([]);
|
||||
const itemsUp3 = ref<Item[]>([]);
|
||||
const itemsPosko = ref<Item[]>([]);
|
||||
// Fetch data from the API using Axios
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await getUid()
|
||||
// console.log(res.data);
|
||||
|
||||
items.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama,
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchDataUp3 = async (uid: number) => {
|
||||
try {
|
||||
const res = await getUp3(uid)
|
||||
itemsUp3.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama,
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
const fetchDataPosko = async (uppp: number) => {
|
||||
try {
|
||||
const res = await getPosko(uppp)
|
||||
itemsPosko.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama,
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
const selectedUid = (value: any) => {
|
||||
useRegionStore().setData(value.id);
|
||||
fetchDataUp3(value.id);
|
||||
}
|
||||
const selectedUppp = (value: any) => {
|
||||
useUp3Store().setData(value.id);
|
||||
fetchDataPosko(value.id);
|
||||
}
|
||||
const selectedPosko = (value: any) => {
|
||||
usePostsStore().setData(value.id);
|
||||
}
|
||||
|
||||
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
|
||||
fetchData();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -97,5 +29,4 @@ fetchData();
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
@/stores/up3
|
||||
</template>
|
@ -1,13 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -15,13 +17,13 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</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">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
|
72
src/components/Form/FiltersType/reference.ts
Normal file
72
src/components/Form/FiltersType/reference.ts
Normal file
@ -0,0 +1,72 @@
|
||||
|
||||
import { getUid, getUp3,getPosko } from '@/utils/network';
|
||||
import { ref } from 'vue'
|
||||
import { usePostsStore } from '@/stores/posts';
|
||||
import { useUp3Store } from '@/stores/up3';
|
||||
import { useRegionStore } from '@/stores/region';
|
||||
interface Item {
|
||||
id: number;
|
||||
name: any;
|
||||
}
|
||||
|
||||
const items = ref<Item[]>([]);
|
||||
const itemsUp3 = ref<Item[]>([]);
|
||||
const itemsPosko = ref<Item[]>([]);
|
||||
// Fetch data from the API using Axios
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await getUid()
|
||||
// console.log(res.data);
|
||||
|
||||
items.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama,
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchDataUp3 = async (uid: number) => {
|
||||
try {
|
||||
const res = await getUp3(uid)
|
||||
itemsUp3.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama,
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
const fetchDataPosko = async (uppp: number) => {
|
||||
try {
|
||||
const res = await getPosko(uppp)
|
||||
itemsPosko.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama,
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
const selectedUid = (value: any) => {
|
||||
useRegionStore().setData(value.id);
|
||||
fetchDataUp3(value.id);
|
||||
}
|
||||
const selectedUppp = (value: any) => {
|
||||
useUp3Store().setData(value.id);
|
||||
fetchDataPosko(value.id);
|
||||
}
|
||||
const selectedPosko = (value: any) => {
|
||||
usePostsStore().setData(value.id);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export { selectedUid, selectedUppp, selectedPosko ,fetchData , items, itemsUp3, itemsPosko};
|
Reference in New Issue
Block a user