<template>
|
<ElDrawer
|
:model-value="visible"
|
:title="t('pages.orders.delivery.detail.title')"
|
size="1180px"
|
destroy-on-close
|
@update:model-value="handleVisibleChange"
|
>
|
<ElScrollbar class="h-[calc(100vh-180px)] pr-1">
|
<div v-if="loading" class="py-6">
|
<ElSkeleton :rows="12" animated />
|
</div>
|
<div v-else class="space-y-4">
|
<ElDescriptions :title="t('pages.orders.delivery.detail.baseInfo')" :column="2" border>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.code')">{{ detail.code || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.platId')">{{ detail.platId || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.platCode')">{{ detail.platCode || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.type')">{{ detail.typeLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.wkType')">{{ detail.wkTypeLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.source')">{{ detail.source || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.anfme')">{{ detail.anfme ?? '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.qty')">{{ detail.qty ?? '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.workQty')">{{ detail.workQty ?? '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.status')">
|
<ElTag :type="detail.statusType || 'info'" effect="light">
|
{{ detail.statusText || '--' }}
|
</ElTag>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.exceStatus')">
|
<ElTag :type="detail.exceStatusTagType || 'info'" effect="light">
|
{{ detail.exceStatusText || '--' }}
|
</ElTag>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.memo')" :span="2">{{ detail.memo || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.startTime')">{{ detail.startTimeText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.endTime')">{{ detail.endTimeText || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
|
<ElDescriptions :title="t('pages.orders.delivery.detail.auditInfo')" :column="2" border>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.createBy')">{{ detail.createByText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.createTime')">{{ detail.createTimeText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.updateBy')">{{ detail.updateByText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.orders.delivery.detail.updateTime')">{{ detail.updateTimeText || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
|
<div class="space-y-3">
|
<div class="flex items-center justify-between">
|
<div class="text-sm font-medium text-[var(--art-gray-900)]">{{ t('pages.orders.delivery.detail.items') }}</div>
|
<ElTag effect="plain">{{ t('pages.orders.delivery.detail.count', { count: itemRows.length }) }}</ElTag>
|
</div>
|
<ArtTable
|
:loading="itemsLoading"
|
:data="itemRows"
|
:columns="itemColumns"
|
:pagination="pagination"
|
@pagination:size-change="$emit('size-change', $event)"
|
@pagination:current-change="$emit('current-change', $event)"
|
/>
|
</div>
|
</div>
|
</ElScrollbar>
|
</ElDrawer>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import ArtTable from '@/components/core/tables/art-table/index.vue'
|
|
defineOptions({ name: 'DeliveryDetailDrawer' })
|
const { t } = useI18n()
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
loading: { type: Boolean, default: false },
|
itemsLoading: { type: Boolean, default: false },
|
detail: { type: Object, default: () => ({}) },
|
itemRows: { type: Array, default: () => [] },
|
pagination: { type: Object, default: () => ({ current: 1, size: 20, total: 0 }) }
|
})
|
|
const emit = defineEmits(['update:visible', 'size-change', 'current-change'])
|
|
const itemColumns = [
|
{ type: 'globalIndex', label: t('table.index'), width: 72, align: 'center' },
|
{
|
prop: 'deliveryCode',
|
label: t('pages.orders.delivery.table.deliveryCode'),
|
minWidth: 160,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'platItemId',
|
label: t('pages.orders.delivery.table.platItemId'),
|
minWidth: 130,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'matnrCode',
|
label: t('pages.orders.delivery.table.matnrCode'),
|
minWidth: 150,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'maktx',
|
label: t('pages.orders.delivery.table.maktx'),
|
minWidth: 220,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'fieldsIndex',
|
label: t('pages.orders.delivery.table.fieldsIndex'),
|
minWidth: 150,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'unit',
|
label: t('table.unit'),
|
width: 90,
|
align: 'center'
|
},
|
{
|
prop: 'anfme',
|
label: t('pages.orders.delivery.table.anfme'),
|
width: 110,
|
align: 'right'
|
},
|
{
|
prop: 'workQty',
|
label: t('pages.orders.delivery.table.workQty'),
|
width: 110,
|
align: 'right'
|
},
|
{
|
prop: 'qty',
|
label: t('pages.orders.delivery.table.qty'),
|
width: 110,
|
align: 'right'
|
},
|
{
|
prop: 'nromQty',
|
label: t('pages.orders.delivery.table.nromQty'),
|
width: 110,
|
align: 'right'
|
},
|
{
|
prop: 'printQty',
|
label: t('pages.orders.delivery.table.printQty'),
|
width: 110,
|
align: 'right'
|
},
|
{
|
prop: 'splrName',
|
label: t('pages.orders.delivery.table.splrName'),
|
minWidth: 180,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'splrCode',
|
label: t('pages.orders.delivery.table.splrCode'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'splrBatch',
|
label: t('pages.orders.delivery.table.splrBatch'),
|
minWidth: 140,
|
showOverflowTooltip: true
|
}
|
]
|
|
const visible = computed({
|
get: () => props.visible,
|
set: (value) => emit('update:visible', value)
|
})
|
|
function handleVisibleChange(value) {
|
visible.value = value
|
}
|
</script>
|
