<template>
|
<ElDrawer
|
:model-value="visible"
|
title="站点管理详情"
|
size="960px"
|
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="基础信息" :column="2" border>
|
<ElDescriptionsItem label="站点编码">{{ detail.stationName || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="站点名称">{{ detail.stationId || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="站点类型">
|
<ElTag :type="detail.typeType || 'info'" effect="light">
|
{{ detail.typeText || '--' }}
|
</ElTag>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem label="使用状态">
|
<ElTag :type="detail.useStatusType || 'info'" effect="light">
|
{{ detail.useStatusText || '--' }}
|
</ElTag>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem label="所属库区">{{ detail.areaText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="条码">{{ detail.barcode || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="可入">{{ detail.inAbleText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="可出">{{ detail.outAbleText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="是否跨区">{{ detail.isCrossZoneText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="是否WCS">{{ detail.isWcsText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="自动调拨">{{ detail.autoTransferText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="状态">
|
<ElTag :type="detail.statusType || 'info'" effect="light">
|
{{ detail.statusText || '--' }}
|
</ElTag>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem label="备注" :span="2">{{ detail.memo || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
|
<ElDescriptions title="业务配置" :column="2" border>
|
<ElDescriptionsItem label="可跨区库区" :span="2">
|
<div v-if="areaItems.length" class="flex flex-wrap gap-2">
|
<ElTag v-for="item in areaItems" :key="item.id" effect="plain">
|
#{{ item.sort }} {{ item.label }}
|
</ElTag>
|
</div>
|
<span v-else>--</span>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem label="可入容器类型" :span="2">
|
<div v-if="containerItems.length" class="flex flex-wrap gap-2">
|
<ElTag v-for="item in containerItems" :key="item.value" effect="plain">
|
{{ item.label }}
|
</ElTag>
|
</div>
|
<span v-else>--</span>
|
</ElDescriptionsItem>
|
<ElDescriptionsItem label="WCS数据" :span="2">{{ detail.wcsData || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="站点别名" :span="2">{{ detail.stationAliasText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="仓库编码">{{ detail.productionLineCode || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="仓库名称">{{ detail.productionLineName || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
|
<ElDescriptions title="审计信息" :column="2" border>
|
<ElDescriptionsItem label="创建人">{{ detail.createByText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="创建时间">{{ detail.createTimeText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="更新人">{{ detail.updateByText || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="更新时间">{{ detail.updateTimeText || '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
</div>
|
</ElScrollbar>
|
</ElDrawer>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
loading: { type: Boolean, default: false },
|
detail: { type: Object, default: () => ({}) },
|
resolveAreaLabel: { type: Function, default: null },
|
resolveContainerTypeLabel: { type: Function, default: null }
|
})
|
|
const emit = defineEmits(['update:visible'])
|
|
const visible = computed({
|
get: () => props.visible,
|
set: (value) => emit('update:visible', value)
|
})
|
|
const areaItems = computed(() => {
|
if (!Array.isArray(props.detail?.areaIds)) {
|
return []
|
}
|
return props.detail.areaIds
|
.map((item, index) => {
|
const id = typeof item === 'object' ? item.id ?? item.areaId ?? item.value : item
|
const label = typeof props.resolveAreaLabel === 'function' ? props.resolveAreaLabel(id) : ''
|
return {
|
id,
|
sort: typeof item === 'object' && item.sort !== undefined ? item.sort : index + 1,
|
label: String(label || item.name || item.areaName || item.label || item.code || item.areaCode || `库区 ${id}`)
|
}
|
})
|
.filter((item) => item.id !== undefined && item.id !== null && item.id !== '')
|
})
|
|
const containerItems = computed(() => {
|
if (!Array.isArray(props.detail?.containerTypes)) {
|
return []
|
}
|
return props.detail.containerTypes
|
.map((item) => {
|
const value = typeof item === 'object' ? item.id ?? item.value : item
|
const label = typeof props.resolveContainerTypeLabel === 'function' ? props.resolveContainerTypeLabel(value) : ''
|
return {
|
value,
|
label: String(label || item.label || item.name || item.dictLabel || item.value || `容器类型 ${value}`)
|
}
|
})
|
.filter((item) => item.value !== undefined && item.value !== null && item.value !== '')
|
})
|
|
function handleVisibleChange(value) {
|
visible.value = value
|
}
|
</script>
|
