66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { watchEffect } from 'vue'
|
|
import { VDataTable } from 'vuetify/labs/VDataTable'
|
|
|
|
const props = defineProps({
|
|
item: String,
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
|
|
const route = useRoute('store-details')
|
|
|
|
// Data table options
|
|
const options = ref({ page: 1, itemsPerPage: 10, sortBy: [''], sortDesc: [false] })
|
|
|
|
const fetchedData = ref<Array<Record<string, unknown>>>([])
|
|
const isLoading = ref(false)
|
|
|
|
const fetchData = async () => {
|
|
isLoading.value = true
|
|
|
|
const { data } = await useApi<any>(createUrl(`/items/${props.item}/stock?dbHost=${route.query.dbHost}`))
|
|
|
|
fetchedData.value = data.value
|
|
isLoading.value = false
|
|
}
|
|
|
|
watchEffect(() => {
|
|
if (route.query.dbHost && props.item && !(props.item.trim() === ''))
|
|
fetchData()
|
|
})
|
|
|
|
const headers = computed(() => [
|
|
{ title: t('ITEM_ID'), key: 'itemId' },
|
|
{ title: 'LOCATION', key: 'invLocationId' },
|
|
{ title: 'BUCKET', key: 'bucketId' },
|
|
{ title: 'STOCK', key: 'unitCount' },
|
|
{ title: t('DATE_CREATE'), key: 'createDate' },
|
|
{ title: t('USER_CREATE'), key: 'createUserId' },
|
|
{ title: t('DATE_UPDATE'), key: 'updateDate' },
|
|
{ title: t('USER_UPDATE'), key: 'updateUserId' },
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VCol>
|
|
<div v-if="isLoading">
|
|
<VProgressCircular
|
|
indeterminate
|
|
color="primary"
|
|
/>
|
|
</div>
|
|
<VDataTable
|
|
v-else
|
|
:headers="headers"
|
|
:items="fetchedData"
|
|
:items-per-page="options.itemsPerPage"
|
|
:page="options.page"
|
|
:options="options"
|
|
density="compact"
|
|
/>
|
|
</VCol>
|
|
</div>
|
|
</template>
|