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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
M_Kececi
2026-06-17 21:56:49 +03:00
parent e1e9d4baf1
commit e14c1c176a
34 changed files with 7402 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1525
ui/src/pages/ProductPricing.vue
View File

@@ -3,7 +3,7 @@
<div class="top-bar row items-center justify-between q-mb-xs">
<div class="text-subtitle1 text-weight-bold">Urun Fiyatlandirma</div>
<div class="top-actions">
<div class="row items-center q-gutter-xs top-actions-row">
<div class="row items-center q-gutter-xs top-actions-row top-actions-row--filters">
<q-select
v-model="topUrunIlkGrubu"
dense
@@ -51,79 +51,134 @@
/>
</div>
<div class="row items-center q-gutter-xs top-actions-row">
<q-btn-dropdown color="secondary" outline icon="view_module" label="Doviz Gorunumu" :auto-close="false">
<q-list dense class="currency-menu-list">
<q-item clickable @click="selectAllCurrencies">
<q-item-section>Tumunu Sec</q-item-section>
</q-item>
<q-item clickable @click="clearAllCurrencies">
<q-item-section>Tumunu Temizle</q-item-section>
</q-item>
<q-separator />
<q-item v-for="option in currencyOptions" :key="option.value" clickable @click="toggleCurrencyRow(option.value)">
<q-item-section avatar>
<q-checkbox
:model-value="isCurrencySelected(option.value)"
dense
@update:model-value="(val) => toggleCurrency(option.value, val)"
@click.stop
/>
</q-item-section>
<q-item-section>{{ option.label }}</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-btn
flat
:color="showSelectedOnly ? 'primary' : 'grey-7'"
:icon="showSelectedOnly ? 'checklist_rtl' : 'list_alt'"
:label="showSelectedOnly ? `Secililer (${selectedRowCount})` : 'Secili Olanlari Getir'"
:disable="!showSelectedOnly && selectedRowCount === 0"
@click="toggleShowSelectedOnly"
/>
<q-btn
color="primary"
outline
icon="edit_note"
label="Secili Olanlari Toplu Degistir"
:disable="selectedRowCount === 0"
@click="bulkDialogOpen = true"
/>
<q-btn
color="primary"
flat
icon="download"
label="Sayfayi Excel'e Aktar"
:disable="filteredRows.length === 0"
@click="exportCurrentView"
/>
<q-btn
color="primary"
outline
icon="download_for_offline"
label="Tum Filtreyi Excel'e Aktar"
:disable="filteredRows.length === 0 || exportAllLoading"
:loading="exportAllLoading"
@click="exportAllFiltered"
/>
<q-pagination
v-model="currentPage"
color="primary"
:max="Math.max(1, store.totalPages || 1)"
:max-pages="8"
boundary-links
direction-links
@update:model-value="onPageChange"
/>
<div class="text-caption text-grey-8">
Sayfa {{ currentPage }} / {{ Math.max(1, store.totalPages || 1) }} - Toplam {{ store.totalCount || 0 }} urun kodu
<div class="row items-center q-gutter-xs top-actions-row top-actions-row--actions">
<div class="toolbar-group">
<q-btn
dense
flat
color="grey-8"
icon="view_sidebar"
:label="leftDetailsExpanded ? 'Detaylari Gizle' : 'Detaylari Goster'"
@click="leftDetailsExpanded = !leftDetailsExpanded"
/>
<q-btn-dropdown dense color="secondary" outline icon="view_module" label="Doviz Gorunumu" :auto-close="false">
<q-list dense class="currency-menu-list">
<q-item clickable @click="selectAllCurrencies">
<q-item-section>Tumunu Sec</q-item-section>
</q-item>
<q-item clickable @click="clearAllCurrencies">
<q-item-section>Tumunu Temizle</q-item-section>
</q-item>
<q-separator />
<q-item v-for="option in currencyOptions" :key="option.value" clickable @click="toggleCurrencyRow(option.value)">
<q-item-section avatar>
<q-checkbox
:model-value="isCurrencySelected(option.value)"
dense
@update:model-value="(val) => toggleCurrency(option.value, val)"
@click.stop
/>
</q-item-section>
<q-item-section>{{ option.label }}</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="toolbar-group">
<q-btn
dense
flat
:color="showSelectedOnly ? 'primary' : 'grey-7'"
:icon="showSelectedOnly ? 'checklist_rtl' : 'list_alt'"
:label="showSelectedOnly ? `Secililer (${selectedRowCount})` : 'Secili Olanlari Getir'"
:disable="!showSelectedOnly && selectedRowCount === 0"
@click="toggleShowSelectedOnly"
/>
<q-btn
dense
color="primary"
outline
icon="calculate"
label="Secilileri Hesapla"
:disable="selectedRowCount === 0 || bulkCalcLoading"
:loading="bulkCalcLoading"
@click="calculateSelectedRows"
/>
<q-btn
dense
color="primary"
icon="save"
:label="saveButtonLabel"
:disable="selectedDirtyCount === 0 || saving"
:loading="saving"
@click="saveSelectedRows"
/>
</div>
<div class="toolbar-group">
<q-btn-dropdown dense color="primary" outline icon="download" label="Cikti Al" :auto-close="true">
<q-list dense style="min-width: 260px;">
<q-item clickable :disable="filteredRows.length === 0" @click="exportCurrentView">
<q-item-section avatar><q-icon name="grid_on" /></q-item-section>
<q-item-section>Sayfayi Excel'e Aktar</q-item-section>
</q-item>
<q-item clickable :disable="filteredRows.length === 0 || exportAllLoading" @click="exportAllFiltered">
<q-item-section avatar><q-icon name="download_for_offline" /></q-item-section>
<q-item-section>Tum Filtreyi Excel'e Aktar</q-item-section>
</q-item>
<q-separator />
<q-item clickable :disable="store.loading" @click="openPriceListExportDialog()">
<q-item-section avatar><q-icon name="receipt_long" /></q-item-section>
<q-item-section>Fiyat Listesi Ciktisi...</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<q-space />
<div class="toolbar-group toolbar-group--paging">
<q-pagination
v-model="currentPage"
color="primary"
:max="Math.max(1, store.totalPages || 1)"
:max-pages="8"
boundary-links
direction-links
@update:model-value="onPageChange"
/>
<div class="text-caption text-grey-8">
Sayfa {{ currentPage }} / {{ Math.max(1, store.totalPages || 1) }} - Toplam {{ store.totalCount || 0 }} urun kodu
</div>
</div>
</div>
</div>
</div>
<div class="table-wrap" :style="{ '--sticky-scroll-comp': `${stickyScrollComp}px` }">
<q-inner-loading :showing="saving || bulkCalcLoading">
<q-spinner-gears size="46px" color="primary" />
</q-inner-loading>
<div v-if="showGuidanceOverlay" class="empty-overlay">
<div class="empty-overlay-inner">
<div class="text-subtitle1 text-weight-bold">Calismaya Baslamak Icin</div>
<div class="text-body2 q-mt-xs">
Urun Ilk Grubu veya Urun Ana Grubu secin ve <b>GRUPLARI GETIR</b>'e basin.
</div>
</div>
</div>
<div
ref="topScrollRef"
class="top-x-scroll"
@scroll.passive="onTopScroll"
>
<div
ref="topScrollInnerRef"
class="top-x-scroll-inner"
:style="{ width: `${tableMinWidth}px` }"
/>
</div>
<q-table
ref="mainTableRef"
class="pane-table pricing-table"
@@ -157,7 +212,15 @@
@update:model-value="toggleSelectAllVisible"
/>
<div v-else class="header-with-filter">
<span>{{ col.label }}</span>
<span :title="col.label">{{ col.label }}</span>
<q-tooltip
v-if="col.label"
anchor="top middle"
self="bottom middle"
:offset="[0, 6]"
>
{{ col.label }}
</q-tooltip>
<q-btn
v-if="isHeaderFilterField(col.field)"
dense
@@ -350,7 +413,7 @@
<q-checkbox
size="sm"
color="primary"
:model-value="isRowSelected(props.row.productCode)"
:model-value="isRowSelected(rowSelectionKey(props.row))"
@update:model-value="(val) => onRowCheckboxChange(props.row, val)"
@click.stop
/>
@@ -368,15 +431,41 @@
size="sm"
color="primary"
label="Hesapla"
:loading="!!calcLoadingMap[props.row.productCode]"
@click="calculateRow(props.row)"
/>
</q-td>
</template>
<template #body-cell-historyAction="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:style="getBodyCellStyle(props.col)"
>
<q-btn
dense
flat
round
size="sm"
color="grey-8"
icon="history"
:disable="!props.row?.productCode"
@click="openPriceHistoryDialog(props.row)"
>
<q-tooltip anchor="top middle" self="bottom middle" :offset="[0, 6]">Fiyat gecmisi</q-tooltip>
</q-btn>
</q-td>
</template>
<template #body-cell-productCode="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:class="{
'sticky-col': isStickyCol(props.col.name),
'sticky-boundary': isStickyBoundary(props.col.name),
'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name)
}"
:style="getBodyCellStyle(props.col)"
>
<span class="product-code-text" :title="String(props.value ?? '')">{{ props.value }}</span>
@@ -386,7 +475,11 @@
<template #body-cell-stockQty="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:class="{
'sticky-col': isStickyCol(props.col.name),
'sticky-boundary': isStickyBoundary(props.col.name),
'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name)
}"
:style="getBodyCellStyle(props.col)"
>
<span class="stock-qty-text">{{ formatStock(props.value) }}</span>
@@ -396,7 +489,11 @@
<template #body-cell-stockEntryDate="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:class="{
'sticky-col': isStickyCol(props.col.name),
'sticky-boundary': isStickyBoundary(props.col.name),
'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name)
}"
:style="getBodyCellStyle(props.col)"
>
<span class="date-cell-text">{{ formatDateDisplay(props.value) }}</span>
@@ -408,6 +505,7 @@
:props="props"
:class="[
{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) },
{ 'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name) },
{ 'cell-danger': needsCosting(props.row) }
]"
:style="getBodyCellStyle(props.col)"
@@ -424,7 +522,11 @@
<template #body-cell-lastPricingDate="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:class="{
'sticky-col': isStickyCol(props.col.name),
'sticky-boundary': isStickyBoundary(props.col.name),
'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name)
}"
:style="getBodyCellStyle(props.col)"
>
<span :class="['date-cell-text', { 'date-warning': needsRepricing(props.row) }]">
@@ -436,7 +538,11 @@
<template #body-cell-brandGroupSelection="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:class="{
'sticky-col': isStickyCol(props.col.name),
'sticky-boundary': isStickyBoundary(props.col.name),
'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name)
}"
:style="getBodyCellStyle(props.col)"
>
<span class="cell-text" :title="props.row.brandGroupSelection || ''">
@@ -448,75 +554,293 @@
<template #body-cell="props">
<q-td
:props="props"
:class="{ 'sticky-col': isStickyCol(props.col.name), 'sticky-boundary': isStickyBoundary(props.col.name) }"
:class="{
'sticky-col': isStickyCol(props.col.name),
'sticky-boundary': isStickyBoundary(props.col.name),
'selected-tone-cell': shouldToneSelectedCell(props.row, props.col.name)
}"
:style="getBodyCellStyle(props.col)"
>
<input
v-if="editableColumnSet.has(props.col.name)"
class="native-cell-input text-right"
:value="formatPrice(props.row[props.col.field])"
type="text"
inputmode="decimal"
@change="(e) => onEditableCellChange(props.row, props.col.field, e.target.value)"
/>
<div v-if="editableColumnSet.has(props.col.name)" class="editable-price-cell">
<input
class="native-cell-input text-right price-edit-input"
:value="formatPrice(props.row[props.col.field])"
type="text"
inputmode="decimal"
@change="(e) => onEditableCellChange(props.row, props.col.field, e.target.value)"
/>
<span class="old-price-label" :title="`Eski: ${formatPrice(getOriginalCellValue(props.row, props.col.field))}`">
{{ formatPrice(getOriginalCellValue(props.row, props.col.field)) }}
</span>
</div>
<span v-else class="cell-text" :title="String(props.value ?? '')">{{ props.value }}</span>
</q-td>
</template>
</q-table>
</div>
<q-banner v-if="store.error" class="bg-red text-white q-mt-xs">
Hata: {{ store.error }}
<q-banner v-if="store.error && !isGuidanceState" class="bg-red text-white q-mt-xs">
{{ store.error }}
</q-banner>
<q-dialog v-model="bulkDialogOpen">
<q-card style="min-width: 420px; max-width: 95vw;">
<q-card-section class="text-subtitle1 text-weight-bold">
Secili Olanlari Toplu Degistir
<q-dialog v-model="priceHistoryDialogOpen" persistent>
<q-card class="price-history-card">
<q-card-section class="row items-center justify-between">
<div>
<div class="text-subtitle1 text-weight-bold">Urun Fiyat Karti</div>
<div class="text-caption text-grey-7">
{{ priceHistoryRow?.productCode || '-' }} | {{ priceHistoryRow?.marka || '-' }}
</div>
</div>
<q-btn flat round icon="close" color="grey-8" @click="priceHistoryDialogOpen = false" />
</q-card-section>
<q-card-section class="q-gutter-sm">
<q-select
v-model="bulkField"
:options="bulkFieldOptions"
option-value="value"
option-label="label"
emit-value
map-options
dense
outlined
label="Alan"
/>
<q-input
v-model="bulkValue"
dense
outlined
label="Deger"
inputmode="decimal"
/>
<div class="text-caption text-grey-8">
Uygulanacak satir sayisi: {{ selectedRowCount }}
<q-separator />
<q-card-section class="q-pt-sm q-pb-none">
<div class="row items-center q-gutter-sm">
<q-btn
color="negative"
icon="delete"
label="Secilenleri Sil"
:disable="selectedHistoryCount === 0 || priceHistoryLoading"
@click="confirmDeleteSelectedHistory"
/>
<q-space />
<q-btn
outline
color="primary"
icon="refresh"
label="Yenile"
:loading="priceHistoryLoading"
:disable="!priceHistoryRow?.productCode"
@click="reloadPriceHistory()"
/>
</div>
</q-card-section>
<q-card-section class="q-pt-sm">
<q-inner-loading :showing="priceHistoryLoading">
<q-spinner-gears size="46px" color="primary" />
</q-inner-loading>
<q-tabs v-model="priceHistoryTab" dense inline-label class="text-grey-8" active-color="primary">
<q-tab name="pg" icon="storefront" label="B2B/B2C" />
<q-tab name="mssql" icon="dns" label="NEBIM_V3" />
</q-tabs>
<q-separator class="q-mt-xs q-mb-sm" />
<q-tab-panels v-model="priceHistoryTab" animated>
<q-tab-panel name="pg" class="q-pa-none">
<div v-if="pgHistoryGroups.length === 0" class="text-caption text-grey-7 q-pa-sm">
Kayit bulunamadi.
</div>
<q-list v-else dense bordered separator>
<q-expansion-item
v-for="g in pgHistoryGroups"
:key="g.key"
expand-separator
:label="`${g.currency} ${(g.levelNo <= 5) ? 'B2B' : 'B2C'} Level ${g.levelNo}`"
:caption="`${g.rows.length} kayit | Son: ${formatMoney(g.latest?.price)} @ ${g.latest?.updated_at || '-'}`"
>
<q-item v-for="r in g.rows" :key="r.id">
<q-item-section avatar>
<q-checkbox
:model-value="selectedPgIdSet.has(r.id)"
dense
@update:model-value="(val) => toggleSelectedPgId(r.id, val)"
@click.stop
/>
</q-item-section>
<q-item-section>
<q-item-label>{{ formatMoney(r.price) }}</q-item-label>
<q-item-label caption>{{ r.updated_at }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-badge color="grey-6" outline>{{ r.currency }} {{ r.level_no }}</q-badge>
</q-item-section>
</q-item>
</q-expansion-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="mssql" class="q-pa-none">
<div v-if="mssqlHistoryGroups.length === 0" class="text-caption text-grey-7 q-pa-sm">
Kayit bulunamadi.
</div>
<q-list v-else dense bordered separator>
<q-expansion-item
v-for="g in mssqlHistoryGroups"
:key="g.key"
expand-separator
:label="`${g.currency} ${g.price_group_code}`"
:caption="`${g.rows.length} kayit | Son: ${formatMoney(g.latest?.price)} @ ${formatMssqlStamp(g.latest)}`"
>
<q-item v-for="r in g.rows" :key="r.price_list_line_id">
<q-item-section avatar>
<q-checkbox
:model-value="selectedMssqlIdSet.has(r.price_list_line_id)"
dense
@update:model-value="(val) => toggleSelectedMssqlId(r.price_list_line_id, val)"
@click.stop
/>
</q-item-section>
<q-item-section>
<q-item-label>{{ formatMoney(r.price) }}</q-item-label>
<q-item-label caption>{{ formatMssqlStamp(r) }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-badge color="grey-6" outline>{{ r.currency }} {{ r.price_group_code }}</q-badge>
</q-item-section>
</q-item>
</q-expansion-item>
</q-list>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="priceListExportDialogOpen" persistent>
<q-card style="min-width: 740px; max-width: 95vw;">
<q-card-section class="row items-center justify-between">
<div class="text-subtitle1 text-weight-bold">
Fiyat Listesi Ciktisi
</div>
<q-btn flat round icon="close" color="grey-8" @click="priceListExportDialogOpen = false" />
</q-card-section>
<q-separator />
<q-card-section class="q-gutter-sm">
<div class="row items-center q-gutter-sm">
<q-btn-toggle
v-model="priceListExportFormat"
dense
unelevated
toggle-color="primary"
color="grey-3"
text-color="grey-9"
:options="[
{ label: 'PDF', value: 'pdf', icon: 'picture_as_pdf' },
{ label: 'Excel', value: 'excel', icon: 'grid_on' }
]"
/>
<q-toggle v-model="priceListInStockOnly" label="Sadece stogu olan urunler" />
<q-space />
<q-btn
color="primary"
icon="download"
:label="priceListExportFormat === 'pdf' ? 'PDF Olustur' : 'Excel Olustur'"
:loading="priceListExportLoading"
@click="runPriceListExport"
/>
</div>
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-4">
<q-select
v-model="priceListUrunIlkGrubu"
dense
outlined
clearable
emit-value
map-options
:options="topUrunIlkGrubuOptions"
:loading="Boolean(serverFilterLoading.urunIlkGrubu)"
label="Urun Ilk Grubu"
@filter="onTopFilterSearchUrunIlkGrubu"
@update:model-value="onPriceListUrunIlkGrubuChange"
/>
</div>
<div class="col-12 col-md-4">
<q-select
v-model="priceListUrunAnaGrubu"
dense
outlined
clearable
multiple
use-chips
emit-value
map-options
:options="topUrunAnaGrubuOptions"
:loading="Boolean(serverFilterLoading.urunAnaGrubu)"
label="Urun Ana Grubu (max 3)"
@filter="onTopFilterSearchUrunAnaGrubu"
@update:model-value="onPriceListUrunAnaGrubuChange"
/>
</div>
<div class="col-12 col-md-4">
<q-select
v-model="priceListUrunAltGrubu"
dense
outlined
clearable
multiple
use-chips
emit-value
map-options
:options="priceListUrunAltGrubuOptions"
:loading="Boolean(serverFilterLoading.urunAltGrubu)"
label="Urun Alt Grubu"
@filter="onPriceListFilterSearchUrunAltGrubu"
/>
</div>
</div>
<div class="row items-center q-gutter-sm">
<q-toggle v-model="priceListIncludeCost" label="Maliyet fiyati" />
<q-toggle v-model="priceListIncludeBase" label="Taban fiyatlar (USD/TRY)" />
</div>
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-4">
<div class="text-caption text-grey-8 q-mb-xs">USD seviyeleri</div>
<q-option-group
v-model="priceListUSDLevels"
type="checkbox"
dense
:options="priceLevelOptionsUSD"
/>
</div>
<div class="col-12 col-md-4">
<div class="text-caption text-grey-8 q-mb-xs">EUR seviyeleri</div>
<q-option-group
v-model="priceListEURLevels"
type="checkbox"
dense
:options="priceLevelOptionsEUR"
/>
</div>
<div class="col-12 col-md-4">
<div class="text-caption text-grey-8 q-mb-xs">TRY seviyeleri</div>
<q-option-group
v-model="priceListTRYLevels"
type="checkbox"
dense
:options="priceLevelOptionsTRY"
/>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Iptal" v-close-popup />
<q-btn color="primary" label="Uygula" @click="applyBulkUpdate" />
</q-card-actions>
</q-card>
</q-dialog>
</q-page>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { Notify } from 'quasar'
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { Notify, useQuasar } from 'quasar'
import { useProductPricingStore } from 'src/stores/ProductPricingStore'
import api, { download } from 'src/services/api'
const $q = useQuasar()
const store = useProductPricingStore()
const PAGE_LIMIT = 250
const currentPage = ref(1)
let reloadTimer = null
const GUIDANCE_MSG = "Calismak icin once Urun Ilk Grubu veya Urun Ana Grubu Secin ve GRUPLARI GETIR'e Basin."
const usdToTry = 38.25
const eurToTry = 41.6
const multipliers = [1, 1.03, 1.06, 1.09, 1.12, 1.15]
@@ -558,7 +882,6 @@ const numberRangeFilterFields = ['stockQty']
const dateRangeFilterFields = ['stockEntryDate', 'lastPricingDate']
const valueFilterFields = [
'costPrice',
'expenseForBasePrice',
'basePriceUsd',
'basePriceTry',
'usd1',
@@ -615,6 +938,32 @@ const topUrunAnaGrubu = ref([])
const topUrunIlkGrubuOptions = computed(() => serverFilterOptionMap.value.urunIlkGrubu || [])
const topUrunAnaGrubuOptions = computed(() => serverFilterOptionMap.value.urunAnaGrubu || [])
const priceListUrunAltGrubuOptions = computed(() => serverFilterOptionMap.value.urunAltGrubu || [])
const priceLevelOptionsUSD = [
{ label: 'USD 1', value: 1 },
{ label: 'USD 2', value: 2 },
{ label: 'USD 3', value: 3 },
{ label: 'USD 4', value: 4 },
{ label: 'USD 5', value: 5 },
{ label: 'USD 6', value: 6 }
]
const priceLevelOptionsEUR = [
{ label: 'EUR 1', value: 1 },
{ label: 'EUR 2', value: 2 },
{ label: 'EUR 3', value: 3 },
{ label: 'EUR 4', value: 4 },
{ label: 'EUR 5', value: 5 },
{ label: 'EUR 6', value: 6 }
]
const priceLevelOptionsTRY = [
{ label: 'TRY 1', value: 1 },
{ label: 'TRY 2', value: 2 },
{ label: 'TRY 3', value: 3 },
{ label: 'TRY 4', value: 4 },
{ label: 'TRY 5', value: 5 },
{ label: 'TRY 6', value: 6 }
]
const canFetchByGroup = computed(() => {
return Boolean(String(topUrunIlkGrubu.value || '').trim()) || (topUrunAnaGrubu.value?.length || 0) > 0
})
@@ -709,13 +1058,107 @@ function onTopUrunAnaGrubuChange () {
applyTopGroupFiltersToColumnFilters()
}
function onPriceListUrunIlkGrubuChange () {
// cascade for export dialog
priceListUrunAnaGrubu.value = []
const ilk = String(priceListUrunIlkGrubu.value || '').trim()
if (ilk) {
// scope ana grubu options
topUrunIlkGrubu.value = ilk
void fetchServerFilterOptions('urunAnaGrubu', { force: true })
}
}
function onPriceListUrunAnaGrubuChange () {
// enforce max 3
const nextAna = Array.isArray(priceListUrunAnaGrubu.value) ? priceListUrunAnaGrubu.value.slice(0, 3) : []
if (nextAna.length !== (priceListUrunAnaGrubu.value || []).length) priceListUrunAnaGrubu.value = nextAna
}
function onPriceListFilterSearchUrunAltGrubu (val, update) {
update(() => {
columnFilterSearch.value = { ...columnFilterSearch.value, urunAltGrubu: String(val || '') }
scheduleServerFilterOptionsFetch('urunAltGrubu')
})
}
function openPriceListExportDialog (format) {
// format optional (default: pdf); dialog includes its own format selector.
if (format === 'excel' || format === 'pdf') {
priceListExportFormat.value = format
} else {
priceListExportFormat.value = 'pdf'
}
priceListExportLoading.value = false
// default selections: mirror top group selections if present
priceListUrunIlkGrubu.value = topUrunIlkGrubu.value
priceListUrunAnaGrubu.value = Array.isArray(topUrunAnaGrubu.value) ? topUrunAnaGrubu.value.slice(0, 3) : []
priceListUrunAltGrubu.value = []
// preload alt group options
void fetchServerFilterOptions('urunAltGrubu', { force: true })
priceListExportDialogOpen.value = true
}
async function runPriceListExport () {
priceListExportLoading.value = true
try {
const payload = {
in_stock_only: !!priceListInStockOnly.value,
include_meta: true,
include_cost: !!priceListIncludeCost.value,
include_base: !!priceListIncludeBase.value,
usd_levels: Array.isArray(priceListUSDLevels.value) ? priceListUSDLevels.value : [],
eur_levels: Array.isArray(priceListEURLevels.value) ? priceListEURLevels.value : [],
try_levels: Array.isArray(priceListTRYLevels.value) ? priceListTRYLevels.value : [],
urun_ilk_grubu: String(priceListUrunIlkGrubu.value || '').trim() ? [String(priceListUrunIlkGrubu.value || '').trim()] : [],
urun_ana_grubu: Array.isArray(priceListUrunAnaGrubu.value) ? priceListUrunAnaGrubu.value : [],
urun_alt_grubu: Array.isArray(priceListUrunAltGrubu.value) ? priceListUrunAltGrubu.value : []
}
const traceId = `ui-${Date.now()}-${Math.random().toString(16).slice(2)}`
const url = priceListExportFormat.value === 'excel'
? '/pricing/products/price-list/export-excel'
: '/pricing/products/price-list/export-pdf'
const res = await api.request({
method: 'POST',
url,
data: payload,
responseType: 'blob',
timeout: 0,
headers: { 'X-Trace-ID': traceId }
})
const blob = res?.data instanceof Blob ? res.data : new Blob([res?.data || ''])
const objUrl = URL.createObjectURL(blob)
if (priceListExportFormat.value === 'pdf') {
window.open(objUrl, '_blank')
setTimeout(() => URL.revokeObjectURL(objUrl), 120000)
} else {
const a = document.createElement('a')
a.href = objUrl
a.download = `baggi_guncel_fiyat_listesi_${new Date().toISOString().slice(0, 10)}.xlsx`
document.body.appendChild(a)
a.click()
a.remove()
URL.revokeObjectURL(objUrl)
}
priceListExportDialogOpen.value = false
} catch (err) {
Notify.create({ type: 'negative', message: err?.parsedMessage || err?.message || 'Fiyat listesi olusturulamadi' })
} finally {
priceListExportLoading.value = false
}
}
function resetGroupSelections () {
topUrunIlkGrubu.value = null
topUrunAnaGrubu.value = []
applyTopGroupFiltersToColumnFilters()
// Keep other local filters cleared too, so page is "clean render".
store.rows = []
store.error = 'Performans icin once Urun Ilk Grubu veya Urun Ana Grubu secin.'
store.error = GUIDANCE_MSG
store.totalCount = 0
store.totalPages = 1
store.page = 1
@@ -749,6 +1192,8 @@ const headerFilterFieldSet = new Set([
])
const mainTableRef = ref(null)
const topScrollRef = ref(null)
const topScrollInnerRef = ref(null)
const tablePagination = ref({
page: 1, // server-side paging var; q-table local paging kapali
rowsPerPage: 0,
@@ -756,16 +1201,37 @@ const tablePagination = ref({
descending: true
})
const selectedMap = ref({})
const bulkDialogOpen = ref(false)
const bulkField = ref('expenseForBasePrice')
const bulkValue = ref('')
const selectedCurrencies = ref(['USD', 'EUR', 'TRY'])
const exportAllLoading = ref(false)
const showSelectedOnly = ref(false)
const leftDetailsExpanded = ref(true)
const calcLoadingMap = ref({})
const bulkCalcLoading = ref(false)
const saving = ref(false)
const priceHistoryDialogOpen = ref(false)
const priceHistoryRow = ref(null)
const priceHistoryLoading = ref(false)
const priceHistoryTab = ref('pg')
const priceHistory = ref({ postgres: [], mssql: [] })
const selectedPgIds = ref([])
const selectedMssqlIds = ref([])
const priceListExportDialogOpen = ref(false)
const priceListExportFormat = ref('pdf') // 'pdf' | 'excel'
const priceListExportLoading = ref(false)
const priceListInStockOnly = ref(true)
const priceListUrunIlkGrubu = ref(null)
const priceListUrunAnaGrubu = ref([])
const priceListUrunAltGrubu = ref([])
const priceListIncludeCost = ref(true)
const priceListIncludeBase = ref(true)
const priceListUSDLevels = ref([1, 2, 3, 4, 5, 6])
const priceListEURLevels = ref([1, 2, 3, 4, 5, 6])
const priceListTRYLevels = ref([1, 2, 3, 4, 5, 6])
const editableColumns = [
'costPrice',
'expenseForBasePrice',
'basePriceUsd',
'basePriceTry',
'usd1',
@@ -809,6 +1275,7 @@ const allColumns = [
col('marka', 'MARKA', 'marka', 54, { sortable: true, classes: 'ps-col' }),
col('productCode', 'URUN KODU', 'productCode', 108, { sortable: true, classes: 'ps-col product-code-col' }),
col('calcAction', 'HESAPLA', 'calcAction', 72, { align: 'center', classes: 'ps-col' }),
col('historyAction', '', 'historyAction', 40, { align: 'center', classes: 'ps-col text-center' }),
col('stockQty', 'STOK ADET', 'stockQty', 72, { align: 'right', sortable: true, classes: 'ps-col stock-col' }),
col('stockEntryDate', 'STOK GIRIS TARIHI', 'stockEntryDate', 92, { align: 'center', sortable: true, classes: 'ps-col date-col' }),
col('lastCostingDate', 'SON MALIYETLENDIRME', 'lastCostingDate', 110, { align: 'center', sortable: true, classes: 'ps-col date-col' }),
@@ -820,36 +1287,48 @@ const allColumns = [
col('urunAltGrubu', 'URUN ALT GRUBU', 'urunAltGrubu', 66, { sortable: true, classes: 'ps-col' }),
col('icerik', 'ICERIK', 'icerik', 62, { sortable: true, classes: 'ps-col' }),
col('karisim', 'KARISIM', 'karisim', 62, { sortable: true, classes: 'ps-col' }),
col('costPrice', 'MALIYET FIYATI', 'costPrice', 74, { align: 'right', sortable: true, classes: 'usd-col' }),
col('expenseForBasePrice', 'TABAN FIYAT MASRAF', 'expenseForBasePrice', 86, { align: 'right', classes: 'usd-col' }),
col('basePriceUsd', 'TABAN USD', 'basePriceUsd', 74, { align: 'right', classes: 'usd-col' }),
col('basePriceTry', 'TABAN TRY', 'basePriceTry', 74, { align: 'right', classes: 'try-col' }),
col('usd1', 'USD 1', 'usd1', 62, { align: 'right', classes: 'usd-col' }),
col('usd2', 'USD 2', 'usd2', 62, { align: 'right', classes: 'usd-col' }),
col('usd3', 'USD 3', 'usd3', 62, { align: 'right', classes: 'usd-col' }),
col('usd4', 'USD 4', 'usd4', 62, { align: 'right', classes: 'usd-col' }),
col('usd5', 'USD 5', 'usd5', 62, { align: 'right', classes: 'usd-col' }),
col('usd6', 'USD 6', 'usd6', 62, { align: 'right', classes: 'usd-col' }),
col('eur1', 'EUR 1', 'eur1', 62, { align: 'right', classes: 'eur-col' }),
col('eur2', 'EUR 2', 'eur2', 62, { align: 'right', classes: 'eur-col' }),
col('eur3', 'EUR 3', 'eur3', 62, { align: 'right', classes: 'eur-col' }),
col('eur4', 'EUR 4', 'eur4', 62, { align: 'right', classes: 'eur-col' }),
col('eur5', 'EUR 5', 'eur5', 62, { align: 'right', classes: 'eur-col' }),
col('eur6', 'EUR 6', 'eur6', 62, { align: 'right', classes: 'eur-col' }),
col('try1', 'TRY 1', 'try1', 62, { align: 'right', classes: 'try-col' }),
col('try2', 'TRY 2', 'try2', 62, { align: 'right', classes: 'try-col' }),
col('try3', 'TRY 3', 'try3', 62, { align: 'right', classes: 'try-col' }),
col('try4', 'TRY 4', 'try4', 62, { align: 'right', classes: 'try-col' }),
col('try5', 'TRY 5', 'try5', 62, { align: 'right', classes: 'try-col' }),
col('try6', 'TRY 6', 'try6', 62, { align: 'right', classes: 'try-col' })
col('costPrice', 'MALIYET FIYATI', 'costPrice', 88, { align: 'right', sortable: true, classes: 'usd-col' }),
col('basePriceUsd', 'TABAN USD', 'basePriceUsd', 88, { align: 'right', classes: 'usd-col' }),
col('basePriceTry', 'TABAN TRY', 'basePriceTry', 96, { align: 'right', classes: 'try-col' }),
col('usd1', 'USD 1', 'usd1', 84, { align: 'right', classes: 'usd-col' }),
col('usd2', 'USD 2', 'usd2', 84, { align: 'right', classes: 'usd-col' }),
col('usd3', 'USD 3', 'usd3', 84, { align: 'right', classes: 'usd-col' }),
col('usd4', 'USD 4', 'usd4', 84, { align: 'right', classes: 'usd-col' }),
col('usd5', 'USD 5', 'usd5', 84, { align: 'right', classes: 'usd-col' }),
col('usd6', 'USD 6', 'usd6', 84, { align: 'right', classes: 'usd-col' }),
col('eur1', 'EUR 1', 'eur1', 84, { align: 'right', classes: 'eur-col' }),
col('eur2', 'EUR 2', 'eur2', 84, { align: 'right', classes: 'eur-col' }),
col('eur3', 'EUR 3', 'eur3', 84, { align: 'right', classes: 'eur-col' }),
col('eur4', 'EUR 4', 'eur4', 84, { align: 'right', classes: 'eur-col' }),
col('eur5', 'EUR 5', 'eur5', 84, { align: 'right', classes: 'eur-col' }),
col('eur6', 'EUR 6', 'eur6', 84, { align: 'right', classes: 'eur-col' }),
col('try1', 'TRY 1', 'try1', 96, { align: 'right', classes: 'try-col' }),
col('try2', 'TRY 2', 'try2', 96, { align: 'right', classes: 'try-col' }),
col('try3', 'TRY 3', 'try3', 96, { align: 'right', classes: 'try-col' }),
col('try4', 'TRY 4', 'try4', 96, { align: 'right', classes: 'try-col' }),
col('try5', 'TRY 5', 'try5', 96, { align: 'right', classes: 'try-col' }),
col('try6', 'TRY 6', 'try6', 96, { align: 'right', classes: 'try-col' })
]
const stickyColumnNames = [
const hideableLeftDetailColumnNames = new Set([
'stockEntryDate',
'lastCostingDate',
'lastPricingDate',
'askiliYan',
'kategori',
'urunIlkGrubu',
'urunAnaGrubu',
'urunAltGrubu',
'icerik',
'karisim'
])
const stickyColumnNamesBase = [
'select',
'brandGroupSelection',
'marka',
'productCode',
'calcAction',
'historyAction',
'stockQty',
'stockEntryDate',
'lastPricingDate',
@@ -861,12 +1340,10 @@ const stickyColumnNames = [
'icerik',
'karisim',
'costPrice',
'expenseForBasePrice',
'basePriceUsd',
'basePriceTry'
]
const stickyBoundaryColumnName = 'basePriceTry'
const stickyColumnNameSet = new Set(stickyColumnNames)
const visibleColumns = computed(() => {
const selected = new Set(selectedCurrencies.value)
@@ -874,16 +1351,61 @@ const visibleColumns = computed(() => {
if (c.name.startsWith('usd')) return selected.has('USD')
if (c.name.startsWith('eur')) return selected.has('EUR')
if (c.name.startsWith('try')) return selected.has('TRY')
if (!leftDetailsExpanded.value && hideableLeftDetailColumnNames.has(c.name)) return false
return true
})
})
const exportableColumns = computed(() => visibleColumns.value.filter((col) => col.name !== 'select' && col.name !== 'calcAction'))
const stickyColumnNames = computed(() => {
const visibleNameSet = new Set(visibleColumns.value.map((col) => col.name))
return stickyColumnNamesBase.filter((name) => visibleNameSet.has(name))
})
const stickyColumnNameSet = computed(() => new Set(stickyColumnNames.value))
const exportableColumns = computed(() => visibleColumns.value.filter((col) => col.name !== 'select' && col.name !== 'calcAction' && col.name !== 'historyAction'))
const pgHistoryGroups = computed(() => {
const list = Array.isArray(priceHistory.value?.postgres) ? priceHistory.value.postgres : []
const map = new Map()
for (const r of list) {
const currency = String(r?.currency || '').toUpperCase().trim()
const levelNo = Number(r?.level_no || 0)
if (!currency || !(levelNo >= 1 && levelNo <= 6)) continue
const key = `${currency}|${levelNo}`
if (!map.has(key)) map.set(key, { key, currency, levelNo, rows: [] })
map.get(key).rows.push(r)
}
const out = Array.from(map.values())
for (const g of out) g.latest = g.rows?.[0] || null
out.sort((a, b) => (a.currency + a.levelNo).localeCompare(b.currency + b.levelNo))
return out
})
const mssqlHistoryGroups = computed(() => {
const list = Array.isArray(priceHistory.value?.mssql) ? priceHistory.value.mssql : []
const map = new Map()
for (const r of list) {
const currency = String(r?.currency || '').toUpperCase().trim()
const pgc = String(r?.price_group_code || '').trim()
if (!currency || !pgc) continue
const key = `${currency}|${pgc}`
if (!map.has(key)) map.set(key, { key, currency, price_group_code: pgc, rows: [] })
map.get(key).rows.push(r)
}
const out = Array.from(map.values())
for (const g of out) g.latest = g.rows?.[0] || null
out.sort((a, b) => (a.currency + a.price_group_code).localeCompare(b.currency + b.price_group_code))
return out
})
const selectedPgIdSet = computed(() => new Set(selectedPgIds.value || []))
const selectedMssqlIdSet = computed(() => new Set(selectedMssqlIds.value || []))
const selectedHistoryCount = computed(() => (selectedPgIds.value?.length || 0) + (selectedMssqlIds.value?.length || 0))
const stickyLeftMap = computed(() => {
const map = {}
let left = 0
for (const colName of stickyColumnNames) {
for (const colName of stickyColumnNames.value) {
const c = allColumns.find((x) => x.name === colName)
if (!c) continue
map[colName] = left
@@ -893,9 +1415,8 @@ const stickyLeftMap = computed(() => {
})
const stickyScrollComp = computed(() => {
const boundaryCol = allColumns.find((x) => x.name === stickyBoundaryColumnName)
return (stickyLeftMap.value[stickyBoundaryColumnName] || 0) + extractWidth(boundaryCol?.style)
return ((stickyLeftMap.value[stickyBoundaryColumnName] || 0) + extractWidth(boundaryCol?.style)) * 1.2
})
const tableMinWidth = computed(() => visibleColumns.value.reduce((sum, c) => sum + extractWidth(c.style), 0))
const tableStyle = computed(() => ({
width: `${tableMinWidth.value}px`,
@@ -905,16 +1426,9 @@ const tableStyle = computed(() => ({
const rows = computed(() => store.rows || [])
const tableLoading = computed(() => Boolean(store.loading) && rows.value.length === 0)
const bulkFieldOptions = computed(() => {
return editableColumns
.map((name) => {
const colDef = allColumns.find((c) => c.field === name)
return {
value: name,
label: colDef?.label || name
}
})
})
const isGuidanceState = computed(() => String(store.error || '').trim() === GUIDANCE_MSG)
const showGuidanceOverlay = computed(() => isGuidanceState.value && !store.loading && rows.value.length === 0)
const multiFilterOptionMap = computed(() => {
const map = {}
multiFilterColumns.forEach(({ field }) => {
@@ -1136,7 +1650,7 @@ function extractWidth (style) {
}
function isStickyCol (colName) {
return stickyColumnNameSet.has(colName)
return stickyColumnNameSet.value.has(colName)
}
function isStickyBoundary (colName) {
@@ -1226,6 +1740,28 @@ function formatDateDisplay (val) {
return `${day}.${month}.${year}`
}
function formatMoney (v) {
const n = Number(v ?? 0)
if (!Number.isFinite(n)) return '-'
return n.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 6 })
}
function formatMssqlStamp (row) {
if (!row) return '-'
const vd = String(row?.valid_date || '').trim()
const vt = String(row?.valid_time || '').trim()
const lud = String(row?.last_updated_date || '').trim()
const parts = []
if (vd) parts.push(vd)
if (vt) parts.push(vt)
if (lud) parts.push(`upd:${lud}`)
return parts.length ? parts.join(' ') : '-'
}
function getOriginalCellValue (row, field) {
return row?.[`__orig_${field}`] ?? row?.[field] ?? 0
}
function exportCellValue (row, field) {
if (field === 'stockQty') return formatStock(row?.[field])
if (field === 'stockEntryDate' || field === 'lastCostingDate' || field === 'lastPricingDate') return formatDateDisplay(row?.[field])
@@ -1337,24 +1873,252 @@ function needsCosting (row) {
}
function recalcByBasePrice (row) {
row.basePriceTry = round2((row.basePriceUsd * usdToTry) + row.expenseForBasePrice)
row.basePriceTry = round2(row.basePriceUsd * usdToTry)
let prevUsd = row.basePriceUsd
let prevTry = row.basePriceTry
let prevEur = round2(row.basePriceUsd * usdToTry / eurToTry)
multipliers.forEach((multiplier, index) => {
row[`usd${index + 1}`] = round2(row.basePriceUsd * multiplier)
row[`eur${index + 1}`] = round2((row.basePriceUsd * usdToTry * multiplier) / eurToTry)
row[`try${index + 1}`] = round2(row.basePriceTry * multiplier)
const nextUsd = round2(prevUsd * multiplier)
const nextTry = round2(prevTry * multiplier)
const nextEur = round2(prevEur * multiplier)
row[`usd${index + 1}`] = nextUsd
row[`eur${index + 1}`] = nextEur
row[`try${index + 1}`] = nextTry
prevUsd = nextUsd
prevTry = nextTry
prevEur = nextEur
})
}
function onEditableCellChange (row, field, val) {
const parsed = parseNumber(val)
store.updateCell(row, field, parsed)
if (field === 'expenseForBasePrice' || field === 'basePriceUsd') recalcByBasePrice(row)
if (field === 'basePriceUsd') recalcByBasePrice(row)
}
function calculateRow (row) {
if (!row) return
recalcByBasePrice(row)
toggleRowSelection(rowSelectionKey(row), true)
function setCalcLoading (productCode, value) {
calcLoadingMap.value = {
...calcLoadingMap.value,
[productCode]: !!value
}
}
function applyPreviewRowToUiRow (row, preview) {
row.basePriceUsd = round2(preview?.base_price_usd)
row.basePriceTry = round2(preview?.base_price_try)
row.usd1 = round2(preview?.usd1)
row.usd2 = round2(preview?.usd2)
row.usd3 = round2(preview?.usd3)
row.usd4 = round2(preview?.usd4)
row.usd5 = round2(preview?.usd5)
row.usd6 = round2(preview?.usd6)
row.eur1 = round2(preview?.eur1)
row.eur2 = round2(preview?.eur2)
row.eur3 = round2(preview?.eur3)
row.eur4 = round2(preview?.eur4)
row.eur5 = round2(preview?.eur5)
row.eur6 = round2(preview?.eur6)
row.try1 = round2(preview?.try1)
row.try2 = round2(preview?.try2)
row.try3 = round2(preview?.try3)
row.try4 = round2(preview?.try4)
row.try5 = round2(preview?.try5)
row.try6 = round2(preview?.try6)
}
async function calculateRow (row) {
if (!row?.productCode) return
const productCode = String(row.productCode).trim()
if (!productCode) return
setCalcLoading(productCode, true)
console.info('[product-pricing][ui] calc-row:start', { product_code: productCode })
try {
const res = await api.post('/pricing/products/calculate-snapshots', {
preview_only: true,
product_codes: [productCode]
}, {
timeout: 180000
})
const list = Array.isArray(res?.data?.rows) ? res.data.rows : []
const preview = list.find((item) => String(item?.product_code || '').trim() === productCode)
if (!preview) {
Notify.create({ type: 'warning', message: 'Bu urun icin hesap sonucu donmedi.' })
return
}
applyPreviewRowToUiRow(row, preview)
toggleRowSelection(rowSelectionKey(row), true)
console.info('[product-pricing][ui] calc-row:done', { product_code: productCode })
} catch (err) {
console.error('[product-pricing][ui] calc-row:error', {
product_code: productCode,
status: err?.response?.status ?? null,
message: err?.response?.data || err?.message || 'calc-row failed'
})
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Hesaplama onizlemesi alinamadi' })
} finally {
setCalcLoading(productCode, false)
}
}
async function openPriceHistoryDialog (row) {
if (!row?.productCode) return
priceHistoryRow.value = row
priceHistoryTab.value = 'pg'
priceHistory.value = { postgres: [], mssql: [] }
selectedPgIds.value = []
selectedMssqlIds.value = []
priceHistoryDialogOpen.value = true
await reloadPriceHistory()
}
async function reloadPriceHistory () {
const code = String(priceHistoryRow.value?.productCode || '').trim()
if (!code) return
priceHistoryLoading.value = true
try {
const traceId = `ui-${Date.now()}-${Math.random().toString(16).slice(2)}`
const res = await api.request({
method: 'GET',
url: `/pricing/products/${encodeURIComponent(code)}/price-history`,
timeout: 180000,
headers: { 'X-Trace-ID': traceId }
})
priceHistory.value = {
postgres: Array.isArray(res?.data?.postgres) ? res.data.postgres : [],
mssql: Array.isArray(res?.data?.mssql) ? res.data.mssql : []
}
// keep selection but drop ids that no longer exist
const pgSet = new Set(priceHistory.value.postgres.map((r) => String(r?.id || '').trim()).filter(Boolean))
const msSet = new Set(priceHistory.value.mssql.map((r) => String(r?.price_list_line_id || '').trim()).filter(Boolean))
selectedPgIds.value = (selectedPgIds.value || []).filter((id) => pgSet.has(id))
selectedMssqlIds.value = (selectedMssqlIds.value || []).filter((id) => msSet.has(id))
} catch (err) {
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Fiyat gecmisi yuklenemedi' })
} finally {
priceHistoryLoading.value = false
}
}
function toggleSelectedPgId (id, val) {
const sid = String(id || '').trim()
if (!sid) return
const set = new Set(selectedPgIds.value || [])
if (val) set.add(sid)
else set.delete(sid)
selectedPgIds.value = Array.from(set)
}
function toggleSelectedMssqlId (id, val) {
const sid = String(id || '').trim()
if (!sid) return
const set = new Set(selectedMssqlIds.value || [])
if (val) set.add(sid)
else set.delete(sid)
selectedMssqlIds.value = Array.from(set)
}
async function confirmDeleteSelectedHistory () {
const code = String(priceHistoryRow.value?.productCode || '').trim()
if (!code) return
const pgCount = selectedPgIds.value?.length || 0
const msCount = selectedMssqlIds.value?.length || 0
if (pgCount + msCount === 0) return
await $q.dialog({
title: 'Secilenleri Sil',
message: `Secili kayitlari silmek istiyor musunuz? (B2B/B2C: ${pgCount}, NEBIM_V3: ${msCount})`,
cancel: true,
persistent: true,
ok: { label: 'Sil', color: 'negative' },
cancel: { label: 'Vazgec', color: 'grey-7', flat: true }
}).onOk(async () => {
const traceId = `ui-${Date.now()}-${Math.random().toString(16).slice(2)}`
const payload = {
pg_ids: (selectedPgIds.value || []).map((x) => String(x || '').trim()).filter(Boolean),
mssql_ids: (selectedMssqlIds.value || []).map((x) => String(x || '').trim()).filter(Boolean)
}
await api.request({
method: 'POST',
url: `/pricing/products/${encodeURIComponent(code)}/price-history/delete-selected`,
data: payload,
timeout: 180000,
headers: { 'X-Trace-ID': traceId }
})
Notify.create({ type: 'positive', message: 'Secilen kayitlar silindi.' })
selectedPgIds.value = []
selectedMssqlIds.value = []
await reloadPriceHistory()
await reloadData({ page: currentPage.value })
})
}
let tableMiddleScrollEl = null
let horizontalResizeObserver = null
let syncingTopScroll = false
function getTableMiddleScrollEl () {
return mainTableRef.value?.$el?.querySelector('.q-table__middle') || null
}
function syncTopScrollWidth () {
const top = topScrollRef.value
const inner = topScrollInnerRef.value
const middle = getTableMiddleScrollEl()
if (!top || !inner || !middle) return
const scrollWidth = Math.max(middle.scrollWidth, tableMinWidth.value, top.clientWidth)
inner.style.width = `${scrollWidth}px`
if (top.scrollLeft !== middle.scrollLeft) {
top.scrollLeft = middle.scrollLeft
}
}
function onTopScroll () {
const top = topScrollRef.value
const middle = getTableMiddleScrollEl()
if (!top || !middle || syncingTopScroll) return
syncingTopScroll = true
middle.scrollLeft = top.scrollLeft
requestAnimationFrame(() => {
syncingTopScroll = false
})
}
function onTableMiddleScroll () {
const top = topScrollRef.value
const middle = getTableMiddleScrollEl()
if (!top || !middle || syncingTopScroll) return
syncingTopScroll = true
top.scrollLeft = middle.scrollLeft
requestAnimationFrame(() => {
syncingTopScroll = false
})
}
async function bindHorizontalScrollSync () {
await nextTick()
const middle = getTableMiddleScrollEl()
if (tableMiddleScrollEl && tableMiddleScrollEl !== middle) {
tableMiddleScrollEl.removeEventListener('scroll', onTableMiddleScroll)
}
tableMiddleScrollEl = middle
if (tableMiddleScrollEl) {
tableMiddleScrollEl.removeEventListener('scroll', onTableMiddleScroll)
tableMiddleScrollEl.addEventListener('scroll', onTableMiddleScroll, { passive: true })
}
if (horizontalResizeObserver) {
horizontalResizeObserver.disconnect()
horizontalResizeObserver = null
}
if (typeof ResizeObserver !== 'undefined') {
horizontalResizeObserver = new ResizeObserver(() => {
syncTopScrollWidth()
})
if (topScrollRef.value) horizontalResizeObserver.observe(topScrollRef.value)
if (tableMiddleScrollEl) horizontalResizeObserver.observe(tableMiddleScrollEl)
}
syncTopScrollWidth()
}
function onBrandGroupSelectionChange (row, val) {
@@ -1362,7 +2126,35 @@ function onBrandGroupSelectionChange (row, val) {
}
function isRowSelected (rowKey) {
return !!selectedMap.value[rowKey]
const k = String(rowKey ?? '').trim()
if (!k) return false
return !!selectedMap.value[k]
}
const selectedToneColumnNameSet = new Set([
// "Karisim"e kadar olan sol kolonlar (fiyat kolonlarini boyamayalim)
'brandGroupSelection',
'marka',
'productCode',
'stockQty',
'stockEntryDate',
'lastCostingDate',
'lastPricingDate',
'askiliYan',
'kategori',
'urunIlkGrubu',
'urunAnaGrubu',
'urunAltGrubu',
'icerik',
'karisim'
])
function shouldToneSelectedCell (row, colName) {
if (!selectedToneColumnNameSet.has(String(colName || '').trim())) return false
if (!isRowSelected(rowSelectionKey(row))) return false
// don't override critical warning coloring
if (String(colName || '').trim() === 'lastCostingDate' && needsCosting(row)) return false
return true
}
function onRowCheckboxChange (row, val) {
@@ -1371,7 +2163,142 @@ function onRowCheckboxChange (row, val) {
}
function toggleRowSelection (rowKey, val) {
selectedMap.value = { ...selectedMap.value, [rowKey]: !!val }
const k = String(rowKey ?? '').trim()
if (!k) return
selectedMap.value = { ...selectedMap.value, [k]: !!val }
}
function isRowDirty (row) {
if (!row) return false
const fields = [
'basePriceUsd',
'basePriceTry',
'usd1', 'usd2', 'usd3', 'usd4', 'usd5', 'usd6',
'eur1', 'eur2', 'eur3', 'eur4', 'eur5', 'eur6',
'try1', 'try2', 'try3', 'try4', 'try5', 'try6'
]
for (const f of fields) {
const cur = Number(row?.[f] ?? 0)
const orig = Number(row?.[`__orig_${f}`] ?? 0)
if (Math.abs(cur - orig) > 1e-9) return true
}
return false
}
const selectedRows = computed(() => {
const map = selectedMap.value || {}
return rows.value.filter((r) => !!map[rowSelectionKey(r)])
})
const selectedDirtyRows = computed(() => selectedRows.value.filter(isRowDirty))
const selectedDirtyCount = computed(() => selectedDirtyRows.value.length)
const saveButtonLabel = computed(() => {
if (selectedDirtyCount.value > 0) return `Kaydet (${selectedDirtyCount.value})`
return 'Kaydet'
})
async function calculateSelectedRows () {
const list = selectedRows.value
if (!Array.isArray(list) || list.length === 0) return
const productCodes = list
.map((r) => String(r?.productCode || '').trim())
.filter(Boolean)
if (productCodes.length === 0) return
bulkCalcLoading.value = true
console.info('[product-pricing][ui] bulk-calc:start', { selected: productCodes.length })
try {
const res = await api.post('/pricing/products/calculate-snapshots', {
preview_only: true,
product_codes: productCodes
}, {
timeout: 180000
})
const previewRows = Array.isArray(res?.data?.rows) ? res.data.rows : []
const byCode = new Map(previewRows.map((p) => [String(p?.product_code || '').trim(), p]))
let applied = 0
for (const row of rows.value) {
const code = String(row?.productCode || '').trim()
if (!code) continue
if (!selectedMap.value?.[rowSelectionKey(row)]) continue
const p = byCode.get(code)
if (!p) continue
applyPreviewRowToUiRow(row, p)
applied++
}
Notify.create({ type: 'positive', message: `Hesaplandi: ${applied} / ${productCodes.length}` })
console.info('[product-pricing][ui] bulk-calc:done', { applied, selected: productCodes.length })
} catch (err) {
console.error('[product-pricing][ui] bulk-calc:error', {
status: err?.response?.status ?? null,
message: err?.response?.data || err?.message || 'bulk-calc failed'
})
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Toplu hesaplama basarisiz' })
} finally {
bulkCalcLoading.value = false
}
}
async function saveSelectedRows () {
const list = selectedDirtyRows.value
if (!Array.isArray(list) || list.length === 0) return
saving.value = true
try {
const traceId = `ui-${Date.now()}-${Math.random().toString(16).slice(2)}`
console.info('[product-pricing][ui] save:start', { trace_id: traceId, dirty_count: list.length })
const payload = {
items: list.map((r) => ({
product_code: String(r?.productCode || '').trim(),
base_price_usd: Number(r?.basePriceUsd ?? 0),
base_price_try: Number(r?.basePriceTry ?? 0),
usd1: Number(r?.usd1 ?? 0),
usd2: Number(r?.usd2 ?? 0),
usd3: Number(r?.usd3 ?? 0),
usd4: Number(r?.usd4 ?? 0),
usd5: Number(r?.usd5 ?? 0),
usd6: Number(r?.usd6 ?? 0),
eur1: Number(r?.eur1 ?? 0),
eur2: Number(r?.eur2 ?? 0),
eur3: Number(r?.eur3 ?? 0),
eur4: Number(r?.eur4 ?? 0),
eur5: Number(r?.eur5 ?? 0),
eur6: Number(r?.eur6 ?? 0),
try1: Number(r?.try1 ?? 0),
try2: Number(r?.try2 ?? 0),
try3: Number(r?.try3 ?? 0),
try4: Number(r?.try4 ?? 0),
try5: Number(r?.try5 ?? 0),
try6: Number(r?.try6 ?? 0)
}))
}
await api.request({
method: 'POST',
url: '/pricing/products/save',
data: payload,
timeout: 0,
headers: { 'X-Trace-ID': traceId }
})
Notify.create({ type: 'positive', message: `Kaydedildi: ${list.length}` })
console.info('[product-pricing][ui] save:done', { trace_id: traceId, dirty_count: list.length })
// After persisting, clear selection state and reload from backend.
// This avoids "Kaydet(1) but checkbox not ticked" confusion and ensures UI reflects DB.
selectedMap.value = {}
showSelectedOnly.value = false
await reloadData({ page: currentPage.value, useCache: false })
} catch (err) {
console.error('[product-pricing][ui] save:error', {
status: err?.response?.status ?? null,
trace_id: err?.response?.headers?.['x-trace-id'] || null,
message: err?.response?.data || err?.message || 'save failed'
})
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Kaydedilemedi' })
} finally {
saving.value = false
}
}
function toggleSelectAllVisible (val) {
@@ -1380,20 +2307,6 @@ function toggleSelectAllVisible (val) {
selectedMap.value = next
}
function applyBulkUpdate () {
const field = String(bulkField.value || '').trim()
if (!field || !editableColumnSet.has(field)) return
const parsed = parseNumber(bulkValue.value)
rows.value.forEach((row) => {
if (!isRowSelected(rowSelectionKey(row))) return
store.updateCell(row, field, parsed)
if (field === 'expenseForBasePrice' || field === 'basePriceUsd') {
recalcByBasePrice(row)
}
})
bulkDialogOpen.value = false
}
function resetAll () {
columnFilters.value = {
productCode: [],
@@ -1500,7 +2413,7 @@ function scheduleReload () {
}, 180)
}
async function fetchChunk ({ page = 1 } = {}) {
async function fetchChunk ({ page = 1, useCache = true } = {}) {
const filters = buildServerFilters()
const hasAnyFilter = Object.values(filters).some((v) => Array.isArray(v) && v.length > 0)
const hasPrimaryFilter = (filters.urun_ilk_grubu?.length || 0) > 0 || (filters.urun_ana_grubu?.length || 0) > 0
@@ -1516,7 +2429,7 @@ async function fetchChunk ({ page = 1 } = {}) {
}
if (!hasPrimaryFilter) {
store.rows = []
store.error = 'Performans icin once Urun Ilk Grubu veya Urun Ana Grubu secin.'
store.error = GUIDANCE_MSG
store.totalCount = 0
store.totalPages = 1
store.page = 1
@@ -1528,6 +2441,7 @@ async function fetchChunk ({ page = 1 } = {}) {
page,
append: false,
silent: false,
useCache,
filters,
sortBy: tablePagination.value.sortBy,
descending: tablePagination.value.descending
@@ -1536,13 +2450,13 @@ async function fetchChunk ({ page = 1 } = {}) {
return Number(result?.fetched) || 0
}
async function reloadData ({ page = 1 } = {}) {
async function reloadData ({ page = 1, useCache = true } = {}) {
const startedAt = Date.now()
console.info('[product-pricing][ui] reload:start', {
at: new Date(startedAt).toISOString()
})
try {
await fetchChunk({ page })
await fetchChunk({ page, useCache })
} catch (err) {
console.error('[product-pricing][ui] reload:error', {
duration_ms: Date.now() - startedAt,
@@ -1554,6 +2468,7 @@ async function reloadData ({ page = 1 } = {}) {
row_count: Array.isArray(store.rows) ? store.rows.length : 0,
has_error: Boolean(store.error)
})
await bindHorizontalScrollSync()
}
// Full "fetch all pages" is intentionally avoided; keep server-side paging for performance.
@@ -1572,18 +2487,34 @@ onMounted(async () => {
void fetchServerFilterOptions('urunAnaGrubu')
// Do not auto-fetch listing on mount; user must scope by group first.
store.rows = []
store.error = 'Performans icin once Urun Ilk Grubu veya Urun Ana Grubu secin.'
store.error = GUIDANCE_MSG
store.totalCount = 0
store.totalPages = 1
store.page = 1
store.hasMore = false
await bindHorizontalScrollSync()
})
watch(
() => [tableMinWidth.value, rows.value.length, selectedCurrencies.value.join(',')],
() => {
void bindHorizontalScrollSync()
}
)
onBeforeUnmount(() => {
if (reloadTimer) {
clearTimeout(reloadTimer)
reloadTimer = null
}
if (tableMiddleScrollEl) {
tableMiddleScrollEl.removeEventListener('scroll', onTableMiddleScroll)
tableMiddleScrollEl = null
}
if (horizontalResizeObserver) {
horizontalResizeObserver.disconnect()
horizontalResizeObserver = null
}
})
// NOTE: Listing fetch is intentionally manual via "Gruplari Getir" for performance.
@@ -1595,6 +2526,7 @@ onBeforeUnmount(() => {
--pricing-header-height: 72px;
--pricing-table-height: calc(100vh - 210px);
position: relative;
height: calc(100vh - 120px);
display: flex;
flex-direction: column;
@@ -1608,16 +2540,96 @@ onBeforeUnmount(() => {
.top-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
align-items: stretch;
gap: 8px;
width: 100%;
}
.top-actions-row {
flex-wrap: wrap;
justify-content: flex-end;
justify-content: flex-start;
width: 100%;
}
.top-bar {
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
.top-actions-row--filters {
justify-content: flex-start;
}
.top-actions-row--actions {
justify-content: flex-start;
}
/* paging group is inside actions row now */
.toolbar-group {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
background: #fff;
}
.toolbar-group--paging {
gap: 10px;
}
.toolbar-group--paging :deep(.q-pagination) {
margin-right: 4px;
}
.toolbar-group :deep(.q-btn) {
white-space: nowrap;
}
.toolbar-group :deep(.q-btn__content) {
gap: 6px;
}
.toolbar-group :deep(.q-btn--dense .q-btn__content) {
gap: 6px;
}
.toolbar-group :deep(.q-btn__content .q-icon) {
font-size: 18px;
}
.toolbar-group :deep(.q-btn .q-icon) {
margin-right: 2px;
}
.toolbar-group :deep(.q-btn__content span) {
line-height: 1.1;
}
.toolbar-group :deep(.q-btn) {
min-height: 32px;
}
.toolbar-group :deep(.q-btn__content) {
padding: 0;
}
.toolbar-group :deep(.q-btn__wrapper) {
padding: 4px 10px;
}
@media (max-width: 1240px) {
.top-actions-row--filters,
.top-actions-row--actions {
justify-content: flex-start;
}
}
.table-wrap {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
@@ -1627,15 +2639,65 @@ onBeforeUnmount(() => {
flex-direction: column;
}
.empty-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 5;
pointer-events: none;
}
.empty-overlay-inner {
width: min(720px, 100%);
border: 1px dashed rgba(0, 0, 0, 0.18);
border-radius: 6px;
background: rgba(255, 255, 255, 0.92);
padding: 16px 18px;
text-align: center;
}
.price-history-card {
width: 980px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.price-history-card :deep(.q-card__section) {
flex: 0 0 auto;
}
.price-history-card :deep(.q-tab-panels) {
max-height: 62vh;
overflow: auto;
}
.top-x-scroll {
flex: 0 0 14px;
height: 14px;
overflow-x: auto;
overflow-y: hidden;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.top-x-scroll-inner {
height: 1px;
}
.pane-table {
height: 100%;
width: 100%;
}
.pricing-table :deep(.q-table__middle) {
height: var(--pricing-table-height);
min-height: var(--pricing-table-height);
max-height: var(--pricing-table-height);
height: calc(var(--pricing-table-height) - 14px);
min-height: calc(var(--pricing-table-height) - 14px);
max-height: calc(var(--pricing-table-height) - 14px);
overflow: auto !important;
scrollbar-gutter: stable both-edges;
overscroll-behavior: contain;
@@ -1661,7 +2723,7 @@ onBeforeUnmount(() => {
.pricing-table :deep(th),
.pricing-table :deep(td) {
box-sizing: border-box;
padding: 0 4px;
padding: 0 1px;
overflow: hidden;
vertical-align: middle;
}
@@ -1681,7 +2743,7 @@ onBeforeUnmount(() => {
height: 100% !important;
display: flex !important;
align-items: center !important;
padding: 0 4px !important;
padding: 0 1px !important;
}
.pricing-table :deep(th),
@@ -1725,6 +2787,7 @@ onBeforeUnmount(() => {
.pricing-table :deep(tbody .sticky-col) {
z-index: 12 !important;
background: #fff !important;
}
.pricing-table :deep(.sticky-boundary) {
@@ -1732,6 +2795,20 @@ onBeforeUnmount(() => {
box-shadow: 8px 0 12px -10px rgba(15, 23, 42, 0.55);
}
.pricing-table :deep(tbody td:not(.sticky-col)) {
position: relative;
z-index: 1 !important;
}
.pricing-table :deep(tbody td.sticky-col)::after,
.pricing-table :deep(thead th.sticky-col)::after {
content: '';
position: absolute;
inset: 0;
background: inherit;
z-index: -1;
}
.header-with-filter {
display: grid;
grid-template-columns: 1fr 20px;
@@ -1830,6 +2907,11 @@ onBeforeUnmount(() => {
word-break: break-word;
}
.pricing-table :deep(td.selected-tone-cell) {
/* "Secondary" tonlu secim vurgusu (yalnizca karisima kadar olan sol kolonlar) */
background: color-mix(in srgb, var(--q-secondary) 12%, #ffffff);
}
.stock-qty-text {
display: block;
width: 100%;
@@ -1879,7 +2961,6 @@ onBeforeUnmount(() => {
}
.pricing-table :deep(.selection-col .q-checkbox__bg) {
background: #fff;
border-color: var(--q-primary);
}
@@ -1922,17 +3003,49 @@ onBeforeUnmount(() => {
letter-spacing: 0;
}
.editable-price-cell {
display: flex !important;
flex-direction: column;
justify-content: center;
gap: 0;
width: 100%;
align-items: stretch !important;
}
.old-price-label {
display: block;
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
line-height: 1;
font-weight: 700;
color: #7c3aed;
text-align: right;
margin: 0 auto;
padding-right: 1px;
margin-top: 0;
}
.native-cell-input,
.native-cell-select {
width: 100%;
width: 90%;
height: 22px;
box-sizing: border-box;
padding: 1px 3px;
padding: 1px 1px;
border: 1px solid #cfd8dc;
border-radius: 4px;
background: #fff;
font-size: 11px;
margin: 0;
font-size: 12px;
margin: 0 auto;
font-variant-numeric: tabular-nums;
}
.price-edit-input {
font-size: 12px;
font-weight: 700;
margin-bottom: 0;
}
.native-cell-input:focus,