Files
bssapp/ui/src/pages/OrderProductionUpdate.vue
2026-04-03 15:23:53 +03:00

1547 lines
49 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<q-page class="q-pa-md full-width order-prod-page">
<div class="row items-center justify-between page-header">
<div>
<div class="text-h6 text-weight-bold">Uretime Verilen Urunleri Guncelle</div>
</div>
<q-btn
color="primary"
icon="refresh"
label="Yenile"
:loading="store.loading"
@click="refreshAll"
/>
<q-btn
class="q-ml-sm"
color="secondary"
icon="save"
label="Secili Degisiklikleri Kaydet"
:loading="store.saving"
@click="onBulkSubmit"
/>
</div>
<div class="filter-bar row q-col-gutter-md">
<div class="col-5">
<q-input
:model-value="cariLabel"
label="Cari Secimi"
filled
dense
readonly
/>
</div>
<div class="col-3">
<q-input
v-model="descFilter"
label="Aciklama Ara"
filled
dense
clearable
/>
</div>
<div class="col-2">
<q-input
:model-value="header?.OrderNumber || ''"
label="Siparis No"
filled
dense
readonly
/>
</div>
<div class="col-2">
<q-input
:model-value="formatDate(header?.OrderDate)"
label="Olusturulma Tarihi"
filled
dense
readonly
/>
</div>
<div class="col-2">
<q-input
:model-value="formatDate(header?.AverageDueDate)"
label="Tahmini Termin Tarihi"
filled
dense
readonly
/>
</div>
</div>
<div class="table-wrap">
<q-table
class="q-mt-md prod-table"
flat
bordered
dense
separator="cell"
row-key="RowKey"
:rows="filteredRows"
:columns="columns"
:loading="store.loading"
no-data-label="Uretime verilecek urun bulunamadi"
:rows-per-page-options="[0]"
:table-style="{ tableLayout: 'fixed', width: '100%' }"
hide-bottom
>
<template #header-cell-select="props">
<q-th :props="props" class="text-center" style="width: 44px">
<q-checkbox
size="sm"
:model-value="allSelectedVisible"
:indeterminate="someSelectedVisible && !allSelectedVisible"
@update:model-value="toggleSelectAllVisible"
/>
</q-th>
</template>
<template #body-cell-select="props">
<q-td :props="props" class="text-center" style="width: 44px">
<q-checkbox
size="sm"
:model-value="!!selectedMap[props.row.RowKey]"
@update:model-value="(val) => toggleRowSelection(props.row.RowKey, val)"
/>
</q-td>
</template>
<template #body-cell-NewItemCode="props">
<q-td :props="props">
<q-select
v-model="props.row.NewItemEntryMode"
dense
filled
emit-value
map-options
:options="newItemEntryModeOptions"
label="Kod Giris Tipi"
@update:model-value="val => onNewItemEntryModeChange(props.row, val)"
/>
<q-select
v-if="props.row.NewItemEntryMode === 'selected'"
class="q-mt-xs"
v-model="props.row.NewItemCode"
dense
filled
use-input
fill-input
hide-selected
input-debounce="0"
emit-value
map-options
option-label="label"
option-value="value"
:options="productCodeSelectOptions"
label="Eski Kod Sec"
@filter="onFilterProductCode"
@update:model-value="val => onSelectProduct(props.row, val)"
/>
<q-input
v-else-if="props.row.NewItemEntryMode === 'typed'"
class="q-mt-xs"
v-model="props.row.NewItemCode"
dense
filled
maxlength="13"
placeholder="X999-XX99999"
label="Yeni Kod Ekle"
:class="newItemInputClass(props.row)"
@update:model-value="val => onNewItemChange(props.row, val, 'typed')"
/>
<div v-if="props.row.NewItemMode && props.row.NewItemMode !== 'empty'" class="q-mt-xs row items-center no-wrap">
<q-badge :color="newItemBadgeColor(props.row)" text-color="white">
{{ newItemBadgeLabel(props.row) }}
</q-badge>
<span class="text-caption q-ml-sm text-grey-8">{{ newItemHintText(props.row) }}</span>
<q-btn
v-if="props.row.NewItemMode === 'new'"
class="q-ml-sm"
dense
flat
size="sm"
color="warning"
label="Urun Boyutlandirma"
@click="openCdItemDialog(props.row.NewItemCode)"
/>
<q-btn
v-if="props.row.NewItemMode && props.row.NewItemMode !== 'empty'"
class="q-ml-xs"
dense
flat
size="sm"
color="primary"
label="Urun Ozellikleri"
@click="openAttributeDialog(props.row.NewItemCode)"
/>
</div>
</q-td>
</template>
<template #body-cell-NewColor="props">
<q-td :props="props">
<q-select
v-model="props.row.NewColor"
:options="getColorOptions(props.row)"
option-label="colorLabel"
option-value="color_code"
use-input
fill-input
hide-selected
input-debounce="0"
emit-value
map-options
dense
filled
label="Yeni Renk"
:disable="isColorSelectionLocked(props.row)"
@update:model-value="() => onNewColorChange(props.row)"
/>
</q-td>
</template>
<template #body-cell-NewDim2="props">
<q-td :props="props">
<q-select
v-model="props.row.NewDim2"
:options="getSecondColorOptions(props.row)"
option-label="item_dim2_label"
option-value="item_dim2_code"
use-input
fill-input
hide-selected
input-debounce="0"
emit-value
map-options
dense
filled
label="Yeni 2. Renk"
:disable="isColorSelectionLocked(props.row)"
@update:model-value="() => onNewDim2Change(props.row)"
/>
</q-td>
</template>
<template #body-cell-NewDesc="props">
<q-td :props="props" class="cell-new">
<q-input
v-model="props.row.NewDesc"
dense
filled
type="textarea"
autogrow
label="Yeni Aciklama"
/>
</q-td>
</template>
</q-table>
</div>
<q-banner v-if="store.error" class="bg-red text-white q-mt-sm">
Hata: {{ store.error }}
</q-banner>
<q-dialog v-model="cdItemDialogOpen" persistent>
<q-card style="min-width: 980px; max-width: 98vw;">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Urun Boyutlandirma</div>
<q-space />
<q-badge color="warning" text-color="black">
{{ cdItemTargetCode || '-' }}
</q-badge>
</q-card-section>
<q-card-section class="q-pt-md">
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-4">
<q-select v-model="cdItemDraftForm.ItemDimTypeCode" dense filled use-input fill-input hide-selected input-debounce="0" emit-value map-options option-label="label" option-value="value" :options="lookupOptions('itemDimTypeCodes')" label="Boyut Secenekleri" />
</div>
<div class="col-12 col-md-4">
<q-select v-model="cdItemDraftForm.ProductHierarchyID" dense filled use-input fill-input hide-selected input-debounce="0" emit-value map-options option-label="label" option-value="value" :options="lookupOptions('productHierarchyIDs')" label="Urun Hiyerarsi Grubu" />
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Vazgec" color="grey-8" v-close-popup />
<q-btn color="primary" label="Taslagi Kaydet" @click="saveCdItemDraft" />
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-model="attributeDialogOpen" persistent>
<q-card style="min-width: 1100px; max-width: 98vw;">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Urun Ozellikleri (2. Pop-up)</div>
<q-space />
<q-badge color="primary">{{ attributeTargetCode || '-' }}</q-badge>
</q-card-section>
<q-card-section style="max-height: 68vh; overflow: auto;">
<div
v-for="(row, idx) in attributeRows"
:key="`${row.AttributeTypeCodeNumber}-${idx}`"
class="row q-col-gutter-sm q-mb-xs items-center"
>
<div class="col-12 col-md-5">
<q-input :model-value="row.TypeLabel" dense filled readonly />
</div>
<div class="col-12 col-md-7">
<q-select
v-model="row.AttributeCode"
dense
filled
use-input
fill-input
hide-selected
input-debounce="0"
@filter="(val, update) => onFilterAttributeOption(row, val, update)"
emit-value
map-options
option-label="label"
option-value="value"
:options="row.Options"
/>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Vazgec" color="grey-8" v-close-popup />
<q-btn color="primary" label="Ozellikleri Kaydet" @click="saveAttributeDraft" />
</q-card-actions>
</q-card>
</q-dialog>
</q-page>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useQuasar } from 'quasar'
import { useOrderProductionItemStore } from 'src/stores/OrderProductionItemStore'
import api from 'src/services/api'
import { normalizeSearchText } from 'src/utils/searchText'
const route = useRoute()
const $q = useQuasar()
const store = useOrderProductionItemStore()
const BAGGI_CODE_PATTERN = /^[A-Z][0-9]{3}-[A-Z]{3}[0-9]{5}$/
const BAGGI_CODE_ERROR = 'Girdiginiz kod BAGGI kod sistemine uyumlu degil. Format: X999-XXX99999'
function nowMs () {
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
return performance.now()
}
return Date.now()
}
const orderHeaderID = computed(() => String(route.params.orderHeaderID || '').trim())
const header = computed(() => store.header || {})
const cariLabel = computed(() => {
const code = header.value?.CurrAccCode || ''
const name = header.value?.CurrAccDescription || ''
if (!code && !name) return ''
if (!name) return code
return `${code} - ${name}`
})
const rows = ref([])
const descFilter = ref('')
const productOptions = ref([])
const selectedMap = ref({})
const cdItemDialogOpen = ref(false)
const cdItemTargetCode = ref('')
const cdItemDraftForm = ref(createEmptyCdItemDraft(''))
const attributeDialogOpen = ref(false)
const attributeTargetCode = ref('')
const attributeRows = ref([])
const columns = [
{ name: 'select', label: '', field: 'select', align: 'center', sortable: false, style: 'width:44px;', headerStyle: 'width:44px;' },
{ name: 'OldItemCode', label: 'Eski Urun Kodu', field: 'OldItemCode', align: 'left', sortable: true, style: 'min-width:90px;white-space:normal', headerStyle: 'min-width:90px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
{ name: 'OldColor', label: 'Eski Urun Rengi', field: 'OldColor', align: 'left', sortable: true, style: 'min-width:80px;white-space:normal', headerStyle: 'min-width:80px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
{ name: 'OldDim2', label: 'Eski 2. Renk', field: 'OldDim2', align: 'left', sortable: true, style: 'min-width:80px;white-space:normal', headerStyle: 'min-width:80px;white-space:normal', headerClasses: 'col-old', classes: 'col-old' },
{ name: 'OldDesc', label: 'Eski Aciklama', field: 'OldDesc', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-old col-desc', classes: 'col-old col-desc' },
{ name: 'OldSizes', label: 'Bedenler', field: 'OldSizesLabel', align: 'left', sortable: false, style: 'min-width:90px;', headerStyle: 'min-width:90px;', headerClasses: 'col-old col-wrap', classes: 'col-old col-wrap' },
{ name: 'NewItemCode', label: 'Yeni Urun Kodu', field: 'NewItemCode', align: 'left', sortable: false, style: 'min-width:130px;', headerStyle: 'min-width:130px;', headerClasses: 'col-new col-new-first', classes: 'col-new col-new-first' },
{ name: 'NewColor', label: 'Yeni Urun Rengi', field: 'NewColor', align: 'left', sortable: false, style: 'min-width:100px;', headerStyle: 'min-width:100px;', headerClasses: 'col-new', classes: 'col-new' },
{ name: 'NewDim2', label: 'Yeni 2. Renk', field: 'NewDim2', align: 'left', sortable: false, style: 'min-width:100px;', headerStyle: 'min-width:100px;', headerClasses: 'col-new', classes: 'col-new' },
{ name: 'NewDesc', label: 'Yeni Aciklama', field: 'NewDesc', align: 'left', sortable: false, style: 'min-width:140px;', headerStyle: 'min-width:140px;', headerClasses: 'col-new col-desc', classes: 'col-new col-desc' }
]
onMounted(async () => {
await refreshAll()
})
watch(orderHeaderID, async (id) => {
await refreshAll()
})
watch(
() => store.items,
(items) => {
rows.value = groupItems(items || [], rows.value)
},
{ immediate: true }
)
watch(
() => store.products,
(products) => {
productOptions.value = products || []
},
{ immediate: true }
)
function formatDate (val) {
if (!val) return ''
const text = String(val)
return text.length >= 10 ? text.slice(0, 10) : text
}
const filteredRows = computed(() => {
const needle = normalizeSearchText(descFilter.value)
if (!needle) return rows.value
return rows.value.filter(r =>
normalizeSearchText(r?.OldDesc).includes(needle)
)
})
const visibleRowKeys = computed(() => filteredRows.value.map(r => r.RowKey))
const selectedVisibleCount = computed(() => visibleRowKeys.value.filter(k => !!selectedMap.value[k]).length)
const allSelectedVisible = computed(() => visibleRowKeys.value.length > 0 && selectedVisibleCount.value === visibleRowKeys.value.length)
const someSelectedVisible = computed(() => selectedVisibleCount.value > 0)
const newItemEntryModeOptions = [
{ label: 'Eski Kod Sec', value: 'selected' },
{ label: 'Yeni Kod Ekle', value: 'typed' }
]
const productCodeAllOptions = computed(() =>
(productOptions.value || []).map(p => {
const code = String(p?.ProductCode || '').trim().toUpperCase()
return { label: code, value: code }
}).filter(x => !!x.value && x.value.length === 13)
)
const productCodeSelectOptions = ref([])
watch(
productCodeAllOptions,
(list) => {
productCodeSelectOptions.value = Array.isArray(list) ? [...list] : []
},
{ immediate: true }
)
function onFilterProductCode (val, update) {
const needle = normalizeSearchText(val)
update(() => {
if (!needle) {
productCodeSelectOptions.value = [...productCodeAllOptions.value]
return
}
productCodeSelectOptions.value = (productCodeAllOptions.value || []).filter(opt => {
const label = normalizeSearchText(opt?.label || '')
const value = normalizeSearchText(opt?.value || '')
return label.includes(needle) || value.includes(needle)
})
})
}
function applyNewItemVisualState (row, source = 'typed') {
const info = store.classifyItemCode(row?.NewItemCode || '')
row.NewItemCode = info.normalized
row.NewItemMode = info.mode
row.NewItemSource = info.mode === 'empty' ? '' : source
}
function newItemInputClass (row) {
return {
'new-item-existing': row?.NewItemMode === 'existing',
'new-item-new': row?.NewItemMode === 'new'
}
}
function newItemBadgeColor (row) {
return row?.NewItemMode === 'existing' ? 'positive' : 'warning'
}
function newItemBadgeLabel (row) {
return row?.NewItemMode === 'existing' ? 'MEVCUT KOD' : 'YENI KOD'
}
function newItemHintText (row) {
if (row?.NewItemMode === 'existing') {
return row?.NewItemSource === 'selected'
? 'Urun listesinden secildi'
: 'Elle girildi (sistemde bulundu)'
}
if (row?.NewItemMode === 'new') {
return store.getCdItemDraft(row?.NewItemCode) ? 'Yeni kod: cdItem taslagi hazir' : 'Yeni kod: cdItem taslagi gerekli'
}
return ''
}
function onSelectProduct (row, code) {
row.NewItemEntryMode = 'selected'
onNewItemChange(row, code, 'selected')
}
function onNewItemEntryModeChange (row, mode) {
row.NewItemEntryMode = String(mode || '').trim()
row.NewItemCode = ''
row.NewColor = ''
row.NewDim2 = ''
row.NewItemMode = 'empty'
row.NewItemSource = ''
}
function escapeRegExp (value) {
return String(value || '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}
function buildNextCodeFromPrefix (prefix) {
const normalizedPrefix = String(prefix || '').trim().toUpperCase()
if (!/^[A-Z][0-9]{3}-[A-Z]{3}$/.test(normalizedPrefix)) return ''
const codeRegex = new RegExp(`^${escapeRegExp(normalizedPrefix)}(\\d{5})$`)
let maxSuffix = 0
for (const p of (productOptions.value || [])) {
const code = String(p?.ProductCode || '').trim().toUpperCase()
const m = code.match(codeRegex)
if (!m) continue
const n = Number(m[1] || 0)
if (Number.isFinite(n) && n > maxSuffix) maxSuffix = n
}
const next = maxSuffix > 0 ? maxSuffix + 1 : 1
return `${normalizedPrefix}${String(next).padStart(5, '0')}`
}
function onNewItemChange (row, val, source = 'typed') {
const prevCode = String(row?.NewItemCode || '').trim().toUpperCase()
let next = String(val || '').trim().toUpperCase()
if (source === 'typed' && row?.NewItemEntryMode === 'typed' && /^[A-Z][0-9]{3}-[A-Z]{3}$/.test(next)) {
const autoCode = buildNextCodeFromPrefix(next)
if (autoCode) {
next = autoCode
$q.notify({ type: 'info', message: `Yeni kod otomatik tamamlandi: ${autoCode}` })
}
}
if (next.length > 13) {
$q.notify({ type: 'negative', message: 'Model kodu en fazla 13 karakter olabilir.' })
row.NewItemCode = next.slice(0, 13)
applyNewItemVisualState(row, source)
return
}
if (next.length === 13 && !isValidBaggiModelCode(next)) {
$q.notify({ type: 'negative', message: BAGGI_CODE_ERROR })
row.NewItemCode = prevCode
applyNewItemVisualState(row, source)
return
}
row.NewItemCode = next ? next.toUpperCase() : ''
applyNewItemVisualState(row, source)
row.NewColor = ''
row.NewDim2 = ''
row.NewDesc = mergeDescWithAutoNote(row, row.NewDesc || row.OldDesc)
if (row.NewItemCode) {
if (row.NewItemMode === 'new') {
store.fetchNewColors(row.NewItemCode)
} else {
store.fetchColors(row.NewItemCode)
}
}
if (row.NewItemMode === 'new' && isValidBaggiModelCode(row.NewItemCode) && row.NewItemCode !== prevCode) {
openNewCodeSetupFlow(row.NewItemCode)
} else if (row.NewItemMode === 'existing' && isValidBaggiModelCode(row.NewItemCode) && row.NewItemCode !== prevCode) {
openAttributeDialog(row.NewItemCode)
}
}
function isAttributeDraftComplete (rows) {
if (!Array.isArray(rows) || !rows.length) return false
return rows.every(r => String(r?.AttributeCode || '').trim())
}
function isNewCodeSetupComplete (itemCode) {
const code = String(itemCode || '').trim().toUpperCase()
if (!code) return false
const hasCdItem = !!store.getCdItemDraft(code)
const attrRows = store.getProductAttributeDraft(code)
return hasCdItem && isAttributeDraftComplete(attrRows)
}
function isColorSelectionLocked (row) {
const code = String(row?.NewItemCode || '').trim().toUpperCase()
if (!code) return true
if (row?.NewItemMode !== 'new') return false
return !isNewCodeSetupComplete(code)
}
function openNewCodeSetupFlow (itemCode) {
const code = String(itemCode || '').trim().toUpperCase()
if (!code) return
if (!store.getCdItemDraft(code)) {
openCdItemDialog(code)
return
}
if (!isAttributeDraftComplete(store.getProductAttributeDraft(code))) {
openAttributeDialog(code)
}
}
function onNewColorChange (row) {
row.NewColor = normalizeShortCode(row.NewColor, 3)
row.NewDim2 = ''
row.NewDesc = mergeDescWithAutoNote(row, row.NewDesc || row.OldDesc)
if (row.NewItemCode && row.NewColor) {
if (String(row?.NewItemMode || '').trim() === 'new') {
store.fetchNewSecondColors(row.NewItemCode, row.NewColor)
} else {
store.fetchSecondColors(row.NewItemCode, row.NewColor)
}
}
}
function onNewDim2Change (row) {
row.NewDim2 = normalizeShortCode(row.NewDim2, 3)
row.NewDesc = mergeDescWithAutoNote(row, row.NewDesc || row.OldDesc)
}
function getColorOptions (row) {
const code = row?.NewItemCode || ''
const isNewMode = String(row?.NewItemMode || '').trim() === 'new'
const list = isNewMode
? (store.newColorOptionsByCode[code] || [])
: (store.colorOptionsByCode[code] || [])
return list.map(c => ({
...c,
colorLabel: `${c.color_code} - ${c.color_description || ''}`.trim()
}))
}
function getSecondColorOptions (row) {
const code = row?.NewItemCode || ''
const color = row?.NewColor || ''
const key = `${code}::${color}`
const isNewMode = String(row?.NewItemMode || '').trim() === 'new'
const list = isNewMode
? (store.newSecondColorOptionsByKey[key] || [])
: (store.secondColorOptionsByKey[key] || [])
return list.map(c => ({
...c,
item_dim2_label: `${c.item_dim2_code} - ${c.color_description || ''}`.trim()
}))
}
function toggleRowSelection (rowKey, checked) {
const next = { ...selectedMap.value }
if (checked) next[rowKey] = true
else delete next[rowKey]
selectedMap.value = next
}
function toggleSelectAllVisible (checked) {
const next = { ...selectedMap.value }
for (const key of visibleRowKeys.value) {
if (checked) next[key] = true
else delete next[key]
}
selectedMap.value = next
}
function normalizeShortCode (value, maxLen) {
return String(value || '').trim().toUpperCase().slice(0, maxLen)
}
function isValidBaggiModelCode (code) {
return BAGGI_CODE_PATTERN.test(code)
}
function formatCodeColorDim2 (itemCode, color, dim2) {
const item = String(itemCode || '').trim().toUpperCase()
const c1 = normalizeShortCode(color, 3)
const c2 = normalizeShortCode(dim2, 3)
const c1Safe = c1 || '-'
const c2Safe = c2 || '-'
return `${item}/${c1Safe}/${c2Safe}`
}
function buildAutoUpdateNote (row) {
const oldInfo = formatCodeColorDim2(row?.OldItemCode, row?.OldColor, row?.OldDim2)
const nextInfo = formatCodeColorDim2(row?.NewItemCode, row?.NewColor, row?.NewDim2)
return `Bu siparis satirinda kod ${oldInfo} bilgisinden ${nextInfo} bilgisine guncellenmistir.`
}
function isSelectionCompleteByOldShape (row) {
const hasModel = String(row?.NewItemCode || '').trim().length > 0
if (!hasModel) return false
const oldHasColor = String(row?.OldColor || '').trim().length > 0
const hasNewColor = normalizeShortCode(row?.NewColor, 3).length === 3
if (oldHasColor) return hasNewColor
return true
}
function stripAutoUpdateNote (text) {
const desc = String(text || '').trim()
if (!desc) return ''
const marker = ' Bu siparis satirinda kod '
const idx = desc.indexOf(marker)
if (idx > -1) return desc.slice(0, idx).trim()
if (desc.startsWith('Bu siparis satirinda kod ')) return ''
return desc
}
function mergeDescWithAutoNote (row, baseDesc) {
const desc = stripAutoUpdateNote(baseDesc)
if (!isSelectionCompleteByOldShape(row)) return desc
const note = buildAutoUpdateNote(row)
if (!note) return desc
if (desc.includes(note)) return desc
if (!desc) return note
return `${desc} ${note}`
}
function validateRowInput (row) {
const entryMode = String(row?.NewItemEntryMode || '').trim()
const newItemCode = String(row.NewItemCode || '').trim().toUpperCase()
const newColor = normalizeShortCode(row.NewColor, 3)
const newDim2 = normalizeShortCode(row.NewDim2, 3)
const oldColor = String(row.OldColor || '').trim()
if (!entryMode) return 'Lutfen once kod giris tipini seciniz (Eski Kod Sec / Yeni Kod Ekle).'
if (!newItemCode) return 'Yeni model kodu zorunludur.'
if (!isValidBaggiModelCode(newItemCode)) {
return BAGGI_CODE_ERROR
}
if (oldColor && !newColor) return 'Eski kayitta 1. renk oldugu icin yeni 1. renk zorunludur.'
if (newColor && newColor.length !== 3) return 'Yeni 1. renk kodu 3 karakter olmalidir.'
if (newDim2 && newDim2.length !== 3) return 'Yeni 2. renk kodu 3 karakter olmalidir.'
if (newDim2 && !newColor) return '2. renk girmek icin 1. renk zorunludur.'
row.NewItemCode = newItemCode
row.NewColor = newColor
row.NewDim2 = newDim2
row.NewDesc = mergeDescWithAutoNote(row, row.NewDesc || row.OldDesc)
return ''
}
function collectLinesFromRows (selectedRows) {
const lines = []
for (const row of selectedRows) {
const errMsg = validateRowInput(row)
if (errMsg) {
return { errMsg, lines: [] }
}
const baseLine = {
NewItemCode: String(row.NewItemCode || '').trim().toUpperCase(),
NewColor: normalizeShortCode(row.NewColor, 3),
NewDim2: normalizeShortCode(row.NewDim2, 3),
NewDesc: mergeDescWithAutoNote(row, row.NewDesc || row.OldDesc)
}
const oldItemCode = String(row.OldItemCode || '').trim().toUpperCase()
const oldColor = normalizeShortCode(row.OldColor, 3)
const oldDim2 = normalizeShortCode(row.OldDim2, 3)
const oldDesc = String(row.OldDesc || '').trim()
const hasChange = (
baseLine.NewItemCode !== oldItemCode ||
baseLine.NewColor !== oldColor ||
baseLine.NewDim2 !== oldDim2 ||
String(baseLine.NewDesc || '').trim() !== oldDesc
)
if (!hasChange) continue
for (const id of (row.OrderLineIDs || [])) {
lines.push({
OrderLineID: id,
...baseLine
})
}
}
return { errMsg: '', lines }
}
function createEmptyCdItemDraft (itemCode) {
return {
ItemTypeCode: '1',
ItemCode: String(itemCode || '').trim().toUpperCase(),
ItemDimTypeCode: '1',
ProductTypeCode: '1',
ProductHierarchyID: '',
UnitOfMeasureCode1: 'AD',
ItemAccountGrCode: '',
ItemTaxGrCode: '%10',
ItemPaymentPlanGrCode: '',
ItemDiscountGrCode: '',
ItemVendorGrCode: '',
PromotionGroupCode: '',
ProductCollectionGrCode: '0',
StorePriceLevelCode: '0',
PerceptionOfFashionCode: '0',
CommercialRoleCode: '0',
StoreCapacityLevelCode: '',
CustomsTariffNumberCode: '',
CompanyCode: '1'
}
}
function lookupOptions (key) {
if (key === 'itemDimTypeCodes') {
return [
{ value: '1', label: '1 - RENK' },
{ value: '2', label: '2 - RENK-BEDEN' },
{ value: '3', label: '3 - RENK-BEDEN-YAKA' }
]
}
const list = store.cdItemLookups?.[key] || []
return list
.map(x => {
const code = String(x?.code || '').trim()
const desc = String(x?.description || '').trim()
return {
value: code,
label: desc ? `${code} - ${desc}` : code,
_desc: desc
}
})
.filter(opt => !isDummyLookupOption(key, opt.value, opt._desc))
.map(({ value, label }) => ({ value, label }))
}
function isDummyLookupOption (key, codeRaw, descRaw) {
const code = String(codeRaw || '').trim().toUpperCase()
const desc = String(descRaw || '').trim().toUpperCase()
if (!code) return true
if (code === '0' || code === '00' || code === '000' || code === '0000') return true
if (desc.includes('DUMMY')) return true
return false
}
async function openCdItemDialog (itemCode) {
const code = String(itemCode || '').trim().toUpperCase()
if (!code) return
await store.fetchCdItemLookups()
cdItemTargetCode.value = code
const existing = store.getCdItemDraft(code)
const draft = createEmptyCdItemDraft(code)
if (existing) {
for (const [k, v] of Object.entries(existing)) {
if (v == null) continue
draft[k] = String(v)
}
}
cdItemDraftForm.value = draft
cdItemDialogOpen.value = true
}
function normalizeCdItemDraftForPayload (draftRaw) {
const d = draftRaw || {}
const toIntOrNil = (v) => {
const n = Number(v)
return Number.isFinite(n) && n > 0 ? n : null
}
const toStrOrNil = (v) => {
const s = String(v || '').trim()
return s || null
}
return {
ItemTypeCode: toIntOrNil(d.ItemTypeCode) || 1,
ItemCode: String(d.ItemCode || '').trim().toUpperCase(),
ItemDimTypeCode: toIntOrNil(d.ItemDimTypeCode) || 1,
ProductTypeCode: null,
ProductHierarchyID: toIntOrNil(d.ProductHierarchyID),
UnitOfMeasureCode1: 'AD',
ItemAccountGrCode: null,
ItemTaxGrCode: '%10',
ItemPaymentPlanGrCode: null,
ItemDiscountGrCode: null,
ItemVendorGrCode: null,
PromotionGroupCode: null,
ProductCollectionGrCode: null,
StorePriceLevelCode: null,
PerceptionOfFashionCode: null,
CommercialRoleCode: null,
StoreCapacityLevelCode: null,
CustomsTariffNumberCode: null,
CompanyCode: '1'
}
}
async function saveCdItemDraft () {
const payload = normalizeCdItemDraftForPayload(cdItemDraftForm.value)
if (!payload.ItemCode) {
$q.notify({ type: 'negative', message: 'ItemCode bos olamaz.' })
return
}
store.setCdItemDraft(payload.ItemCode, payload)
cdItemDialogOpen.value = false
await openAttributeDialog(payload.ItemCode)
}
function buildAttributeRowsFromLookup (list) {
const grouped = new Map()
for (const it of (list || [])) {
const typeCode = Number(it?.attribute_type_code || 0)
if (!typeCode) continue
if (!grouped.has(typeCode)) {
grouped.set(typeCode, {
typeCode,
typeDesc: String(it?.attribute_type_description || '').trim() || String(typeCode),
options: []
})
}
const g = grouped.get(typeCode)
const code = String(it?.attribute_code || '').trim()
const desc = String(it?.attribute_description || '').trim()
g.options.push({
value: code,
label: `${code} - ${desc || code}`
})
}
const rows = [...grouped.values()]
.sort((a, b) => a.typeCode - b.typeCode)
.map(g => ({
AttributeTypeCodeNumber: g.typeCode,
TypeLabel: `${g.typeCode} - ${g.typeDesc}`,
AttributeCode: '',
AllOptions: [...g.options],
Options: [...g.options]
}))
return rows
}
function onFilterAttributeOption (row, val, update) {
const raw = String(val || '')
const needle = normalizeSearchText(raw)
const base = Array.isArray(row?.AllOptions) ? row.AllOptions : (Array.isArray(row?.Options) ? row.Options : [])
update(() => {
if (!needle) {
row.Options = [...base]
return
}
row.Options = base.filter(opt => {
const label = normalizeSearchText(opt?.label || '')
const value = normalizeSearchText(opt?.value || '')
return label.includes(needle) || value.includes(needle)
})
})
}
async function openAttributeDialog (itemCode) {
const code = String(itemCode || '').trim().toUpperCase()
if (!code) return
attributeTargetCode.value = code
const existingDraft = store.getProductAttributeDraft(code)
const fetched = await store.fetchProductAttributes(1)
const fromLookup = buildAttributeRowsFromLookup(fetched)
if (!fromLookup.length) {
$q.notify({ type: 'negative', message: 'Urun ozellikleri listesi alinamadi. Lutfen daha sonra tekrar deneyin.' })
return
}
const modeInfo = store.classifyItemCode(code)
const dbCurrent = await store.fetchProductItemAttributes(code, 1, true)
const dbMap = new Map(
(dbCurrent || []).map(x => [
Number(x?.attribute_type_code || x?.AttributeTypeCode || 0),
String(x?.attribute_code || x?.AttributeCode || '').trim()
]).filter(x => x[0] > 0)
)
const baseRows = fromLookup.map(row => {
const currentCode = dbMap.get(Number(row.AttributeTypeCodeNumber || 0)) || ''
const currentOptions = Array.isArray(row.options) ? [...row.options] : []
if (currentCode && !currentOptions.some(opt => String(opt?.value || '').trim() === currentCode)) {
currentOptions.unshift({ value: currentCode, label: `${currentCode} - (Mevcut)` })
}
return {
...row,
AttributeCode: currentCode,
OriginalAttributeCode: currentCode,
AllOptions: currentOptions,
Options: [...currentOptions]
}
})
const useDraft = Array.isArray(existingDraft) && existingDraft.length
attributeRows.value = useDraft
? JSON.parse(JSON.stringify(existingDraft))
: JSON.parse(JSON.stringify(baseRows))
for (const row of (attributeRows.value || [])) {
if (!Array.isArray(row.AllOptions)) {
row.AllOptions = Array.isArray(row.Options) ? [...row.Options] : []
}
if (!Array.isArray(row.Options)) {
row.Options = [...row.AllOptions]
}
}
if ((!existingDraft || !existingDraft.length) && baseRows.length) {
store.setProductAttributeDraft(code, JSON.parse(JSON.stringify(baseRows)))
}
attributeDialogOpen.value = true
}
function saveAttributeDraft () {
const code = String(attributeTargetCode.value || '').trim().toUpperCase()
if (!code) return
for (const row of (attributeRows.value || [])) {
const selected = String(row?.AttributeCode || '').trim()
if (!selected) {
$q.notify({ type: 'negative', message: `Urun ozelliklerinde secim zorunlu: ${row?.TypeLabel || ''}` })
return
}
}
store.setProductAttributeDraft(code, JSON.parse(JSON.stringify(attributeRows.value || [])))
attributeDialogOpen.value = false
$q.notify({ type: 'positive', message: 'Urun ozellikleri taslagi kaydedildi.' })
}
async function collectProductAttributesFromSelectedRows (selectedRows) {
const codeSet = [...new Set(
(selectedRows || [])
.map(r => String(r?.NewItemCode || '').trim().toUpperCase())
.filter(Boolean)
)]
const out = []
for (const code of codeSet) {
const modeInfo = store.classifyItemCode(code)
let rows = store.getProductAttributeDraft(code)
let dbMap = new Map()
if (modeInfo.mode === 'existing') {
const dbCurrent = await store.fetchProductItemAttributes(code, 1, true)
dbMap = new Map(
(dbCurrent || []).map(x => [
Number(x?.attribute_type_code || x?.AttributeTypeCode || 0),
String(x?.attribute_code || x?.AttributeCode || '').trim()
]).filter(x => x[0] > 0)
)
// Existing kodda kullanıcı değişiklik yaptıysa draftı koru.
// Draft yoksa DB'den zorunlu/fresh çek.
if (!Array.isArray(rows) || !rows.length) {
const lookup = await store.fetchProductAttributes(1)
const baseRows = buildAttributeRowsFromLookup(lookup)
rows = baseRows.map(row => {
const currentCode = dbMap.get(Number(row.AttributeTypeCodeNumber || 0)) || ''
const currentOptions = Array.isArray(row.options) ? [...row.options] : []
if (currentCode && !currentOptions.some(opt => String(opt?.value || '').trim() === currentCode)) {
currentOptions.unshift({ value: currentCode, label: `${currentCode} - (Mevcut)` })
}
return {
...row,
AttributeCode: currentCode,
OriginalAttributeCode: currentCode,
AllOptions: currentOptions,
Options: [...currentOptions]
}
})
store.setProductAttributeDraft(code, JSON.parse(JSON.stringify(rows)))
}
} else if (!Array.isArray(rows) || !rows.length) {
const lookup = await store.fetchProductAttributes(1)
const baseRows = buildAttributeRowsFromLookup(lookup)
const dbCurrent = await store.fetchProductItemAttributes(code, 1, true)
const dbMap = new Map(
(dbCurrent || []).map(x => [
Number(x?.attribute_type_code || x?.AttributeTypeCode || 0),
String(x?.attribute_code || x?.AttributeCode || '').trim()
]).filter(x => x[0] > 0)
)
rows = baseRows.map(row => ({
...row,
AttributeCode: dbMap.get(Number(row.AttributeTypeCodeNumber || 0)) || ''
}))
store.setProductAttributeDraft(code, JSON.parse(JSON.stringify(rows)))
}
if (!Array.isArray(rows) || !rows.length) {
return { errMsg: `${code} icin urun ozellikleri secilmedi`, productAttributes: [] }
}
for (const row of rows) {
const attributeTypeCode = Number(row?.AttributeTypeCodeNumber || 0)
const attributeCode = String(row?.AttributeCode || '').trim()
if (!attributeTypeCode) {
return { errMsg: `${code} icin urun ozellikleri eksik`, productAttributes: [] }
}
if (modeInfo.mode === 'existing') {
const originalCode =
dbMap.get(attributeTypeCode) ||
String(row?.OriginalAttributeCode || '').trim()
const changed = attributeCode !== originalCode
if (!changed) continue
if (!attributeCode) {
return { errMsg: `${code} icin urun ozellikleri eksik`, productAttributes: [] }
}
} else if (!attributeCode) {
return { errMsg: `${code} icin urun ozellikleri eksik`, productAttributes: [] }
}
out.push({
ItemTypeCode: 1,
ItemCode: code,
AttributeTypeCode: attributeTypeCode,
AttributeCode: attributeCode
})
}
}
return { errMsg: '', productAttributes: out }
}
function collectCdItemsFromSelectedRows (selectedRows) {
const codes = [...new Set(
(selectedRows || [])
.filter(r => r?.NewItemMode === 'new' && String(r?.NewItemCode || '').trim())
.map(r => String(r.NewItemCode).trim().toUpperCase())
)]
if (!codes.length) return { errMsg: '', cdItems: [] }
const out = []
for (const code of codes) {
const draft = store.getCdItemDraft(code)
if (!draft) {
return { errMsg: `${code} icin cdItem bilgisi eksik`, cdItems: [] }
}
out.push(normalizeCdItemDraftForPayload(draft))
}
return { errMsg: '', cdItems: out }
}
function buildMailLineLabelFromRow (row) {
const item = String(row?.NewItemCode || row?.OldItemCode || '').trim().toUpperCase()
const color1 = String(row?.NewColor || row?.OldColor || '').trim().toUpperCase()
const color2 = String(row?.NewDim2 || row?.OldDim2 || '').trim().toUpperCase()
const desc = String(row?.NewDesc || row?.OldDesc || '').trim()
if (!item) return ''
const colorPart = color2 ? `${color1}-${color2}` : color1
return [item, colorPart, desc].filter(Boolean).join(' ')
}
function buildProductionUpdateMailPayload (selectedRows) {
const updatedItems = [
...new Set(
(selectedRows || [])
.map(buildMailLineLabelFromRow)
.filter(Boolean)
)
]
return {
operation: 'update',
deletedItems: [],
updatedItems,
addedItems: []
}
}
async function sendUpdateMailAfterApply (selectedRows) {
const orderId = String(orderHeaderID.value || '').trim()
if (!orderId) return
const host = String(window?.location?.hostname || '').trim().toLowerCase()
const isLocalHost = host === 'localhost' || host === '127.0.0.1'
if (isLocalHost) {
console.info('[OrderProductionUpdate] sendUpdateMailAfterApply skipped (localhost)', { orderHeaderID: orderId, host })
return
}
try {
const t0 = nowMs()
const payload = buildProductionUpdateMailPayload(selectedRows)
console.info('[OrderProductionUpdate] sendUpdateMailAfterApply start', {
orderHeaderID: orderId,
updatedItems: payload?.updatedItems?.length || 0
})
const res = await api.post('/order/send-market-mail', {
orderHeaderID: orderId,
operation: payload.operation,
deletedItems: payload.deletedItems,
updatedItems: payload.updatedItems,
addedItems: payload.addedItems,
extraRecipients: ['urun@baggi.com.tr']
})
const sentCount = Number(res?.data?.sentCount || 0)
console.info('[OrderProductionUpdate] sendUpdateMailAfterApply done', {
orderHeaderID: orderId,
sentCount,
durationMs: Math.round(nowMs() - t0)
})
$q.notify({
type: 'positive',
message: sentCount > 0
? `Guncelleme maili gonderildi (${sentCount} alici)`
: 'Guncelleme maili gonderildi'
})
} catch (err) {
console.error('[OrderProductionUpdate] sendUpdateMailAfterApply failed', {
orderHeaderID: orderId,
status: err?.response?.status,
data: err?.response?.data,
message: err?.message
})
$q.notify({
type: 'warning',
message: 'Guncelleme kaydedildi, mail gonderilemedi.'
})
}
}
function buildGroupKey (item) {
const parts = [
String(item?.OldItemCode || '').trim(),
String(item?.OldColor || '').trim(),
String(item?.OldDim2 || '').trim(),
String(item?.OldDesc || '').trim(),
String(item?.OldDim3 || '').trim()
]
return parts.join('||')
}
function formatSizes (sizeMap) {
const entries = Object.entries(sizeMap || {})
if (!entries.length) return { list: [], label: '-' }
entries.sort((a, b) => String(a[0]).localeCompare(String(b[0])))
const label = entries.map(([k, v]) => (v > 1 ? `${k}(${v})` : k)).join(', ')
return { list: entries.map(([k]) => k), label }
}
function groupItems (items, prevRows = []) {
const prevMap = new Map()
for (const r of prevRows || []) {
if (!r?.RowKey) continue
prevMap.set(r.RowKey, {
NewDesc: String(r.NewDesc || '').trim(),
NewItemCode: String(r.NewItemCode || '').trim().toUpperCase(),
NewColor: String(r.NewColor || '').trim().toUpperCase(),
NewDim2: String(r.NewDim2 || '').trim().toUpperCase(),
NewItemMode: String(r.NewItemMode || '').trim(),
NewItemSource: String(r.NewItemSource || '').trim(),
NewItemEntryMode: String(r.NewItemEntryMode || '').trim()
})
}
const map = new Map()
for (const it of items) {
const key = buildGroupKey(it)
if (!map.has(key)) {
const prev = prevMap.get(key) || {}
const prevDesc = prev.NewDesc || ''
const fallbackDesc = String((it?.NewDesc || it?.OldDesc) || '').trim()
map.set(key, {
RowKey: key,
OrderHeaderID: it.OrderHeaderID,
OldItemCode: it.OldItemCode,
OldColor: it.OldColor,
OldDim2: it.OldDim2,
OldDim3: it.OldDim3,
OldDesc: it.OldDesc,
OrderLineIDs: [],
OldSizes: [],
OldSizesLabel: '',
NewItemCode: prev.NewItemCode || '',
NewColor: prev.NewColor || '',
NewDim2: prev.NewDim2 || '',
NewDesc: prevDesc || fallbackDesc,
NewItemMode: prev.NewItemMode || 'empty',
NewItemSource: prev.NewItemSource || '',
NewItemEntryMode: prev.NewItemEntryMode || '',
IsVariantMissing: !!it.IsVariantMissing
})
}
const g = map.get(key)
if (it?.OrderLineID) g.OrderLineIDs.push(it.OrderLineID)
const size = String(it?.OldDim1 || '').trim()
if (size !== '') {
g.__sizeMap = g.__sizeMap || {}
g.__sizeMap[size] = (g.__sizeMap[size] || 0) + 1
}
if (it?.IsVariantMissing) g.IsVariantMissing = true
}
const out = []
for (const g of map.values()) {
const sizes = formatSizes(g.__sizeMap || {})
g.OldSizes = sizes.list
g.OldSizesLabel = sizes.label
const info = store.classifyItemCode(g.NewItemCode)
g.NewItemCode = info.normalized
g.NewItemMode = info.mode
if (info.mode === 'empty') g.NewItemSource = ''
if (!g.NewItemEntryMode && g.NewItemCode) {
g.NewItemEntryMode = g.NewItemSource === 'selected' ? 'selected' : 'typed'
}
delete g.__sizeMap
out.push(g)
}
return out
}
async function refreshAll () {
await store.fetchHeader(orderHeaderID.value)
await store.fetchItems(orderHeaderID.value)
await store.fetchProducts()
}
async function onBulkSubmit () {
const flowStart = nowMs()
const selectedRows = rows.value.filter(r => !!selectedMap.value[r.RowKey])
if (!selectedRows.length) {
$q.notify({ type: 'warning', message: 'Lutfen en az bir satir seciniz.' })
return
}
const prepStart = nowMs()
const { errMsg, lines } = collectLinesFromRows(selectedRows)
if (errMsg) {
$q.notify({ type: 'negative', message: errMsg })
return
}
if (!lines.length) {
$q.notify({ type: 'warning', message: 'Secili satirlarda degisiklik yok.' })
return
}
const { errMsg: cdErrMsg, cdItems } = collectCdItemsFromSelectedRows(selectedRows)
if (cdErrMsg) {
$q.notify({ type: 'negative', message: cdErrMsg })
const firstCode = String(cdErrMsg.split(' ')[0] || '').trim()
if (firstCode) openCdItemDialog(firstCode)
return
}
const { errMsg: attrErrMsg, productAttributes } = await collectProductAttributesFromSelectedRows(selectedRows)
if (attrErrMsg) {
$q.notify({ type: 'negative', message: attrErrMsg })
const firstCode = String(attrErrMsg.split(' ')[0] || '').trim()
if (firstCode) openAttributeDialog(firstCode)
return
}
console.info('[OrderProductionUpdate] onBulkSubmit prepared', {
orderHeaderID: orderHeaderID.value,
selectedRowCount: selectedRows.length,
lineCount: lines.length,
cdItemCount: cdItems.length,
attributeCount: productAttributes.length,
prepDurationMs: Math.round(nowMs() - prepStart)
})
try {
const validateStart = nowMs()
const validate = await store.validateUpdates(orderHeaderID.value, lines)
console.info('[OrderProductionUpdate] validate finished', {
orderHeaderID: orderHeaderID.value,
lineCount: lines.length,
missingCount: Number(validate?.missingCount || 0),
durationMs: Math.round(nowMs() - validateStart)
})
const missingCount = validate?.missingCount || 0
if (missingCount > 0) {
const missingList = (validate?.missing || []).map(v => (
`${v.ItemCode} / ${v.ColorCode} / ${v.ItemDim1Code} / ${v.ItemDim2Code}`
))
$q.dialog({
title: 'Eksik Varyantlar',
message: `Eksik varyant bulundu: ${missingCount}<br><br>${missingList.join('<br>')}`,
html: true,
ok: { label: 'Ekle ve Guncelle', color: 'primary' },
cancel: { label: 'Vazgec', flat: true }
}).onOk(async () => {
const applyStart = nowMs()
await store.applyUpdates(orderHeaderID.value, lines, true, cdItems, productAttributes)
console.info('[OrderProductionUpdate] apply finished', {
orderHeaderID: orderHeaderID.value,
insertMissing: true,
durationMs: Math.round(nowMs() - applyStart)
})
await store.fetchItems(orderHeaderID.value)
selectedMap.value = {}
await sendUpdateMailAfterApply(selectedRows)
})
return
}
const applyStart = nowMs()
await store.applyUpdates(orderHeaderID.value, lines, false, cdItems, productAttributes)
console.info('[OrderProductionUpdate] apply finished', {
orderHeaderID: orderHeaderID.value,
insertMissing: false,
durationMs: Math.round(nowMs() - applyStart)
})
await store.fetchItems(orderHeaderID.value)
selectedMap.value = {}
await sendUpdateMailAfterApply(selectedRows)
} catch (err) {
console.error('[OrderProductionUpdate] onBulkSubmit failed', {
orderHeaderID: orderHeaderID.value,
selectedRowCount: selectedRows.length,
lineCount: lines.length,
apiError: err?.response?.data,
message: err?.message
})
$q.notify({ type: 'negative', message: store.error || 'Toplu kayit islemi basarisiz.' })
}
console.info('[OrderProductionUpdate] onBulkSubmit total', {
orderHeaderID: orderHeaderID.value,
durationMs: Math.round(nowMs() - flowStart)
})
}
</script>
<style scoped>
.prod-table :deep(th) {
font-weight: 700;
letter-spacing: 0.2px;
}
.prod-table :deep(td) {
vertical-align: middle;
}
.prod-table :deep(.q-table__container) {
width: 100%;
}
.prod-table :deep(.q-table) {
font-size: 11px;
}
.order-prod-page {
--header-height: 56px;
--filter-bar-height: 72px;
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
}
.page-header {
position: sticky;
top: 0;
z-index: 8;
background: #fff;
margin-top: -8px;
margin-bottom: 8px;
padding-top: 4px;
padding-bottom: 6px;
}
.filter-bar {
position: sticky;
top: var(--header-height);
z-index: 7;
background: #fff;
padding-top: 4px;
padding-bottom: 8px;
}
.table-wrap {
flex: 1;
min-height: 0;
min-width: 0;
display: flex;
width: 100%;
overflow: auto;
}
.prod-table :deep(.q-table__middle) {
max-height: calc(100vh - var(--header-height) - var(--filter-bar-height) - 140px);
overflow: auto;
}
.prod-table :deep(.q-table__container) {
height: 100%;
display: flex;
flex-direction: column;
}
.prod-table :deep(.q-table thead tr th) {
position: sticky;
top: 0;
z-index: 6;
background: #fff;
}
.prod-table :deep(th.col-old),
.prod-table :deep(td.col-old) {
background: #fff0d9;
}
.prod-table :deep(th.col-new),
.prod-table :deep(td.col-new) {
background: #e3f3ff;
}
.prod-table :deep(th.col-old) {
color: #8a5a00;
}
.prod-table :deep(th.col-new) {
color: #0d4f7a;
}
.prod-table :deep(td.col-old) {
border-left: 4px solid #f0a500;
}
.prod-table :deep(td.col-new) {
border-left: 4px solid #2d9cdb;
}
.prod-table :deep(th.col-new-first),
.prod-table :deep(td.col-new-first) {
border-left: 6px solid #1b7cc8;
}
.prod-table :deep(td.cell-new) {
background: #e3f3ff;
}
.prod-table :deep(.new-item-existing .q-field__control) {
background: #eaf9ef !important;
border-left: 3px solid #21ba45;
}
.prod-table :deep(.new-item-new .q-field__control) {
background: #fff5e9 !important;
border-left: 3px solid #f2a100;
}
.prod-table :deep(td.col-desc),
.prod-table :deep(th.col-desc),
.prod-table :deep(td.col-wrap),
.prod-table :deep(th.col-wrap) {
white-space: normal;
word-break: break-word;
line-height: 1.2;
}
.prod-table :deep(.q-field),
.prod-table :deep(.q-field__control),
.prod-table :deep(.q-select),
.prod-table :deep(.q-input) {
width: 100%;
min-width: 0;
}
</style>