118 lines
3.3 KiB
Vue
118 lines
3.3 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}`)
|
|
const res = items_data.results
|
|
res.map(item => {
|
|
const uniq = [...new Set(item.tmc.map(el => el.tmc.id))]
|
|
const uniq_tmc = uniq.map(id => item.tmc.filter(el => el.tmc.id == id))
|
|
item.uniq = uniq_tmc
|
|
})
|
|
items.value = res
|
|
pagination.value.total = items_data.count
|
|
pagination.value.pageCount = items_data.per_page
|
|
}
|
|
onMounted(loadData)
|
|
watch(page, loadData)
|
|
const columns = [
|
|
{
|
|
key: 'name',
|
|
label: 'Название'
|
|
},
|
|
{
|
|
class: 'tmc',
|
|
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 align-top' } }">
|
|
<template #name-data="{ row }">
|
|
<h3>{{ row.name }}</h3>
|
|
Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
|
|
Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
|
|
</template>
|
|
<template #tmc-data="{ row }">
|
|
<div v-for="uniq_tmc in row.uniq" class="inv_element">
|
|
<h3>{{ uniq_tmc[0].tmc.name }}</h3>
|
|
<div class="inv_item" v-for="item in uniq_tmc">
|
|
<ul class="inv_list">
|
|
<li v-for="el in item.field" class="inv_inner">
|
|
<span class="inv_inner_name">
|
|
{{ el.field.name }}:
|
|
</span>
|
|
<span :class="['inv_inner_text', { 'inv_inner__error': !el.text }]">
|
|
{{ el.text || 'Нет расшифровки' }}
|
|
</span>
|
|
<span :class="['inv_inner_image', { 'inv_inner__error': !el.file_id }]">
|
|
<GetImage :file_id="el.file_id" v-if="el.file_id" />
|
|
<span v-else>Нет изображения</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</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 lang="scss">
|
|
table {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.inv_element {
|
|
counter-reset: inv;
|
|
}
|
|
|
|
.inv_item {
|
|
@apply flex align-top gap-1;
|
|
|
|
&::before {
|
|
counter-increment: inv;
|
|
content: counter(inv) "."
|
|
}
|
|
}
|
|
.inv_inner {
|
|
>* {
|
|
@apply mr-2;
|
|
}
|
|
|
|
&_name {}
|
|
|
|
&_text {
|
|
@apply break-all;
|
|
}
|
|
|
|
&_image {}
|
|
|
|
&__error {
|
|
@apply text-red-400 dark:text-red-800;
|
|
}
|
|
}
|
|
|
|
.inv_list {
|
|
// @apply flex flex-col gap-2;
|
|
}
|
|
|
|
.inv_item {
|
|
@apply mb-2;
|
|
}
|
|
</style> |