ui: add B2B olmayan stok (orphans) page
This commit is contained in:
M_Kececi
864
ui/src/pages/ProductSeriesMappingsOrphans.vue
Normal file
864
ui/src/pages/ProductSeriesMappingsOrphans.vue
Normal file
@@ -0,0 +1,864 @@
|
|||||||
|
<template>
|
||||||
|
<q-page
|
||||||
|
class="order-page product-series-page q-pa-md"
|
||||||
|
:style="{
|
||||||
|
'--grid-header-h': showGridHeader ? `${schemaRows.length * 28}px` : '0px',
|
||||||
|
'--beden-count': 16
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="sticky-stack">
|
||||||
|
<div class="save-toolbar row items-center q-gutter-sm">
|
||||||
|
<div>
|
||||||
|
<div class="text-subtitle2 text-weight-bold">B2B'de Olmayan Stoklu Varyantlar</div>
|
||||||
|
<div class="text-caption text-grey-8">
|
||||||
|
Stogu olan ancak B2B tarafinda urun/renk/dim3 kombosu bulunmayan varyantlar listelenir. Bu ekrandan kaydetme yapilmaz.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn color="primary" outline icon="grid_on" label="Excel" :disable="!displayRows.length" @click="exportVisibleExcel" />
|
||||||
|
<q-btn color="secondary" outline icon="refresh" label="Yenile" :loading="loading" @click="reload" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="showGridHeader" class="order-grid-header series-grid-header">
|
||||||
|
<div class="col-fixed model">
|
||||||
|
<div class="filter-head">
|
||||||
|
<span>MODEL</span>
|
||||||
|
<q-btn dense flat round size="sm" icon="filter_list" :color="activeFilterCount('model') ? 'primary' : 'grey-8'">
|
||||||
|
<q-badge v-if="activeFilterCount('model')" floating color="primary">{{ activeFilterCount('model') }}</q-badge>
|
||||||
|
<q-menu class="column-filter-menu" anchor="bottom left" self="top left">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-input v-model="filterSearch.model" dense outlined clearable placeholder="Ara" autofocus />
|
||||||
|
<div class="row q-gutter-xs q-mt-sm">
|
||||||
|
<q-btn dense flat size="sm" label="Tumu" @click="selectAllFilter('model')" />
|
||||||
|
<q-btn dense flat size="sm" label="Temizle" @click="clearFilter('model')" />
|
||||||
|
</div>
|
||||||
|
<q-separator class="q-my-sm" />
|
||||||
|
<q-option-group
|
||||||
|
v-model="columnFilters.model"
|
||||||
|
:options="filteredFilterOptions('model')"
|
||||||
|
type="checkbox"
|
||||||
|
dense
|
||||||
|
class="column-filter-options"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-fixed desc-col">
|
||||||
|
<div class="filter-head">
|
||||||
|
<span>DESC</span>
|
||||||
|
<q-btn dense flat round size="sm" icon="filter_list" :color="activeFilterCount('desc') ? 'primary' : 'grey-8'">
|
||||||
|
<q-badge v-if="activeFilterCount('desc')" floating color="primary">{{ activeFilterCount('desc') }}</q-badge>
|
||||||
|
<q-menu class="column-filter-menu" anchor="bottom left" self="top left">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-input v-model="filterSearch.desc" dense outlined clearable placeholder="Ara" autofocus />
|
||||||
|
<div class="row q-gutter-xs q-mt-sm">
|
||||||
|
<q-btn dense flat size="sm" label="Tumu" @click="selectAllFilter('desc')" />
|
||||||
|
<q-btn dense flat size="sm" label="Temizle" @click="clearFilter('desc')" />
|
||||||
|
</div>
|
||||||
|
<q-separator class="q-my-sm" />
|
||||||
|
<q-option-group
|
||||||
|
v-model="columnFilters.desc"
|
||||||
|
:options="filteredFilterOptions('desc')"
|
||||||
|
type="checkbox"
|
||||||
|
dense
|
||||||
|
class="column-filter-options"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-fixed renk">
|
||||||
|
<div class="filter-head">
|
||||||
|
<span>RENK</span>
|
||||||
|
<q-btn dense flat round size="sm" icon="filter_list" :color="activeFilterCount('renk') ? 'primary' : 'grey-8'">
|
||||||
|
<q-badge v-if="activeFilterCount('renk')" floating color="primary">{{ activeFilterCount('renk') }}</q-badge>
|
||||||
|
<q-menu class="column-filter-menu" anchor="bottom left" self="top left">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-input v-model="filterSearch.renk" dense outlined clearable placeholder="Ara" autofocus />
|
||||||
|
<div class="row q-gutter-xs q-mt-sm">
|
||||||
|
<q-btn dense flat size="sm" label="Tumu" @click="selectAllFilter('renk')" />
|
||||||
|
<q-btn dense flat size="sm" label="Temizle" @click="clearFilter('renk')" />
|
||||||
|
</div>
|
||||||
|
<q-separator class="q-my-sm" />
|
||||||
|
<q-option-group
|
||||||
|
v-model="columnFilters.renk"
|
||||||
|
:options="filteredFilterOptions('renk')"
|
||||||
|
type="checkbox"
|
||||||
|
dense
|
||||||
|
class="column-filter-options"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-fixed ana">
|
||||||
|
<div class="filter-head">
|
||||||
|
<span>URUN ANA GRUBU</span>
|
||||||
|
<q-btn dense flat round size="sm" icon="filter_list" :color="activeFilterCount('ana') ? 'primary' : 'grey-8'">
|
||||||
|
<q-badge v-if="activeFilterCount('ana')" floating color="primary">{{ activeFilterCount('ana') }}</q-badge>
|
||||||
|
<q-menu class="column-filter-menu" anchor="bottom left" self="top left">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-input v-model="filterSearch.ana" dense outlined clearable placeholder="Ara" autofocus />
|
||||||
|
<div class="row q-gutter-xs q-mt-sm">
|
||||||
|
<q-btn dense flat size="sm" label="Tumu" @click="selectAllFilter('ana')" />
|
||||||
|
<q-btn dense flat size="sm" label="Temizle" @click="clearFilter('ana')" />
|
||||||
|
</div>
|
||||||
|
<q-separator class="q-my-sm" />
|
||||||
|
<q-option-group
|
||||||
|
v-model="columnFilters.ana"
|
||||||
|
:options="filteredFilterOptions('ana')"
|
||||||
|
type="checkbox"
|
||||||
|
dense
|
||||||
|
class="column-filter-options"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-fixed alt">
|
||||||
|
<div class="filter-head">
|
||||||
|
<span>URUN ALT GRUBU</span>
|
||||||
|
<q-btn dense flat round size="sm" icon="filter_list" :color="activeFilterCount('alt') ? 'primary' : 'grey-8'">
|
||||||
|
<q-badge v-if="activeFilterCount('alt')" floating color="primary">{{ activeFilterCount('alt') }}</q-badge>
|
||||||
|
<q-menu class="column-filter-menu" anchor="bottom left" self="top left">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-input v-model="filterSearch.alt" dense outlined clearable placeholder="Ara" autofocus />
|
||||||
|
<div class="row q-gutter-xs q-mt-sm">
|
||||||
|
<q-btn dense flat size="sm" label="Tumu" @click="selectAllFilter('alt')" />
|
||||||
|
<q-btn dense flat size="sm" label="Temizle" @click="clearFilter('alt')" />
|
||||||
|
</div>
|
||||||
|
<q-separator class="q-my-sm" />
|
||||||
|
<q-option-group
|
||||||
|
v-model="columnFilters.alt"
|
||||||
|
:options="filteredFilterOptions('alt')"
|
||||||
|
type="checkbox"
|
||||||
|
dense
|
||||||
|
class="column-filter-options"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-fixed marka">
|
||||||
|
<div class="filter-head">
|
||||||
|
<span>MARKA</span>
|
||||||
|
<q-btn dense flat round size="sm" icon="filter_list" :color="activeFilterCount('marka') ? 'primary' : 'grey-8'">
|
||||||
|
<q-badge v-if="activeFilterCount('marka')" floating color="primary">{{ activeFilterCount('marka') }}</q-badge>
|
||||||
|
<q-menu class="column-filter-menu" anchor="bottom left" self="top left">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-input v-model="filterSearch.marka" dense outlined clearable placeholder="Ara" autofocus />
|
||||||
|
<div class="row q-gutter-xs q-mt-sm">
|
||||||
|
<q-btn dense flat size="sm" label="Tumu" @click="selectAllFilter('marka')" />
|
||||||
|
<q-btn dense flat size="sm" label="Temizle" @click="clearFilter('marka')" />
|
||||||
|
</div>
|
||||||
|
<q-separator class="q-my-sm" />
|
||||||
|
<q-option-group
|
||||||
|
v-model="columnFilters.marka"
|
||||||
|
:options="filteredFilterOptions('marka')"
|
||||||
|
type="checkbox"
|
||||||
|
dense
|
||||||
|
class="column-filter-options"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="beden-block">
|
||||||
|
<div
|
||||||
|
v-for="grp in schemaRows"
|
||||||
|
:key="'series-hdr-' + grp.key"
|
||||||
|
class="grp-row"
|
||||||
|
>
|
||||||
|
<div class="grp-title">{{ grp.title }}</div>
|
||||||
|
<div class="grp-body">
|
||||||
|
<div v-for="v in paddedSchemaValues(grp)" :key="'hdr-' + grp.key + '-' + v.key" class="grp-cell hdr" :class="{ ghost: v.ghost }">
|
||||||
|
{{ v.ghost ? '' : v.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="total-header-cell">TOPLAM</div>
|
||||||
|
<div class="series-header-cell">SERI</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-banner v-if="errorMessage" class="bg-red-1 text-negative q-my-sm rounded-borders" dense>
|
||||||
|
{{ errorMessage }}
|
||||||
|
</q-banner>
|
||||||
|
|
||||||
|
<q-banner v-else-if="!loading && !displayRows.length" class="bg-blue-1 text-primary q-my-sm rounded-borders" dense>
|
||||||
|
B2B'de olmayan stoklu varyant bulunamadi.
|
||||||
|
</q-banner>
|
||||||
|
|
||||||
|
<q-inner-loading :showing="loading">
|
||||||
|
<q-spinner color="primary" size="42px" />
|
||||||
|
</q-inner-loading>
|
||||||
|
|
||||||
|
<div class="order-scroll-y series-scroll">
|
||||||
|
<div v-if="displayRows.length" class="order-grid-body series-grid-body">
|
||||||
|
<div
|
||||||
|
v-for="row in displayRows"
|
||||||
|
:key="row.row_key"
|
||||||
|
class="series-flat-row warning"
|
||||||
|
>
|
||||||
|
<div class="sub-col model">{{ row.product_code || '-' }}</div>
|
||||||
|
<div class="sub-col desc">{{ row.product_description || '-' }}</div>
|
||||||
|
<div class="sub-col renk">
|
||||||
|
<div class="renk-kodu">{{ variantCode(row) }}</div>
|
||||||
|
<div class="renk-aciklama">{{ row.color_title || '-' }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="sub-col ana">{{ row.urun_ana_grubu || '-' }}</div>
|
||||||
|
<div class="sub-col alt">{{ row.urun_alt_grubu || '-' }}</div>
|
||||||
|
<div class="sub-col marka">{{ row.marka || '-' }}</div>
|
||||||
|
|
||||||
|
<div class="flat-size-cells">
|
||||||
|
<div v-for="sz in rowSizeCells(row)" :key="`${row.row_key}-${sz.key}`" class="beden-cell" :class="{ ghost: sz.ghost }">
|
||||||
|
{{ formatQty(row._mapped_size_qty?.[sz.value]) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="total-cell">{{ formatQty(row.total_qty) }}</div>
|
||||||
|
|
||||||
|
<div class="series-select-cell" @click.stop>
|
||||||
|
<q-select
|
||||||
|
v-model="row._series_ids"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
multiple
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
use-chips
|
||||||
|
:options="seriesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="label"
|
||||||
|
disable
|
||||||
|
/>
|
||||||
|
<div class="series-meta">
|
||||||
|
<q-badge color="grey-7">Salt okunur</q-badge>
|
||||||
|
<span v-if="row.mapping_warning" class="mapping-warning">{{ row.mapping_warning }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
import { Notify } from 'quasar'
|
||||||
|
import api from 'src/services/api'
|
||||||
|
import {
|
||||||
|
detectBedenGroup,
|
||||||
|
normalizeBedenLabel,
|
||||||
|
schemaByKey as fallbackSchemaByKey,
|
||||||
|
useOrderEntryStore
|
||||||
|
} from 'src/stores/orderentryStore'
|
||||||
|
|
||||||
|
const orderStore = useOrderEntryStore()
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const rows = ref([])
|
||||||
|
const definitions = ref([])
|
||||||
|
const errorMessage = ref('')
|
||||||
|
const columnFilters = ref({
|
||||||
|
model: [],
|
||||||
|
desc: [],
|
||||||
|
renk: [],
|
||||||
|
ana: [],
|
||||||
|
alt: [],
|
||||||
|
marka: []
|
||||||
|
})
|
||||||
|
const filterSearch = ref({
|
||||||
|
model: '',
|
||||||
|
desc: '',
|
||||||
|
renk: '',
|
||||||
|
ana: '',
|
||||||
|
alt: '',
|
||||||
|
marka: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const showGridHeader = computed(() => !loading.value && productGroups.value.length > 0)
|
||||||
|
|
||||||
|
const seriesOptions = computed(() => definitions.value.map(item => ({
|
||||||
|
...item,
|
||||||
|
label: formatSeries(item)
|
||||||
|
})))
|
||||||
|
|
||||||
|
const displayRows = computed(() => {
|
||||||
|
const list = rows.value.filter(rowPassesFilters)
|
||||||
|
const productTotals = productTotalQtyMap(list)
|
||||||
|
return list.sort((a, b) => {
|
||||||
|
const groupDiff = Number(productTotals.get(b.product_code) || 0) - Number(productTotals.get(a.product_code) || 0)
|
||||||
|
if (groupDiff !== 0) return groupDiff
|
||||||
|
const code = String(a.product_code || '').localeCompare(String(b.product_code || ''), 'tr')
|
||||||
|
if (code !== 0) return code
|
||||||
|
const color = String(a.color_code || '').localeCompare(String(b.color_code || ''), 'tr')
|
||||||
|
if (color !== 0) return color
|
||||||
|
const dim3 = String(a.dim3_code || '').localeCompare(String(b.dim3_code || ''), 'tr')
|
||||||
|
if (dim3 !== 0) return dim3
|
||||||
|
return Number(b.total_qty || 0) - Number(a.total_qty || 0)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function productTotalQtyMap (list) {
|
||||||
|
const totals = new Map()
|
||||||
|
for (const row of list || []) {
|
||||||
|
const code = String(row?.product_code || '').trim()
|
||||||
|
if (!code) continue
|
||||||
|
totals.set(code, Number(totals.get(code) || 0) + Number(row?.total_qty || 0))
|
||||||
|
}
|
||||||
|
return totals
|
||||||
|
}
|
||||||
|
|
||||||
|
const productGroups = computed(() => displayRows.value)
|
||||||
|
|
||||||
|
const filterOptions = computed(() => ({
|
||||||
|
model: uniqueOptions(rows.value.map(row => row.product_code)),
|
||||||
|
desc: uniqueOptions(rows.value.map(row => row.product_description)),
|
||||||
|
renk: uniqueOptions(rows.value.map(row => variantCode(row))),
|
||||||
|
ana: uniqueOptions(rows.value.map(row => row.urun_ana_grubu)),
|
||||||
|
alt: uniqueOptions(rows.value.map(row => row.urun_alt_grubu)),
|
||||||
|
marka: uniqueOptions(rows.value.map(row => row.marka))
|
||||||
|
}))
|
||||||
|
|
||||||
|
const schemaRows = computed(() => {
|
||||||
|
const map = getSchemaMap()
|
||||||
|
const preferred = ['tak', 'ayk', 'ayk_garson', 'yas', 'pan', 'gom', 'aksbir']
|
||||||
|
const ordered = preferred
|
||||||
|
.map(key => map?.[key])
|
||||||
|
.filter(Boolean)
|
||||||
|
const extras = Object.values(map || {})
|
||||||
|
.filter(grp => grp?.key && !preferred.includes(grp.key))
|
||||||
|
return [...ordered, ...extras]
|
||||||
|
})
|
||||||
|
|
||||||
|
function uniqueOptions (values) {
|
||||||
|
return [...new Set(values.map(v => String(v || '').trim()).filter(Boolean))]
|
||||||
|
.sort((a, b) => a.localeCompare(b, 'tr'))
|
||||||
|
.map(value => ({ label: value, value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
function filteredFilterOptions (key) {
|
||||||
|
const needle = normalizeFilterText(filterSearch.value[key])
|
||||||
|
const opts = filterOptions.value[key] || []
|
||||||
|
if (!needle) return opts
|
||||||
|
return opts.filter(opt => normalizeFilterText(opt.label).includes(needle))
|
||||||
|
}
|
||||||
|
|
||||||
|
function activeFilterCount (key) {
|
||||||
|
return Array.isArray(columnFilters.value[key]) ? columnFilters.value[key].length : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAllFilter (key) {
|
||||||
|
columnFilters.value[key] = filteredFilterOptions(key).map(opt => opt.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearFilter (key) {
|
||||||
|
columnFilters.value[key] = []
|
||||||
|
}
|
||||||
|
|
||||||
|
function rowPassesFilters (row) {
|
||||||
|
return filterMatch('model', row.product_code) &&
|
||||||
|
filterMatch('desc', row.product_description) &&
|
||||||
|
filterMatch('renk', variantCode(row)) &&
|
||||||
|
filterMatch('ana', row.urun_ana_grubu) &&
|
||||||
|
filterMatch('alt', row.urun_alt_grubu) &&
|
||||||
|
filterMatch('marka', row.marka)
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterMatch (key, value) {
|
||||||
|
const selected = columnFilters.value[key] || []
|
||||||
|
if (!selected.length) return true
|
||||||
|
return selected.includes(String(value || '').trim())
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeFilterText (value) {
|
||||||
|
return String(value || '')
|
||||||
|
.trim()
|
||||||
|
.toLocaleLowerCase('tr-TR')
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeRow (row) {
|
||||||
|
const ids = Array.isArray(row.series_ids) ? row.series_ids.map(Number).filter(Boolean) : []
|
||||||
|
const mappedInfo = mapRowSizesToSchema(row)
|
||||||
|
return {
|
||||||
|
...row,
|
||||||
|
series_ids: ids,
|
||||||
|
_series_ids: [...ids],
|
||||||
|
_grp_key: mappedInfo.grpKey,
|
||||||
|
_schema: mappedInfo.schema,
|
||||||
|
_mapped_size_qty: mappedInfo.mapped
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reload () {
|
||||||
|
loading.value = true
|
||||||
|
errorMessage.value = ''
|
||||||
|
try {
|
||||||
|
if (!orderStore.schemaMap || !Object.keys(orderStore.schemaMap).length) {
|
||||||
|
orderStore.initSchemaMap()
|
||||||
|
}
|
||||||
|
await orderStore.ensureProductSizeMatchRules()
|
||||||
|
const res = await api.get('/pricing/product-series/mappings/orphans', { timeout: 180000 })
|
||||||
|
rows.value = (res.data?.rows || []).map(normalizeRow)
|
||||||
|
definitions.value = res.data?.definitions || []
|
||||||
|
} catch (err) {
|
||||||
|
errorMessage.value = err?.response?.data || err?.message || 'B2B olmayan stoklu varyantlar alinamadi'
|
||||||
|
Notify.create({ type: 'negative', message: errorMessage.value })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function paddedSchemaValues (grp) {
|
||||||
|
const values = Array.isArray(grp?.values) ? grp.values.map(v => normalizeBedenLabel(v)) : []
|
||||||
|
const out = values.slice(0, 16).map((value, index) => ({ key: `${value}-${index}`, value, ghost: false, toString: () => value }))
|
||||||
|
while (out.length < 16) {
|
||||||
|
const index = out.length
|
||||||
|
out.push({ key: `ghost-${index}`, value: `__ghost_${index}`, ghost: true, toString: () => '' })
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
function rowSizeCells (row) {
|
||||||
|
const schema = row?._schema || getSchemaMap()?.[row?._grp_key] || fallbackSchemaByKey.tak
|
||||||
|
return paddedSchemaValues(schema)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSchemaMap () {
|
||||||
|
return Object.keys(orderStore.schemaMap || {}).length
|
||||||
|
? orderStore.schemaMap
|
||||||
|
: fallbackSchemaByKey
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizedSchemaLabelMap (schema) {
|
||||||
|
const out = new Map()
|
||||||
|
for (const label of schema?.values || []) {
|
||||||
|
const normalized = normalizeBedenLabel(label)
|
||||||
|
if (!out.has(normalized)) out.set(normalized, label)
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
function detectRowGroupKey (row, rawSizeLabels) {
|
||||||
|
const fallback = detectRowGroupKeyFallback(row, rawSizeLabels)
|
||||||
|
if (fallback) return fallback
|
||||||
|
return detectBedenGroup(
|
||||||
|
rawSizeLabels,
|
||||||
|
row.urun_ana_grubu || '',
|
||||||
|
row.kategori || '',
|
||||||
|
row.kategori || '',
|
||||||
|
row.urun_alt_grubu || ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeMatchText (value) {
|
||||||
|
return String(value || '')
|
||||||
|
.trim()
|
||||||
|
.toLocaleUpperCase('tr-TR')
|
||||||
|
.normalize('NFD')
|
||||||
|
.replace(/[\u0300-\u036f]/g, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
function detectRowGroupKeyFallback (row, rawSizeLabels) {
|
||||||
|
const ana = normalizeMatchText(row?.urun_ana_grubu)
|
||||||
|
const alt = normalizeMatchText(row?.urun_alt_grubu)
|
||||||
|
const marka = normalizeMatchText(row?.marka)
|
||||||
|
const text = `${ana} ${alt} ${marka}`
|
||||||
|
const sizes = (rawSizeLabels || []).map(v => normalizeBedenLabel(v))
|
||||||
|
const hasLetterSize = sizes.some(v => ['XS', 'S', 'M', 'L', 'XL', '2XL', '3XL', '4XL', '5XL', '6XL', '7XL'].includes(v))
|
||||||
|
|
||||||
|
if (['KRAVAT', 'PAPYON', 'KEMER', 'CORAP', 'FULAR', 'MENDIL', 'KASKOL', 'ASKI', 'AKSESUAR'].some(key => text.includes(key))) return 'aksbir'
|
||||||
|
if (text.includes('AYAKKABI')) return text.includes('GARSON') ? 'ayk_garson' : 'ayk'
|
||||||
|
if (text.includes('PANTOLON')) return 'pan'
|
||||||
|
if (text.includes('GOMLEK') || hasLetterSize) return 'gom'
|
||||||
|
if (text.includes('TAKIM') || text.includes('DAMATLIK') || text.includes('CEKET') || text.includes('KABAN') || text.includes('MONT') || text.includes('YELEK')) return 'tak'
|
||||||
|
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapRowSizesToSchema (row) {
|
||||||
|
const sizeEntries = Object.entries(row?.size_qty || {})
|
||||||
|
const rawSizeLabels = sizeEntries.map(([rawSize]) => normalizeBedenLabel(rawSize))
|
||||||
|
const schemaMap = getSchemaMap()
|
||||||
|
const grpKey = detectRowGroupKey(row, rawSizeLabels)
|
||||||
|
const schema = grpKey && schemaMap?.[grpKey] ? schemaMap[grpKey] : null
|
||||||
|
const schemaLabelMap = normalizedSchemaLabelMap(schema)
|
||||||
|
const mapped = {}
|
||||||
|
|
||||||
|
for (const [rawSize, rawQty] of sizeEntries) {
|
||||||
|
const normalized = normalizeBedenLabel(rawSize)
|
||||||
|
const target = normalizeBedenLabel(schemaLabelMap.get(normalized) || normalized)
|
||||||
|
mapped[target] = Number(mapped[target] || 0) + Number(rawQty || 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (grpKey === 'aksbir' && !Object.keys(mapped).length && Number(row?.total_qty || 0) > 0) {
|
||||||
|
mapped[' '] = Number(row.total_qty || 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (grpKey !== 'aksbir' && Object.keys(mapped).some(k => String(k).trim() !== '')) {
|
||||||
|
delete mapped[' ']
|
||||||
|
}
|
||||||
|
|
||||||
|
return { grpKey, schema, mapped }
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatQty (value) {
|
||||||
|
const n = Number(value || 0)
|
||||||
|
if (!Number.isFinite(n) || n === 0) return ''
|
||||||
|
return n.toLocaleString('tr-TR', { maximumFractionDigits: 2 })
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSeries (item) {
|
||||||
|
const code = String(item?.code || '').trim()
|
||||||
|
const title = String(item?.title || '').trim()
|
||||||
|
return title ? `${code}/${title}` : code
|
||||||
|
}
|
||||||
|
|
||||||
|
function variantCode (row) {
|
||||||
|
const c = String(row?.color_code || '').trim()
|
||||||
|
const d = String(row?.dim3_code || '').trim()
|
||||||
|
return d ? `${c}-${d}` : (c || '-')
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportFileStamp () {
|
||||||
|
const now = new Date()
|
||||||
|
const pad = v => String(v).padStart(2, '0')
|
||||||
|
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function csvEscape (v) {
|
||||||
|
const s = String(v ?? '')
|
||||||
|
if (!s.includes(',') && !s.includes('"') && !s.includes('\n')) return s
|
||||||
|
return `"${s.replace(/"/g, '""')}"`
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportVisibleExcel () {
|
||||||
|
const cols = ['MODEL', 'DESC', 'RENK', 'URUN ANA GRUBU', 'URUN ALT GRUBU', 'MARKA']
|
||||||
|
const sizeCols = schemaRows.value.flatMap(grp => paddedSchemaValues(grp).map(v => (v.ghost ? '' : v.value))).filter(Boolean)
|
||||||
|
cols.push(...sizeCols)
|
||||||
|
cols.push('TOPLAM', 'SERI', 'UYARI')
|
||||||
|
|
||||||
|
const lines = [cols.map(csvEscape).join(',')]
|
||||||
|
for (const row of displayRows.value) {
|
||||||
|
const sizeValues = []
|
||||||
|
const cells = rowSizeCells(row)
|
||||||
|
for (const cell of cells) {
|
||||||
|
sizeValues.push(cell.ghost ? '' : formatQty(row._mapped_size_qty?.[cell.value]))
|
||||||
|
}
|
||||||
|
lines.push([
|
||||||
|
row.product_code || '',
|
||||||
|
row.product_description || '',
|
||||||
|
variantCode(row),
|
||||||
|
row.urun_ana_grubu || '',
|
||||||
|
row.urun_alt_grubu || '',
|
||||||
|
row.marka || '',
|
||||||
|
...sizeValues,
|
||||||
|
formatQty(row.total_qty),
|
||||||
|
'',
|
||||||
|
row.mapping_warning || ''
|
||||||
|
].map(csvEscape).join(','))
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8;' })
|
||||||
|
const url = URL.createObjectURL(blob)
|
||||||
|
const a = document.createElement('a')
|
||||||
|
a.href = url
|
||||||
|
a.download = `b2b-olmayan-stoklu-varyantlar_${exportFileStamp()}.csv`
|
||||||
|
document.body.appendChild(a)
|
||||||
|
a.click()
|
||||||
|
document.body.removeChild(a)
|
||||||
|
URL.revokeObjectURL(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => reload())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.product-series-page {
|
||||||
|
--filter-h: 0px;
|
||||||
|
--psq-sticky-offset: 12px;
|
||||||
|
--grp-title-w: 90px;
|
||||||
|
--col-desc: var(--col-aciklama);
|
||||||
|
--col-marka-series: var(--col-marka, 90px);
|
||||||
|
--psq-header-h: var(--grid-header-h);
|
||||||
|
--series-total-w: 76px;
|
||||||
|
--series-col-w: minmax(220px, 1fr);
|
||||||
|
background: #f5f1da;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-scroll {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header,
|
||||||
|
.series-flat-row {
|
||||||
|
grid-template-columns:
|
||||||
|
var(--col-model)
|
||||||
|
var(--col-desc)
|
||||||
|
var(--col-renk)
|
||||||
|
var(--col-ana)
|
||||||
|
var(--col-alt)
|
||||||
|
var(--col-marka-series)
|
||||||
|
calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)))
|
||||||
|
var(--series-total-w)
|
||||||
|
var(--series-col-w) !important;
|
||||||
|
width: 100%;
|
||||||
|
min-width: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header {
|
||||||
|
top: calc(var(--header-h) + var(--filter-h) + var(--save-h) + var(--psq-sticky-offset)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header .col-fixed,
|
||||||
|
.total-header-cell,
|
||||||
|
.series-header-cell {
|
||||||
|
writing-mode: horizontal-tb !important;
|
||||||
|
transform: none !important;
|
||||||
|
height: var(--psq-header-h) !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 10px !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding: 0 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-head {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-head span {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-filter-menu {
|
||||||
|
width: 280px;
|
||||||
|
max-width: 86vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-filter-options {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header .beden-block {
|
||||||
|
height: var(--psq-header-h) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header .grp-row {
|
||||||
|
height: var(--beden-h) !important;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header .grp-title {
|
||||||
|
width: var(--grp-title-w) !important;
|
||||||
|
text-align: center !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header .grp-cell.hdr {
|
||||||
|
height: var(--beden-h) !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-grid-header .grp-cell.hdr.ghost {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-header-cell,
|
||||||
|
.series-header-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff8d1;
|
||||||
|
border-left: 1px solid #d4c79f;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-header-cell {
|
||||||
|
grid-column: 8 / 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-header-cell {
|
||||||
|
grid-column: 9 / 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row {
|
||||||
|
display: grid;
|
||||||
|
min-height: 72px;
|
||||||
|
align-items: center;
|
||||||
|
background: #fff9c4 !important;
|
||||||
|
border-top: 1px solid #d4c79f !important;
|
||||||
|
border-bottom: 1px solid #d4c79f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row.dirty {
|
||||||
|
background: #fff0cf !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row.warning {
|
||||||
|
box-shadow: inset 3px 0 0 #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row .sub-col {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #111;
|
||||||
|
min-width: 0;
|
||||||
|
border-right: 1px solid #d4c79f;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: visible;
|
||||||
|
line-height: 1.2;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row .sub-col.model { grid-column: 1; }
|
||||||
|
.series-flat-row .sub-col.desc { grid-column: 2; }
|
||||||
|
.series-flat-row .sub-col.renk { grid-column: 3; }
|
||||||
|
.series-flat-row .sub-col.ana { grid-column: 4; }
|
||||||
|
.series-flat-row .sub-col.alt { grid-column: 5; }
|
||||||
|
.series-flat-row .sub-col.marka { grid-column: 6; }
|
||||||
|
|
||||||
|
.series-flat-row .sub-col.model,
|
||||||
|
.series-flat-row .sub-col.renk,
|
||||||
|
.series-flat-row .sub-col.ana,
|
||||||
|
.series-flat-row .sub-col.alt,
|
||||||
|
.series-flat-row .sub-col.marka {
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row .sub-col.desc {
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row .sub-col.renk {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row .sub-col.renk .renk-kodu {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-flat-row .sub-col.renk .renk-aciklama {
|
||||||
|
font-size: 11px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flat-size-cells {
|
||||||
|
grid-column: 7;
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: var(--beden-w);
|
||||||
|
justify-content: start;
|
||||||
|
align-items: stretch;
|
||||||
|
width: calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)));
|
||||||
|
padding-left: calc(var(--grp-title-w) + var(--grp-title-gap));
|
||||||
|
margin-left: 0;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flat-size-cells::before,
|
||||||
|
.flat-size-cells::after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flat-size-cells .beden-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: var(--beden-w);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #d4c79f;
|
||||||
|
border-right: none;
|
||||||
|
background: #fffef6;
|
||||||
|
color: #1f1f1f;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flat-size-cells .beden-cell:last-child {
|
||||||
|
border-right: 1px solid #d4c79f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flat-size-cells .beden-cell.ghost {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-cell {
|
||||||
|
grid-column: 8;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-left: 1px solid #d4c79f;
|
||||||
|
border-right: 1px solid #d4c79f;
|
||||||
|
color: var(--q-primary, #1976d2);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-select-cell {
|
||||||
|
grid-column: 9 / 10;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-left: 1px solid #d4c79f;
|
||||||
|
background: #fffdf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-select-cell :deep(.q-field__control) {
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-chip {
|
||||||
|
max-width: 170px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.series-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
min-height: 18px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapping-warning {
|
||||||
|
color: #b45309;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user