to_inventory/front/pages/table/index.vue

68 lines
1.9 KiB
Vue

<script setup lang="ts">
const items = ref()
const page = ref(1)
const pagination = ref({ total: 10, pageCount: 10 })
const loadData = async () => {
const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/?page=${page.value}`)
items.value = items_data.results
pagination.value.total = items_data.count
pagination.value.pageCount = items_data.per_page
}
onMounted(loadData)
watch(page, loadData)
const columns = [
{
key: 'name',
label: 'Название'
},
{
key: 'date',
label: 'Дата'
},
{
key: 'tmc',
label: 'ТМЦ'
},
{
key: 'user_id',
label: 'ID автора'
}
]
</script>
<template>
<div class="col-span-12 page-header">
<h1>Проведенные инвентаризации</h1>
</div>
<div class="col-span-12">
<UTable :rows="items" :columns="columns" :ui="{ td: { base: 'whitespace-normal max-w-sm' } }">
<template #date-data="{ row }">
Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
</template>
<template #tmc-data="{ row }">
<template v-for="item in row.tmc">
<strong>{{ item.tmc.name }}</strong>
<ul>
<li v-for="el in item.field">
{{ el.field.name }}
<GetImage :file_id="el.id" />
</li>
</ul>
</template>
</template>
<template #user_id-data="{ row }">
<GetAuthor :user_id="row.user_id" />
</template>
</UTable>
<UPagination v-model="page" v-bind="pagination" />
</div>
</template>
<style scoped>
table {
max-width: 100%;
}
</style>