api-setting

一款API匹配组件。在API集市上，选择需要的API，通过拖拽的方式让页面数据和接口数据匹配。

功能一览

> 

安装

npm install api-setting

使用

在main.js中添加以下代码

import apiSetting from 'api-setting'
import 'api-setting/dist/style.css'

const app = createApp(App)

app.use(apiSetting)
app.mount('#app')

在页面中

<ApiSetting
    :onRequestApiList="onRequestApiList"
    :getServiceDetail="getDetail"
    :paramList="paramList"
    :editData="editData"
    @onClose="onClose"
    @onSubmit="onSubmit"
/>

配置项

| 属性 | 说明 | 类型 | 默认值 | | :--------------- | :-------------------------------- | :----- | :----- | | onRequestApiList | 配置首页的api分页表格数据 | object：{tableData: array, total:number, success: boolean} | {tableData: [],total: 0,success: true} | | getServiceDetail | 配置单个api详细信息的数据。要求函数返回格式为{request, response, requestHeader} | function | - | | paramList | 配置数据，详情见下表 | object | - | | editData | 如果已经配置了关联关系，则把onSubmit的值保存起来，赋值到改字段 | object | - | | drawerSize | 详情弹框大小 | string | 100% |

paramList

| 属性 | 说明 | 类型 | 默认值 | | :--------------- | :-------------------------------- | :----- | :----- | | inputData | 页面输入元素 | array | [] | | outputData | 输出元素 | array | [] |

interface InputData {
  id: string;
  label?: string;
  dataIndex?: string; // 选填，组件提前配置好的对应接口字段名
  type?: 'string' | 'number' | 'object' | 'array' | 'date' | 'boolean'; // 默认为'string'
  children?: InputData[]; // 当type为’object’、’array’时为复杂数据类型,需要提供数据内部结构children
  parent?: String;
  status?: 'normal' | 'update' | 'add';
}

interface OutputData {
  id: string;
  label?: string;
  dataIndex?: string; // 选填，组件提前配置好的对应接口字段名
  type?: 'text' | 'array' | 'object'; // 默认为'text'
  children?: OutputData[]; // 当type为’object’、’array’时为复杂数据类型,需要提供数据内部结构children
  status?: 'normal' | 'update' | 'add';
}

事件

| 事件名 | 说明 | 参数 | | :--------------- | :-------------------------------- | :----- | | onClose | 弹框关闭时触发 | - | | onSubmit | 点击提交时触发 | ({serviceId, request, requestHeader, response, responseCode, rawSubmitData}) |