feat:前端项目,添加接口调用次数SKU管理页面;完成CRUD的功能;

.gitignore

@@ -22,6 +22,7 @@
 
 !/**/**.java
 !/**/**.vue
+!/**/**.js
 !/**/**.yaml
 !/**/**.yml
 !/**/**.properties

ui/yangyi-open-api-platform-ui/src/commom/api/interfaceInvokeSKU.js

@@ -0,0 +1,56 @@
+import request from '/src/commom/utils/request.js'
+
+// 分页查询接口调用次数SKU列表
+export function queryInterfaceInvokeSku(params) {
+    return request({
+        url: '/interfaceInvokeSku',
+        method: 'get',
+        params: {
+            ...params,
+        }
+    })
+}
+
+// 新增接口调用次数SKU
+export function addInterfaceInvokeSku(data) {
+    return request({
+        url: '/interfaceInvokeSku',
+        method: 'post',
+        data
+    })
+}
+
+// 修改接口调用次数SKU
+export function updateInterfaceInvokeSku(data) {
+    return request({
+        url: '/interfaceInvokeSku',
+        method: 'put',
+        data
+    })
+}
+
+// 批量删除接口调用次数SKU
+export function deleteInterfaceInvokeSku(ids) {
+    let idStr = ids.join(',')
+    return request({
+        url: `/interfaceInvokeSku/${idStr}`,
+        method: 'delete'
+    })
+}
+
+// 根据ID查询接口调用次数SKU详情
+export function getInterfaceInvokeSkuById(id) {
+    return request({
+        url: `/interfaceInvokeSku/${id}`,
+        method: 'get'
+    })
+}
+
+// 更新接口调用次数SKU状态
+export function updateInterfaceInvokeSkuStatus(data) {
+    return request({
+        url: '/interfaceInvokeSku/status',
+        method: 'put',
+        data
+    })
+}

ui/yangyi-open-api-platform-ui/src/router/main.js

@@ -28,6 +28,10 @@ const routes = [
                 path:'/manage/interfaceInfo',
                 component:()=>import('/src/views/interfaceInfo/main.vue')
             },
+            {
+                path:'/manage/interfaceInvokeSKU',
+                component:()=>import('/src/views/interfaceInvokeSKU/main.vue')
+            }
 
         ]
     },{

ui/yangyi-open-api-platform-ui/src/views/interfaceInvokeSKU/main.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="interface-invoke-sku">
+    <!--Search-->
+    <div class="filter-container">
+      <el-form :inline="true" :model="queryParams">
+        <el-form-item label="接口ID">
+          <el-input v-model="queryParams.interfaceInfoId" placeholder="请输入接口ID" clearable />
+        </el-form-item>
+        <el-form-item label="商品标题">
+          <el-input v-model="queryParams.title" placeholder="请输入商品标题" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 120px">
+            <el-option label="全部" value="" />
+            <el-option label="未上架" :value="0" />
+            <el-option label="上架" :value="1" />
+            <el-option label="下架" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--Add Button-->
+    <el-button type="primary" @click="handleAdd">
+      <el-icon><Plus /></el-icon>
+      新增SKU
+    </el-button>
+    <!--List-->
+    <el-table :data="skuList" v-loading="loading" border>
+      <el-table-column type="index" width="50" label="序号" />
+      <el-table-column prop="id" label="ID" width="80" />
+      <!--<el-table-column prop="interfaceInfoId" label="接口ID" width="100" />-->
+      <el-table-column prop="title" label="商品标题" min-width="120" />
+      <el-table-column label="封面" width="100">
+        <template #default="{ row }">
+          <el-image
+            v-if="row.cover"
+            :src="row.cover"
+            :preview-src-list="[row.cover]"
+            fit="cover"
+            style="width: 60px; height: 60px; border-radius: 4px;"
+          />
+          <span v-else>无封面</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="price" label="价格" width="100">
+        <template #default="{ row }">
+          ¥{{ row.price }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="quantity" label="数量" width="80" />
+      <el-table-column prop="info" label="描述" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="status" label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.status)">
+            {{ getStatusText(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="210" fixed="right">
+        <template #default="{ row }">
+          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
+          <el-button
+            size="small"
+            :type="row.status === 1 ? 'warning' : 'success'"
+            @click="handleStatusChange(row)"
+          >
+            {{ row.status === 1 ? '下架' : '上架' }}
+          </el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--pagination-->
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="queryParams.page"
+        v-model:page-size="queryParams.size"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <!--Add or Update-->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增SKU' : '编辑SKU'"
+      width="600px"
+    >
+      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="接口ID" prop="interfaceInfoId">
+          <el-input
+            v-model="formData.interfaceInfoId"
+            :disabled="dialogType === 'edit'"
+            :placeholder="dialogType === 'add' ? '请输入接口ID' : ''"
+          />
+        </el-form-item>
+        <el-form-item label="商品标题" prop="title">
+          <el-input v-model="formData.title" placeholder="请输入商品标题" />
+        </el-form-item>
+        <el-form-item label="封面图片" prop="cover">
+          <el-input v-model="formData.cover" placeholder="请输入封面图片URL" />
+        </el-form-item>
+        <el-form-item label="价格" prop="price">
+          <el-input-number v-model="formData.price" :min="0" :precision="2" :step="0.01" />
+        </el-form-item>
+        <el-form-item label="数量" prop="quantity">
+          <el-input-number v-model="formData.quantity" :min="1" :step="1" />
+        </el-form-item>
+        <el-form-item label="描述" prop="info">
+          <el-input v-model="formData.info" type="textarea" :rows="3" placeholder="请输入描述信息" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="0">未上架</el-radio>
+            <el-radio :label="1">上架</el-radio>
+            <el-radio :label="2">下架</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import {
+  queryInterfaceInvokeSku,
+  addInterfaceInvokeSku,
+  updateInterfaceInvokeSku,
+  deleteInterfaceInvokeSku, updateInterfaceInvokeSkuStatus
+} from '/src/commom/api/interfaceInvokeSKU.js'
+
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogType = ref('add')
+const formRef = ref()
+const total = ref(0)
+
+const queryParams = reactive({
+  page: 1,
+  size: 10,
+  interfaceInfoId: '',
+  title: '',
+  status: ''
+})
+
+const formData = reactive({
+  id: '',
+  interfaceInfoId: '',
+  title: '',
+  cover: '',
+  price: 0,
+  quantity: 1,
+  info: '',
+  status: 0
+})
+
+const skuList = ref([])
+
+const rules = {
+  interfaceInfoId: [
+    { required: true, message: '请输入接口ID', trigger: 'blur' }
+  ],
+  title: [
+    { required: true, message: '请输入商品标题', trigger: 'blur' }
+  ],
+  price: [
+    { required: true, message: '请输入价格', trigger: 'blur' }
+  ],
+  quantity: [
+    { required: true, message: '请输入数量', trigger: 'blur' }
+  ]
+}
+
+const getStatusText = (status) => {
+  const statusMap = {
+    0: '未上架',
+    1: '上架',
+    2: '下架'
+  }
+  return statusMap[status] || '未知'
+}
+
+const getStatusType = (status) => {
+  const typeMap = {
+    0: 'info',
+    1: 'success',
+    2: 'warning'
+  }
+  return typeMap[status] || 'info'
+}
+
+const fetchSkuList = async () => {
+  loading.value = true
+  try {
+    const response = await queryInterfaceInvokeSku({
+      current: queryParams.page,
+      size: queryParams.size,
+      interfaceInfoId: queryParams.interfaceInfoId,
+      title: queryParams.title,
+      status: queryParams.status
+    })
+
+    if (response.code === 200) {
+      skuList.value = response.data.records || []
+      total.value = response.data.total || 0
+    } else {
+      ElMessage.error(response.message || '获取数据失败')
+    }
+  } catch (error) {
+    ElMessage.error('获取数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => {
+  queryParams.page = 1
+  fetchSkuList()
+}
+
+const handleReset = () => {
+  Object.assign(queryParams, {
+    page: 1,
+    size: 10,
+    interfaceInfoId: '',
+    title: '',
+    status: ''
+  })
+  fetchSkuList()
+}
+
+const handleSizeChange = (size) => {
+  queryParams.size = size
+  fetchSkuList()
+}
+
+const handleCurrentChange = (page) => {
+  queryParams.page = page
+  fetchSkuList()
+}
+
+const handleAdd = () => {
+  dialogType.value = 'add'
+  dialogVisible.value = true
+  Object.assign(formData, {
+    id: '',
+    interfaceInfoId: '',
+    title: '',
+    cover: '',
+    price: 0,
+    quantity: 1,
+    info: '',
+    status: 0
+  })
+}
+
+const handleEdit = (row) => {
+  dialogType.value = 'edit'
+  dialogVisible.value = true
+  Object.assign(formData, { ...row })
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    if (dialogType.value === 'add') {
+      const response = await addInterfaceInvokeSku(formData)
+      if (response.code === 200) {
+        ElMessage.success('新增成功')
+        dialogVisible.value = false
+        fetchSkuList()
+      } else {
+        ElMessage.error(response.message || '新增失败')
+      }
+    } else {
+      const response = await updateInterfaceInvokeSku(formData)
+      if (response.code === 200) {
+        ElMessage.success('编辑成功')
+        dialogVisible.value = false
+        fetchSkuList()
+      } else {
+        ElMessage.error(response.message || '编辑失败')
+      }
+    }
+  } catch (error) {
+    ElMessage.error('表单验证失败')
+  }
+}
+
+const handleStatusChange = async (row) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要${row.status === 1 ? '下架' : '上架'}该SKU吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+
+    const newStatus = row.status === 1 ? 2 : 1
+    const updateData = {
+      id: row.id,
+      status: newStatus
+    }
+
+    const response = await updateInterfaceInvokeSkuStatus(updateData)
+    if (response.code === 200) {
+      ElMessage.success('操作成功')
+      fetchSkuList()
+    } else {
+      ElMessage.error(response.message || '操作失败')
+    }
+  } catch (error) {
+    // 用户取消操作
+  }
+}
+
+const handleDelete = async (row) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要删除该SKU吗？',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+
+    const response = await deleteInterfaceInvokeSku([row.id])
+    if (response.code === 200) {
+      ElMessage.success('删除成功')
+      fetchSkuList()
+    } else {
+      ElMessage.error(response.message || '删除失败')
+    }
+  } catch (error) {
+    // 用户取消操作
+  }
+}
+
+onMounted(() => {
+  fetchSkuList()
+})
+</script>
+
+<style scoped>
+.interface-invoke-sku {
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.filter-container {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>

ui/yangyi-open-api-platform-ui/src/views/main.vue

@@ -165,6 +165,18 @@ const menuList = computed(()=>{
           }
         ]
       },
+      {
+        path:'/goods',
+        title: '商品管理',
+        icon: 'el-icon-goods',
+        children: [
+          {
+            path: '/manage/interfaceInvokeSKU',
+            title: '接口调用次数SKU',
+            icon: 'el-icon-notebook-2'
+          }
+        ]
+      }
     ]
   }else if (role === '用户'){
     return [