feat:前端项目,完成对接口参数的增删改查页面构建与后端打通

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

@@ -9,9 +9,10 @@ export function addInterface(data) {
     })
 }
 //删除
-export function deleteInterface(data) {
+export function deleteInterface(ids) {
+    let  idStr = ids.join(',');
     return request({
-        url: '/interfaceInfo/'+data,
+        url: `/interfaceInfo/${idStr}`,
         method: 'delete'
     })
 }
@@ -56,5 +57,32 @@ export function getInterfaceById(id) {
         method: 'get',
     })
 }
+export function getInterfaceParamByInterfaceInfoId(id) {
+    return request({
+        url: `/interfaceParam/byInterfaceInfoId/${id}`,
+        method: 'get',
+    })
+}
+export function deleteInterfaceParam(ids) {
+    let  idStr = ids.join(',');
+    return request({
+        url: `/interfaceInfo/${idStr}`,
+        method: 'delete'
+    })
+}
+export function addInterfaceParam(data) {
+    return request({
+        url: '/interfaceParam',
+        method: 'post',
+        data
+    })
+}
+export function updateInterfaceParam(data) {
+    return request({
+        url: '/interfaceParam',
+        method: 'put',
+        data
+    })
+}
 
 

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

@@ -243,6 +243,113 @@ show-word-limit
 </el-form-item>
 </el-form>
 
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <h3>接口参数列表</h3>
+        <div class="header-actions">
+          <el-button type="primary" @click="handleAddParam">
+            <el-icon><Plus /></el-icon>
+            新增参数
+          </el-button>
+          <el-button @click="handleParamRefresh">
+            <el-icon><Refresh /></el-icon>
+            刷新
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+    <!-- 参数表格 -->
+    <div class="table-section">
+      <el-table
+          :data="interfaceParams"
+          v-loading="paramLoading"
+          style="width: 100%"
+          border
+          stripe
+      >
+        <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+            align="center"
+        />
+
+        <el-table-column
+            prop="name"
+            label="参数名称"
+            show-overflow-tooltip
+        >
+          <template #default="scope">
+              <span :class="{ 'body-param': scope.row.type === 1 }">
+                {{ scope.row.name }}
+              </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+            prop="description"
+            label="参数描述"
+            show-overflow-tooltip
+        />
+
+        <el-table-column
+            prop="type"
+            label="参数类型"
+            align="center"
+        >
+          <template #default="scope">
+            <el-tag :type="scope.row.type === 0 ? 'primary' : 'warning'">
+              {{ getParamTypeText(scope.row.type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+            prop="paramType"
+            label="数据类型"
+            align="center"
+        >
+          <template #default="scope">
+            <el-tag
+                :type="getDataTypeTagType(scope.row.paramType)"
+                effect="plain"
+            >
+              {{ scope.row.paramType }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+            label="操作"
+            width="80"
+            fixed="right"
+            align="center"
+        >
+          <template #default="scope">
+            <el-button
+                type="primary"
+                link
+                size="small"
+                @click="handleEditInterfaceParam(scope.row)"
+            >
+              编辑
+            </el-button>
+            <el-button
+                type="danger"
+                link
+                size="small"
+                @click="handleDeleteInterfaceParam(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+
 <template #footer>
 <span class="dialog-footer">
     <el-button @click="handleDialogClose">取消</el-button>
@@ -297,6 +404,69 @@ show-word-limit
 </span>
 </template>
 </el-dialog>
+
+<!--      接口参数的新增和修改对话框-->
+      <el-dialog
+          :title="interfaceParamDialogTitle"
+          v-model="interfaceParamDialogVisible"
+          width="600px"
+          :before-close="handleInterfaceParamDialogClose"
+      >
+        <el-form
+            ref="interfaceParamFormRef"
+            :model="interfaceParamForm"
+            :rules="interfaceParamFormRules"
+            label-width="100px"
+            class="form-container"
+        >
+          <el-form-item label="参数名称" prop="name">
+            <el-input
+                v-model="interfaceParamForm.name"
+                placeholder="请输入参数名称"
+                maxlength="50"
+                show-word-limit
+            />
+          </el-form-item>
+
+          <el-form-item label="参数描述" prop="description">
+            <el-input
+                v-model="interfaceParamForm.description"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入参数描述"
+                maxlength="200"
+                show-word-limit
+            />
+          </el-form-item>
+
+          <el-form-item label="参数类型" prop="type">
+            <el-select v-model="interfaceParamForm.type" placeholder="请选择参数类型" style="width: 100%">
+              <el-option label="QUERY" :value="0" />
+              <el-option label="BODY" :value="1" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="参数数据类型" prop="paramType">
+            <el-select v-model="interfaceParamForm.paramType" placeholder="请选择参数数据类型" style="width: 100%">
+              <el-option label="String" value="string" />
+              <el-option label="Number" value="number" />
+              <el-option label="Boolean" value="boolean" />
+              <el-option label="Object" value="object" />
+              <el-option label="Array" value="array" />
+            </el-select>
+          </el-form-item>
+
+        </el-form>
+
+        <template #footer>
+<span class="dialog-footer">
+    <el-button @click="handleInterfaceParamDialogClose">取消</el-button>
+<el-button type="primary" @click="handleInterfaceParamSubmit" :loading="submitInterfaceParamLoading">
+    确定
+    </el-button>
+</span>
+        </template>
+      </el-dialog>
 </div>
 </template>
 
@@ -312,20 +482,24 @@ show-word-limit
     View
 } from '@element-plus/icons-vue'
     import {
-      addInterface,
-      deleteInterface,
+      addInterface, addInterfaceParam,
+      deleteInterface, deleteInterfaceParam, getInterfaceParamByInterfaceInfoId,
       onlineInterface,
       queryInterface,
-      updateInterface
-    } from "../../commom/api/interfaceInfo.js";
+      updateInterface, updateInterfaceParam
+    } from "/src/commom/api/interfaceInfo.js";
 
     // 响应式数据
     const loading = ref(false)
+    const paramLoading = ref(false)
     const dialogVisible = ref(false)
     const detailDialogVisible = ref(false)
     const submitLoading = ref(false)
+    const interfaceParamDialogVisible = ref(false)
+    const submitInterfaceParamLoading = ref(false)
     const multipleSelection = ref([])
     const currentRow = ref(null)
+    const interfaceInfoId = ref(0)
 
     // 搜索表单
     const searchForm = reactive({
@@ -372,6 +546,16 @@ show-word-limit
         deleteFlag: 0
     }
     ])
+    const interfaceParams = ref([
+      {
+        id:1,
+        interfaceInfoId:1,
+        name:'name',
+        description:'用户名',
+        paramType:'string',
+        type:0,
+      }
+    ])
 
     // 表单数据
     const form = reactive({
@@ -384,9 +568,18 @@ show-word-limit
     status: 1,
     method: ''
 })
+    const interfaceParamForm = reactive({
+    id: undefined,
+    interfaceInfoId:undefined,
+    name: '',
+    description: '',
+    type: 0,
+    paramType: ''
+})
 
     // 表单引用和验证规则
     const formRef = ref()
+    const interfaceParamFormRef = ref()
     const rules = reactive({
     name: [
 { required: true, message: '请输入接口名称', trigger: 'blur' },
@@ -406,12 +599,33 @@ show-word-limit
 { required: true, message: '请选择接口状态', trigger: 'change' }
     ]
 })
+    const interfaceParamFormRules = reactive({
+    name: [
+{ required: true, message: '请输入参数名称', trigger: 'blur' },
+{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+    ],
+    description: [
+{ required: false, message: '请输入参数描述', trigger: 'blur' },
+{ min: 0, max: 200, message: '长度在 0 到 200 个字符', trigger: 'blur' }
+    ],
+    type: [
+{ required: true, message: '请选择参数类型', trigger: 'change' }
+    ],
+    paramType: [
+{ required: true, message: '请选择参数数据类型', trigger: 'change' }
+    ]
+})
 
     // 计算属性
     const dialogTitle = computed(() => {
     return form.id ? '编辑接口' : '新增接口'
 })
 
+    const interfaceParamDialogTitle = computed(() => {
+    return interfaceParamForm.id ? '编辑参数' : '新增参数'
+})
+
+
     // 方法
     const handleSearch = () => {
     pagination.current = 1
@@ -433,12 +647,25 @@ show-word-limit
     dialogVisible.value = true
 }
 
+    const handleAddParam = () => {
+      resetInterfaceParamForm()
+      interfaceParamDialogVisible.value = true
+    }
+
     const handleEdit = (row) => {
     resetForm()
+    interfaceInfoId.value = row.id
+    handleParamRefresh()
     Object.assign(form, { ...row })
     dialogVisible.value = true
 }
 
+    const handleEditInterfaceParam = (row) => {
+      resetInterfaceParamForm()
+      Object.assign(interfaceParamForm, { ...row })
+      interfaceParamDialogVisible.value = true
+    }
+
     const handleView = (row) => {
     currentRow.value = row
     detailDialogVisible.value = true
@@ -458,7 +685,7 @@ show-word-limit
 
     // 调用删除API
     // await deleteInterfaceInfo(row.id)
-      deleteInterface(row.id).then(res=>{
+      deleteInterface([row.id]).then(res=>{
         if(res.code===200){
           ElMessage.success('删除成功')
           fetchTableData()
@@ -472,6 +699,32 @@ show-word-limit
 }
 }
 
+    const handleDeleteInterfaceParam = async (id) => {
+      try {
+        await ElMessageBox.confirm(
+            '确定要删除这个参数吗？',
+            '删除确认',
+            {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+        )
+
+        // 调用删除接口参数的API
+        deleteInterfaceParam([id]).then(res=>{
+          if(res.code===200){
+            handleParamRefresh()
+            ElMessage.success(res.msg)
+          }else{
+            ElMessage.error(res.msg)
+          }
+        })
+      } catch (error) {
+        ElMessage.info('取消删除')
+      }
+    }
+
     const handleBatchDelete = async () => {
     if (multipleSelection.value.length === 0) {
     ElMessage.warning('请选择要删除的接口')
@@ -526,6 +779,11 @@ show-word-limit
     resetForm()
 }
 
+    const handleInterfaceParamDialogClose = () => {
+      interfaceParamDialogVisible.value = false
+      resetInterfaceParamForm()
+    }
+
     const handleSubmit = async () => {
     if (!formRef.value) return
 
@@ -567,6 +825,48 @@ show-word-limit
 }
 }
 
+    const handleInterfaceParamSubmit = async () => {
+      if (!interfaceParamFormRef.value) return
+
+      try {
+        const valid = await interfaceParamFormRef.value.validate()
+        if (valid) {
+          submitInterfaceParamLoading.value = true
+
+          // 设置接口信息ID
+          interfaceParamForm.interfaceInfoId = interfaceInfoId.value
+
+          if (interfaceParamForm.id) {
+            // 调用更新接口参数API
+            updateInterfaceParam(interfaceParamForm).then(res=>{
+              if (res.code===200){
+                ElMessage.success(res.msg)
+                handleParamRefresh()
+              }else{
+                ElMessage.error(res.msg)
+              }
+            })
+          } else {
+            // 调用新增接口参数API
+            addInterfaceParam(interfaceParamForm).then(res=>{
+              if(res.code===200){
+                ElMessage.success(res.msg)
+                handleParamRefresh()
+              }else {
+                ElMessage.error(res.msg)
+              }
+            })
+          }
+          interfaceParamDialogVisible.value = false
+        }
+      } catch (error) {
+        console.error('提交失败:', error)
+        ElMessage.error('操作失败，请稍后重试')
+      } finally {
+        submitInterfaceParamLoading.value = false
+      }
+    }
+
     const resetForm = () => {
     if (formRef.value) {
     formRef.value.resetFields()
@@ -623,6 +923,55 @@ show-word-limit
 }
     return types[method] || 'info'
 }
+
+    // 获取参数类型文本
+    const getParamTypeText = (type) => {
+      const typeMap = {
+        0: 'Query',
+        1: 'Body'
+      }
+      return typeMap[type] || 'Unknown'
+    }
+
+    // 获取数据类型标签类型
+    const getDataTypeTagType = (paramType) => {
+      const typeMap = {
+        'string': 'success',
+        'number': 'primary',
+        'boolean': 'warning',
+        'object': 'info',
+        'array': 'danger'
+      }
+      return typeMap[paramType] || 'info'
+    }
+
+    const handleParamRefresh = ()=>{
+      paramLoading.value = true
+      getInterfaceParamByInterfaceInfoId(interfaceInfoId.value).then((res)=>{
+        if(res.code === 200){
+          interfaceParams.value = res.data
+        }else{
+          ElMessage.error(res.msg)
+        }
+      }).finally(()=>{
+        paramLoading.value = false
+      })
+    }
+
+    const resetInterfaceParamForm = () => {
+      if (interfaceParamFormRef.value) {
+        interfaceParamFormRef.value.resetFields()
+      }
+      Object.assign(interfaceParamForm, {
+        id: null,
+        interfaceInfoId: null,
+        name: '',
+        description: '',
+        type: 0,
+        paramType: ''
+      })
+    }
+
     const handleStatusChange = async (interfaceInfo) =>{
       if(interfaceInfo.status === 1){
         //上线