M_Kececi/bssapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix product performance grouped JSON build

Browse Source
This commit is contained in:
M_Kececi
2026-07-04 14:11:19 +03:00
parent 4c56062ef4
commit 25bc9b2d02
2 changed files with 93 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/ProductPerformanceProfitability.vue
+83 -50
View File
@@ -337,7 +337,7 @@
<q-tr
v-if="props.row.__group"
:props="props"
:class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
:class="groupRowClasses(props.row)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
<template v-if="col.name === 'image' && groupShowsImage(props.row)">
@@ -509,7 +509,7 @@
<q-tr
v-if="props.row.__group"
:props="props"
:class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
:class="groupRowClasses(props.row)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
<div
@@ -636,7 +636,7 @@
<q-tr
v-if="props.row.__group"
:props="props"
:class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
:class="groupRowClasses(props.row)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
<template v-if="col.name === 'image' && groupShowsImage(props.row)">
@@ -823,7 +823,7 @@
<q-tr
v-if="props.row.__group"
:props="props"
:class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
:class="groupRowClasses(props.row)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
<template v-if="col.name === 'image' && groupShowsImage(props.row)">
@@ -1107,7 +1107,7 @@
<q-tr
v-if="props.row.__group"
:props="props"
:class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
:class="groupRowClasses(props.row)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
<div
@@ -2455,8 +2455,7 @@ const groupLevels = [
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' },
{ key: 'color_yaka', label: 'Renk/Yaka' },
{ key: 'market_key', label: 'Piyasa' }
]
@@ -2489,8 +2488,7 @@ const tabGroupLevels = {
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' }
{ key: 'color_yaka', label: 'Renk/Yaka' }
],
sales_product_country_segment_market_customer: [
{ key: 'market_key', label: 'Piyasa' },
@@ -2502,8 +2500,7 @@ const tabGroupLevels = {
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' }
{ key: 'color_yaka', label: 'Renk/Yaka' }
],
sales_market_customer_product: [
{ key: 'market_key', label: 'Piyasa' },
@@ -2515,8 +2512,7 @@ const tabGroupLevels = {
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' }
{ key: 'color_yaka', label: 'Renk/Yaka' }
],
sales_country_segment_market_customer_product: [
{ key: 'market_key', label: 'Piyasa' },
@@ -2528,8 +2524,7 @@ const tabGroupLevels = {
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' }
{ key: 'color_yaka', label: 'Renk/Yaka' }
],
order_product_customers: [
{ key: 'market_key', label: 'Piyasa' },
@@ -2541,8 +2536,7 @@ const tabGroupLevels = {
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' }
{ key: 'color_yaka', label: 'Renk/Yaka' }
],
order_market_details: [
{ key: 'market_key', label: 'Piyasa' },
@@ -2554,8 +2548,7 @@ const tabGroupLevels = {
{ key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
{ key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
{ key: 'product_code', label: 'Ürün' },
{ key: 'color_code', label: 'Renk' },
{ key: 'yaka_kodu', label: 'Yaka' }
{ key: 'color_yaka', label: 'Renk/Yaka' }
]
}
@@ -3476,6 +3469,12 @@ function groupShowsImage (row) {
const groupDimensionFields = new Set(dimensionColumnNames)
function groupRowClasses (row) {
const level = Math.min(Number(row?.level || 0), 5)
const field = String(row?.group_field || 'unknown').replace(/[^a-z0-9_-]/gi, '-').toLowerCase()
return ['group-row', `group-row-level-${level}`, `group-row-field-${field}`]
}
function groupCellClass (colOrName) {
const name = colOrName?.name || colOrName
if (name === 'image') return 'product-image-cell'
@@ -3635,6 +3634,12 @@ function colorYakaValue (row) {
const colorDescription = String(row?.image_color_description || row?.color_description || '').trim()
const yaka = String(row?.image_yaka_kodu || row?.yaka_kodu || '').trim()
const colorLabel = colorDisplayLabel(groupField === 'color_code' ? groupValue || color : color, colorDescription)
if (row?.__group && groupField === 'color_yaka') {
const parts = groupValue.split('/').map(part => part.trim()).filter(Boolean)
const groupColor = parts[0] || ''
const groupYaka = parts.slice(1).join('/')
return [colorDisplayLabel(groupColor, colorDescription), groupYaka].filter(value => value && value !== '-').join('/')
}
if (row?.__group && groupField === 'color_code') return colorLabel
if (row?.__group && groupField === 'yaka_kodu') {
const parentColor = colorLabel && colorLabel !== '-' ? colorLabel : ''
@@ -4911,7 +4916,7 @@ onMounted(reload)
}
.product-breakdown-table :deep(.q-table) {
min-width: 3000px;
min-width: 3400px;
table-layout: fixed;
}
@@ -4933,14 +4938,14 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(1)),
.product-breakdown-table :deep(.q-table td:nth-child(1)) {
left: 0;
width: 72px;
min-width: 72px;
max-width: 72px;
width: 420px;
min-width: 420px;
max-width: 420px;
}
.product-breakdown-table :deep(.q-table th:nth-child(2)),
.product-breakdown-table :deep(.q-table td:nth-child(2)) {
left: 72px;
left: 420px;
width: 140px;
min-width: 140px;
max-width: 140px;
@@ -4948,7 +4953,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(3)),
.product-breakdown-table :deep(.q-table td:nth-child(3)) {
left: 212px;
left: 560px;
width: 110px;
min-width: 110px;
max-width: 110px;
@@ -4956,7 +4961,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(4)),
.product-breakdown-table :deep(.q-table td:nth-child(4)) {
left: 322px;
left: 670px;
width: 150px;
min-width: 150px;
max-width: 150px;
@@ -4964,7 +4969,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(5)),
.product-breakdown-table :deep(.q-table td:nth-child(5)) {
left: 472px;
left: 820px;
width: 170px;
min-width: 170px;
max-width: 170px;
@@ -4972,7 +4977,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(6)),
.product-breakdown-table :deep(.q-table td:nth-child(6)) {
left: 642px;
left: 990px;
width: 150px;
min-width: 150px;
max-width: 150px;
@@ -4980,7 +4985,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(7)),
.product-breakdown-table :deep(.q-table td:nth-child(7)) {
left: 792px;
left: 1140px;
width: 130px;
min-width: 130px;
max-width: 130px;
@@ -4988,7 +4993,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(8)),
.product-breakdown-table :deep(.q-table td:nth-child(8)) {
left: 922px;
left: 1270px;
width: 90px;
min-width: 90px;
max-width: 90px;
@@ -4996,7 +5001,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(9)),
.product-breakdown-table :deep(.q-table td:nth-child(9)) {
left: 1012px;
left: 1360px;
width: 80px;
min-width: 80px;
max-width: 80px;
@@ -5004,7 +5009,7 @@ onMounted(reload)
.product-breakdown-table :deep(.q-table th:nth-child(10)),
.product-breakdown-table :deep(.q-table td:nth-child(10)) {
left: 1092px;
left: 1440px;
width: 130px;
min-width: 130px;
max-width: 130px;
@@ -5012,7 +5017,7 @@ onMounted(reload)
}
.product-breakdown-table.product-detail-table :deep(.q-table) {
min-width: 2500px;
min-width: 2850px;
}
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(n+8)) {
@@ -5046,14 +5051,14 @@ onMounted(reload)
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(1)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(1)) {
left: 0;
width: 72px;
min-width: 72px;
max-width: 72px;
width: 420px;
min-width: 420px;
max-width: 420px;
}
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(2)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(2)) {
left: 72px;
left: 420px;
width: 150px;
min-width: 150px;
max-width: 150px;
@@ -5061,7 +5066,7 @@ onMounted(reload)
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(3)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(3)) {
left: 222px;
left: 570px;
width: 150px;
min-width: 150px;
max-width: 150px;
@@ -5069,7 +5074,7 @@ onMounted(reload)
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(4)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(4)) {
left: 372px;
left: 720px;
width: 130px;
min-width: 130px;
max-width: 130px;
@@ -5077,7 +5082,7 @@ onMounted(reload)
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(5)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(5)) {
left: 502px;
left: 850px;
width: 170px;
min-width: 170px;
max-width: 170px;
@@ -5085,7 +5090,7 @@ onMounted(reload)
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(6)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(6)) {
left: 672px;
left: 1020px;
width: 170px;
min-width: 170px;
max-width: 190px;
@@ -5093,7 +5098,7 @@ onMounted(reload)
.product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(7)),
.product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(7)) {
left: 842px;
left: 1190px;
width: 120px;
min-width: 120px;
max-width: 120px;
@@ -5432,6 +5437,28 @@ onMounted(reload)
border-color: #c4c9d1;
}
.performance-table :deep(.q-table tbody tr.group-row.group-row-field-color_yaka td) {
background: #f7e3bf;
color: #1f2937;
border-top: 2px solid #c99032;
border-bottom: 2px solid #c99032;
}
.performance-table :deep(.q-table tbody tr.group-row.group-row-field-color_yaka td:first-child) {
border-left: 6px solid #b76a00;
}
.performance-table :deep(.q-table tbody tr.group-row.group-row-field-market_key td) {
background: #d9e8ff;
color: #132238;
border-top: 2px solid #7da9e6;
border-bottom: 2px solid #7da9e6;
}
.performance-table :deep(.q-table tbody tr.group-row.group-row-field-market_key td:first-child) {
border-left: 6px solid #2563b8;
}
.performance-table :deep(.q-table tbody tr.group-row td span),
.performance-table :deep(.q-table tbody tr.group-row .group-title),
.performance-table :deep(.q-table tbody tr.group-row .q-btn),
@@ -5467,32 +5494,38 @@ onMounted(reload)
}
.product-image-cell {
width: 64px;
min-width: 64px;
width: 420px;
min-width: 420px;
max-width: 420px;
padding: 10px !important;
text-align: center;
vertical-align: middle;
}
.product-thumb-button {
width: 54px;
height: 72px;
width: 400px;
height: 400px;
border: 1px solid #d9dde3;
border-radius: 6px;
border-radius: 8px;
background: #fff;
padding: 4px;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-thumb,
.product-thumb-placeholder {
width: 46px;
height: 64px;
width: 384px;
height: 384px;
}
.product-thumb {
display: block;
object-fit: contain;
object-position: center;
}
.product-thumb-placeholder {