Skip to content

phsl / admin

Go to a project
Commit e1c9423f by lijinqi
Options

api新增 关联接口

parent bb79fab2
Showing with 1469 additions and 78 deletions
.env.local
......@@ -4,7 +4,8 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='https://phsl.lijinqi.com/'
VITE_BASE_URL='http://localhost:48080'
#VITE_BASE_URL='https://ltx.lijinqi.com/'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server
......
.env.prod
......@@ -4,7 +4,7 @@ NODE_ENV=production
VITE_DEV=false
# 请求路径
#VITE_BASE_URL='http://localhost:48080'
VITE_BASE_URL=/admin-api
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
VITE_UPLOAD_TYPE=server
......@@ -25,7 +25,7 @@ VITE_SOURCEMAP=false
VITE_BASE_PATH=/
# 输出路径
VITE_OUT_DIR=dist-prod
VITE_OUT_DIR=dist
# 商城H5会员端域名
VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
......
src/api/apihub/api/index.ts
import request from '@/config/axios'
import type { Dayjs } from 'dayjs';
import ApiEndpoint from "@/views/apihub/apiendpoint/index.vue";
/** API信息信息 */
// 定义套餐类型
......@@ -30,6 +31,8 @@ export interface ApiCategory {
name: string; // 分类名称
}
// API信息 API
export const ApiApi = {
// 查询API信息分页
......@@ -68,8 +71,15 @@ export const ApiApi = {
return await request.download({ url: `/apihub/api/export-excel`, params })
},
/** 查询分类列表 */
/** 查询所有分类 */
getCategoryList: async (): Promise<ApiCategory[]> => {
return await request.get({ url: `/apihub/api-category/list` })
},
/** 查询所有接口 */
getEndpointList: async (): Promise<ApiEndpoint[]> => {
return await request.get({ url: `/apihub/api-endpoint/list` })
}
}
src/api/apihub/apiendpoint/index.ts 0 → 100644
import request from '@/config/axios'
import type { Dayjs } from 'dayjs';
/** API 接口信息 */
export interface ApiEndpoint {
id: number; // 接口ID
name?: string; // 接口名称
path?: string; // 接口路径，全路径例如 https://phsl.lijinqi.com/openn_ip/xxx
method?: string; // 请求方式: GET/POST/PUT/DELETE
params: string; // 参数定义(JSON)
response: string; // 返回结果示例
authType: string; // 鉴权方式，例如 API_KEY/OAUTH
rateLimit: string; // 接口级限流规则，例如 100 QPS
remark: string; // 备注
}
// API 接口 API
export const ApiEndpointApi = {
// 查询API 接口分页
getApiEndpointPage: async (params: any) => {
return await request.get({ url: `/apihub/api-endpoint/page`, params })
},
// 查询API 接口详情
getApiEndpoint: async (id: number) => {
return await request.get({ url: `/apihub/api-endpoint/get?id=` + id })
},
// 新增API 接口
createApiEndpoint: async (data: ApiEndpoint) => {
return await request.post({ url: `/apihub/api-endpoint/create`, data })
},
// 修改API 接口
updateApiEndpoint: async (data: ApiEndpoint) => {
return await request.put({ url: `/apihub/api-endpoint/update`, data })
},
// 删除API 接口
deleteApiEndpoint: async (id: number) => {
return await request.delete({ url: `/apihub/api-endpoint/delete?id=` + id })
},
/** 批量删除API 接口 */
deleteApiEndpointList: async (ids: number[]) => {
return await request.delete({ url: `/apihub/api-endpoint/delete-list?ids=${ids.join(',')}` })
},
// 导出API 接口 Excel
exportApiEndpoint: async (params) => {
return await request.download({ url: `/apihub/api-endpoint/export-excel`, params })
},
/** 查询所有接口 */
getEndpointList: async (): Promise<ApiEndpoint[]> => {
return await request.get({ url: `/apihub/api-endpoint/list` })
}
}
src/api/apihub/apiendpointrel/index.ts 0 → 100644
import request from '@/config/axios'
import type { Dayjs } from 'dayjs';
/** API 应用与接口关系信息 */
export interface ApiEndpointRel {
id: number; // 主键
apiId?: number; // API 应用ID，关联 apihub_api.id
apiEndpointId?: number; // 接口ID，关联 apihub_api_endpoint.id
}
// API 应用与接口关系 API
export const ApiEndpointRelApi = {
// 查询API 应用与接口关系分页
getApiEndpointRelPage: async (params: any) => {
return await request.get({ url: `/apihub/api-endpoint-rel/page`, params })
},
// 查询API 应用与接口关系详情
getApiEndpointRel: async (id: number) => {
return await request.get({ url: `/apihub/api-endpoint-rel/get?id=` + id })
},
// 新增API 应用与接口关系
createApiEndpointRel: async (data: ApiEndpointRel) => {
return await request.post({ url: `/apihub/api-endpoint-rel/create`, data })
},
// 修改API 应用与接口关系
updateApiEndpointRel: async (data: ApiEndpointRel) => {
return await request.put({ url: `/apihub/api-endpoint-rel/update`, data })
},
// 删除API 应用与接口关系
deleteApiEndpointRel: async (id: number) => {
return await request.delete({ url: `/apihub/api-endpoint-rel/delete?id=` + id })
},
/** 批量删除API 应用与接口关系 */
deleteApiEndpointRelList: async (ids: number[]) => {
return await request.delete({ url: `/apihub/api-endpoint-rel/delete-list?ids=${ids.join(',')}` })
},
// 导出API 应用与接口关系 Excel
exportApiEndpointRel: async (params) => {
return await request.download({ url: `/apihub/api-endpoint-rel/export-excel`, params })
}
}
\ No newline at end of file
src/api/apihub/appcredential/index.ts 0 → 100644
import request from '@/config/axios'
import type { Dayjs } from 'dayjs';
/** 用户密钥信息信息 */
export interface AppCredential {
id: number; // 主键ID
appId?: string; // 应用ID，唯一
appSecret?: string; // AES加密后的应用密钥
userId?: number; // 所属用户ID
}
// 用户密钥信息 API
export const AppCredentialApi = {
// 查询用户密钥信息分页
getAppCredentialPage: async (params: any) => {
return await request.get({ url: `/apihub/app-credential/page`, params })
},
// 查询用户密钥信息详情
getAppCredential: async (id: number) => {
return await request.get({ url: `/apihub/app-credential/get?id=` + id })
},
// 新增用户密钥信息
createAppCredential: async (data: AppCredential) => {
return await request.post({ url: `/apihub/app-credential/create`, data })
},
// 修改用户密钥信息
updateAppCredential: async (data: AppCredential) => {
return await request.put({ url: `/apihub/app-credential/update`, data })
},
// 删除用户密钥信息
deleteAppCredential: async (id: number) => {
return await request.delete({ url: `/apihub/app-credential/delete?id=` + id })
},
/** 批量删除用户密钥信息 */
deleteAppCredentialList: async (ids: number[]) => {
return await request.delete({ url: `/apihub/app-credential/delete-list?ids=${ids.join(',')}` })
},
// 导出用户密钥信息 Excel
exportAppCredential: async (params) => {
return await request.download({ url: `/apihub/app-credential/export-excel`, params })
}
}
\ No newline at end of file
src/api/apihub/userapiusage/index.ts
import request from '@/config/axios'
import type { Dayjs } from 'dayjs';
/** 用户 API 使用统计信息 */
/** 用户API管理信息 */
export interface UserApiUsage {
id: number; // 记录ID
userId?: number; // 用户ID
apiId?: number; // API ID
totalTimes?: number; // 购买总次数
apiName?: string; // api名称
packageId?: number; // 购买的套餐ID
packageName: string; // 套餐名称
packagePrice: number; // 套餐单价
packageTimes?: number; // 套餐包 使用次数
packageValidDays?: number; // 有效时长
usedTimes?: number; // 已使用次数
expireTime: string | Dayjs; // 过期时间
remark: string; // 备注
}
// 用户 API 使用统计 API
// 用户API管理 API
export const UserApiUsageApi = {
// 查询用户 API 使用统计分页
// 查询用户API管理分页
getUserApiUsagePage: async (params: any) => {
return await request.get({ url: `/apihub/user-api-usage/page`, params })
},
// 查询用户 API 使用统计详情
// 查询用户API管理详情
getUserApiUsage: async (id: number) => {
return await request.get({ url: `/apihub/user-api-usage/get?id=` + id })
},
// 新增用户 API 使用统计
// 新增用户API管理
createUserApiUsage: async (data: UserApiUsage) => {
return await request.post({ url: `/apihub/user-api-usage/create`, data })
},
// 修改用户 API 使用统计
// 修改用户API管理
updateUserApiUsage: async (data: UserApiUsage) => {
return await request.put({ url: `/apihub/user-api-usage/update`, data })
},
// 删除用户 API 使用统计
// 删除用户API管理
deleteUserApiUsage: async (id: number) => {
return await request.delete({ url: `/apihub/user-api-usage/delete?id=` + id })
},
/** 批量删除用户 API 使用统计 */
/** 批量删除用户API管理 */
deleteUserApiUsageList: async (ids: number[]) => {
return await request.delete({ url: `/apihub/user-api-usage/delete-list?ids=${ids.join(',')}` })
},
// 导出用户 API 使用统计 Excel
// 导出用户API管理 Excel
exportUserApiUsage: async (params) => {
return await request.download({ url: `/apihub/user-api-usage/export-excel`, params })
}
}
}
\ No newline at end of file
src/views/apihub/api/ApiForm.vue
......@@ -21,6 +21,58 @@
/>
</el-select>
</el-form-item>
<el-form-item label="关联接口">
<!-- 添加接口按钮独占一行 -->
<div style="margin-bottom: 10px;">
<el-button type="primary" size="small" @click="addApiEndpoint">
添加接口
</el-button>
</div>
<!-- 接口表格，每个接口占一行 -->
<table class="table">
<thead>
<tr>
<th style="width: 80px">接口名称</th>
<th style="width: 140px">接口路径</th>
<th style="width: 40px">请求方法</th>
<th style="width: 40px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(i, index) in formData.apiEndPoints" :key="index">
<td>
<el-select
v-model="i.id"
placeholder="请选择接口"
@change="(val) => onApiSelected(val, i)"
>
<el-option
v-for="item in apiEndPointList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</td>
<td>
<el-input v-model="i.path" disabled />
</td>
<td>
<el-input v-model="i.method" disabled />
</td>
<td>
<el-button type="danger" size="small" @click="removeApiEndpoint(index)">
删除
</el-button>
</td>
</tr>
</tbody>
</table>
</el-form-item>
<el-form-item label="API 简介" prop="description">
<el-input v-model="formData.description" height="350px" />
</el-form-item>
......@@ -110,7 +162,7 @@
</td>
<td>
<el-button type="danger" :disabled="formData.apiPackages.length === 1" @click="delParent(index)">
<el-button type="danger" :disabled="formData.apiPackages.length === 1" @click="delapiPackage(index)">
删除
</el-button>
<!-- <el-button-->
......@@ -137,8 +189,9 @@
</template>
<script setup lang="ts">
import {ApiApi, Api, ApiCategory} from '@/api/apihub/api'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict"
import type { FormItemRule } from 'element-plus'
import {ApiEndpoint, ApiEndpointApi} from "@/api/apihub/apiendpoint";
const categoryList = ref<ApiCategory[]>([])
......@@ -176,7 +229,10 @@ const formData = ref({
remark: '',
apiPackages: [
{ name: '套餐', times: 1, price: 1, validDays: 30, id: null }
]
],
apiEndPoints: [
{ name: '接口', path: 'https://', method: 'POST', id: null }
],
})
......@@ -229,7 +285,7 @@ const addApiPackages = () => {
formData.value.apiPackages.push({name: '套餐', times: 1, price: 1, validDays: 30, id: null});
}
const delParent = (index) => {
const delapiPackage = (index) => {
formData.value.apiPackages.splice(index, 1);
}
//
......@@ -260,6 +316,8 @@ const open = async (type: string, id?: number) => {
await loadCategory() // 打开时加载分类
await getAllApiEndPointsList()
// 修改时，设置数据
if (id) {
formLoading.value = true
......@@ -321,11 +379,53 @@ const resetForm = () => {
remark: '',
apiPackages: [
{ name: '套餐', times: 1, price: 1, validDays: 30, id: null }
]
],
apiEndPoints: [
{ name: '接口', path: 'https://', method: 'POST', id: null }
],
}
formRef.value?.resetFields()
}
// -----------------------------------------------添加接口start----------------------------------------------------------------------------------------
const apiEndPointList = ref<ApiEndpoint[]>([])
const getAllApiEndPointsList = async () => {
try {
apiEndPointList.value = await ApiEndpointApi.getEndpointList()
} catch (e) {
console.error('加载接口失败', e)
}
}
// 添加一行
const addApiEndpoint = () => {
formData.value.apiEndPoints.push({
id: null,
name: "",
path: "",
method: ""
})
}
// 删除一行
const removeApiEndpoint = (index: number) => {
formData.value.apiEndPoints.splice(index, 1)
}
// 选择接口时自动填充 name、path、method
const onApiSelected = (id: number, row: any) => {
const api = apiEndPointList.value.find(item => item.id === id)
if (api) {
row.name = api.name
row.path = api.path
row.method = api.method
}
}
</script>
<style scoped>
......
src/views/apihub/apiendpoint/ApiEndpointForm.vue 0 → 100644
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="接口名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入接口名称" />
</el-form-item>
<el-form-item label="接口路径" prop="path">
<el-input v-model="formData.path" placeholder="请输入接口路径" />
</el-form-item>
<el-form-item label="请求方式" prop="method">
<el-input v-model="formData.method" placeholder="请输入请求方式" />
</el-form-item>
<!-- <el-form-item label="参数定义(JSON)" prop="params">-->
<!-- <el-input v-model="formData.params" placeholder="请输入参数定义(JSON)" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="返回结果示例" prop="response">-->
<!-- <el-input v-model="formData.response" placeholder="请输入返回结果示例" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="鉴权方式，例如 API_KEY/OAUTH" prop="authType">-->
<!-- <el-select v-model="formData.authType" placeholder="请选择鉴权方式，例如 API_KEY/OAUTH">-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="接口级限流规则，例如 100 QPS" prop="rateLimit">-->
<!-- <el-input v-model="formData.rateLimit" placeholder="请输入接口级限流规则，例如 100 QPS" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备注" prop="remark">-->
<!-- <el-input v-model="formData.remark" placeholder="请输入备注" />-->
<!-- </el-form-item>-->
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ApiEndpointApi, ApiEndpoint } from '@/api/apihub/apiendpoint'
/** API 接口 表单 */
defineOptions({ name: 'ApiEndpointForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: undefined,
path: undefined,
method: undefined
// params: undefined,
// response: undefined,
// authType: undefined,
// rateLimit: undefined,
// remark: undefined
})
const formRules = reactive({
name: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
path: [{ required: true, message: '接口路径不能为空', trigger: 'blur' }],
method: [{ required: true, message: '请求方式: GET/POST/PUT/DELETE不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ApiEndpointApi.getApiEndpoint(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ApiEndpoint
if (formType.value === 'create') {
await ApiEndpointApi.createApiEndpoint(data)
message.success(t('common.createSuccess'))
} else {
await ApiEndpointApi.updateApiEndpoint(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
path: undefined,
method: undefined
// params: undefined,
// response: undefined,
// authType: undefined,
// rateLimit: undefined,
// remark: undefined
}
formRef.value?.resetFields()
}
</script>
src/views/apihub/apiendpoint/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="接口名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入接口名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<!-- <el-form-item label="接口路径，全路径例如 https://phsl.lijinqi.com/openn_ip/xxx" prop="path">-->
<!-- <el-input-->
<!-- v-model="queryParams.path"-->
<!-- placeholder="请输入接口路径，全路径例如 https://phsl.lijinqi.com/openn_ip/xxx"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="请求方式: GET/POST/PUT/DELETE" prop="method">-->
<!-- <el-input-->
<!-- v-model="queryParams.method"-->
<!-- placeholder="请输入请求方式: GET/POST/PUT/DELETE"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="参数定义(JSON)" prop="params">-->
<!-- <el-input-->
<!-- v-model="queryParams.params"-->
<!-- placeholder="请输入参数定义(JSON)"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="返回结果示例" prop="response">-->
<!-- <el-input-->
<!-- v-model="queryParams.response"-->
<!-- placeholder="请输入返回结果示例"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="鉴权方式，例如 API_KEY/OAUTH" prop="authType">-->
<!-- <el-select-->
<!-- v-model="queryParams.authType"-->
<!-- placeholder="请选择鉴权方式，例如 API_KEY/OAUTH"-->
<!-- clearable-->
<!-- class="!w-240px"-->
<!-- >-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="接口级限流规则，例如 100 QPS" prop="rateLimit">-->
<!-- <el-input-->
<!-- v-model="queryParams.rateLimit"-->
<!-- placeholder="请输入接口级限流规则，例如 100 QPS"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备注" prop="remark">-->
<!-- <el-input-->
<!-- v-model="queryParams.remark"-->
<!-- placeholder="请输入备注"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="创建时间" prop="createTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.createTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['apihub:api-endpoint:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['apihub:api-endpoint:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['apihub:api-endpoint:delete']"
>
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
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="接口ID" align="center" prop="id" />-->
<el-table-column label="接口名称" align="center" prop="name" />
<el-table-column label="接口路径" align="center" prop="path" width="460px" />
<el-table-column label="请求方式" align="center" prop="method" />
<!-- <el-table-column label="参数定义(JSON)" align="center" prop="params" />-->
<!-- <el-table-column label="返回结果示例" align="center" prop="response" />-->
<!-- <el-table-column label="鉴权方式，例如 API_KEY/OAUTH" align="center" prop="authType" />-->
<!-- <el-table-column label="接口级限流规则，例如 100 QPS" align="center" prop="rateLimit" />-->
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['apihub:api-endpoint:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['apihub:api-endpoint:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ApiEndpointForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { ApiEndpointApi, ApiEndpoint } from '@/api/apihub/apiendpoint'
import ApiEndpointForm from './ApiEndpointForm.vue'
/** API 接口 列表 */
defineOptions({ name: 'ApiEndpoint' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ApiEndpoint[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
path: undefined,
method: undefined,
params: undefined,
response: undefined,
authType: undefined,
rateLimit: undefined,
remark: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ApiEndpointApi.getApiEndpointPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ApiEndpointApi.deleteApiEndpoint(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 批量删除API 接口 */
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
await message.delConfirm()
await ApiEndpointApi.deleteApiEndpointList(checkedIds.value);
message.success(t('common.delSuccess'))
await getList();
} catch {}
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: ApiEndpoint[]) => {
checkedIds.value = records.map((item) => item.id);
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ApiEndpointApi.exportApiEndpoint(queryParams)
download.excel(data, 'API 接口.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/apihub/apiendpointrel/ApiEndpointRelForm.vue 0 → 100644
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="API应用名称" prop="apiName">
<el-input v-model="formData.apiName" readonly />
</el-form-item>
<el-form-item label="接口ID，关联 apihub_api_endpoint.id" prop="apiEndpointName">
<el-input v-model="formData.apiEndpointName" readonly />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ApiEndpointRelApi, ApiEndpointRel } from '@/api/apihub/apiendpointrel'
/** API 应用与接口关系 表单 */
defineOptions({ name: 'ApiEndpointRelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
apiId: undefined,
apiEndpointId: undefined,
apiName: undefined,
apiEndpointName: undefined
})
const formRules = reactive({
apiId: [{ required: true, message: 'API 应用ID，关联 apihub_api.id不能为空', trigger: 'blur' }],
apiEndpointId: [{ required: true, message: '接口ID，关联 apihub_api_endpoint.id不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ApiEndpointRelApi.getApiEndpointRel(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ApiEndpointRel
if (formType.value === 'create') {
await ApiEndpointRelApi.createApiEndpointRel(data)
message.success(t('common.createSuccess'))
} else {
await ApiEndpointRelApi.updateApiEndpointRel(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
apiId: undefined,
apiEndpointId: undefined,
apiName: undefined,
apiEndpointName: undefined
}
formRef.value?.resetFields()
}
</script>
src/views/apihub/apiendpointrel/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="API应用名称" prop="apiId" label-width="100px">
<el-input
v-model="queryParams.apiName"
placeholder="请输入API应用名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="接口名称" prop="apiEndpointId">
<el-input
v-model="queryParams.apiEndpointName"
placeholder="请输入接口名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<!-- <el-form-item label="创建时间" prop="createTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.createTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['apihub:api-endpoint-rel:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['apihub:api-endpoint-rel:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['apihub:api-endpoint-rel:delete']"
>
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
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="API应用名称" align="center" prop="apiName" />
<el-table-column label="接口名称" align="center" prop="apiEndpointName" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['apihub:api-endpoint-rel:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['apihub:api-endpoint-rel:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ApiEndpointRelForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { ApiEndpointRelApi, ApiEndpointRel } from '@/api/apihub/apiendpointrel'
import ApiEndpointRelForm from './ApiEndpointRelForm.vue'
/** API 应用与接口关系 列表 */
defineOptions({ name: 'ApiEndpointRel' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ApiEndpointRel[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
apiId: undefined,
apiEndpointId: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ApiEndpointRelApi.getApiEndpointRelPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ApiEndpointRelApi.deleteApiEndpointRel(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 批量删除API 应用与接口关系 */
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
await message.delConfirm()
await ApiEndpointRelApi.deleteApiEndpointRelList(checkedIds.value);
message.success(t('common.delSuccess'))
await getList();
} catch {}
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: ApiEndpointRel[]) => {
checkedIds.value = records.map((item) => item.id);
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ApiEndpointRelApi.exportApiEndpointRel(queryParams)
download.excel(data, 'API 应用与接口关系.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/apihub/appcredential/AppCredentialForm.vue 0 → 100644
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="AppId" prop="appId">
<el-input v-model="formData.appId" readonly />
</el-form-item>
<el-form-item label="AppSecret" prop="appSecret">
<el-input v-model="formData.appSecret" readonly/>
</el-form-item>
<el-form-item label="用户ID" prop="userId">
<el-input v-model="formData.userId" readonly />
</el-form-item>
<el-form-item label="用户手机号" prop="userId">
<el-input v-model="formData.userMobile" readonly />
</el-form-item>
</el-form>
<template #footer>
<!-- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>-->
<el-button @click="dialogVisible = false">关闭窗口</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { AppCredentialApi, AppCredential } from '@/api/apihub/appcredential'
/** 用户密钥信息 表单 */
defineOptions({ name: 'AppCredentialForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
appId: undefined,
appSecret: undefined,
userId: undefined,
userMobile: undefined
})
const formRules = reactive({
appId: [{ required: true, message: '应用ID，唯一不能为空', trigger: 'blur' }],
appSecret: [{ required: true, message: 'AES加密后的应用密钥不能为空', trigger: 'blur' }],
userId: [{ required: true, message: '所属用户ID不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await AppCredentialApi.getAppCredential(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as AppCredential
if (formType.value === 'create') {
await AppCredentialApi.createAppCredential(data)
message.success(t('common.createSuccess'))
} else {
await AppCredentialApi.updateAppCredential(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
appId: undefined,
appSecret: undefined,
userId: undefined,
userMobile: undefined
}
formRef.value?.resetFields()
}
</script>
src/views/apihub/appcredential/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<!-- <el-form-item label="应用ID，唯一" prop="appId">-->
<!-- <el-input-->
<!-- v-model="queryParams.appId"-->
<!-- placeholder="请输入应用ID，唯一"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="AES加密后的应用密钥" prop="appSecret">-->
<!-- <el-input-->
<!-- v-model="queryParams.appSecret"-->
<!-- placeholder="请输入AES加密后的应用密钥"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="用户手机号" prop="userMobile" label-width="100px">
<el-input
v-model="queryParams.userMobile"
placeholder="请输入用户手机号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<!-- <el-form-item label="创建时间" prop="createTime">-->
<!-- <el-date-picker-->
<!-- v-model="queryParams.createTime"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-220px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['apihub:app-credential:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['apihub:app-credential:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
<el-button
type="danger"
plain
:disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch"
v-hasPermi="['apihub:app-credential:delete']"
>
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
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="用户ID" align="center" prop="userId" />
<el-table-column label="用户手机号" align="center" prop="userMobile" />
<el-table-column label="AppId" align="center" prop="appId" />
<el-table-column label="AppSecret" align="center" prop="appSecret" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['apihub:app-credential:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['apihub:app-credential:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<AppCredentialForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { AppCredentialApi, AppCredential } from '@/api/apihub/appcredential'
import AppCredentialForm from './AppCredentialForm.vue'
/** 用户密钥信息 列表 */
defineOptions({ name: 'AppCredential' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<AppCredential[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userMobile: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await AppCredentialApi.getAppCredentialPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await AppCredentialApi.deleteAppCredential(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 批量删除用户密钥信息 */
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
await message.delConfirm()
await AppCredentialApi.deleteAppCredentialList(checkedIds.value);
message.success(t('common.delSuccess'))
await getList();
} catch {}
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: AppCredential[]) => {
checkedIds.value = records.map((item) => item.id);
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await AppCredentialApi.exportAppCredential(queryParams)
download.excel(data, '用户密钥信息.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/apihub/userapiusage/UserApiUsageForm.vue
......@@ -7,14 +7,23 @@
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="用户ID" prop="userId">
<el-input v-model="formData.userId" placeholder="请输入用户ID" />
<el-form-item label="用户手机号" prop="userId">
<el-input v-model="formData.userMobile" placeholder="请输入用户手机号" />
</el-form-item>
<el-form-item label="API ID" prop="apiId">
<el-input v-model="formData.apiId" placeholder="请输入API ID" />
<el-form-item label="api名称" prop="apiName">
<el-input v-model="formData.apiName" placeholder="请输入api名称" />
</el-form-item>
<el-form-item label="购买总次数" prop="totalTimes">
<el-input v-model="formData.totalTimes" placeholder="请输入购买总次数" />
<el-form-item label="套餐名称" prop="packageName">
<el-input v-model="formData.packageName" placeholder="请输入套餐名称" />
</el-form-item>
<el-form-item label="套餐单价" prop="packagePrice">
<el-input v-model="formData.packagePrice" placeholder="请输入套餐单价" />
</el-form-item>
<el-form-item label="套餐包 使用次数" prop="packageTimes">
<el-input v-model="formData.packageTimes" placeholder="请输入套餐包 使用次数" />
</el-form-item>
<el-form-item label="有效时长" prop="packageValidDays">
<el-input v-model="formData.packageValidDays" placeholder="请输入有效时长" />
</el-form-item>
<el-form-item label="已使用次数" prop="usedTimes">
<el-input v-model="formData.usedTimes" placeholder="请输入已使用次数" />
......@@ -40,7 +49,7 @@
<script setup lang="ts">
import { UserApiUsageApi, UserApiUsage } from '@/api/apihub/userapiusage'
/** 用户 API 使用统计 表单 */
/** 用户API管理 表单 */
defineOptions({ name: 'UserApiUsageForm' })
const { t } = useI18n() // 国际化
......@@ -54,15 +63,24 @@ const formData = ref({
id: undefined,
userId: undefined,
apiId: undefined,
totalTimes: undefined,
apiName: undefined,
packageId: undefined,
packageName: undefined,
packagePrice: undefined,
packageTimes: undefined,
packageValidDays: undefined,
usedTimes: undefined,
expireTime: undefined,
userMobile: undefined,
remark: undefined
})
const formRules = reactive({
userId: [{ required: true, message: '用户ID不能为空', trigger: 'blur' }],
apiId: [{ required: true, message: 'API ID不能为空', trigger: 'blur' }],
totalTimes: [{ required: true, message: '购买总次数不能为空', trigger: 'blur' }],
apiName: [{ required: true, message: 'api名称不能为空', trigger: 'blur' }],
packageId: [{ required: true, message: '购买的套餐ID不能为空', trigger: 'blur' }],
packageTimes: [{ required: true, message: '套餐包 使用次数不能为空', trigger: 'blur' }],
packageValidDays: [{ required: true, message: '有效时长不能为空', trigger: 'blur' }],
usedTimes: [{ required: true, message: '已使用次数不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
......@@ -115,7 +133,13 @@ const resetForm = () => {
id: undefined,
userId: undefined,
apiId: undefined,
totalTimes: undefined,
userMobile: undefined,
apiName: undefined,
packageId: undefined,
packageName: undefined,
packagePrice: undefined,
packageTimes: undefined,
packageValidDays: undefined,
usedTimes: undefined,
expireTime: undefined,
remark: undefined
......
src/views/apihub/userapiusage/index.vue
......@@ -8,55 +8,37 @@
:inline="true"
label-width="68px"
>
<el-form-item label="用户ID" prop="userId">
<el-form-item label="用户手机号" prop="userMobile" label-width="100px">
<el-input
v-model="queryParams.userId"
placeholder="请输入用户ID"
v-model="queryParams.userMobile"
placeholder="请输入用户手机号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="API ID" prop="apiId">
<el-form-item label="api名称" prop="apiName">
<el-input
v-model="queryParams.apiId"
placeholder="请输入API ID"
v-model="queryParams.apiName"
placeholder="请输入api名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="购买总次数" prop="totalTimes">
<el-form-item label="套餐名称" prop="packageName">
<el-input
v-model="queryParams.totalTimes"
placeholder="请输入购买总次数"
v-model="queryParams.packageName"
placeholder="请输入套餐名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-220px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['apihub:user-api-usage:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
......@@ -90,11 +72,12 @@
@selection-change="handleRowCheckboxChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="记录ID" align="center" prop="id" />
<el-table-column label="用户ID" align="center" prop="userId" />
<el-table-column label="API ID" align="center" prop="apiId" />
<el-table-column label="购买总次数" align="center" prop="totalTimes" />
<el-table-column label="已使用次数" align="center" prop="usedTimes" />
<el-table-column label="用户手机号" align="center" prop="userMobile" 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" />
<el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
<el-table-column
label="过期时间"
align="center"
......@@ -102,14 +85,13 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<!-- <el-table-column-->
<!-- label="购买时间"-->
<!-- align="center"-->
<!-- prop="createTime"-->
<!-- :formatter="dateFormatter"-->
<!-- width="180px"-->
<!-- />-->
<el-table-column label="操作" align="center" min-width="120px">
<template #default="scope">
<el-button
......@@ -151,7 +133,7 @@ import download from '@/utils/download'
import { UserApiUsageApi, UserApiUsage } from '@/api/apihub/userapiusage'
import UserApiUsageForm from './UserApiUsageForm.vue'
/** 用户 API 使用统计 列表 */
/** 用户API管理 列表 */
defineOptions({ name: 'UserApiUsage' })
const message = useMessage() // 消息弹窗
......@@ -163,10 +145,9 @@ const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: undefined,
apiId: undefined,
totalTimes: undefined,
createTime: []
userMobile: undefined,
apiName: undefined,
packageName: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
......@@ -214,7 +195,7 @@ const handleDelete = async (id: number) => {
} catch {}
}
/** 批量删除用户 API 使用统计 */
/** 批量删除用户API管理 */
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
......@@ -238,7 +219,7 @@ const handleExport = async () => {
// 发起导出
exportLoading.value = true
const data = await UserApiUsageApi.exportUserApiUsage(queryParams)
download.excel(data, '用户 API 使用统计.xls')
download.excel(data, '用户API管理.xls')
} catch {
} finally {
exportLoading.value = false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment