<template>
|
<div class="loc-preview-page art-full-height">
|
<ArtSearchBar
|
v-model="searchForm"
|
:items="searchItems"
|
:showExpand="false"
|
@search="handleSearch"
|
@reset="handleReset"
|
/>
|
|
<ElCard class="art-table-card">
|
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="loadPageData" />
|
|
<ArtTable
|
:loading="loading"
|
:data="tableData"
|
:columns="columns"
|
:pagination="pagination"
|
@pagination:size-change="handleSizeChange"
|
@pagination:current-change="handleCurrentChange"
|
>
|
<template #action="{ row }">
|
<ArtButtonTable icon="ri:eye-line" @click="openDetailDrawer(row)" />
|
</template>
|
</ArtTable>
|
</ElCard>
|
|
<LocPreviewDetailDrawer
|
v-model:visible="detailDrawerVisible"
|
:loading="detailLoading"
|
:detail="activeLocDetail"
|
:data="detailTableData"
|
:columns="detailColumns"
|
:pagination="detailPagination"
|
@refresh="loadDetailResources"
|
@size-change="handleDetailSizeChange"
|
@current-change="handleDetailCurrentChange"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, onMounted, reactive, ref } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { useTableColumns } from '@/hooks/core/useTableColumns'
|
import { guardRequestWithMessage } from '@/utils/sys/requestGuard'
|
import {
|
fetchEnabledFields,
|
fetchLocPreviewDetail,
|
fetchLocPreviewItemsPage,
|
fetchLocPreviewPage
|
} from '@/api/loc-preview'
|
import LocPreviewDetailDrawer from './modules/loc-preview-detail-drawer.vue'
|
import { createLocPreviewTableColumns } from './locPreviewTable.columns'
|
import {
|
buildLocPreviewPageQueryParams,
|
createLocPreviewSearchState,
|
getLocPreviewDynamicFieldKey,
|
normalizeLocPreviewDetail,
|
normalizeLocPreviewEnabledFields,
|
normalizeLocPreviewItemRow,
|
normalizeLocPreviewRow
|
} from './locPreviewPage.helpers'
|
|
defineOptions({ name: 'LocPreview' })
|
const { t } = useI18n()
|
|
const loading = ref(false)
|
const detailLoading = ref(false)
|
const tableData = ref([])
|
const detailTableData = ref([])
|
const detailDrawerVisible = ref(false)
|
const activeLocRow = ref(null)
|
const activeLocDetail = ref({})
|
const enabledFields = ref([])
|
const searchForm = ref(createLocPreviewSearchState())
|
|
const pagination = reactive({
|
current: 1,
|
size: 20,
|
total: 0
|
})
|
|
const detailPagination = reactive({
|
current: 1,
|
size: 20,
|
total: 0
|
})
|
|
const searchItems = computed(() => [
|
{
|
label: t('pages.manager.locPreview.search.condition'),
|
key: 'condition',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.manager.locPreview.search.conditionPlaceholder')
|
}
|
},
|
{
|
label: t('pages.manager.locPreview.search.code'),
|
key: 'code',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.manager.locPreview.search.codePlaceholder')
|
}
|
},
|
{
|
label: t('pages.manager.locPreview.search.barcode'),
|
key: 'barcode',
|
type: 'input',
|
props: {
|
clearable: true,
|
placeholder: t('pages.manager.locPreview.search.barcodePlaceholder')
|
}
|
}
|
])
|
|
function createDetailColumns() {
|
return [
|
{
|
prop: 'locCode',
|
label: t('pages.manager.locPreview.table.locCode'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'wareArea',
|
label: t('pages.manager.locPreview.table.areaLabel'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'orderCode',
|
label: t('pages.orders.common.orderCode'),
|
minWidth: 180,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'matnrCode',
|
label: t('table.materialCode'),
|
minWidth: 160,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'maktx',
|
label: t('table.materialName'),
|
minWidth: 220,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'batch',
|
label: t('table.batch'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'trackCode',
|
label: t('pages.orders.common.trackCode'),
|
minWidth: 150,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'unit',
|
label: t('table.unit'),
|
width: 100
|
},
|
{
|
prop: 'anfme',
|
label: t('pages.manager.freeze.table.anfme'),
|
width: 120
|
},
|
{
|
prop: 'qty',
|
label: t('pages.manager.freeze.table.qty'),
|
width: 120
|
},
|
{
|
prop: 'workQty',
|
label: t('pages.manager.freeze.table.workQty'),
|
width: 120
|
},
|
...enabledFields.value.map((field) => ({
|
prop: getLocPreviewDynamicFieldKey(field.fields),
|
label: field.fieldsAlise,
|
minWidth: 140,
|
showOverflowTooltip: true,
|
formatter: (row) => row[getLocPreviewDynamicFieldKey(field.fields)] || '-'
|
})),
|
{
|
prop: 'createTimeText',
|
label: t('table.createTime'),
|
minWidth: 180,
|
showOverflowTooltip: true
|
}
|
]
|
}
|
|
const detailColumns = computed(() => createDetailColumns())
|
|
const { columns, columnChecks } = useTableColumns(() =>
|
createLocPreviewTableColumns({
|
handleViewDetail: openDetailDrawer
|
})
|
)
|
|
function updatePaginationState(target, response, fallbackCurrent, fallbackSize) {
|
target.total = Number(response?.total || 0)
|
target.current = Number(response?.current || fallbackCurrent || 1)
|
target.size = Number(response?.size || fallbackSize || target.size || 20)
|
}
|
|
async function loadEnabledFieldDefinitions() {
|
const fields = await guardRequestWithMessage(fetchEnabledFields(), [], {
|
timeoutMessage: t('pages.manager.locPreview.messages.fieldsTimeout')
|
})
|
enabledFields.value = normalizeLocPreviewEnabledFields(fields)
|
}
|
|
async function loadPageData() {
|
loading.value = true
|
try {
|
const response = await guardRequestWithMessage(
|
fetchLocPreviewPage(
|
buildLocPreviewPageQueryParams({
|
...searchForm.value,
|
current: pagination.current,
|
pageSize: pagination.size
|
})
|
),
|
{
|
records: [],
|
total: 0,
|
current: pagination.current,
|
size: pagination.size
|
},
|
{ timeoutMessage: t('pages.manager.locPreview.messages.pageTimeout') }
|
)
|
tableData.value = Array.isArray(response?.records)
|
? response.records.map((record) => normalizeLocPreviewRow(record))
|
: []
|
updatePaginationState(pagination, response, pagination.current, pagination.size)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
async function loadDetailResources() {
|
if (!activeLocRow.value?.id) {
|
return
|
}
|
|
detailLoading.value = true
|
try {
|
const [detailResponse, itemResponse] = await Promise.all([
|
guardRequestWithMessage(fetchLocPreviewDetail(activeLocRow.value.id), {}, {
|
timeoutMessage: t('pages.manager.locPreview.messages.detailTimeout')
|
}),
|
guardRequestWithMessage(
|
fetchLocPreviewItemsPage({
|
current: detailPagination.current,
|
pageSize: detailPagination.size,
|
locId: activeLocRow.value.id
|
}),
|
{
|
records: [],
|
total: 0,
|
current: detailPagination.current,
|
size: detailPagination.size
|
},
|
{ timeoutMessage: t('pages.manager.locPreview.messages.itemPageTimeout') }
|
)
|
])
|
|
activeLocDetail.value = normalizeLocPreviewDetail(detailResponse)
|
detailTableData.value = Array.isArray(itemResponse?.records)
|
? itemResponse.records.map((record) => normalizeLocPreviewItemRow(record, enabledFields.value))
|
: []
|
updatePaginationState(detailPagination, itemResponse, detailPagination.current, detailPagination.size)
|
} finally {
|
detailLoading.value = false
|
}
|
}
|
|
function openDetailDrawer(row) {
|
activeLocRow.value = row
|
detailPagination.current = 1
|
detailDrawerVisible.value = true
|
loadDetailResources()
|
}
|
|
function handleSearch(params) {
|
searchForm.value = {
|
...searchForm.value,
|
...params
|
}
|
pagination.current = 1
|
loadPageData()
|
}
|
|
function handleReset() {
|
searchForm.value = createLocPreviewSearchState()
|
pagination.current = 1
|
pagination.size = 20
|
loadPageData()
|
}
|
|
function handleSizeChange(size) {
|
pagination.size = size
|
pagination.current = 1
|
loadPageData()
|
}
|
|
function handleCurrentChange(current) {
|
pagination.current = current
|
loadPageData()
|
}
|
|
function handleDetailSizeChange(size) {
|
detailPagination.size = size
|
detailPagination.current = 1
|
loadDetailResources()
|
}
|
|
function handleDetailCurrentChange(current) {
|
detailPagination.current = current
|
loadDetailResources()
|
}
|
|
onMounted(async () => {
|
await loadEnabledFieldDefinitions()
|
await loadPageData()
|
})
|
</script>
|
