api使用日志完成

src/api/apicalllog.js

+import request from '@/utils/request.js'
+
+// 查询api使用记录
+export function getApiCallLog (query) {
+  return request({
+    url: '/apihub/api-call-log/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询api使用记录详细
+export function getApiCallLogDetail (id) {
+  return request({
+    url: '/apihub/api-call-log/' + id,
+    method: 'get'
+  })
+}
+

src/router/index.js

@@ -232,6 +232,18 @@ export const constantRoutes = [
         component: ManageLayout,
         children: [
             {
+                path: 'apiCallLog',
+                component: () => import('@/views/console/apiCallLog.vue'),
+                name: 'ApiCallLog',
+                meta: {title: 'API使用记录', icon: 'order'}
+            }
+        ]
+    },
+    {
+        path: '/console',
+        component: ManageLayout,
+        children: [
+            {
                 path: 'apiResources',
                 component: () => import('@/views/console/apiResources.vue'),
                 name: 'ApiResources',

src/views/console/apiCallLog.vue

+<template>
+  <div class="app-container">
+    <el-form
+        :model="queryParams"
+        ref="queryRef"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+    >
+      <el-form-item label="接口名称" prop="apiEndpointName">
+        <el-input
+            v-model="queryParams.apiEndpointName"
+            placeholder="请输入接口名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+        >搜索
+        </el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+        v-loading="loading"
+        :data="apiCallLogList"
+        :max-height="620"
+    >
+      <!--<el-table-column type="selection" width="45" align="center"/>-->
+      <!--<el-table-column label="序号" align="center" prop="id"/>-->
+      <el-table-column label="接口名称" align="center" prop="apiEndpointName"/>
+      <el-table-column label="请求方式" align="center" prop="method"/>
+      <el-table-column label="请求接口" align="center" prop="path"/>
+      <el-table-column label="请求参数" align="center" prop="requestParams" width="200">
+        <template #default="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.requestParams" placement="top">
+            <div class="ellipsis-text">{{ scope.row.requestParams }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="返回结果" align="center" prop="responseParams" width="200">
+        <template #default="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.responseParams" placement="top">
+            <div class="ellipsis-text">{{ scope.row.responseParams }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="请求时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+<!--      <el-table-column-->
+<!--          label="操作"-->
+<!--          align="center"-->
+<!--          fixed="right"-->
+<!--          class-name="small-padding fixed-width">-->
+<!--        <template #default="scope">-->
+<!--          <el-button-->
+<!--              link-->
+<!--              type="primary"-->
+<!--              @click="handleDetails(scope.row)"-->
+<!--          >-->
+<!--            详情-->
+<!--          </el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+    </el-table>
+
+    <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+    />
+
+    <!-- 添加或修改管理-需求单管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <div>
+        <div class="info-block">
+          <div class="info-item flex-align-center flex-space-between">
+            <div class="label">商品名称</div>
+            <div class="value">{{ form.spuName }}</div>
+          </div>
+          <div class="info-item flex-align-center flex-space-between">
+            <div class="label">订单编号</div>
+            <div class="value">{{ form.no }}</div>
+          </div>
+          <div class="info-item flex-align-center flex-space-between">
+            <div class="label">费用</div>
+            <div class="value">{{ form.payPrice ? (form.payPrice / 100) : '-' }}</div>
+          </div>
+
+          <div class="info-item  flex-align-center flex-space-between">
+            <div class="label">商品类别</div>
+            <div class="value">{{ form.categoryName }}</div>
+          </div>
+
+        </div>
+
+        <div class="info-block">
+          <div class="info-item flex-align-center flex-space-between" v-for="(i,index) in form.properties"
+               :key="i.index">
+            <div class="label">{{ i.propertyName }}</div>
+            <div class="value">{{ i.valueName }}</div>
+          </div>
+        </div>
+
+        <div class="info-item  flex-align-center flex-space-between">
+          <div class="label">订单状态</div>
+          <div class="value">{{ form.statusName }}</div>
+        </div>
+        <div class="info-item  flex-align-center flex-space-between">
+          <div class="label">下单时间</div>
+          <div class="value">{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancel">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup name="ApiCallLog">
+import {
+  getApiCallLog ,getApiCallLogDetail
+} from '@/api/apicalllog.js'
+import {parseTime} from "../../utils/ruoyi.js";
+
+const {proxy} = getCurrentInstance()
+
+const apiCallLogList = ref([])
+const open = ref(false)
+const sOpen = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const total = ref(0)
+const title = ref('')
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNo: 1,
+    pageSize: 10,
+    path: null,
+    searchQuery: null,
+    status: null
+  },
+})
+
+const {queryParams, form} = toRefs(data)
+
+/** 查询使用记录 */
+function loadList() {
+  loading.value = true
+  getApiCallLog(queryParams.value).then((response) => {
+    apiCallLogList.value = response.data.list
+    total.value = response.data.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    searchQuery: null,
+    status: null
+  }
+  proxy.resetForm('queryRef')
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  loadList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm('queryRef')
+  handleQuery()
+}
+
+function handleDetails(row) {
+  const _id = row.id || ids.value
+  // getResources({id: _id}).then(response => {
+  //   form.value = response.data
+  open.value = true
+  title.value = '查看使用记录详情'
+  // })
+}
+
+loadList()
+</script>
+
+
+<style lang="scss" scoped>
+.el-form {
+  padding: 20px 20px 0 20px;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  background-color: transparent;
+}
+
+.info-block {
+  background-color: #ffffff;
+  padding: 4px 0;
+  //margin-bottom: 14px;
+}
+
+.info-item {
+  padding: 12px 20px;
+
+  .label {
+    font-weight: 400;
+    font-size: 16px;
+    color: #626566;
+  }
+
+  .value {
+    font-weight: bold;
+    font-size: 16px;
+    color: #303233;
+  }
+}
+
+.ellipsis-text {
+  max-width: 180px;    // 控制宽度
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+</style>

src/views/console/apiOrder.vue

@@ -159,7 +159,7 @@
     <pagination
         v-show="total > 0"
         :total="total"
-        v-model:page="queryParams.pageNum"
+        v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
     />