用户资源包列表修改

src/api/apihub/userapiusage/index.ts

@@ -5,6 +5,8 @@ import type { Dayjs } from 'dayjs';
 export interface UserApiUsage {
           id: number; // 记录ID
           userId?: number; // 用户ID
+          userMobile?: string; // 用户手机号
+          userNickname?: string; // 用户昵称
           apiId?: number; // API ID
           apiName?: string; // api名称
           packageId?: number; // 购买的套餐ID

src/views/apihub/userapiusage/UserApiUsageDetail.vue

+<template>
+  <el-dialog title="资源包详情" v-model="visible" width="700px">
+    <el-descriptions :column="2" border v-loading="loading">
+      <el-descriptions-item label="用户手机号">{{ detailData.userMobile || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="用户昵称">{{ detailData.userNickname || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="API名称">{{ detailData.apiName || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="套餐名称">{{ detailData.packageName || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="套餐总量">{{ detailData.packageTimes ?? '-' }}</el-descriptions-item>
+      <el-descriptions-item label="有效时长">
+        {{ detailData.packageValidDays ? detailData.packageValidDays + ' 天' : '-' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="已使用次数">{{ detailData.usedTimes ?? '-' }}</el-descriptions-item>
+      <el-descriptions-item label="过期时间">{{ formatDate(detailData.expireTime) }}</el-descriptions-item>
+      <el-descriptions-item label="购买时间">{{ formatDate(detailData.createTime) }}</el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { UserApiUsageApi } from '@/api/apihub/userapiusage'
+
+const visible = ref(false)
+const loading = ref(false)
+const detailData = ref<any>({})
+
+const formatDate = (date: string) => {
+  if (!date) return '-'
+  const d = new Date(date)
+  if (isNaN(d.getTime())) return date
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+
+const open = async (id: number) => {
+  visible.value = true
+  loading.value = true
+  try {
+    const data = await UserApiUsageApi.getUserApiUsage(id)
+    detailData.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+defineExpose({ open })
+</script>

src/views/apihub/userapiusage/index.vue

@@ -48,7 +48,7 @@
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
-        <el-button
+        <!-- <el-button
             type="danger"
             plain
             :disabled="isEmpty(checkedIds)"
@@ -56,7 +56,7 @@
             v-hasPermi="['apihub:user-api-usage:delete']"
         >
           <Icon icon="ep:delete" class="mr-5px" /> 批量删除
-        </el-button>
+        </el-button> -->
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -64,23 +64,23 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
-        row-key="id"
-        v-loading="loading"
-        :data="list"
-        :stripe="true"
-        :show-overflow-tooltip="true"
-        @selection-change="handleRowCheckboxChange"
+      row-key="id"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @selection-change="handleRowCheckboxChange"
     >
-    <el-table-column type="selection" width="55" />
-      <el-table-column label="用户手机号" align="center" prop="userMobile"  width="150px"/>
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="用户手机号" align="center" prop="userMobile" width="150px" />
+      <el-table-column label="用户昵称" align="center" prop="userNickname" width="150px" />
       <el-table-column label="api名称" align="center" prop="apiName" width="150px" />
       <el-table-column label="套餐名称" align="center" prop="packageName" width="150px" />
       <el-table-column label="套餐总量" align="center" prop="packageTimes" />
       <el-table-column label="有效时长" align="center" prop="packageValidDays">
-        <template #default="scope">
-          {{ scope.row.packageValidDays }} 天
-        </template>
-      </el-table-column>      <el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
+        <template #default="scope"> {{ scope.row.packageValidDays }} 天 </template>
+      </el-table-column>
+      <el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
       <el-table-column
         label="过期时间"
         align="center"
@@ -95,9 +95,10 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" min-width="120px">
+      <el-table-column label="操作" align="center" min-width="180px">
         <template #default="scope">
-          <el-button
+          <el-button link type="primary" @click="handleDetail(scope.row.id)"> 详情 </el-button>
+          <!-- <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
@@ -112,7 +113,7 @@
             v-hasPermi="['apihub:user-api-usage:delete']"
           >
             删除
-          </el-button>
+          </el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -125,6 +126,9 @@
     />
   </ContentWrap>
 
+  <!-- 详情弹窗 -->
+  <UserApiUsageDetail ref="detailRef" />
+
   <!-- 表单弹窗：添加/修改 -->
   <UserApiUsageForm ref="formRef" @success="getList" />
 </template>
@@ -135,6 +139,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { UserApiUsageApi, UserApiUsage } from '@/api/apihub/userapiusage'
 import UserApiUsageForm from './UserApiUsageForm.vue'
+import UserApiUsageDetail from './UserApiUsageDetail.vue'
 
 /** 用户API管理 列表 */
 defineOptions({ name: 'UserApiUsage' })
@@ -185,6 +190,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 详情操作 */
+const detailRef = ref()
+const handleDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
@@ -203,15 +214,15 @@ const handleDeleteBatch = async () => {
   try {
     // 删除的二次确认
     await message.delConfirm()
-    await UserApiUsageApi.deleteUserApiUsageList(checkedIds.value);
+    await UserApiUsageApi.deleteUserApiUsageList(checkedIds.value)
     message.success(t('common.delSuccess'))
-    await getList();
+    await getList()
   } catch {}
 }
 
 const checkedIds = ref<number[]>([])
 const handleRowCheckboxChange = (records: UserApiUsage[]) => {
-  checkedIds.value = records.map((item) => item.id);
+  checkedIds.value = records.map((item) => item.id)
 }
 
 /** 导出按钮操作 */