Skip to content

phsl / admin

Go to a project
Commit 5576e65f by lijinqi
Options

管理端-Api订单管理已完成（搜索未完成） 

管理端-用户Api管理已完成
客户端-api订单已完成
客户端-api资源已完成
parent e1c9423f
Showing with 253 additions and 86 deletions
src/api/apihub/apiendpoint/index.ts
...@@ -13,6 +13,13 @@ export interface ApiEndpoint { ...@@ -13,6 +13,13 @@ export interface ApiEndpoint {
rateLimit: string; // 接口级限流规则，例如 100 QPS rateLimit: string; // 接口级限流规则，例如 100 QPS
remark: string; // 备注 remark: string; // 备注
} }
export interface IndustryApplication {
id: number; // 行业应用ID
title?: string; // 行业应用名称
image?: string; // 缩略图
}
// API 接口 API // API 接口 API
export const ApiEndpointApi = { export const ApiEndpointApi = {
...@@ -55,5 +62,10 @@ export const ApiEndpointApi = { ...@@ -55,5 +62,10 @@ export const ApiEndpointApi = {
/** 查询所有接口 */ /** 查询所有接口 */
getEndpointList: async (): Promise<ApiEndpoint[]> => { getEndpointList: async (): Promise<ApiEndpoint[]> => {
return await request.get({ url: `/apihub/api-endpoint/list` }) return await request.get({ url: `/apihub/api-endpoint/list` })
},
// 查询行业应用
getAllIndustryApplication: async (): Promise<IndustryApplication[]> => {
return await request.get({ url: `/biz/industry-application/list` })
} }
} }
src/views/apihub/api/ApiForm.vue
...@@ -238,7 +238,7 @@ const formData = ref({ ...@@ -238,7 +238,7 @@ const formData = ref({
// 自定义校验器 // 自定义校验器
const validatePrice: FormItemRule['validator'] = (rule, value, callback) => { const validatePrice: FormItemRule['validator'] = (_rule, value, callback) => {
if (value === undefined || value === null) { if (value === undefined || value === null) {
return callback(new Error('请填写套餐价格')) return callback(new Error('请填写套餐价格'))
} }
...@@ -248,7 +248,7 @@ const validatePrice: FormItemRule['validator'] = (rule, value, callback) => { ...@@ -248,7 +248,7 @@ const validatePrice: FormItemRule['validator'] = (rule, value, callback) => {
callback() callback()
} }
const validateTimes: FormItemRule['validator'] = (rule, value, callback) => { const validateTimes: FormItemRule['validator'] = (_rule, value, callback) => {
if (value === undefined || value === null) { if (value === undefined || value === null) {
return callback(new Error('请填写套餐次数')) return callback(new Error('请填写套餐次数'))
} }
...@@ -322,7 +322,11 @@ const open = async (type: string, id?: number) => { ...@@ -322,7 +322,11 @@ const open = async (type: string, id?: number) => {
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await ApiApi.getApi(id) // 调用 getApi 后做一次数据清洗
const res = await ApiApi.getApi(id)
res.detail = res.detail ?? ""
res.doc = res.doc ?? ""
formData.value = res
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -425,6 +429,7 @@ const onApiSelected = (id: number, row: any) => { ...@@ -425,6 +429,7 @@ const onApiSelected = (id: number, row: any) => {
row.method = api.method row.method = api.method
} }
} }
// -----------------------------------------------添加接口End---------------------------------------------------------------------------------------
</script> </script>
......
src/views/apihub/apiendpoint/ApiEndpointForm.vue
...@@ -16,7 +16,50 @@ ...@@ -16,7 +16,50 @@
<el-form-item label="请求方式" prop="method"> <el-form-item label="请求方式" prop="method">
<el-input v-model="formData.method" placeholder="请输入请求方式" /> <el-input v-model="formData.method" placeholder="请输入请求方式" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="参数定义(JSON)" prop="params">-->
<el-form-item label="关联行业应用">
<!-- 添加接口按钮独占一行 -->
<div style="margin-bottom: 10px;">
<el-button type="primary" size="small" @click="addIndustryApplication">
添加行业应用
</el-button>
</div>
<!-- 接口表格，每个接口占一行 -->
<table class="table">
<thead>
<tr>
<th style="width: 80px">行业应用</th>
<th style="width: 40px">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(i, index) in formData.industryApplications" :key="index">
<td>
<el-select
v-model="i.id"
placeholder="请选择行业应用"
@change="(val) => onIndustryApplicationSelected(val, i)"
>
<el-option
v-for="item in industryApplicationList"
:key="item.id"
:label="item.title"
:value="item.id"
/>
</el-select>
</td>
<td>
<el-button type="danger" size="small" @click="removeApiEndpoint(index)">
删除
</el-button>
</td>
</tr>
</tbody>
</table>
</el-form-item>
<!-- <el-form-item label="参数定义(JSON)" prop="params">-->
<!-- <el-input v-model="formData.params" placeholder="请输入参数定义(JSON)" />--> <!-- <el-input v-model="formData.params" placeholder="请输入参数定义(JSON)" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="返回结果示例" prop="response">--> <!-- <el-form-item label="返回结果示例" prop="response">-->
...@@ -41,7 +84,7 @@ ...@@ -41,7 +84,7 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ApiEndpointApi, ApiEndpoint } from '@/api/apihub/apiendpoint' import { ApiEndpointApi, ApiEndpoint, IndustryApplication} from '@/api/apihub/apiendpoint'
/** API 接口 表单 */ /** API 接口 表单 */
defineOptions({ name: 'ApiEndpointForm' }) defineOptions({ name: 'ApiEndpointForm' })
...@@ -57,7 +100,10 @@ const formData = ref({ ...@@ -57,7 +100,10 @@ const formData = ref({
id: undefined, id: undefined,
name: undefined, name: undefined,
path: undefined, path: undefined,
method: undefined method: undefined,
industryApplications: [
{ title: 'AI诗词', image: 'https://', id: null }
]
// params: undefined, // params: undefined,
// response: undefined, // response: undefined,
// authType: undefined, // authType: undefined,
...@@ -77,11 +123,19 @@ const open = async (type: string, id?: number) => { ...@@ -77,11 +123,19 @@ const open = async (type: string, id?: number) => {
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
resetForm() resetForm()
await getAllIndustryApplicationList()
// 修改时，设置数据 // 修改时，设置数据
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await ApiEndpointApi.getApiEndpoint(id) const res = await ApiEndpointApi.getApiEndpoint(id)
// 确保 industryApplications 至少有一行
if (!res.industryApplications || res.industryApplications.length === 0) {
res.industryApplications = [{ title: '', image: '', id: null }]
}
formData.value = res
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
...@@ -119,7 +173,10 @@ const resetForm = () => { ...@@ -119,7 +173,10 @@ const resetForm = () => {
id: undefined, id: undefined,
name: undefined, name: undefined,
path: undefined, path: undefined,
method: undefined method: undefined,
industryApplications: [
{ title: 'AI诗词', image: 'https://', id: null }
]
// params: undefined, // params: undefined,
// response: undefined, // response: undefined,
// authType: undefined, // authType: undefined,
...@@ -128,4 +185,93 @@ const resetForm = () => { ...@@ -128,4 +185,93 @@ const resetForm = () => {
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
// -----------------------------------------------添加关联行业应用start----------------------------------------------------------------------------------------
const industryApplicationList = ref<IndustryApplication[]>([])
const getAllIndustryApplicationList = async () => {
try {
industryApplicationList.value = await ApiEndpointApi.getAllIndustryApplication()
} catch (e) {
console.error('加载行业应用失败', e)
}
}
// 添加一行
const addIndustryApplication = () => {
formData.value.industryApplications.push({
id: null,
title: "",
image: "",
})
}
// 删除一行
const removeApiEndpoint = (index: number) => {
formData.value.industryApplications.splice(index, 1)
}
// 选择接口时自动填充 name、path、method
const onIndustryApplicationSelected = (id: number, row: any) => {
const industryApplication = industryApplicationList.value.find(item => item.id === id)
if (industryApplication) {
row.title = industryApplication.title
row.image = industryApplication.image
}
}
// -----------------------------------------------添加关联行业应用End---------------------------------------------------------------------------------------
</script> </script>
<style scoped>
.table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* 固定布局，按列宽分配 */
}
.table th,
.table td {
text-align: center;
word-break: break-word; /* 自动换行，防止文字撑开 */
}
/* 资源包名称列 */
.table th:first-child,
.table td:first-child {
min-width: 200px; /* 至少 200px */
text-align: left;
}
/* 价格、数量、有效期列 */
.table th:nth-child(2),
.table td:nth-child(2),
.table th:nth-child(3),
.table td:nth-child(3),
.table th:nth-child(4),
.table td:nth-child(4) {
width: 100px;
}
/* 操作列 */
.table th:last-child,
.table td:last-child {
width: 160px; /* 缩小操作列 */
}
/* 表格行高度、上下间距 */
.table tbody tr {
height: auto; /* 自适应高度 */
}
.table tbody td {
padding: 10px 5px;
vertical-align: middle;
}
</style>
src/views/apihub/apiorder/ApiOrderForm.vue
...@@ -7,14 +7,11 @@ ...@@ -7,14 +7,11 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<el-form-item label="下单用户ID" prop="userId"> <el-form-item label="用户手机" prop="userId">
<el-input v-model="formData.userId" placeholder="请输入下单用户ID" /> <el-input v-model="formData.userMobile" placeholder="请输入用户手机" />
</el-form-item> </el-form-item>
<el-form-item label="购买的API ID" prop="apiId"> <el-form-item label="API应用" prop="apiId">
<el-input v-model="formData.apiId" placeholder="请输入购买的API ID" /> <el-input v-model="formData.apiName" placeholder="请输入API应用" />
</el-form-item>
<el-form-item label="购买的套餐ID" prop="packageId">
<el-input v-model="formData.packageId" placeholder="请输入购买的套餐ID" />
</el-form-item> </el-form-item>
<el-form-item label="订单编号" prop="orderNo"> <el-form-item label="订单编号" prop="orderNo">
<el-input v-model="formData.orderNo" placeholder="请输入订单编号" /> <el-input v-model="formData.orderNo" placeholder="请输入订单编号" />
......
src/views/apihub/apiorder/index.vue
...@@ -8,33 +8,33 @@ ...@@ -8,33 +8,33 @@
:inline="true" :inline="true"
label-width="68px" label-width="68px"
> >
<el-form-item label="下单用户ID" prop="userId"> <el-form-item label="用户手机号" prop="userId">
<el-input <el-input
v-model="queryParams.userId" v-model="queryParams.userId"
placeholder="请输入下单用户ID" placeholder="请输入用户手机号"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="购买的API ID" prop="apiId"> <el-form-item label="API应用" prop="apiName">
<el-input <el-input
v-model="queryParams.apiId" v-model="queryParams.apiName"
placeholder="请输入购买的API ID" placeholder="请输入API应用"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="购买的套餐ID" prop="packageId">
<el-input
v-model="queryParams.packageId"
placeholder="请输入购买的套餐ID"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="套餐名称" prop="packageId">-->
<!-- <el-input-->
<!-- v-model="queryParams.packageId"-->
<!-- placeholder="请输入套餐名称"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="订单编号" prop="orderNo"> <el-form-item label="订单编号" prop="orderNo">
<el-input <el-input
v-model="queryParams.orderNo" v-model="queryParams.orderNo"
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="订单状态：0=待支付,1=已支付,2=已取消" prop="status"> <el-form-item label="订单状态" prop="status">
<el-select <el-select
v-model="queryParams.status" v-model="queryParams.status"
placeholder="请选择订单状态：0=待支付,1=已支付,2=已取消" placeholder="请选择订单状态：0=待支付,1=已支付,2=已取消"
...@@ -54,46 +54,46 @@ ...@@ -54,46 +54,46 @@
<el-option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="支付订单编号" prop="payOrderId"> <!-- <el-form-item label="支付订单编号" prop="payOrderId">-->
<el-input <!-- <el-input-->
v-model="queryParams.payOrderId" <!-- v-model="queryParams.payOrderId"-->
placeholder="请输入支付订单编号" <!-- placeholder="请输入支付订单编号"-->
clearable <!-- clearable-->
@keyup.enter="handleQuery" <!-- @keyup.enter="handleQuery"-->
class="!w-240px" <!-- class="!w-240px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="订单支付时间" prop="payTime"> <!-- <el-form-item label="订单支付时间" prop="payTime">-->
<el-date-picker <!-- <el-date-picker-->
v-model="queryParams.payTime" <!-- v-model="queryParams.payTime"-->
value-format="YYYY-MM-DD HH:mm:ss" <!-- value-format="YYYY-MM-DD HH:mm:ss"-->
type="daterange" <!-- type="daterange"-->
start-placeholder="开始日期" <!-- start-placeholder="开始日期"-->
end-placeholder="结束日期" <!-- end-placeholder="结束日期"-->
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" <!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
class="!w-220px" <!-- class="!w-220px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="支付成功的支付渠道" prop="payChannelCode"> <!-- <el-form-item label="支付成功的支付渠道" prop="payChannelCode">-->
<el-input <!-- <el-input-->
v-model="queryParams.payChannelCode" <!-- v-model="queryParams.payChannelCode"-->
placeholder="请输入支付成功的支付渠道" <!-- placeholder="请输入支付成功的支付渠道"-->
clearable <!-- clearable-->
@keyup.enter="handleQuery" <!-- @keyup.enter="handleQuery"-->
class="!w-240px" <!-- class="!w-240px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="创建时间" prop="createTime"> <!-- <el-form-item label="创建时间" prop="createTime">-->
<el-date-picker <!-- <el-date-picker-->
v-model="queryParams.createTime" <!-- v-model="queryParams.createTime"-->
value-format="YYYY-MM-DD HH:mm:ss" <!-- value-format="YYYY-MM-DD HH:mm:ss"-->
type="daterange" <!-- type="daterange"-->
start-placeholder="开始日期" <!-- start-placeholder="开始日期"-->
end-placeholder="结束日期" <!-- end-placeholder="结束日期"-->
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" <!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
class="!w-220px" <!-- class="!w-220px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <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 @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
...@@ -138,13 +138,17 @@ ...@@ -138,13 +138,17 @@
@selection-change="handleRowCheckboxChange" @selection-change="handleRowCheckboxChange"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="订单ID" align="center" prop="id" /> <!-- <el-table-column label="订单ID" align="center" prop="id" />-->
<el-table-column label="下单用户ID" align="center" prop="userId" /> <el-table-column label="用户手机号" align="center" prop="userMobile" />
<el-table-column label="购买的API ID" align="center" prop="apiId" /> <el-table-column label="API应用" align="center" prop="apiName" />
<el-table-column label="购买的套餐ID" align="center" prop="packageId" /> <el-table-column label="套餐名称" align="center" prop="packageName" />
<el-table-column label="订单编号" align="center" prop="orderNo" /> <el-table-column label="订单编号" align="center" prop="orderNo" />
<el-table-column label="订单金额（元）" align="center" prop="amount" /> <el-table-column label="订单金额（元）" align="center" prop="costPrice">
<el-table-column label="订单状态：0=待支付,1=已支付,2=已取消" align="center" prop="status" /> <template #default="scope">
{{ (scope.row.costPrice / 100).toFixed(2) }}元
</template>
</el-table-column>
<el-table-column label="订单状态" align="center" prop="statusName" />
<el-table-column label="支付订单编号" align="center" prop="payOrderId" /> <el-table-column label="支付订单编号" align="center" prop="payOrderId" />
<el-table-column <el-table-column
label="订单支付时间" label="订单支付时间"
...@@ -153,7 +157,7 @@ ...@@ -153,7 +157,7 @@
:formatter="dateFormatter" :formatter="dateFormatter"
width="180px" width="180px"
/> />
<el-table-column label="支付成功的支付渠道" align="center" prop="payChannelCode" /> <el-table-column label="支付状态" align="center" prop="payStatusName" />
<el-table-column <el-table-column
label="订单完成时间" label="订单完成时间"
align="center" align="center"
......
src/views/apihub/userapiusage/index.vue
...@@ -76,8 +76,11 @@ ...@@ -76,8 +76,11 @@
<el-table-column label="api名称" align="center" prop="apiName" 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="packageName" width="150px" />
<el-table-column label="套餐总量" align="center" prop="packageTimes" /> <el-table-column label="套餐总量" align="center" prop="packageTimes" />
<el-table-column label="有效时长" align="center" prop="packageValidDays" /> <el-table-column label="有效时长" align="center" prop="packageValidDays">
<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 <el-table-column
label="过期时间" label="过期时间"
align="center" align="center"
...@@ -85,13 +88,13 @@ ...@@ -85,13 +88,13 @@
:formatter="dateFormatter" :formatter="dateFormatter"
width="180px" width="180px"
/> />
<!-- <el-table-column--> <el-table-column
<!-- label="购买时间"--> label="购买时间"
<!-- align="center"--> align="center"
<!-- prop="createTime"--> prop="createTime"
<!-- :formatter="dateFormatter"--> :formatter="dateFormatter"
<!-- width="180px"--> width="180px"
<!-- />--> />
<el-table-column label="操作" align="center" min-width="120px"> <el-table-column label="操作" align="center" min-width="120px">
<template #default="scope"> <template #default="scope">
<el-button <el-button
......
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