<template>
|
<ElDrawer
|
:model-value="visible"
|
:title="t('pages.task.detail.title')"
|
size="85%"
|
@update:model-value="handleVisibleChange"
|
>
|
<div class="flex h-full flex-col gap-4">
|
<div class="grid gap-4 xl:grid-cols-[1.45fr_1fr]">
|
<ElCard shadow="never" class="border border-[var(--el-border-color-lighter)]">
|
<template #header>
|
<div class="flex items-center justify-between">
|
<span class="font-medium text-[var(--art-text-gray-900)]">{{ t('pages.task.detail.baseInfo') }}</span>
|
<ElTag size="small" effect="plain" type="primary">
|
{{ detail.taskCode || '--' }}
|
</ElTag>
|
</div>
|
</template>
|
|
<ElDescriptions :column="2" border>
|
<ElDescriptionsItem :label="t('pages.task.detail.taskStatus')">{{ detail.taskStatusLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.taskType')">{{ detail.taskTypeLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.warehType')">{{ detail.warehTypeLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.priority')">{{ detail.sort ?? '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.status')">{{ detail.statusText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.robotCode')">{{ detail.robotCode || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.createTime')">{{ detail.createTimeText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.updateTime')">{{ detail.updateTimeText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.memo')" :span="2">{{ detail.memo || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
</ElCard>
|
|
<ElCard shadow="never" class="border border-[var(--el-border-color-lighter)]">
|
<template #header>
|
<div class="flex items-center justify-between">
|
<span class="font-medium text-[var(--art-text-gray-900)]">{{ t('pages.task.detail.pathInfo') }}</span>
|
<ElButton text type="primary" @click="$emit('flow-step')">{{ t('pages.task.detail.flowStep') }}</ElButton>
|
</div>
|
</template>
|
|
<ElDescriptions :column="1" border>
|
<ElDescriptionsItem :label="t('pages.task.detail.orgLoc')">{{ detail.orgLoc || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.orgSite')">{{ detail.orgSiteLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.targLoc')">{{ detail.targLoc || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.targSite')">{{ detail.targSiteLabel || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.barcode')">{{ detail.barcode || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
</ElCard>
|
</div>
|
|
<div class="flex items-center justify-between">
|
<div>
|
<div class="text-sm font-medium text-[var(--art-text-gray-900)]">{{ t('pages.task.detail.items') }}</div>
|
<div class="mt-1 text-xs text-[var(--art-text-gray-500)]">
|
{{ t('pages.task.detail.itemsHint') }}
|
</div>
|
</div>
|
<div class="flex items-center gap-2">
|
<ElButton :loading="loading" @click="$emit('refresh')">{{ t('common.actions.refresh') }}</ElButton>
|
</div>
|
</div>
|
|
<ArtTable
|
:loading="loading"
|
:data="data"
|
:columns="columns"
|
:pagination="pagination"
|
@pagination:size-change="$emit('size-change', $event)"
|
@pagination:current-change="$emit('current-change', $event)"
|
/>
|
</div>
|
</ElDrawer>
|
</template>
|
|
<script setup>
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
defineProps({
|
visible: { type: Boolean, default: false },
|
loading: { type: Boolean, default: false },
|
detail: { type: Object, default: () => ({}) },
|
data: { type: Array, default: () => [] },
|
columns: { type: Array, default: () => [] },
|
pagination: { type: Object, default: () => ({ current: 1, size: 20, total: 0 }) }
|
})
|
|
const emit = defineEmits(['update:visible', 'refresh', 'size-change', 'current-change', 'flow-step'])
|
|
function handleVisibleChange(visible) {
|
emit('update:visible', visible)
|
}
|
</script>
|
