接口列表

src/assets/styles/index.scss

@@ -323,6 +323,20 @@ aside {
   }
 }
 
+.common-back-box {
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  margin-bottom: 10px;
+  .common-back {
+    width: 13px;
+    height: 10px;
+    background: url('@/assets/images/back.png') no-repeat;
+    background-size: 100% 100%;
+    display: inline-block;
+  }
+}
+
 .dot-red {
   width: 6px;
   height: 6px;

src/views/commodityManage/InterfaceList.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="detail-container">
+    <div class="common-back-box" @click="handleBack">
+      <i class="common-back" />
+      返回上一级
+    </div>
+    <div>
+      <transition name="fade">
+        <el-form ref="queryFormRef" :model="queryParams">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="接口名称：" prop="name">
+                <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter="handleQuery"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="服务状态：" prop="serviceStatus">
+                <el-select v-model="queryParams.serviceStatus" clearable>
+                  <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+              <el-button @click="resetQuery">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </transition>
+      <!-- 表格组件 -->
+      <el-table ref="tableRef" v-loading="loading" :data="dataList">
+        <el-table-column label="id" align="center" prop="id" />
+        <el-table-column label="接口名称" align="center" prop="name" />
+        <el-table-column label="调用量" align="center" prop="count" />
+        <el-table-column label="调用成功数" align="center" prop="successAmount" />
+        <el-table-column label="接口状态" align="center" prop="status">
+          <template #default="scope">
+            <div :class="scope.row.status === '0' ? 'common-btn-text-danger' : 'common-btn-text-primary'" style="cursor: auto">
+              {{ scope.row.status === '0' ? '异常' : '正常' }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="来源" align="center" prop="source" />
+      </el-table>
+
+      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = reactive({
+  id: String
+});
+const emits = defineEmits(['back']);
+const queryFormRef = ref();
+// 搜索条件
+const queryParams = reactive({
+  name: '',
+  serviceClass: '',
+  page: '',
+  page_size: ''
+});
+// 表格数据
+const dataList = ref([]);
+// 加载中
+const loading = ref(false);
+// 总数
+const total = ref(0);
+// 获取数据
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    dataList.value = [
+      { id: 213, name: '接口名称', count: 50, successAmount: 49, status: '0', source: 'xxx平台' },
+      { id: 123, name: 'xxx1接口名称', count: 50, successAmount: 50, status: '1', source: 'xxx平台' }
+    ];
+    loading.value = false;
+  }, 500);
+};
+// 点击查询
+const handleQuery = () => {
+  queryParams.page = 1;
+  getList();
+};
+
+// 重置查询条件
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields(); // 重置表单并清除校验状态
+  }
+  getList();
+};
+
+const handleBack = () => {
+  emits('back');
+};
+getList();
+</script>
+
+<style lang="scss" scoped></style>

src/views/commodityManage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div v-show="!commodityManageFormState.show">
+    <div v-show="!(commodityManageFormState.show || interfaceListData.show)">
       <transition name="fade">
         <el-form ref="queryFormRef" :model="queryParams">
           <el-row :gutter="20">
@@ -56,8 +56,12 @@
         <el-table-column label="支付数" align="center" prop="payAmount" />
         <el-table-column label="销量" align="center" prop="sales" />
         <el-table-column label="退款数" align="center" prop="refundAmount" />
-        <el-table-column label="接口数" align="center" prop="" />
-        <el-table-column label="调用数" align="center" prop="" />
+        <el-table-column label="接口数" align="center" prop="interfacesAmount">
+          <template #default="scope">
+            <el-text class="common-btn-text-primary" @click="showInterfaceList(scope.row)">{{ scope.row.interfacesAmount }}</el-text>
+          </template>
+        </el-table-column>
+        <el-table-column label="调用数" align="center" prop="callAmount" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
@@ -66,19 +70,20 @@
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size"
-                  :total="total" @pagination="getList"/>
+      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
     </div>
     <CommodityManageForm
       v-if="commodityManageFormState.show"
       @onCancel="commodityManageFormState.show = false"
       @onConfirm="handleCommodityManageFormState"
     />
+    <InterfaceList v-if="interfaceListData.show" :id="interfaceListData.id" @back="handleBack" />
   </div>
 </template>
 
 <script setup name="CommodityManage">
 import CommodityManageForm from './CommodityManageForm.vue';
+import InterfaceList from './InterfaceList.vue';
 
 const { proxy } = getCurrentInstance();
 const queryFormRef = ref();
@@ -113,6 +118,7 @@ const commodityManageFormState = ref({
 const getList = () => {
   loading.value = true;
   setTimeout(() => {
+    dataList.value = [{ interfacesAmount: 20 }];
     loading.value = false;
   }, 500);
 };
@@ -166,6 +172,25 @@ const handleImport = () => {};
 // 导出
 const handleExport = () => {};
 
+//接口列表参数
+const interfaceListData = ref({
+  show: false,
+  id: ''
+});
+// 接口列表界面
+const showInterfaceList = (row) => {
+  interfaceListData.value = {
+    show: true,
+    id: row.id
+  };
+};
+
+const handleBack = () => {
+  interfaceListData.value = {
+    show: false,
+    id: ''
+  };
+};
 getList();
 </script>