api服务发布授权管理组件

src/components/EditTable.vue

@@ -4,8 +4,8 @@
       <el-table-column v-for="item in props.formData.filter(i=>i.showInTable)" :label="item.label" :prop="item.fieldName" />
       <el-table-column fixed="right" label="操作">
         <template #default="scope">
-          <el-button link type="primary" @click="handleEditRow(scope.$index)">编辑</el-button>
-          <el-popconfirm title="确认删除此条？" @confirm="handleDeleteRow(scope.$index)">
+          <el-button link type="primary" @click="handleEditRow(scope.$index)">{{ props.isEdit? '编辑': '查看'}}</el-button>
+          <el-popconfirm v-if="props.isEdit" title="确认删除此条？" @confirm="handleDeleteRow(scope.$index)">
             <template #reference>
               <el-button link type="primary">删除</el-button>
             </template>
@@ -13,93 +13,97 @@
         </template>
       </el-table-column>
     </el-table>
-    <span class="table-add" @click="handleTableAdd"></span>
+    <span class="table-add" @click="handleTableAdd" v-if="props.isEdit"></span>
     <el-dialog
-      v-model="dialogVisible"
-      :title="editingRowIndex===-1? '新增': '删除'"
-      width="42%"
-      append-to-body
-      :close-on-click-modal="false"
-      draggable
-      :before-close="handleDialogClose"
-      destroy-on-close
-      class="dialog-default"
+            v-model="dialogVisible"
+            :title="editingRowIndex===-1? '新增': '删除'"
+            width="42%"
+            append-to-body
+            :close-on-click-modal="false"
+            draggable
+            :before-close="handleDialogClose"
+            destroy-on-close
+            class="dialog-default"
     >
       <my-form v-if="dialogVisible" ref="my_form" :form-data="props.formData" class="form-dialog"></my-form>
       <template #footer>
-        <el-button class="btn-default primary" type="primary" @click="handleDialogSave">保存</el-button>
-        <el-button class="btn-default" @click="handleDialogClose">取消</el-button>
+        <el-button v-if="props.isEdit" class="btn-default primary" type="primary" @click="handleDialogSave">保存</el-button>
+        <el-button class="btn-default" @click="handleDialogClose">关闭</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import MyForm from './Form.vue'
+  import { onMounted, ref } from 'vue'
+  import MyForm from './Form.vue'
 
-onMounted(() => {
+  onMounted(() => {
 
-})
+  })
 
-const props = defineProps({
-  formData: {
-    type: Array,
-    default: () => []
-  },
-  tableData: {
-    type: Array,
-    default: () => []
-  }
-})
+  const props = defineProps({
+    formData: {
+      type: Array,
+      default: () => []
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    isEdit: {
+      type: Boolean,
+      default: true
+    }
+  })
 
-const editingRowIndex = ref(-1)
+  const editingRowIndex = ref(-1)
 
-function handleEditRow(index) {
-  dialogVisible.value = true
-  editingRowIndex.value = index
-  props.formData.forEach(i => {
-    i.value = props.tableData[index][i.fieldName]
-  })
-}
+  function handleEditRow(index) {
+    dialogVisible.value = true
+    editingRowIndex.value = index
+    props.formData.forEach(i => {
+      i.value = props.tableData[index][i.fieldName]
+    })
+  }
 
-function handleDeleteRow(index) {
-  props.tableData.splice(index,1)
-}
+  function handleDeleteRow(index) {
+    props.tableData.splice(index,1)
+  }
 
-function handleTableAdd() {
-  dialogVisible.value = true
-}
+  function handleTableAdd() {
+    dialogVisible.value = true
+  }
 
-const dialogVisible = ref(false)
+  const dialogVisible = ref(false)
 
-const my_form = ref(null)
+  const my_form = ref(null)
 
-function handleDialogSave() {
-  my_form.value.validateForm().then(valid => {
-    if(valid) {
-      let tableRow = {}
-      props.formData.forEach(i => {
-        tableRow[i.fieldName] = i.value
-      })
-      if(editingRowIndex.value!==-1) {
-        props.tableData[editingRowIndex.value] = tableRow
-      } else {
-        props.tableData.push(tableRow)
+  function handleDialogSave() {
+    my_form.value.validateForm().then(valid => {
+      if(valid) {
+        let tableRow = {}
+        props.formData.forEach(i => {
+          tableRow[i.fieldName] = i.value
+        })
+        if(editingRowIndex.value!==-1) {
+          props.tableData[editingRowIndex.value] = tableRow
+        } else {
+          props.tableData.push(tableRow)
+        }
+        handleDialogClose()
       }
-      handleDialogClose()
-    }
-  })
-}
+    })
+  }
 
-function handleDialogClose() {
-  // my_form.value.clearForm()
-  dialogVisible.value = false
-  editingRowIndex.value = -1
-  props.formData.forEach(i => {
-    i.value = ''
-  })
-}
+  function handleDialogClose() {
+    // my_form.value.clearForm()
+    dialogVisible.value = false
+    editingRowIndex.value = -1
+    props.formData.forEach(i => {
+      i.value = ''
+    })
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -111,7 +115,7 @@ function handleDialogClose() {
     margin: 15px 0;
     border: 1px dashed #ccc;
     cursor: pointer;
-    
+
     &:hover {
       background-color: var(--bg-color-3);
     }

src/views/servicePublishApi/Detail.vue

@@ -171,9 +171,18 @@
                     form.basicInfo.apiUrl = data.apiUrl
                     form.basicInfo.apiRequest = data.apiRequest
                     form.basicInfo.apiExplain = data.apiExplain
-                    tableDataIn.value = JSON.parse(res.data.apiInParam)
-                    tableDataOut.value = JSON.parse(res.data.apiOutParam)
-                    console.log(tableDataIn.value)
+                    let tableOut = res.data.apiOutParam
+                    let tableIn = res.data.apiInParam
+                    if(tableOut===null||tableOut==="{}"||tableOut==="[]") {
+                        tableDataOut.value = []
+                    } else {
+                        tableDataOut.value = JSON.parse(tableOut)
+                    }
+                    if(tableIn===null||tableIn==="{}"||tableIn==="[]") {
+                        tableDataIn.value = []
+                    } else {
+                        tableDataIn.value = JSON.parse(tableIn)
+                    }
                 } else {
                     ElMessage({type:'error', message: '查询失败'})
                 }

src/views/warrantManageApi/Detail.vue

@@ -37,6 +37,10 @@
                         <el-input type="textarea" :rows="4" v-model="form.apiInfo.apiExplain"></el-input>
                     </el-form-item>
                 </el-form>
+                <span class="detail-part-title">输入参数</span>
+                <EditTable :form-data="formDataInParam.value" :table-data="tableDataIn.value" :is-edit="route.params.type!=='Detail'"/>
+                <span class="detail-part-title">返回参数</span>
+                <EditTable :form-data="formDataSjxOutParam.value" :table-data="tableDataOut.value" :is-edit="route.params.type!=='Detail'"/>
                 <span class="detail-part-title">申请信息</span>
                 <el-form :model="form.applicationInfo" label-position="top" ref="applicationInfo" class="form-detail" disabled>
                     <el-form-item label="访问IP" prop="applicationAccessIp">
@@ -94,6 +98,24 @@
 
     const route = useRoute()
     const router = useRouter()
+    const tableDataIn = reactive({value: []})
+    const tableDataOut = reactive({value: []})
+    const formDataInParam = reactive({value: [
+            { fieldName: 'apiParameter', label: '参数名称', value: '', isRequired: true, type: 'input', showInTable: true },
+            { fieldName: 'apiType', label: '参数类型', value: '', isRequired: false, type: 'input', showInTable: true },
+            { fieldName: 'apiMandatory', label: '是否必填', value: '', isRequired: false, type: 'input', showInTable: true },
+            { fieldName: 'apiIllustrate', label: '说明', value: '', isRequired: false, type: 'input', showInTable: true },
+            { fieldName: 'apiNotes', label: '备注', value: '', isRequired: false, type: 'input', showInTable: true },
+
+        ]})
+    const formDataSjxOutParam = reactive({value: [
+            { fieldName: 'apiParameter', label: '参数名称', value: '', isRequired: true, type: 'input', showInTable: true },
+            { fieldName: 'apiType', label: '参数类型', value: '', isRequired: false, type: 'input', showInTable: true },
+            { fieldName: 'apiMandatory', label: '是否必填', value: '', isRequired: false, type: 'input', showInTable: true },
+            { fieldName: 'apiIllustrate', label: '说明', value: '', isRequired: false, type: 'input', showInTable: true },
+            { fieldName: 'apiNotes', label: '备注', value: '', isRequired: false, type: 'input', showInTable: true },
+
+        ]})
     const form = ref({
         apiInfo: {
             apiName: '',
@@ -150,6 +172,18 @@
             if(res.code===200) {
                 const data = res.data
                 form.value.apiInfo = res.data
+                let tableOut = res.data.apiOutParam
+                let tableIn = res.data.apiInParam
+                if(tableOut===null||tableOut==="{}"||tableOut==="[]") {
+                    tableDataOut.value = []
+                } else {
+                    tableDataOut.value = JSON.parse(tableOut)
+                }
+                if(tableIn===null||tableIn==="{}"||tableIn==="[]") {
+                    tableDataIn.value = []
+                } else {
+                    tableDataIn.value = JSON.parse(tableIn)
+                }
                 switch ( data.apiClass) {
                     case 1:
                         form.value.apiInfo.apiClassName = '基础底图'