用户资源包列表修改

4655fb4b · renyizhao · 0bf3c8de · 4655fb4b · 4655fb4b · 4655fb4b
Commit 4655fb4b authored Jul 14, 2026 by renyizhao
Showing with 79 additions and 20 deletions

src/api/apihub/userapiusage/index.ts
+2 -0

src/views/apihub/api/ApiForm.vue
+0 -0

src/views/apihub/userapiusage/UserApiUsageDetail.vue
+46 -0

src/views/apihub/userapiusage/index.vue
+31 -20

No files found.
--- a/src/api/apihub/userapiusage/index.ts
+++ b/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

--- a/src/views/apihub/api/ApiForm.vue
+++ b/src/views/apihub/api/ApiForm.vue
--- a/src/views/apihub/userapiusage/UserApiUsageDetail.vue
+++ b/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>
--- a/src/views/apihub/userapiusage/index.vue
+++ b/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"
+      row-key="id"
-        v-loading="loading"
+      v-loading="loading"
-        :data="list"
+      :data="list"
-        :stripe="true"
+      :stripe="true"
-        :show-overflow-tooltip="true"
+      :show-overflow-tooltip="true"
-        @selection-change="handleRowCheckboxChange"
+      @selection-change="handleRowCheckboxChange"
    >
-    <el-table-column type="selection" width="55" />
+      <el-table-column type="selection" width="55" />
-      <el-table-column label="用户手机号" align="center" prop="userMobile"  width="150px"/>
+      <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">
+        <template #default="scope"> {{ scope.row.packageValidDays }} 天 </template>
-          {{ scope.row.packageValidDays }} 天
+      </el-table-column>
-        </template>
+      <el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
-      </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)
 }
 /** 导出按钮操作 */