Api-setting NPM

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';
}