完善按钮和详情权限

2026-02-28 11:04:32 +08:00
parent 4470a4ef04
commit ce1032c7f9
23 changed files with 984 additions and 760 deletions
--- a/src/views/asset-management/authorization-records/detail.vue
+++ b/src/views/asset-management/authorization-records/detail.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="authorization-record-detail">
+    <ElCard shadow="never">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">授权记录详情</h2>
+      </div>
+
+      <!-- 详情内容 -->
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { AuthorizationService } from '@/api/modules'
+  import type { AuthorizationItem } from '@/types/api/authorization'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'AuthorizationRecordDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<AuthorizationItem | null>(null)
+
+  // 详情页配置
+  const detailSections: DetailSection[] = [
+    {
+      title: '基本信息',
+      fields: [
+        { label: '企业ID', prop: 'enterprise_id' },
+        { label: '企业名称', prop: 'enterprise_name' },
+        { label: '卡ID', prop: 'card_id' },
+        { label: 'ICCID', prop: 'iccid' },
+        { label: '手机号', prop: 'msisdn', formatter: (value) => value || '-' },
+        { label: '授权人ID', prop: 'authorized_by' },
+        { label: '授权人', prop: 'authorizer_name' },
+        {
+          label: '授权人类型',
+          formatter: (_, data) => {
+            return data.authorizer_type === 2 ? '平台' : '代理'
+          }
+        },
+        { label: '授权时间', prop: 'authorized_at', formatter: (value) => formatDateTime(value) },
+        {
+          label: '状态',
+          formatter: (_, data) => {
+            return data.status === 1 ? '有效' : '已回收'
+          }
+        },
+        { label: '备注', prop: 'remark', formatter: (value) => value || '-' }
+      ]
+    }
+  ]
+
+  // 返回上一页
+  const handleBack = () => {
+    router.back()
+  }
+
+  // 获取详情数据
+  const fetchDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) {
+      ElMessage.error('缺少ID参数')
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await AuthorizationService.getAuthorizationDetail(id)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取授权记录详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .authorization-record-detail {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>