ksenia_mikhailova
/
to_inventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

group data in front

This commit is contained in:
Kseninia Mikhaylova 2024-07-19 14:27:34 +03:00
parent 1550c2fe6e
commit c3fafd5645
3 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/assets/main.scss
View File

@ -55,3 +55,7 @@
} }
} }
th.tmc {
@apply min-w-[800px];
}

77
front/pages/table/index.vue
View File

@ -5,7 +5,13 @@ const pagination = ref({ total: 10, pageCount: 10 })
const loadData = async () => { const loadData = async () => {
const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/?page=${page.value}`) const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/?page=${page.value}`)
items.value = items_data.results 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.total = items_data.count
pagination.value.pageCount = items_data.per_page pagination.value.pageCount = items_data.per_page
} }
@ -17,7 +23,7 @@ const columns = [
label: 'Название' label: 'Название'
}, },
{ {
class: 'tmc',
key: 'tmc', key: 'tmc',
label: 'ТМЦ' label: 'ТМЦ'
}, },
@ -39,22 +45,24 @@ const columns = [
Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }} Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
</template> </template>
<template #tmc-data="{ row }"> <template #tmc-data="{ row }">
<div class="inv_item" v-for="item in row.tmc"> <div v-for="uniq_tmc in row.uniq" class="inv_element">
<strong>{{ item.tmc.name }}</strong> <h3>{{ uniq_tmc[0].tmc.name }}</h3>
<ul class="inv_list"> <div class="inv_item" v-for="item in uniq_tmc">
<li v-for="el in item.field" class="inv_item"> <ul class="inv_list">
<span class="inv_item_name"> <li v-for="el in item.field" class="inv_inner">
{{ el.field.name }}: <span class="inv_inner_name">
</span> {{ el.field.name }}:
<span :class="['inv_item_text', { 'inv_item__error': !el.text }]"> </span>
{{ el.text || 'Нет расшифровки' }} <span :class="['inv_inner_text', { 'inv_inner__error': !el.text }]">
</span> {{ el.text || 'Нет расшифровки' }}
<span :class="['inv_item_image', { 'inv_item__error': !el.file_id }]"> </span>
<GetImage :file_id="el.file_id" v-if="el.file_id" /> <span :class="['inv_inner_image', { 'inv_inner__error': !el.file_id }]">
<span v-else>Нет изображения</span> <GetImage :file_id="el.file_id" v-if="el.file_id" />
</span> <span v-else>Нет изображения</span>
</li> </span>
</ul> </li>
</ul>
</div>
</div> </div>
</template> </template>
<template #user_id-data="{ row }"> <template #user_id-data="{ row }">
@ -69,20 +77,29 @@ const columns = [
table { table {
max-width: 100%; max-width: 100%;
} }
.inv_item {
@apply mb-2; .inv_element {
} counter-reset: inv;
.inv_list {
// @apply flex flex-col gap-2;
} }
.inv_item { .inv_item {
@apply break-all; @apply flex align-top gap-1;
>*{
&::before {
counter-increment: inv;
content: counter(inv) "."
}
}
.inv_inner {
>* {
@apply mr-2; @apply mr-2;
} }
&_name {} &_name {}
&_text {} &_text {
@apply break-all;
}
&_image {} &_image {}
@ -90,4 +107,12 @@ table {
@apply text-red-400 dark:text-red-800; @apply text-red-400 dark:text-red-800;
} }
} }
.inv_list {
// @apply flex flex-col gap-2;
}
.inv_item {
@apply mb-2;
}
</style> </style>

1
front/types/index.d.ts vendored
View File

@ -40,6 +40,7 @@ declare global {
created_at: string created_at: string
updated_at: string updated_at: string
tmc: number[] tmc: number[]
uniq?: any[]
} }
type ApiPaged<T> = { type ApiPaged<T> = {