fetch(add): 分配记录,批量分配/回收, 单卡列表, 任务列表, 导入ICCID

src/views/asset-management/allocation-record-detail/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="allocation-record-detail-page" id="table-full-screen">
+      <ElCard shadow="never" style="margin-bottom: 20px">
+        <template #header>
+          <div class="card-header">
+            <span>分配记录详情</span>
+            <ElButton @click="goBack">返回</ElButton>
+          </div>
+        </template>
+
+        <ElSkeleton :loading="loading" :rows="10" animated>
+          <template #default>
+            <ElDescriptions v-if="recordDetail" title="基本信息" :column="3" border>
+              <ElDescriptionsItem label="分配单号">{{ recordDetail.allocation_no }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="分配类型">
+                <ElTag :type="getAllocationTypeType(recordDetail.allocation_type)">
+                  {{ recordDetail.allocation_name }}
+                </ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="资产类型">
+                <ElTag :type="getAssetTypeType(recordDetail.asset_type)">
+                  {{ recordDetail.asset_type_name }}
+                </ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="资产标识符">{{ recordDetail.asset_identifier }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="关联卡数量">{{ recordDetail.related_card_count }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="关联设备ID">
+                {{ recordDetail.related_device_id || '-' }}
+              </ElDescriptionsItem>
+            </ElDescriptions>
+
+            <ElDescriptions v-if="recordDetail" title="所有者信息" :column="2" border style="margin-top: 20px">
+              <ElDescriptionsItem label="来源所有者">
+                {{ recordDetail.from_owner_name }} ({{ recordDetail.from_owner_type }})
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="目标所有者">
+                {{ recordDetail.to_owner_name }} ({{ recordDetail.to_owner_type }})
+              </ElDescriptionsItem>
+            </ElDescriptions>
+
+            <ElDescriptions v-if="recordDetail" title="操作信息" :column="2" border style="margin-top: 20px">
+              <ElDescriptionsItem label="操作人">{{ recordDetail.operator_name }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="创建时间">
+                {{ formatDateTime(recordDetail.created_at) }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="备注" :span="2">
+                {{ recordDetail.remark || '-' }}
+              </ElDescriptionsItem>
+            </ElDescriptions>
+
+            <!-- 关联卡列表 -->
+            <div v-if="recordDetail && recordDetail.related_card_ids && recordDetail.related_card_ids.length > 0" style="margin-top: 20px">
+              <ElDivider content-position="left">关联卡列表</ElDivider>
+              <ElTable :data="relatedCardsList" border>
+                <ElTableColumn type="index" label="序号" width="60" />
+                <ElTableColumn prop="card_id" label="卡ID" width="80" />
+                <ElTableColumn label="ICCID" width="180">
+                  <template #default="scope">
+                    {{ getCardInfo(scope.row.card_id, 'iccid') }}
+                  </template>
+                </ElTableColumn>
+                <ElTableColumn label="状态" width="100">
+                  <template #default="scope">
+                    {{ getCardInfo(scope.row.card_id, 'status') }}
+                  </template>
+                </ElTableColumn>
+              </ElTable>
+            </div>
+          </template>
+        </ElSkeleton>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { useRouter, useRoute } from 'vue-router'
+  import { CardService } from '@/api/modules'
+  import { ElMessage } from 'element-plus'
+  import { formatDateTime } from '@/utils/business/format'
+  import type {
+    AssetAllocationRecordDetail,
+    AllocationTypeEnum,
+    AssetTypeEnum
+  } from '@/types/api/card'
+
+  defineOptions({ name: 'AllocationRecordDetail' })
+
+  const router = useRouter()
+  const route = useRoute()
+  const loading = ref(false)
+  const recordDetail = ref<AssetAllocationRecordDetail | null>(null)
+  const relatedCardsList = ref<{ card_id: number }[]>([])
+
+  // 获取分配类型标签类型
+  const getAllocationTypeType = (type: AllocationTypeEnum) => {
+    return type === 'allocate' ? 'success' : 'warning'
+  }
+
+  // 获取资产类型标签类型
+  const getAssetTypeType = (type: AssetTypeEnum) => {
+    return type === 'iot_card' ? 'primary' : 'info'
+  }
+
+  // 模拟获取卡信息的方法(实际应该调用API获取)
+  const getCardInfo = (cardId: number, field: 'iccid' | 'status') => {
+    if (field === 'iccid') {
+      return `ICCID-${cardId}`
+    } else {
+      return '在库'
+    }
+  }
+
+  // 获取详情数据
+  const getDetailData = async () => {
+    const id = route.query.id as string
+    if (!id) {
+      ElMessage.error('缺少记录ID参数')
+      goBack()
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await CardService.getAssetAllocationRecordDetail(Number(id))
+      if (res.code === 0) {
+        recordDetail.value = res.data
+        // 构建关联卡列表
+        if (recordDetail.value.related_card_ids && recordDetail.value.related_card_ids.length > 0) {
+          relatedCardsList.value = recordDetail.value.related_card_ids.map((cardId) => ({
+            card_id: cardId
+          }))
+        }
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取分配记录详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 返回列表
+  const goBack = () => {
+    router.back()
+  }
+
+  onMounted(() => {
+    getDetailData()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .allocation-record-detail-page {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+</style>