<template>
|
<div class="delivery-item-page art-full-height">
|
<ElCard v-if="activeSourceSummary" class="mb-3">
|
<div class="flex items-center justify-between gap-3">
|
<div class="flex items-center gap-2 text-sm text-[var(--art-text-gray-600)]">
|
<span class="font-medium text-[var(--art-text-gray-900)]">{{
|
t('pages.orders.deliveryItem.sourceTitle')
|
}}</span>
|
<span>{{
|
t('pages.orders.deliveryItem.sourceLabel', { id: activeSourceSummary.deliveryId })
|
}}</span>
|
</div>
|
<ElButton link type="primary" @click="handleClearSourceFilter">{{
|
t('common.actions.viewAll')
|
}}</ElButton>
|
</div>
|
</ElCard>
|
|
<DeliveryItemManagePanel
|
:delivery-id="searchForm.deliveryId"
|
:can-add="hasAuth('add')"
|
:can-edit="hasAuth('update')"
|
:can-delete="hasAuth('delete')"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, onMounted, ref, watch } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { ElButton } from 'element-plus'
|
import { useRoute, useRouter } from 'vue-router'
|
import { useAuth } from '@/hooks/core/useAuth'
|
import DeliveryItemManagePanel from './modules/delivery-item-manage-panel.vue'
|
import { createDeliveryItemSearchState } from './deliveryItemPage.helpers.js'
|
|
defineOptions({ name: 'DeliveryItem' })
|
|
const { t } = useI18n()
|
const { hasAuth } = useAuth()
|
const route = useRoute()
|
const router = useRouter()
|
const searchForm = ref(createDeliveryItemSearchState())
|
|
const activeSourceSummary = computed(() => {
|
if (
|
searchForm.value.deliveryId === '' ||
|
searchForm.value.deliveryId === undefined ||
|
searchForm.value.deliveryId === null
|
) {
|
return null
|
}
|
return {
|
deliveryId: searchForm.value.deliveryId
|
}
|
})
|
|
function applyRouteSearch() {
|
const deliveryId = route.query.deliveryId
|
if (deliveryId === undefined || deliveryId === null || deliveryId === '') {
|
return
|
}
|
searchForm.value.deliveryId = Number.isFinite(Number(deliveryId))
|
? Number(deliveryId)
|
: searchForm.value.deliveryId
|
}
|
|
function handleClearSourceFilter() {
|
searchForm.value.deliveryId = ''
|
router.replace({
|
path: route.path,
|
query: {
|
...route.query,
|
deliveryId: undefined
|
}
|
})
|
}
|
|
watch(
|
() => route.query.deliveryId,
|
(value) => {
|
if (value === undefined || value === null || value === '') {
|
return
|
}
|
applyRouteSearch()
|
}
|
)
|
|
onMounted(() => {
|
applyRouteSearch()
|
})
|
</script>
|
