<template>
|
<div class="flex flex-col gap-4">
|
<ArtSearchBar
|
v-model="searchForm"
|
:items="searchItems"
|
:showExpand="true"
|
@search="handleSearch"
|
@reset="handleReset"
|
/>
|
|
<ArtTable
|
:loading="loading"
|
:data="rows"
|
:columns="columns"
|
:pagination="pagination"
|
@pagination:size-change="handleSizeChange"
|
@pagination:current-change="handleCurrentChange"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, reactive, ref, watch } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { defaultResponseAdapter } from '@/utils/table/tableUtils'
|
import { fetchWaveItemPage } from '@/api/wave-item'
|
import {
|
buildWaveItemPageQueryParams,
|
createWaveItemSearchState,
|
normalizeWaveItemRow
|
} from '@/views/orders/wave-item/waveItemPage.helpers'
|
import { createWaveItemTableColumns } from '@/views/orders/wave-item/waveItemTable.columns'
|
|
const props = defineProps({
|
waveId: { type: [Number, String], default: undefined }
|
})
|
|
const { t } = useI18n()
|
const loading = ref(false)
|
const rows = ref([])
|
const searchForm = ref(createWaveItemSearchState())
|
const pagination = reactive({
|
current: 1,
|
size: 20,
|
total: 0
|
})
|
|
const columns = computed(() =>
|
createWaveItemTableColumns({
|
t,
|
handleActionClick: () => {}
|
}).filter((column) => column.prop !== 'operation')
|
)
|
|
const searchItems = computed(() => [
|
{
|
label: t('pages.orders.waveItem.search.condition'),
|
key: 'condition',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.waveItem.search.conditionPlaceholder')
|
}
|
},
|
{
|
label: t('pages.orders.waveItem.search.waveCode'),
|
key: 'waveCode',
|
type: 'input',
|
props: { clearable: true, placeholder: t('pages.orders.waveItem.search.waveCodePlaceholder') }
|
},
|
{
|
label: t('pages.orders.waveItem.search.orderCode'),
|
key: 'orderCode',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.waveItem.search.orderCodePlaceholder')
|
}
|
},
|
{
|
label: t('pages.orders.waveItem.search.matnrCode'),
|
key: 'matnrCode',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.waveItem.search.matnrCodePlaceholder')
|
}
|
},
|
{
|
label: t('pages.orders.waveItem.search.maktx'),
|
key: 'maktx',
|
type: 'input',
|
props: { clearable: true, placeholder: t('pages.orders.waveItem.search.maktxPlaceholder') }
|
},
|
{
|
label: t('pages.orders.waveItem.search.batch'),
|
key: 'batch',
|
type: 'input',
|
props: { clearable: true, placeholder: t('pages.orders.waveItem.search.batchPlaceholder') }
|
},
|
{
|
label: t('pages.orders.waveItem.search.splrBatch'),
|
key: 'splrBatch',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.waveItem.search.splrBatchPlaceholder')
|
}
|
},
|
{
|
label: t('table.unit'),
|
key: 'unit',
|
type: 'input',
|
props: { clearable: true, placeholder: t('pages.orders.wave.rela.unitPlaceholder') }
|
},
|
{
|
label: t('pages.orders.waveItem.search.fieldsIndex'),
|
key: 'fieldsIndex',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.orders.waveItem.search.fieldsIndexPlaceholder')
|
}
|
}
|
])
|
|
function buildParams() {
|
return buildWaveItemPageQueryParams({
|
...searchForm.value,
|
waveId: props.waveId,
|
current: pagination.current,
|
pageSize: pagination.size
|
})
|
}
|
|
async function loadRows() {
|
if (props.waveId === undefined || props.waveId === null || props.waveId === '') {
|
rows.value = []
|
pagination.total = 0
|
return
|
}
|
loading.value = true
|
try {
|
const response = await fetchWaveItemPage(buildParams())
|
const normalized = defaultResponseAdapter(response)
|
rows.value = Array.isArray(normalized.records)
|
? normalized.records.map((item) => normalizeWaveItemRow(item, t))
|
: []
|
pagination.total = Number(normalized.total || 0)
|
pagination.current = Number(normalized.current || pagination.current || 1)
|
pagination.size = Number(normalized.size || pagination.size || 20)
|
} catch {
|
rows.value = []
|
pagination.total = 0
|
} finally {
|
loading.value = false
|
}
|
}
|
|
function handleSearch(params) {
|
searchForm.value = { ...searchForm.value, ...params }
|
pagination.current = 1
|
loadRows()
|
}
|
|
function handleReset() {
|
searchForm.value = createWaveItemSearchState()
|
pagination.current = 1
|
loadRows()
|
}
|
|
function handleSizeChange(size) {
|
pagination.size = size
|
pagination.current = 1
|
loadRows()
|
}
|
|
function handleCurrentChange(current) {
|
pagination.current = current
|
loadRows()
|
}
|
|
watch(
|
() => props.waveId,
|
() => {
|
pagination.current = 1
|
loadRows()
|
},
|
{ immediate: true }
|
)
|
</script>
|
