Merge remote-tracking branch 'origin/master'

2026-06-18 18:33:38 +03:00
parent 6fc7313ae6
commit 4d8a659650
7 changed files with 984 additions and 68 deletions
--- a/ui/src/pages/OrderPriceList.vue
+++ b/ui/src/pages/OrderPriceList.vue
@@ -0,0 +1,757 @@
+<template>
+  <q-page class="q-pa-xs pricing-page order-price-list-page">
+    <teleport to="body">
+      <div
+        v-if="pageBusy"
+        class="page-busy-overlay"
+        @click.stop
+        @mousedown.stop
+        @mouseup.stop
+        @touchstart.stop
+        @wheel.stop
+      >
+        <q-spinner-gears size="56px" color="primary" />
+        <div class="page-busy-label">Yukleniyor...</div>
+      </div>
+    </teleport>
+
+    <div class="top-bar row items-center justify-between q-mb-xs">
+      <div class="text-subtitle1 text-weight-bold">Fiyat Listesi</div>
+      <div class="top-actions">
+        <div class="row items-center q-gutter-xs top-actions-row top-actions-row--filters">
+          <q-select
+            v-model="topUrunIlkGrubu"
+            dense
+            outlined
+            clearable
+            emit-value
+            map-options
+            use-input
+            :options="topUrunIlkGrubuOptions"
+            :loading="Boolean(serverFilterLoading.urunIlkGrubu)"
+            :disable="pageBusy"
+            label="Urun Ilk Grubu"
+            style="min-width: 220px"
+            @filter="onTopFilterSearchUrunIlkGrubu"
+            @update:model-value="onTopUrunIlkGrubuChange"
+          />
+          <q-select
+            v-model="topUrunAnaGrubu"
+            dense
+            outlined
+            clearable
+            emit-value
+            map-options
+            use-input
+            :options="topUrunAnaGrubuOptions"
+            :loading="Boolean(serverFilterLoading.urunAnaGrubu)"
+            :disable="pageBusy"
+            label="Urun Ana Grubu"
+            style="min-width: 240px"
+            @filter="onTopFilterSearchUrunAnaGrubu"
+            @update:model-value="onTopUrunAnaGrubuChange"
+          />
+          <q-select
+            v-model="selectedProductCodes"
+            dense
+            outlined
+            multiple
+            use-chips
+            use-input
+            emit-value
+            map-options
+            :options="productCodeOptions"
+            :loading="Boolean(serverFilterLoading.productCode)"
+            :disable="pageBusy"
+            label="Urun Kodu"
+            style="min-width: 320px"
+            @filter="onProductCodeSearch"
+          />
+          <q-btn
+            color="primary"
+            icon="filter_alt"
+            label="Listeyi Getir"
+            :disable="pageBusy || !canFetch"
+            :loading="loading"
+            @click="reloadData({ page: 1 })"
+          />
+          <q-btn
+            flat
+            color="grey-7"
+            icon="restart_alt"
+            label="Secimleri Sifirla"
+            :disable="pageBusy"
+            @click="resetSelections"
+          />
+        </div>
+
+        <div class="row items-center q-gutter-xs top-actions-row top-actions-row--actions">
+          <q-btn-dropdown dense color="secondary" outline icon="view_module" label="Fiyat Secimi" :auto-close="false" :disable="pageBusy">
+            <q-list dense class="currency-menu-list">
+              <q-item clickable @click="selectAllPrices">
+                <q-item-section>Tumunu Sec</q-item-section>
+              </q-item>
+              <q-item clickable @click="clearAllPrices">
+                <q-item-section>Tumunu Temizle</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item v-for="option in priceOptions" :key="option.value" clickable @click="togglePriceOption(option.value)">
+                <q-item-section avatar>
+                  <q-checkbox
+                    dense
+                    :model-value="selectedPriceSet.has(option.value)"
+                    :disable="pageBusy"
+                    @click.stop
+                    @update:model-value="() => togglePriceOption(option.value)"
+                  />
+                </q-item-section>
+                <q-item-section>{{ option.label }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+
+          <q-btn
+            dense
+            flat
+            color="grey-8"
+            icon="view_sidebar"
+            :label="leftDetailsExpanded ? 'Detaylari Gizle' : 'Detaylari Goster'"
+            :disable="pageBusy"
+            @click="leftDetailsExpanded = !leftDetailsExpanded"
+          />
+
+          <q-btn-dropdown dense color="primary" outline icon="download" label="Cikti Al" :disable="pageBusy || filteredRows.length === 0">
+            <q-list dense style="min-width: 220px;">
+              <q-item clickable @click="exportVisibleExcel">
+                <q-item-section avatar><q-icon name="grid_on" /></q-item-section>
+                <q-item-section>Excel'e Aktar</q-item-section>
+              </q-item>
+              <q-item clickable @click="printVisibleRows">
+                <q-item-section avatar><q-icon name="picture_as_pdf" /></q-item-section>
+                <q-item-section>PDF / Yazdir</q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+
+          <q-space />
+
+          <q-pagination
+            v-model="currentPage"
+            color="primary"
+            :max="Math.max(1, totalPages || 1)"
+            :max-pages="8"
+            boundary-links
+            direction-links
+            :disable="pageBusy"
+            @update:model-value="onPageChange"
+          />
+          <div class="text-caption text-grey-8">
+            Sayfa {{ currentPage }} / {{ Math.max(1, totalPages || 1) }} - {{ filteredRows.length }} satir
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="table-wrap" :style="{ '--sticky-scroll-comp': `${stickyScrollComp}px` }">
+      <div v-if="showGuidanceOverlay" class="empty-overlay">
+        <div class="empty-overlay-inner">
+          <div class="text-subtitle1 text-weight-bold">Liste Icin Filtre Secin</div>
+          <div class="text-body2 q-mt-xs">
+            Urun Ilk Grubu, Urun Ana Grubu veya Urun Kodu secip <b>LISTEYI GETIR</b>'e basin.
+          </div>
+        </div>
+      </div>
+      <q-table
+        class="pane-table pricing-table order-price-list-table"
+        flat
+        dense
+        row-key="rowKey"
+        :rows="filteredRows"
+        :columns="visibleColumns"
+        :loading="loading"
+        :rows-per-page-options="[0]"
+        :pagination="{ rowsPerPage: 0 }"
+        hide-bottom
+        :table-style="tableStyle"
+      >
+        <template #body-cell-image="props">
+          <q-td :props="props" class="image-cell">
+            <q-img
+              v-if="props.row.imageUrl"
+              :src="props.row.imageUrl"
+              class="product-thumb"
+              fit="cover"
+              no-spinner
+            />
+          </q-td>
+        </template>
+
+        <template #body-cell-campaignLabel="props">
+          <q-td :props="props">
+            <q-badge v-if="props.row.campaignLabel" color="primary" outline :label="props.row.campaignLabel" />
+            <span v-else class="text-grey-6">-</span>
+          </q-td>
+        </template>
+
+        <template v-for="name in priceColumnNames" #[`body-cell-${name}`]="props" :key="name">
+          <q-td :props="props" class="text-right">
+            {{ formatPrice(props.row[name]) }}
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { Notify } from 'quasar'
+import api from 'src/services/api'
+
+const PAGE_LIMIT = 250
+const GUIDANCE_MSG = 'Liste icin filtre secin.'
+
+const priceOptions = ['USD', 'EUR', 'TRY'].flatMap((cur) => [1, 2, 3, 4, 5, 6].map((lv) => ({
+  label: `${cur} ${lv}`,
+  value: `${cur.toLowerCase()}${lv}`
+})))
+const campaignPairs = priceOptions.map((x) => ({ base: x.value, derived: `${x.value}Campaign` }))
+const priceColumnNames = campaignPairs.flatMap((p) => [p.base, p.derived])
+
+const topUrunIlkGrubu = ref(null)
+const topUrunAnaGrubu = ref(null)
+const selectedProductCodes = ref([])
+const selectedPriceOptions = ref(priceOptions.map((x) => x.value))
+const leftDetailsExpanded = ref(true)
+
+const rows = ref([])
+const loading = ref(false)
+const renderPending = ref(false)
+const error = ref(GUIDANCE_MSG)
+const currentPage = ref(1)
+const totalPages = ref(1)
+const totalCount = ref(0)
+
+const serverFilterOptionMap = ref({})
+const serverFilterLoading = ref({})
+const serverFilterLastQuery = ref({})
+const filterSearch = ref({ productCode: '', urunIlkGrubu: '', urunAnaGrubu: '' })
+const imageCache = new Map()
+
+const selectedPriceSet = computed(() => new Set(selectedPriceOptions.value || []))
+const pageBusy = computed(() => loading.value || renderPending.value)
+const canFetch = computed(() => Boolean(topUrunIlkGrubu.value || topUrunAnaGrubu.value || selectedProductCodes.value.length > 0))
+const showGuidanceOverlay = computed(() => !loading.value && rows.value.length === 0 && error.value === GUIDANCE_MSG)
+
+const topUrunIlkGrubuOptions = computed(() => serverFilterOptionMap.value.urunIlkGrubu || [])
+const topUrunAnaGrubuOptions = computed(() => serverFilterOptionMap.value.urunAnaGrubu || [])
+const productCodeOptions = computed(() => serverFilterOptionMap.value.productCode || [])
+
+function toText (value) {
+  return String(value ?? '').trim()
+}
+
+function toNumber (value) {
+  const n = Number(String(value ?? '0').replace(/\./g, '').replace(',', '.'))
+  return Number.isFinite(n) ? n : 0
+}
+
+function round2 (value) {
+  const n = Number(value)
+  return Number.isFinite(n) ? Number(n.toFixed(2)) : null
+}
+
+function formatPrice (value) {
+  const n = Number(value)
+  if (!Number.isFinite(n) || n === 0) return ''
+  return n.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+
+function formatStock (value) {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return ''
+  return n.toLocaleString('tr-TR', { maximumFractionDigits: 2 })
+}
+
+function mapProductRow (raw, index) {
+  const row = {
+    id: index + 1,
+    productCode: toText(raw?.ProductCode),
+    stockQty: toNumber(raw?.StockQty),
+    stockEntryDate: toText(raw?.StockEntryDate),
+    lastPricingDate: toText(raw?.LastPricingDate),
+    askiliYan: toText(raw?.AskiliYan),
+    kategori: toText(raw?.Kategori),
+    urunIlkGrubu: toText(raw?.UrunIlkGrubu),
+    urunAnaGrubu: toText(raw?.UrunAnaGrubu),
+    urunAltGrubu: toText(raw?.UrunAltGrubu),
+    icerik: toText(raw?.Icerik),
+    karisim: toText(raw?.Karisim),
+    marka: toText(raw?.Marka),
+    brandGroupSelection: toText(raw?.BrandGroupSec)
+  }
+  for (const p of priceOptions) row[p.value] = toNumber(raw?.[p.value.toUpperCase()])
+  return row
+}
+
+function applyCampaignPrices (row) {
+  const rate = Number(row?.campaignRate || 0)
+  for (const p of campaignPairs) {
+    const base = Number(row?.[p.base] || 0)
+    row[p.derived] = rate > 0 && base > 0 ? round2(base * (1 - rate / 100)) : null
+  }
+}
+
+function buildCampaignLabel (variant) {
+  const code = toText(variant?.campaign_code)
+  const title = toText(variant?.campaign_title)
+  if (code && title) return `${code} - ${title}`
+  return code || title
+}
+
+function buildRows (products, variants) {
+  const byCode = new Map()
+  for (const v of variants || []) {
+    const code = toText(v?.product_code)
+    if (!code) continue
+    if (!byCode.has(code)) byCode.set(code, [])
+    byCode.get(code).push(v)
+  }
+
+  const out = []
+  for (const p of products) {
+    const list = byCode.get(p.productCode) || []
+    if (list.length === 0) {
+      const row = {
+        ...p,
+        rowKey: `${p.productCode}|0|0`,
+        imageUrl: '',
+        variantCodes: '',
+        variantStocks: formatStock(p.stockQty),
+        campaignLabel: '',
+        campaignRate: null,
+        lastCampaignDate: ''
+      }
+      applyCampaignPrices(row)
+      out.push(row)
+      continue
+    }
+    list.sort((a, b) => toText(a?.variant_code).localeCompare(toText(b?.variant_code), 'tr'))
+    for (const v of list) {
+      const d1 = Number(v?.dim1 || 0)
+      const d3 = v?.dim3 == null ? 0 : Number(v?.dim3 || 0)
+      const row = {
+        ...p,
+        rowKey: `${p.productCode}|${d1}|${d3}`,
+        imageUrl: '',
+        dim1: d1,
+        dim3: d3,
+        variantCodes: toText(v?.variant_code),
+        variantStocks: formatStock(v?.stock_qty),
+        stockQty: Number(v?.stock_qty ?? 0),
+        campaignLabel: buildCampaignLabel(v),
+        campaignRate: Number(v?.discount_rate || 0) || null,
+        lastCampaignDate: toText(v?.campaign_last_dttm)
+      }
+      applyCampaignPrices(row)
+      out.push(row)
+    }
+  }
+  return out
+}
+
+async function fetchServerFilterOptions (field, q = '') {
+  const query = toText(q)
+  const last = toText(serverFilterLastQuery.value[field])
+  const cached = Array.isArray(serverFilterOptionMap.value[field]) && serverFilterOptionMap.value[field].length > 0
+  if (cached && last === query) return
+  serverFilterLoading.value = { ...serverFilterLoading.value, [field]: true }
+  serverFilterLastQuery.value = { ...serverFilterLastQuery.value, [field]: query }
+  try {
+    const params = { field, q: query, limit: field === 'productCode' ? 200 : 160 }
+    if (field === 'urunAnaGrubu' && topUrunIlkGrubu.value) params.urun_ilk_grubu = topUrunIlkGrubu.value
+    const res = await api.get('/order/price-list/options', { params })
+    const items = Array.isArray(res?.data?.items) ? res.data.items : []
+    serverFilterOptionMap.value = {
+      ...serverFilterOptionMap.value,
+      [field]: items.map((x) => ({
+        label: toText(x?.label ?? x?.value),
+        value: toText(x?.value ?? x?.label)
+      })).filter((x) => x.value)
+    }
+  } finally {
+    serverFilterLoading.value = { ...serverFilterLoading.value, [field]: false }
+  }
+}
+
+function onTopFilterSearchUrunIlkGrubu (val, update) {
+  update(() => {
+    filterSearch.value.urunIlkGrubu = toText(val)
+    void fetchServerFilterOptions('urunIlkGrubu', val)
+  })
+}
+
+function onTopFilterSearchUrunAnaGrubu (val, update) {
+  update(() => {
+    filterSearch.value.urunAnaGrubu = toText(val)
+    void fetchServerFilterOptions('urunAnaGrubu', val)
+  })
+}
+
+function onProductCodeSearch (val, update) {
+  update(() => {
+    filterSearch.value.productCode = toText(val)
+    void fetchServerFilterOptions('productCode', val)
+  })
+}
+
+function onTopUrunIlkGrubuChange () {
+  topUrunAnaGrubu.value = null
+  void fetchServerFilterOptions('urunAnaGrubu', '')
+}
+
+function onTopUrunAnaGrubuChange () {}
+
+function requestParams (page) {
+  const params = {
+    page,
+    limit: Math.min(500, Math.max(PAGE_LIMIT, selectedProductCodes.value.length || 0)),
+    include_total: 1
+  }
+  if (topUrunIlkGrubu.value) params.urun_ilk_grubu = topUrunIlkGrubu.value
+  if (topUrunAnaGrubu.value) params.urun_ana_grubu = topUrunAnaGrubu.value
+  if (selectedProductCodes.value.length > 0) params.product_code = selectedProductCodes.value.join(',')
+  return params
+}
+
+async function reloadData ({ page = 1 } = {}) {
+  if (!canFetch.value) {
+    rows.value = []
+    error.value = GUIDANCE_MSG
+    return
+  }
+  loading.value = true
+  renderPending.value = true
+  try {
+    const productRes = await api.request({
+      method: 'GET',
+      url: '/order/price-list/products',
+      params: requestParams(page),
+      timeout: 180000
+    })
+    const products = (Array.isArray(productRes?.data) ? productRes.data : []).map(mapProductRow)
+    totalCount.value = Number(productRes?.headers?.['x-total-count'] || products.length || 0)
+    totalPages.value = Math.max(1, Number(productRes?.headers?.['x-total-pages'] || 1))
+    currentPage.value = Math.max(1, Number(productRes?.headers?.['x-page'] || page))
+
+    const codes = products.map((x) => x.productCode).filter(Boolean)
+    let variants = []
+    if (codes.length > 0) {
+      const variantRes = await api.request({
+        method: 'GET',
+        url: '/order/price-list/variant-rows',
+        params: { product_code: codes.join(',') },
+        timeout: 180000
+      })
+      variants = Array.isArray(variantRes?.data) ? variantRes.data : []
+    }
+    rows.value = buildRows(products, variants)
+    error.value = ''
+    void loadImagesForRows(rows.value.slice(0, 120))
+    await nextTick()
+  } catch (err) {
+    rows.value = []
+    error.value = err?.response?.data || err?.message || 'Fiyat listesi alinamadi'
+    Notify.create({ type: 'negative', message: error.value })
+  } finally {
+    loading.value = false
+    setTimeout(() => { renderPending.value = false }, 120)
+  }
+}
+
+async function loadImagesForRows (list) {
+  const targets = []
+  const seen = new Set()
+  for (const row of list) {
+    const key = `${row.productCode}|${row.dim1 || 0}|${row.dim3 || 0}`
+    if (!row.productCode || seen.has(key)) continue
+    seen.add(key)
+    targets.push({ row, key })
+  }
+  await Promise.all(targets.map(async ({ row, key }) => {
+    if (imageCache.has(key)) {
+      row.imageUrl = imageCache.get(key)
+      return
+    }
+    try {
+      const res = await api.get('/product-images', {
+        params: {
+          code: row.productCode,
+          dim1_id: row.dim1 || '',
+          dim3_id: row.dim3 || ''
+        },
+        timeout: 15000
+      })
+      const first = Array.isArray(res?.data) ? res.data[0] : null
+      const url = toText(first?.thumb_url || first?.content_url || first?.full_url)
+      imageCache.set(key, url)
+      row.imageUrl = url
+    } catch {
+      imageCache.set(key, '')
+    }
+  }))
+}
+
+function resetSelections () {
+  topUrunIlkGrubu.value = null
+  topUrunAnaGrubu.value = null
+  selectedProductCodes.value = []
+  rows.value = []
+  error.value = GUIDANCE_MSG
+  currentPage.value = 1
+  totalPages.value = 1
+  totalCount.value = 0
+}
+
+function onPageChange (page) {
+  void reloadData({ page })
+}
+
+function togglePriceOption (value) {
+  const set = new Set(selectedPriceOptions.value || [])
+  if (set.has(value)) set.delete(value)
+  else set.add(value)
+  selectedPriceOptions.value = priceOptions.map((x) => x.value).filter((x) => set.has(x))
+}
+
+function selectAllPrices () {
+  selectedPriceOptions.value = priceOptions.map((x) => x.value)
+}
+
+function clearAllPrices () {
+  selectedPriceOptions.value = []
+}
+
+function col (name, label, field, width, extra = {}) {
+  return {
+    name,
+    label,
+    field,
+    align: extra.align || 'left',
+    sortable: !!extra.sortable,
+    style: `width:${width}px;min-width:${width}px;max-width:${width}px;`,
+    headerStyle: `width:${width}px;min-width:${width}px;max-width:${width}px;`,
+    classes: extra.classes || '',
+    headerClasses: extra.headerClasses || extra.classes || ''
+  }
+}
+
+const allColumns = [
+  col('image', '', 'imageUrl', 58, { align: 'center', classes: 'image-col sticky-col' }),
+  col('brandGroupSelection', 'MARKA GRUBU', 'brandGroupSelection', 86, { classes: 'ps-col sticky-col' }),
+  col('marka', 'MARKA', 'marka', 62, { sortable: true, classes: 'ps-col sticky-col' }),
+  col('productCode', 'URUN KODU', 'productCode', 112, { sortable: true, classes: 'ps-col product-code-col sticky-col' }),
+  col('variantCodes', 'VARYANT', 'variantCodes', 112, { classes: 'ps-col variant-col sticky-col' }),
+  col('variantStocks', 'STOK', 'stockQty', 62, { align: 'right', sortable: true, classes: 'ps-col variant-stock-col sticky-col' }),
+  col('campaignLabel', 'KAMPANYA', 'campaignLabel', 150, { classes: 'ps-col campaign-col sticky-col' }),
+  col('campaignRate', 'IND %', 'campaignRate', 58, { align: 'right', classes: 'ps-col campaign-rate-col sticky-col' }),
+  col('stockEntryDate', 'STOK GIRIS', 'stockEntryDate', 86, { align: 'center', sortable: true, classes: 'ps-col date-col' }),
+  col('lastPricingDate', 'SON FIYAT', 'lastPricingDate', 86, { align: 'center', sortable: true, classes: 'ps-col date-col' }),
+  col('lastCampaignDate', 'SON KAMPANYA', 'lastCampaignDate', 98, { align: 'center', sortable: true, classes: 'ps-col date-col' }),
+  col('askiliYan', 'ASKILI YAN', 'askiliYan', 58, { sortable: true, classes: 'ps-col' }),
+  col('kategori', 'KATEGORI', 'kategori', 58, { sortable: true, classes: 'ps-col' }),
+  col('urunIlkGrubu', 'URUN ILK GRUBU', 'urunIlkGrubu', 70, { sortable: true, classes: 'ps-col' }),
+  col('urunAnaGrubu', 'URUN ANA GRUBU', 'urunAnaGrubu', 74, { sortable: true, classes: 'ps-col' }),
+  col('urunAltGrubu', 'URUN ALT GRUBU', 'urunAltGrubu', 74, { sortable: true, classes: 'ps-col' }),
+  col('icerik', 'ICERIK', 'icerik', 66, { sortable: true, classes: 'ps-col' }),
+  col('karisim', 'KARISIM', 'karisim', 66, { sortable: true, classes: 'ps-col' }),
+  ...campaignPairs.flatMap((p) => [
+    col(p.base, p.base.toUpperCase().replace(/([A-Z]+)(\d)/, '$1 $2'), p.base, 78, { align: 'right', classes: `${p.base.slice(0, 3)}-col` }),
+    col(p.derived, `${p.base.toUpperCase().replace(/([A-Z]+)(\d)/, '$1 $2')} KMP`, p.derived, 88, { align: 'right', classes: `${p.base.slice(0, 3)}-col campaign-price-col` })
+  ])
+]
+
+const hideableLeftDetailColumnNames = new Set([
+  'stockEntryDate',
+  'lastPricingDate',
+  'lastCampaignDate',
+  'askiliYan',
+  'kategori',
+  'urunIlkGrubu',
+  'urunAnaGrubu',
+  'urunAltGrubu',
+  'icerik',
+  'karisim'
+])
+
+const visibleColumns = computed(() => allColumns.filter((c) => {
+  if (/^(usd|eur|try)[1-6]$/.test(c.name)) return selectedPriceSet.value.has(c.name)
+  if (/^(usd|eur|try)[1-6]Campaign$/.test(c.name)) return selectedPriceSet.value.has(c.name.replace(/Campaign$/, ''))
+  if (!leftDetailsExpanded.value && hideableLeftDetailColumnNames.has(c.name)) return false
+  return true
+}))
+
+const filteredRows = computed(() => rows.value || [])
+const tableMinWidth = computed(() => visibleColumns.value.reduce((sum, c) => sum + extractWidth(c.style), 0))
+const tableStyle = computed(() => ({
+  width: `${tableMinWidth.value}px`,
+  minWidth: `${tableMinWidth.value}px`,
+  tableLayout: 'fixed'
+}))
+const stickyScrollComp = computed(() => 650)
+
+function extractWidth (style) {
+  const m = String(style || '').match(/width:(\d+)px/)
+  return m ? Number(m[1]) : 80
+}
+
+function exportCell (row, col) {
+  if (col.name === 'image') return row.imageUrl || ''
+  if (priceColumnNames.includes(col.name)) return formatPrice(row[col.field])
+  if (col.name === 'variantStocks') return formatStock(row.stockQty)
+  if (col.name === 'campaignRate') return row.campaignRate ? formatPrice(row.campaignRate) : ''
+  return toText(row[col.field])
+}
+
+function exportVisibleExcel () {
+  const cols = visibleColumns.value
+  const body = filteredRows.value.map((row) => `<tr>${cols.map((c) => {
+    if (c.name === 'image' && row.imageUrl) return `<td><img src="${row.imageUrl}" width="54" height="54"></td>`
+    return `<td>${escapeHtml(exportCell(row, c))}</td>`
+  }).join('')}</tr>`).join('')
+  const html = `<!doctype html><html><head><meta charset="utf-8"></head><body><table border="1"><thead><tr>${cols.map((c) => `<th>${escapeHtml(c.label || 'Gorsel')}</th>`).join('')}</tr></thead><tbody>${body}</tbody></table></body></html>`
+  const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `fiyat_listesi_${new Date().toISOString().slice(0, 10)}.xls`
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  URL.revokeObjectURL(url)
+}
+
+function printVisibleRows () {
+  const cols = visibleColumns.value
+  const body = filteredRows.value.map((row) => `<tr>${cols.map((c) => {
+    if (c.name === 'image' && row.imageUrl) return `<td><img src="${row.imageUrl}" class="thumb"></td>`
+    return `<td class="${priceColumnNames.includes(c.name) ? 'num' : ''}">${escapeHtml(exportCell(row, c))}</td>`
+  }).join('')}</tr>`).join('')
+  const html = `<!doctype html><html><head><meta charset="utf-8"><title>Fiyat Listesi</title><style>
+    @page { size: A3 landscape; margin: 8mm; }
+    body { font-family: Arial, sans-serif; font-size: 8px; }
+    h1 { font-size: 16px; margin: 0 0 8px; }
+    table { border-collapse: collapse; width: 100%; }
+    th { background: #957116; color: #fff; }
+    th, td { border: 1px solid #ccc; padding: 3px; vertical-align: middle; }
+    .num { text-align: right; }
+    .thumb { width: 42px; height: 42px; object-fit: cover; }
+  </style></head><body><h1>Fiyat Listesi</h1><table><thead><tr>${cols.map((c) => `<th>${escapeHtml(c.label || 'Gorsel')}</th>`).join('')}</tr></thead><tbody>${body}</tbody></table><script>window.onload=function(){window.print()}<\/script></body></html>`
+  const win = window.open('', '_blank')
+  if (!win) return
+  win.document.open()
+  win.document.write(html)
+  win.document.close()
+}
+
+function escapeHtml (value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+watch(selectedProductCodes, (list) => {
+  const clean = Array.isArray(list) ? [...new Set(list.map(toText).filter(Boolean))] : []
+  if (clean.join('\u0001') !== (Array.isArray(list) ? list.join('\u0001') : '')) {
+    selectedProductCodes.value = clean
+  }
+})
+
+onMounted(() => {
+  void fetchServerFilterOptions('urunIlkGrubu', '')
+  void fetchServerFilterOptions('urunAnaGrubu', '')
+  void fetchServerFilterOptions('productCode', '')
+})
+</script>
+
+<style scoped>
+.order-price-list-page {
+  position: relative;
+}
+
+.top-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-end;
+}
+
+.top-actions-row {
+  width: 100%;
+  justify-content: flex-end;
+}
+
+.table-wrap {
+  position: relative;
+  overflow: auto;
+  height: calc(100vh - 150px);
+}
+
+.product-thumb {
+  width: 46px;
+  height: 46px;
+  border-radius: 4px;
+  background: #f4f4f4;
+}
+
+.image-cell {
+  padding: 2px 4px !important;
+}
+
+.order-price-list-table :deep(td),
+.order-price-list-table :deep(th) {
+  font-size: 11px;
+}
+
+.order-price-list-table :deep(.campaign-price-col) {
+  background: #f6fbf7;
+}
+
+.page-busy-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 30000;
+  background: rgba(255, 255, 255, 0.68);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: all;
+}
+
+.page-busy-label {
+  font-weight: 600;
+  color: #4c4c4c;
+}
+
+.empty-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.empty-overlay-inner {
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 6px;
+  padding: 16px 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+</style>