Fix product performance grouped JSON build
This commit is contained in:
M_Kececi
@@ -35,6 +35,15 @@
|
||||
:disable="pageBusy"
|
||||
class="period-selector bg-white q-px-xs q-py-none"
|
||||
/>
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="view_column"
|
||||
:label="detailColumnsHidden ? 'Detay Kolonları Göster' : 'Detay Kolonları Gizle'"
|
||||
:disable="pageBusy"
|
||||
@click="detailColumnsHidden = !detailColumnsHidden"
|
||||
/>
|
||||
<q-btn-dropdown
|
||||
v-model="detailLevelMenuOpen"
|
||||
split
|
||||
@@ -90,20 +99,6 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'product_detail'" class="main-group-bar q-mb-xs">
|
||||
<button
|
||||
v-for="option in detailMainGroupOptions"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
:class="['main-group-button', { active: selectedDetailMainGroup === option.value }]"
|
||||
:disabled="pageBusy"
|
||||
@click="selectedDetailMainGroup = option.value"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
<small>{{ formatNumber(option.stock_qty, 0) }} stok</small>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ref="topScrollbarRef" class="performance-top-scrollbar q-mb-xs">
|
||||
<div ref="topScrollbarInnerRef" class="performance-top-scrollbar-inner"></div>
|
||||
</div>
|
||||
@@ -113,9 +108,14 @@
|
||||
flat
|
||||
bordered
|
||||
row-key="row_key"
|
||||
class="performance-table sticky-dim-table sticky-dim-7 bg-white"
|
||||
:class="[
|
||||
'performance-table',
|
||||
'sticky-dim-table',
|
||||
detailColumnsHidden ? 'sticky-dim-4' : 'sticky-dim-7',
|
||||
'bg-white'
|
||||
]"
|
||||
:rows="filteredGeneralRows"
|
||||
:columns="generalColumns"
|
||||
:columns="visibleGeneralColumns"
|
||||
:loading="activeTableLoading"
|
||||
v-model:pagination="tablePagination.general"
|
||||
virtual-scroll
|
||||
@@ -560,6 +560,7 @@
|
||||
'performance-table',
|
||||
'product-breakdown-table',
|
||||
'bg-white',
|
||||
{ 'compact-detail-columns': detailColumnsHidden },
|
||||
activeTab === 'product_detail' ? 'product-detail-table' : 'product-summary-table'
|
||||
]"
|
||||
:rows="displayProductKpiTableRows"
|
||||
@@ -1603,6 +1604,7 @@ const loadingNow = ref(0)
|
||||
const loadingStage = ref('')
|
||||
const generalRowsLoaded = ref(false)
|
||||
const detailLevelMenuOpen = ref(false)
|
||||
const detailColumnsHidden = ref(false)
|
||||
const topScrollbarRef = ref(null)
|
||||
const topScrollbarInnerRef = ref(null)
|
||||
let backendGroupedTimer = null
|
||||
@@ -1675,7 +1677,6 @@ const productPerformanceExcelExportFilterFields = new Set([
|
||||
])
|
||||
const performanceTabs = [
|
||||
{ name: 'products', icon: 'dashboard', label: 'Genel Özet KPI' },
|
||||
{ name: 'product_detail', icon: 'category', label: 'Detay KPI' },
|
||||
{ name: 'sales_color_yaka_market_customer', icon: 'palette', label: 'Renk/Yaka > Piyasa > Müşteri' },
|
||||
{ name: 'idle', icon: 'warning', label: 'Atıl Stok / Maliyet' },
|
||||
{ name: 'sales_product_country_segment_market_customer', icon: 'account_tree', label: 'Ürün > Ülke > Segment > Piyasa > Müşteri' },
|
||||
@@ -2024,7 +2025,32 @@ const productColumns = computed(() => orderedMetricColumns(columns.filter(visibl
|
||||
const productDetailColumns = computed(() => orderedMetricColumns(columns
|
||||
.filter(col => !['urun_ilk_grubu', 'askili_yan', 'kategori'].includes(col.name))
|
||||
.filter(visiblePeriodColumn)))
|
||||
const activeProductColumns = computed(() => activeTab.value === 'product_detail' ? productDetailColumns.value : productColumns.value)
|
||||
const detailColumnNames = new Set([
|
||||
'item_description',
|
||||
'kategori',
|
||||
'askili_yan',
|
||||
'urun_ilk_grubu',
|
||||
'urun_ana_grubu',
|
||||
'urun_alt_grubu',
|
||||
'period_start',
|
||||
'period_end',
|
||||
'country',
|
||||
'customer_segment',
|
||||
'customer_code',
|
||||
'customer_name',
|
||||
'first_sale_date',
|
||||
'last_sale_date',
|
||||
'last_ref_number'
|
||||
])
|
||||
|
||||
function applyDetailColumnVisibility (sourceColumns) {
|
||||
if (!detailColumnsHidden.value) return sourceColumns
|
||||
return sourceColumns.filter(col => !detailColumnNames.has(col.name))
|
||||
}
|
||||
|
||||
const visibleProductColumns = computed(() => applyDetailColumnVisibility(productColumns.value))
|
||||
const visibleProductDetailColumns = computed(() => applyDetailColumnVisibility(productDetailColumns.value))
|
||||
const activeProductColumns = computed(() => activeTab.value === 'product_detail' ? visibleProductDetailColumns.value : visibleProductColumns.value)
|
||||
|
||||
const generalColumns = [
|
||||
{ name: 'image', label: 'Foto', field: 'image', align: 'center' },
|
||||
@@ -2066,6 +2092,8 @@ const generalColumns = [
|
||||
{ name: 'recommendation', label: 'Öneri', field: 'recommendation', align: 'left' }
|
||||
]
|
||||
|
||||
const visibleGeneralColumns = computed(() => applyDetailColumnVisibility(generalColumns))
|
||||
|
||||
const orderAnalysisColumns = [
|
||||
{ name: 'image', label: 'Foto', field: 'image', align: 'center' },
|
||||
{ name: 'product_code', label: 'Ürün', field: 'product_code', align: 'left', sortable: true },
|
||||
@@ -2513,7 +2541,6 @@ function ensureColorYakaColumn (targetColumns) {
|
||||
].forEach(target => ensureColumns(target, customerPeriodScoreColumns))
|
||||
|
||||
;[
|
||||
generalColumns,
|
||||
orderAnalysisColumns,
|
||||
orderGroupColumns,
|
||||
orderProductCustomerColumns,
|
||||
@@ -3052,7 +3079,7 @@ function filterSourceRowsForTab (tabKey, fallbackRows) {
|
||||
}
|
||||
|
||||
function backendGroupedFilterOptionParams (tabKey) {
|
||||
const columns = columnsForTableKey(tabKey)
|
||||
const columns = filterColumnsForTableKey(tabKey)
|
||||
const fields = columns
|
||||
.map(col => col?.name || '')
|
||||
.filter(name => backendGroupedFilterFields.has(name))
|
||||
@@ -3132,7 +3159,7 @@ function backendFilterOptionLabel (name, value) {
|
||||
|
||||
function backendGroupedFilterState (tabKey) {
|
||||
const out = {}
|
||||
const columns = columnsForTableKey(tabKey)
|
||||
const columns = filterColumnsForTableKey(tabKey)
|
||||
for (const col of columns) {
|
||||
const name = col?.name || ''
|
||||
if (!isColumnFilterable(name)) continue
|
||||
@@ -3152,7 +3179,7 @@ function shouldUseBackendGroupedRows (tabKey) {
|
||||
|
||||
function tableFilterSource (tableKey) {
|
||||
if (backendGroupedSupportedTab(tableKey)) {
|
||||
return { rows: backendGroupedRows.value[tableKey] || [], columns: columnsForTableKey(tableKey) }
|
||||
return { rows: backendGroupedRows.value[tableKey] || [], columns: filterColumnsForTableKey(tableKey) }
|
||||
}
|
||||
if (tableKey === 'general') return { rows: generalRows.value, columns: generalColumns }
|
||||
if (tableKey === 'markets') return { rows: marketRows.value, columns: marketColumns }
|
||||
@@ -3162,6 +3189,20 @@ function tableFilterSource (tableKey) {
|
||||
}
|
||||
|
||||
function columnsForTableKey (tabKey) {
|
||||
if (tabKey === 'products') return visibleProductColumns.value
|
||||
if (tabKey === 'product_detail') return visibleProductDetailColumns.value
|
||||
if (tabKey === 'general') return visibleGeneralColumns.value
|
||||
if (tabKey === 'order_product_customers') return orderProductCustomerColumns
|
||||
if (tabKey === 'order_market_details') return orderMarketDetailColumns
|
||||
if (tabKey === 'idle') return idleColumns
|
||||
if (tabKey === 'markets') return marketColumns
|
||||
if (tabKey === 'countries') return countryColumns
|
||||
if (tabKey === 'customers') return customerColumns
|
||||
if (salesBreakdownTabKeys.includes(tabKey)) return visibleSalesBreakdownColumns.value
|
||||
return productColumns.value
|
||||
}
|
||||
|
||||
function filterColumnsForTableKey (tabKey) {
|
||||
if (tabKey === 'products') return productColumns.value
|
||||
if (tabKey === 'product_detail') return productDetailColumns.value
|
||||
if (tabKey === 'general') return generalColumns
|
||||
@@ -3466,10 +3507,12 @@ function aggregateGroupFields (sourceRows, groupField = '') {
|
||||
}
|
||||
|
||||
function shouldSumField (field) {
|
||||
return /(_qty|_usd|_count|_value_usd|line_count|invoice_count|order_count|product_count|market_count|customer_count|overdue_qty|stock_qty|net_stock_after_order|idle_cost_usd)$/i.test(field)
|
||||
return /^(sales_qty_|sales_usd_|avg_daily_sales_|gross_profit_|invoice_count_|market_count_|customer_count_|product_group_count_|product_count_)/i.test(field) ||
|
||||
/(_qty|_usd|_count|_value_usd|line_count|invoice_count|order_count|product_count|market_count|customer_count|overdue_qty|stock_qty|net_stock_after_order|idle_cost_usd)$/i.test(field)
|
||||
}
|
||||
|
||||
function shouldAverageField (field) {
|
||||
if (/^avg_daily_sales_/i.test(field)) return false
|
||||
return /^(avg_|unit_|base_price|cost_price|gross_margin|expected_margin|sales_index|performance_score|customer_score|stock_days|stock_turnover)/i.test(field) ||
|
||||
/(_price_usd|_margin|_index|_days)$/i.test(field)
|
||||
}
|
||||
@@ -3491,6 +3534,12 @@ function applyDerivedGroupMetrics (out, sourceRows, groupField = '') {
|
||||
const stockQty = Number(out.stock_qty || 0)
|
||||
const avgStock = Number(out[`avg_stock_${suffix}`] || 0)
|
||||
const turnoverBase = avgStock > 0 ? avgStock : stockQty
|
||||
const days = productPerformancePeriodDays(out, suffix)
|
||||
const avgDaily = days > 0 ? qty / days : Number(out[`avg_daily_sales_${suffix}`] || 0)
|
||||
if (days > 0) out[`avg_daily_sales_${suffix}`] = avgDaily
|
||||
if (avgDaily > 0 && turnoverBase > 0) out[`stock_days_${suffix}`] = turnoverBase / avgDaily
|
||||
else if (qty <= 0 && stockQty > 0) out[`stock_days_${suffix}`] = 9999
|
||||
else if (!Object.prototype.hasOwnProperty.call(out, `stock_days_${suffix}`)) out[`stock_days_${suffix}`] = 0
|
||||
out[`stock_turnover_${suffix}`] = turnoverBase > 0 ? qty / turnoverBase : 0
|
||||
if (qty > 0) out[`avg_price_usd_${suffix}`] = sales / qty
|
||||
const { costPrice, basePrice } = periodCostPair(out, suffix)
|
||||
@@ -3530,19 +3579,33 @@ function applyDerivedGroupMetrics (out, sourceRows, groupField = '') {
|
||||
if (sourceRows.some(row => row.performance_bucket)) {
|
||||
out.performance_bucket = dominantValue(sourceRows, 'performance_bucket')
|
||||
}
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'customer_score_90d')) out.customer_score_90d = customerSalesPeriodScore(periodMetricSource(out, '90d'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'customer_score_180d')) out.customer_score_180d = customerSalesPeriodScore(periodMetricSource(out, '180d'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'customer_score_365d')) out.customer_score_365d = customerSalesPeriodScore(periodMetricSource(out, '365d'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'customer_score_total')) out.customer_score_total = customerSalesPeriodScore(periodMetricSource(out, 'total'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'performance_score_90d')) out.performance_score_90d = productSalesPeriodScore(productPeriodMetricSource(out, '90d'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'performance_score_180d')) out.performance_score_180d = productSalesPeriodScore(productPeriodMetricSource(out, '180d'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'performance_score_365d')) out.performance_score_365d = productSalesPeriodScore(productPeriodMetricSource(out, '365d'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'performance_score_total')) out.performance_score_total = productSalesPeriodScore(productPeriodMetricSource(out, 'total'))
|
||||
if (!Object.prototype.hasOwnProperty.call(out, 'performance_score')) {
|
||||
out.performance_score = Object.prototype.hasOwnProperty.call(out, 'performance_score_90d')
|
||||
? Number(out.performance_score_90d || 0)
|
||||
: groupPerformanceScore(out, groupField)
|
||||
}
|
||||
out.customer_score_90d = customerSalesPeriodScore(periodMetricSource(out, '90d'))
|
||||
out.customer_score_180d = customerSalesPeriodScore(periodMetricSource(out, '180d'))
|
||||
out.customer_score_365d = customerSalesPeriodScore(periodMetricSource(out, '365d'))
|
||||
out.customer_score_total = customerSalesPeriodScore(periodMetricSource(out, 'total'))
|
||||
out.performance_score_90d = productSalesPeriodScore(productPeriodMetricSource(out, '90d'))
|
||||
out.performance_score_180d = productSalesPeriodScore(productPeriodMetricSource(out, '180d'))
|
||||
out.performance_score_365d = productSalesPeriodScore(productPeriodMetricSource(out, '365d'))
|
||||
out.performance_score_total = productSalesPeriodScore(productPeriodMetricSource(out, 'total'))
|
||||
out.performance_score = Number(out.performance_score_90d || 0)
|
||||
}
|
||||
|
||||
function productPerformancePeriodDays (row, suffix) {
|
||||
if (suffix === '90d') return 90
|
||||
if (suffix === '180d') return 180
|
||||
if (suffix === '365d') return 365
|
||||
if (suffix !== 'total') return 0
|
||||
const start = parseProductPerformanceDate(row?.period_start) || new Date(Date.UTC(2022, 0, 1))
|
||||
const end = parseProductPerformanceDate(row?.period_end) || parseProductPerformanceDate(row?.kpi_date)
|
||||
if (!start || !end || end < start) return 0
|
||||
return Math.floor((end.getTime() - start.getTime()) / 86400000) + 1
|
||||
}
|
||||
|
||||
function parseProductPerformanceDate (value) {
|
||||
const text = String(value || '').trim().slice(0, 10)
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(text)) return null
|
||||
const [year, month, day] = text.split('-').map(Number)
|
||||
return new Date(Date.UTC(year, month - 1, day))
|
||||
}
|
||||
|
||||
function groupPerformanceScore (row, groupField = '') {
|
||||
@@ -5204,7 +5267,7 @@ function productPerformanceExcelExportTableKey () {
|
||||
function buildProductPerformanceExcelExportFilters () {
|
||||
const tableKey = productPerformanceExcelExportTableKey()
|
||||
const out = {}
|
||||
for (const col of columnsForTableKey(tableKey) || []) {
|
||||
for (const col of filterColumnsForTableKey(tableKey) || []) {
|
||||
const name = String(col?.name || '').trim()
|
||||
if (!productPerformanceExcelExportFilterFields.has(name)) continue
|
||||
const selected = selectedColumnFilters(tableKey, name)
|
||||
@@ -5986,95 +6049,95 @@ onBeforeUnmount(() => {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(-n+10)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(-n+10)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(-n+10)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(-n+10)) {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(-n+10)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(-n+10)) {
|
||||
z-index: 30;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table tbody tr:not(.group-row) td:nth-child(-n+10)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table tbody tr:not(.group-row) td:nth-child(-n+10)) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(1)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(1)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(1)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(1)) {
|
||||
left: 0;
|
||||
width: 190px;
|
||||
min-width: 190px;
|
||||
max-width: 190px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(2)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(2)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(2)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(2)) {
|
||||
left: 190px;
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(3)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(3)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(3)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(3)) {
|
||||
left: 330px;
|
||||
width: 110px;
|
||||
min-width: 110px;
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(4)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(4)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(4)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(4)) {
|
||||
left: 440px;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(5)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(5)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(5)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(5)) {
|
||||
left: 590px;
|
||||
width: 170px;
|
||||
min-width: 170px;
|
||||
max-width: 170px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(6)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(6)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(6)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(6)) {
|
||||
left: 760px;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(7)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(7)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(7)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(7)) {
|
||||
left: 910px;
|
||||
width: 130px;
|
||||
min-width: 130px;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(8)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(8)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(8)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(8)) {
|
||||
left: 1040px;
|
||||
width: 90px;
|
||||
min-width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(9)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(9)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(9)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(9)) {
|
||||
left: 1130px;
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(10)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(10)) {
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(10)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(10)) {
|
||||
left: 1210px;
|
||||
width: 130px;
|
||||
min-width: 130px;
|
||||
@@ -6082,6 +6145,58 @@ onBeforeUnmount(() => {
|
||||
box-shadow: 8px 0 10px -10px rgba(17, 24, 39, 0.45);
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table) {
|
||||
min-width: 2450px;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(-n+4)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table td:nth-child(-n+4)) {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(-n+4)) {
|
||||
z-index: 30;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table tbody tr:not(.group-row) td:nth-child(-n+4)) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(1)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table td:nth-child(1)) {
|
||||
left: 0;
|
||||
width: 86px;
|
||||
min-width: 86px;
|
||||
max-width: 86px;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(2)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table td:nth-child(2)) {
|
||||
left: 86px;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(3)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table td:nth-child(3)) {
|
||||
left: 236px;
|
||||
width: 112px;
|
||||
min-width: 112px;
|
||||
max-width: 112px;
|
||||
}
|
||||
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(4)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table td:nth-child(4)) {
|
||||
left: 348px;
|
||||
width: 132px;
|
||||
min-width: 132px;
|
||||
max-width: 132px;
|
||||
box-shadow: 8px 0 10px -10px rgba(17, 24, 39, 0.45);
|
||||
}
|
||||
|
||||
.product-breakdown-table.product-detail-table :deep(.q-table) {
|
||||
min-width: 2620px;
|
||||
}
|
||||
@@ -6198,10 +6313,14 @@ onBeforeUnmount(() => {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table th:nth-child(n+11):not(.text-right)),
|
||||
.product-breakdown-table:not(.product-detail-table) :deep(.q-table td:nth-child(n+11):not(.text-right)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table th:nth-child(n+11):not(.text-right)),
|
||||
.product-breakdown-table:not(.product-detail-table):not(.compact-detail-columns) :deep(.q-table td:nth-child(n+11):not(.text-right)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table th:nth-child(n+5):not(.text-right)),
|
||||
.product-breakdown-table.compact-detail-columns :deep(.q-table td:nth-child(n+5):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(n+4):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table td:nth-child(n+4):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table th:nth-child(n+5):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table td:nth-child(n+5):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(n+6):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table td:nth-child(n+6):not(.text-right)),
|
||||
.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(n+7):not(.text-right)),
|
||||
@@ -6281,6 +6400,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(-n+3)),
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table td:nth-child(-n+3)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table th:nth-child(-n+4)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table td:nth-child(-n+4)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(-n+5)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table td:nth-child(-n+5)),
|
||||
.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(-n+6)),
|
||||
@@ -6300,6 +6421,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(-n+3)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table th:nth-child(-n+4)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(-n+5)),
|
||||
.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(-n+6)),
|
||||
.sticky-dim-table.sticky-dim-7 :deep(.q-table th:nth-child(-n+7)),
|
||||
@@ -6317,6 +6439,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(3)),
|
||||
.sticky-dim-table.sticky-dim-3 :deep(.q-table td:nth-child(3)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table th:nth-child(4)),
|
||||
.sticky-dim-table.sticky-dim-4 :deep(.q-table td:nth-child(4)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(5)),
|
||||
.sticky-dim-table.sticky-dim-5 :deep(.q-table td:nth-child(5)),
|
||||
.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(6)),
|
||||
|
||||
Reference in New Issue
Block a user