#前端

zhou zhou

昨天 aaf8a50511d77dbc209ca93bbba308c21179a8bc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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.currentRow ?? '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="起始排号">{{ detail.startRow ?? '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="终止排号">{{ detail.endRow ?? '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="设备数量">{{ detail.deviceQty ?? '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="起始设备号">{{ detail.startDeviceNo ?? '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="终止设备号">{{ detail.endDeviceNo ?? '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="库区类型">{{ detail.typeIdText || '--' }}</ElDescriptionsItem>
          <ElDescriptionsItem label="站点列表" :span="2">
            <div v-if="staListItems.length" class="flex flex-wrap gap-2">
              <ElTag v-for="item in staListItems" :key="item" effect="plain">{{ item }}</ElTag>
            </div>
            <span v-else>--</span>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="物料相似">
            <ElTag :type="detail.beSimilarType || 'info'" effect="light">
              {{ detail.beSimilarText || '--' }}
            </ElTag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="空板靠近">
            <ElTag :type="detail.emptySimilarType || 'info'" effect="light">
              {{ detail.emptySimilarText || '--' }}
            </ElTag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="备注" :span="2">{{ detail.memo || '--' }}</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: () => ({}) }
  })
 
  const emit = defineEmits(['update:visible'])
 
  const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
  })
 
  const staListItems = computed(() => {
    if (Array.isArray(props.detail?.staListItems) && props.detail.staListItems.length) {
      return props.detail.staListItems
    }
    const text = String(props.detail?.staList || '').trim()
    return text ? text.split(/[;,，\n\r]+/g).map((item) => item.trim()).filter(Boolean) : []
  })
 
  function handleVisibleChange(value) {
    visible.value = value
  }
</script>