|
|
@@ -0,0 +1,730 @@
|
|
|
+<template>
|
|
|
+ <div class="interface-info-container">
|
|
|
+ <!--<div class="page-header">-->
|
|
|
+ <!-- <h1 class="page-title">接口信息管理</h1>-->
|
|
|
+ <!-- <p class="page-description">管理系统所有接口的基本信息和配置</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+ <!-- 搜索和操作区域 -->
|
|
|
+ <el-card class="search-card">
|
|
|
+ <el-form :model="searchForm" :inline="true" class="search-form">
|
|
|
+ <el-form-item label="接口名称">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.name"
|
|
|
+ placeholder="请输入接口名称"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="接口状态">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.status"
|
|
|
+ placeholder="请选择状态"
|
|
|
+ clearable
|
|
|
+ style="width: 120px"
|
|
|
+ >
|
|
|
+ <el-option label="开启" value="1" />
|
|
|
+ <el-option label="关闭" value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="请求类型">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.method"
|
|
|
+ placeholder="请选择请求类型"
|
|
|
+ clearable
|
|
|
+ style="width: 120px"
|
|
|
+ >
|
|
|
+ <el-option label="GET" value="GET" />
|
|
|
+ <el-option label="POST" value="POST" />
|
|
|
+ <el-option label="PUT" value="PUT" />
|
|
|
+ <el-option label="DELETE" value="DELETE" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch" :icon="Search">
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleReset" :icon="Refresh">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+</el-form>
|
|
|
+</el-card>
|
|
|
+
|
|
|
+<!-- 操作按钮区域 -->
|
|
|
+<div class="operation-area">
|
|
|
+ <el-button type="primary" @click="handleAdd" :icon="Plus">
|
|
|
+ 新增接口
|
|
|
+</el-button>
|
|
|
+<el-button
|
|
|
+ type="danger"
|
|
|
+ :disabled="multipleSelection.length === 0"
|
|
|
+@click="handleBatchDelete"
|
|
|
+:icon="Delete"
|
|
|
+ >
|
|
|
+ 批量删除
|
|
|
+ </el-button>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 数据表格 -->
|
|
|
+<el-card class="table-card">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ :default-sort="{ prop: 'createTime', order: 'descending' }"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+
|
|
|
+ <!--<el-table-column prop="id" label="ID" width="80" sortable />-->
|
|
|
+
|
|
|
+ <el-table-column prop="name" label="接口名称" min-width="150" show-overflow-tooltip />
|
|
|
+
|
|
|
+ <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
|
|
+
|
|
|
+ <el-table-column prop="url" label="接口地址" min-width="200" show-overflow-tooltip>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag type="info" size="small">{{ row.method }}</el-tag>
|
|
|
+ <span style="margin-left: 8px">{{ row.url }}</span>
|
|
|
+ </template>
|
|
|
+</el-table-column>
|
|
|
+
|
|
|
+<el-table-column prop="status" label="状态" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="row.status === 1 ? 'success' : 'danger'">
|
|
|
+ {{ row.status === 1 ? '开启' : '关闭' }}
|
|
|
+</el-tag>
|
|
|
+</template>
|
|
|
+</el-table-column>
|
|
|
+
|
|
|
+<el-table-column prop="method" label="请求类型" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag
|
|
|
+ :type="getMethodTagType(row.method)"
|
|
|
+ effect="light"
|
|
|
+ >
|
|
|
+ {{ row.method }}
|
|
|
+</el-tag>
|
|
|
+</template>
|
|
|
+</el-table-column>
|
|
|
+
|
|
|
+<el-table-column prop="createTime" label="创建时间" width="180" sortable>
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ formatDate(row.createTime) }}
|
|
|
+</template>
|
|
|
+</el-table-column>
|
|
|
+
|
|
|
+<el-table-column prop="updateTime" label="更新时间" width="180" sortable>
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ formatDate(row.updateTime) }}
|
|
|
+</template>
|
|
|
+</el-table-column>
|
|
|
+
|
|
|
+<el-table-column label="操作" width="200" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ link
|
|
|
+ @click="handleEdit(row)"
|
|
|
+ :icon="Edit"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+</el-button>
|
|
|
+<el-button
|
|
|
+ size="small"
|
|
|
+ type="success"
|
|
|
+ link
|
|
|
+ @click="handleView(row)"
|
|
|
+:icon="View"
|
|
|
+ >
|
|
|
+ 详情
|
|
|
+ </el-button>
|
|
|
+<el-button
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ link
|
|
|
+ @click="handleDelete(row)"
|
|
|
+:icon="Delete"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+</template>
|
|
|
+</el-table-column>
|
|
|
+</el-table>
|
|
|
+
|
|
|
+<!-- 分页 -->
|
|
|
+<div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pagination.current"
|
|
|
+ v-model:page-size="pagination.size"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :total="pagination.total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+</div>
|
|
|
+</el-card>
|
|
|
+
|
|
|
+<!-- 新增/编辑对话框 -->
|
|
|
+<el-dialog
|
|
|
+ :title="dialogTitle"
|
|
|
+v-model="dialogVisible"
|
|
|
+width="600px"
|
|
|
+:before-close="handleDialogClose"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ref="formRef"
|
|
|
+:model="form"
|
|
|
+:rules="rules"
|
|
|
+label-width="100px"
|
|
|
+class="form-container"
|
|
|
+ >
|
|
|
+ <el-form-item label="接口名称" prop="name">
|
|
|
+ <el-input
|
|
|
+v-model="form.name"
|
|
|
+placeholder="请输入接口名称"
|
|
|
+maxlength="50"
|
|
|
+show-word-limit
|
|
|
+/>
|
|
|
+</el-form-item>
|
|
|
+
|
|
|
+<el-form-item label="接口描述" prop="description">
|
|
|
+ <el-input
|
|
|
+ v-model="form.description"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入接口描述"
|
|
|
+ maxlength="200"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+</el-form-item>
|
|
|
+
|
|
|
+<el-form-item label="接口地址" prop="url">
|
|
|
+ <el-input
|
|
|
+ v-model="form.url"
|
|
|
+ placeholder="请输入接口地址，如：/api/user/list"
|
|
|
+ />
|
|
|
+</el-form-item>
|
|
|
+
|
|
|
+<el-form-item label="请求类型" prop="method">
|
|
|
+ <el-select v-model="form.method" placeholder="请选择请求类型" style="width: 100%">
|
|
|
+ <el-option label="GET" value="GET" />
|
|
|
+ <el-option label="POST" value="POST" />
|
|
|
+ <el-option label="PUT" value="PUT" />
|
|
|
+ <el-option label="DELETE" value="DELETE" />
|
|
|
+ </el-select>
|
|
|
+</el-form-item>
|
|
|
+
|
|
|
+<el-form-item label="请求头" prop="requestHeader">
|
|
|
+ <el-input
|
|
|
+ v-model="form.requestHeader"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder='请输入请求头，JSON格式，如：{"Content-Type": "application/json"}'
|
|
|
+ />
|
|
|
+</el-form-item>
|
|
|
+
|
|
|
+<el-form-item label="响应头" prop="responseHeader">
|
|
|
+ <el-input
|
|
|
+ v-model="form.responseHeader"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder='请输入响应头，JSON格式，如：{"Content-Type": "application/json"}'
|
|
|
+ />
|
|
|
+</el-form-item>
|
|
|
+
|
|
|
+<el-form-item label="接口状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio :label="1">开启</el-radio>
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
+</el-radio-group>
|
|
|
+</el-form-item>
|
|
|
+</el-form>
|
|
|
+
|
|
|
+<template #footer>
|
|
|
+<span class="dialog-footer">
|
|
|
+ <el-button @click="handleDialogClose">取消</el-button>
|
|
|
+<el-button type="primary" @click="handleSubmit" :loading="submitLoading">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+</span>
|
|
|
+</template>
|
|
|
+</el-dialog>
|
|
|
+
|
|
|
+<!-- 详情对话框 -->
|
|
|
+<el-dialog
|
|
|
+ title="接口详情"
|
|
|
+ v-model="detailDialogVisible"
|
|
|
+ width="700px"
|
|
|
+>
|
|
|
+ <el-descriptions :column="2" border>
|
|
|
+ <el-descriptions-item label="接口ID">{{ currentRow?.id }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="接口名称">{{ currentRow?.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="接口描述" :span="2">
|
|
|
+ {{ currentRow?.description }}
|
|
|
+</el-descriptions-item>
|
|
|
+<el-descriptions-item label="接口地址" :span="2">
|
|
|
+ <el-tag :type="getMethodTagType(currentRow?.method)" style="margin-right: 8px">
|
|
|
+ {{ currentRow?.method }}
|
|
|
+</el-tag>
|
|
|
+{{ currentRow?.url }}
|
|
|
+</el-descriptions-item>
|
|
|
+<el-descriptions-item label="接口状态">
|
|
|
+ <el-tag :type="currentRow?.status === 1 ? 'success' : 'danger'">
|
|
|
+ {{ currentRow?.status === 1 ? '开启' : '关闭' }}
|
|
|
+</el-tag>
|
|
|
+</el-descriptions-item>
|
|
|
+<el-descriptions-item label="创建人">{{ currentRow?.userId }}</el-descriptions-item>
|
|
|
+<el-descriptions-item label="请求头" :span="2">
|
|
|
+ <pre class="json-content">{{ formatJson(currentRow?.requestHeader) }}</pre>
|
|
|
+</el-descriptions-item>
|
|
|
+<el-descriptions-item label="响应头" :span="2">
|
|
|
+ <pre class="json-content">{{ formatJson(currentRow?.responseHeader) }}</pre>
|
|
|
+</el-descriptions-item>
|
|
|
+<el-descriptions-item label="创建时间">
|
|
|
+ {{ formatDate(currentRow?.createTime) }}
|
|
|
+</el-descriptions-item>
|
|
|
+<el-descriptions-item label="更新时间">
|
|
|
+ {{ formatDate(currentRow?.updateTime) }}
|
|
|
+</el-descriptions-item>
|
|
|
+</el-descriptions>
|
|
|
+
|
|
|
+<template #footer>
|
|
|
+<span class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
|
|
|
+</span>
|
|
|
+</template>
|
|
|
+</el-dialog>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref, reactive, onMounted, computed } from 'vue'
|
|
|
+ import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+ import {
|
|
|
+ Search,
|
|
|
+ Refresh,
|
|
|
+ Plus,
|
|
|
+ Edit,
|
|
|
+ Delete,
|
|
|
+ View
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+ import {addInterface, deleteInterface, queryInterface, updateInterface} from "../../commom/api/interfaceInfo.js";
|
|
|
+
|
|
|
+ // 响应式数据
|
|
|
+ const loading = ref(false)
|
|
|
+ const dialogVisible = ref(false)
|
|
|
+ const detailDialogVisible = ref(false)
|
|
|
+ const submitLoading = ref(false)
|
|
|
+ const multipleSelection = ref([])
|
|
|
+ const currentRow = ref(null)
|
|
|
+
|
|
|
+ // 搜索表单
|
|
|
+ const searchForm = reactive({
|
|
|
+ name: '',
|
|
|
+ status: '',
|
|
|
+ method: ''
|
|
|
+})
|
|
|
+
|
|
|
+ // 分页配置
|
|
|
+ const pagination = reactive({
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ total: 0
|
|
|
+})
|
|
|
+
|
|
|
+ // 表格数据
|
|
|
+ const tableData = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '用户列表接口',
|
|
|
+ description: '获取系统所有用户列表信息',
|
|
|
+ url: '/api/user/list',
|
|
|
+ requestHeader: '{"Content-Type": "application/json"}',
|
|
|
+ responseHeader: '{"Content-Type": "application/json"}',
|
|
|
+ status: 1,
|
|
|
+ method: 'GET',
|
|
|
+ userId: 1,
|
|
|
+ createTime: new Date('2024-01-15 10:00:00'),
|
|
|
+ updateTime: new Date('2024-01-15 10:00:00'),
|
|
|
+ deleteFlag: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '新增用户接口',
|
|
|
+ description: '创建新的系统用户',
|
|
|
+ url: '/api/user/add',
|
|
|
+ requestHeader: '{"Content-Type": "application/json"}',
|
|
|
+ responseHeader: '{"Content-Type": "application/json"}',
|
|
|
+ status: 1,
|
|
|
+ method: 'POST',
|
|
|
+ userId: 1,
|
|
|
+ createTime: new Date('2024-01-16 14:30:00'),
|
|
|
+ updateTime: new Date('2024-01-16 14:30:00'),
|
|
|
+ deleteFlag: 0
|
|
|
+ }
|
|
|
+ ])
|
|
|
+
|
|
|
+ // 表单数据
|
|
|
+ const form = reactive({
|
|
|
+ id: null,
|
|
|
+ name: '',
|
|
|
+ description: '',
|
|
|
+ url: '',
|
|
|
+ requestHeader: '',
|
|
|
+ responseHeader: '',
|
|
|
+ status: 1,
|
|
|
+ method: ''
|
|
|
+})
|
|
|
+
|
|
|
+ // 表单引用和验证规则
|
|
|
+ const formRef = ref()
|
|
|
+ const rules = reactive({
|
|
|
+ name: [
|
|
|
+{ required: true, message: '请输入接口名称', trigger: 'blur' },
|
|
|
+{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ description: [
|
|
|
+{ required: true, message: '请输入接口描述', trigger: 'blur' },
|
|
|
+{ min: 5, max: 200, message: '长度在 5 到 200 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ url: [
|
|
|
+{ required: true, message: '请输入接口地址', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ method: [
|
|
|
+{ required: true, message: '请选择请求类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+{ required: true, message: '请选择接口状态', trigger: 'change' }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+ // 计算属性
|
|
|
+ const dialogTitle = computed(() => {
|
|
|
+ return form.id ? '编辑接口' : '新增接口'
|
|
|
+})
|
|
|
+
|
|
|
+ // 方法
|
|
|
+ const handleSearch = () => {
|
|
|
+ pagination.current = 1
|
|
|
+ fetchTableData()
|
|
|
+}
|
|
|
+
|
|
|
+ const handleReset = () => {
|
|
|
+ Object.assign(searchForm, {
|
|
|
+ name: '',
|
|
|
+ status: '',
|
|
|
+ method: ''
|
|
|
+ })
|
|
|
+ pagination.current = 1
|
|
|
+ fetchTableData()
|
|
|
+}
|
|
|
+
|
|
|
+ const handleAdd = () => {
|
|
|
+ resetForm()
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+ const handleEdit = (row) => {
|
|
|
+ resetForm()
|
|
|
+ Object.assign(form, { ...row })
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+ const handleView = (row) => {
|
|
|
+ currentRow.value = row
|
|
|
+ detailDialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+ const handleDelete = async (row) => {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm(
|
|
|
+ `确定要删除接口 "${row.name}" 吗？`,
|
|
|
+ '删除确认',
|
|
|
+{
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+}
|
|
|
+ )
|
|
|
+
|
|
|
+ // 调用删除API
|
|
|
+ // await deleteInterfaceInfo(row.id)
|
|
|
+ deleteInterface(row.id).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ fetchTableData()
|
|
|
+ }else{
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+} catch (error) {
|
|
|
+ // 用户取消删除
|
|
|
+ ElMessage.info('取消删除')
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+ const handleBatchDelete = async () => {
|
|
|
+ if (multipleSelection.value.length === 0) {
|
|
|
+ ElMessage.warning('请选择要删除的接口')
|
|
|
+ return
|
|
|
+}
|
|
|
+
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm(
|
|
|
+ `确定要删除选中的 ${multipleSelection.value.length} 个接口吗？`,
|
|
|
+ '批量删除确认',
|
|
|
+{
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+}
|
|
|
+ )
|
|
|
+
|
|
|
+ const ids = multipleSelection.value.map(item => item.id)
|
|
|
+ // 调用批量删除API
|
|
|
+ // await batchDeleteInterfaceInfo(ids)
|
|
|
+ deleteInterface(ids).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('批量删除成功')
|
|
|
+ multipleSelection.value = []
|
|
|
+ fetchTableData()
|
|
|
+ }else{
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+} catch (error) {
|
|
|
+ // 用户取消删除
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+ const handleSelectionChange = (selection) => {
|
|
|
+ multipleSelection.value = selection
|
|
|
+}
|
|
|
+
|
|
|
+ const handleSizeChange = (size) => {
|
|
|
+ pagination.size = size
|
|
|
+ pagination.current = 1
|
|
|
+ fetchTableData()
|
|
|
+}
|
|
|
+
|
|
|
+ const handleCurrentChange = (current) => {
|
|
|
+ pagination.current = current
|
|
|
+ fetchTableData()
|
|
|
+}
|
|
|
+
|
|
|
+ const handleDialogClose = () => {
|
|
|
+ dialogVisible.value = false
|
|
|
+ resetForm()
|
|
|
+}
|
|
|
+
|
|
|
+ const handleSubmit = async () => {
|
|
|
+ if (!formRef.value) return
|
|
|
+
|
|
|
+ try {
|
|
|
+ const valid = await formRef.value.validate()
|
|
|
+ if (valid) {
|
|
|
+ submitLoading.value = true
|
|
|
+
|
|
|
+ if (form.id) {
|
|
|
+ // 调用更新API
|
|
|
+ updateInterface(form).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('更新成功')
|
|
|
+ fetchTableData()
|
|
|
+ }else{
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+} else {
|
|
|
+ // 调用新增API
|
|
|
+ addInterface(form).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage.success('新增成功')
|
|
|
+ fetchTableData()
|
|
|
+ }else{
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+ dialogVisible.value = false
|
|
|
+ // fetchTableData()
|
|
|
+}
|
|
|
+} catch (error) {
|
|
|
+ console.error('提交失败:', error)
|
|
|
+ ElMessage.error('操作失败，请稍后重试')
|
|
|
+} finally {
|
|
|
+ submitLoading.value = false
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+ const resetForm = () => {
|
|
|
+ if (formRef.value) {
|
|
|
+ formRef.value.resetFields()
|
|
|
+}
|
|
|
+ Object.assign(form, {
|
|
|
+ id: null,
|
|
|
+ name: '',
|
|
|
+ description: '',
|
|
|
+ url: '',
|
|
|
+ requestHeader: '',
|
|
|
+ responseHeader: '',
|
|
|
+ status: 1,
|
|
|
+ method: ''
|
|
|
+})
|
|
|
+}
|
|
|
+
|
|
|
+ const fetchTableData = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ // 模拟API调用
|
|
|
+ queryInterface({...searchForm, ...pagination }).then((res) => {
|
|
|
+ tableData.value = res.data.records
|
|
|
+ pagination.total = res.data.total
|
|
|
+ })
|
|
|
+} catch (error) {
|
|
|
+ console.error('获取数据失败:', error)
|
|
|
+ ElMessage.error('获取数据失败')
|
|
|
+} finally {
|
|
|
+ loading.value = false
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+ const formatDate = (date) => {
|
|
|
+ if (!date) return '-'
|
|
|
+ return new Date(date).toLocaleString('zh-CN')
|
|
|
+}
|
|
|
+
|
|
|
+ const formatJson = (jsonStr) => {
|
|
|
+ if (!jsonStr) return '-'
|
|
|
+ try {
|
|
|
+ const obj = JSON.parse(jsonStr)
|
|
|
+ return JSON.stringify(obj, null, 2)
|
|
|
+} catch {
|
|
|
+ return jsonStr
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+ const getMethodTagType = (method) => {
|
|
|
+ const types = {
|
|
|
+ 'GET': 'success',
|
|
|
+ 'POST': 'primary',
|
|
|
+ 'PUT': 'warning',
|
|
|
+ 'DELETE': 'danger'
|
|
|
+}
|
|
|
+ return types[method] || 'info'
|
|
|
+}
|
|
|
+
|
|
|
+ // 生命周期
|
|
|
+ onMounted(() => {
|
|
|
+ fetchTableData()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .interface-info-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+ .page-header {
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+}
|
|
|
+
|
|
|
+ .page-description {
|
|
|
+ color: #666;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+ .search-card {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ .search-form {
|
|
|
+ margin-bottom: -18px;
|
|
|
+}
|
|
|
+
|
|
|
+ .operation-area {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ .table-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+ .pagination-container {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+ .form-container {
|
|
|
+ padding-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+ .json-content {
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+ /* 响应式设计 */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .interface-info-container {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ .search-form {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+ .search-form .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+ .search-form .el-form-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ .interface-info-container {
|
|
|
+ padding: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+ .operation-area {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+ .operation-area .el-button {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+}
|
|
|
+</style>
|
