<template>
|
<ElDrawer
|
:model-value="visible"
|
:title="t('pages.task.detail.title')"
|
size="85%"
|
@update:model-value="handleVisibleChange"
|
>
|
<ElScrollbar class="h-full">
|
<div class="flex min-h-full min-w-0 flex-col gap-4 pr-2">
|
<div class="grid shrink-0 gap-4 xl:grid-cols-[1.45fr_1fr]">
|
<ElCard
|
shadow="never"
|
class="task-detail-card 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 size="small" class="compact-descriptions">
|
<ElDescriptionsItem :label="t('pages.task.detail.taskId')">{{
|
detail.taskId ?? '--'
|
}}</ElDescriptionsItem>
|
<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.createBy')">{{
|
detail.createByText || '--'
|
}}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.createTime')">{{
|
detail.createTimeText || '--'
|
}}</ElDescriptionsItem>
|
<ElDescriptionsItem :label="t('pages.task.detail.updateBy')">{{
|
detail.updateByText || '--'
|
}}</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="task-detail-card 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 size="small" class="compact-descriptions">
|
<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="shrink-0 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>
|
|
<div class="min-w-0">
|
<ArtTable
|
:loading="loading"
|
:data="data"
|
:columns="columns"
|
:pagination="pagination"
|
@pagination:size-change="$emit('size-change', $event)"
|
@pagination:current-change="$emit('current-change', $event)"
|
/>
|
</div>
|
</div>
|
</ElScrollbar>
|
</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>
|
|
<style scoped>
|
:deep(.task-detail-card .el-card__header) {
|
padding: 12px 16px;
|
}
|
|
:deep(.task-detail-card .el-card__body) {
|
padding: 12px 16px 16px;
|
}
|
|
:deep(.compact-descriptions .el-descriptions__label.el-descriptions__cell),
|
:deep(.compact-descriptions .el-descriptions__content.el-descriptions__cell) {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
</style>
|
